@font-face{font-family:"helvetica-neue";src:url("fonts/helvetica-neue-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
/* @font-face{font-family:"helvetica-neue-italic";src:url("fonts/helvetica-neue-italic.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"helvetica-neue-bold"; src:url("fonts/helvetica-neue-bold.ttf")format("TrueType");font-weight:700;font-display:swap} */
@font-face{font-family:"helvetica-neue-ultra-light"; src:url("fonts/helvetica-neue-ultra-light.ttf")format("TrueType");font-weight:200;font-display:swap}

:root{
	--burger: #B17F4A;
	--brown: #B17F4A;
	--green: #00584A;
	--green-dark: #00431C;
	--green-light: #00853E;
	--grey: #8F8A88;
	--grey-dark: #4B4542;
	--grey-light: #EDEDED;
	--black: #0B0907;
	--f: "helvetica-neue";
	--f-medium: "helvetica-neue-medium";
	--f-ultra-light: "helvetica-neue-ultra-light";
}

html, body { font-family: var(--f), sans-serif; font-size:16px; letter-spacing:0.28px; line-height:1.5em; }

.container .boundary {max-width:1190px; width:96%;}

.read-more {display:inline-block; background-color:var(--brown); color:#FFF; padding:5px 10px; outline: 2px solid var(--brown); outline-offset:1.5px; }
.read-more:hover {background-color:var(--green); outline-color: var(--green);}

.top-menu {background-color:var(--black); color:#8E8988; font-size:1.1em; width:100%; height:70px; position:relative; z-index:9999; border-bottom:3px solid var(--brown); }
.top-menu .top-menu-logo { display:inline-block; width:auto; height:60px; margin-top:5px; }
.top-menu .top-menu-logo img {height:100%; width:auto; }
.top-menu .top-menu-content {display:block; list-style-type:none; margin:0; padding:30px 0 0; text-align:center; position:fixed; width:100%; height:calc(100% - 70px); top:70px; left:-100%; background-color:var(--black); z-index:9988; transition:all 0.3s; }
.top-menu .top-menu-content.active {left:0;}
.top-menu .top-menu-content li { padding:10px 0; }
.top-menu .top-menu-content li a {padding:5px 10px;}
.top-menu .top-menu-content li.active a, .top-menu .top-menu-content li:hover a {color:var(--brown); border-bottom:3px solid var(--brown);}

.top-menu .hamburger {float:right; line-height:70px;}

.banner { position:relative; width:100%; height:auto; }
.banner:before {content:""; display:block; width:100%; padding-top:39.473%; }
.banner .owl-carousel {position:absolute; top:0; left:0; width:100%; height:100%; }
.banner .square-image {border:0;}
.banner .square-image:before { padding-top:39.473%; }
.banner .owl-carousel .owl-nav {display:inline-block;}
.banner .owl-carousel .owl-nav button { position:absolute; top:50%; left:0; transform:translateY(-50%);  }
.banner .owl-carousel .owl-nav button.owl-next {left:unset; right:0;}
.banner .owl-carousel .owl-nav button i {color:var(--brown); font-size:2em;}

.introduction {position:relative; background:var(--grey-light) url(../images/intro-bg.jpg) top right no-repeat; background-position: -35% 0; }
.introduction .boundary {text-align:center; }
.introduction .introduction-title {width:80%; margin:50px auto 80px; display:inline-block; }
.introduction .introduction-title img {width:100%; height:auto; }
.introduction .introduction-content {text-align:left; width:90%; margin:0 auto;}
.introduction .introduction-content ul {padding:0; list-style-position:inside; }
.introduction .introduction-sticker, .introduction .introduction-image {position:absolute; top:0; left:0; display:none;}
.introduction .introduction-sticker.st-1 { display:inline-block; width: 150px; left: unset; right: 12%; top: 130px; }

.section { }
.section-title { font-family:var(--f-ultra-light); font-size:4em; color:var(--brown); font-weight:normal; margin:1em 0; line-height:1.1em;}

.products .product { width:90%; margin:0 auto 2em; }
.products .product .product-image { background-color:var(--brown); padding:10px; box-sizing:border-box;}
.products .product .square-image { border-radius:10px; outline:5px solid var(--brown); }
.products .product .product-title {font-size:1.1em; text-align:center; margin-bottom:5px;}
.products .product:hover .product-title {color:var(--green-light);}

.news #news_slider {display:block;}
.news .news-item { width:90%; margin: 0 auto 2em;}
.news .news-item .news-image { background-color:var(--brown); padding:10px; box-sizing:border-box;}
.news .news-item .square-image { border-radius:10px; outline:5px solid var(--brown); }
.news .news-item .news-title {font-size:1.1em; text-align:center; margin-bottom:5px; margin:10px 0 2em;}
.news .news-item:hover .news-title {color:var(--green-light);}

.footer { background-color:var(--green-dark); border-top:10px solid var(--green-light); color:#FFF; }
.footer .boundary {padding:40px 10px;}
.footer .table .col {text-align:left;}
.footer h1, .footer h2 {font-size:1.4em; text-align:left;}
.footer ul { list-style-type:none; margin:0; padding:0; text-align:left; }
.footer .boundary a:hover {color:var(--brown);}

.footer .footer-logo { display:block; width:100%; text-align:center; }
.footer .footer-detail {line-height:1.8em;}
.footer h2 {margin-top:2em;}
.footer .footer-qrcodes {padding-top:2em;}
.footer .footer-qrcodes a {display:inline-block; width:49%; margin:0 2% 20px 0; vertical-align:top;}
.footer .footer-qrcodes a:nth-child(2n+0) {margin-right:0;}
.footer .footer-qrcodes img { width:100%; height:auto; }

.copyright { background-color:var(--black); color:var(--grey-light); font-size:0.8em; padding:5px; line-height:1.3em; }

@media (min-width:576px){
	.section .section-title { margin:2em 0 .5em; }
	
	.top-menu .top-menu-content li {padding:5px 0;}
	
	.introduction {background-position:-120% 0; }
	.introduction .boundary {text-align:left;}
	.introduction .introduction-content, .introduction .introduction-title {width:50%; margin:0; }
	.introduction .introduction-content {margin-bottom:3em;}
	.introduction .introduction-title {margin-top:100px;}
	.introduction .introduction-image {display:inline-block; top:40%; right:0; left:unset; width:350px; }
	.introduction .introduction-sticker.st-1 {top:10px; right:25%; width:200px; }
	.introduction .introduction-sticker.st-2, .introduction .introduction-sticker.st-3 {display:inline-block;}
	.introduction .introduction-sticker.st-2 {width:150px; right:5px; left:unset; top:10px;}
	.introduction .introduction-sticker.st-3 {width:250px; right:10px; left:unset; top:150px;}
	
	.products .product {width:32%; margin:0 2% 0 0; display:inline-block; vertical-align:top; }
	.products .product:nth-child(3n+0) {margin-right:0;}
	
	.news .news-item {width:90%; margin:0 auto;}
	.news .owl-nav {display:inline-block;}
	.news .owl-carousel button { position:absolute; top:20%; left:-10px;}
	.news .owl-carousel button.owl-next {left:unset;right:-10px;}
	.news .owl-carousel button i {font-size:2em; color:var(--brown);}
	
	.footer .footer-logo {text-align:left;}
	.footer .footer-qrcodes {padding-top:2.5em;}
}

@media (min-width:768px){
	
	.top-menu .top-menu-content li { padding:20px 0; }
	
	.introduction .introduction-title {margin-top:140px; width:40%; }
	.introduction .introduction-image {width:400px; top:30%; right:3%;}
	.introduction .introduction-sticker.st-1 {top:20px; right:30%; width:250px; }
	.introduction .introduction-sticker.st-2 {top:20px; width:200px; }
	
	.news .owl-carousel button { left:-15px; top:25%; }
	.news .owl-carousel button.owl-next { right:-15px;}
	
	.footer .footer-qrcodes {padding-top:3.5em;}
	.footer .footer-qrcodes a {width:32%;}
	.footer .footer-qrcodes span {display:block;}
	.footer .footer-qrcodes a:nth-child(2n+0) {margin-right:2%;}
	.footer .footer-qrcodes a:nth-child(3n+0) {margin-right:0;}
}

@media (min-width:996px){
	.top-menu .boundary {width:98%; max-width:1190px;}
	.top-menu .hamburger {display:none;}
	.top-menu .top-menu-logo {height:50px; margin-top:10px;}
	.top-menu .top-menu-content {display:inline-block; left:unset!important; top:unset; width:auto; height:auto; background:unset; padding:0; font-size:0.8em; padding-left: 40px; line-height: 60px; box-sizing: border-box; position:relative; vertical-align:top; }
	.top-menu .top-menu-content li {display:inline-block; padding:0; }
	
	.introduction {background-position:300% 0;}
	.introduction .introduction-image {width:450px; top:20%; right:10%;}
	.introduction .introduction-sticker.st-1 {right:22%;}
	.introduction .introduction-sticker.st-2 {top:40px;}
	.introduction .introduction-sticker.st-3 {width:300px; right:5px; top:160px;}
	
	.footer .footer-logo {padding-left:70px; box-sizing:border-box;}
	.footer .boundary > .table > .col:last-child {padding-top:3.7em;}
}

@media (min-width:1200px){
	.top-menu .top-menu-content {font-size:1em; padding-left: 50px;}
	.top-menu .top-menu-content li {padding:0 5px;}
	
	.introduction {background-position:100% 0;}
	.introduction .introduction-title {width:400px; margin-bottom:20px;}
	.introduction .introduction-content {margin-bottom:100px;}
	.introduction .introduction-image {width:520px; right:300px; }
	.introduction .introduction-sticker.st-1 {right:430px; top:40px;}
	.introduction .introduction-sticker.st-2 {width:230px; top:60px; right:100px; }
	.introduction .introduction-sticker.st-3 {width:410px; top:200px; right:100px;}
	
	.products .products-container {width:90%; margin:0 auto;}
	.products .product {width:30.666%; margin:0 4% 0 0; }
	
	.news .owl-carousel button i {font-size:3em;}
	.news .owl-carousel button { left:-35px; }
	.news .owl-carousel button.owl-next { right:-35px;}
}