/*================================================== General Styles ==================================================*/ html{ height: 100%; } body{ width: 100%; height: 100%; /* font-family: 'Source Sans Pro', sans-serif;*/ font-family: 'Quattrocento Sans', sans-serif; font-weight: normal; font-style: normal; color: #06163a; } /*================================================== Form Styles ==================================================*/ #success_message, .help-block{ display: none !important; } .form-horizontal .form-group { margin-left: 0 !important; margin-right: 0 !important; } .form-group{ margin-bottom: 10px; } .form-control{ height: 42px; border-radius: 0px; } select.form-control{ padding-left: 8px; } 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; } .form-horizontal .has-feedback .form-control-feedback { margin-top: 5px; right: 10px; } .has-feedback label~.form-control-feedback { top: 4px !important; right: 0px !important; } .test{ border:solid 1px; } /*================================================== Button Styles ==================================================*/ button { white-space: inherit !important; } .btn:focus, .btn:active:focus, .btn.active:focus{ outline: none; ! important; outline-style: none; color: #fff; } .form-btn{ padding: 20px 10px 16px; font-size: 24px; font-weight: 700; line-height: 100%; color: #fff; outline: 0; outline: none; border: none; border-radius: 30px; background-color: #60ae04; } .form-btn:after{ content: '\f054'; position: absolute; right: 50px; top: 18px; font-family: "Font Awesome 5 Pro"; font-size: 16px; font-weight: 900; color: #fff; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -o-transition: all 250ms ease; -ms-transition: all 250ms ease; transition: all 250ms ease; } .form-btn:hover{ color: #fff; background-color: #79c71c; } .form-btn:hover:after { right: 50px; } /*================================================== Campagne ==================================================*/ /* Kleuren */ .wit{color: #fff;} .zwart{color: #000;} .rood{color: #ff3514;} .blauw{color: #06163a;} .oranje{color: #f66e15;} /* Header */ .header-top{ padding: 18px 0px; } .header-top .logo{ margin-left: 40px; } .header-top .logos{ margin-top: 10px; margin-right: 0px; } .header-top h1{ margin-top: 25px; font-size: 16px; text-align:right; } .header-bottom{ padding: 16px 0px; background-color: #ff3514; } .header-bottom h1{ font-size: 30px; } /*================================================== Pagina 1 ==================================================*/ .pagina-1{ padding-top: 20px; } .img-holder{ position: relative; width: 750px; max-width: 100%; } .img-holder img{ margin-left: 0px; } .img-holder .overlay{ position: absolute; left: 0; right: 0; margin: 215px auto; width: 669px; padding: 25px 15px; background: rgba(255,255,255,0.9); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2); } .img-holder .overlay h4{ position: relative; margin-bottom: 15px; padding-left: 30px; line-height: 1.3; } .img-holder .overlay h4 span{ font-weight:700; } .img-holder .overlay h4:last-child{ margin-bottom: 0px; } .cta-pijl { position: relative; margin-top: 20px; width: 709px; max-width: 100%; padding: 14px 10px; background-color: #ff3514; background-color: #f66e15; z-index: 0; } .cta-pijl:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(227, 6, 19, 0); border-left-color: #ff3514; border-left-color: #f66e15; border-width: 38px; margin-top: -38px; border-left-width: 25px; } .cta-pijl h2{ font-size: 36px; } .cta-pijl h2 span.klein{ font-size: 0.8em; } .cta-pijl h2 span.kleiner{ font-size: 0.5em; } .cta-pijl h3{ margin-top: 3px; font-size: 20px; } p.erkening { margin: 20px 0px; } .opties{ margin-top:20px; } #clock, #tools, #phone, #cop, #sos, #garantee{ position:relative; font-size:22px; font-weight:700; padding-left:60px; padding-top:15px; padding-bottom:10px; } #clock::before, #tools::before, #phone::before, #cop::before, #sos::before, #garantee::before{ position:absolute; top:8px; left:0px; } #clock::before{ content: url(../img/clock.png); } #tools::before{ content: url(../img/tools.png); } #phone::before{ content: url(../img/phone.png); } #cop::before{ content: url(../img/cop.png); } #sos::before{ content: url(../img/sos.png); } #garantee::before{ content: url(../img/garantee.png); } .bol{ margin: 0 auto; margin-top:40px; width: 195px; height: 195px; padding-top: 30px; font-size: 24px; text-align: center; white-space: pre-line; line-height: 110%; border-radius: 50%; background-color: #ff7814; } .bol .groot{ font-size: 2em; line-height: 100%; } .bol .klein{ font-size: 0.6em; line-height: 100%; } /* Form */ .form-holder { /* margin: 20px 0px;*/ -webkit-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.05); -moz-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.05); box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.05); } .form-header{ position: relative; padding: 15px 30px; background-color: #06163a; } .form-header:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(227, 6, 19, 0); border-top-color: #06163a; border-width: 15px; margin-left: -15px; } .form-header h5{ line-height: 140%; } .form-body{ padding: 25px 10px 20px; border: 1px solid #ccc; border-top: none; background-color: #fff; } p.opt-in{ margin: 10px auto; color: #999; } .voorwaarden{ padding: 15px 0px 20px; } .voorwaarden a, .voorwaarden a:hover{ color: #323232; } /* Bottom section */ .bottom-section-1{ padding: 20 0px; background-color: #fff; } .bottom-kader{ margin: 20px 0px; } .bottom-rood { /* margin-top: 10px;*/ border-top: 1px solid #ff3514; } .arrow-red.text-center { margin-top: -4px; font-size: 20px; } p.sterretje{ margin: 50px auto 10px; color: #999; } /*================================================== Pagina 2 ==================================================*/ .pagina-2{ padding: 100px 0px 75px; background-color: #fff; } /*================================================== Footer ==================================================*/ .footer{ margin-top: 60px; border-top: 1px solid #ff3514; padding: 20px 0px 50px; } .footer img{ margin-bottom: 10px; width: 100px; } /*================================================== Media Queries ==================================================*/ @media only screen and (max-width: 1199px){ .header-top h1 { /* margin-top: 26px; font-size: 28px; */ } .img-holder .overlay { width: 560px; margin: 10px auto; bottom:10px; } .cta-pijl { width: 575px; } .cta-pijl h3{ /* font-size: 20px;*/ } p.opt-in { margin: 20px auto; } .bottom-kader { min-height: 366px; } } @media only screen and (max-width: 991px) { .header-top h1 { margin-top: 8px; text-align:center; } .header-top h1 span{ display: block; } .header-bottom h1 { font-size: 30px; } .img-holder .overlay { margin: 10px auto; bottom:10px; width: 433px; } .img-holder .overlay h3 { font-size: 18px; } .img-holder .overlay h4 { font-size: 16px; padding-left: 10px; } .cta-pijl { width: 428px; } .cta-pijl h2 { font-size: 30px; } .cta-pijl h3 { margin-top: 2px; font-size: 16px; } .cta-pijl:after { border-width: 34px; margin-top: -34px; border-left-width: 25px; } .form-header{ padding: 15px; } .form-btn{ font-size: 20px; } .form-btn:after { right: 30px; top: 19px; font-size: 14px; } .form-btn:after:hover { right: 20px; } .bottom-kader { min-height: 355px; } .bottom-kader h3.koptekst { height: 74px; font-size: 18px; } .bottom-kader h5{ font-size: 14px; } .bottom-section-2 h4{ font-size: 14px; } } @media only screen and (max-width: 767px) { .header .logo { margin-left: auto; } .header-top h1 { margin-top: 10px; margin-left: auto; text-align: center !important; } .header-top h1 span{ display: inline; } .header-bottom h1 { margin-top: 0px; font-size: 24px; text-align: center; } .img-holder .overlay { margin: 7px auto; bottom:10px; width: 410px; } .img-holder .overlay h3 { margin-bottom: 15px; } .img-holder .overlay h4 { padding-left: 25px; font-size: 15px; } .orange-header{ padding:14px; color:#fff; background-color: #ff7814; } .orange-header span.groot{ font-size:24px; } .orange-header span.klein{ font-size:12px; } .form-header h5 { width: 100%; } .bottom-section-1 { /* padding: 65px 0px 70px;*/ background-color: #fff; } .bottom-kader { min-height: 0px; margin-bottom: 10px; } .bottom-section-2 { padding: 70px 0px 15px; } .bottom-section-2 h4:first-child{ margin-bottom: 30px; } #clock, #tools, #phone, #cop, #sos, #garantee { font-size:18px; } .options-small{ padding:40px; } .pagina-2 h3{ font-size: 22px; } } @media only screen and (max-width: 479px) { .header-top{ padding: 10px 0px; } .header-top h1{ font-size: 16px !important; } .logo{ width: 80px; } .header h1 { font-size: 18px; } .pagina-1{ padding-top: 10px; } .img-holder .overlay { position: relative; margin: auto; margin-top:10px; padding: 0 0 10px; width: 100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #clock, #tools, #phone, #cop, #sos, #garantee { font-size:16px; } .form-body { padding: 10px 10px 20px; } .bottom-section-1 { padding: 0px 0px 25px; } }