@font-face {
  font-family: "Montserrat-Regular";
  src: url("../fonts/Montserrat-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Montserrat-Regular.otf") format("opentype"), /* Open Type Font */
    /* url("../fonts/Montserrat-Regular.svg") format("svg"),  Legacy iOS */
    url("../fonts/Montserrat-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Montserrat-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Montserrat-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("../fonts/Montserrat-SemiBold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Montserrat-SemiBold.otf") format("opentype"), /* Open Type Font */
    /* url("../fonts/Montserrat-SemiBold.svg") format("svg"),  Legacy iOS */
    url("../fonts/Montserrat-SemiBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Montserrat-SemiBold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url("../fonts/Montserrat-Bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Montserrat-Bold.otf") format("opentype"), /* Open Type Font */
    /* url("../fonts/Montserrat-Bold.svg") format("svg"),  Legacy iOS */
    url("../fonts/Montserrat-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Montserrat-Bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Montserrat-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

/* NEW CSS */
body { font-family: "Montserrat-Regular"; color:#000; font-size:18px; background:#fff; position:relative; }
a { font-family: "Montserrat-Regular"; color: #000; font-size: 18px; text-decoration:none; }
a:hover { font-family: "Montserrat-Regular"; color: #000; font-size: 18px; text-decoration:none;}

a, img, input, button, textarea, select { outline: none; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

#wrapper { position:relative; overflow: hidden}

.wrapper { width:1200px; margin: auto; position:relative; z-index: 1}

.fl { float:left}
.fr { float:right}

button, a, .trans {
	-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;
}


a.btn { display:inline-block; padding:0 25px; border-radius:20px; background:#a5c848; color:#fff; line-height:50px; height:50px; font-size:20px; text-transform:uppercase }
a.btn:hover { font-size:20px;}

button.btn { display:inline-block; padding:0 25px; border-radius:20px; background:#a5c848; color:#fff; line-height:50px; height:50px; font-size:20px; text-transform:uppercase }
button.btn:hover { font-size:20px;}

/* HEADER */
#header.downscroll { top:-100px; opacity:0}
#header.upscroll { top:0; opacity:1; -webkit-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;}

#header  { position:fixed; z-index:10; left:0; top:0; right:0; padding:20px 20px; background:rgba(255,255,255,0.8) }
#header.active {  background:rgba(255,255,255,1)}

#header .phone { float: left; font-size: 36px; line-height: 40px; margin-top:5px; letter-spacing:-1px }
#header .phone a { font-size: 36px; color: #545454; line-height: 40px }
#header .phone a:hover { color:#a5c848}

#header .e-store { float:right}

#header .menu { position: absolute; left: 50%; top: 35px; transform:translate(-50%, 0); width: calc(100% - 700px)}
#header .menu ul { display: table; width: 100%; text-align: center}
#header .menu li { display: table-cell; list-style-type: none; padding: 0 5px }
#header .menu li a { font-family: "Montserrat-SemiBold"; font-size:20px; color: #545454; text-transform: uppercase; }
#header .menu li a:hover, #header .menu li a.active { color:#a5c848}

#header .menu .e-store { display:none; float: none; text-align: center; padding-bottom: 20px}

#header .menu.active { display:block}




#header .toggle-nav { display: none; float: right; position: relative; z-index:10; width:40px; height:40px; top:5px; margin-left: 10px }
#header .toggle-nav i { position:absolute; display:block; height:2px; background:#000000; width:30px; right:5px; }

#header .toggle-nav i:nth-child(1) { top:10px; }
#header .toggle-nav i:nth-child(2) { top:19px; }
#header .toggle-nav i:nth-child(3) { top:28px; }

#header .toggle-nav.active i:nth-child(1) { top:19px; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
#header .toggle-nav.active i:nth-child(2) { background: transparent; }
#header .toggle-nav.active i:nth-child(3) { top:19px; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }





#first-screen { background:url(../images/screen.jpg); min-height: 80vh; background-size: cover; background-position: 50% 50%; position: relative}
#first-screen .logo { text-align: center; padding: 50px 0}

#first-screen .slogan { text-align: center; padding-bottom: 40px }
#first-screen .slogan .title { padding:15px 0; position: relative; display: inline-block; font-family: "Montserrat-SemiBold"; font-size:88px; color: #fff; text-transform: uppercase; margin-bottom: 25px }

#first-screen .slogan .sub-title { font-family: "Montserrat-Bold"; font-size:22px; color: #fff; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,1)}

#first-screen .play-button { text-align: center; padding-bottom: 140px}
#first-screen .play-button a { display: block; width: 103px; height: 103px; margin: auto}
#first-screen .play-button .play { display:block; width: 103px; height: 103px; border-radius: 100px; background-image: url(../images/play.png); background-repeat: no-repeat}

#first-screen .about-button { position:absolute; transform:translate(-50%, 0); bottom: 40px; left: 50%}

/* CENTER */
#center { padding:90px 0 0 0; }





/* FOOTER */
#footer {  padding: 30px 0; background: #f5f5f5; color: #575756; line-height: 1.5}

#footer .logo { float:left; width: 26%}
#footer .logo img { width:150px; }

#footer .address { float:left; width: 37%; padding-top: 20px}
#footer .contact { float:left; width: 37%; padding-top: 20px}

/* CONTENT */
.content {}
.content a { color: #1e82b2}
.content ul, .content ol { padding-left: 18px; color: #222222; list-style-type: none}



/* BLOCK */
.block { position: relative}
.block .block-header { background: #f5f5f5; color: #000; font-family: "Montserrat-SemiBold"; font-size:28px; text-transform: uppercase; position: relative; padding: 40px 0 50px 0; text-align: center}
.block .block-header:after { content:''; position: absolute; left: 50%; bottom:35px; transform:translate(-50%, 0); width: 100px; height: 3px; background: #000000; }
.block .block-content { position: relative; z-index: 1}
.block .block-footer {}


.block .block-header.stamp:before { content: ''; position: absolute; right:5%; top: 40px; width: 203px; height:203px; background: url(../images/green-stamp.png); background-repeat: no-repeat; background-position: 0% 50%;}

#block-about:before { content: ''; position: absolute; left: 0; top: 50%; width: 150px; height:500px;  background: url(../images/left-block-bg.jpg); background-repeat: no-repeat; background-position: 0 50%;}
#block-about:after { content: ''; position: absolute; right: 0; top: 20%; width: 150px; height:500px;  background: url(../images/right-block-bg.jpg); background-repeat: no-repeat; background-position: 100% 50%;}


#block-about .block-content:after { content: ''; position: absolute; right: 0; bottom: 3%; width: 271px; height:366px; background: url(../images/right-2-block-bg.jpg); background-repeat: no-repeat; background-position: 100% 50%; z-index: 0}

#block-boss:after { content: ''; position: absolute; right: 2%; bottom:0; width: 548px; height:274px;  background: url(../images/bottom-block-bg.jpg); background-repeat: no-repeat; background-position: 100% 50%;}

#block-product:before { content: ''; position: absolute; left: 0; top: 50%; width: 170px; height:320px; background: url(../images/left-2-block-bg.jpg); background-repeat: no-repeat; background-position: 0 50%;}
#block-product:after { content: ''; position: absolute; right: 0; bottom: 10%; width: 150px; height:203px; background: url(../images/green-stamp.png); background-repeat: no-repeat; background-position: 0% 50%;}


#block-review .block-content { background:url(../images/screen-review.jpg); background-position: 50% 50%; background-size: cover;}


.content-simple-list { position: relative; z-index: 1; }
.content-simple-list .content-item {}
.content-simple-list .content-item .thumb { position: relative; width:50%; float: left}
.content-simple-list .content-item .thumb img { display:block; width: 100%}
.content-simple-list .content-item .thumb video { width: 100%;}

.content-simple-list .content-item .info { float: right; width: 50%; }
.content-simple-list .content-item .info .text { top:50%; transform:translate(0%, -50%); position: relative; padding: 40px}
.content-simple-list .content-item .info .text h3 { padding-bottom:20px; font-size: 24px}

.content-simple-list .content-item:nth-child(even) .thumb {  float:right}
.content-simple-list .content-item:nth-child(even) .info { float:left; }


.quote { padding:20px; border-left: 2px solid #383837; margin:40px 20px; font-style: italic; font-size: 34px; text-transform: uppercase}


.product-list { padding: 40px 0}
.product-list .product-item { float: left; width: 32%; margin-right: 2%}
.product-list .product-item:nth-child(3n) { margin-right:0}
.product-list .product-item .thumb { position: relative}
.product-list .product-item .thumb img { width:100%; display: block}
.product-list .product-item .thumb .caption { position: absolute; transform:translate(-50%, -50%); left: 50%; top:50%; border:1px solid #fff; padding: 10px; color:#fff; text-transform: uppercase; font-size: 26px; text-align: center; white-space: nowrap}
.product-list .product-item .info { padding: 20px}


.review-list .review-item { float: left; width: 32%; margin-right: 2%; padding:120px 20px}
.review-list .review-item:nth-child(3n) { margin-right:0}

.review-list .review-item .info { background: rgba(255,255,255,0.8); color: #000; padding: 30px 30px; height: 100%}
.review-list .review-item .info .name { font-family: "Montserrat-SemiBold";}
.review-list .review-item .info .post { padding-bottom: 40px; position: relative}
.review-list .review-item .info .post:after { content:''; position: absolute; left: 0%; bottom:15px; width: 80px; height: 2px; background: #616359; }


.boss-content { margin-top: 100px}
.boss-content .thumb { float:left; width: 50%}
.boss-content .thumb img { width:100%; display: block}
.boss-content .info { background:#f5f5f5; padding: 40px; position: absolute; left: 50%; top: 80px; margin-left: -200px; width: 40%; font-size: 20px; font-style: italic}
.boss-content .info .name { color:#000; padding-top: 20px; font-family: "Montserrat-SemiBold"; font-style: normal}
.boss-content .info .post { font-style: normal}
.boss-content .info .stamp { position:absolute; right: 80px; bottom:-100px}



.contact-content { background-image:url(../images/web-form-right.jpg); background-repeat: no-repeat; background-position:50vw 50%;background-size: 60% auto;}
.contact-content .info { float:left; width:50%; padding: 20px 40px 20px 0}


.gallery-slider  { position:relative;}
.gallery-slider .owl-item { float:left }
.gallery-slider .gallery-item img { width:100%; display: block}


.gallery-slider .owl-nav.disabled { display: none; }
.gallery-slider .owl-dots.disabled { display: none; }
.gallery-slider .owl-nav button.disabled { display: none; }
.gallery-slider .owl-nav button { position:absolute; top:50%; z-index: 10; display: block; width: 100px; height: 100px; border-radius: 100px; background:rgba(255,255,255,0.8);  text-align: center; border:none; margin-top: -50px; cursor: pointer}
.gallery-slider .owl-nav button span { display: block; text-align: center; font-size: 48px}
.gallery-slider .owl-nav .owl-prev { left: 20px; }
.gallery-slider .owl-nav .owl-next { right: 20px;}

.web-form { }
.web-form .field { padding: 10px 0}
.web-form .field label { display: block; padding-bottom: 10px}
.web-form .field input { background:#f5f5f5; padding:0 10px; border-radius:20px; border:none; height: 50px; width: 100%}
.web-form .field textarea { background:#f5f5f5; padding:0 10px; border-radius:20px; border:none; height: 150px; width: 100%}

.web-form .field.col { float:left; width: 49%}
.web-form .field.col:nth-child(2n) { float:right}

.web-form .button { padding: 10px 0}
.web-form .button button { border:none}

/* RESPONSIVE */
@media (max-width: 1200px) {
	.wrapper { width:100%; }
	
	/* HEADER */
	#header .toggle-nav { display: block}
	
	#header .menu { display:none; transform: translate(0, 0); top: 100%; left: 0; right: 0; background:#fff; padding-top: 20px; width: 100%}
	#header .menu li { float:none; display: block; padding-bottom: 20px; text-align: center}
	
	/* CENTER */
	
	.boss-content .info { width: 60%; margin-left: -150px;}
	
	
	/* FOOTER */

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	.wrapper { width:100%; }
	
	
	.boss-content .thumb { float:none; width: 100%}
	.boss-content .info { position: relative; left: 0%; top: 0; margin-left: 0; width: 100%; }
		
	
	.product-list .product-item { float: left; width: 49%; margin-right: 2%}
	.product-list .product-item:nth-child(3n) { margin-right:2%}
	.product-list .product-item:nth-child(2n) { margin-right:0}
	
	.review-list .review-item { float: left; width: 49%; margin-right: 2%; padding: 20px 10px}
	.review-list .review-item:nth-child(3n) { margin-right:2%}
	.review-list .review-item:nth-child(2n) { margin-right:0}
	
	.contact-content { background-image:none}
	.contact-content .info { float:none; margin: auto; width:50%; padding: 20px 0 20px 0}
	
	.boss-content .info .stamp { width:120px; bottom:0}
	
	/* FOOTER */

}
  
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.wrapper { width:100%; padding:0 10px;}
	
	/* HEADER */
	#header .e-store { display:none}
	#header .menu.active .e-store { display:block}
	
	
	#first-screen .logo img { width:140px}
	#first-screen .slogan .title { font-size:32px}
	#first-screen .slogan .sub-title { font-family: "Montserrat-Regular";}
	
	

	.content-simple-list .content-item .thumb { position: relative; width: 460px; margin: auto; float: none}
	.content-simple-list .content-item .info { float: none; width: 460px; padding:0%;  margin: auto; }
	.content-simple-list .content-item .info .text { top:0%; transform:translate(0%, 0%); position: relative; padding:20px 0 30px 0 }
	.content-simple-list .content-item:nth-child(even) .thumb {  float:none}
	.content-simple-list .content-item:nth-child(even) .info { float:none; }
	
	.boss-content .thumb { float:none; width: 100%}
	.boss-content .info { position: relative; left: 0%; top: 0; margin-left: 0; width: 100%; }
	
	
	.product-list .product-item { float: none !important; width: 460px; margin: auto !important; }
	.product-list .product-item .info { padding:20px 0 30px 0}
	
	.review-list .review-item { float: none !important; width: 460px; margin: auto !important; padding: 20px 0}
	.review-list .review-item .info { }
	
	.contact-content { background-image:none}
	.contact-content .info { float:none; margin: auto; width:460px; padding: 20px 0 20px 0}
	
	
	.gallery-slider .owl-nav button { width:50px; height: 50px; margin-top: -25px; }
	.gallery-slider .owl-nav button span {  font-size: 24px}
	
	.boss-content .info .stamp { width:120px; bottom:0; right: 20px}
	
	/* FOOTER */
	#footer .logo, #footer .address, #footer .contact { float: none; text-align: center; width: 100%}
	#footer .address, #footer .contact  { padding-bottom:20px}
	#footer .logo img { width:140px}
}
 
/* Landscape phones and down */
@media (max-width: 480px) { 
	.wrapper { width:100%; padding:0 10px;}
	
	/* HEADER */
	#header .phone {  font-size: 30px; }
	#header .phone a { font-size: 30px; }
	
	
	#first-screen .slogan .title { width:280px}
	
	.block .block-header { font-size:24px}

	.content-simple-list .content-item .thumb { position: relative; width: 100%;; margin: auto; float: none}
	.content-simple-list .content-item .info { float: none; width: 100%; padding:0%; margin: auto; }
	.content-simple-list .content-item .info .text { top:0%; transform:translate(0%, 0%); position: relative; padding:20px 0 30px 0 }
	.content-simple-list .content-item:nth-child(even) .thumb {  float:none}
	.content-simple-list .content-item:nth-child(even) .info { float:none; }
	
	.product-list .product-item { float: none !important; width: 100%; margin: auto !important; }
	.product-list .product-item .info { padding:20px 0 30px 0} 
	
	.review-list .review-item { float: none !important; width: 100%; margin: auto !important; padding: 20px 0}
	
	.contact-content { background-image:none}
	.contact-content .info { float:none; margin: auto; width:100%; padding: 20px 0 20px 0}
	
	/* FOOTER */
}

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #444444b0;
    z-index: 100;
	
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 10% auto;
    padding: 50px;
    border: none;
    width: 70%;
    border-radius: 15px;
}
.modal-content iframe {border-radius: 15px;}
.close {
    position: absolute;
    right: 0;
    top: 0;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: #a5c848;
    width: 41px;
    padding: 10px;
    display: flex;
    border-radius: 0;
}
.close img {width:100%;}

@keyframes slideIn {
    0% { transform: translateY(-200%); }
    100% { transform: translateY(0); }
}

@keyframes slideOut {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200%); }
}

.modal {
    opacity: 0;  /* Изначально прозрачный */
    visibility: hidden; /* Скрыть его от интерфейса */
    transition: opacity 0.4s, visibility 0.4s; /* Плавное изменение прозрачности */
	display: none;
}

.modal.show {
    opacity: 1;
    visibility: visible;
	display: block;
}

.modal-content {
    opacity: 0;  /* Изначально прозрачный */
    transition: opacity 0.4s;  /* Плавное изменение прозрачности */
}

.modal.show .modal-content {
    opacity: 1;
}

@media screen and (max-width:1100px) {
	.modal-content {
		position: relative;
		background-color: #fefefe;
		margin: 0;
		padding: 19vh 25px;
		border: none;
		width: 100%;
		border-radius: 0;
		height: 100vh;
	}
}