/* ===========================
   Author: TheMantalBwoy
   Description: responsive.css
=========================== */

@media screen and (max-width: 1024px) {
	.logo{width: 180px;}
	.minLogo{width: 150px;}
	.logo img , .minLogo img{width: 100%;}
	.mainNav ul li{margin-left: 10px;}
	.mainNav ul li a{font-size: 13px;}
	.twitterBox iframe{height: 316px;}
	.mainNav ul li.active a{font-size: 13px;border-bottom: 2px solid #ef5b2f}
	.about{padding: 21px;}
	.about p{line-height: 25px;}
}

@media screen and (max-width: 768px) {
	.js #menu , .mainNav{display:none;}
	.js .slicknav_menu {display:block;position: absolute;right: 10px;top: 68px;z-index: 999;}
	.banner{height: 311px;background-size: 100%;}
	.banner h2{font-size: 18px;top: 70%;left: 26%;}
    
    .banner2, .banner3, .banner4, .banner5, .banner6, .banner7, .banner8, .banner9{height: 311px;background-size: 100%;}
	.banner2 h2, .banner3 h2, .banner4 h2, .banner5 h2, .banner6 h2, .banner7 h2, .banner8 h2 , .banner9 h2 {font-size: 18px;top: 70%;left: 26%;}
    
    
    
	.slicknav_nav{display: block;background: #0056a4;padding: 10px;text-transform: uppercase;}
	.carousel-inner .item img{width: 100%;}
	.minister{background-size: cover;background-position-x: 85%;}
}

@media screen and (max-width: 640px) {
	.minister h2 {font-size: 22px;}
	.minister h3 {font-size: 18px;}
	.minister p {font-size: 12px;line-height: 20px;}
    
	.banner {height: 250px;}
    .banner2, .banner3, .banner4, .banner5, .banner6 , .banner7, .banner8 , .banner9 {height: 250px;}
    
	.videoPlay{width: 52px;height: 52px;}
	.videoPlay img{width: 100%;}
    
	.banner h2 {font-size: 14px;top: 63%;}
    .banner2 h2, .banner3 h2, .banner4 h2, .banner5 h2, .banner6 h2, .banner7 h2, .banner8 h2 , .banner9 h2 {font-size: 14px;top: 63%;}
    
	.gasSec h2 , .thankYou h2{font-size: 16px;}
	.gasSec{max-height: 100%;background: url(../img/gasSec.jpg) repeat-y;}
}

@media screen and (max-width: 480px) {
	.menuBar{padding: 10px 0;}
	.logo {width: 100px;}
	.minLogo {width: 120px;}
	.js .slicknav_menu{top: 48px;}
	.iniBy{font-size: 10px;}
	.social li a{width: 22px;height: 22px;display: block;}
	.social li a img{width: 100%;}
    
	.banner {height: 144px;}
    .banner2, .banner3, .banner4, .banner5, .banner6  , .banner7, .banner8, .banner9 {height: 144px;}
    
	.banner h2{top: 70%;text-align: center;}
    .banner2 h2, .banner3 h2, .banner4 h2, .banner5 h2 .banner6 h2 , .banner7 h2 , .banner8 h2, .banner9 h2{top: 70%;text-align: center;}
    
	.gasSec h2{padding: 0 20px;}
	.minister {background-position-x: 75%;}
	footer p{width: 100%;text-align: center;}
}

@media screen and (max-width: 360px) {
	.iniBy , .minLogo , .banner h2{display: none;}
    .js .slicknav_menu {top: 42px;}
    
    .banner2 h2{display: none;}
    
	.banner {height: 130px;}
    .banner2, .banner3, .banner4, .banner5, .banner6  , .banner7, .banner8, .banner9  {height: 130px;}
}