@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

*
{
 padding: 0;
 margin: 0;
 outline: 0;
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
}

body
{
 font-family: "Noto Sans", Arial, Helvetica, sans-serif;
 font-size: 12pt;
 overflow-x: hidden;
}

:target::before
{
 content: "";
 display: block;
 height: 80px;
 margin: -80px 0 0 0;
}

.clr
{
 clear: both;
}

.center
{
 text-align: center;
}

.right
{
 text-align: right;
}

.float-right
{
 float: right;
}

img
{
 vertical-align: baseline;
 max-width: 100%;
 height: auto !important;
 border: 0;
}

header
{
 width: 100%;
 height: 60px;
 background-color: #333;
 margin: 0 auto;
 position: fixed;
 z-index: 200;
}

#header-logo
{
 float: left;
 margin: 10px;
}

#header-logo img
{
 height: 100%;
}

#header-social
{
 float: right;
 margin: 1em 0;
 width: 65px;
}

#header-social > a
{
 background-image: url(../img/social-media-icons-2.png);
 display: inline-block;
 width: 24px;
 height: 24px;
 text-indent: -9999px;
 padding: 0;
 margin: 0 2px;
 opacity: .7;
}

#header-social > a:hover
{
 opacity: 1;
}

#header-social > a.facebook
{
 background-position: 0 -24px;
}

#header-social > a.contact
{
 background-position: 0 0;
}

#header-social > a.lang_hu
{
 background-position: 0 -48px;
}

#header-social > a.lang_en
{
 background-position: 0 -72px;
}

#search
{
 display: none;
 width: 100%;
 text-align: center;
}

#search input
{
 width: 90%;
 margin: 0 auto;
 padding: 10px;
 border: 1px solid #333;
}

#search-button
{
 background-image: url(../img/search-icon.png);
 float: right;
 display: inline-block;
 width: 24px;
 height: 24px;
 text-indent: -9999px;
 padding: 0;
 margin: 1em 10px 1em 0;
 opacity: .7;
 cursor: pointer;
}

#search-button:hover
{
 opacity: 1;
}

#topmenu-h {display: none; float: right; margin: 10px;}

#topmenu > ul
{
 list-style: none;
 text-align: center;
 margin: 0 auto;
}

#topmenu > ul > li
{
 display: inline-block;
 color: #fff;
 font-size: 14px;
 position: relative;
 padding: 10px 0;
}

#topmenu a,
#topmenu span
{
 display: block;
 padding: 10px 8px;
 color: #fff;
 text-decoration: none;
}

#topmenu span.topmenu-hassub
{
 display: none;
}

#topmenu > ul > li > ul
{
 list-style: none;
 display: none;
 position: absolute;
 left: -2em;
 top: 100%;
 background-color: #fff;
 border-top: 2px solid #409acc;
 padding: 1em 8px 2em 8px;
 -webkit-box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.65);
 -moz-box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.65);
 box-shadow: 0px 7px 15px -5px rgba(0,0,0,0.65);
}

#topmenu > ul > li:hover > ul
{
 display: block;
}

#topmenu > ul > li > ul > li
{
 font-weight: normal;
 margin: 0 0 5px 0;
 padding: .25em 4em .25em 2em;
 text-align: left;
 white-space: nowrap;
}

#topmenu > ul > li > ul > li:last-child
{
 border-bottom: 0;
}

#topmenu > ul > li > ul > li > a
{
 height: auto;
 line-height: 15px;
 color: #000;
 position: relative;
 padding: 10px 0;
}

#topmenu > ul > li > ul > li:hover > a
{
 text-decoration: none;
 color: #4088cc;
}

#topmenu > ul > li > ul > li > a:after
{
 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: -1px;
 width: 0;
 height: 1px;
 background: #4088cc;
 transition: width 0.3s ease 0s;
}

#topmenu > ul > li > ul > li:hover > a:after
{
 width: 100%;
}


#content,
.content
{
 width: 90%;
 max-width: 980px;
 margin: 1em auto 0 auto;
}

img.fullwidth
{
 width: 100%;
}

a
{
 transition: color 400ms;
 color: #333;
}

a:hover
{
 transition: color 400ms;
 color: #409acc;
}

h1
{
 font-family: "Roboto Condensed", Arial, sans-serif;
 font-weight: 700;
 font-size: 450%;
 margin-bottom: .5em;
}

h2
{
 font-family: "Roboto Condensed", Arial, sans-serif;
 font-weight: 400;
 font-size: 250%;
 margin-bottom: .5em;
 color: #09c;
}

