*{box-sizing: border-box;}
/*
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800&display=swap');
*/

@font-face {
    font-family: 'Poppins';
    src: url('..//fonts/Poppins/Poppins-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('..//fonts/Poppins/Poppins-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('..//fonts/Poppins/Poppins-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('..//fonts/Poppins/Poppins-Bold.ttf');
    font-weight: 800;
    font-style: normal;
}


@font-face {
    font-family: 'Montserrat';
    src: url('..//fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('..//fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('..//fonts/Montserrat/Montserrat-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('..//fonts/Montserrat/Montserrat-Bold.ttf');
    font-weight: 800;
    font-style: normal;
}


::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar:focus{50px}
::-webkit-scrollbar-track {background: #fff; }
::-webkit-scrollbar-thumb {background:#B7D039; ;border-radius:5px;}
::-webkit-scrollbar-thumb:hover {background:#B7D039; }

body{background: white; color:#666666;  font-family: 'Poppins'}
h1.main-heading{font-size: 64px; font-family: 'Montserrat';}
h1{font-size: 56px; font-family: 'Montserrat';}
h2{font-size: 36px; font-family: 'Montserrat';}
h3{font-size: 16px; font-family: 'Poppins'}
h4{font-size: 14px; font-family: 'Poppins'}
p{font-family: 'Poppins'}
a:hover{color: #B7D039 !important; transition: 0.5s}
.font-poppins{font-family: 'Poppins'}
.font-monstserrat{font-family: 'Montserrat';}
.font-10{font-size: 10px}
.font-11{font-size: 11px}
.font-12{font-size: 12px}
.font-13{font-size: 13px}
.font-14{font-size: 14px}
.font-15{font-size: 15px}
.font-16{font-size: 16px}
.font-18{font-size: 18px}
.font-20{font-size: 20px}
.font-22{font-size: 22px}
.font-24{font-size: 24px}
.font-40{font-size: 40px}
.font-48{font-size: 48px}
.font-bold{font-weight: bold}
.font-semi{font-weight: 600}
.font-regular{font-weight: 400}
.color-black{color: #0C0C0C}
.color-gray{color: #333333 !important}
.color-l-gray{color: #666666}
.color-white{color: #fff}
.color-green{color: #B7D039;}
.color-blue{color: #2190BC;}
.bg-l-blue{background: #F4F9FC}
.bg-l-gray{background: #F7F7F7}
.bg-white{background: #fff}
.text-left{text-align: left}
.upper-case{text-transform: uppercase}
.text-right{text-align: right}

input:not(.form-check-input){height: 50px !important; background: #F6F6F6 !important; border-radius: 50px !important; font-size: 16px !important; color: #1F1F1F !important; border: none !important; padding: 0 10px !important}
select{height: 50px; background: #F6F6F6; border-radius: 50px; font-size: 16px; color: #1F1F1F; border: none; padding: 0 10px}

.theme-btn{height: 46px; border-radius: 4px; box-shadow: none; font-weight: 600; font-family: 'Poppins'; font-size: 12px; letter-spacing: 3px}
.theme-btn:hover{box-shadow: none}
.theme-btn-black{background: #000000; color: white;}
.theme-btn-black:hover{background: white; color: black;}
.theme-btn-white{background: #fff; color: #A3BC26;}
.theme-btn-white:hover{background: #A3BC26; color: white;}
.theme-btn-green{background: #A3BC26; color: #000000;}
.theme-btn-green:hover{background: #fff; color: #000000;}

.btn{box-shadow: none !important}
.btn:hover{box-shadow: none !important}
.main-nav{margin-top: -60px !important}
.main-nav a{font-family: 'Poppins'; font-weight: 500}
.main-nav .dropdown-toggle::after{display: none}
.main-nav .dropdown-toggle:hover path{fill: #B7D039}
.main-nav a.theme-btn{font-size: 16px; letter-spacing: 0.75px;}
.bg-l-gray{background: #F6F6F6}
.bg-white{background: #fff}
.radius-4{border-radius: 4px;}
.radius-6{border-radius: 6px;}
.radius-8{border-radius: 8px;}
.radius-12{border-radius: 12px;}
.radius-24{border-radius: 24px;}
.section-margin{margin-top: 100px !important; margin-bottom: 100px !important}
footer{background: linear-gradient(360deg, #FFEAC1 0%, rgba(255, 235, 195, 0) 100%); min-height: 390px;}
.footer-grad{ position: absolute; width: 100%; padding: 0; bottom: 0; height: 230px; background-image: url(..//img/footer-grad.png); background-repeat: repeat-x; background-position: bottom; background-size: contain;}
.footer-social a:hover circle{fill: #FBCC0D}
footer .main-container{position: relative; z-index: 1}
.theme-btn:hover path{fill: #FBCC0D}
/*.form-check-input[type=checkbox]{background: #202020 !important; border-radius: 3px !important; height: 20px !important}*/
/*.form-check-input[type=checkbox]:checked:after{width: 10px; height: 20px; margin-left: -2px; margin-top: -6px;}*/
.form-check-input:focus:before{box-shadow: none !important}
.top-nav{height: 40px;}
.blue-divider{height: 1px; width: 100%; background: #92C7DD}
.gray-divider{height: 1px; width: 100%; background: #ddd}
/*#butter{padding-bottom: 40px !important}*/
 .grad-txt-2{background: -webkit-linear-gradient(180deg, #2690bb 0%, #b7d03a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
 .grad-txt{background: -webkit-linear-gradient(#B7D03A, #1684B0); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.main-container{max-width: 1140px;}

.review-desc h1{font-size: 72px; line-height: 72px}

.footer-bottom a:hover g{opacity: 1}
/*  ========================================================= Homepage start  ====================================================  */
.main-banner{margin-top: -300px;}
.charac-prop{border-bottom: 1px solid #2190BC}
.charac-content:hover{cursor: pointer; transition: 0.5s}
.charac-prop:hover{cursor: pointer; transition: 0.5s}
.charac-desc{display: none; transition: 0.5s}
.charac-content:hover .charac-desc{display: flex; transition: 0.5s}
.charac-content:hover .charac-prop{border-bottom-color: #000}
.charac-row{}
.charac-content:hover .charac-prop svg{transform: rotate(180deg); transition: 0.5s }
.feature-single{background: white; border-radius: 4px; box-shadow: 0px 1px 120px rgba(22, 132, 176, 0.1); min-height: 160px}
.feature-single h1{background: -webkit-linear-gradient(#B7D03A, #1684B0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 48px}
.specs-single-content{position: absolute; top: 30px; left: 50px;}
.transform-single{min-height: 580px;}

.features-section .nav-tabs .nav-link{background: none !important ;border-bottom: 1px solid #2690BB !important}
.features-slider .slide .slide-content img{max-width: 553px; height: auto}
.main-features-section{padding-left: 200px;}
.features-slider .slick-prev{top: -56px; right: 117px}
.features-slider .slick-next{top: -56px; right: 170px;}
.slide:not(.slick-active){opacity: 0.25}

.mobile-app-section .main-container{min-height: 540px}
.mob-app-texture{position: absolute; top: 0; right: 0; height: 100%;}
.mobile-app-section h1{font-size: 64px; font-weight: 500}
.btn-heading{font-size: 9px; letter-spacing: 2px; font-weight: 400}

.review-texture{position: absolute; top: 0; right: 0; padding: 0; height: 100%}
.reviews-section .nav-link {border-bottom: 1px solid #666666;}
.reviews-section .nav-tabs .nav-item{flex-grow: 1}
.reviews-section .nav-link.active, .reviews-section .nav-link:hover{color: #2690BB; border-bottom-color: #2690BB; background: none}
.review-desc{border-left: 1px solid #B7D03A}
.reviews-panels .FAQ-panel .collapsible{border-bottom: 1px solid #666666}
.reviews-panels .collapsible {
    cursor: pointer; padding: 5px 0 0 5px; width: 100%; border: none; text-align: left; outline: none; background: none;}
.reviews-panels button.collapsible:focus {outline: 0}
.reviews-panels .collapsible p{text-transform: uppercase}
.reviews-panels .collapsible.active svg{transform: rotate(180deg); transition: 0.5s}
.reviews-panels .collapsible.active p{color: #2690BB !important}
.reviews-panels .content { padding: 0 18px 0 5px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}


.technical-single{border-bottom: 1px solid #666666}

.stories-section{min-height: 780px;}
.stories-bg{position: absolute; top: 0; width: 100%; padding: 0}

.map-section{min-height: 780px;}
.map-bg{position: absolute; top: 0; width: 100%; padding: 0; height: 100%; object-fit: cover}
.map-banner{text-align: right}

.faq-panel .collapsible h3{font-family: 'Open Sans', sans-serif;}
.faq-panel .FAQ-panel{ padding-bottom: 0px; border-bottom: 1px solid #555555}
.faq-panel .FAQ-panel:last-child{border-bottom: none !important}
.faq-panel .collapsible {
    cursor: pointer; padding: 5px 0 0 5px; width: 100%; border: none; text-align: left; outline: none; background: none;}
.faq-panel button.collapsible:focus {outline: 0}

.faq-panel .collapsible:after {content: '\002B'; color: #666666; font-weight: 500; float: right; margin-left: 5px; font-size: 30px; margin-top: -10px;
    line-height: 0;}
.faq-panel .collapsible.active:after {content: "\2212";}
.faq-panel .collapsible.active h3{color: #2690BB !important}
.faq-panel .content { padding: 0 18px 0 5px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
/*  ========================================================= Homepage end  ====================================================  */

/*  ========================================================= Product start  ====================================================  */
.product-pg .main-banner{margin-top: 0px;}
.conversion-kit{max-width: 440px; background: white; max-height: 670px; position: absolute; z-index: 9; right: 150px; top: 100px; padding: 40px}
.transform-texture{position: absolute; top: 0; left: 0;}
/*  ========================================================= Product end  ====================================================  */

/*  ========================================================= Order start  ====================================================  */
.order-pg .main-banner{margin-top: 0px;}
.product-specs-row{background: #F7F7F7}
.filter-sec .custom-select{height: 42px; background: #F5F5F5; border-radius: 0; font-size: 12px;}
.color-select{width: 25px; height: 25px; border: 1px solid #fff; border-radius: 32px}
.color-select.selected{border: 1px solid #2690BB;}
.color-select span{height: 20px; width: 20px; border-radius: 24px}
.color-select span.black-color{background: black; border: 1px solid black}
.color-select span.gray-color{background: gray; border: 1px solid gray}
.color-select span.white-color{background: white; border: 1px solid #ddd}
.voucher-row{background: #F7F7F7}
.watermark-order{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto}
.order-pg .carousel-indicators [data-mdb-target]{text-indent: unset !important}
.order-pg .slide:not(.slick-active){opacity: 1}
.order-pg .carousel-indicators{bottom: -100px;}
.order-pg .carousel-indicators button{height: 56px; width: 56px; border-radius: 4px !important; margin: 0 10px; opacity: 1 !important}
.order-pg .carousel-indicators button img{border-radius: 4px}
.order-pg .carousel-control-next-icon:after{color: #666666}
.order-pg .carousel-control-prev-icon:after{color: #666666}
/*  ========================================================= Order end  ====================================================  */

/*  ========================================================= How start  ====================================================  */
.how-pg .main-banner{margin-top: -180px;}
.how-pg .main-logo{position: relative; z-index: 1}
.how-pg .main-nav{position: relative; z-index: 1}
/*  ========================================================= How end  ====================================================  */


@media (min-width:1920px){
    .main-container{max-width: 1440px;}
    .map-banner img{margin-right: -100px;}
    
}


@media (min-width:1025px) and (max-width:1440px){
    .main-nav a{font-size: 18px}
    .map-banner img{margin-right: -100px;}
   
    
   
}

@media (min-width:1024px) and (max-width:1800px){
    .main-container{max-width: 1140px;}
    
    
}



@media (min-width:769px){
    .desktop{display: flex !important}
    .mobile{display: none !important}
    .footer-email{text-align: right}
    .footer-bottom p br{display: none}
    
}



@media (max-width:768px){
    .desktop{display: none !important}
    .mobile{display: flex !important}
    .mobile-nav .navbar-brand img{max-height: 35px; width: auto}
    
    .main-banner{margin-top: -50px;}
    
    h1{font-size: 36px;}
    h1.main-heading{font-size: 36px;}
    h2{font-size: 34px;}
    h3{font-size: 14px;}
    h4{font-size: 12px;}
    .d-m-flex{display: flex}
    .flex-m-column{flex-direction: column}
    .align-m-center{align-items: center}
    .justify-m-center{justify-content: center}
    .font-13{font-size: 11px;}
    .font-16{font-size: 14px;}
    .font-24{font-size: 22px;}
    .font-48{font-size: 32px;}
    .font-40{font-size: 34px;}
    .p-m-1{padding: 0.25rem}
    .main-container{margin-top: 25px;}
    footer h3{font-size: 32px;}
    
    .top-nav p{font-size: 12px}
    .FAQ-panel h3{font-size: 20px; max-width: 90%}
    
    .feature-single{min-height: 102px}
    .battery-notification-row p br{display: none}
    
    .main-features-section{padding-left: 12px;}
    .features-slider .slide .slide-content img{max-width: 272px;}
    .feature-s-single h2 br{display: none}
    .features-main-heading{max-width: 50%;}
    .features-slider .slick-prev{top: -56px; right: 10px; }
    .features-slider .slick-next{top: -56px; right: 60px; }
    
    .mobile-app-section .main-container{min-height: 810px}
    .mobile-app-section h1{font-size: 44px;}
    
    .mobile-app-content .me-sm-auto{justify-content: flex-start !important}
    .mob-app-texture{width: 100%; height: auto}
    .mobile-app-content p br{display: none}
    
    .features-slider .slide-content{padding-bottom: 0 !important}
    .mobile-app-section{margin-top: 0px !important; margin-bottom: 0px !important}
    
    .stories-section .main-container{padding-left: 30px}
    .map-section .main-container{padding-left: 30px}
    .map-section p br{display: none}
    
    
    .conversion-kit{max-width: 327px; padding: 20px; right: 0; left: 0; margin: 0 auto; top: 15px}
    .conversion-kit .font-13 br{display: none}
    
    .product-features-section h2 br{display: none}
    .transform-texture{height: auto !important}
    
    .order-pg .carousel-item img{width: 100%; height: auto}
    .watermark-order{max-width: 285px; height: auto}
    .due-today{align-items: flex-start !important}
    
    
}



@media (max-width:615px){
    .text-m-center{text-align: center}
    .text-m-left{text-align: left}
    .w-m-100{width: 100% !important;}
    .theme-btn{display: flex; align-items: center; justify-content: center; }
    .p-m-0{padding: 0}
    
    .banner-logo{width: 100%; height: auto}
    
    .specs-single-content p br{display: none}
    .specs-single-content p{max-width: 230px}
    .specs-single-content{left: 30px}
    
    .filter-panel{margin-top: 120px;}
    
}


@media (width:1024px){
    
    .main-container{margin-top: 65px;}
    .map-banner img{width: 100%; height: auto}
    
    

}



@media (width:768px){
    .main-nav{display: none !important}
    .mobile-nav{display: flex !important}
    .main-container{margin-top: 65px;}
    
    .home-pg .main-banner .desktop{display: flex !important}
    .home-pg .main-banner .mobile{display: none !important}
    .home-pg .features-cover .desktop{display: flex !important}
    .home-pg .features-cover .mobile{display: none !important}
    
    .features-section > .col-sm-6{width: 100%}
    .features-banner{margin-bottom: 30px !important}

}

@media (orientation: landscape) and (max-height:550px){
    
    
}


/* ============================================== Mobile Nav Start =================================================== */
.nav-top {display: flex; align-items: center; /*position: fixed; */ z-index: 101; padding: 0px 10px; width: 100%; }
.nav-top .hamburger{margin-left: auto;cursor: pointer;}
.nav-top .btn{height: 34px; padding: 0; width: 94px;}
.top-nav .nav-item.dropdown .dropdown-menu{background: rgba(120, 167, 178, 0.75)}
.exo-menu > li > a{
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
/*
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{color:#78A7B2;}
*/
li.drop-down>ul{left: 0px;min-width: 230px;}
.flyout-mega-wrap {top: 0;right: 0;left: 100%;width: 100%;display:none;height: 100%;padding: 15px;min-width: 742px;}
.mega-menu { left: 0; right: 0;padding: 15px;display:none;padding-top: 0;min-height: 100%;}
.mega-menu ul li a { line-height: 25px;font-size: 18px;display: block;}
ul.stander li a { padding: 3px 0px;}
.mega-drop-down a:hover svg{transform: rotate(180deg)}
.mega-menu:hover,
.drop-down-ul:hover{display:block;}
.exo-menu {list-style: none; position: relative;}
.exo-menu > li {display: inline-block;float: left;}
.exo-menu > li > a {font-size: 31px; color: white;
  -webkit-transition: color 0.2s linear, background 0.2s linear;
  -moz-transition: color 0.2s linear, background 0.2s linear;
  -o-transition: color 0.2s linear, background 0.2s linear;
  transition: color 0.2s linear, background 0.2s linear;
}
.mega-menu{z-index: 999; background: rgba(120, 167, 178, 0.75); border-radius: 14px; left: 0; right: 0; padding: 15px; display: none; padding-top: 0; min-height: 100%;}
.mega-menu ul{padding: 0}
.mega-menu a:hover{color: #2d636f}
.mega-menu ul li a {line-height: 25px; display: block; color: white}
ul.stander li a {padding: 3px 0px;}
.mega-drop-down a:hover + .mega-menu{display: block;}
.nav-back-link svg{transform: rotate(90deg)}
.nav-drill {margin-top: 50px;transform: translateX(100%);}
.nav-drill .nav-item a{}
.nav-drill .nav-item a svg path{fill: #fff}
.nav-is-toggled .nav-drill {transform: translateX(0);}
.nav-is-toggled::after {opacity: 1;visibility: visible;}
.nav-drill {display: flex; position: fixed; z-index: 100; top: 0; right: 0; width: 100%; height: calc(100vh - 100px); margin-top: 100px;  background-color: #2190BC;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: 0.45s;
}
.nav-drill ul{list-style: none}
.nav-items {flex: 0 0 100%;}
.nav-link {display: block; padding: 20px 0; color: #fff; font-size: 20px; line-height: 1em; font-weight: 600;}
.nav-expand-content {position: absolute; top: 0;left: 0;width: 100%;height: 100%;transform: translateX(100%);background-color: #daf9f4;transition: 0.3s;visibility: hidden;}
.nav-expand-content .nav-back-link {display: flex; align-items: center; color: #fff;}
.nav-expand-link {display: flex;justify-content: space-between;}
.nav-expand-link svg{transform: rotate(-90deg)}
.nav-expand.active > .nav-expand-content {transform: translateX(0);visibility: visible;}
.nav-expand .nav-expand-content {background-color: #1f1f1f; z-index: 1}
.nav-expand-content .nav-item a{color: white}

@media (min-width:767px){
	.exo-menu > li > a{display:block;padding: 20px 22px;}
     .mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
     .flyout-left>ul, li.drop-down>ul{position:absolute;}
     .flyout-right>ul{left: 100%;}
     .flyout-left>ul{right: 100%;}
 }
@media (max-width:767px){
    .exo-menu {min-height: 58px;background-color: #23364B;width: 100%;}
	.exo-menu > li > a{width:100% ;display:none;}
	.exo-menu > li{width:100%;}
	.display.exo-menu > li > a{display:block; padding: 20px 22px;}
    .mega-menu, .Images, .Blog,.flyout-right>ul,
    .flyout-left>ul, li.drop-down>ul{position:relative;}
}

@media (min-width: 767px) {
    .exo-menu > li > a {display: block;padding: 20px 22px;}
    .mega-menu{position: absolute;}
    .join-us-menu{max-width: 510px;}
}
@media (max-width: 767px) {
    .exo-menu {min-height: 58px; width: 100%;}
    .exo-menu > li > a { width: 100%; }
    .exo-menu > li {width: 100%;}
    .display.exo-menu > li > a {display: block; padding: 20px 22px;}
    .mega-menu{position: relative;} 
    
}





/*

.mobile-nav nav {background:#FBFBFB; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden;
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  z-index: 9;}
.mobile-nav nav ul { list-style-type: none; padding: 0; margin: 0; position: absolute;left: 50%; top: 200px; transition: all 0.3s ease-in-out; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.mobile-nav nav ul li { transform: translateY(50px); -webkit-transform: translateY(50px);opacity: 0;}
.mobile-nav nav ul li a { display: block; font-size: 2em; text-decoration: none; padding: 10px 0; text-align: center; color: #1F1F1F; font-weight: bold; 
    transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;}
.mobile-nav nav ul li a:hover {color: #E84A5F;}
.toggle-btn {display: block; position: fixed; z-index: 10; right: 18px; top: 16px; cursor: pointer;}
.toggle-btn .bar { width: 30px; height: 2px; margin: 7px auto; background-color: #fff; transition: all 0.3s ease-in-out; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);}
.toggle-btn .bar:nth-child(1){width: 14px; margin-left: 0}
.toggle-btn .bar:nth-child(2){width: 24px;}
.toggle-btn .bar:nth-child(3){width: 14px; margin-right: 0}
#toggle:checked ~ nav {opacity: 1;visibility: visible;}
#toggle:checked ~ nav ul {top: 70px;}
#toggle:checked ~ nav ul li {transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1;}
#toggle:checked ~ nav ul li:nth-child(1) {
    transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s; -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}
#toggle:checked ~ nav ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s; -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}
#toggle:checked ~ nav ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s; -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}
#toggle:checked ~ nav ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s; -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}
#toggle:checked + label.toggle-btn .bar { background-color: white;}
#toggle:checked + label.toggle-btn .bar:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
}
#toggle:checked + label.toggle-btn .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#toggle:checked + label.toggle-btn .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

#toggle:checked + label.toggle-btn .bar:nth-child(2) {transform: translateX(0px); -webkit-transform: translateX(0px);opacity: 1;}
#toggle:checked + label.toggle-btn .bar:nth-child(1) {transform: translateY(0px); -webkit-transform: translateY(0px); margin-right: 0; margin-left: 10px;}
#toggle:checked + label.toggle-btn .bar:nth-child(3) {transform: translateX(-10px); -webkit-transform: translateX(-10px);}
*/
/* ============================================== Mobile Nav End =================================================== */


/* ================================================== Animation start ==================================================== */

.animation-element.bounce-up .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animation-element.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.bounce-right .subject {
 opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(200px, 0px, 0px);
  -webkit-transform: translate3d(200px, 0px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(200px, 0, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animation-element.bounce-right.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.bounce-left .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(-200px, 0px, 0px);
  -webkit-transform: translate3d(-200px, 0px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(-200px, 0px, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animation-element.bounce-left.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.bounce-down .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, -200px, 0px);
  -webkit-transform: translate3d(0px, -200px, 0px);
  -o-transform: translate(0px, -200px);
  -ms-transform: translate(0px, -200px);
  transform: translate3d(0px, -200px, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animation-element.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


.fade-in-animate {
  display: inline-block;
  animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1s;
  -moz-animation: fadeIn linear 1s;
  -o-animation: fadeIn linear 1s;
  -ms-animation: fadeIn linear 1s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* ================================================== Animation end ==================================================== */