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

@media (max-width: 1150px) {
  
    /*Main Structural*/
    .innerWrapper, .innerWrapper2{width: 95%;}

    /*POPUP BUTTON */
    span.popup__link--head{font-size: 26px;}
    span.popup__link--details{font-size: 14px;}

}

@media (max-width: 1050px) {
    /* RATES */
    .tbl_Rates--insure{width: 18%;}
    .tbl_Rates--excess{width: 40%;}
    .tbl_Rates--rates{width: 35%;}
}


@media (max-width: 960px) {

    html, body{background-image: none;}

    /*HEADER HOME*/
    #leftHeaderBG{width: 100%;}
    #curve{display: none;}
    .buttonDiv{display: none;
    }

    /* social media - home top */
    .socialmediaDiv{position: absolute; top: 14px; right: 10px;}

    /*NAVIGATION*/
    #navDiv{/*display: none;*/
        /*position: fixed;/*not work in mobile*/
        position: absolute;
        /*right: 0;*/
        top: 0; 
        left: -3%;/*compensate for inner wrapper*/
        float:none;
        padding: 30px 0px 30px 0px;
        margin-top: 0px;
        margin-right: 0px;
        width: 0px;
        height: 100%;
        height: 100vh;
        /*height: auto;*/
        background-color: rgba(36,14,0,0.95);/*#2f1905;*/
        overflow-x: hidden;  /*Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        z-index: 2001;
    }

    #navDiv ul {
        width: 100%;
      }
  
      #navDiv li {
        display: block;
        margin-right: 0px;
        padding: 0px;
      }

      #navDiv li.navMobile{ /*only show these links on mobile menu*/
        display: block;
      }

      a.nav{display: block; padding: 25px 10px; color: #FFFFFF; font-size: 14px; font-weight: normal; text-transform: uppercase; margin-right: 0px; border-style: dotted; border-width: 0px 0px 1px 0px; border-color: #ded5c4; background-color: transparent; transition: all .5s;}
      a.nav:link {display: block;} 
      a.nav:visited {display: block;}
      a.nav:active {display: block;}
      a.nav:hover {display: block; color: #eb7a36; background-color: #373022;}

      a.navA{display: block; padding: 25px 10px; text-transform: uppercase; border-style: dotted; border-width: 0px 0px 1px 0px; border-color: #ded5c4;}

      /*subnav*/
        #navDiv li ul {
            position: relative;
            margin-top: 0px;
            margin-left: 0px;
            padding: 0px;
            display: none;
            width: 100%;
        }

    /*NAV MOBILE*/
    #menuDiv{display: block;}
    #navClose{display: block;}

    /* RED BLOCK */
    .redBlock{padding: 20px 20px 30px 20px; border-radius: 15px;}
    .redBlockHeader{padding-left: 10px; font-size: 16px;}

    /*RED BLOCK HOME*/
    #redBlockVehicles img {width: 120px;}

    /* HEADER HOME*/
    #vehicleWrapper{right: 0px;}

    /*floating text - home page */
    #txtP{font-size: 30px;}

    /* CAR RATES page */
    .vehicleBloc_car{width: 70%;}

    /* CAR RATES */
    #converter{display: none;}

    .vehicleBloc{width: 49%; height: 300px;}
    .vehicleBloc .buttonOrange{top: 220px;}

    /* SAFETY */
    .colTxt2{column-count: 1;}

    /*QUOTE FORM */
    .formBloc{padding: 15px 15px; margin: 20px 10px 40px 10px; }
    .formBloc--bottomPad{padding: 15px 15px 100px 15px; margin: 20px 10px 40px 10px;}

    /* CONTINUE FORM BUTTON - NEXT */
    .phaseButton{right: -10px; bottom: -30px; padding: 15px 20px; border-radius: 20px; font-size: 14px; font-weight: bold; box-shadow: 0px 2px 5px rgba(0,0,0,0.3);}
    .phaseButton:hover{background-color: #ca520d; box-shadow: 0px 2px 3px rgba(0,0,0,0.3);}

    #formPhase2 .phaseButton{left: -10px;}

}

@media (max-width: 850px) {

    /*HOME SERVICES*/
    div.brownDivBG{background-image: url('images/SUVWindhoek_m.jpg');}

    /* COLUMNS*/
    .colLeft{width: 100%; float: none;}
    .colRight{width: 100%; float: none;}

    /* RATES */
    .tbl_Rates{float: none;}
    .tbl_Rates--insure{width: 100%;}
    .tbl_Rates--excess{width: 100%;}
    .tbl_Rates--rates{width: 100%;}

    tr.noShow{display: none;}
    td.noborder{border-width: 0px 1px 1px 0px;}
    tr.heightOption{height: auto;}
    tr.heightOption2{height: auto;}

    /*CAR RATES*/
    .carFloat{right: 0px; margin-top: 0px;}
    .carFloat img{width: 180px;}

    /*QUOTE FORM */
    label{float: none; width: 100%; margin-right: 0px; text-align: right;}
    .inputDiv{margin-left: 0px;}

    /*Flights Form*/
    #flightForm label{float: none; width: 100%; margin-right: 0px;}
    #flightForm .inputDiv{margin-left: 0px;}

    /* FLEX */
    .flex-container img {
        width: calc(100%/2 - 8px);
        /*height: calc(100%/2);*/
    }
    
}


@media (max-width: 720px) {

    /*CONTENT */
    #contentWrapperHome{position: absolute; top: 400px; width: 100%; z-index: 25;} /*top: 300px;*/

    /*HEADER HOME*/
    /*floating text - home page */
    #txtDiv{position: absolute; margin-top: 90px; margin-left: 10px;}
    /*floating Vehicle - home page */
    #vehicleWrapper{position: absolute; display: inline-block; top: 200px; right: 20px; z-index: 35;} /*top: 130px;*/


    /*POPUP BUTTON */
    span.popup__link--head{font-size: 24px;}
    span.popup__link--details{font-size: 12px;}

    /*home page SERVICES BLOCS */
    .colServicesLeft{width: 100%; float: none;}
    .colServicesRight{float: none; width: 100%;}

    /* CAR RATES */
    .vehicleBloc{height: 270px;}
    .vehicleBloc .buttonOrange{top: 200px;}

    /* FOOTER */
    #footer .FBDiv{float: none; margin-right: 0px; margin-left: 0px; text-align: center;}
    /* #footer .FBDiv img{display: block; margin: 25px auto;}
    #footer .FBDiv img.iconFB{ margin: 10px auto;} */
    #footer .DisclaimerDiv{float: none; margin: 50px 0px 0px 0px; text-align: center;}
    #footer .DisclaimerDiv p.smallW{text-align: center;}


    /* SLIDE SHOW
    https://frontendscript.com/css-background-image-slideshow-fade*/
    .crossfade{height: 400px;}


    .crossfade > figure:nth-child(1) {
    background-image: url('images/pic_NamibiaSmall.jpg');
    }
    .crossfade > figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('images/pic_4x4carHireSmall.jpg');
    }
    .crossfade > figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('images/pic_LandscapeSmall.jpg');
    }
    .crossfade > figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('images/pic_DesertSmall.jpg');
    }
    .crossfade > figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('images/pic_Desert2Small.jpg');
    }

}