h3
{
 font-family: "Roboto Condensed", Arial, sans-serif;
 font-weight: 400;
 font-size: 200%;
 margin-bottom: .5em;
}

p
{
 margin-bottom: 1em;
}

#content ul,
#content ol,
.content ul,
.content ol
{
 margin-left: 1.5em;
 display: inline-block;
}

small,
.small
{
 font-size: 80%;
}

#hero
{
 pointer-events: none;
 background-color: #224356;
 width: 100%;
 height: 600px;
 -moz-transform: skewY(-4deg);
 -o-transform: skewY(-4deg);
 -ms-transform: skewY(-4deg);
 -webkit-transform: skewY(-4deg);
 transform: skewY(-4deg);
 margin-bottom: 100px;
 position: relative;
}

#hero-background
{
 position: absolute;
 width: 100%;
 height: 100%;
 background-size: cover;
 overflow: hidden;
}

#hero-background > div
{
 width: 100%;
 height: 100%;
 background-size: cover;
 -moz-transform: skewY(4deg);
 -o-transform: skewY(4deg);
 -ms-transform: skewY(4deg);
 -webkit-transform: skewY(4deg);
 transform: skewY(4deg);
 overflow: hidden;
}

#hero.nobackground:before
{
 opacity: 0.15;
 background: -moz-radial-gradient(center,ellipse contain,#fff 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%);
 background: -webkit-radial-gradient(center,ellipse contain,#fff 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%);
 background: radial-gradient(ellipse closest-side at center,#ffffff 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color',endColorstr='$color',GradientType=1);
 bottom: -70%;
 content: "";
 display: block;
 height: 160%;
 left: 25%;
 position: absolute;
 width: 50rem;
 box-sizing: border-box;
}

#hero.nobackground:after
{
 background: linear-gradient(to left,transparent,rgba(0,0,0,0.6));
 content: "";
 height: 100%;
 left: 0;
 min-width: 60%;
 position: absolute;
 top: 0;
 width: 43.75rem;
 z-index: 1;
 box-sizing: border-box;
}

#hero-image
{
 width: 40%;
 max-height: 100%;
 position: absolute;
 right: 5%;
 bottom: -5%;
 -moz-transform: skewY(4deg);
 -o-transform: skewY(4deg);
 -ms-transform: skewY(4deg);
 -webkit-transform: skewY(4deg);
 transform: skewY(4deg);
 z-index: 100;
}

#hero-text
{
 pointer-events: auto;
 position: absolute;
 top: 50%;
 -moz-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%) skewY(4deg);
 transform-style: preserve-3d;
 color: #fff;
 left: 10%;
 right: 10%;
 z-index: 110;
}

#hero-text > h4,
#hero-text > p
{
 max-width: 50%;
}

#hero-text.with-hero-image > h4,
#hero-text.with-hero-image > p
{
 max-width: 100%;
}

#hero-text.with-hero-image
{
 max-width: 40%;
}

#hero-text > h4
{
 text-transform: uppercase;
 margin-bottom: .5em;
}

#hero-text > p
{
 line-height: 1.6em;
}

#footer-wrapper
{
 background-color: #222;
 width: 100%;
 margin-top: 2em;
 padding: 2em 0;
}

footer
{
 max-width: 980px;
 margin: 0 auto;
 color: #fff;
 font-size: 80%;
}

footer a
{
 text-decoration: none;
 color: #fff;
}

#footer-container
{
 color: #ccc;
 text-align: center;
 line-height: 2em;
}

.maincat-image
{
 float: right;
 max-width: 40%;
 margin: 0 0 40px 60px;
}

.maincat-products
{
 position: relative;
 margin-top: 2em;
}

/*
.maincat-products.maincat-separator:before
{
 position: absolute;
 display: block;
 box-sizing: border-box;
 content: "";
 left: 50%;
 bottom: 0;
 top: -3em;
 width: 100vw;
 padding: 0;
 transform: translateX(-50%);
 z-index: -1;
 background: #fff;
 background: linear-gradient(0deg, rgba(220,220,220,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);
}
*/

.content-list-item
{
 display: inline-block;
 vertical-align: top;
 width: 47.5%;
 margin-right: 5%;
 margin-bottom: 20px;
 border: 1px solid #222;
 padding: 10px;
}

.content-list-item:nth-of-type(2n)
{
 margin-right: 0;
}

.content-list-item h3
{
 font-size: 18pt;
}

.content-list-item a
{
 text-decoration: none;
}

.product-list
{
 margin-bottom: 80px;
}

#product-list > div.product,
.product-list > div.product
{
 display: inline-block;
 width: 300px;
 height: 320px;
 position: relative;
 margin: 0 10px 4em 10px;
 text-align: center;
 vertical-align: top;
}

#product-list > div.product > div.product-description a,
.product-list > div.product > div.product-description a
{
 font-family: "Roboto Condensed", Arial, sans-serif;
 font-weight: 400;
 font-size: 16pt;
 text-decoration: none;
 color: #333;
}

#product-list > div.product > div.product-description a:hover,
.product-list > div.product > div.product-description a:hover
{
 color: #409acc;
}
/*
.product-image
{
 width: 180px;
}

.product-image img
{
 width: 100%;
}
*/

.product-more-button
{
 position: absolute;
 bottom: 0;
 display: block;
 width: 100%;
 text-align: center;
 padding: .5em 2em;
 margin: 0 auto;
 color: #fff;
 text-decoration: none;
 background-color: #ff8d1d;
 transition: background-color 400ms;
}

.product-more-button:hover
{
 color: #fff;
 background-color: #ffa750;
 transition: background-color 400ms;
}

.catalogue-view-all-button
{
 display: inline-block;
 padding: .5em 3em;
 position: relative;
 width: auto;
 border: 2px solid #666;
 border-radius: 50px;
 padding: 10px 30px;
 text-decoration: none;
 transition: background-color 400ms;
}

.catalogue-view-all-button:hover
{
 color: #000;
 background-color: #ccc;
 transition: background-color 400ms;
}

#product-pdf
{
 float: right;
 margin: 0 35px 1em 1em;
}

#product-image
{
 float: left;
 max-width: 760px;
}

#product-image-thumbs
{
 float: right;
 margin-left: 20px;
 max-width: 200px;
}

#product-image-thumbs > img
{
 margin: 0 10px 10px 0;
 cursor: pointer;
}

ul#product-materials
{
 list-style: none;
 margin-left: 0;
}

ul#product-materials a
{
 text-decoration: none;
 color: #039;
}

ul#product-materials a:hover
{
 color: #69f;
}

#slider > li > img
{
 width: 100%;
}

.product-youtube
{
 width: 48%;
 min-width: 320px;
 margin: 0 10px 10px 0;
 float: left;
}

nav.product-nav
{
 width: 100%;
 background-color: #eee;
 border-top: 4px solid #4088cc;
 text-align: center;
 margin-bottom: 2em;
}

nav.product-nav > ul
{
 list-style: none;
}

nav.product-nav > ul > li
{
 display: inline-block;
 vertical-align: top;
 margin: 0 1em;
 padding: .75em 1em;
}

nav.product-nav > ul > li > a
{
 font-size: 12pt;
 text-decoration: none;
}

.yt-container
{
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}

#slider > li.youtube
{
 width: 100%;
 height: 600px;
# padding-top: 56.25%;
}

#slider > li.youtube > iframe
{
 width: 100%;
 height: 100%;
}

.yt-container iframe
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

ul.product-downloads
{
 list-style: none;
 margin: 0 0 40px 0 !important;
}

ul.product-downloads > li img
{
 display: inline-block;
 vertical-align: middle;
 height: 2em !important;
 margin-right: .5em;
}

ul.product-downloads > li > a
{
 text-decoration: none;
}

#content iframe,
.content iframe
{
 max-width: 100%;
}

#breadcrumb
{
 font-size: 80%;
 text-transform: uppercase;
 margin-bottom: 1em;
}

#breadcrumb a
{
 text-decoration: none;
 color: #039;
}

.banner-ornaments .orange-left{fill:rgba(255,141,29,0.7)}
.banner-ornaments .green-left{fill:rgba(52,178,156,0.4)}
.banner-ornaments .lightblue-left{fill:rgba(64,154,204,0.6)}
.banner-ornaments .gray-left{fill:rgba(103,100,97,0.2)}
.banner-ornaments .bluegreen-right{fill:rgba(48,156,163,0.4)}
.banner-ornaments .green-right{fill:rgba(52,178,156,0.4)}
.banner-ornaments .lightblue-right{fill:rgba(64,154,204,0.6)}
.banner-ornaments .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments .svg-container-inner,.view-mode-top_banner .banner-ornaments .svg-container-inner{height:0}
.banner-ornaments.banner-ornaments-left,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-left,.view-mode-top_banner .banner-ornaments.banner-ornaments-left{max-width:21.25rem;width:30%}
.banner-ornaments.banner-ornaments-left .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-left .svg-container-inner,.view-mode-top_banner .banner-ornaments.banner-ornaments-left .svg-container-inner{padding-top:58.25%;-moz-transform:translateY(-69.4%);-o-transform:translateY(-69.4%);-ms-transform:translateY(-69.4%);-webkit-transform:translateY(-69.4%);transform:translateY(-69.4%)}
.banner-ornaments.banner-ornaments-right,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-right,.view-mode-top_banner .banner-ornaments.banner-ornaments-right{max-width:12.5rem;right:0;width:20%}
.banner-ornaments.banner-ornaments-right .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-right .svg-container-inner,.view-mode-top_banner .banner-ornaments.banner-ornaments-right .svg-container-inner{padding-top:93.65%;-moz-transform:translateY(-58.5%);-o-transform:translateY(-58.5%);-ms-transform:translateY(-58.5%);-webkit-transform:translateY(-58.5%);transform:translateY(-58.5%)}
.mobile-content,.block-views-block-smart-banner-block-1 .mobile-content,.view-mode-top_banner .mobile-content{margin-top:10vw}
.banner-ornaments,.block-views-block-smart-banner-block-1 .banner-ornaments,.view-mode-top_banner .banner-ornaments{backface-visibility:hidden;bottom:0;position:absolute}
.banner-ornaments .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments .svg-container-inner,.view-mode-top_banner .banner-ornaments .svg-container-inner{height:0}
.banner-ornaments.banner-ornaments-left,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-left,.view-mode-top_banner .banner-ornaments.banner-ornaments-left{max-width:21.25rem;width:30%}
.banner-ornaments.banner-ornaments-left .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-left .svg-container-inner,.view-mode-top_banner .banner-ornaments.banner-ornaments-left .svg-container-inner{padding-top:58.25%;-moz-transform:translateY(-69.4%);-o-transform:translateY(-69.4%);-ms-transform:translateY(-69.4%);-webkit-transform:translateY(-69.4%);transform:translateY(-69.4%)}
.banner-ornaments.banner-ornaments-right,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-right,.view-mode-top_banner .banner-ornaments.banner-ornaments-right{max-width:12.5rem;right:0;width:20%}
.banner-ornaments.banner-ornaments-right .svg-container-inner,.block-views-block-smart-banner-block-1 .banner-ornaments.banner-ornaments-right .svg-container-inner,.view-mode-top_banner .banner-ornaments.banner-ornaments-right .svg-container-inner{padding-top:93.65%;-moz-transform:translateY(-58.5%);-o-transform:translateY(-58.5%);-ms-transform:translateY(-58.5%);-webkit-transform:translateY(-58.5%);transform:translateY(-58.5%)}


/* MEDIA QUERIES */

@media screen and (max-width: 1100px)
{
 #topmenu > ul > li {font-size: 12px;}
 #topmenu a, #topmenu span {padding: 10px 5px;}
}

@media screen and (max-width: 1000px)
{
 #topmenu-h {display: block; cursor: pointer;}
 #topmenu > ul {display: block; position: fixed; height: 100%; width: 300px; top: 60px; left: 100%; transition: all; text-align: left; background-color: #fff; margin: 0; padding: 10px;}
 #topmenu > ul.show {right: 0; left: auto; transition: all; box-shadow: -10px 0 40px -10px #333;}
 #topmenu > ul > li {display: block; border-bottom: 1px solid #eee; font-size: 16px;}
 #topmenu > ul a, #topmenu > ul span {color: #333;}
 #topmenu > ul > li:hover > ul {display: none;}
 #topmenu .submenu {z-index: 1;}
 #topmenu span.topmenu-hassub {display: block; position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: url(../img/hassub.gif) center no-repeat; cursor: pointer;}
 #search-button {margin: 1em 0;}

 #topmenu > ul > li {position: relative;}
 #topmenu > ul > li:after {content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #4088cc; transition: width 0.3s ease 0s;}
 #topmenu > ul > li:hover:after {width: 100%;}
# #topmenu > ul > li.hassub {background: #eee url(../img/hassub.gif) right 20px top 12px no-repeat; cursor: pointer;}

 #hero-text {max-width: 100%;}
 #hero-text > h4, #hero-text > p {max-width: 100%;}
}

@media screen and (max-width: 800px)
{
 .maincat-image {margin: 0 0 20px 20px;}
}

@media screen and (max-width: 600px)
{
 #content, .content { margin: -50px auto 0 auto;}
 #hero {height: 400px;}
 #hero-text {max-width: 70%;}
 h1 {font-size: 200%;}
 h2 {font-size: 160%;}
 h3 {font-size: 125%;}
 .content-list-item {display: block;  width: 100%; margin-right: 0; margin-bottom: 20px;}
}

@media screen and (max-width: 480px)
{
 #header-social {display: none;}
 #hero {height: 400px;}
 #hero-text {max-width: 90%;}
}