/* mobile css */
/* mobiles with less that resolution */
@media all and (min-width: 0px) and (max-width: 700px){ 

}
@media all and (min-width: 0px) and (max-width: 479px){
body, html{ max-width: 479px; min-width: 240px;  padding: 0px; font-size: 100%; margin: 0px;  }
.footnavi, .sociolinks, .footabout { min-width: 100%; width: 100%; margin-bottom: 0px; height: auto; }
#container, #content { padding: 0px; }
.table, .tablerow, #sidebar, #container, .slider, #footer, .subnav {display: block;width: 100%;/* height: auto; */margin: 0px;}
#sidebar { margin-top: 120px; width: 100%; }
.hometabs { margin: 0;  width: 96%; padding: 0px;  }
.hometabs article,.hometabs article.pagecontent,  .sociolinks, .footabout, #content, #rightside { float: none; width:96%; margin: 0 2%; height: auto;  }
.navigate { display: block; line-height: 25px;padding: 0px 8px; color: #FFF;  text-align: center;  }
.navigate a { color: #FFF; }
.subnav { padding: 0;  }
.masternav:hover ul { display: block;  } 
 
.sociolinks { text-align: center; }
.logo img {height: 120px;margin: auto;}
.logotext, .clearfoot { display: none; }
 
.hometabs article.pagecontent { margin-top: 20px;}
.sociolinks, .footabout { padding: 0px; }
#footer { border-top: 0px; position: relative;}
#nav ul li ul { top: 0px; left: 0px; position: relative; z-index: 0; width: 100%; }
.footnavi, .sociolinks {width:100%;float: none;margin: 0 auto;}    
}

/* mobiles width 480 or above width */
@media all and (min-width: 480px) and (max-width: 700px){
body, html{ max-width: 700px; min-width: 480px;  padding: 0px; font-size: 100%; margin: 0px;  }
#wrapper,.footcontent { min-width: 100%; width: 100%;margin-bottom: 0px; height: auto;  }
#container, #content { padding: 0px;}
.subnav { padding: 0;  }
.logotext, .clearfoot {/* display: none; */}
.navigate { display: block; line-height: 25px;padding:0 8px; color: #FFF;  text-align: center;  }
.navigate a { color: #FFF; }
.masternav:hover ul { display: block;  } 
.table, .tablerow, #sidebar, #container, .slider, #footer, .subnav {display: block;width: 100%;/* height: auto; */}
.hometabs article, .sociolinks,.hometabs article.pagecontent, .footabout, #content, #rightside  {float: none;width:96%;margin: 0 2%;height: auto;min-height: auto;}
 
#sidebar { margin-top: 150px; width: 100%; }
.sociolinks { text-align: center; }
.searchbox { position: absolute; top: 20px; right: 0px; padding: 20px; text-align: center; }
.searchbox input[type=text] { width: 208px;}
.logo img {height: 120px;}
.sociolinks, .footabout {float: left; width: 45%; margin: 2%; padding: 0px; }
#footer {border-top: 0px;}
.box { width: 45%; margin: 1%; display: inline-block; vertical-align: top; }
}
/* mobiles width 480 or above width */
@media all and (min-width: 701px) and (max-width: 800px){
body, html{ max-width: 800px; min-width: 701px;  padding: 0px; font-size: 100%; margin: 0px;  }
#wrapper,.footcontent { min-width: 100%; width: 100%; margin-bottom: 0px; height: auto; }
#nav { margin: 0px;  padding-left: 100px; }
#content { width: 70%; padding: 0 2%;}
#rigthside { width: 18%; }
.clearfoot { display: none; }
.table, .tablerow, #sidebar,.slider, #footer {display: block;width: 100%;/* height: auto; */}
.footnav {/* display: none; */}
.sociolinks { text-align: center; }
.searchbox { position: absolute; top: 80px; right: 0px; padding: 10px; text-align: center; }
.searchbox input[type=text] { width: 208px;}
.logo img {height: 120px;float: left;z-index: 1;position: absolute;}
.sociolinks, .footabout {/* float: left; *//* width: 45%; *//* margin: 2%; *//* padding: 0px; */}
#footer {  border-top: 0px;}
}
/* mobiles width 480 or above width */
@media all and (min-width: 0px) and (max-width: 900px){
    #wrapper {min-width: 100%;width: 100%;margin: 0;}
    .clearfoot{height:auto;}
    #container{padding: 0 0px;width: 90%;float: none;display: block;margin: 0 auto;}    
    #sidebar {width: 90%;margin: 0px auto;margin-bottom: 50px;float: none;background: #5b7395;display: flex;justify-content: flex-end;padding: 0 5%;position: relative;}
    #sidebar .navIcon{display: block;padding: 8px 0;width: 36px;height: 36px;margin: 0px;margin-bottom: 4px;position: relative;z-index: 9;}
    #sidebar .navIcon a{line-height: 40px;display: flex;height: 40px;transition: 0.4s;flex-direction: column;justify-content: center;}
    #sidebar .navIcon span{display: block;width:100%;height: 5px;background:#FFF;font-size: 0;margin: 3px 0;transition: 0.4s;}  
    #sidebar.active .navIcon span.line1 {transform: translate(0, 11px) rotate(-45deg);}
    #sidebar.active .navIcon span.line2 {opacity: 0;}
    #sidebar.active .navIcon span.line3 {transform: translate(0, -11px) rotate(45deg);}
        
    #sidebar #nav{display:none;position: absolute;top: 100%;padding: 0;}
    #sidebar.active #nav{display:block;}
    #nav ul li ul{position:relative;display:block;left:0;width: auto;padding-left: 0;background: none;margin: 0;}
    #nav ul li > ul li{background:none;}
    #nav ul li ul li a{padding-left:30px;background: #33478e;}
    #nav ul li ul li a:hover{background:#5b7395;}
    #footer{height:auto;position: relative;bottom: 0;}
    .footcontent{display:flex;flex-wrap: wrap;width: auto;}
    .footnavi, .sociolinks, .footabout{width: 30%;float: none;margin: 0 auto;}
    .footnav,.footnav ul {width:100%;float: none;}
    .footnav ul li{float: none;text-align: center;width: auto;}
    .footnav ul li>ul{padding:0;}
    .sociolinks { text-align: center; }
    .copyright{min-width:100%;text-align: center;}    
}
@media all and (min-width: 801px) and (max-width: 900px){
body, html{ max-width: 900px; min-width: 801px;  padding: 0px; font-size: 100%; margin: 0px;  }
#wrapper {min-width: 100%;width: 100%;margin: 0;}
.clearfoot{height:auto;}
#container{padding: 0 0px;width: 90%;float: none;display: block;margin: 0 auto;}
#content { width: 70%; padding: 0 1%;}
#rigthside { width: 18%; }
.sliderContent div { width: 33%; }
.table, .tablerow, .slider {display: block;width: auto;/* height: auto; */}

.searchbox {  padding: 10px; text-align: right; }
.searchbox input[type=text] { width: 208px;}
.logo img { height: 120px; float: left; }
.sociolinks, .footabout {float: none;width: 30%;margin: 0 auto;padding: 0px;padding-top: 15px;}
}
@media all and (min-width: 901px) and (max-width: 969px){
body, html{ max-width: 969px; min-width: 901px;  padding: 0px; font-size: 100%; margin: 0px;  }
#wrapper { min-width: 100%; width: 100%; }
#container{ padding: 0 0px; width: 75%;}
#content { width: 70%; padding: 0 1%;}
#rigthside { width: 18%; }
#sidebar { width: 25%; }
.sliderContent div { width: 35%; }
.table, .tablerow, .slider {display: block;width: 100%;/* height: auto; */}

}
@media all and (min-width: 0px) and (max-width: 699px){
    #header{padding-bottom: 60px;}
    .logotext{display:none;}
     .footabout{display:none;}
    .footnavi, .sociolinks {/* width: 50%; *//* float: none; *//* margin: 0 auto; */}
}