html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } @font-face{font-family:'Nexa-Light';src:url('/PlantsOnCloud/resources/fonts/Nexa-Light.otf');} html, body { line-height: 1; min-height: 100%; font-family: Nexa-Light, Arial, Verdana; } body { background: #010101; } nav { display: block; } #integratiediv, #producentdiv, #peppoldiv, #handelaardiv, #prijsdiv, #contactdiv, #registratiediv, #gpdrdiv, #vragendiv{ position:relative; /* zelfde als fixed header hoogte*/ top: -130px; z-index: -1000; } ol, ul { list-style: none; } .text { display: block; width: 100%; clear: both; overflow: hidden; position: relative; } .wrapper { display: block; width: 100%; clear: both; overflow: hidden; position: relative; } .wrapper > h1 { letter-spacing: 5px; text-align: center !important; margin:0.5em 0 0.2em 0; font-size: 2.5em; } .blokpaar { background: #010101; } .blokpaar > h1 { color: #90B62C; } .blokOnpaar { background: #EEEEEE; } .blokOnpaar > h1 { color: #4B772D; } .hide { display: none; } .show { display: inherit; } #header { height: 130px; position: fixed; padding-top: 10px; left: 0; right: 0; z-index: 1000; } #login { float: left; } #login img { padding-left: 50px; cursor: pointer; } #header > a { cursor: pointer; } #header #poc { position: absolute; left: 15%; } #header #poc > h2 { color: #90B62C; font-weight: normal; font-size: normal; -ms-transform: translate(0, -30px); /* IE 9 */ -webkit-transform: translate(0, -30px); /* Safari */ transform: translate(0, -30px); } #header nav { position: absolute; right: 10px; font-size: 13px; text-align: right; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #header nav a { position: relative; display: inline-block; padding: 5px 17.5px; color: #EEEEEE; text-decoration: none; letter-spacing: 1.2px; font-weight: 500; } #plantsoncloud { padding-top: 110px; text-align: center; letter-spacing: 3px; z-index: 1; /*margin-bottom: 1em;*/ } #plantsoncloud h1, #header #poc h1 { letter-spacing: 5px; padding: 0.5em 0 15px; text-align: center !important; text-transform: capitalize; font-weight: normal; font-size: 1.85vw; line-height: 1.05; color: #ffffff; } #plantsoncloud h2{ /*text-transform: uppercase;*/ text-align: center; font-weight: 100; font-size: 2.5vw; color: #ffffff; } #plantsoncloud h3{font-size: 1.8vw; color: #36A9E1; line-height: 1.3; margin:2vh 3vw 2vh 5vw} #integratie{ text-align: center; background-color: #ffffff !important} div.hr { margin: 0 auto 2px; width: 35vw; height: 4px; background: #90b62c; } #animatie{ padding-bottom: 2em; } #animatie h2 { color: #4B772D; margin-bottom: .6em; text-align: center; } #animatie div.icons div.icon { width: 25%; float: left; position: relative; margin-bottom: 1em; } #animatie div.icons div.icon img { width: 48%; display: block; margin: 0 auto; transition: opacity 0.3s; } #animatie div.icons div.icon div.extra { position: absolute; top: 3em; bottom: 0; left: 26%; width: 48%; border-radius: 50%; opacity: 0; transition: opacity 0.3s; background: #90B62C; color: #FFF; cursor: pointer; } #animatie div.icons div.icon div.extra p { position: absolute; width: 80%; padding: 0.9em; top: 50%; -webkit-transform: translateY(-50%);/* Safari */ transform: translateY(-50%); -ms-transform: translateY(-50%); /* IE 9 */ text-align: center; font-size: 1.1vw; } #animatie div.icons div.icon.active div.extra { opacity: 1; } .info{ line-height: 1.2; } .info p a{ text-decoration: none; } .info a:hover, h3 a:hover{ color: #36A9E1; } .infoBlok , .conflicten{ font-size: 8vw; margin: 0 auto; position: relative; width: 80%; } .link{color: #36A9E1;} .left { width: 45%; float: left; padding: 0 0.2em 0em 0; } #handelaar, #prijs{ margin-bottom:1rem; } #handelaar .infoBlok,#prijs .infoBlok, #gdpr .infoBlok, #gdpr .conflicten{ width:90%; } #handelaar .infoBlok .info,#prijs .infoBlok .info, #gdpr .infoBlok .info { width: 30%; padding: 0 0.3em 0 0;} #pocers{ text-align: center; padding: 0.5rem 0 0.5rem 0; } #pocers h2{ color: #36A9E1; text-align: left !important; padding-left:3em; } .infoBlok .left .info { width: 100% !important; } .right { width: 45%; float: right; padding: 0 0 0 0.2em; } .infoBlok .right .info { width: 100% !important; } .infoBlok .info { width: 50%; float: left; margin-top: 0.2em; } .infoBlok .info h2 { color: #36A9E1; font-weight: 500; font-size: .25em; margin-top: 0.1em; margin-bottom: 0.4em; } .infoBlok .info p, .conflicten p { font-size: 1.2vw; color: #889096; font-weight: 300; margin-top: 0.7vw;}  .infoBlok .info p.extra { margin-top: 0.5em; } #gdpr { position: relative; padding-bottom:3em; /*margin-bottom: 30em;*/ } #contact, #registratie { position: relative; padding-bottom:3em;background-color: #ffffff !important } #contact .left, #registratie .left{ padding: 0.1em 0.1em 0 3em; } #contact .right, #registratie .right{ padding: 0.1em 1em 0 0; } #contact p, #registratie p { font-size: 1.3em; color: #889096; margin-bottom:1.3em; margin-top: 1.1em; line-height: 1.2; } #contact .response{ text-align: center; color:#36A9E1 !important; } #contact input, #registratie input, #registratie select { width: 50%; padding: 0 0.8em; margin-bottom: 0.5em; background: #90B62C; font-family: "Nexa-Light"; font-size: 0.8em; }#registratie input.maximaal{width:100%} #contact textarea, #registratie textarea { background: #90B62C; font-size: 0.8em; margin-bottom: 0.5em; padding: 0.5em 0.8em; border: none; height: 12.4em; width: 80%; font-family: "Nexa-Light"; resize: none; } #registratie textarea{height: 8em;} #contact input.knop, #registratie input.knop { background: #90B62C; margin-bottom: 15px; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#ffffff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#ffffff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#ffffff; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#ffffff; } /*********************/ /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } 
.error {  color: red !important; } p.margin { margin: 0 0 0 1.5em !important; }
.faq-item { margin-bottom: 15px; /*border-bottom: 1px solid #ccc;*/ padding-bottom: 10px; } .question { cursor: pointer; font-size: 1.2vw; color: #36A9E1; /*blauw*/ width: fit-content; background-color: #010101; /*#f0f0f0;*/ margin-left: 100px; padding: 10px; border-radius: 5px; transition: background-color 0.3s; } .question:hover { background-color: #e0e0e0; } .answer { display: none; padding: 10px; margin-top: 5px; margin-left: 10px; font-size: 1.2vw; color: #ffffff; /*grijs#889096;*/ background-color: #010101; /*#fafafa;*/ border-left: 4px solid #36A9E1; width: 75%; } .answer p{ padding: 10px; margin-left: 5px; } .faq-item.active .answer { display: block; }