@media (max-width: 620px) {

    /*POPUP BUTTON */
    /* span.popup__link--head{font-size: 24px;}
    span.popup__link--details{font-size: 14px;} */
    .popup__content{width: 90%;}
    a.popup__close:link, a.popup__close:visited{top: 10px; right: 10px;}

    /*CAR RATES*/
    .carFloat{right: 0px; margin-top: 0px;}
    .carFloat img{width: 180px;}

    /* CAR RATES */
    #converter{display: none;}

    /* CAR RATES page */
    .vehicleBloc_car{width: 60%;}

    .vehicleBloc{width: 100%; height: auto;} /*font-size: 90%;*/
    .vehicleBloc--left{float: none;}
    .vehicleBloc--right{float: none;}

    .vehicleBloc .buttonOrange{position: absolute; right: 20px; top: auto; bottom: 25px;}

    /* CONTACT US */
    .contact{margin-left: 0px;}
}


@media (max-width: 550px) {

    html, body{font-size: 13px;}

    /*MAIN STRUCTURAL DIVS*/
    .innerPadding {padding: 15px;}

    /*Links*/
    a{font-size: 13px;}
    a.orangeU{font-size: 13px;}
    a.white{font-size: 13px;}

    /* GENERAL*/
    h1{font-size: 17px;}
    div.tabH1{margin-left: 20px; height: 45px;}
    h2 span{font-size: 16px;}
   
    h3{font-size: 18px}
    h3.grey{font-size: 16px;}
    h3.tab{width: 200px; font-size: 16px;}

    h4{font-size: 14px;}
    h5{font-size: 13px; margin-top: 20px; margin-bottom: 10px;}

    p.list{background-image: url('images/bullet2.gif'); background-repeat: no-repeat; background-position: 0px 6px; margin-left: 6px; padding-left: 15px;} /*width: 700px;*/

    /* GENERAL */
    .small{font-size: 11px;}

    /*rates tables*/
    td{font-size: 13px;}

    /* RED BLOCK */
    .redBlock{padding: 20px;}
    .redBlockHeader{font-size: 18px;}
    /* INCLUDED ITEMS*/
    .redHeader{font-size: 18px;}
    .redHeader2{font-size: 18px;}
    .redHeaderSmall{font-size: 13px;}

    ul.includedList{margin-left: 20px; column-gap: 45px;}
    ul.includedList li{list-style-image: url('images/tickSmall.png');}

    /*CONTENT */
    #contentWrapperHome{top: 330px;} /*top: 300px;*/

    /* HEADER HOME*/
    #logo{margin-left: 0px;}/* width: 300px;*/
    #txtP{font-size: 24px; text-align: left; line-height: 130%;}
    #txtSpan{font-size: 14px;}
    #vehicleWrapper{top: 190px; right: 0px;}
    #vehicleWrapper img{width: 260px;}

    /*POPUP BUTTON */
    #endpopup img{width: 200px;}
    /* span.popup__link--head{font-size: 20px;}
    span.popup__link--details{font-size: 12px;}
    a.popup__close:link, a.popup__close:visited{top: -5px; right: -5px;} */


    /* GENERAL */

    .divImages2 img{width: 100%;}
    .divImages2 img{float: none;}

    /* SAFETY */
    .colTxt2{clear: both;}
    .elephantRight{margin-top: 10px;}

    /*QUOTE FORM */
    .formBloc{padding: 15px 10px; margin: 15px 0px 30px 0px; }
    .formBloc--bottomPad{padding: 15px 10px 60px 10px; margin: 20px 0px 40px 0px;}

    .barDiv{margin-top: 4px; margin-left: 0px; margin-right: 50px; color: #FFFFFF; text-align: center;}

    td.tblPlaces-gutter{width: 30px;}

    /* CONTINUE FORM BUTTON - NEXT */
    .phaseButton{right: -10px; bottom: -30px; padding: 10px 15px; border-radius: 10px; font-size: 13px; font-weight: bold; box-shadow: 0px 2px 5px rgba(0,0,0,0.3);}

    /* COST DISPLAY*/
    #costWrapper{padding: 0px 30px; height: 50px; border-radius: 25px; border-width: 3px;}
    #costWrapper::before{
    top: -12px;
    left: -12px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    }
    #Cost{line-height: 50px; font-size: 20px;}

}


