@media screen and (min-width: 480px) {

    /* HomePage START */
    body {
        font-family: Colfax;
       /*overflow-x:hidden;*/
    }

    .bannerPhoto {
        position: relative;
        margin-bottom: -20px;
        width:100%;
    }

        .bannerPhoto img {
            width: 100%;
            height: auto;
           
        }

    .bannerText {
        width: 60%;
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, -0%);
     
        
    }

    .subheader {
        display: flex;
        flex-direction: column;
    }

        .subheader p {
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            color: #6d6e71;
            letter-spacing: normal;
            width: 80%;
        }

        .subheader span {
            color: #636466;
        }

        .subheader img {
            width: 55%;
            height: auto;
        }

    .intro_bg {
        background-image: url('/images/Revamp2019/GK1World header bg.jpg');
        background-size: cover;
    }

    .intro_innerbg {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        padding-top: 100px;
    }
        .intro_innerbg img {
            width: 55%; 
            height: auto;
        }

    .intro_style_a {
        font-family: ColfaxBold;
        color: #404142;
        /*text-transform: uppercase;*/
        font-size: 15px;
        letter-spacing: 0.75px;
    }

    .intro_style_a .bold {
            /*color: black;*/
        }

    .intro_style_b {
        font-family: ColfaxLight;
        font-size: 25px;
        letter-spacing: -0.25px;
        /*text-align: center;*/
        color: #636466;
        line-height:45px;
    }

        .intro_style_b .bold {
            /*font-family: Colfax;*/
        }

        .intro_style_b .highlight{
            font-family: Authentic;
            font-size: 85px;
            color: #ff9900;
        }

    .intro_style_c {
        font-family: ColfaxLight;
        font-size: 40px;
        letter-spacing: -1px;
        text-align: center;
        color: gray;
        display: inline-block;
        margin: 30px 0px 50px 0px;
    }

        .intro_style_c .bold {
            font-family: Colfax;
        }

        .intro_style_c .highlight{
            font-family: Authentic;
            font-size: 85px;
            color: #ff9900;
        }
    .intro_style_body2 {
        font-family:Colfax;
        font-size:20px;
        letter-spacing:-0.5px;
        line-height:30px;
        color:#636466;
    }
    .intro_style_heading2 {
    font-family:ColfaxBlack;
    font-size:20px;
    letter-spacing:2px;
    color:#404142;
    }

    /*.GVbuttons {
        width: 100%;
        padding: 100px 0px 50px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }*/

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }

    /*.giveBox {
        position: relative;
        cursor: pointer;
        width: 49.5%;
        height: auto;
        margin-right: .5%;
    }

        .giveBox:hover .overlay {
          opacity: .7;
        }
        .giveBox img {
            width: 100%;
            height: auto;
        }

    .volunteerBox {
        position: relative;
        cursor: pointer;
        width: 49.5%;
        height: auto;
        margin-left: .5%;
    }

        .volunteerBox:hover .overlay {
            opacity: .7;
        }
        .volunteerBox img {
            width: 100%;
            height: auto;
        }

    .box_img_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .learnHow {
        width: 55%; 
        height: auto;
    }*/

    .breaker {
        width: 4%; 
        height: auto;
        /*margin-bottom: 50px;*/
    }

    /*.arrowdown {
        width: 7%;
        height: auto;
        margin-top: 40px;
    }*/

    .mainPoS {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: 80%;
        margin: 10px 0px 10px 0px;
    }

        .mainPoS div {
         
            height: 200px;
            margin: 20px;
            cursor: pointer;
            float:left;
            width: 38.5%;
            /*padding: 9px 0;*/
            flex-wrap: nowrap;
            background-size:contain;
            background-repeat:no-repeat;
      
        }

    .PoS_1 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 1.png');
        background-size: cover;
    }

        .PoS_1:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 1 (hover).jpg');
            background-size: cover;
        }

    .PoS_2 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 2.png');
        background-size: cover;
    }

        .PoS_2:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 2 (hover).jpg');
            background-size: cover;
        }

    .PoS_3 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 3.png');
        background-size: cover;
    }

        .PoS_3:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 3 (hover).jpg');
            background-size: cover;
        }

    .PoS_4 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 4.png');
        background-size: cover;
    }

        .PoS_4:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 4 (hover).jpg');
            background-size: cover;
        }

    .PoS_5 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 5.png');
        background-size: cover;
    }

        .PoS_5:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 5 (hover).jpg');
            background-size: cover;
        }

        .mainPoS_2 {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        margin: 10px 0px 10px 0px;
    }

        .mainPoS_2 div {
           width: 130px;
            height: 130px;
            margin: 20px 30px 0px 30px;
            cursor: pointer;
        }
            .PoS_6 {
        background-image: url('/Images/Revamp2021/Home/01 HOME_04 impact_NOH_icon.png');
        background-size: cover;
    }
  
            .PoS_7 {
        background-image: url('/Images/Revamp2021/Home/01 HOME_04 impact_AR_icon.png');
        background-size: cover;
    }
    .ourimpact_btn {
        z-index:1;
        display: inline-table;
    }

    .btn-bot {
        background-color: #ff9900;
        border: 1px solid #E5E5E5;
        color: #FFFFFF;
        padding: 12px 15px 10px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        margin: 4px 2px;
        cursor: pointer;
        font-family: ColfaxBold;
        letter-spacing: 1px;
        line-height: 100%;
        transition: 0.3s;
        border-radius: 25px;
    }
    .AR {
        color: #FFFFFF
    }

            .btn-bot:hover {
                background-color: #FFFFFF;
                border: 1px solid #FFFFFF;
                padding: 12px 15px 10px 15px;
                border-radius: 25px;
                transition: 0.3s;
                color: #636466;
                font-size: 13px
            }
    .AR:hover {
        color: #636466;
    }



    /*.teamGK {
        width: 55%; 
        height: auto;
    }*/

    #nonflashbanner:hover .flshbnnr_overlay {
        opacity: 0.7;
    }

    .flshbnnr_overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&1+0,0+100 */
        background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
    }
}

