/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /* Created on : Sep 25, 2020, 12:28:45 PM Author : gasper */ html{ -ms-overflow-style: -ms-autohiding-scrollbar; scroll-behavior: smooth; } /* ****FONTS**** */ @font-face { font-family: 'Larsseit'; src: url('../fonts/Larsseit.otf') format('opentype'); } @font-face { font-family: 'LarsseitBold'; src: url('../fonts/Larsseit-Bold.otf') format('opentype'); } @font-face { font-family: 'LarsseitThin'; src: url('../fonts/Larsseit-Thin.otf') format('opentype'); } @font-face { font-family: 'LarsseitLight'; src: url('../fonts/Larsseit-Light.otf') format('opentype'); } @font-face { font-family: 'LarsseitMedium'; src: url('../fonts/Larsseit-Medium.otf') format('opentype'); } a:focus{ text-decoration: none; } body{ font-family: 'Larsseit', sans-serif; font-size: 16px; color: #000000; background-color: #ffffff; overflow-x: hidden !important; letter-spacing: 0.15px; } h1, h2, h3, p{ margin: 0; padding: 0; } *:focus { outline: 0; outline: none; } a:focus { outline:none !important; } button{ border: none; } a:hover{ text-decoration: none; } img:focus { outline:none !important; } label{ font-weight: normal; font-size: 13px; } .results__lazy{ display: none; } .topNav{ height: 30px; padding-top: 5px; background-color: #013b2c; color: #ffffff; } .topNav{ color: #ffffff; font-size: 11px; letter-spacing: 0.82px; font-family: 'LarsseitLight', sans-serif; transition: .3s; padding-top: 9px; padding-left: 10px; padding-right: 10px; } .topNav span{ margin-right: 20px; } .topNav a{ color: #ffffff; } .topNav:hover{ /* cursor: pointer;*/ } .shopCartMobile{ display: none; } .navbar.main-navbar{ background-color: transparent; padding-bottom: 45px; margin-top: 30px; transition: .3s; } .main-navbar .nav>li:last-child>a { background-color: #f5821e; padding-bottom: 13px; padding-right: 15px; padding-left: 13px; padding-top: 15px; margin-right: 0px; margin-left: 50px; margin-top: -2px; transition: .3s; } .main-navbar .nav>li>a { font-family: 'Larsseit', sans-serif; color: #ffffff; text-transform: uppercase; font-size: 14px; letter-spacing: 0.88px; padding-top: 10px; padding-bottom: 0px; margin-right: 35px; } .main-navbar .nav.navbar-right{ margin-top: 30px; } .navbar-brand>img { display: block; margin-top: 10px; margin-left: 10px; width: 120px; } .navbar.main-navbar.navbar-shrink{ margin-top: 0px; background-color: #346d43; padding-bottom: 15px; padding-left: 50px; } .navbar.main-navbar .navbar-nav > li > a:hover, .navbar.main-navbar .navbar-nav > li > a:focus { background: none; color: #f5821e; transition: .3s; } .navbar.main-navbar .navbar-nav > li > a.activeNav{ background: none; color: #f5821e; transition: .3s; } .navbar.main-navbar.pageNav{ background-color: #ffffff; margin-top: 0; transition: .3s; padding-top: 0px; padding-bottom: 15px; border-bottom: 1px solid #D3D3D3; } .navbar.main-navbar.pageNav.navbar-shrink{ padding-bottom: 10px; border-bottom: 1px solid #D3D3D3; } .navbar.main-navbar.pageNav .nav>li>a{ color: #013b2c; } .navbar.main-navbar.pageNav .nav>li>a:hover{ color: #f5821e; } .footer{ background-color: #013b2c; padding-top: 80px; padding-bottom: 30px; color: #ffffff; } .footer a{ color: #ffffff; transition: .3s; } .footer .footer-logo img{ width: 170px; height: auto; } .footer a:hover{ color: #f5821e; } .footer .social ul{ list-style: none; padding: 0; } .footer .social img{ height: 28px; width: 28px; } .footer .title{ font-family: 'LarsseitBold', sans-serif; font-size: 12px; letter-spacing: 1.03px; } .footer .text{ list-style: none; padding: 0px; margin: 0px; margin-top: 10px; font-size: 14px; font-family: 'LarsseitRegular', sans-serif; } .footer .text li{ line-height: 2; } .footer .payments{ margin-top: 20px; } .footer .payments img{ width: 35px; } .header{ background-size: cover; } .header .headerCard{ margin-top: 150px; width: 100%; } .header .headerCard .cardImage{ height: 400px; width: 100%; overflow: hidden; } .header .headerCard .cardImage img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; transition: .3s; } .header .headerCard .cardText{ width: 100%; padding-top: 20px; padding-bottom: 20px; border: 1px solid lightgray; background-color: #346d43; text-align: center; } .header .headerCard .cardText h5{ margin-top: 0; font-family: "Larsseit", sans-serif; color: #ffffff; font-size: 18px; line-height: 1.33; display: inline; position: relative; } .header .headerCard .cardText img{ position: absolute; right: 30px; bottom: 10px; } .header .headerCard:hover .cardImage img{ transform: scale(1.1); } .header .headerTitle{ margin-top: 40px; text-align: center; margin-bottom: 50px; } .header .headerTitle h1{ font-family: "LarsseitBold", sans-serif; font-size: 36px; color: #ffffff; } .header .headerTitle h5{ font-family: "LarsseitThin", sans-serif; font-size: 18px; color: #ffffff; } .actual{ padding-top: 80px; padding-bottom: 100px; background-color: #eeeeee; } .sectionTitle{ text-align: center; } .sectionTitle h5{ font-family: "LarsseitBold", sans-serif; color: #2c2c2c; font-size: 36px; } .sectionText{ margin-top: 30px; text-align: center; margin-bottom: 50px; } .sectionText p{ font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; line-height: 1.81; } .board{ margin-top: 40px; width: 33.3%; float: left; } .new{ padding: 20px; background-position: center; height: 350px; display: flex; transition: background-size .2s ease-in; -moz-transition: background-size .2s ease-in; -ms-transition: background-size .2s ease-in; -o-transition: background-size .2s ease-in; -webkit-transition: background-size .2s ease-in; background-size: 120%; } .new:hover { background-size: 130% } .notification1{ padding: 20px; height: 690px; background-color: #2c2c2c; display: flex; } .suggested{ padding: 20px; height: 350px; width: 100%; background-color: #346d43; display: flex; } .new1{ padding: 20px; background-position: center; height: 290px; width: 100%; display: flex; transition: background-size .2s ease-in; -moz-transition: background-size .2s ease-in; -ms-transition: background-size .2s ease-in; -o-transition: background-size .2s ease-in; -webkit-transition: background-size .2s ease-in; background-size: 140%; } .new1:hover { background-size: 150% } .call{ padding: 20px; height: 400px; background-color: #f5821e; } .notification{ padding: 20px; height: 560px; background-color: #2c2c2c; display: flex; } .sale{ padding: 20px; height: 480px; background-color: #ffffff; display: flex; } .board .notification h5, .board .suggested h5, .board .notification1 h5, .board .suggested h5, .board .new1 h5, .board .call h5{ margin-top: 0px; font-family: "LarsseitRegular", sans-serif; font-size: 12px; color: #ffffff; } .board .new h5{ margin-top: 0px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); font-family: "LarsseitRegular", sans-serif; font-size: 12px; color: #ffffff; } .board .sale h5{ margin-top: 0px; font-family: "LarsseitRegular", sans-serif; font-size: 12px; color: #013b2c; } .board .sale h3{ font-family: "LarsseitBold", sans-serif; font-size: 24px; line-height: 1.29; color: #2c2c2c; height: 100px; } .board .notification h3, .board .suggested h3, .board .notification1 h3, .board .suggested h3, .board .new1 h3, .board .call h3{ font-family: "LarsseitBold", sans-serif; font-size: 24px; line-height: 1.29; color: #ffffff; } .board .new h3{ font-family: "LarsseitBold", sans-serif; font-size: 24px; line-height: 1.29; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .board .call p{ font-family: "LarsseitThin", sans-serif; font-size: 24px; color: #ffffff; margin-top: 10px; } .board .sale p{ font-family: "LarsseitRegular", sans-serif; font-size: 12px; margin-top: 5px; color: #013b2c; } .board .notification1 p , .board .notification p{ font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #ffffff; margin-top: 30px; margin-bottom: 10px; } .board .notification ul{ color: #ffffff; font-family: "LarsseitThin", sans-serif; } .board .new .textBox{ position: relative; width: 100%; align-self: flex-end; } .board .new img{ align-self: flex-end; } .board .notification1 .textBox{ margin-top: 190px; width: 100%; } .board .notification1 img{ align-self: flex-end; } .board .suggested .textBox{ width: 100%; align-self: flex-end; } .board .suggested img{ align-self: flex-end; } .board .new1 .textBox{ position: relative; width: 100%; align-self: flex-end; } .board .new1 img{ align-self: flex-end; } .board .call .textBox{ margin-top: 90px; position: relative; } .board .notification .textBox{ margin-top: 20px; position: relative; width: 100%; } .board .notification img{ align-self: flex-end; } .board .sale .textBox{ margin-top: 80px; } .board .sale .imgBox{ margin-top: 30px; text-align: center; height: 80px; max-width: 100%; } .board .sale .imgBox img{ width: auto; height: 100%; } .board .sale img{ align-self: flex-end; } .forYou{ padding-top: 80px; padding-bottom: 80px; } .forYou .imageBox{ margin-top: 50px; position: relative; text-align: center; } .forYou .imageBox img{ width: 60%; height: auto; border-radius: 100%; } .forYou .notActive1{ width: 29px; height: 29px; position: absolute; left: 715px; top: 83px; display: none; cursor: pointer; } .forYou .active1{ width: 29px; height: 29px; position: absolute; left: 715px; top: 83px; } .forYou .notActive2{ width: 29px; height: 29px; position: absolute; top: 190px; left: 785px; cursor: pointer; } .forYou .active2{ width: 29px; height: 29px; position: absolute; top: 190px; left: 785px; display: none; } .forYou .notActive3{ position: absolute; top: 260px; left: 786px; height: 29px; width: 29px; cursor: pointer; } .forYou .active3{ position: absolute; top: 260px; left: 786px; height: 29px; width: 29px; display: none; } .forYou .notActive4{ position: absolute; top: 340px; left: 615px; height: 29px; width: 29px; cursor: pointer; } .forYou .active4{ position: absolute; top: 340px; left: 615px; height: 29px; width: 29px; display: none; } .forYou .notActive5{ position: absolute; top: 344px; left: 460px; height: 29px; width: 29px; cursor: pointer; } .forYou .active5{ position: absolute; top: 344px; left: 460px; height: 29px; width: 29px; display: none; } .forYou .activeBox1{ position: absolute; top: 10px; left: 730px; } .forYou .activeBox2{ position: absolute; top: 190px; left: 950px; display: none; } .forYou .activeBox3{ position: absolute; top: 257px; left: 940px; display: none; } .forYou .activeBox4{ position: absolute; top: 338px; left: 910px; display: none; } .forYou .activeBox5{ position: absolute; top: 344px; left: 120px; display: none; } .forYou .activeBox1 h5,.forYou .activeBox2 h5, .forYou .activeBox3 h5, .forYou .activeBox4 h5, .forYou .activeBox5 h5{ font-family: "LarsseitBold", sans-serif; font-size: 12px; color: #2c2c2c; margin-bottom: 0px; } .forYou .activeBox1 p, .forYou .activeBox2 p,.forYou .activeBox3 p, .forYou .activeBox4 p, .forYou .activeBox5 p{ font-family: "LarsseitThin", sans-serif; font-size: 12px; color: #2c2c2c; display: inline-block; } .forYou .activeBox1 img, .forYou .activeBox2 img, .forYou .activeBox3 img , .forYou .activeBo4 img, .forYou .activeBox5 img{ display: inline; } .forYou .activeBox1Border{ position: absolute; height: 30px; border-right: solid 1px #7ab51e; top: 53px; left: 729px; } .forYou .activeBox2Border{ position: absolute; width: 125px; border-top: solid 1px #7ab51e; top: 204px; left: 812px; display: none; } .forYou .activeBox3Border{ position: absolute; width: 113px; border-top: solid 1px #7ab51e; top: 274px; left: 814px; display: none; } .forYou .activeBox4Border{ position: absolute; width: 255px; border-top: solid 1px #7ab51e; top: 355px; left: 642px; display: none; } .forYou .activeBox5Border{ position: absolute; width: 278px; border-top: solid 1px #7ab51e; top: 358px; left: 184px; display: none; } .calculator{ padding-top: 80px; background-color: #eeeeee; padding-bottom: 80px; } .calculator .calculatorCard{ background-color: #ffffff; width: 100%; height: auto; position: relative; transition: all .3s; } .calculator a:hover .calculatorCard{ box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.15); text-decoration: none!important; } .calculator .calculatorCard .text{ padding-left: 20px; padding-right: 60px; } .calculator .calculatorCard .text h5{ font-family: "LarsseitBold", sans-serif; color: #2c2c2c; line-height: 1.36; font-size: 14px; padding-bottom: 20px; padding-top: 150px; position: relative; text-transform: uppercase; } .calculator .calculatorCard img{ position: absolute; top: 155px; left: 205px; width: auto; height: auto; } .configuratorImg{ text-align: center; width: 100%; max-width: 100%; height: 150px; position: absolute; top: -10px; } .configuratorImg img{ width: auto; height: 100%; } /*.calculator .plant{ position: absolute; top: -20px; left: 80px; } .calculator .grass{ position: absolute; top: -20px; left: 60px; } .calculator .roof{ position: absolute; top: 0px; left: 80px; } .calculator .wall{ position: absolute; top: 0px; left: 70px; }*/ .slider{ padding-top: 50px; padding-bottom: 30px; } .sliderLanding .imgBox{ height: 100px; } .sliderLanding .imgBox img{ height: 100%; width: auto; max-width: 85%; margin: 0 auto; } .subpageHeader{ height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; } .subpageHeader h1{ font-size: 36px; font-family: 'LarsseitBold', sans-serif; padding-top: 22vh; color: #ffffff; margin-bottom: 3vh; } .subpageHeader h2{ font-family: "LarsseitThin", sans-serif; font-size: 18px; color: #ffffff; } .logisticsBody{ background-color: #eeeeee; padding-top: 100px; padding-bottom: 110px; font-family: "LarsseitThin", sans-serif; } .logisticsBody p{ font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; line-height: 1.81; } .logisticsBody p:nth-of-type(4){ margin-bottom: 0; } .logisticsBody ul{ list-style: none; padding-left: 0; line-height: 1.81; margin-bottom: 30px; } .logisticsBody li{ font-family: "LarsseitThin", sans-serif; } .logisticsBody img{ position: absolute; right: 5px; width: 47%; } .productsContainer{ margin-top: 80px; margin-bottom: 100px; } .breadCrumbs{ font-family: 'LarsseitThin', sans-serif; font-size: 13px; color: #4a4a4a; transition: .3s; text-transform: lowercase; margin-bottom: 50px; } .breadCrumbs a{ color: #4a4a4a; } .breadCrumbs a:hover{ color: #f5821e; } .productContainer .productTitle{ font-size: 30px; font-family: 'LarsseitRegular', sans-serif; text-transform: uppercase; color: #000000; vertical-align: top; } .productPrice{ font-size: 30px; font-family: 'LarsseitRegular', sans-serif; text-transform: uppercase; color: #000000; vertical-align: top; } .productCard{ display: block; transition: .3s; margin-bottom: 20px; margin-top: 20px; border: solid 1px #d9d9d9; background-color: #ffffff; text-decoration: none!important; } .productCard .imgBox{ position: relative; width: 100%; height: 180px; margin-top: 20px; padding: 0 20px; text-align: center; } .productCard .imgBox img{ height: 100%; width: auto; max-width: 100%; margin: 0 auto; } .productCard .imgBox img.noImage{ height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .productCard .discount{ position: absolute; top: 20px; left: 15px; background-color: #f5821e; color: #ffffff; height: 50px; width: 50px; } .productCard .discount .text{ margin-top: 15px; text-align: center; font-family: "LarsseitRegular", sans-serif; font-size: 14px; } .productCard .contentBox{ padding: 0px 20px; color: #013b2c; font-family: 'LarsseitRegular', sans-serif; } .productCard .contentBox .title{ font-size: 18px; line-height: 1.17; /* height: 70px; */ font-family: 'LarsseitBold', sans-serif; text-transform: uppercase; } .productCard .contentBox .producer{ font-family: "LarsseitThin", sans-serif; font-size: 14px; line-height: 1.14; /* height: 70px; */ margin-top: 15px; margin-bottom: 5px; text-transform: uppercase; } .productCard .contentBox .description{ font-family: "LarsseitThin", sans-serif; font-size: 14px; line-height: 1.14; /* height: 70px; */ margin-top: 20px; margin-bottom: 5px; } .productCard .line{ padding: 0px 20px; margin-left: 20px; margin-right: 20px; border-bottom: 1px dashed #d9d9d9; margin-top: 10px; } .productCard .priceBox{ padding: 0px 20px; margin-top: 15px; } .productCard .priceBox .regularPrice{ font-family: "LarsseitRegular", sans-serif; font-size: 12px; color: #c7c7c7; min-height: 20px; } .productCard .priceBox .price{ font-family: 'LarsseitBold', sans-serif; font-size: 24px; color: #f5821e; margin-bottom: 10px; } .productCard .priceBox .priceText{ font-size: 14px; color: #f5821e; font-family: 'LarsseitBold', sans-serif; } .productCard:hover{ box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.15); } .productCard .priceBox .addTocart img{ height: 25px; width: auto; } .productCard .priceBox .addTocart{ margin-top: 15px; padding: 10px; background-color: #f5821e; border: 1px solid #f5821e; transition: all .4s; margin-bottom: 20px; border-radius: 100px; } .productCard .priceBox .addTocart:hover{ background-color: #ffffff; } .productContainer{ margin-top: 120px; min-height: 400px; } .productContainer .productInfoBox{ margin-top: 30px; } .noProductImage{ margin-top: 20px; text-align: center; } .productImage{ background-color: #ffffff; text-align: center; height: 180px; margin-bottom: 20px; } .productImage img{ margin: 0 auto; width: auto; max-width: 100%; height: 100%; } .productImageNav { height: 100px; transition: .3s; margin-right: 5px; background-color: #ffffff; text-align: center; cursor: pointer; } .productImageNav { margin-top: 20px; } .productImageNav img { max-width: 110px; height: 100%; margin: 0 auto; } .productInfoBox .discount{ position: absolute; top: -35px; left: 10px; background-color: #f5821e; color: #ffffff; height: 50px; width: 50px; } .productInfoBox .discount .text{ margin-top: 15px; text-align: center; font-family: "LarsseitRegular", sans-serif; font-size: 14px; } .productImage img{ height: 100%; width: auto; max-width: 100%; } .quantity label{ font-family: "LarsseitThin", sans-serif; font-size: 12px; display: inline; vertical-align: middle; } .quantity{ margin-top: 15px; font-size: 16px; } .productInfo .title{ font-family: "Larsseit", sans-serif; font-size: 24px; line-height: 1.25; color: #013b2c; margin-bottom: 40px; text-transform: uppercase; } .productInfo .code{ font-family: "LarsseitThin",sans-serif; font-size: 15px; color: #013b2c; } .productInfo .manufacturerImage{ height: 40px; margin-top: 10px; } .productInfo .manufacturerImage{ font-family: "LarsseitThin", sans-serif; font-size: 15px; color: #013b2c; } .productInfo .manufacturerImage img{ height: 100%; width: auto; } .productInfo .shortDescription{ font-family: "LarsseitThin", sans-serif; font-size: 14px; line-height: 1.5; color: #013b2c; margin-top: 15px; } .productInfo .document{ font-family: "LarsseitThin",sans-serif; font-size: 15px; color: #013b2c; margin-top: 15px; } .productInfo .document a{ color: #f5821e; } .productInfo .document a:hover{ opacity: .9; } .productInfo .document a:visited{ text-decoration: underline; } .addToCart{ padding-top: 50px; padding-left: 50px; padding-right: 0px; padding-bottom: 30px; background-color: #013b2c; } .addToCart .price{ font-size: 36px; font-family: "Larsseit", sans-serif; color: #ffffff; } .addToCart .price p{ display: inline; font-family: "Larsseit"; font-size: 18px; } .addToCart .price .tax{ display: inline; font-size: 12px; font-family: "LarsseitThin", sans-serif; text-align: right; } .color{ margin-top: 0px; } .color .selectLabel{ font-family: "LarsseitThin", sans-serif; font-size: 12px; display: inline; } .color .selectColor{ display: inline; margin-left: 29px; } .color .selectColor select{ height: 45px; font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #012243; width: 50%; padding-left: 25px; padding-right: 20px; } .color .selectColor option{ font-family: "LarsseitThin", sans-serif; font-size: 15px; color: #012243; } .color .selectColor option:selected{ background-color: grey; } .productContainer .button{ margin-top: 20px; } .addTocartCTA{ font-family: "Larsseit",sans-serif; font-size: 14px; width: 90%; height: 40px; border-radius: 2px; background-color: #f5821e; border: 1px solid #f5821e; text-align: left; transition: all .3s; } .addTocartCTA:hover{ background-color: #ffffff; border: 1px solid #f5821e; color: #f5821e; } .addTocartCTA img{ margin-left: 20px; margin-right: 15%; height: 25px; width: 25px; } .productContainer .delivery{ text-align: center; margin-top: 15px; font-family: "LarsseitThin", sans,serif; font-size: 16px; color: #012243; } .productContainer .delivery span{ font-family: "Larsseit", sans-serif; color: #f5821e; } .longDescription{ margin-top: 60px; font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; line-height: 1.38; margin-bottom: 60px; } .longDescription h2{ font-family: "Larsseit",sans-serif; font-size: 24px; margin-bottom: 30px; } .productSuggested{ padding-top: 70px; padding-bottom: 60px; background-color: #eeeeee; } .productSuggested h2{ text-align: center; font-family: "LarsseitBold",sans-serif; font-size: 36px; color: #2c2c2c; margin-bottom: 50px; } .productSuggested .imgBox{ height: 140px; } .sliderSuggested .slide{ height: 450px; } .sliderSuggested .productCard .line{ padding: 0 20px; border-bottom: 1px dashed #d9d9d9; margin-top: 30px; } .sliderSuggested .discount{ position: absolute; top: 30px; z-index: 10000; } .sliderSuggested .discount{ position: absolute; top: 20px; background-color: #f5821e; color: #ffffff; height: 50px; width: 50px; } .sliderSuggested .discount .text{ margin-top: 15px; text-align: center; font-family: "LarsseitRegular", sans-serif; font-size: 14px; } .sliderSuggested a:hover, .sliderSuggested a:focus{ text-decoration: none; } .slick-prev:before { content: ""; background: url(../images/icons/left-chevron.svg) no-repeat; background-size: cover; position: absolute; top: 0px; width: 20px; height: 20px; z-index: 100; } .slick-next:before { content: ""; background: url(../images/icons/right-chevron.svg) no-repeat; background-size: cover; position: absolute; top: 0px; width: 20px; height: 20px; z-index: 100; } .slick-next{ right: -20px; } .slick-prev{ left: -40px; } .contact{ margin-top: 50px; color: #2c2c2c; margin-bottom: 60px; } .contactInfo{ text-align: center; margin-top: 20px; } .contactInfo div{ padding-top: 45px; padding-bottom: 45px; } .contactInfo .grey{ background-color: #eeeeee; } .contactInfo h5{ font-family: "Larsseit", sans-serif; font-size: 24px; } .contactInfo h6{ font-family: "LarsseitThin", sans-serif; font-size: 16px; } .contactInfo p{ font-family: "Larsseit", sans-serif; font-size: 14px; } .contactInfo b{ font-family: "LarsseitRegular", sans-serif; font-size: 14px; } .contactTitle{ font-family: "Larsseit", sans-serif; font-size: 30px; text-align: center; margin-top: 60px; margin-bottom: 30px; } .contact .unitTitle{ font-family: "LarsseitBold", sans-serif; font-size: 16px; line-height: 1.5; } .contact .unitTitle p{ font-size: 14px; font-family: "LarsseitThin", sans-serif; } .contact .unitTitle b{ font-size: 14px; font-family: "Larsseit", sans-serif; } .contact .unitInfo{ line-height: 1.5; } .contact .unitInfo p{ font-family: "LarsseitThin", sans-serif; font-size: 13px; } .map{ margin-top: 30px; } .contact_form{ padding: 0px 30px; position: relative; margin-top: 50px; } .contact_form__title{ font-size: 18px; font-family: "LarsseitBold", sans-serif; letter-spacing: 0.33px; color: #000000; margin-bottom: 15px; } .form-input{ width: 100%; font-family: "LarsseitLight", sans-serif; font-size: 13px; border: 1px solid #979797; resize: vertical; max-height: 200px; min-height: 40px; color: #2c2c2c; padding-left: 10px; } .form-group label{ color: #000000; font-family: "LarsseitThin", sans-serif; font-size: 14px; letter-spacing: 1px; } .contact_form__form .button-container{ text-align: right; } .contact_form__form .checkmark{ top: 10px; } .contact_form__form label a{ color: #f5821e; font-size: 14px; } .contact_form__form label a{ text-decoration: none; } .contact_form__form .requiredInputCheck{ background-color: #f5821e1f; } .contact_form__form .requiredCheckbox{ border-bottom: 1px solid red; } .contact_form__form label span{ font-size: 11px; } .contact_form__form .successMessage{ display: none; margin-bottom: 10px; margin-top: 20px; padding: 20px; background-color: #80808021; font-size: 14px; color: #000000; font-family: "LarsseitRegular", sans-serif; } .contact_form__form .checkmark{ position: absolute; top: 8px; left: 0; height: 18px; width: 18px; border: 1px solid #979797; background-color: #ffffff; } .contact_form__form input:checked ~ .checkmark{ background-color: #f5821e; border: none; } .contact_form__form .checkmark:after { left: 7px; top: 2px; width: 5px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .button1{ background-color: #f5821e; border-radius: 5px; border: 1px solid #f5821e; font-size: 13px; color: #ffffff; height: 40px; width: 40%; transition: all .3s; } .button1:hover{ background-color: #ffffff; color: #f5821e; } .companyInfo{ margin-top: 100px; } .companyInfo .baseInfo{ line-height: 1.5; } .companyInfo h5{ font-family: "LarsseitRegular", sans-serif; font-size: 16px; } .companyInfo p{ font-family: "LarsseitThin", sans-serif; } .customPageHeader{ padding: 20px; text-align: center; } .customPageHeader img{ height: 50px; width: auto; } .customPageBody{ background-color: #eeeeee; padding: 50px; min-height: 400px; } .customPageBody .textBody{ font-family: "LarsseitThin", sans-serif; background-color: #ffffff; padding: 40px; margin-top: 50px; margin-bottom: 50px; } .customPageBody .textBody h1{ font-family: 'LarsseitRegular', sans-serif; font-size: 50px; } .customPageBody .textBody h2{ font-family: 'LarsseitRegular', sans-serif; font-size: 30px; margin-bottom: 50px; } .customPageBody .textBody ul{ list-style: none; margin: 0px; padding: 0px; margin-top: 20px; } .customPageBody .textBody ul li{ display: inline-block; } .customPageBody .textBody ul li a{ display: block; width: 167px; height: 49px; border: solid 1px #f5821e; transition: .3s; display: block; text-align: center; line-height: 49px; max-width: 100%; font-size: 12px; color: #f5821e; font-family: 'LarsseitRegular', sans-serif; margin-right: 20px; } .customPageBody .textBody ul li a:hover{ background-color: #f5821e; color: #ffffff; } /*ACCORDION*/ faq-section__accordion{ margin-bottom: 5px; } .faq-section__title{ cursor: pointer; font-family: "Larsseit", sans-serif; border-bottom: 1px solid #f0f0f0; padding: 15px; letter-spacing: 1.03px; } .faq-section__content{ display: none; font-size: 16px; color: #b7b7b7; padding: 20px; } .faq-section__opened{ background-image: url('../images/icons/down-arrow.svg'); height: 20px; width: 50px; background-size: 15px; background-position: center; float: right; background-repeat: no-repeat; } .faq-section__closed{ background-image: url('../images/icons/right-accordion-arrow.svg'); height: 20px; width: 50px; background-size: 15px; background-position: center; float: right; background-repeat: no-repeat; } .faq-section__title.active{ font-family: 'LarsseitThin', sans-serif; } .criteryChecbox{ font-size:14px; font-weight:100; display:block; } .panel-heading{ padding:0px; } .panel-heading a{ font-size: 15px; color: #ffffff; font-family: 'Larsseit', sans-serif; transition: all .2s; text-decoration: none!important; display: block; padding-top: 5px; } .panel-heading a:hover{ color: #f5821ecc; } .panel-group{ margin-bottom: 0px; } .categoryBox{ padding-bottom: 15px; background-color: #013b2c; } .categoryBoxTitle{ font-family: 'Larsseit', sans-serif; color: #ffffff; font-size: 17px; margin-bottom: 15px; background-color: #f5821e; padding: 10px; } .categoryBoxText{ padding: 15px; } .subCategoriesContainer{ padding-left: 10px; } .filterBox{ padding-bottom: 15px; margin-top: 5px; border: 1px solid #eeeeee; } .filterBoxTitle{ font-family: 'Larsseit', sans-serif; color: #f5821e; font-size: 17px; padding: 10px; } .filterLine{ border-bottom: 1px dashed #d9d9d9; margin-top: 5px; } .filterBoxText{ padding: 15px; } .filterContainer{ padding-left: 10px; } .filterContainer ul{ list-style: none; padding-left: 0; } .filterBoxText .checkboxContainer{ font-family: 'Larsseit', sans-serif; font-size: 15px; display: block; position: relative; padding-left: 25px; margin-bottom: 12px; margin-top: 10px; padding-top: 3px; color: #013b2c; cursor: pointer; padding-top: 3px; } .panel-heading .filterContainer li { color: #013b2c; transition: .2s; cursor: pointer; } .panel-heading .filterContainer li:hover{ color: #f5821e; } .criteryChecbox{ font-family: 'LarsseitThin'; font-size: 14px; color: #ffffff; display: block; } .criteryChecbox .checkmark{ background-color: #ffffff; } .panel-group .panel-heading{ margin-bottom: 5px; } .subCategoriesContainer{ margin-top: 7px; margin-bottom: 5px; } .categoryBoxText .checkboxContainer .checkmark{ position: absolute; top: 4px; left: 0; height: 18px; width: 18px; border: 1px solid #979797; background-color: #ffffff; } .categoryBoxText .checkboxContainer input:checked ~ .checkmark{ background-color: #f5821e; border: none; } .categoryBoxText .checkboxContainer{ font-family: 'LarsseitThin'; font-size: 15px; display: block; position: relative; padding-left: 25px; margin-bottom: 12px; margin-top: 10px; padding-top: 3px; color: #ffffff; cursor: pointer; padding-top: 3px; } .categoryBoxText .checkboxContainer .checkmark:after { left: 7px; top: 2px; width: 5px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .subsubCategoriesContainer{ margin-left: 20px; margin-bottom: 20px; } .subsubCategoriesContainer .title{ color: #f5821e; font-size: 13px; } .subCategoriesContainer a{ padding-top: 5px; font-size: 14px; } .noProductMessage{ margin-top: 50px; color: #f5821e; } .critery{ text-align: right; } .orderTitle{ font-family: "Larsseit", sans-serif; font-size: 14px; color: #013b2c; } .orderText { font-family: "LarsseitThin", sans-serif; letter-spacing: 0.5px; color: #013b2c; font-size: 13px; margin-left: 25px; text-decoration: underline; cursor: pointer; } .orderTextActive { background-color: #f5821e; color: #ffffff; text-decoration: none; padding: 8px; } /*CONFIGURATOR*/ .configuratorContainer{ margin-top: 120px; margin-bottom: 80px; } .configuratorContainer .mainTitle{ text-align: center; margin-bottom: 50px; } .configuratorContainer .mainTitle h1{ font-family: "LarsseitBold", sans-serif; font-size: 36px; color: #2c2c2c; } .configuratorContainer .title{ text-align: left; cursor: pointer; } .configuratorContainer p{ display:inline; font-family: "Larsseit", sans-serif; font-size: 18px; color: #2c2c2c; } .configuratorContainer .circle{ border: 1px solid #979797; height: 40px; width: 40px; line-height: 1.8; border-radius: 100%; display: inline-block; text-align: center; margin-right: 10px; font-size: 22px; color: #346d43; font-family: "LarsseitBold", sans-serif; cursor: pointer; } .configuratorContainer input[type="radio"] { opacity: 0; position: fixed; width: 0; } .configuratorContainer label { display: inline-block; background-color: #ffffff; padding-left: 50px; height: 40px; line-height: 2.3; padding-right: 50px; font-family: "Larsseit", sans-serif; font-size: 16px; border: 1px solid #979797; cursor: pointer; transition: .3s; text-align: center; margin-right: 10px; text-transform: lowercase; vertical-align: top; margin-bottom: 10px; } .configuratorContainer label:hover { background-color: #ededed; } .configuratorContainer input[type="radio"]:checked + label { background-color: #f5821e; border: 1px solid #f5821e; } .configurator-group .body{ margin-top: 20px; margin-bottom: 20px; padding-left: 50px; display:none; } .configurator-group .body p{ font-family: "Larsseit", sans-serif; font-size: 14px; } .configurator-group input[type="number"]{ height: 40px; width: 25%; font-family: "LarsseitLight", sans-serif; font-size: 13px; padding-left: 15px; border: 1px solid #979797; } .configurator-group .onlyNumber{ height: 40px; width: 25%; font-family: "LarsseitLight", sans-serif; font-size: 13px; padding-left: 15px; border: 1px solid #979797; } .configurator-group select{ height: 40px; padding-left: 20px; padding-right: 20px; } .configurator-group .differentRadio label { display: inline-block; background-color: transparent; padding: 0; height: 0; line-height: 3; font-family: "Larsseit", sans-serif; font-size: 13px; border: none; cursor: pointer; transition: .3s; margin-left: 5px; text-transform: lowercase; vertical-align: top; text-align: center; } /* Chrome, Safari, Edge, Opera */ .configurator-group input::-webkit-outer-spin-button, .configurator-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ .configurator-group input[type=number] { -moz-appearance: textfield; } .configurator-group .differentRadio input[type="radio"]:checked + label{ border: none; } .configurator-group .differentRadio input[type="radio"] { opacity: 1; position: relative; width: 20px; height: 20px; margin-left: 5px; vertical-align: text-bottom; } .configurator-group .differentRadio .checkboxContainer .checkmark{ position: absolute; top: 8px; left: 0; height: 18px; width: 18px; border: 1px solid #979797; background-color: #ffffff; } .configurator-group .differentRadio .checkboxContainer input:checked ~ .checkmark{ background-color: #f5821e; border: none; } .configurator-group .differentRadio .checkboxContainer .checkmark:after { left: 7px; top: 2px; width: 5px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .configurator-group .differentRadio .checkboxContainer{ font-family: 'LarsseitThin'; font-size: 14px; text-transform: none; position: relative; padding-left: 30px; color: #2c2c2c; cursor: pointer; line-height: 2; text-align: left; } .configurator-group .differentRadio .button-container { margin-top: 30px; } .checkboxContainer span a{ color: #f5821e; } .checkboxContainer span a:hover{ color: #f5821ec7; } .differentRadio .contact_form__form{ margin-top: 20px; line-height: 2; } .differentRadio .contact_form__form label{ text-transform: none; } .contact_form__form .failMessage{ display: none; margin-bottom: 10px; margin-top: 20px; padding: 20px; background-color: #80808021; font-size: 14px; font-family: "LarsseitRegular", sans-serif; } .configurator-group .shown{ display:block; } .orange{ background-color: #f5821e!important; border: 1px solid #f5821e!important; } .radio-item { display: inline-block; position: relative; padding: 0 6px; margin: 10px 0 0; } .radio-item input[type='radio'] { display: none; } .radio-item label { color: #2c2c2c; font-family: "Larsseit",sans-serif; } .radio-item label:before { content: " "; display: inline-block; position: relative; top: 5px; margin: 0 5px 0 0; width: 20px; height: 20px; border-radius: 11px; border: 2px solid #f5821e; background-color: transparent; vertical-align: top; } .radio-item input[type=radio]:checked + label:after { border-radius: 11px; width: 12px; height: 12px; position: absolute; top: 9px; left: 15px; content: " "; display: block; background: #f5821e; } .configurator-form-input{ width: 100%; font-family: "LarsseitLight", sans-serif; font-size: 13px; border: 1px solid #979797; resize: vertical; max-height: 200px; min-height: 40px; } .servicesBody{ padding-top: 50px; padding-bottom: 50px; background-color: #eeeeee; } .servicesBody img{ max-width: 100%!important; } .categoryImages{ margin-top: 50px; } .noServiceImage{ margin-top: 50px; text-align: center; } .serviceImage{ background-color: #eaeaea; text-align: center; height: 320px; margin-bottom: 20px; } .serviceImage img{ margin: 0 auto; width: auto; max-width: 100%; height: 100%; } .serviceImageNav { height: 100px; transition: .3s; margin-right: 5px; background-color: #eaeaea; text-align: center; cursor: pointer; margin-top: 20px; } .serviceImageNav img { max-width: 110px; height: 100%; margin: 0 auto; } .categoryText h2{ font-family: "LarsseitRegular", sans-serif; font-size: 30px; color: #013b2c; margin-top: 30px; margin-bottom: 20px; } .categoryText{ font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; } .categoryText p{ font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; line-height: 1.81; } .categoryLinks{ margin-top: 25px; font-family: 'LarsseitLight', sans-serif; color: #2c2c2c; } .categoryLinks ul{ list-style: none; padding-left: 0; margin-top: 10px; } .categoryLinks li{ position: relative; padding-left: 20px; line-height: 1.5; } .categoryLinks li:before{ content: ''; width: 10px; height: 10px; position: absolute; background-image: url('../images/icons/circle_orange.svg'); background-size: cover; background-position: center; left: 0; top: 28%; } .categoryLinks a{ color: #346d43; text-decoration: none!important; transition: all .3s; } .categoryLinks a:hover{ color: #f5821e; } .category{ margin-bottom: 80px; } .categoryImage{ width: 100%; height: 450px; margin-top: 50px; } .categoryImage img{ width: 100%; height: 100%; } /* PAGES */ .pageText{ margin-top: 110px; margin-bottom: 80px; font-family: "LarsseitThin", sans-serif; color: #2c2c2c; line-height: 1.6; } .pageText strong{ font-family: "Larsseit", sans-serif; } /*FAQ*/ .faq{ padding-top: 110px; padding-bottom: 80px; font-family: "LarsseitThing", sans-serif; color: #2c2c2c; background-color: #eeeeee; } .faq-section__accordion2{ margin-bottom: 10px; } .faq-section__title2{ cursor: pointer; font-family: "Larsseit", sans-serif; padding: 15px; letter-spacing: 1.03px; color: #ffffff; background-color: #f5821e; border-radius: 5px; } .faq-section__content2{ display: none; font-size: 16px; font-family: "LarsseitThin", sans-serif; color: #346d43; padding: 25px; padding-top: 15px; background-color: #ffffff; border-radius: 5px; } .faq-section__opened2{ background-image: url('../images/icons/faq-down-arrow.svg'); height: 20px; width: 50px; background-size: 15px; background-position: center; float: right; background-repeat: no-repeat; } .faq-section__closed2{ background-image: url('../images/icons/faq-right-chevron.svg'); height: 20px; width: 50px; background-size: 15px; background-position: center; float: right; background-repeat: no-repeat; } .faq-section__title.active2{ font-family: 'LarsseitThin', sans-serif; } .withdrawl{ padding-top: 40px; padding-bottom: 80px; } /* MODAL */ .modal { position: fixed; display: block; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100vh; } .modal.is-visible { visibility: visible; } .modal-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .modal.is-visible .modal-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .modal-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 40em; margin-left: -20em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); border-radius: 5px; } .modal-wrapper section{ padding: 20px; padding-bottom: 0px; } .modal-title{ background-color: #fbfbfd; color: #3d465a; width: 100%; padding: 20px 30px; font-weight: 600; font-size: 18px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .modal-title img{ margin-right: 15px; margin-top: -3px; } .modal-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .modal.is-visible .modal-transition { transform: translateY(0); opacity: 1; } .btn-close div{ color: #929eb8; background-color: #e9eaf3; float: right; width: 28px; height: 28px; text-align: center; border-radius: 50%; transition: .3s; } .btn-close div:hover{ background-color: #929eb8; color: #e9eaf3; } .btn-close{ font-size: 20px; } .modal-footer{ text-align: left; border: none; } .cancelModal{ font-size: 14px; font-weight: 600; color: #929eb8; margin-top: 15px; margin-left: 20px; cursor: pointer; transition: .3s; } .cancelModal:hover{ color: #3b6a8d; } .modal-delete-icon img{ width: 18px; } .remove-element-text{ text-align: center; font-size: 20px; margin-bottom: 20px; } .modal-wrapper{ top: 1em; } .login{ margin-top: 80px; margin-bottom: 60px; } .about-us{ padding-top: 100px; padding-bottom: 100px; font-family: "LarsseitThin", sans-serif; font-size: 16px; color: #2c2c2c; } .about-us b{ font-family: "Larsseit", sans-serif; } .about-us .imageBox{ width: 100%; max-width: 100%; height: 440px; margin-top: 15px; } .about-us .imageBox img{ height: auto; width: 100%; } .about-us .unitTitle { font-family: "LarsseitBold", sans-serif; font-size: 16px; line-height: 1.5; } .about-us .unitTitle p { font-size: 14px; font-family: "LarsseitThin", sans-serif; } /* NEWS */ .newsPage{ padding-top: 50px; padding-bottom: 80px; background-color: #eeeeee; } .newsPage .newsImage{ background-position: center; background-size: 100%; background-repeat: no-repeat; height: 230px; max-height: 230px; max-width: 100%; transition: background-size .2s ease-in; -moz-transition: background-size .2s ease-in; -ms-transition: background-size .2s ease-in; -o-transition: background-size .2s ease-in; -webkit-transition: background-size .2s ease-in; } .newsCard{ background-color: #ffffff; padding-bottom: 30px; font-family: 'LarsseitThin', sans-serif; color: #013b2c; margin-bottom: 30px; } .newsInfo{ padding-left: 20px; padding-right: 20px; transition: all .3s; } .newsDate{ font-size: 13px; font-family: "LarsseitRegular", sans-serif; margin-top: 10px; margin-bottom: 5px; } .newsTitle{ font-family: "LarsseitRegular", sans-serif; font-size: 18px; margin-bottom: 15px; } .newsText{ color: #000000; } .newsCard:hover .newsInfo{ opacity: .85; } .newsCard:hover .newsImage{ background-size: 110%; } .singleNewsPage{ padding-top: 80px; padding-bottom: 100px; background-color: #eeeeee; } .newsSingleCard{ background-color: #ffffff; font-family: "LarsseitThin", sans-serif; } .newsSingleTitle{ font-size: 36px; color: #013b2c; padding-left: 20px; padding-top: 30px; font-family: 'LarsseitRegular', sans-serif; } .newsSingleDate{ font-size: 13px; font-family: "LarsseitRegular", sans-serif; color: #013b2c; padding-left: 25px; margin-top: 5px; margin-bottom: 15px; } .newsSingleImage img{ height: auto; width: 100%; } .newsSingleText{ padding-left: 30px; padding-right: 50px; padding-top: 40px; padding-bottom: 30px; line-height: 1.5; color: #000000; } .newsSingleText b{ font-family: "Larsseit", sans-serif; } .newsSingleText img{ max-width: 100%; } /*.newsSingleText ul{ list-style: none; }*/ .newsSingleCardRight{ background-color: #ffffff; text-align: center; padding-left: 20px; padding-right: 10px; padding-bottom: 10px; } .newsSingleCardRight a{ color: #013b2c; transition: all .3s; } .newsSingleCardRight a:hover{ color: #013b2cab; } .newsSingleLastTitle{ color: #013b2c; font-size: 24px; font-family: "Larsseit", sans-serif; padding-top: 20px; padding-bottom: 20px; } .newsSingleLastTitle2{ line-height: 15px; } .notShow{ display:none; } .showSearchInputMobile{ display: none; } .searchContainer{ display: block; position: absolute; right: 150px; width: 350px; margin-top: 100px; z-index: 10000; display: none; } .searchContainer input{ width: 100%; background: #f5821e70; border: none; border-bottom: 1px solid #f5821e; z-index: 10000; padding-left: 20px; padding-right: 20px; color: #ffffff; height: 40px; font-family: 'LarsseitThin'; } .hideSearchInput img{ width: 15px; } #Query::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ffffff; opacity: 1; /* Firefox */ font-family: "LarsseitThin", sans-serif; } #Query:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; } #Query::-ms-input-placeholder { /* Microsoft Edge */ color: #ffffff; } .searchResultsItems a{ color: #ffffff; transition: .3s; text-decoration: none; font-size: 14px; } .searchResultsItems li:hover{ background-color: #f5821e4f; } .searchResultsBox{ max-height: 300px; overflow-y: scroll; } .searchResultsItems{ background-color: #4c7a53; font-family: "LarsseitThin", sans-serif; padding: 5px; } .searchResultsItems h2{ font-size: 16px; color: #f5821e; padding-top: 10px; padding-left: 5px; font-family: 'LarsseitRegular', sans-serif; } .searchResultsItems ul{ list-style: none; padding: 0px; margin: 0px; } .searchResultsItems ul li{ padding-left: 10px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; text-transform: lowercase; } .searchResultsItems p{ color: #f5821e; font-family: 'Larsseit', sans-serif; font-size: 14px; } .more_results{ background-color: #f5821e; border-radius: 5px; border: 1px solid #f5821e; font-size: 13px; color: #ffffff; height: 40px; width: 40%; transition: all .3s; text-transform: uppercase; margin-left: 30%; } .more_results:hover{ color: #f5821e; background-color: #ffffff; } #gdpr-cookie-message { display: block; font-family: "LarsseitRegular", sans-serif; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; background-color: #346d43; padding: 10px 20px; text-align: center; } #gdpr-cookie-message h4, #gdpr-cookie-message p { color: #fff; display: inline-block; margin: 0; font-size: 13px; padding-right: 15px; margin-bottom: 5px; } #gdpr-cookie-message h4 { font-weight: bold; color: #FFFFFF; text-transform: uppercase; } #gdpr-cookie-message p a { color: #f5821e; text-decoration: underline; padding-left: 5px; } #gdpr-cookie-message button { margin: 0 10px; background-color: #f5821e; border: none; padding: 5px 10px; color: #fff; font-size: 13px; } #gdpr-cookie-message button#gdpr-cookie-advanced { color: #fff; background: transparent; border: 1px solid #fff; } #gdpr-cookie-message button:hover { opacity: 0.7; } #gdpr-cookie-message button#gdpr-cookie-advanced:hover { opacity: 0.7; } #gdpr-cookie-types h5 { color: #fff; font-size: 14px; padding-top: 10px; } #gdpr-cookie-types ul li { list-style: none; color: #fff; display: inline-block; padding: 5px; font-size: 13px; }