/*   https://css-tricks.com/snippets/css/media-queries-for-standard-devices/  */



/*---------------------------------------------------------------------------------------------------- */
@media (min-width:1440px) and (max-width:1599px) {
     .container {max-width: 1330px;}
}

/*---------------------------------------------------------------------------------------------------- */
@media (min-width:1200px) and (max-width:1439px) {
   .container {max-width: 1330px;}
}




/
/*****---------------------------------------------------------------------------General Smart Phones----------------------------------------------------------------------------------------------------------- **/

@media (min-width: 320px)   and (max-width: 768px)  and (-webkit-min-device-pixel-ratio:1)   and (orientation: landscape) {
                    .footcontact {padding-left: 0;margin-top: 25px;margin-bottom: 25px;}
                    .align-right {float: right;margin: 0 auto 25px;width: 100%;}
                    .contactForm{ max-width:100%; width:100%; margin:0 auto; background:#eeeeee; padding:20px;}
                    .contentdetails {width: 90%;float: none;margin: 0 auto 25px;text-align: center;}
                                       .drdetails h2{ text-align:center; margin-top:15px; font-size:28px;}
                    .drdetails p{ font-size:16px;}
                                       .drimg img{width:100%;}
                    .footcontact h3{font-size:16px;}
                    .footcontact p, .footcontact a{font-size:14px;}
                    .safehandsection{ height:85px; background-position: right}

                    .mainmenu{ display:none;}
.toptext { margin: 18px 0 15px;}
.toptext ul li {display: block;clear: both;width: 100%;text-align: center;}
.toptext ul {float: none;margin: 0 auto;padding: 0;width: 234px;}
.mobilemenu {display: block;float: right;position: absolute;top: 40px;right: 40px;}
.mobilemenu img{ display:block; width:40px;}
.titlesection{ height:75px;}
.titlesection h2{ font-size:24px; margin:27px 0; }
.contentSection{  padding:30px 0;}
.toptext ul li {display: block;clear: unset ;width: 100%;text-align: left;}
.toptext ul {float: left ;margin: 0 auto;padding: 0;width: 100%;}
.toptext ul{ float:left;} 
.toptext ul li { display: inline-block; clear:unset; width:unset} 
.toptext ul li span{ font-size:16px;  padding:0px 20px ;} 
.footrt a{  font-size:15px;}
.footrt p {font-size:15px;}


}

/*---------------------------------------------------------------------------------------------------- */
@media (min-width: 320px)   and (max-width: 768px)   and (-webkit-min-device-pixel-ratio:1)   and (orientation: portrait) {

                    .footcontact {padding-left: 0;margin-top: 25px;margin-bottom: 25px;}
                    .align-right {float: right;margin: 0 auto 25px;width: 100%;}
                    .contactForm{ max-width:100%; width:100%; margin:0 auto; background:#eeeeee; padding:20px;}
                    .contentdetails {width: 90%;float: none;margin: 0 auto 25px;text-align: center;}
                                        .drdetails h2{ text-align:center; margin-top:15px; font-size:28px;}
                    .drdetails p{ font-size:16px;}
                    .footcontact h3{font-size:16px;}
                    .footcontact p, .footcontact a{font-size:14px;}
                    .safehandsection{ height:85px; background-position: right}

                    .mainmenu{ display:none;}

.mobilemenu {display: block;float: right;position: absolute;top: 40px;right: 15px;}
.mobilemenu img{ display:block; width:40px;}
.titlesection{ height:75px;}
.titlesection h2{ font-size:18px; margin:27px 0; }
.contentSection{  padding:30px 0;}
                    .contentSection h2{font-size:24px;}
                    .contentSection p{font-size:16px;}

                    .toptext { margin: 18px 0 15px;}
                    .toptext ul {float: none;margin: 0 auto;padding: 0;width: 234px;}
.toptext ul li {display: block;clear: both;width: 100%;text-align: center;}
.toptext ul li span{ font-size:16px;  padding:11px 20px ; display:unset;} 
.toptext ul li a{  font-size:16px; text-align:center; line-height: 22px; height: unset}
ul.sub-menu{position:relative;}

.footrt a{  font-size:15px;}
.footrt p {font-size:15px;}


    #site-navigation.active .menu-item-has-children > span {
        position: relative;        font-family: 'Ionicons';        font-weight: 300;     
        font-size: 20px;        float: right;        cursor: pointer;
        color: #fff;
    }
    #site-navigation .menu-item-has-children > span:before {
        content: "\f284";
    }
    #site-navigation .menu-item-has-children > span.active:before {
        content: "\f280";
    }
    .side-menu-wrapper ul li a {
        display:unset;
    }
} 



/*----------------------------------------------------------------------------------------------------   iPHONE 5   -------------------------------------------- */
@media (min-width: 320px)   and (max-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)      and (orientation: landscape) {
 .container {max-width: 568px}

}

