/* @font-face{font-family:"roboto";src:url("fonts/roboto-regular.ttf")format("TrueType"); font-weight:400; font-display:swap;}
@font-face{font-family:"roboto";src:url("fonts/roboto-italic.ttf")format("TrueType"); font-weight:400; font-display:swap; font-style:italic;}
@font-face{font-family:"roboto"; src:url("fonts/roboto-bold.ttf")format("TrueType"); font-weight:700; font-display:swap; font-weight:bold;} 
@font-face{font-family:"roboto"; src:url("fonts/roboto-bolditalic.ttf")format("TrueType"); font-weight:700;font-display:swap; font-weight:bold; font-style:italic;}

@font-face{font-family:"sfu-angie-bold"; src:url("fonts/sfu-angie-bold.ttf")format("TrueType"); font-weight:700;font-display:swap; font-weight:bold; } */
@font-face{font-family:"tungsten"; src:url("fonts/svn-tungsten.ttf")format("TrueType"); font-weight:400;font-display:swap; }

@font-face{font-family:"fragen"; src:url("fonts/fragen-regular.woff2")format("woff2"); font-weight:400;font-display:swap; }
@font-face{font-family:"fragen"; src:url("fonts/fragen-regularitalic.woff2")format("woff2"); font-weight:400;font-display:swap;font-style:italic; }
@font-face{font-family:"fragen"; src:url("fonts/fragen-black.woff2")format("woff2"); font-weight:700;font-display:swap;font-weight:bold; }

:root{
	--burger: #000;
	--blue: #19469E;
	--blue-light: #286BCE;
	--blue-ex-light: #EEF6FF;
	--yellow-dark: #F7DEB5;
	--yellow: #FFEC2B;
	--yellow-light: #FFF6EB;
	
	--green:#057A59;
	--green-dark:#173b2e;
	--green-light:#0fa57b;
	--brown:#AA8C50;
	--red: #D13730;
	
	--f-title: 'tungsten';
}

html, body { font-family: fragen, sans; letter-spacing:.05em; line-height:1.5em; height:auto; }
.container .boundary {max-width:1200px; width:96%; text-align:center; }

h1, h2, h3, h4, h5, h6 { font-family:var(--f-title); letter-spacing:.1em; }

