/*
Theme Name: Walbro
Theme URI: http://walbrooverseas.com
Author: CreativFish
Author URI: 
Description: This theme is specially created for client and created in Twitter Bootstrap 3. Thank you.
Version: 1.0.0
Tags: responsive-layout, featured-images, flexible-header, theme-options, sticky-post
License: GNU General Public License version 3
License URI: http://www.opensource.org/licenses/gpl-license.php GPL v3.0 (or later)
*/

/********************************************************************************************************************/
/******************************************** MAIN HTML STYLES ******************************************************/
/********************************************************************************************************************/
@import url('https://fonts.googleapis.com/css?family=Cinzel:500');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
@import url(css/bootstrap.min.css);
@import url(css/font-awesome.min.css);
@import url(css/offcanvas-bootstrap.min.css);
@import url(css/slick.css);

@font-face {
    font-family: 'veniregular';
    src: url('fonts/veni_font_by_andrian_dehasta_7ntypes-webfont.woff2') format('woff2'),
         url('fonts/veni_font_by_andrian_dehasta_7ntypes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { font-family: 'Poppins', arial; margin: 0; padding: 0; font-weight: 400; font-size: 15px; color: #0A0F3C; }

.wrapper { overflow: hidden; position: relative; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
.btn, .btn:hover { color: inherit; text-decoration: none; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
.btn { border-radius: 50px; }

.btn.btn-primary { background-color: #DAAC6A; border-color: #DAAC6A; color: #FFF; font-weight: 600; padding-left: 18px; padding-right: 18px; }
.btn.btn-primary:hover { padding-left: 22px; padding-right: 22px; }

.btn.btn-outline { color: #daac6a; border: 1px solid #daac6a; padding: 8px 25px; }
.btn.btn-outline:hover { background-color: #DAAC6A; color: #FFF; }

.bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

.breathe { padding-top: 5em; padding-bottom: 5em; }
.clearfix { clear: both; }
.slick-slide, .slick-slide a { outline: none!important; }

.spacer { position: relative; height: 6em; }

.navbar { backdrop-filter: blur(20px); background-color: rgba(0,0,0,0.1); height: 80px; margin-bottom: 0px; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }

.navbar-nav { margin-top: 15px; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }

.navbar-nav > li > a { position: relative; color: #DAAC6A; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
.navbar-nav > li > a:before { content: ""; position: absolute; bottom: 13px; width: 0; height: 2px; background-color: #DAAC6A; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }

.navbar-nav > li > a:hover,
.navbar-nav > li > a:active,
.navbar-nav > li > a:focus,
.navbar-nav > li.current-menu-item > a { color: #DAAC6A; background-color: transparent; }
.navbar-nav > li > a:hover:before { content: ""; position: absolute; bottom: 13px; width: 60%; height: 2px; background-color: #DAAC6A; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }

.navbar-nav > li.current-menu-item > a:before { content: ""; position: absolute; bottom: 13px; width: 60%; height: 2px; background-color: #DAAC6A; }

.navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; z-index: 1501; padding: 5px; }

.navbar.scrolled { height: 55px; background-color: rgba(0,0,0,0.75); }
.navbar.scrolled .navbar-nav { margin-top: 0px; }
.navbar.scrolled .navbar-brand { overflow: hidden; }

h1 { color: #DAAC6A; font-size: 40px; font-weight: 600; position: relative; }

h2 { color: #DAAC6A; font-size: 40px; text-align: center; margin-top: 40px; font-weight: 600; position: relative; }
h2:before { content: ""; position :absolute; top: -60px; left: 0; right:0; margin: 0 auto; width: 100%; height: 50px; background-image: url(./img/titler.png); background-position: center; background-repeat: no-repeat;  }

h2.text-left:before { left: -80px; }

#mainSlider .item { background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
#mainSlider .banner-caption { display: flex; justify-content: flex-start; align-items: center; }
#mainSlider .banner-caption.rite { justify-content: flex-end; }
#mainSlider .banner-caption .caption-body { color: #FFF; }
#mainSlider .banner-caption h2, #mainSlider .banner-caption h1 { font-family: 'Cinzel'; font-weight: 500; }
#mainSlider .banner-caption h1 { font-size: 70px; }
#mainSlider .banner-caption a { background-color: #DAAC6A; border: 2px solid #DAAC6A; margin-top: 20px; color: #FFF; border-radius: 30px; display: inline-block; padding: 6px 25px; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
#mainSlider .banner-caption a:hover { padding: 6px 30px; background-color: transparent; color: #DAAC6A; }

#mainSlider .carousel-control { width: 5%; }
#mainSlider .carousel-control.left, #mainSlider .carousel-control.right { background-image: none; }

.texture { position: relative; background-image: url(./img/texture.jpg); background-size: cover; background-position: center; }

.perks { position: absolute; top: -100px; z-index: 601; max-width: 300px; }
.perks.rite { right: -100px; left: auto; }
.perks.levt { left: -100px; right: auto; }
.perks.botm { left: auto; top: auto; bottom: -60px; right: -100px; }
.perks.flip { transform: scaleX(-1); }

.why-us { background-color: #F9F9F9; padding: 30px; text-align: center; color: #333; min-height: 305px; margin-bottom: 15px; }
.why-us h3 { font-weight: 600; font-size: 20px; }
.why-us img { max-height: 80px; width: auto; margin-bottom: 15px; }

.certi { min-height: 250px; display: flex; justify-content: center; align-items: center; }

#productSlider { margin: 0px auto; }
#productSlider:hover .product-slide .pic { transform: scale(0.95); opacity: 0.9; }
.product-slide { padding: 15px; min-height: 400px; text-align: center; }
.product-slide .pic { opacity: 1; transform: scale(1); height: 350px; position: relative; display: flex; justify-content: center; align-items: center;  -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms;  }
/*.product-slide .pic:before { content: ""; position: absolute; width: 250px; height: 250px; top: 0px; bottom: 0px; left:0; right:0px; margin: auto; background-color: #EFECE7; border-radius: 250px; }*/
.product-slide .pic img { position: relative; margin: 0 auto; width: 100%; max-width: 350px; }

.product-slide:hover .pic { transform: scale(1.1)!important; opacity: 1; }

#comboSlider { margin: 0px auto; }
.combo-slide { padding: 15px; min-height: 350px; text-align: center; }
.combo-slide .pic { height: 400px; position: relative; display: flex; justify-content: center; align-items: center; }
.combo-slide .pic img { position: relative; margin: 0 auto; width: 100%; max-width: 400px; }
.combo-slide h3 { font-weight: 600; }
.combo-slide .btn { margin-top: 15px; }

.testi { padding: 50px 100px; margin: 0 auto; text-align: center; }

.jumbotrons { padding-top: 3em; padding-bottom: 3em; }
.jumbotrons h1 { color: #C6C6C6; font-size: 72px; letter-spacing: -5px; }
.jumbotrons h4 { color: #daac6a; font-weight: 600; font-size: 22px; }
.jumbotrons img { max-width: 600px; }
.jumbotrons .jumbo-body { height: 600px; padding: 100px; display: flex; justify-content: center; align-items: center; }

.specialBG { position: relative; min-height: 65vh; background-color: rgba(0,0,0,0.2); background-blend-mode: multiply; display: flex; justify-content: center; align-items: center; color: #FFF; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
.specialBG:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
.specialBG .container { position: relative; }
.specialBG .container p { width: 50%; margin: 0 auto; font-size: 17px; }
.specialBG h2 { color: #FFF; margin-top: 110px; margin-bottom: 50px; font-weight: 400; line-height: 1.5; }
.specialBG h2:before { filter: brightness(0) invert(1); }

ul.slick-dots { list-style: none; text-align: center; margin: 0; padding: 20px 0px; width: 100%; display: block; }
ul.slick-dots li { display: inline; }
ul.slick-dots li button { width: 8px; height: 8px; display: inline-block; content: ""; overflow: hidden; border-radius: 10px; padding: 0px; border: 0px; color: transparent; margin: 5px; background-color: #CCC; }
ul.slick-dots li.slick-active button { background-color: #333; }

.owl-controls { position: absolute; height: 90vh; top: 0; text-align: center; width: 100%; bottom: 0px; z-index: 501; pointer-events: none }
.owl-controls .owl-pagination { bottom: 0px; position: absolute; width: 100%; pointer-events: all; }
.owl-controls .owl-page { width: 8px; display: inline-block; height: 8px; background-color: #FFF; border-radius: 15px; margin: 2px; }
.owl-controls .owl-page.active { background-color: #93b7c1; }
.owl-buttons { position: absolute; width: 100%; height: 100%; }
.owl-buttons .owl-prev { position: absolute; padding: 0px 5px; left: 0; right: auto; color: #FFF; font-size: 31px; top: 0; bottom: 0; height: 31px; margin-top: auto; margin-bottom: auto; cursor: pointer; pointer-events: all; line-height: 30px; }
.owl-buttons .owl-next { position: absolute; padding: 0px 5px; right: 0; left: auto; color: #FFF; font-size: 31px; top: 0; bottom: 0; height: 31px; margin-top: auto; margin-bottom: auto; cursor: pointer; pointer-events: all; line-height: 30px; }

.owl-buttons img { filter: brightness(0) invert(1); opacity: 0.5); -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
.owl-buttons .owl-prev:hover img, .owl-buttons .owl-next:hover img { opacity: 1; }

.intro-container { min-height: 550px; display: flex; justify-content: flex-start; align-items: center; }
.ctg-product { display: flex; justify-content: flex-start; align-items: center; }

footer { position: relative; background-color: #000; color: #FFF; padding-top: 3em; padding-bottom: 3em; border-top-left-radius: 20px; border-top-right-radius: 20px; }
footer h4, footer strong { color: #DAAC6A; }

footer a { color: #FFF; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
footer a:hover { color: #DAAC6A; text-decoration: none; }

footer .input-group { margin-bottom: 20px; }

footer ul { list-style: none; margin: 0; padding: 0; }

footer ul.social { display: inline-block; list-style: none; margin: 0; padding: 0; }
footer ul.social li { display: inline; }

footer.flat { border-radius: 0px!important; }


.float { position:fixed; width:60px; height:60px; bottom:40px; right: 0px; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; background-color:#25d366; color:#FFF; border-top-left-radius:30px; border-bottom-left-radius: 30px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:1001; }
.my-float { margin-top: 16px; }
.float:hover { padding-right: 20px; width: 80px; color: #FFF; }


.contact-panel { min-height: 90vh; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center top; display: flex; justify-content: flex-start; align-items: center; }
/*.contact-panel:before { content: ""; position: absolute; top: 80px; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(218,172,106,0.17); }*/
.contact-panel .container{ position: relative; }
.contact-panel .contact-content { color: #FFF; padding: 100px; }
.contact-content i { position: absolute; left: -40px; font-size: 20px; padding-top: 2px; }
.contact-panel a { color: #FFF; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; }
.contact-panel a:hover { text-decoration: none; color: #DAAC6A; }
.contact-form-container .perks { top: 0px; right: -80px; }

.contact-form-container .input-group-addon { background-color: transparent; color: #DAAC6A; border: 0px; border-bottom: 1px solid #CCC; }

.contact-panel .btn.btn-primary:hover { color: #FFF!important; }

.contact-container, .contact-form-container { padding: 0px; }

.contact-form.dark { background-color: rgba(0,0,0,0.8); padding: 30px; color: #FFF; border-radius: 15px; }

.mega-dropdown { position: static!important; }
.mega-dropdown-menu { border: 0px; border-radius: 0px; padding: 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; margin: 0; list-style: none; background-color: #F3F3F3; }
.mega-dropdown-menu .container { padding: 20px 0px; margin-top: -1px; border-bottom: 1px solid #CCC; }
.mega-dropdown-menu .product-menu-btn { text-align: center; color: #333!important; }
.mega-dropdown-menu .product-menu-btn .pic { width: 100%; max-width: 120px; margin: 15px auto; height: 120px; border-radius: 8px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.dropdown.mega-dropdown.open a { background-color: transparent; color: #daac6a; }

.tab-pane { background-color: #FFF; box-shadow: 2px 2px 16px rgb(0 0 0 / 20%); padding: 30px; border-radius: 10px; }

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover { background-color: transparent; color: #333; position: relative; }

.store-link img { max-height: 50px; }

.similar { display: block; text-align: center; padding: 20px; }
.similar .pic { min-height: 250px; width: 100%; border-radius: 15px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.similar:hover { text-decoration: none; }

.pills-holder { position: relative; }
.nav-pills { text-align: center; width: 100%; }
.nav-pills li { display: inline-block; float: none; }
.pills-holder .nav-pills > li > a { color: #666; font-weight: 500; font-size: 18px; border-radius: 0px; }
.pills-holder .nav-pills > li.active > a { color: #DAAC6A; border-bottom: 3px solid #DAAC6A; }

img.rounded { border-radius: 15px; }

.single-product-summary { min-height: 500px; display: flex; justify-content: flex-start; align-items: center; }
.single-product-summary a.store-link { margin-bottom: 25px; display: inline-block; }

.contact-form h3 { margin-bottom: 30px; }

.gifting-content { height: 450px; display: flex; justify-content: flex-start; align-items: center; }

#thumbSlider { width: 400px; margin: 10px auto; }
.product-thumb { width: 90px; height: 100px; padding: 10px; }
.product-thumb .pic { border: 2px solid #F4F4F4; width: 85px; height: 85px; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0 auto; }
.product-thumb.slick-current .pic { border: 2px solid #DAAC6A; }

.input-group .form-control:first-child { background-color: #4a4a4a; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border: 0px; }

#contactForm .form-control { background-color: transparent; border: 0px; border-bottom: 1px solid #CCC; resize: none; box-shadow: none; }
#contactForm .control-label { font-weight: 500; }

footer img.footer-logo { max-height: 100px; }

footer ul.social li a { display: inline-block; padding: 5px; font-size: 18px; }

.cta-panel { position: relative; color: #FFF; }
.cta-panel .container { color: #FFF; position: relative; }
.cta-panel h2 { color: #FFF; }
.cta-panel .btn { margin-top: 20px; }
.cta-panel:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }

.grecaptcha-badge {  visibility: hidden; }

ul.dropdown-menu-items { list-style: none; margin: 0; display: flex; padding: 0; flex-direction: row; justify-content: space-between; }
ul.dropdown-menu-items li { flex-grow: 1; flex-basis: 0; vertical-align: top; }

@media (max-width: 768px) {

	.navbar-toggle { border: 0px solid #FFF; background-color: transparent; margin-top: 10px; }
	.navbar-toggle .icon-bar { background-color: #DAAC6A; height: 3px; }

    #mainSlider .item { min-height: 60vh; }
    #mainSlider .item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
    #mainSlider .item.rite { background-position: left bottom; }
    #mainSlider .item.levt { background-position: right bottom; }
    #mainSlider .banner-caption { min-height: 50vh; padding-top: 10vh; text-align: center; position: relative; justify-content: center; }
    #mainSlider .banner-caption .caption-body { width: 100%; }
    #mainSlider .banner-caption h1 { font-size: 40px; color: #FFF; }

    .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: transparent; border-color: #FFF; }
    .dropdown-menu>li>a { color: #daac6a; }

    .collapse { background-color: rgba(0,0,0,0.8); backdrop-filter: blur(20px); margin-top: 2px; }

    .contact-panel .contact-content { padding: 50px; text-align: center; }
    .walbro-symbol { position: relative; margin-top: -60px; width: 130px; height: 130px; margin: 0 auto 30px auto; background-color: #FFF; padding: 15px 10px; border-radius: 100px; }
    .contact-form-container { padding-top: 150px; }

    .topMargin { padding-top: 6em; }

    .testi { padding: 50px 50px!important; }

    .jumbotrons img { width: 100%; }

    .perks { max-width: 200px!important; }

	#mainSlider .item { background-attachment: scroll; }

    .slick-arrow.slick-prev { left: -15px; }
    .slick-arrow.slick-next { right: -15px; }

    footer { text-align: center; }
    footer img.footer-logo { max-height: 100px; margin: 0 auto; }
    footer ul.footer-menu { margin: 25px auto; }
    footer h4 { margin-top: 30px; }

    .contact-form { padding: 50px; width: 100%; }

	.bg-quote { min-height: 500px; display: flex; justify-content: center; align-items: center; background-attachment: scroll; }

}
.slick-arrow { position: absolute; z-index: 5001; top: 0; bottom: 0; margin: auto 0; color: #FFF; font-size: 40px; width: 40px; height: 40px; padding: 0px; left: 15px; cursor: pointer; }
.slick-arrow.slick-next { right: 0px; left: auto; }
.slick-arrow img { width: 100%; margin-top: -25px; }

@media (min-width: 769px) {

	.navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; z-index: 1501; padding: 5px; }
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; }

    #mainSlider .item { min-height: 90vh; }
    #mainSlider .banner-caption { min-height: 90vh; }
    #mainSlider .banner-caption.rite .caption-body { width: 50%; padding-left: 100px; }

    .contact-form-container { display: flex; align-items: center; min-height: 90vh; position: relative; }
    .contact-form { padding: 100px; width: 100%; }
    .walbro-symbol { position: absolute; top: 0; bottom: 0; width: 130px; height: 130px; margin: auto 0; left: -60px; background-color: #FFF; padding: 15px 10px; border-radius: 100px; }

    .topMargin { padding-top: 10em; }

    .shrinked-slides { width: 70%; margin: 0 auto; }

    .ctg-product { min-height: 450px; }

    .navbar-nav > li > a { padding: 30px ​15px; }
    .navbar.scrolled .navbar-nav > li > a { padding: 17px 15px; }

    .slick-arrow.slick-prev { left: -40px; }
    .slick-arrow.slick-next { right: -40px; }

	#mainSlider .item { background-attachment: fixed; }

	.mega-dropdown-menu .container .col-sm-4:first-child { border-right: 1px solid #CCC; }
	.mega-dropdown-menu .container .col-sm-4:nth-child(2) { border-right: 1px solid #CCC; }

	.bg-quote { min-height: 500px; display: flex; justify-content: center; align-items: center; background-attachment: fixed; }

}

.spin-space { position: relative; height: 200px; }
.spin { overflow: hidden; position: absolute; left:0; right:0; bottom: 0px; text-align: center; animation: spin 2s linear 0s infinite reverse; -moz-animation: 2s linear 0s reverse none infinite spin; -webkit-animation: spin 2s linear 0s infinite reverse; -0-animation: spin 2s linear 0s infinite reverse; -webkit-animation-play-state: paused; -o-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; }
.floraa { position: relative; width: 400px; height: 400px; margin: 0 auto; background-size: cover; background-repeat: no-repeat; background-position: center; animation: spin 15s linear 0s infinite normal; -moz-animation: 15s linear 0s normal none infinite spin; -webkit-animation: spin 15s linear 0s infinite normal; -0-animation: spin 15s linear 0s infinite normal; }

@keyframes spin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(0deg); }
}

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-o-keyframes spin {
    0% { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(0deg); }
}


.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; }
.carousel-fade .carousel-inner .active { opacity: 1; }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}