@media screen and (max-width: 479px) {

    .bannerPhoto {
        position: relative;
        cursor: pointer;
        margin-bottom: -10px;
        /*width:410px*/
    }

        .bannerPhoto img {
            width: 100%;
            height: auto;
        }

    .bannerText {
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, -0%)
    }

    .subheader {
        display: flex;
        flex-direction: column;
    }

        .subheader p {
            font-family: colfax-web, sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            color: #6d6e71;
            letter-spacing: normal;
            width: 80%;
        }

        .subheader span {
            color: #404142;
        }

        .subheader img {
            width: 55%;
            height: auto;
        }

    .intro_bg {
        background-image: url('/images/Revamp2019/GK1World header bg.jpg');
        background-size: cover;
    }

    .intro_innerbg {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        padding-top: 30px;
    }

        .intro_innerbg img {
            width: 80%; 
            height: auto;
        }

    .intro_style_a {
        font-family: ColfaxBold;
        color: gray;
        text-transform: uppercase;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .intro_style_a .bold {
            color: black;            
        }

    .intro_style_b {
        font-family: ColfaxLight;
        font-size: 14px;
        letter-spacing: -1px;
        text-align: center;
        color: gray;
    }

        .intro_style_b .bold {
            font-family: Colfax;
        }

        .intro_style_b .highlight{
            font-family: Authentic;
            font-size: 37px;
            color: #ff9900;
        }

    .intro_style_c {
        font-family: ColfaxLight;
        font-size: 14px;
        letter-spacing: -1px;
        text-align: center;
        color: gray;
        display: inline-block;
        margin: 20px 0px 20px 0px;
    }

        .intro_style_c .bold {
            font-family: Colfax;
        }

        .intro_style_c .highlight{
            font-family: Authentic;
            font-size: 37px;
            color: #ff9900;
        }
    .intro_style_heading2 {
    font-family:ColfaxBlack;
    font-size:15px;
    letter-spacing:2px;
    color:#404142;
    }

    /*.GVbuttons {
        width: 100%;
        padding: 30px 0px 30px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }*/

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }

    /*.giveBox {
        position: relative;
        cursor: pointer;
        width: 100%;
        height: auto;
    }
        .giveBox:hover .overlay {
          opacity: .7;
        }
        .giveBox img {
            width: 100%;
            height: auto;
        }

    .volunteerBox {
        position: relative;
        cursor: pointer;
        width: 100%;
        height: auto;
    }
        .volunteerBox:hover .overlay {
          opacity: .7;
        }
        .volunteerBox img {
            width: 100%;
            height: auto;
        }

    .box_img_overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .learnHow {
        width: 100%; 
        height: auto;
    }*/

    .breaker {
        width: 10%; 
        height: auto;
        margin-bottom: 10px;
    }

    /*.arrowdown {
        width: 7%;
        height: auto;
        margin-top: 10px;
    }*/

    .mainPoS {
        width: 85%;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

        .mainPoS div {        
            width: 20%;
            height: 18vw;
            cursor: pointer;
            float: none;         
            margin-bottom: 5px;
            background-size:contain;
            background-repeat:no-repeat;
            /*display: flex;
            width: 15vw;
            height: 17vw;
            margin: 1vw;
            cursor: pointer;*/

            
        }
          /*height: 200px;
            margin: 20px;
            cursor: pointer;
            float:left;
            width: 38.5%;
            padding: 9px 0;
            flex-wrap: nowrap;*/

    .PoS_1 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 1.png');
        background-size: cover;
    }

        .PoS_1:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 1 (hover).jpg');
            background-size: cover;
        }

    .PoS_2 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 2.png');
        background-size: cover;
    }

        .PoS_2:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 2 (hover).jpg');
            background-size: cover;
        }

    .PoS_3 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 3.png');
        background-size: cover;
    }

        .PoS_3:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 3 (hover).jpg');
            background-size: cover;
        }

    .PoS_4 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 4.png');
        background-size: cover;
    }

        .PoS_4:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 4 (hover).jpg');
            background-size: cover;
        }

    .PoS_5 {
        background-image: url('/Images/Revamp2019/Icons/PoS/PoS 5.png');
        background-size: cover;
    }

        .PoS_5:hover {
            background-image: url('/Images/Revamp2019/Icons/PoS/PoS 5 (hover).jpg');
            background-size: cover;
        }
   .mainPoS_2 {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: 75%;
        margin: 10px 0px 10px 0px;
    }

        .mainPoS_2 div {
            width: 70px;
            height: 70px;
            margin: 20px 20px 0px 20px;
            cursor: pointer;
        }

