@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(/app/fonts/roboto-v20-latin-300.6a8b0e65.eot);src:local("Roboto Light"),local("Roboto-Light"),url(/app/fonts/roboto-v20-latin-300.6a8b0e65.eot?#iefix) format("embedded-opentype"),url(/app/fonts/roboto-v20-latin-300.4d8f8086.woff2) format("woff2"),url(/app/fonts/roboto-v20-latin-300.6c1bc461.woff) format("woff"),url(/app/fonts/roboto-v20-latin-300.acee7e2c.ttf) format("truetype"),url(/app/img/roboto-v20-latin-300.e38791bc.svg#Roboto) format("svg")}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:url(/app/fonts/roboto-v20-latin-500.54a611fa.eot);src:local("Roboto Medium"),local("Roboto-Medium"),url(/app/fonts/roboto-v20-latin-500.54a611fa.eot?#iefix) format("embedded-opentype"),url(/app/fonts/roboto-v20-latin-500.1dfbc3db.woff2) format("woff2"),url(/app/fonts/roboto-v20-latin-500.e21fe97f.woff) format("woff"),url(/app/fonts/roboto-v20-latin-500.b854c920.ttf) format("truetype"),url(/app/img/roboto-v20-latin-500.9eddb24c.svg#Roboto) format("svg")}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(/app/fonts/roboto-v20-latin-700.f6ff6848.eot);src:local("Roboto Bold"),local("Roboto-Bold"),url(/app/fonts/roboto-v20-latin-700.f6ff6848.eot?#iefix) format("embedded-opentype"),url(/app/fonts/roboto-v20-latin-700.12893bfc.woff2) format("woff2"),url(/app/fonts/roboto-v20-latin-700.02633003.woff) format("woff"),url(/app/fonts/roboto-v20-latin-700.472b7f34.ttf) format("truetype"),url(/app/img/roboto-v20-latin-700.6379e2ee.svg#Roboto) format("svg")}


:root {
--color1:#09f;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{color:#333;font:16px/1 'Roboto',arial;font-weight:300}
input,textarea,button{font:16px/1 'Roboto',arial;font-weight:300}
*:focus{outline:none;}

a{cursor:pointer}
p a,
li a{color:var(--color1);text-decoration:none}
p a:hover,
li a:hover{color:var(--color1);text-decoration:underline}

h1{margin:0 0 10px;font-size:30px;font-weight:300;line-height:1.25}
h2{margin:15px 0 10px;font-size:30px;font-weight:300;line-height:1.25}
h3{margin:15px 0 10px;font-size:24px;font-weight:300;line-height:1.25}
p{margin:10px 0 0;font-size:16px;font-weight:300;line-height:1.5}
ul,ol{margin:0 0 0 1em}
li{margin:10px 0 0;line-height:1.5}

@media (max-width: 1000px){
h1{font-size:24px}
h2{font-size:24px}
}


.inlineBlock{display:inline-block}



/* Header START */

.header{position:absolute;top:0;left:0;z-index:1;display:flex;width:100%;}

.headerLogo{display:flex;align-items:center;padding:20px 20px 15px;margin:0 auto 0 0;}
.headerLogoText{display:block;height:35px;}
.headerLogoTextWhite{display:none;}

.headerMenu{display:inline-flex;padding:15px 15px 0 0}
.headerMenuButton{position:relative;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 15px;font-size:20px;font-weight:300;text-decoration:none;color:#333;}
.headerMenuButton.active{color:var(--color1)}
.headerLogin{display:inline-flex;align-items:center;height:50px;margin:15px 15px 0 0;padding:0 15px;background:var(--color1);border-radius:3px;color:#fff;font-size:20px;font-weight:500;text-decoration:none;white-space:nowrap}

.headerHamburger{display:none;}

@media (max-width: 1080px){
.showPhoneMenu .header{position:fixed;height:100%}
.headerLogo{z-index:10;height:55px;padding:15px 15px 0}
.headerLogoText{height:35px;}

.headerLogin{display:none}

.headerMenu{position:fixed;top:0;left:-200vw;display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background:#fafafa;opacity:0;transition:opacity .5s}
.showPhoneMenu .headerMenu{left:0;opacity:1;padding:0;}
.showPhoneMenu .headerMenuButton{display:flex}

.headerHamburger{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;margin:15px 15px 0 0;}

.headerHamburgerIcon,
.headerHamburgerIcon:before,
.headerHamburgerIcon:after{position:absolute;display:block;height:3px;width:30px;background:#999;}
.headerHamburgerIcon:before{content:"";margin:-8px 0 0;}
.headerHamburgerIcon:after{content:"";margin:8px 0 0;}

}

@media (max-width: 600px){
.headerLogoText{height:auto;width:100%}
}

@media (max-width: 400px){
}

/* Header END */



/* Footer START */

.footer{display:flex;align-items:flex-end;flex-wrap:wrap;padding:12px 20px;background:#333;color:#ccc;font-size:14px;line-height:1.5}
.footer a{color:#ccc;text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footerLeft{min-width:300px;margin:0 auto 0 0;}
.footerLeftHeading{font-weight:500}
.footerRight{text-align:center}
.footerRight svg{display:block;width:250px;margin:10px auto 0}
.footerRight svg *{fill:#ccc}


.footerLeftContacts{margin:16px 0;}

.footerPhoneDot{padding:0 7px;}

@media (max-width: 999px){
.footer{display:block;padding:30px 0;line-height:1.5}
.footerLeft{margin:0;text-align:center}
.footerPhoneDot{display:none;}
.footerPhoneBlock{display:block;}
.footerRight{margin:20px 0 0;justify-content:center}
}

/* Footer END */



/* Home START */

.home{position:relative;display:flex;align-items:center;justify-content:center;height:80vh;background:linear-gradient(to right bottom, #e5e5e5 25%, transparent),radial-gradient(circle, transparent 50%, #e5e5e5);}
.homeImg{position:absolute;bottom:0;max-height:85%;max-width:50%;margin:0 0 0 450px}
.homeImgLandscape,
.homeImgPortrait{position:absolute;width:100%;height:100%;object-fit:cover;}
.homeContent{position:absolute;}
.homeContentHeading{font-size:40px;line-height:1.2}
.homeContentButtons{display:inline-flex;}
.homeContentButtonsGo,
.homeContentButtonsLogin{display:inline-flex;align-items:center;height:50px;margin:15px 0 0;padding:0 20px;border-radius:3px;background:var(--color1);color:#fff;font-size:20px;font-weight:500;text-decoration:none}
.homeContentButtonsLogin{margin-left:15px;border:2px solid var(--color1);background:#fff;color:var(--color1)}
.homeContentButtonsLogin{display:none}

@media (orientation: landscape){
.homeContent{left:10%;}
}

@media (orientation: portrait){
.home{height:80vh;}
.homeImg{right:0;max-width:90%;margin:auto}
.homeContent{top:20%;text-align:center}
}

@media (max-width: 1300px){
}

@media (orientation: landscape) and (max-width: 1180px){
.home{height:60vh;}
}

@media (max-width: 1000px){
.home{height:100vh;}
}

@media (max-width: 1080px){
.homeContentButtonsLogin{display:inline-flex;}
.homeContentHeading{font-size:24px;}
}

.homeHighlight{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:1px;min-height:20vh;background:#e5e5e5;box-shadow:0 0 10px rgba(0,0,0,.25)}
.homeHighlight>*{display:flex;align-items:center;padding:20px;background:#f2f2f2}
.homeHighlight img{height:80px;margin:0 15px 0 0;}
.homeHighlight h2{margin:0 0 10px;font-size:24px}
.homeHighlight span{display:inline-block}

@media (max-width: 1300px){
.homeHighlight img{height:80px;margin:0 10px 0 0;}
.homeHighlight h2{font-size:20px;}
}

@media (max-width: 1199px){
.homeHighlight{grid-template-columns:1fr 1fr;min-height:40vh;}
}

@media (max-width: 599px){
.homeHighlight{grid-template-columns:1fr}
}

/* Home END */




/* Order START */

.order{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:100px 50px;background:url("../img/bli-kund.png") no-repeat left bottom / auto 20%, radial-gradient(circle, transparent 50%, #e5e5e5);}

.orderContent{padding:0 0 30px;text-align: center;}
.orderPlans{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:1px;margin:auto;text-align:left;background:#e5e5e5;box-shadow:0 5px 10px rgba(0,0,0,.1)}
.orderPlansBox{position: relative;height:100%;padding:20px;background:#fff;}
.orderPlansBox:nth-child(1){border-top:5px solid #e5e5e5;}
.orderPlansBox:nth-child(2){border-top:5px solid var(--color1);}
.orderPlansBox:nth-child(3){border-top:5px solid #000;}
.orderPlansBoxHeading{margin:0;font-size:30px;font-weight:300;line-height:1}
.orderPlansBoxIcon{position: absolute;top:20px;right:20px;height:50px}
.orderPlansBoxIcon svg{height:30px}
.orderPlansBoxDescription{margin:20px 0 0}
.orderPlansBoxPrice{margin:20px 0 0;font-size:30px;font-weight:700}
.orderPlansBoxButton{height:50px;margin:20px 0 0;display: flex;justify-content: center;align-items: center;background:var(--color1);color:#fff;border-radius:3px;font-size:20px;font-weight:500;text-decoration:none}
.orderPlansBoxChecks{margin:20px 0 0;}
.orderPlansBoxChecks>*{display:flex;align-items: center;margin:10px 0 0}
.orderPlansBoxChecks svg{height:15px;margin:0 10px 0 0;}

@media (max-width: 1080px){
.order{background:url("../img/bli-kund.png") no-repeat left bottom / auto 150px,radial-gradient(circle, transparent 50%, #e5e5e5);}
.orderContent h1{font-size:24px}
.order{padding:100px 30px 170px}
.orderPlans{grid-template-columns:1fr;grid-gap:0;}
}

/* Order END */



/* Product START */

.product{grid-template:
"productContent productImg"
"productBoxes productBoxes"
}

.product{display:grid;align-items:flex-start;justify-content:center;grid-row-gap:30px;padding:150px 30px 40px;position:relative;background:radial-gradient(circle, transparent 50%, #e5e5e5);}
.productImg{grid-area:productImg;align-self:center;width:100%;max-width:540px;margin:0 auto;}
.productContent{grid-area:productContent;max-width:500px;text-align:justify;margin:0 auto;}/*480px*/
.product h1{margin:0 0 10px;font-size:30px;font-weight:300;text-align:left}
.product h2{margin:15px 0 10px;font-size:30px;font-weight:300;text-align:left}
.product h3{margin:0 0 10px;font-size:24px;font-weight:300;}

.productBoxes{grid-area:productBoxes;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:40px;justify-content:center;flex-wrap:wrap;max-width:1040px;}
.productBoxes>*{padding:20px;text-align:center;background:#fafafa;border:1px solid #e5e5e5;box-shadow:0 0 10px rgba(0,0,0,.25)}
.productBoxes img{width:80px;margin:0 0 10px;}

@media (max-width: 1080px){
.productBoxes{grid-template-columns:1fr 1fr;}
.product{grid-template:
"productImg"
"productContent"
"productBoxes"
}
}

@media (max-width: 900px){
.product h1,
.product h2{font-size:24px;line-height:1.25;text-align:center}
}

@media (max-width: 600px){
.productBoxes{grid-template-columns:1fr;}
}

/* Product END */



/* About START */

.about{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:100px 30px 150px;background:url("../img/om-oss.png") no-repeat left bottom / auto 20%,radial-gradient(circle, transparent 50%, #e5e5e5);}/*#e1ebec*/


.aboutContent{max-width:630px;text-align:justify}
.aboutContent h1,
.aboutContent h2{text-align:center}

.aboutLogo{position:absolute;bottom:40px;right:40px;width:20%;}
.aboutLogo svg{display:block}

@media (max-width: 900px){

.about{background:url("../img/om-oss.png") no-repeat left bottom / auto 120px,radial-gradient(circle, transparent 50%, #e5e5e5);}

.aboutLogo{position:static;display:block;width:80%;margin:30px auto 0;}

}

/* About END */



/* Contact START */
.contact{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:100px 50px 150px;background:url("../img/kontakt.png") no-repeat left bottom 20px /auto 20%,radial-gradient(circle, transparent 50%, #e5e5e5);}
.contactText{font-size:30px;font-weight:300;line-height:1.5;text-align:center}
.contactText a{text-decoration:none;color:var(--color1);font-weight:300}
.contactText a:hover{text-decoration:underline;}

.contactForm{display:flex;flex-wrap:wrap;max-width:780px;padding:10px;margin:0 auto;}
.contactForm label{flex:1;min-width:50%;padding:10px;}
.contactForm span{display:flex;margin:0 0 5px;font-size:16px}
.contactForm input{height:40px;width:100%;padding:0 10px;border-radius:3px;border:1px solid #e5e5e5;font-weight:300}
.contactForm textarea{height:100px;width:100%;padding:10px;border-radius:3px;border:1px solid #e5e5e5;line-height:1.5;font-weight:300}
.contactForm button{display:flex;align-items:center;justify-content:center;height:50px;width:100%;margin:0 10px;border:0;border-radius:3px;background:var(--color1);color:#fff;font-size:20px;font-weight:500;cursor:pointer}

span.contactFormSucces,
span.contactFormError{display:none;min-width:80%;width:100%;margin:0 10px 10px;padding:10px;border-radius:3px;border:1px solid #e5e5e5;background:#f2f2f2;}
.contactFormSucces.show{display:block}
.contactFormError.show{display:block}

@media (max-width: 1080px){
.contactText{font-size:24px;}
}

@media (max-width: 600px){
.contact{background:url("../img/kontakt.png") no-repeat left bottom 20px /auto 110px,radial-gradient(circle, transparent 50%, #e5e5e5);}
.contactForm label{min-width:100%;}
}

/* Contact END */



/* Terms START */

.terms{display:flex;align-items:center;justify-content:center;padding:100px 50px;background:radial-gradient(circle, transparent 50%, #f2f2f2);}
.termsContent{max-width:610px;text-align:justify}
.termsContent h1{margin:20px 0 10px;text-align:left}
.termsContent h2{margin:20px 0 10px;font-size:22px;text-align:left}
.terms hr{margin:20px 0;border:0;border-top:1px solid #e5e5e5;}

/* Terms END */





