/*================================================== General styles ==================================================*/ html{ height: 100%; } body{ width: 100%; min-height: 100%; font-family: 'Poppins', sans-serif; color: #000; } /* #Form */ #success_message, .help-block{ display: none !important;} .form-horizontal .form-group { margin-left: 0 !important; margin-right: 0 !important; } input[type='number'] { -moz-appearance:textfield; } /* Webkit browsers like Safari and Chrome */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .radio label, .checkbox label { text-align: left; font-size: 12px; color: #fff; } .gender label{ color: #fff; } .has-error .radio-inline, .has-success .radio-inline{ color: #fff; } .form-group{ margin-bottom: 10px; } .form-control{ height: 48px; padding: 6px 12px 6px 20px; background-color: #fff; border: none; } .form-control-feedback{ top: 8px !important; right: inherit !important; } .gender.has-feedback.has-success, .gender.has-feedback.has-error{ padding-left: 30px; } .gender .form-control-feedback{ top: 0px !important; left: 0 !important; } .has-feedback .form-control { padding-right: 5px !important; } i.form-control-feedback.glyphicon.glyphicon-remove, i.form-control-feedback.glyphicon.glyphicon-ok { /* right: 15px !important;*/ left: 0px; } input[type="radio"].gender { display: none; } /* select { padding: 3px; margin: 0px; font-size: 13px; height: 47px; width: 240px; box-shadow: none; background-color: #ebebeb; color: rgba(0, 0, 0, 0.5); border: medium none; outline: medium none; display: inline-block; -moz-appearance: none; cursor: pointer; border: none; color: #000; -webkit-appearance: none; -moz-appearance: none; appearance: none; } label { display: block; margin-bottom: 0px; font-weight: normal; } label.besparenkanOption:before { content: ''; right: 1px; top: 1px; width: 38px; height: 36px; position: absolute; pointer-events: none; display: block; } label.besparenkanOption:after { content: url(../img/arrow_selected.png); font: 1px "Consolas", monospace; color: #fff; right: 15px; top: 10px; padding: 0 0 2px; position: absolute; pointer-events: none; } */ /* Buttons */ .def-btn{ padding: 25px 10px; font-size: 20px; font-weight: 500; color: #fff; border-radius: 30px; background-color: #f2a500; } .def-btn:after{ position: absolute; top: 27px; right: 40px; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-size: 0.6em; font-weight: 300; } .def-btn:hover{ background-color: #ff7700; } .def-btn:hover:after{ right: 25px; } /*================================================== Campagne ==================================================*/ /* Kleuren */ .groen{color: #1f974d;} p.tekst{ font-size: 20px; line-height: 180%; } /* Groene bol */ .bol{ padding: 10px; padding-top: 55px; width: 200px; height: 200px; font-size: 40px; text-align: center; color: #fff; border-radius: 50%; background-color: #ff7700; } .bol h3{ font-size: 20px; } .bol h2{ font-size: 24px; } .bol-mob{ margin-top: 20px; padding: 5px 10px; font-size: 20px; color: #fff; background-color: #ff7700; } /* Header */ .header{ padding: 20px 0px; background-color: #a3c4e9; } .header .adv{ position: absolute; top: -15px; right: 10px; font-size: 12px; color: #eee; } /*================================================== Pagina 1 ==================================================*/ .pagina-1 p.tekst{ margin-top: 55px; } .pagina-1 .bol{ margin: -20px auto 0px; } .cta-holder{ position: relative; margin: 50px auto 40px; padding: 40px 0px; white-space: pre-line; border-top: 1px solid #1f974d; border-bottom: 1px solid #1f974d; } .cta-holder:after, .cta-holder:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .cta-holder:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 20px; margin-left: -20px; } .cta-holder:before { border-color: rgba(31, 151, 77, 0); border-top-color: #1f974d; border-width: 21px; margin-left: -21px; } .svg-container:before{ content: ""; display: block; width: 100%; padding-bottom: 81.28%; /* padding-bottom: 81.28042908444971%‬;*/ visibility: hidden; } svg { position: absolute; top: 0; left: 0; width: 100%; } path[id^="BE-"], path[id*=" BE-"] { fill: #1f974d; stroke: #fff; cursor: pointer; } path[id^="BE-"]:hover, path[id*=" BE-"]:hover { fill: #a3c4e9; } path{ -webkit-transition: fill 300ms ease; -moz-transition: fill 300ms ease; -o-transition: fill 300ms ease; transition: fill 300ms ease; } /* #BE-VAN{ fill: #333333; } #BE-WBR{ fill: #333333; } #BE-BRU{ fill: #333333; } #BE-WHT{ fill: #333333; } #BE-WLG{ fill: #333333; } #BE-VLI{ fill: #333333; } #BE-WLX{ fill: #333333; } #BE-WNA{ fill: #333333; } #BE-VOV{ fill: #333333; } #BE-VBR{ fill: #333333; } #BE-VWV{ fill: #333333; } */ .flex-holder{ margin: 40px auto; display: flex; justify-content: center; /* justify-content: space-between;*/ flex-wrap: wrap; } .flex-holder h4{ position: relative; padding-left: 30px; padding-right: 30px; font-size: 20px; } .flex-holder h4:before{ content: "\f00c"; font-family: "Font Awesome 5 Pro"; position: absolute; left: 0; top: 0; color: #114c9a; } /*================================================== Pagina 2 ==================================================*/ .pagina-2 p.tekst{ margin-top: 45px; margin-bottom: 70px; } .pagina-2 .bol{ margin-top: 40px; } .pagina-2 .bol{ margin: 40px auto 0px; margin-right: 0px; } .img-holder{ position: relative; } .img-overlay{ position: absolute; bottom: 20px; left: 0; width: 80%; max-width: 100%; padding: 10px; background-color: #114c9a; } .besparing{ margin-bottom: 25px; } .besparing .border{ border-top: 1px solid #95bf1d; border-bottom: 1px solid #95bf1d; } .besparing h4{ padding: 5px 0px; font-size: 18px; } .besparing h4:first-child{ } /* Form */ .form-holder{ margin: 20px auto; font-family: 'Roboto', sans-serif; background-color: #114c9a; } .form-top{ position: relative; padding: 30px 30px 10px; } .form-top h3{ margin-bottom: 10px; font-size: 26px; } .form-top p{ margin-bottom: 10px; font-size: 16px; line-height: 160%; } .form-top .aantal-deelnemers{ margin-bottom: 0px; font-size: 12px; color: #f2a500; } .form-body{ padding: 0px 20px 25px; } .green-bar{ margin: 30px auto 15px; padding: 70px 0px; background-color: #1f974d; } .green-bar .flex-holder{ margin: 0; } /* Bedankt */ .pagina-2 .bedankt{ padding: 100px 25px 200px; } .pagina-2 .bedankt p{ font-size: 16px; line-height: 160%; } /*================================================== Footer ==================================================*/ .footer{ padding: 25px 0px; border-top: 1px solid #114c9a; background-color: #fff; } .footer p{ font-size: 12px; } .footer .row.border{ padding-top: 15px; border-top: 1px solid #cbcdcf; } /*================================================== Media queries ==================================================*/ @media only screen and (max-width: 1199px){ .def-btn:after { right: 30px; } .def-btn:hover:after { right: 20px; } } @media only screen and (max-width: 991px) { .pagina-2 p.tekst { margin: 25px auto 15px; } .bol-mob { /* margin-bottom: 20px;*/ } .pagina-2 .bol-mob{ margin-top: 0px; margin-bottom: 20px; } .besparing h4 { font-size: 14px; } .img-overlay h3{ font-size: 18px; } .form-top { position: relative; padding: 30px 15px 10px; } .form-top h3 { font-size: 20px; } .def-btn { padding: 25px 10px; font-size: 20px; } .def-btn:after { display: none; /* right: 25px;*/ } .def-btn:hover:after { right: 15px; } .flex-holder h4 { margin-bottom: 10px; } } @media only screen and (max-width: 767px) { p.tekst{ font-size: 16px; line-height: 140%; } .pagina-1 p.tekst { margin-top: 25px; } .cta-holder { margin: 30px auto 20px; padding: 20px 0px; font-size: 20px; } /* Pagina 2 */ .pagina-2 p.tekst{ font-size: 18px; } .green-bar { padding: 30px 0px; } .form-holder{ margin-top: 0px; } } @media only screen and (max-width: 479px) { .header { padding: 15px 0px; } .header .adv { top: -10px; } .header .logo{ width: 260px; } .pagina-1 p.tekst { margin-top: 15px; } .bol-mob { margin-top: 15px; font-size: 16px; } .cta-holder { margin: 15px auto; padding: 15px 0px; font-size: 16px; white-space: normal; } .flex-holder h4 { font-size: 16px; } .form-holder{ margin-top: 0px; } .form-top { padding: 15px; } .form-top p { font-size: 14px; } }