@media (max-width: 450px) {

    /*Main Structural*/
    .innerWrapper, .innerWrapper2{width: 100%; border-radius: 0px;}

    /*CONTENT */
    #contentWrapperHome{top: 360px;} /*top: 300px;*/

    /*HEADER HOME*/
    /*floating text - home page */
    #txtDiv{margin-left: 10px;}

    #txtP{font-size: 22px; text-align: left; line-height: 130%;}
    #txtSpan{font-size: 12px;}
    #vehicleWrapper {top: 250px;}
    #vehicleWrapper img{width: 200px;}

    /*HOME SERVICES*/
    div.brownDivBG{background-image: url('images/SUVWindhoek_s.jpg');}


    /*POPUP2*/
    #popupButtonPages{top: 170px; left: 15px;}
    

    /*NAVIGATION*/
    
    a.nav{padding: 20px 10px; color: #FFFFFF; font-size: 13px; }
    a.navA{padding: 20px 10px;}

    /* GENERAL*/
    h2 span{font-size: 15px;}

    /* CAR RATES page */
    .vehicleBloc_car{width: 80%;}
    .vehicleBloc .buttonOrange{position: absolute; right: 20px; top: auto; bottom: 15px;}

    /* FLEX */
    .flex-container img {
        width: calc(100% - 8px);
      }

    /* FOOTER */
    #footer .FBDiv img{display: block; margin: 15px auto;}
    #footer .FBDiv img.iconFB{ margin: 10px auto;}

}


@media (max-width: 380px) {

    /* HEADER HOME*/
    #logo{display: none;}
    #logoMobile{display: block;}

    /*POPUP PAGES */
    /* span.popup__link--head{font-size: 16px;} */
    #endpopup img{width: 180px;}

    /*CAR RATES*/
    .carFloat{top: 20px;}
    .carFloat img{width: 130px;}

    /*MAIN STRUCTURAL DIVS*/
    .innerPadding {padding: 10px;}

    

    /* CAR RATES page */
    .vehicleBloc_car{width: 90%;}

}

@media (max-width: 330px) {

    /* social media - home top */
    .socialmediaDiv img.iconFB{width: 20px; margin-right: 2px; margin-bottom: 3px;}
    
}

@media (max-width: 300px) {

    /* HEADER HOME*/
    #logoMobile{width: 180px; margin-top: 5px;margin-left: 0px;}
    
}