/*---------------------------------------------------------------------------------------------------- */
@media(min-width: 320px)   and (max-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {
 .container {max-width: 320px}

}

/*----------------------------------------------------------------------------------------------------   iPHONE 6/7/8   -------------------------------------------- */
@media (min-width: 375px)   and (max-width: 667px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {
 .container {max-width: 667px}

}

/*----------------------------------------------------------------------------------------------------- */
@media (min-width: 375px)   and (max-width: 667px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
 .container {max-width: 375px}
 .logocol{text-align:center;}
 }

/*----------------------------------------------------------------------------------------------------   iPHONE  6/7/8  PLUS   -------------------------------------------- */

@media (min-width: 414px)   and (max-width: 736px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
 .container {max-width: 414px}

}

/*----------------------------------------------------------------------------------------------------- */

@media (min-width: 414px)   and (max-width: 736px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {
 .container {max-width: 736px}
.righttop{position:absolute;}
.toptext{margin-top:20px;}
.toptext ul li a{  font-size:16px; text-align:center; line-height: 22px; height: unset}
.toptext ul li span{ font-size:16px;  padding:0px 20px ;} 
.safehandsection{ height:185px; }
.align-right{width:100%;}
}

/*----------------------------------------------------------------------------------------------------   iPHONE  X   -------------------------------------------- */
@media (min-device-height: 812px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {

}

/*----------------------------------------------------------------------------------------------------- */
@media  (max-device-height: 375px) and  (orientation: landscape){
}


/*------------------------------------------------------------   iPAD   -------------------------------------------- */
/*  ----------------------  I used different min-device setting for portrait & landscape to accommodate for iPHONE X    */

@media (min-width: 768px) and (max-width: 1024px)  and (-webkit-min-device-pixel-ratio:1)   and (orientation: portrait) {
                    .footcontact {padding-left: 0;margin-top: 25px;margin-bottom: 25px;}
                    .align-right {float: right;margin: 0 auto 25px;width: 100%;}
                    .contactForm{ max-width:100%; width:100%; margin:0 auto; background:#eeeeee; padding:20px;}
                    .contentdetails {width: 90%;float: none;margin: 0 auto 25px;text-align: center;}
                    .drdetails h2{ text-align:center; margin-top:15px; font-size:28px;}
                    .drdetails p{ font-size:16px;}
                    .footcontact h3{font-size:16px;}
                    .footcontact p, .footcontact a{font-size:14px;}

.titlesection{ height:75px;}
.titlesection h2{ font-size:24px; margin:27px 0; }
.contentSection{  padding:30px 0;}

.safehandsection {height:200px;}

.toptext { margin: 20px;}
.toptext ul {float: left ;margin: 0 auto;padding: 0;width: 100%;}
.toptext ul li {display: block;clear: unset ;width: 100%;text-align: left;}
.toptext ul li span{ font-size:16px;  padding:0px 20px ;} 
.toptext ul li { display: inline-block; clear:unset; width:unset} 

.mobilemenu {display: none;}
.mainmenu{ width:100%; clear:both; display:block;}
.mainmenu ul{ margin:0; padding:0; float:right;}
.mainmenu ul li{ display:block; list-style:none; float:left;}
.mainmenu ul li a{ font-size:16px; color:#858585; text-decoration:none; text-transform:uppercase; padding:10px 0 15px 35px; display:block;}
.mainmenu ul li:first-child a{ padding:10px 0 15px 0;}


.footrt a{  font-size:15px;}
.footrt p {font-size:15px;}
}

/*---------------------------------------------------------------------------------------------------- */

@media  (min-width: 768px)  and  (max-width: 1024px)  and (-webkit-min-device-pixel-ratio:1)   and (orientation: landscape) {

                    .footcontact {padding-left: 0;margin-top: 25px;margin-bottom: 25px;}
                    .align-right {float: right;margin: 0 auto 25px;width: 100%;}
                    .contactForm{ max-width:100%; width:100%; margin:0 auto; background:#eeeeee; padding:20px;}
                    .contentdetails {width: 90%;float: none;margin: 0 auto 25px;text-align: center;}
                                      .drdetails h2{ text-align:center; margin-top:15px; font-size:28px;}
                    .drdetails p{ font-size:16px;}
                                       .drimg img{width:100%;}
                    .footcontact h3{font-size:16px;}
                    .footcontact p, .footcontact a{font-size:14px;}         

.titlesection{ height:75px;}
.titlesection h2{ font-size:24px; margin:27px 0; }
.contentSection{  padding:30px 0;}

.safehandsection {height:300px;}
.toptext { margin: 20px;}
.toptext ul {float: left ;margin: 0 auto;padding: 0;width: 100%;}
.toptext ul li {display: block;clear: unset ;width: 100%;text-align: right; float:right;}
.toptext ul li span{ font-size:16px;  padding:0px 20px ;} 
.toptext ul li { display: inline-block; clear:unset; width:unset} 
.toptext ul li a {    line-height: 22px;    font-size: 16px;}

.footrt a{  font-size:15px;}
.footrt p {font-size:15px;}
}


/*------------------------------------------------------------   iPAD   PRO -------------------------------------------- */
/*  ----------------------  I used different min-device setting for portrait & landscape to accommodate for iPHONE X    */

@media (min-width: 812px) and (max-width: 1024px)  and (-webkit-min-device-pixel-ratio:1)   and (orientation: portrait) {

}