/*================================================== General Styles ==================================================*/ html{ height: 100%; } body{ min-height: 100%; font-family: 'Fira Sans', sans-serif; color: #333; /* background: url(../img/achtergrond.jpg) top center no-repeat;*/ } /*================================================== 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: 50px; padding-left: 25px; font-size: 16px; border-radius: 25px; border: 1px solid #999; /* -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); */ } 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: 8px; right: 10px; } .has-feedback label~.form-control-feedback { top: 4px !important; right: 0px !important; } .form-control[disabled], fieldset[disabled] .form-control { background-color: #fff; } /*================================================== Button Styles ==================================================*/ .form-btn{ height: 50px; font-size: 20px; border-radius: 25PX; background-color: #5dcc44; } .form-btn:after{ content: "\f054"; font-family: "Font Awesome 5 Pro"; font-size: 16px; position: absolute; top: 15px; right: 30px; } .form-btn:hover{ background-color: #63d749; } .form-btn:hover:after{ right: 20px; } /*================================================== Campagne ==================================================*/ /* Kleuren */ .rood{color: #ff002a;} .groen{color: #5dcc44;} .grijs{color: #b5b5b5;} .grijs{color: #999;} p{ font-size: 16px; line-height: 140%; } h3 span.klein{ font-size: 18px; } /* Header */ .header{ padding: 35px 0px; background-color: #fff; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); } .header h3{ margin-top: 20px; line-height: 100%; } /*================================================== Pagina 1 ==================================================*/ .pagina-1{ } /* Top section */ .top-section{ padding: 25px 0px; background: url(../img/achtergrond.jpg) top center no-repeat; } .top-section .content-holder{ margin: 25px auto; background-color: #fff; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); } .top-section .content-holder .padding{ padding: 25px 30px; } .top-section .content-holder .korting{ padding: 15px; background-color: #ff002a; } .top-section .content-holder .korting h4{ font-size: 20px; } .top-section .content-holder .bullet{ position: relative; margin-bottom: 10px; padding-left: 30px; font-weight: 600; } .top-section .content-holder .optin{ margin-top: 20px; font-size: 14px; } .top-section .content-holder .bullet:before{ content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: #5dcc44; position: absolute; top: 0; left: 0; } /* Form */ .top-section .form-holder{ background-color: #f7f7f7; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); } .top-section .form-header{ position: relative; padding: 25px 15px; background-color: #666; } .top-section .form-header:after{ top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: #666; border-width: 15px; border-top-width: 10px; margin-left: -15px; } .top-section .form-body{ padding: 35px 30px; border: 1px solid #e5e5e5; background-color: #f7f7f7; } /* Bottom section */ .bottom-section{ padding: 50px 0px; background-color: #fff; } .bottom-section h3{ margin-bottom: 5px; } .bottom-section p{ font-size: 14px; } .bottom-section .trustpilot-col h3{ position: relative; margin-bottom: 25px; } .bottom-section .trustpilot-col h3:after{ content: ""; position: absolute; left: 0; bottom: -10px; width: 60%; height: 1px; background-color: #ccc; } .bottom-section .trustpilot-col .sterren{ font-size: 20px; } .bottom-section .trustpilot-col p{ font-size: 16px; } .bottom-section .trustpilot-col p.titel{ position: relative; padding-left: 10px; } .bottom-section .trustpilot-col p.titel:before{ content: "-"; position: absolute; top: 0; left: 0px; font-weight: bold; } .bottom-section .trustpilot-col p .klein, .bottom-section .trustpilot-col p.klein{ font-size: 14px; } .bottom-section .trustpilot-col .review{ padding-left: 10px; } /* Footer */ .footer{ padding: 40px 0px; border-top: 1px solid #e5e5e5; background-color: #f7f7f7; } .footer p{ font-size: 12px; } .footer a{ color: #999; text-decoration: underline; } /*================================================== Media Queries ==================================================*/ @media only screen and (max-width: 1199px){ .content-holder h3{ font-size: 23px; } } @media only screen and (max-width: 991px) { .header h3 { margin-top: 12px; } .top-section .content-holder { margin: 0px auto; } .top-section .content-holder .padding { padding: 20px 25px; } .top-section .form-body { padding: 30px 20px; } .form-btn:after { display: none; } } @media only screen and (max-width: 767px) { .header { padding: 20px 0px; } .header .logo { margin-left: auto; width: 200px; } .header h3 { margin-top: 15px; font-size: 20px; text-align: center !important; } .top-section { padding: 20px 0px; } .top-section .content-holder .bullet:nth-of-type(4) { margin-bottom: 0px; } .top-section .form-header { padding: 20px 25px; } .form-btn:after { display: block; } .form-holder .optin{ margin-top: 20px; font-size: 14px; } .bottom-section { padding: 35px 0px; background-color: #fff; } .bottom-section h3{ font-size: 20px; } h3 span.klein { font-size: 16px; } .bottom-section .trustpilot-col h3:after{ width: 100%; } .trustpilot-col .naam{ display: block; /* padding-left: 10px;*/ } } @media only screen and (max-width: 479px) { .header { padding: 15px 0px; } .header .logo { width: 150px; } .header h3 { font-size: 16px; } .top-section { padding: 10px 0px; } .top-section .content-holder .padding { padding: 15px; } .top-section .content-holder .korting h4 { font-size: 16px; } .top-section .content-holder .korting h4 span { display: block; text-align: center; } .form-btn:after { display: none; } }