.top-menu { box-shadow: 0 0 3px #DDD; }
.top-menu, .top-menu .top-menu-bg { background-color:#FFF; color:var(--green); height:70px; position:relative; }
.top-menu .top-menu-logo { width:auto; height:50px; display:inline-block; margin-top:10px; }
.top-menu .boundary { text-align:left; }
.top-menu .top-menu-logo img { width:auto; height:100%; }
.top-menu .top-menu-hotline, .top-menu .top-menu-groups { display:none; }

.top-menu .hamburger { float:right; margin:20px 10px 0; transition:all .3s; }
.top-menu .hamburger.is-active { position:fixed; top:0; right:10px; z-index:99999; }
.top-menu .top-menu-title { line-height:70px; font-family:var(--f-title); display:none; height:70px; margin-left:5px; vertical-align:top; }

.top-menu .top-menu-content { background-color:#FFF; color:#000; position:fixed; top:-100px; left:0; width:100%; height:100%; list-style-type:none; margin:0; padding:15px 0; text-align:center; box-sizing:border-box; border-top:0; transition:all 0.3s; opacity:0; pointer-events:none; z-index:9999; font-family:var(--f-title); font-size:1.8em; letter-spacing:.1em; }
.top-menu .top-menu-content.active { top:0; opacity:1; pointer-events:auto; }
.top-menu .top-menu-content li { width:80%; margin:0 auto; box-sizing:border-box; padding:0 10px; font-weight:bold; }
.top-menu .top-menu-content > li { padding-bottom:10px; }
.top-menu .top-menu-content li a { display:block; width:100%; padding:10px 0; text-transform:capitalize; }
.top-menu .top-menu-content > li.active > a { color:var(--red); }
.top-menu .top-menu-content li ul { /* display:none;  */list-style-type:none; padding:0; margin:0; font-size:0.8em; }
.top-menu .top-menu-content li ul li { font-weight:normal; width:100%; }
.top-menu .top-menu-content li ul li:hover a { color:var(--red); }

.top-menu .top-menu-search { position:relative; display:inline-block; position:absolute; top:22px; right:70px; font-size:1.2em; color:#333; }
.top-menu .top-menu-search > button { background:unset; border:unset; font-size:1em; padding:0; margin:0; cursor:pointer; }
.top-menu .top-menu-search form { display:none; position:absolute; top:calc(100% + 10px); right:-15px; z-index:999; width:160px; background-color:#FFF; padding:0 0 0 5px; box-sizing:border-box; box-shadow:0 0 3px #666; }
.top-menu .top-menu-search form .textbox { border:0; width:120px; height:30px; margin:0; font-size:.7em; padding:0; }
.top-menu .top-menu-search form button { border:0; background:unset; display:inline-block; width:30px; height:30px; font-size:1em; color:#666; }

.banner { position:relative; width:100%; height:auto; background-color:var(--blue-ex-light); }
.banner:before {content:""; display:block; width:100%; /* padding-top:39.473%; */ padding-top:41%; }
.banner .owl-carousel {position:absolute; top:0; left:0; width:100%; height:100%; }
.banner .square-image { border:0; }
.banner .square-image:before { padding-top:53%; }
.banner .square-image img { width:137%!important; height:auto!important; left:unset; right:0; }
.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;}


.read-more { display:inline-block; font-size:0.8em; background-color:var(--green); color:#FFF; padding:5px 20px; border-radius:20px!important; outline:1px solid var(--green)!important; outline-offset:2px; border:0; }
.read-more:hover { background-color:var(--green-light); }

.products, .news { margin:60px 0; }

.container-title { position:relative; display:inline-block; margin: 0 auto 20px; color:var(--red); width:auto; border:2px solid var(--brown); padding:5px 45px; border-radius:40px; background-color:#FAFAFA; border-top:0; font-size:1.7em; line-height:1.5em; }
.container-title:before { content:""; position:absolute; top:3px; left:-20px; display:inline-block; width:calc(100% + 40px); height:100%; border:2px solid var(--brown); border-top:0; border-radius:40px; }

.container-title-description { color:#333; width:90%; margin:0 auto; font-size:.8em; line-height:1.3em; }

.introduction { background:url(../images/bg.jpg) top left no-repeat, url(../images/body-bg.jpg) top left repeat-y; background-size:100% auto;  background-position: top left, 0 100px; padding:60px 0 30px; }
.introduction .introduction-image { width:60%; margin:0 auto 20px; border:5px solid var(--brown); }

.introduction .boundary.products { max-width:1600px; }

.products { margin-bottom:0!important; }
.products .products-list { margin:30px auto 0; width:90%; display:block; }
.products .product-item { margin-bottom:30px; position:relative; padding-bottom:10px; }
.products .product-item .square-image { width:80%; margin:0 auto 20px; border:2px solid var(--brown); z-index:1; }

.products .product-item .product-item-title, .products .product-item .product-item-description { padding:0 10px 10px; box-sizing:border-box; }
.products .product-item .product-item-title { font-size:1.2em; line-height:1.3em; font-weight:bold; color:var(--green); }
.products .product-item .product-item-description { font-size:0.9em; line-height:1.3em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding-bottom:0; }
.products .product-item:hover .product-item-title a { color:var(--brown); }

.products-intro { display:none; margin:0 0 60px; background-image:linear-gradient(#FFF, var(--blue-ex-light)); }
.products-intro .table .col { display:inline-block; width:49%; margin:0 2% 20px 0; font-size:0.8em; }
.products-intro .table .col:nth-child(2n+0) { margin-right:0; }
.products-intro .square-image { max-width:60px; margin:0 auto; margin-bottom:10px; }

.news .news-list { margin-top:40px; }
.news .news-item { display:inline-block; vertical-align:top; width:100%; margin:0 0 10px; text-align:left; }
.news .news-item .square-image {border:1px solid #DDD;}
.news .news-item .square-image:before { padding-top:52.333%; }
.news .news-item .news-name { font-family:roboto; font-size:1.2em; font-weight:bold; margin-top:5px; }
.news .news-item .news-name a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news .news-item .news-description { font-size:0.9em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.footer { background:var(--green-dark) url(../images/footer-bg.png) top left; background-size:auto 100%; color:#FFF; padding:60px 0; position:relative; font-family:fragen; font-size:1.3em; }
.footer h1, .footer h2 { font-family:fragen; }
.footer .footer-logo { width:200px; height:auto; display:inline-block; border:3px solid var(--brown); }
.footer .footer-logo img { width:100%; height:auto; display:inline-block; vertical-align:top; }
.footer .footer-contact h1 { font-size:.85em; letter-spacing:.05em; line-height:1.3em; margin:30px auto; color:var(--brown); }
.footer .footer-contact h1 span { display:block; margin-top:10px; font-size:1.4em; }
.footer .footer-contact-content { text-align:left; font-size:0.8em; }
.footer ul { list-style-type:none; margin:10px auto; padding:0; text-align:left; }
.footer .footer-contact ul { font-size:1.1em; line-height:1.4em; }
.footer ul li { margin-bottom: 10px; }
.footer .footer-contact ul li span { display:inline-block; vertical-align:middle; width:calc(100% - 25px); }
.footer h2 { width:90%; margin:50px 0 10px; text-align:left; font-size:.8em; color:var(--brown); }
.footer a:hover { color:var(--brown); }
.footer .footer-hotline { font-weight:bold; font-size:1.2em;/*  color:var(--brown); */ }

.footer .footer-social { display:block; font-size:1.7em; margin-top:20px; }
.footer .footer-social a { display:inline-block; vertical-align:middle; margin:0 5px;}
.footer .footer-social a:hover { color:var(--brown); }

.footer .footer-images { margin-top:30px; }
.footer .footer-images img { display:inline-block; vertical-align:middle; max-width:80px; margin:0 10px; }

.footer-copyright { font-size:0.7em; color:#FFF; background-color:var(--green-dark); padding:7px 0; }
.footer-copyright span { display:block; line-height:1.2em; }

@media (min-width:576px){
	.products .products-list { width:98%; }
	.products .product-item { display:inline-block; width:49%; margin-right:2%; }
	.products .product-item:nth-child(2n+0) { margin-right:0; }
	
	.footer-copyright span { display:inline-block; }
	.footer-copyright span:before { content:"\00a0 -\00a0"; }
}

@media (min-width:768px){
	.container .boundary { width:98%; }
	.container-title { padding:5px 50px; }

	.top-menu .top-menu-title, .top-menu .hamburger { display:none; }
	
	.top-menu, .top-menu .top-menu-bg { display:inline-block; }
	
	.top-menu .boundary { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content: space-between; }
	
	.top-menu .top-menu-content { position:relative; top:unset; left:unset; width:auto; background-color:unset; border:0; padding:0; display:inline-block; font-size:1.3em; flex:1; }
	.top-menu .top-menu-content li { display:inline-block; width:auto; height:auto; }
	.top-menu .top-menu-content > li { padding-bottom:0; }
	.top-menu .top-menu-content > li > a {  display:inline; padding:0; font-weight:bold; }
	.top-menu .top-menu-content li.active { border:0; }
	.top-menu .top-menu-content > li.active > a, .top-menu .top-menu-content > li:hover > a { background-color:unset; color:var(--red);  }
	.top-menu .top-menu-content li ul { font-size:inherit; }
	
	.top-menu .top-menu-content li.sub-menu { position:relative; }
	.top-menu .top-menu-content li.sub-menu:after {content:"\e917"; font-family:'icomoon' !important; speak:never; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; display:inline-block; transform:rotate(90deg); vertical-align:middle; }
	.top-menu .top-menu-content li.sub-menu ul { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background-color:#FFF; z-index:9999; box-sizing:border-box; line-height:1.5em; box-shadow:0 0 3px #DDD; padding:20px 10px; opacity:0; transition:all .3s; }
	/* .top-menu .top-menu-content li.sub-menu ul:before { content:""; display:block; position:absolute; top:5px; left:5px; width:calc(100% - 10px); height:calc(100% - 10px); border:1px solid var(--brown); } */
	.top-menu .top-menu-content li.sub-menu ul li { line-height:1.5em; white-space:nowrap; display:block; }
	.top-menu .top-menu-content li.sub-menu ul li a { padding:10px 0; display:block; }
	.top-menu .top-menu-content li.sub-menu:hover ul { display:block; opacity:1; }
	
	.top-menu .top-menu-search { position:relative; top:unset; right:unset; margin-right:10px; }
	.top-menu .top-menu-search form { top:100%; right:0; width:180px; padding:5px 5px 5px 10px; line-height:1.5em; }
	.top-menu .top-menu-search form .textbox { width:calc(100% - 30px); }
	
	.top-menu, .top-menu .top-menu-bg .top-menu-content, .top-menu .top-menu-bg { height:60px; line-height:60px; }
	.top-menu .top-menu-logo { height:50px; width:auto; margin-top:5px; }
	.top-menu .top-menu-logo img { width:auto; height:100%; }
	.top-menu .top-menu-bg .top-menu-content { font-size:0.8em; display:inline-block; color:#FFF; vertical-align:top; margin-left:20px; }
	.top-menu .top-menu-hotline { float:right; background-color:var(--red); color:#FFF; padding:0 20px; height:30px; line-height:30px; margin-top:20px; border-radius:20px; box-sizing:border-box; border:3px solid #FFF; font-weight:bold; font-style:italic; font-size:0.9em; }
	.top-menu .top-menu-hotline span { display:none; }
	
	.top-menu .top-menu-content { top:0; opacity:1; pointer-events:auto; color:#000!important; }
	.top-menu .top-menu-content li a { padding:0 5px; }
	
	.top-menu .top-menu-groups { display:inline-block; vertical-align:top; width:auto; position:relative; text-align:center; }
	.top-menu .top-menu-groups .top-menu-groups-content .top-menu-logo { display:inline-block; width:70%; height:auto; margin:10px auto 10px; }
	
	.top-menu .top-menu-groups .top-menu-groups-content { width:auto; height:auto; font-size:0.8em; box-sizing:border-box; }
	.top-menu .top-menu-groups .top-menu-groups-content ul { list-style-type:none; margin:0; padding:0; line-height:60px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li { display:inline-block; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li.active, .top-menu .top-menu-groups .top-menu-groups-content ul li:hover { border-color: var(--red); width:96%; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li a { line-height:26px; text-transform:capitalize; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li.active a, .top-menu .top-menu-groups .top-menu-groups-content ul li:hover a { width:100%; background-color:var(--yellow-light); display:block; }
	
	.top-menu .top-menu-groups .top-menu-groups-content ul li ul { display:none; }
	
	.banner:before, .banner .square-image:before { padding-top:30%; }
	.banner .square-image img { width:100%!important; height:auto!important; left:0; right:unset; }
	
	
	.introduction { background:url(../images/bg.jpg) top left no-repeat; background-size:100% auto; padding:60px 0 30px; }
	.introduction .introduction-image { width:70%; margin:20px 10px 0 auto; }
	.introduction .introduction-content { text-align:left; width:70%; padding-left:10px; }

	.products { margin-top:80px; }
	.products .boundary .container-title { z-index:1; position:relative; }
	.products .boundary { width:100%; background-color:var(--blue); position:relative; }
	.products .boundary:after { content:""; width:100%; height:50%; background-color:#FFF; position:absolute; top:-1px; left:0; z-index:0; }
	.products .products-list { }
	.products .product-item { margin:0; width:100%; background:unset; padding-bottom:20px; }
	.products .product-item:after { display:none; content:unset; }
	.products .product-item .square-image { margin-bottom:10px; width:calc(100% - 4px); box-sizing:border-box; }
	.products .product-item .product-item-title { font-size:1em; }
	.products .product-item .product-item-title a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
	.products .product-item .product-item-description { font-size:0.8em; -webkit-line-clamp:2; }
	
	.products-intro { padding:30px 0 20px; background-color:var(--blue-ex-light); }
	
	.news .news-item { display:inline-block; width:32.333%; margin:0 1% 0 0; }
	.news .news-item:nth-child(3n+0) { margin-right:0; }
	
	.footer .table .col .table .col-sm-6 { display:block; width:100%; }
	.footer .footer-menu { padding-top:130px; padding-left:20px; }
	.footer .col-md-7 { padding-left:20px; }
	
	.footer h2, .footer .footer-menu ul { width:80%; text-align:center; margin:0; }
	.footer h2 { margin-bottom:20px; font-size:.9em; }
	
	.footer .footer-menu .table .col:first-child h2 { margin-top:25px; }
	.footer .footer-social, .footer .footer-images { text-align:left; }
	.footer .footer-images img { margin-left:0; }
}

@media (min-width:996px){
	.top-menu .top-menu-bg .top-menu-content { font-size:1em; }
	.top-menu .top-menu-hotline { display:none; height:40px; margin-top:10px; line-height:40px; font-size:1em; }
	
	.top-menu .top-menu-content > li { padding:0 20px; } 
	.top-menu .top-menu-content li a { padding:0 3px; }
	
	.top-menu .top-menu-groups .top-menu-groups-content .top-menu-logo { margin-bottom:0; }
	.top-menu .top-menu-groups { width:24%; }
	.top-menu .top-menu-groups .top-menu-groups-content ul { line-height:40px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li { height:40px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li a { line-height:36px; }
	
	.introduction { padding-top:80px; }
	.introduction .introduction-image { width:60%; }
	.introduction .introduction-content { padding-top:20px; }
	
	.products { margin-top:100px; }
	.products-intro { padding:40px 0; }
	
	
	.footer .footer-contact h1 { font-size:1.1em; }
	.footer ul, .footer .footer-contact, .footer .footer-social, .footer .table .col, .footer h2, .footer .footer-images { text-align:center; }
	.footer h2 { margin:0 0 20px; font-size:1em; }
	.footer .footer-menu .table .col:first-child h2 { margin-top:0; }
	.footer .footer-menu { padding-top:220px; }
	.footer .footer-images img { margin:0 10px; }
}

@media (min-width:1200px){
	.container-title-description { font-size:1em; max-width:1000px; }
	
	.top-menu, .top-menu .top-menu-bg .top-menu-content, .top-menu .top-menu-bg { height:80px; line-height:80px; }
	.top-menu .top-menu-content li a { padding:0 10px; }
	
	.top-menu .top-menu-content { font-size:1.5em; }
	.top-menu .top-menu-content > li > a { font-weight:bold; }
	
	.top-menu .top-menu-hotline { margin-top:20px; }
	.top-menu .top-menu-hotline span { display:inline-block; margin-right:5px; }
	
	.top-menu .top-menu-groups .top-menu-groups-content .top-menu-logo { margin-bottom:10px; }
	
	.top-menu .top-menu-groups { max-width:400px; }
	.top-menu .top-menu-groups .top-menu-groups-content { font-size:1em; padding-bottom:50px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul { line-height:50px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li { height:50px; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li.active, .top-menu .top-menu-groups .top-menu-groups-content ul li:hover { width:85%; }
	.top-menu .top-menu-groups .top-menu-groups-content ul li a { line-height:46px; font-weight:bold; }
	
	.introduction, .news { margin:0; }
	
	.introduction .introduction-image { margin-top:30px; }
	.introduction .introduction-content { padding-top:90px; }
	
	.products .boundary { max-width:unset; }
	.products .boundary .products-list { max-width:1250px; }
	.products .product-item .circle-image { width:80%; }
	.products .product-item .product-item-title { font-size:1.5em; margin-top:1em; }
	
	.products-intro { padding:60px 0; }
	.products-intro .table { max-width:1250px; margin:0 auto; }
	.products-intro .square-image { max-width:90px; }
	
	.news .news-item .news-name a { -webkit-line-clamp:3; }
	.news .news-item .news-description { -webkit-line-clamp:4; }
	
	.footer { padding:60px 0; }
	.footer .footer-menu { padding-top:140px; }
	.footer .footer-logo { display:inline-block; margin-top:5px; width:220px; }
	.footer .footer-contact h1 { margin-bottom:40px; }
	.footer .footer-contact ul { margin-left:0; font-size:1.3em; }
	
}

@media (min-width:1400px){
	.top-menu .top-menu-logo { height:65px; }
	
	.top-menu .top-menu-content { font-size:1.7em; }
	.top-menu .top-menu-content li ul { font-size:.9em; }
	
}