/* MEDIA QUERIES ****************************************************************************/

@media (max-width: 1160px) {
  
    /*Main Structural*/
    .innerWrapper{width: 100%;}
    .innerPadding {padding: 3rem 1rem 35px 1rem;}
    #headerInner{width: 100%;}

    /* NAVIGATION */
    #menuWrapper{margin-right: 1rem;}
  
}
    
    
@media only screen and (max-width: 1120px){



}


@media only screen and (max-width: 1050px)
{
    /*SLIDE PIC*/
    .picTxtWrapper{width: 84%; margin: 7% 8% 0px 8%;}
    .picTxt, .picTxtLong{margin: 0px auto; font-size: 6.2rem; font-weight: 700; line-height: 130%; margin-bottom: 2rem;}
    
}


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

    /*MAIN STRUCTURAL DIVS*/
    #logo{width: 140px;}
    #headerInner{position: static;}

    /* NAVIGATION */

    #menuIcon{display: block; float: right; margin-right: 2rem; height: 5rem; width: 5rem; cursor: pointer;}
    #navClose{display: block;}

    #menuWrapper{
        position: absolute;
        float: none;
        margin: 0px;
        top: 0rem; 
        left: 0rem;
        width: 0px;
        height: 100%;
        background-image: url("../images/trans_Charcoal.png");
        overflow-x:hidden;
        transition: 0.5s;/* 0.5 second transition effect to slide in the sidenav */
        z-index: 2050;}

    #navDiv{
        position: relative;
        width: 100%;
        margin-top: 50px;
        }
            
        
        a.main{display: block; float: none; padding: 1px 10px 10px 10px; margin-bottom: 1.7rem; color: var(--color-white); text-align: center;}
        a.main:link {color: var(--color-white);} 
        a.main:visited {color: var(--color-white);}
        a.main:active {color: var(--color-white);}
        a.main:hover {color: var(--color-green);}
    
    
        a.mainLive{display: block; float: none; padding: 1px 10px 10px 10px; margin-bottom: 2rem; text-align: center;}

        /*SLIDE PIC*/
        .picTxtWrapper{width: 84%; margin: 15% 8% 0px 8%;}
        .picTxt, .picTxtLong{width: 60rem; margin: 0px auto; font-size: 5.4rem; line-height: 130%; margin-bottom: 1.5rem;}


        /*GENERAL*/
        h1{ font-size: 4rem;}

        h2{font-size: 4.6rem;}

        p{font-size: 1.6rem;}

        a{font-size: 1.6rem;}

        div.narrowCentre{width: 80%;}
        div.narrow{width: 80%;}


        /* HOME ICONS AMENITIES */
        .amenitiesFlex-bloc img{width: 80px;}

}


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

    

}



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

    /* HOME ICONS AMENITIES */
    .amenitiesFlex-bloc{
        flex-basis: 20%; /*to keep columns equal width*/
    }

    
}



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

    /*GENERAL*/
    /* p.intro{
         padding-top: 3.5rem;
     } */

    /*MAIN STRUCTURAL DIVS*/

    .sectionKaokoland{background-image: url('../images/bg_Kaokoland_s.jpg');}

    /*SLIDE*/
    /* #slideWrapper{border-style: solid; border-width: 0rem 0rem .8rem 0rem; border-color: #BABABA;} */
    /*SLIDE PIC*/
    /* #picCurve{display: none;} */
    .picTxtWrapper{margin: 15% 8% 0px 8%;}
    .picTxt, .picTxtLong{width: 100%;}
    /* #bookButton{display: none;} */
    /* .picTxt{display: none;} */

    /* HOME ICONS AMENITIES */
    .amenitiesPad{padding: 0rem 1rem 0rem 1rem;}

    /* FORM */
    #formWrapper{width: 90%;}

}


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

    /*MAIN STRUCTURAL DIVS*/
    #logo{width: 120px;}

    .innerPadding {padding: 2rem 1rem 2rem 1rem;}
    .innerPadding2 {padding: 2rem 1rem 2rem 1rem;}

    /* MAIN CONTENT IMAGES */
    .picTxtWrapper2{margin: 22% 5% 0px 5%;}
    .picTxt2{ font-size: 6.2rem;}

    .picCamp{background-image: url('../images/slide_Camping.jpg');}
    .picCanyon{background-image: url('../images/slide_HoarusibCanyon_s.jpg');}
    .picRiver{background-image: url('../images/slide_HoarusebRiver.jpg');}
    .picDrive{background-image: url('../images/slide_NamibianRoad_s.jpg');}

    
    /* HOME ACTIVITIES FLEX */
    .activityFlex{
        width: 80%;
        flex-wrap: wrap;
    }
    .activityFlex-bloc{
        flex-basis: 80%; /*to keep columns equal width*/
        margin: 15px 15px;
        padding-bottom: 1rem;
    }


    /* THREE PIC FLEX */
    .threePicFlex{
        width: 80%;
        flex-wrap: wrap;
    }
    .threePicFlex-bloc, .threePicFlex-blocAlt{
        flex-basis: 80%; /*to keep columns equal width*/
        margin: 10px 10px;
    }

    

}


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

    /*MAIN STRUCTURAL DIVS*/
    .sectionCamp{padding: 8rem 0rem;}
    .sectionCamp div.narrowCamp{width: 80%;}
    

}


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

    /*SLIDE PIC*/
    .picTxt{width: 100%;} /*width: 25rem;  font-size: 3.2rem;*/
    .picTxtLong{width: 90%;  font-size: 4.2rem;}
    /* .picTxt{display: none;} */

    /*MAIN CONTENT IMAGES*/
    #slideWrapper2{height: 45rem;}
    /* .picTxtWrapper2{margin: 25% 5% 0px 5%;} */
    .picTxt2{ font-size: 6.2rem;}

}


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

    /* HOME ICONS AMENITIES */
    .amenitiesFlex-bloc img{
        width: 60px;
    }
    .amenitiesFlex-bloc p{margin: .3rem .5rem .5rem .5rem; font-size: 1.6rem;}

    /* HOME ACTIVITIES FLEX */
    .activityFlex{
        width: 95%;
        flex-wrap: wrap;
    }

    /* THREE PIC FLEX */
    .threePicFlex{
        width: 95%;
        flex-wrap: wrap;
    }
    .threePicFlex-bloc{
        height: 30rem;
    }
    
}

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

    /*MAIN STRUCTURAL DIVS*/
    #logo{width: 100px; margin: .5rem .5rem .5rem .5rem;}

    /*GENERAL*/
    h1{font-size: 3.5rem;}
    h2{font-size: 4rem;}
    p{font-size: 1.5rem;}
    a{font-size: 1.5rem;}
    
    div.narrowCentre{width: 90%;}
    div.narrow{width: 90%;}

    

}


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

    /* HOME ICONS AMENITIES */
    .amenitiesFlex-bloc{
        flex-basis: 15%; /*to keep columns equal width*/
    }
    .amenitiesFlex-bloc img{width: 30px;}
    .amenitiesFlex-bloc p{margin: 0rem .5rem .5rem .5rem; font-size: 1.4rem;}

}

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

    /*SLIDE*/
    #slideWrapper{border-width: 0rem 0rem .5rem 0rem;}
    /*SLIDE PIC*/
    .picTxtWrapper{margin: 15% 8% 0px 8%;}
    /* .picTxt{width: 20rem; font-size: 2.4rem;} */
    /* picTxt{font-size: 3.2rem;} */


}

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

    /*MAIN STRUCTURAL DIVS*/
    #logo{width: 90px;}

    /* MAIN CONTENT IMAGES */
    .picTxtWrapper2{margin: 35% 5% 0px 5%;}
    .picTxt2{ font-size: 5.2rem;}

    /* NAVIGATION */
    #menuIcon{margin-right: .5rem;}

    
}


    

@media only screen and (max-width: 310px)
{
    /*SLIDE PIC*/
    .picTxt{font-size: 4rem;}
    .picTxtLong{font-size: 3.8rem;}    
}


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

}