.PoS_6 {
        background-image: url('/Images/Revamp2021/Home/01 HOME_04 impact_NOH_icon.png');
        background-size: contain;
        background-repeat:no-repeat
    }
  
            .PoS_7 {
        background-image: url('/Images/Revamp2021/Home/01 HOME_04 impact_AR_icon.png');
       background-size: contain;
        background-repeat:no-repeat
    }
 .ourimpact_btn {
        
        display: inline-table;
    }

    .teamGK {
        width: 70%; 
        height: auto;
        margin-top: 30px;
    }
    .Learn_Container {
    width:95%;
    }

    #nonflashbanner:hover .flshbnnr_overlay {
        opacity: 0.7;
    }

    .flshbnnr_overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&1+0,0+100 */
        background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
    }
    /* HomePage END */

    /*OUR IMPACT BUTTON*/


        .btn-bot {
		background-color: #4CAF50; 
		border: none;
		color: black;
		/*padding: 15px 20px;*/
		text-align: center;
		text-decoration: none;
		display: inline-block;
		/*font-size: 16px;*/
		margin: 4px 2px;
		cursor: pointer;
		font-family: ColfaxBold;
		letter-spacing: 1px;
		/*line-height: 100%;*/
		transition: 0.3s;
	}
		.btn-bot {
		background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
        padding: 8px 15px 8px 15px;
        border-radius: 25px ;
        color: #636466;
        font-size: 1.3vw;
	}
        /*OUR IMPACT BUTTON END*/
    .spacer {
        width: fit-content;
        margin:20px 0px 0px 0px;
    }
    .spacer_platform {
        width: fit-content;
        margin:23px 0px 15px 0px;
    }
}

/*HomePage Popup Style*/

/* The Modal (background) pop up for news of hope button */
.mypopupcontainer {
position:relative;
}
.ourimpactpopup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  /*padding-top: 100px;*/ /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content1 {
  margin: auto;
  display: block;
  width: 60%;
  /*max-width: 700px;*/
  height:auto;
}


/* Add Animation */
.modal-content1, .mypopupclose {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.1s;
  animation-name: zoom;
  animation-duration: 0.1s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.mypopupclose {
  position: absolute;
  top: 15px;
  right: 23%;
  color: #f1f1f1;
  font-size: 30px;
  /*font-weight: bold;*/
  transition: 0.3s;
  transition: 0.3s;
  background-color: black; 
 border-radius: 25px;
 padding: 0px 10px 4px 10px;
}

.mypopupclose:hover,
.mypopupclose:focus {
  /*color: #FF9900;*/
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content1 {
    width: 100%;
    
  }
    .mypopupclose {
    padding: 0px 10px 0px 10px;
    }
}
@media screen and (max-width: 800px) {


    .mypopupclose {
    right:5%;
    }
    
    
}

/*HomePage Popup Style*/


}