/*---------------------------------- GLOBAL DECLARATIONS --------------------------------------*/
body{ background-color:#fff; padding:0; margin:0; font-family: 'Montserrat-Regular'; font-size:15px; color:#000; overflow-y: auto; }
body.off{ overflow-y: hidden;  }
div{ font-family: 'Montserrat-Regular'; }

section{ width: 100%; min-height: auto; height: auto; display: block; overflow: hidden; }
section, div, h1,h2,h3,h4,h5,h6,p,a, ul ,li, svg{ transition: all 0.5s;  }

h1,h2,h3,h4,h5,h6{ margin: 10px 0; padding: 0; line-height: 1.3em; transition: all 0.2s; font-family: 'Montserrat-Bold'; }
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span{ font-family: 'Montserrat-Bold'; display: block; color: #e61e25; line-height: 0.9em; }
h1{ font-size: 30px; color: #005ca6; }
h2{ font-size: 20px; color: #e61e25; }
h3{ font-size: 18px; color: #005ca6; }
h4{ font-size: 15px; color: #005ca6; }
h5{ font-size: 14px; color: #005ca6; }
h6{ font-size: 13px; color: #000000; }
p{ margin: 15px 0; padding: 0; font-family: 'Montserrat-Regular'; line-height:1.2em; font-size:14px; }
a{ margin:10px 0; color: #000; transition: all 0.2s; font-family: 'Montserrat-Bold'; color: #000; }
a:hover{ text-decoration: none; }
img{ width:100%; height:auto; }
ul, ol{ display:block; padding:0 0 0 40px; line-height:1.3em; font-size:12px; text-align:left; font-family: 'Montserrat-Regular'; }
ul li, ol li{ padding:0 0; }
li.widget{ list-style-type:none; }
.blockquote{ font-style:italic; }


input, textarea, button, label, select, .input_field { display:block; width: 100%; height: auto; }
label{ font-size:15px; font-family: 'Montserrat-Bold' !important; display:block; padding:10px 0 0 0; color: #000 !important; margin:20px 0 0px 0; }
input, select, textarea,.input_field, option{ border:1px solid #005ca6; border-radius:20px; padding:15px 20px !important; margin:6px 0 8px 0; font-family: 'Montserrat-Regular'; }
input[type="button"], button{  background-color:#e61e25 !important; color: #fff !important; border:3px solid #e61e25; font-family: 'Montserrat-Bold'; color: #fff; }
input[type="button"]:hover, button:hover{ background-color:#005ca6 !important; color: #fff !important; border:3px solid #005ca6; }
::placeholder{ color: #8b8b8b; }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8b8b8b; }
::-moz-placeholder { /* Firefox 19+ */ color: #8b8b8b; }
:-ms-input-placeholder { /* IE 10+ */ color: #8b8b8b; }
:-moz-placeholder { /* Firefox 18- */ color: #8b8b8b; }

.bttn{ font-family: 'Montserrat-Bold'; border-radius: 0px !important; text-transform: capitalize; margin-top:20px; padding: 15px 30px; transition: all 0.2s; position: relative; font-size:15px !important; display: inline-block; width: auto; border-radius: 10px !important; }
.bttn_red{ background-color: #e61e25; color: #fff; width: auto; }
.bttn_red:hover{ background-color: #005ca6; color: #fff; }
.bttn_white{ background-color: #fff; color: #e61e25; width: auto; }
.bttn_white:hover{ background-color: #000; color: #fff; }
.bttn_blue{ background-color: #005ca6; color: #fff; width: auto; }
.bttn_blue:hover{ background-color: #e61e25; color: #fff; }
.btn_submit, .form_wrapper input[type="button"]{ background-color: #1e8c3e; width: auto; margin: 20px 0 0 0; padding: 15px 30px !important; border: none !important; }


a.btn_black{ min-width:180px; font-style: italic; padding-right:70px !important; margin-right: 150px; }
a.btn_black:hover{ color: #000; }
a.btn_black:hover:after{ background-color:#ffc300; color: #fff; }
a.btn_black:after{ content:"\f054"; font-family:"FontAwesome"; font-size:18px; margin-right: 20px; background-color: #000; color:#ffc300; padding:7px 12px;  position: absolute; right:0; top: 0; bottom: 0; }
/*a.btn_blk:after{ content:"\f00a"; font-family:"FontAwesome"; font-size:18px; margin-right: 20px; background-color: #000; width:100px; height:100px; }*/


.for_desktop{ display: block; }
.for_mobi{ display: none; }

.overlay{ position:absolute; top:0; left: 0; right: 0; bottom: 0; width:100%; height:100%; background-color: rgba(0,0,0,0.4); }
.global_wrapper{ position: relative; z-index:3; width: 90%; height: auto; margin: 0 auto; padding: 100px 0; display: block; overflow: hidden; /* transition:0.6s; transform: translateY(30%); opacity: 0;*/}

.full_bg_image{ background-size:cover; background-position: center center; background-repeat:no-repeat; }
.top_spacer{ margin-top:140px; }

.universal_container{ display:block; width: 100%; height: auto; overflow: hidden; position: relative; }
.universal_container.on{ transform: translateY(0%); opacity: 1;}
.universal_container{ text-align:center; }
.universal_container h1{ font-family: '../fonts/Montserrat-Bold'; font-size: 40px; color: #1c8439; display: block; width:100%; overflow:hidden; margin: 10px 0; }
.universal_container h2{ font-family: '../fonts/Montserrat-Bold'; font-size: 17px; color: #f69f1b; }
.universal_container p, .universal_container ul, .universal_container ol{ width:90%; margin:30px auto 30px; }



#preloader{ position:fixed; z-index:9; top:0; bottom: 0; left: 0; right:0; background-color: #ffffff; background-size: cover; display: flex; align-items: center; justify-content: center; color: #ccc; cursor: pointer; transition: .2s linear; }
#preloader .logo img{ width:100%; }
.loader { width: 250px; height: 150px; background: url('../images/battery_pap_logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; }


.pop_mpesa{ position: fixed; z-index: 4; width: 110px; height: auto; background-color: #059f5f; bottom: 50%; transform: translateY(90%); right: 0; color:#000; font-weight: bold; padding: 10px 10px !important; text-align: center !important; overflow: hidden; font-family: '../fonts/Montserrat-Bold' !important; font-size: 15px; }
.pop_mpesa h1{ color: #fff !important; font-size: 15px; } 
.pop_mpesa h2{ color: #000 !important; font-size: 12px; background-color: #fff; padding: 5px; } 
      

header{ padding:0 0; margin: 0; width: 100%; height: 120px; position: fixed; z-index: 2; top: 0; right:0; left: 0; z-index: 5; transition: all 0.2s; }
header.on{ background-color: rgba(255,255,255,0.8); }
header .global_wrapper{ padding: 0 0 !important; width: 90% !important; min-height: 120px; height: auto; display: block; overflow: visible; }

.top_logo{ width:120px; height: auto; overflow: hidden; margin: 0px auto; background-color:transparent; position: absolute; z-index: 2; top:0px; left:0; display: block; }
.top_logo img{ width: 100%; height:auto; }
/*.inside img{ color: #000; filter: invert(1); }*/

.mainnav{ position: relative; z-index: 1; top: 0; right: 0; bottom: 0; left:0; width: 40%; height: 50px; margin:20px auto 0; /*transform: translateY(-120%);*/ }
/*.mainnav.on{ transform: translateY(0%); }*/
.mainnav nav{ width:100%; height:auto; position:relative; top:0; right:0; bottom: 0; z-index:2; display: block; padding: 0; transition: all 0.4s; opacity:1; transform: translateX(0%); transition-delay: 0.8s; }
.mainnav nav.on{ opacity: 1; transform: translateX(0%);  }
.mainnav nav ul{ display: block; font-family: 'Montserrat-Bold'; font-size: 12px; text-transform:capitalize; margin:0; padding:0; text-align: center; }
.mainnav nav ul li{ display: inline-block; float: none; margin:20px 5px; transition:0.6s; transform: translateY(0%); opacity: 1; }
.mainnav nav ul li.on{ transform: translateY(0%); opacity: 1; }
.mainnav nav ul li.current-menu-item a{ border-bottom:2px solid #fff;}
.mainnav nav ul li a{ display: inline-block; width: auto; color: #005ca6; text-transform: uppercase; padding: 10px 0px; margin:0; border-bottom: 0px solid #fff; transition:all 0.4s; position:relative; outline:none; font-family: 'Montserrat-Bold';  }
.mainnav nav ul li a:hover, .mainnav nav ul li a.active{ color:#e61e25; text-decoration: none; transition:all 0.4s; }
.mainnav nav ul li:hover ul{ opacity: 1; transform: translateY(0%);  }

.mainnav nav ul li a:after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background-color:currentColor; -webkit-transform-origin:right; transform-origin:right; -webkit-transform:scaleX(0); transform:scaleX(0); transition:-webkit-transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1),-webkit-transform .9s cubic-bezier(.19,1,.22,1); }
.mainnav nav ul li a.active:after, .mainnav nav ul li a:hover:after{ -webkit-transform-origin:left; transform-origin:left; -webkit-transform:scaleX(1); transform:scaleX(1); }

.mainnav nav ul li ul{ position: absolute; background-color: #ccc; width:200px; height: auto; text-align: left; opacity: 0; transform: translateY(-10%); font-size: 13px; }
.mainnav nav ul li ul li{ padding: 8px 15px; margin: 0 0; display: block; }
.mainnav nav ul li ul li a{ display: block; }


.other_header_menus{ position: absolute; right: 0; top: 10px; width:auto; height: auto; }
.other_header_menus ul{ display: block; width: auto; font-family: 'Montserrat-Bold'; padding: 0 40px 0 0; text-align:right !important; }
.other_header_menus ul li{ width: auto; display: block; vertical-align: middle; margin: 0 5px; }
.other_header_menus ul li a{ display: block; width: auto; height: auto; background-color: transparent; opacity: 1; transition: all 0.4s; color:#005ca6 !important; }
.other_header_menus ul li a:hover{ opacity:0.5; }

.icon_cart{ width:30px !important; height:30px !important; background-image: url('../images/icon_cart.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; right: 0; }


header.on .mobi_menu_icon span{ background-color:#000 !important; }
.mobi_menu_icon{ display:none; position:fixed; z-index:7; padding: 15px; width:50px; height:auto; top:20px; right:20px; /*display:block;*/ cursor:pointer; overflow:hidden; background-color: #e61e25; border-radius:5px; }
.mobi_menu_icon:hover{ background-color: #005ca6; }
.mobi_menu_icon span{ transition:all 0.4s; height:2px; display:block; background-color:#fff; float: right; }
.mobi_menu_icon:hover span{  }
.mobi_menu_icon span:nth-child(3n+1){ width:100%; margin:0 0 2px 0; background-color:#fff; position:relative; top:auto; transform:rotate(0deg); }
.mobi_menu_icon span:nth-child(3n+2){ width:100%; margin:2px 0 2px 0; background-color:#fff; position:relative; opacity:1; float: right; }
.mobi_menu_icon span:nth-child(3n+3){ width:100%; margin:2px 0 0 0; background-color:#fff;  position:relative; top:auto; transform:rotate(0deg); }
.mobi_menu_icon:hover span:nth-child(3n+1){ width:60%; }
.mobi_menu_icon:hover span:nth-child(3n+2){ width:100%; }
.mobi_menu_icon:hover span:nth-child(3n+3){ width:70%; }
.mobi_menu_icon.active span:nth-child(3n+1){ width:50%; margin:0 0 0 0; transform:rotate(45deg); position:absolute; top:17px; left:25%; }
.mobi_menu_icon.active span:nth-child(3n+2){ width:100%; opacity:0; }
.mobi_menu_icon.active span:nth-child(3n+3){ width:50%; margin:0 0 0 0; transform:rotate(-45deg); position:absolute; top:17px; right:25%; }

ul.slick-dots{ position: absolute; z-index: 3; left: 0; top: auto; bottom: 50px; width: 100%; height: auto; text-align: center; }
ul.slick-dots::before{ position: absolute; left: 5px; top: 0; width: 10px; height: 50px; background-color: #fff; }
ul.slick-dots::after{}
ul.slick-dots li{ display: inline-block; vertical-align: middle; width:auto; height: auto; border-radius: 50%; overflow: hidden; margin:0 3px; font-size: 0; color:transparent; }
ul.slick-dots li button{ display: block; width:15px; height: 15px; border-radius: 50%; overflow: hidden; color: #e4e0e0; border: none; background-color: #000 !important; }
ul.slick-dots li.slick-active button{ width:20px; height: 20px;  background-color: #fff !important; border: 2px solid #ffc300; }

.slick-arrow{ position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 50px !important; height: 80px !important; overflow: hidden; background-color:transparent !important;  border: none;  width: 20px; height: 40px; font-size: 0; color: transparent; transition: all 0.4s; }
.slick-arrow::after{ font-family:"FontAwesome"; font-size:30px; color:#000; padding:0 0;  position: absolute; right:0; left: 0; top: 50%; transform: translateY(-50%); bottom: 0; }
.slick-arrow:hover{ background-color: transparent !important; color: #f3a100 !important; }
.slick-arrow:hover::after{ background-color: transparent !important; color: #f3a100 !important; }
.slick-next{ right:0; }
.slick-next:after{ content:"\f054"; }
.slick-prev{ left:0; }
.slick-prev:after{ content:"\f053"; }
.slick-arrow:hover{ border:none; }

/*---------------------------------HOME PAGE-----------------------------------------*/

#home_banner{ width: 90%; min-height:600px; height: auto; margin: 120px auto 0; border-radius: 20px; background-color: red; position: relative; background-attachment: fixed; font-family: '../fonts/Brandon_blk_it';}
.sliderWrap{ width: 100%; min-height:600px; height: auto; background-color: pink; position: relative; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.single_banner{ background-size: cover; }
.single_banner .wrapper{ position: relative; }

.banner_video{  position: absolute; z-index: 1; top:0; bottom:0; left: 0; right: 0; }
.banner_video iframe{ position: relative; z-index: 1; width: 100%; height: 100%;  }
.overlay{ position: absolute; width:100%; height: 100%; top:0; bottom:0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); }
.banner_video .overlay{ z-index: 2; }

#home_banner .global_wrapper{ padding:40px 0; }
.home_banner_txt{ display:table; width: 70%; height: 600px; position: relative; z-index: 4; left: 5%;  color: #fff; transform: translateX(0%); opacity:1; transition-duration: 0.4s; transition-delay: 2s; }
.home_banner_txt article{ display:table-cell; vertical-align: middle; text-align: left; }

#home_banner h1{ color: #fff; font-size: 30px; text-transform: capitalize; font-family: 'Montserrat-Bold'; }
#home_banner h1 span{ font-size:45px; }
#home_banner p{ font-size: 20px; color:#000; position: relative; padding: 0 0;  }

.selectBatteryWrapper{ position: absolute; top: auto; left: 0; right: 0; bottom: 5%;  z-index: 2; width: 94%; height: auto; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 20px; font-family: 'Montserrat-Medium'; }
.selectFieldTitle{ float: left; width: 30%; height: auto; color: #005ca6; font-size: 20px; line-height: 4em; } 
.selectFieldInput{ float: left; width: 70%; height: auto; padding:10px 0; font-family: 'Montserrat-Regular'; }
.selectFieldInput select{ width: 96%; height: auto; margin:0; padding:20px 20px !important; }
/*---------------------------------FEATURED SECTION START-----------------------------------------*/
.homeFeatured{ display: block; width: 100%;  min-height: auto; height:auto; overflow: hidden; }
.homeFeaturedCol{ background-color: #005ca6; border-radius: 20px; width: 100%; min-height: 400px; height: auto; color: #fff; overflow: hidden; text-align: center; }
.homeFeaturedCol h1{ font-size: 35px; color: #fff; font-family: 'Montserrat-Bold'; text-align: center; margin: 30% 0 0 0 !important; }
.homeFeaturedCol a{  }

.listedProducts{ display: block; width: 100%; height:auto; overflow: hidden; text-align: center; }
.homeFeatured .singleListItem{ display: inline-block; width: 28% !important; height: auto; margin: 0 2%; }
.productPic{ display: block; width: 100%; height: 250px; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; }
.productPic img{ object-fit: contain; }
.productWriteUp{ display: block; width: 100%; height: auto; text-align: left !important; }
.productWriteUp h1, h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 24px; color: #005ca6; }
.productPrice, .woocommerce-Price-amount, .amount{ font-size: 20px; font-family: 'Montserrat-SemiBold'; color: #005ca6; }
.productWriteUp .bttn, .woocommerce ul.products li.product .button{ width: 100% !important; background-color: #e61e25; color: #fff; font-family: 'Montserrat-Bold'; border-radius: 0px !important; text-transform: capitalize; margin-top:20px; padding: 15px 30px; transition: all 0.2s; position: relative; font-size:15px !important; display: inline-block; width: auto; border-radius: 10px !important; }
.woocommerce ul.products li.product .button:hover{ background-color: #005ca6; color: #fff; }

.productsPage{ display: block; }
.singleListItem{ display: inline-block; width: 20% !important; height: auto; margin: 0 2%; }

.woocommerce .quantity .qty, .woocommerce table.cart td.actions .input-text{ width: auto !important; }
.posted_in a{ color: #005ca6; }
.posted_in a:hover{ color: #e61e25; }
.contentWrapper ul, .contentWrapper ol{ font-size: 14px; }

/*.contentWrapper{ display: block; width:100%; height: auto; padding: 100px 0 50px; overflow: hidden; position: relative; z-index: 1; }
.contentWrapper h2{ font-size: 18px; color: #f3a100; }
.why_image{ width:100%; height:500px; background-size: contain; background-position: center; }*/

/*#about{ background-color: #1c8439; display: table; }
#about .global_wrapper{ display: table-cell; min-height: 100vh; height: 100%; vertical-align: middle; }
.about_product{ width: 200px; height:600px; background-repeat: no-repeat; background-position: bottom center; background-size: contain; margin:0 auto; }
.about_writeup{ width: 60%; height: auto; display: block; margin: 30% 0 0 0; }*/
/*---------------------------------FEATURED SECTION END-----------------------------------------*/

/*---------------------------------SERVICE SECTION START-----------------------------------------*/
.homeServices{ display: block; width: 100%; min-height: auto; height:auto; overflow: hidden; text-align: center; background-color: #f7f7f7; }
.homeServices h1{ color: #005ca6 !important; font-size: 20px !important; }
.homeServices p{ width: 70% !important; font-size: 13px !important; margin: 30px auto !important; }
.homeListedServices{ display: block; width: 100%; height:auto; overflow: hidden; text-align: center; }
.homeSingleService{ display: inline-block; width: 18%; height: auto; vertical-align: top; text-align: center; }
.homeServiceIcon{ display: block; width: 100%; height: 100px; margin:20px auto 30px; background-size:auto 70%; background-position: center; background-repeat: no-repeat; }
.homeServiceWriteUp{ display: block; width: 100%; height: auto; text-align: center; }
.homeServiceWriteUp h1{ color: #000 !important; font-size: 13px !important; font-family: 'Montserrat-Bold' !important; }
/*---------------------------------SERVICE SECTION END-----------------------------------------*/

.articleBanner { width: 90%; min-height:300px; height: auto; margin: 120px auto 0; border-radius: 20px; background-color: red; position: relative; background-attachment: fixed; font-family: '../fonts/Brandon_blk_it';}
.staticBanner{ width: 100%; min-height:300px; height: auto; background-color: pink; position: relative; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.staticBanner .overlay{ z-index: 2; }

.bannerTxt{ display:table; width: 70%; height: 300px; position: relative; z-index: 4; left: 5%;  color: #fff; transform: translateX(0%); opacity:1; transition-duration: 0.4s; transition-delay: 2s; }
.bannerTxt article{ display:table-cell; vertical-align: bottom; text-align: left; padding-bottom: 40px; }

.bannerTxt h1{ color: #fff; font-size: 30px; text-transform: capitalize; font-family: 'Montserrat-Bold'; }
.bannerTxt h1 span{ font-size:45px; }
.bannerTxt p{ font-size: 20px; color:#000; position: relative; padding: 0 0;  }

.reasonsLists{ display: block; width: 100%; height: auto; overflow: hidden; }
.reasonsLists div, .reasonsLists p{ font-family: 'Montserrat-Bold' !important; }
.singleReason{ display: block; width: 100%; height: auto; padding: 20px 0; margin: 10px 0 20px; overflow: hidden; font-family: 'Montserrat-Bold' !important; background-color: #fff; border-bottom: 1px solid #000; }
.singleReason:hover{ background-color: #f6f6f6; }
.singleReasonHeading{ display: inline-block; width: 30%; height: auto; margin: 0 2% 0 0; }
.singleReasonHeading , .singleReasonHeading h1{  color: #000; font-family: 'Montserrat-Bold'; font-size: 18px !important; }
.singleReasonPositive{ display: inline-block; width: 30%; height: auto; margin: 0 2%; background-color: #ebebeb; font-family: 'Montserrat-Bold' !important; }
.singleReasonNegative{ display: inline-block; width: 30%; height: auto; margin: 0 0 0 2%; background-color: #ebebeb; font-family: 'Montserrat-Bold' !important; }
.reasonTitle{ width: 100%; height: auto; position: relative; color: #fff; }
.bgBlue{ background-color: #005ca6; }
.bgRed{ background-color: #e61e25; }
.reasonTitle, .singleReason p{ padding:10px 20px !important; }

.serviceListsContent{ width: 100%; display: block; height: auto; overflow: hidden; }
.serviceListsWrapper{ width: 100%; display: block; height: auto; overflow: hidden; }
.singleService{ width: 45%; min-height: 350px; height: auto; display: inline-block; padding:30px 40px; margin: 20px 2%; vertical-align: top; background-color: #1a6daf; color: #fff !important; border-radius: 10px; }
.singleService:hover{ background-color: #e61e25; }
.singleService h1, .singleService p{ color: #fff; }
.singleService h1{ font-size: 14px; }
.singleService p{ font-size: 13px; }
.singleServiceIcon{ width:80px; height: 80px; background-color:transparent; background-position: center; background-repeat: no-repeat; background-size: contain; }

/*---------------------------------FOOTER SECTION-----------------------------------------*/
footer{ background-color: #000;  color:#fff; text-align: left; position: relative; z-index: 2; bottom:0; left: 0; right: 0; }
footer .global_wrapper{ width:90%; overflow: hidden; padding: 5px 0; }
footer .col-lg-8, footer .col-lg-4{ padding: 30px 0 !important; }
footer h1{ font-size: 15px !important; color: #fff !important; }
footer ul, footer ol{ display: block; padding: 30px 0 !important; }
footer ul li, footer ol li{ display: inline-block; margin: 0 20px; }
footer ul li:first-child, footer ol li:first-child{ margin: 0 20px 0 0;  }
footer ul li a, footer ol li a{ font-size: 13px; }
footer p{ display: inline-block; font-size: 11px; }

footer .col-lg-6:nth-child(2n+1){ text-align: left !important; }

footer a { color:#fff; text-decoration: none; padding: 0; margin: 0; line-height: normal; }
footer a:hover{ color:#e61e25; }

ul.listed_socials{ position: relative; z-index: 5; bottom: 0; left: 0; padding: 10px; display: block; width: auto; height: auto; text-align: left; margin: 0; padding: 0; float: left; }
ul.listed_socials li{ display: inline-block; width: auto; height: auto; margin:10px 1px; }
ul.listed_socials li:first-child, ol.listed_socials li:first-child{ margin:10px 1px 10px 0px;  }
ul.listed_socials li a{ color: #000; }
ul.listed_socials li:hover i{ color: #fff; }
.fa{ font-size: 30px; }

ul.listed_socials li a div{ color: #fff; width: 35px; height: 35px; background-color: #fff; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 50%; }
ul.listed_socials li a:hover div{ background-color: #e61e25; }
.social_icon_fb{ background-image: url('../images/icon_facebook.png'); }
.social_icon_li{ background-image: url('../images/icon_linkedin.png'); }
.social_icon_ig{ background-image: url('../images/icon_instagram.png'); }
.social_icon_x{ background-image: url('../images/icon_x.png'); }
.social_icon_tiktok{ background-image: url('../images/icon_tiktok.png'); }
.social_icon_whatsapp{ background-image: url('../images/icon_whatsapp.png'); }

.footerBottom{ text-align: center !important; border-top: 1px solid #fff !important; padding: 20px 0 !important; font-size: 11px; }


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


	
}


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



#home_banner{ width: 90%; min-height:600px; height: auto; margin: 120px auto 0; border-radius: 20px; background-color: red; position: relative; background-attachment: fixed; font-family: '../fonts/Brandon_blk_it';}
.sliderWrap{ width: 100%; min-height:600px; height: auto; background-color: pink; position: relative; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.single_banner{ background-size: cover; }
.single_banner .wrapper{ position: relative; }

.banner_video{  position: absolute; z-index: 1; top:0; bottom:0; left: 0; right: 0; }
.banner_video iframe{ position: relative; z-index: 1; width: 100%; height: 100%;  }
.overlay{ position: absolute; width:100%; height: 100%; top:0; bottom:0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); }
.banner_video .overlay{ z-index: 2; }

#home_banner .global_wrapper{ padding:40px 0; }
.home_banner_txt{ display:table; width: 70%; height: 600px; position: relative; z-index: 4; left: 5%;  color: #fff; transform: translateX(0%); opacity:1; transition-duration: 0.4s; transition-delay: 2s; }
.home_banner_txt article{ display:table-cell; vertical-align: middle; text-align: left; }

#home_banner h1{ color: #fff; font-size: 30px; text-transform: capitalize; font-family: 'Montserrat-Bold'; }
#home_banner h1 span{ font-size:45px; }
#home_banner p{ font-size: 20px; color:#000; position: relative; padding: 0 0; }


.homeFeatured .col-lg-3{ width:100%; height: auto; margin: 10px auto 30px !important;  }
.homeFeatured .col-lg-9{ width:100%; height: auto; margin: 10px auto 30px !important;  }

.homeFeaturedCol { min-height: auto !important; padding:30px 0; }
.homeFeaturedCol h1 { margin: 20px auto !important; }	

.selectFieldTitle { font-size: 16px; }

.homeFeatured .singleListItem , .singleListItem{ display: inline-block; width: 28% !important; }
.homeSingleService{ display: inline-block; width: 30%;}

footer .col-lg-8, footer .col-lg-4 { width:100%; display: block; padding: 10px 0; }
.footerBottom { text-align: center !important; border-top: 1px solid #fff !important;  padding: 20px 0 !important; font-size: 11px; display: block; overflow: hidden;  width: 100%; }
	
}


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

	
}

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

/*body{ display: none; }*/

.mobi_menu_icon{ display:block; }

.top_logo{ width:90px; top: 20px; }

.mainnav{ position: fixed; z-index: 1; top: 0; right: 0; bottom: 0; left:auto; width: 100%; height: 100%; margin:0 0 0 0; padding: 80px 0 0 0; opacity: 0; transform: translateX(300%); background-color: rgba(0,0,0,0.6); }
.mainnav.on{ opacity: 1; transform: translateX(0%); }
.mainnav nav{ display:block; width:60%; height:100%; background-color: #005ca6; position:absolute; top:0; right:0; bottom: 0; z-index:2; display: block; padding: 0; transition: all 0.4s; opacity:0; transform: translateX(200%); transition-delay: 0.3s; }
.mainnav nav.on{ opacity:1; transform: translateX(0%); }
.mainnav nav ul{ display: block; width: 100%; height: auto; background-color: transparent; position: relative; top:0; transform:translateY(80px);  }
.mainnav nav ul li{ display: block; float: none; margin:20px 0; padding: 0 20px 0 0; transition:0.6s; transform: translateY(0%); opacity: 1; text-align: right; }
.mainnav nav ul li ul{ position: relative; background-color: transparent; width:auto; height: auto; text-align: left; opacity: 1; transform: translateY(0%); font-size: 13px; }
.mainnav nav ul li ul li{ padding: 0px 15px 0px 0px; margin: 0 0; display: block; }
.mainnav nav ul li a{ display: inline-block; width: auto; color: #fff; }

.mainnav nav ul li a:after { content:""; position:absolute; bottom:0; left:auto; right: 0; width:100%; height:2px; background-color:currentColor; -webkit-transform-origin:left; transform-origin:left; -webkit-transform:scaleX(0); transform:scaleX(0); transition:-webkit-transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1),-webkit-transform .9s cubic-bezier(.19,1,.22,1); }
.mainnav nav ul li a.active:after, .mainnav nav ul li a:hover:after{ -webkit-transform-origin:right; transform-origin:right; -webkit-transform:scaleX(1); transform:scaleX(1); }

.mainnav nav ul li ul{ width: 100%; height: auto; overflow:hidden; }
.mainnav nav ul li ul li{  }
.mainnav nav ul li ul li a{ color: #ccc; display: inline-block; }

.other_header_menus{ position: absolute; right: 50px; top: 10px; width:auto; height: auto; }


.icon_cart{ position: absolute; top: 10px; right: 0; }

#home_banner { width: 95%; }
.home_banner_txt { display: block; width: 90%; }
.home_banner_txt article { display: block; vertical-align: top; text-align: left; padding-top: 50px; }
.selectFieldTitle { float: none; width: 100%; height: auto; color: #005ca6; font-size: 20px; line-height: 4em; }
.selectFieldInput { float: none; width: 100%; height: auto; padding: 10px 0; font-family: 'Montserrat-Regular'; }

.global_wrapper { width: 99%; }
.contentWrapper .global_wrapper { width: 90%; margin: 0 auto; }

.singleReasonHeading{ display: block; width: 100%; height: auto; margin: 10px auto; }
.singleReasonHeading , .singleReasonHeading h1{  color: #000; font-family: 'Montserrat-Bold'; font-size: 18px !important; }
.singleReasonPositive{ display: block; width: 100%; height: auto; margin: 10px auto; }
.singleReasonNegative{ display: block; width: 100%; height: auto; margin: 10px auto; }


.singleService { width: 100%; min-height: 350px; height: auto; display: block; padding: 30px 40px; margin: 20px auto; vertical-align: top; background-color: #1a6daf; color: #fff !important; border-radius: 10px; }

.homeFeatured .singleListItem , .singleListItem{ display: inline-block; width: 45% !important; }
footer .col-lg-8, footer .col-lg-4 { width:100%; display: block; padding: 10px 0; }
.footerBottom { text-align: center !important; border-top: 1px solid #fff !important;  padding: 20px 0 !important; font-size: 11px; display: block; overflow: hidden;  width: 100%; }

footer ul li, footer ol li{ display: block; margin: 10px 0; }
footer ul li:first-child, footer ol li:first-child{ margin: 0 0 0 0 !important;  }

ul.listed_socials li:first-child, ol.listed_socials li:first-child {
    margin: 10px 1px 10px 0px !important;
}

/*.mainnav nav.on{ opacity: 1; transform: translateX(0%);  }
.mainnav nav ul{ display: block; font-family: 'Montserrat-Bold'; background-color: #1c8439; width: auto; height: auto; font-size: 12px; text-transform:capitalize; margin:0 20px 0 0; padding:0; text-align: center; position: absolute; top: 50%; transform: translateY(0%); }
.mainnav nav ul li{ display: block; float: none; margin:20px 0; transition:0.6s; transform: translateY(0%); opacity: 1; text-align: right; }
.mainnav nav ul li.on{ transform: translateY(0%); opacity: 1; }
.mainnav nav ul li.current-menu-item a{ border-bottom:2px solid #fff;}
.mainnav nav ul li a{ display: inline-block; width: auto; color: #fff; text-transform: uppercase; padding: 10px 0px; margin:0; border-bottom: 0px solid #fff; transition:all 0.4s; position:relative; outline:none; font-family: 'Montserrat-Bold';  }
.mainnav nav ul li a:hover, .mainnav nav ul li a.active{ color:#000; text-decoration: none; transition:all 0.4s; }
.mainnav nav ul li:hover ul{ opacity: 1; transform: translateY(0%); }

.mainnav nav ul li a:after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background-color:currentColor; -webkit-transform-origin:right; transform-origin:right; -webkit-transform:scaleX(0); transform:scaleX(0); transition:-webkit-transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1); transition:transform .9s cubic-bezier(.19,1,.22,1),-webkit-transform .9s cubic-bezier(.19,1,.22,1); }
.mainnav nav ul li a.active:after, .mainnav nav ul li a:hover:after{ -webkit-transform-origin:left; transform-origin:left; -webkit-transform:scaleX(1); transform:scaleX(1); }

.mainnav nav ul li ul{ position: absolute; background-color: #ccc; width:200px; height: auto; text-align: left; opacity: 0; transform: translateY(-10%); font-size: 13px; }
.mainnav nav ul li ul li{ padding: 8px 15px; margin: 0 0; display: block; }
.mainnav nav ul li ul li a{ display: block; }*/
	
/*.for_desktop{ display: none; }
.for_mobi{ display: block; }

.top_spacer { margin-top: 100px; }	
.global_wrapper { margin: 0 auto; padding: 0px 0; }	*/
	
/*header .spero_global_wrapper{ width:94%; padding: 15px 0 !important; }
header .spero_logo{ margin-left:0; }*/
	
/*header nav{ position:fixed; left:0; top:60px; bottom:0; transform:translateX(-200%); transition:all 0.4s; width:100%; height:100%; background-color:rgba(255,255,255,1); overflow:auto; }
header.active nav{ transform:translateX(0%); background-color:rgba(255,255,255,1); }
header nav ul{ display: block; float: none; width:92%; margin: 0 auto; }
header nav ul li { display:block; float: none; margin: 10px 0px; transition: 0.6s;  transform: translateY(0%); opacity: 1; }
header nav ul li a { padding: 20px 0px; }
header.on nav ul li a { padding: 20px 0px; }
header nav ul li.current-menu-item a{ border-bottom:none; background-color:#fff; color:#000; }
header.on nav ul li.current-menu-item a{ border-bottom:none; background-color:#000; color:#fff; }

	
.col-lg-4{ width:100%; float: none; display: block; }	
.col-lg-8{ width:100%; float: none; display: block; }
.col-lg-6{ width:100%; float: none; display: block; }


header.on .top_logo, .top_logo{ width:140px; }
header .global_wrapper{ width: 90% !important; }
	
.universal_container h1{ font-size: 28px; }

#home_banner{ min-height:100vh; height: auto; }	
.home_banner_txt{ text-align: center; margin: 20% auto 10%; height: auto; display:block; }
.home_banner_txt article{ display:block; height: auto; }
.home_banner_txt h1 { font-size: 25px; }
.home_banner_txt p { font-size: 14px; }
.home_banner_img{ width:70%; margin: 0 auto; height: auto; text-align: center; }	
.home_banner_img img { width: 60%; margin: 0 auto; position: relative; top: 0; right: auto; transform: translateY(0); }
	
	
	
#home_banner p { font-size: 16px; color: #fff; font-family: '../fonts/URWGeometricRegular'; position: relative; width: 90%; margin: 0 auto; padding: 50px 0 0 0; text-align: left; left: auto; text-align: center; }	

#home_banner p::before { content: ""; background-image: url("../images/header_stripes.png"); background-size: contain; background-repeat: no-repeat; overflow: hidden; position: absolute; width: 200px; height: 50px; left: 50%; top: 0; transform: translateX(-50%); }
	
.home_banner_txt article { width: 89%; }
	
#home_banner h1 { font-size: 50px; }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

.services_container ul li { width: 25%; }
	
.about_single{ display:block; width: 100%; height: auto; position: relative; padding: 100px 0; margin:30px 0 50px; overflow: hidden; }
.about_single_txt h1{ font-size: 20px; }
	
.work_writeup { opacity: 1; height: auto; }
.work_content:after{ opacity:1; height: 35px; }
	
.blog_single_content { text-align: center; }	
.blog_single_content h1, .blog_single_content p { width: 100%; float: none; margin: 5px auto !important; }	
.btn_border_white { position: relative; top: auto; right: auto; display: block; }

a.btn_orange, .blog_wrapper a.btn_orange { position: relative; right: auto !important; left: 0 !important; text-align: right !important; padding: 10px 20px 10px 10px; font-size: 20px; float: left; }	
	
.form_wrapper {  width: 87%; margin: 0 auto; padding: 20px 0 30px 0; text-align: left; }	
input, textarea, button, label, select, .input_field { width: 100%; }	
	
.contact_wrapper { height:auto; }	
.contact_wrapper iframe { height: 50vh !important; }	
	
footer .global_wrapper{ padding-top: 20px; }	
.footer_top .col-lg-4{ width:33%; float: left; }
ul.footer_nav { text-align: center; padding: 10px 0 20px; }
ul.footer_nav li {  margin: 10px 1%; }
ul.socials_footer { margin: 0 auto; float: none; text-align: center; }*/
	
	
}

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

header .global_wrapper { width: 85% !important; }   
.homeSingleService{ display: inline-block; width: 50%;}
	
/*#services h1.bg_text { top: 3%; }	
.services_container ul li { width: 42%; }	

.about_single { padding: 0 0; }	
.about_wrapper .about_single:nth-child(2n+1) .about_single_img{ left:0; }
.about_wrapper .about_single:nth-child(2n+2) .about_single_img{ right:auto; left: 0; }
.about_wrapper .about_single:nth-child(2n+1) .about_single_txt{ float: none; text-align: left; }
.about_wrapper .about_single:nth-child(2n+2) .about_single_txt{ float: none; text-align: left; }
.about_wrapper .about_single:nth-child(2n+1) .about_single_txt h1{ text-align: left; }
.about_wrapper .about_single:nth-child(2n+2) .about_single_txt h1{ text-align: left; }	
.about_single_txt{ padding: 0px 0 0px; z-index: 2; width: 100%; height: auto; }
.about_single_txt h1 { padding: 25px 5%; margin: 1px 0 0 0; }
.about_single_writeup { width: 90%; left: auto; margin: 0 auto; }
.about_single_img{ position: relative; width: 100%; height: 30vh; }	
	
.blog_wrapper div.blog_single:nth-child(4n+1){ margin-right:2%; background-color: rgba(28,132,57,1.0); }
.blog_wrapper div.blog_single:nth-child(4n+1):hover{ background-color:rgba(28,132,57,0.9); }
.blog_wrapper div.blog_single:nth-child(4n+2){ margin-left: 2%; background-color: rgba(246,159,27,1.0); }
.blog_wrapper div.blog_single:nth-child(4n+2):hover{ background-color:rgba(246,159,27,0.9); }
.blog_wrapper div.blog_single:nth-child(4n+3){ margin-right:2%; background-color: rgba(28,132,57,1.0); }
.blog_wrapper div.blog_single:nth-child(4n+3):hover{ background-color:rgba(28,132,57,0.9); }
.blog_wrapper div.blog_single:nth-child(4n+4){ margin-left:2%; background-color: rgba(246,159,27,1.0); }
.blog_wrapper div.blog_single:nth-child(4n+4):hover{ background-color:rgba(246,159,27,0.9); }	

.blog_single { width: 100%; min-height: auto; color: #ffffff; display: block; float: none; margin:0 auro 30px; }
.blog_single_avatar {  width: 150px; height: 150px; }
.blog_top { font-size: 13px; }
	
a.btn_orange, .blog_wrapper a.btn_orange { position: relative; right: auto !important; left: 0 !important; text-align: center !important; padding: 10px 20px 10px 10px; font-size: 20px; float: left; width: 100%; }
	
.btn_submit, .form_wrapper input[type="button"] { display: block; }	*/

/*.spero_home_writeup_main h1 { width: 100%; margin: 0 auto; font-size: 24px; text-align: center; }
.spero_home_writeup_two h1 { font-size: 30px; width: 100%; }
.spero_home_writeup_three h1 { font-size: 24px; width: 90%; }
.spero_home_writeup_main p { width: 90%; }
.spero_input_holder input[type="button"], .spero_input_holder input[type="submit"] { width: 100%; position: relative; }	
.bttn_darkblue, .bttn_white { background-size: 10px; }
.spero_writeup{ display: block; color: #283680; text-align: center;}*/

}

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

.homeFeatured .singleListItem , .singleListItem{ display: block; width: 100% !important; margin: 0 auto; }
.homeSingleService{ display:block; width: 100%; margin:10px auto;}

/*.services_container ul li { width: 100%; margin: 20px auto; }
.work_content { width: 80%; }
.work_logo { width: 90px; height: 90px; border-radius: 50%; background-size: 62% auto !important; }
	
.error_wrapper svg{ width: 200px; }	
	
.footer_top .col-lg-4 { width: 100%; float: none; }	*/


}