@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

html, body {
    height: 100%;
    width: 100%;
    font-family: Montserrat, sans-serif;
    background:#fff;
    color:#000;
    margin:0;
    padding:0;
}
body{position:relative; box-sizing:border-box;}

img{max-width:100%;}

a.text{color:#000; text-decoration:underline;}
a.text:hover{text-shadow: 0 0 1px #fff, 0 0 0 #000;}

th, .th{font-weight:bold; padding-right: 10px;}
.bg-dark{background:#000 !important;}
.bg-light{background:#fff !important;}
.btn-dark {color: #fff; background-color: #000; border-color: #000;}
.btn-dark:hover {color: #000; background-color: #fff; border-color: #000;}
.btn-light {color: #000; background-color: #fff; border-color: #fff;}
.btn-light:hover {color: #fff; background-color: #000; border-color: #fff;}
.btn-outline-dark {color: #000; background-color: transparent; border-color: #000;}
.btn-outline-dark:hover {color: #fff; background-color: #000; border-color: #000;}
.btn-outline-light {color: #fff; background-color: transparent; border-color: #fff;}
.btn-outline-light:hover {color: #000; background-color: #fff; border-color: #fff;}

.btn-dark.focus, .btn-dark:focus,
.btn-dark.visited, .btn-dark:visited,
.btn-dark.active, .btn-dark:active,
.btn-dark:not([disabled]):not(.disabled).active:focus, .btn-dark:not([disabled]):not(.disabled):active:focus,
.btn-outline-dark.focus, .btn-outline-dark:focus,
.btn-outline-dark.visited, .btn-outline-dark:visited,
.btn-outline-dark.active, .btn-outline-dark:active,
.btn-outline-dark:not([disabled]):not(.disabled).active:focus, .btn-outline-dark:not([disabled]):not(.disabled):active:focus
{box-shadow: none;}

.btn-secondary.active{background-color:#222 !important; color:#fff;}

.mt-01{margin-top:-0.5rem;}
.mt-02{margin-top:-1rem;}
.mt-03{margin-top:-1.5rem;}
.mt-04{margin-top:-2rem;}
.mt-05{margin-top:-3rem;}

#main-intro, #history-intro {
    height: 100vh;
    width: 100%;
    text-align:center;
    background: #000 url(/design/img/intro-mobile.jpg) no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.inline-YTPlayer{max-height:100vh; overflow:hidden;}
#intro {width: 100%; height: 100%; overflow:hidden;}
.mb_YTPBar{opacity:0;}
.intro-info{position:absolute; top:0; left:0; width:100%; height:100%; text-align:center;}
.intro-info .links{margin: 2rem auto;}
@media all and(max-width:576px) and (max-height:610px){.intro-info .links{display:none;}}
.intro-info .links a{display:block; position: relative; font-size: 1.5rem; line-height:3rem; text-transform:uppercase; color:#fff; font-family: 'Crimson Text', serif; text-decoration: none !important;}
.intro-info .links a::after{content:''; position:absolute; bottom:0; width: 30px; left:50%; margin-left:-15px; border:1px solid #aaa;  transition: all 300ms ease-in-out;}

@media screen and (min-width:992px){ .intro-info .links a:hover::after{ width: 60px; margin-left:-30px; transition:all 300ms ease; border-color:#fff;} }

.btn-circle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    display: inline-block;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    border: 2px solid #FFF;
}


#navplace{position:relative; display:block; width:100%; height:87px;}

#mainnav{width:100%; font-family: 'Crimson Text', serif; border-bottom:1px solid #fff;}

#mainnav .nav-link{text-transform:uppercase; position:relative;}


.navbar-dark, .navbar-dark .navbar-nav .nav-link{color:#000;}
.navbar-light, .navbar-light .navbar-nav .nav-link{color:#fff;}


#mainnav .nav-link::before, #mainnav .nav-link::after{content:''; position: absolute; width:0; left:50%; height:0; transition: all 300ms ease;}
.navbar-light .nav-link::before{top:0; border-top:1px solid #fff;}
.navbar-light .nav-link::after{bottom:0; border-bottom:1px solid #fff;}
.navbar-light .navbar-toggler {color: #fff; border-color: #ddd;}


.navbar-dark .nav-link::before{top:0; border-top:1px solid #000;}
.navbar-dark .nav-link::after{bottom:0; border-bottom:1px solid #000;}
.navbar-dark .navbar-toggler {color: #000; border-color: #666;}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #fff !important;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: #000;}

.navbar-brand{margin:0; margin-right:6rem;}
.navlogo{height:60px;}
.navbar-dark .navbar-brand{width:0; margin-right:0;}
.navbar-dark .navlogo{height:60px; width:0;}


#mainnav.fixed-top .dropdown-menu{border-radius: 0; padding:1rem 0;}
#mainnav.fixed-top .nav-link.level-2 .btn{display:none;}
#mainnav .nav-item{text-transform: uppercase;}
#mainnav .level-3{font-size: 0.8rem;}
#mainnav.fixed-top .dropdown-menu .nav-link{color:#000 !important;}
#mainnav.fixed-top .nav-link.level-2{position:relative; width:100%; margin-bottom: 1rem; font-weight: bold; color:#000;}
#mainnav.fixed-top .nav-link.level-2::before,#mainnav .nav-link.level-2::after{content:''; position:absolute; left:0; width:100%; border-color: #000;}


@media all and (min-width:992px){
    #mainnav .nav-link:hover::before, #mainnav .nav-link:hover::after{left:15%; width:70%;}

    #mainnav.fixed-top .dropdown-menu{position:fixed; left:0; top:84px; width: 100%;}
    #mainmenu.navbar-light .navbar-nav .nav-item.show>.nav-link {color: #fff;}
    #mainnav.fixed-top .nav-link.level-2 .btn{display:block; float:right; text-transform: lowercase; padding: 3px 5px; line-height:1rem; font-weight: normal;}
    #mainnav.fixed-top .dropdown-menu a{color:#000;}

    #mainnav .dropdown-menu.show{display:none;}
    #mainnav.fixed-top .dropdown-menu.show{display:block;}
}

@media all and (max-width: 991px){
    #mainnav .dropdown-menu .row{display:block;}
    #mainnav.fixed-top .nav-link.level-2{margin-bottom:0;}
    #mainnav.fixed-top .nav-link.level-2::before{display:none;}
}




/*Верхняя карусель*/
#topBan{ margin-bottom: 40px;}
#topBan .carousel-item{width:100%; height:380px; overflow:hidden;}
#topBan .carousel-bg{position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 1200ms ease;}
#topBan .carousel-bg::after{content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0); transition: all 1200ms ease;}
#topBan:hover .active .carousel-bg{transform: scale(1.1,1.1);}
#topBan:hover .carousel-bg::after{background:rgba(0,0,0,0.2);}
#topBan .carousel-caption{bottom:0; padding:0;}
#topBan .banner-body{display:inline-block; width: 440px; height: 340px; position:relative; margin:0 auto; text-align:left;}
#topBan .banner-body .title{display:block; font-size: 34px; font-family: 'Crimson Text',serif; line-height:40px; padding:20px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin: 40px 50px 40px 0;}
#topBan .banner-body img{position:absolute; right:0; top:0; z-index: 2;}
#topBan .btn{background:none; color:#fff; border:1px solid #fff; border-radius: 5px; transition: all 300ms ease;}
#topBan .btn:hover{background:#fff; color:#000; text-decoration:none;}
#topBan .carousel-indicators{bottom: -30px;}
#topBan .carousel-indicators li{background:#555; width:40px; height:5px; cursor:pointer;}
#topBan .carousel-indicators li.active{background:#000;}
.carousel-control-next-icon, .carousel-control-prev-icon{width:24px; height:24px; position:relative;}
.carousel-control-next-icon::before, .carousel-control-prev-icon::before{content:''; position:absolute; display:block; width: 40px; height:40px; top:-8px; left:-8px; border: 2px solid #fff; border-radius:50%; z-index:-1; background-color: rgba(0,0,0,0.7);}

#content{
    padding: 20px 0;
    min-height: 40vh;
}
#content h1{margin-bottom: 30px;}

footer{background: linear-gradient(to bottom, #f9f9f9,#fff); padding: 20px 0 10px; font-size:14px;}
footer a{color:#000;}
footer a:hover{color: #333; text-shadow:0 0 0 #000;}
.line{display:block; clear:both; width: 100%; height:14px; background: #000 url('/design/img/line.gif') repeat-x bottom left/contain; margin-top:20px;}

footer .ft+.ft{border-left:1px solid #ddd;}

.social-link{color:#333; background: transparent; font-size: 30px;}
@media screen and (min-width:992px){.social-link:hover{color: #000;}}
.social-link+.social-link{margin-left:15px;}

.breadcrumbs{display:block; text-align:right; font-size:0.9rem; line-height: 1.2rem; color:#222; margin-bottom:1rem;}
.breadcrumbs a{color:#222; text-decoration:none !important;}
@media screen and (min-width:992px){.breadcrumbs a:hover{text-shadow:0 0 0 #000;}}
.breadcrumbs .item+.item::before{content:'>'; margin:0 5px; color:#999;}

.product-title{text-transform:uppercase; font-size:1.8rem; padding: 15px 0; font-weight:bold; display:block; border-top:1px solid #000; border-bottom:1px solid #000;}

.product-description, .product-use, .product-analog{position:relative; border:1px solid #000; padding: 40px 20px; border-radius:1px; margin-top: 40px; background:#fff; font-size: 0.9rem;}

.product-use::after,.product-analog::after, 
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6{position:absolute; background:#fff; left:-2px; top: -10px; font-size:20px; line-height:20px; padding:0 10px 10px 0; font-weight:bold;}

.puree .product-description h3,
.puree .product-description h4,
.puree .product-description h5,
.puree .product-description h6{position: relative!important;}

.types_syrups .product-description h1{position:absolute; background:#fff; left:-2px; top: -10px; font-size:20px; line-height:20px; padding:0 10px 10px 0; font-weight:bold;}
.product-use::after{content:'ИСПОЛЬЗУЕТСЯ';}
.product-analog::after{content:'РЕКОМЕНДУЕМ';}
.types_syrups .product-list {margin-top: 40px;}

.product-description table{border:none;}
.product-description td, .product-description th, .product-use th{padding: 5px 10px 5px 0; vertical-align:top; margin-bottom: 15px;}
.product-description .price{font-size:1.4rem; font-weight:bold;}

.product-use ul{margin:10px 0; padding:0;}
.ico{display: block; height:40px; margin-bottom:15px; padding-left: 45px; position:relative; list-style: none; font-size:16px; line-height: 16px; padding-top:20px; white-space: nowrap;}
.ico::before{content:''; display: block; position:absolute;
    top:0; left:0; width:40px; height:40px; overflow:hidden;
    background-image: url('/design/img/icons-use.png');
    background-repeat: no-repeat; background-size: auto 100%;}
.ico.alcohol::before{background-position: -40px 0;}
.ico.alcohol-free::before{background-position: -80px 0;}
.ico.beer::before{background-position: -200px 0;}
.ico.whisky::before{background-position: -320px 0;}
.ico.wine::before{background-position: -240px 0;}
.ico.white_wine::before{background-position: -240px 0;}
.ico.red_wine::before{background-position: -240px 0;}
.ico.cocktail::before{background-position: -440px 0;}
.ico.vodka::before{background-position: -360px 0;}
.ico.champagne::before{background-position: -160px 0;}
.ico.white_alcohols::before{background-position: -40px 0;}
.ico.gin::before{background-position: -320px 0;}
.ico.grog::before{background-position: -280px 0;}
.ico.irish_coffee::before{background-position: -480px 0;}
.ico.cognac::before{background-position: -280px 0;}
.ico.сalvados::before{background-position: -280px 0;}
.ico.tequila::before{background-position: -360px 0;}
.ico.rum::before{background-position: -360px 0;}
.ico.liqueurs::before{background-position: -160px 0;}
.ico.martini::before{background-position: -320px 0;}
.ico.bourbon::before{background-position: -320px 0;}


.ico.tea::before{background-position: -480px 0;}
.ico.juice::before{background-position: -120px 0;}
.ico.coffee::before{background-position: -480px 0;}
.ico.cappuccino::before{background-position: -480px 0;}
.ico.milk::before{background-position: -120px 0;}
.ico.chocolate::before{background-position: -480px 0;}
.ico.lemonade::before{background-position: -400px 0;}
.ico.soda::before{background-position: -400px 0;}
.ico.smoothie::before{background-position: -520px 0;}
.ico.milkshake::before{background-position: -560px 0;}
.ico.muffin::before{background-position: -720px 0;}
.ico.hot_nuts::before{background-position: -480px 0;}



.prod-group{display:block; position:relative; padding: 30px; border:1px solid #000; min-height: 340px; background-position: 90% 60%; background-repeat: no-repeat; margin-bottom: 30px;}
.prod-group.dark{background-color:#000; color:#fff;}
.prod-group h2{font-size:1.3rem; line-height: 2.2rem; text-transform:uppercase; font-weight:bold; border-top:1px solid #000; border-bottom:1px solid #000; margin: 1rem auto;}
.prod-group.dark h2{border-color:#fff;}
.prod-group-description{display:inline-block; max-width: 280px; overflow:hidden;}
.prod-group-text{font-family:'Crimson Text',serif; font-size:1.5rem; text-transform: uppercase; margin: 20px 0 80px;}
.prod-group-text.small{text-transform: none; color: #555; font-size:1.3rem;}
.prod-group .btn{position: absolute; bottom:30px; left:30px; background: #fff; color:#000; border:1px solid #000; border-radius: 5px; width:100%; max-width: 280px; transition:all 300ms ease; z-index:2;}
.prod-group.dark .btn{background:#000; color:#fff; border-color: #fff;}
.prod-group .btn-half{max-width: 160px;}
.prod-group.halfheight{min-height:240px;}
.prod-group .bg-img-half{position:absolute; right:0; top:0; bottom:0; width:50%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index:0;}

@media screen and (min-width:992px){
    .prod-group .btn:hover{color:#fff; background:#000;}
    .prod-group.dark .btn:hover{background:#fff; color:#000; border-color: #fff;}
}

@media all and (max-width:992px){
    .prod-group{background-image:none !important;}
    .prod-group-description{display:block; max-width: 100%;}
    .prod-group .btn{position:static; max-width:100%;}
    .prod-group .bg-img-half{display:none;}
}


.product-list .col-12, .product-list-block{margin-bottom:1.5rem;}
.product-list-intro{background:#000; color:#fff; padding: 20px; height:100%; overflow:hidden;}
.product-list-intro h1{font-size:1.5rem; line-height: 3rem; text-transform:uppercase; font-weight:bold; border-top:1px solid #fff; border-bottom:1px solid #fff; margin: 1rem auto; color:#fff;}
.product-list-intro h2{font-family: 'Crimson Text', serif; font-size:1.4rem; line-height:2rem; text-transform: uppercase; font-weight:normal; margin: 1rem auto; color:#eee;}
.product-list-intro p{font-family: 'Crimson Text', serif; font-size:.9rem;}
.product-list-item {border: 1px solid #000; position: relative; overflow: hidden; min-height: 296px;}
.product-item-title{font-weight: 700; font-size: 18px; text-transform: uppercase; position: absolute; bottom: 40px; left: 80px; color: #000;}
@media screen and (min-width:992px){
    .product-list-item:hover{box-shadow:0 0 10px rgba(0,0,0,0.5);}
}

/*Рецепты*/
.recipe{display: table; width:100%; height: 220px; margin-bottom: 25px; background-position: center; background-repeat: no-repeat; position:relative; border: none;}

.recipe::after{content:''; position:absolute; display:block; z-index:2; width:100%; height:2px; bottom:-6px; left:0; background:#000;}
.recipe .place{display:table-cell; width:100%; height:100%; vertical-align: middle; text-align:center; background:rgba(0,0,0,0.5); border: none;}
.recipe:hover > .place{background:rgba(0,0,0,0.55);}
.recipe .title{display:block; color:#fff; text-transform: uppercase; font-weight:bold; font-size: 1.3rem; margin: 20px auto;}
.category-syrups{height: 285px;background-size: 100%;}
/*Рецепты*/
#rHeader{margin-bottom:40px; height: 360px; position:relative; overflow:hidden; color:#fff;}
#rHeader .bg{position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 1200ms ease;}
#rHeader .bg::after{content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); transition: all 1200ms ease;}
#rHeader:hover .bg{transform: scale(1.1,1.1);}
#rHeader:hover .bg::after{background:rgba(0,0,0,0.4);}
#rHeader .front{position:absolute; top:0; left:0; right:0; bottom:0; height:100%; width:100%; z-index:2;}
#rHeader h1{text-transform: uppercase; position: relative; font-size: 1.8rem; margin:0; margin-top:1rem; text-shadow: 0 0 12px #000;}
#rHeader h1::after{content:''; position:absolute; z-index:11; left: 50%; width: 240px; margin-left: -120px; top:-20px; bottom:-20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}

@media print{
    #recipe{width:1200px;}
    #rHeader{height: 300px;}
}

.recipe-description{padding-bottom: 2rem; border-bottom: 1px solid #000; margin-bottom:2rem;}
.recipe-syrop-title{padding: 1.5rem 0; margin-bottom:2rem; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.recipe-syrop-img{max-height:180px;}

.ingredients{padding-left:1.5rem; margin-left:0;}
.ingredients li{margin-bottom:1rem;}

.prop-icon{display:inline-block; text-align:center; margin: 1rem;}
.icow{display: inline-block; width: 50px; height:50px; background-image: url('/design/img/icons-white-100.png'); background-repeat: no-repeat; background-size: auto 100%;}
.icow.alcohol{background-position: -50px;}
.icow.alcohol-free{background-position: -100px;}
.icow.long-drink{background-position: -150px;}
.icow.short-drink{background-position: -200px;}
.icow.cold{background-position: -250px;}
.icow.hot{background-position: -300px;}


/*Формы*/
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #444;
    box-shadow: 0 0 0.2rem 0 rgba(0,0,0,0.3);
}
.error_info{color:#d00; font-size:12px;}

#search-panel{position:fixed; top:-100px; left:0; width: 100%; right:0; height:auto; padding: 15px 0; z-index: 2000; background:#fff; box-shadow: 10px 0 30px #000; transition: all 300ms ease;}
#search-panel.show{top:0 !important;}
#search-panel input[type="text"]{min-width:460px;}
#back{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.1); z-index:1500; display:none;}
@media all and (max-width:768px){
    #search-panel input[type="text"]{min-width:inherit;}
}
.sisea-paging{display:none;}
.sisea-results{font-size:1.2rem; line-height:1.2rem; margin-bottom: 1rem;}
.search-link{color:#08a531; text-decoration:none;}
.search-link:hover{color:#000; text-shadow:0 0 0 #000;}

#filter{padding:10px; background: #fff; border-radius: 5px;}
#filter .btn{margin: 5px;}

#dealers-container{display:none;}
#dealers .btn[aria-expanded="true"] .fa-caret-square-down {display:none;}
#dealers .btn[aria-expanded="true"] .fa-caret-square-up {display:inline-block;}
#dealers .btn[aria-expanded="false"] .fa-caret-square-down {display:inline-block;}
#dealers .btn[aria-expanded="false"] .fa-caret-square-up {display:none;}

#dealers-container .card h5 {
    position: relative;
}