/* Custom font */
@font-face {
 font-family: 'Platform Regular';
 src: url('https://closecontact.eu/naturalis/platform/Platform-Regular-Web.eot'), url('https://closecontact.eu/naturalis/platform/Platform-Regular-Web.eot?#iefix') format('embedded-opentype'), url('https://closecontact.eu/naturalis/platform/Platform-Regular-Web.woff') format('woff'), url('https://closecontact.eu/naturalis/platform/Platform-Regular-Web.woff2') format('woff2'), url('https://closecontact.eu/naturalis/platform/platform-regular.otf') format('opentype'), url('https://closecontact.eu/naturalis/platform/platform-regular-web.ttf') format('truetype'), url('https://closecontact.eu/naturalis/platform/Platform-Regular-Web.svg#platform') format('svg');
}
@font-face {
 font-family: 'Platform Bold';
 src: url('https://closecontact.eu/naturalis/platform/Platform-Light-Web.eot');
 src: local('??'), url("https://closecontact.eu/naturalis/platform/Platform-Bold-Web.woff") format("woff"), url("https://closecontact.eu/naturalis/platform/platform-bold-web.otf") format("opentype"), url("https://closecontact.eu/naturalis/platform/Platform-bold-Web.svg#platform") format("svg");
}
@font-face {
 font-family: 'Platform Light';
 src: url('https://closecontact.eu/naturalis/platform/Platform-Bold-Web.eot');
 src: local('??'), url("https://closecontact.eu/naturalis/platform/Platform-Light-Web.woff") format("woff"), url("https://closecontact.eu/naturalis/platform/platform-Light-web.otf") format("opentype"), url("https://closecontact.eu/naturalis/platform/Platform-Light-Web.svg#platform") format("svg");
}
@font-face {
 font-family: 'Akkurat Pro';
 src: url('https://closecontact.eu/naturalis/akkurat/akkurat-pro-regular.eot');
 src: local('??'), url("https://closecontact.eu/naturalis/akkurat/akkurat-pro-regular.woff") format("woff"), url("https://closecontact.eu/naturalis/platform/platform-bold.otf") format("opentype"), url("https://closecontact.eu/naturalis/akkurat/akkurat-regular.svg#akkurat-regular") format("svg");
}
body {
 margin: 0;
 font-family: 'Akkurat Pro', Fallback, sans-serif;
}
h1, h2, h3 {
 font-family: Platform Bold, Arial;-webkit-font-feature-settings: "ss01" 1; 
font-feature-settings: "ss01" 1;
}
* {
 box-sizing: border-box;
}
.inner-content {
 max-width: 87.5rem;
 margin: 0 auto;
}
.left {
 float: left;
}
header {
 min-height: 21.875rem;
 background-image: url('https://image.crm.naturalis.nl/lib/fe3a157075640474741777/m/1/f7abf35a-e636-446c-a918-117eda939c48.png');
 background-position: center center;

 background-size: cover;
}


header .inner-content{padding:0;}



.form-group span{display:none;color: #a51b00;font-size: .75rem;}
.form-group.error span{display:block}
.form-group.error input{margin-bottom:5px;border-bottom: 2px solid #a51b00;}



.logo {
 width: 10%;
 padding:  1.25rem;
 position:absolute;
 margin-top:0.625rem;
}
.logo img {
margin-top:0rem; width: 100%;
}
h1 {
 margin-top:0;
 padding-top:15px;
 position:relative;
 top:80px;
 margin-left: 100px;
 padding-left: 1.25rem;
 border-left: 0.25rem solid #00A050;
 line-height: 3.6rem;
 color: #fff;
 font-weight: normal;
 font-size: 7rem;
}
span.thin {
 font-family: 'Platform Light';
 font-weight: 200;
}
h1 span.thin {
 font-size: 4rem
}
h2 span.thin {
 font-size: 2.75rem;
}
.thin_heading {
 font-size: 4rem;
}
.small {
 font-size: 7rem;
}
.heading1 {
 font-size: 7rem;
}
.extrathin {
 font-size: 2.625rem;
 font-weight:normal;
}
h2 {
 display: inline-block;
 font-size: 4rem;
 color: #00A050;
 font-weight: 600;
 line-height: 3rem;
}
.heading {
 position: relative;
 padding-left: 7.5rem;
 z-index:1;
 padding-top: 30px;
 padding-bottom:30px;
}
.line {
 margin-left: 0.625rem;
 width: 5.625rem;
 position: absolute;
 top: 6.25rem;
 left: 0;
 height: 0.25rem;
 background-color: #00A050;
 border-radius: 0.125rem;
}
.form_section_nieuwsbrief {
 background: #F9F7F7;
}
.form_section_gegevens>div.inner-content {
 position: relative;
 overflow: visible;
}
.blue-box {
margin:0;
 top: -60px;
 width: 40%;
 position: absolute;
 right: 1.25rem;
 padding: 6.25rem;
 background-color: #027EE2;
 color: #fff;
 line-height: 2rem;
 font-size: 1rem;
 width: 36.25rem;
 height: 22.5rem;
 overflow: hidden;
 background-image: url('https://beheer.closecontact.nl/testcloudpages/Naturalis/jellyfish-small-2.gif');
 background-size: cover;
}

.grey{ background: #F9F7F7;}


footer .inner-content {
 min-height: 12.5rem
}
footer .inner-content-grey {
 min-height: 6.25rem
}
footer ul {
 font-size: 0.813rem;
 display: flex;
 flex-direction: row;
 float: right;
 list-style: none;
 width: 15.625rem;
 justify-content: space-between;
 margin-right: 2.5rem;
}
footer ul li>a {
text-decoration:none;color:#616161;
 display: block;
 padding: 1.25rem 0;
 font-size:0.875rem;
}
section .inner-content, footer .inner-content {
 position: relative;
 margin: 0 auto;
 /*background: rgba(0,0,0,0.02);*/
}
.blue-box p {
 position: relative;
 z-index: 3;
 margin: 0;
 padding: 0;
}
.jellyfish {
 display: none;/*z-index:1;transform:rotate(150deg); offset-path: path('M -20,-100 C 100,170 230,100 480,-100 S 680,20 -50,255');
  animation: move 35s  infinite  linear;position:absolute;display:block;left:-50px;width:150px;bottom:-1.25rem;opacity:0.15;*/
}
button.submit {
 -webkit-appearance: none;
 -webkit-border-radius: 0;
 cursor: pointer;
 background: #00A050;
 font-weight: bold;
 border: none;
 color: #fff;
 margin: 1.875rem 0;
 padding: 1.25rem 1.875rem;
 font-size: 1.125rem;
 font-family: "Akkurat Pro";
}


/*TURTLE ANIMATION */

@keyframes move {
 0% {
 offset-distance: 0%;
}
 100% {
 offset-distance: 100%;
}
}
.bg-animal {
 opacity: 0.08;
 position: absolute;
 bottom: -9.375rem;
 z-index:0;
}
.fish {
 left: -11.25rem;
 width: 16.875rem;
 height: 16.625rem
}
.turtle {
 right: -6.25rem;
 width: 17.5rem;
 height: 17.125rem
}
/* CONTAINER Z (2e) - checkboxes */
.label-holder {
 box-sizing: content-box;
 display: block;
 position: relative;
 padding-left: 2.188rem;
 margin-bottom: 0.75rem;
 cursor: pointer;
 font-size: 1rem;
 line-height: 1.563rem;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/* Hide the browser's default checkbox */
.label-holder input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
/* Create a custom checkbox */
.checkmarkZ {
 box-sizing: content-box;
 position: absolute;
 top: 0;
 left: 0;
 height: 1.125rem;
 width: 1.125rem;
 background-color: #eee;
 border: 0.125rem solid #A5A5A5;
 border-radius: 0.125rem;
}
/* On mouse-over, add a grey background color */
.label-holder:hover input ~ .checkmarkZ {
 background-color: #ccc;
}
/* When the checkbox is checked, add a green background */
.label-holder input:checked ~ .checkmarkZ {
 background-color: #F9F7F7;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkZ:after {
 content: "";
 position: absolute;
 display: none;
}
/* Show the checkmark when checked */
.label-holder input:checked ~ .checkmarkZ:after {
 display: block;
 background: #00A050;
}
/* Style the indicator (dot/circle) */
.label-holder .checkmarkZ:after {
 top: 0.188rem;
 left: 0.188rem;
 width: 0.75rem;
 height: 0.75rem;
 border-radius: 0%;
 background: #00A050;
}
/* CONTAINER X - Radio buttons */
/* The container */
.radio-group label {
 box-sizing: content-box;
 display: inline-block;
 position: relative;
 padding-top: 0.313rem;
 margin-bottom: 0.75rem;
 cursor: pointer;
 font-size: 1rem;
 padding-left: 2.188rem;
 padding-right: 1.875rem;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/* Hide the browser's default radio button */
.radio-group label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 border: 0.063rem solid #000;
}
/* Create a custom radio button */
.checkmark {
 position: absolute;
 top: 2px;
 left: 0;
 height: 20px;
 width: 20px;
 background-color: #fff;
 border-radius: 50%;
 border: 0.125rem solid #A5A5A5;
}
/* On mouse-over, add a grey background color */
.radio-group label:hover input ~ .checkmark {
 background-color: #ccc;
}
/* When the radio button is checked, add a green background */
.radio-group label input:checked ~ .checkmark {
 background-color: #fff;
 box-sizing: border-box;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-group label input:checked ~ .checkmark:after {
 display: block;
}
/* Style the indicator (dot/circle) */
.radio-group label .checkmark:after {
 box-sizing: border-box; 
 top: 2px;
 left: 2px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #00A050;
}
/* TEXT FIELDS PERSOONSGEGEVENS */
.form-wrapper {
 width: 25rem;
 padding: 0 0 2.5rem;
}
.form-wrapper input {
 color: #616161;
 box-sizing: content-box;
 padding: 0.5rem;
 display: block;
 width: 100%;
 border: none;
 border-bottom: 0.063rem solid #A5A5A5;
 font-size:1rem;
}
.form-wrapper input:focus {
 outline: none;
}
.form-group {
 margin: 2.5rem 0;
}
.form-group {
 position: relative;
}
.form-group + .form-group {
 margin-top: 1.875rem;
}
.form-label {
 font-family: "Akkurat Pro";
 font-size: 1rem;
 font-style: italic;
 position: absolute;
 left: 0.5rem;
 top: 0.313rem;
 color: #616161;
 background-color: none;
 z-index: 10;
 -webkit-transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out;
 transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out;
 transition: transform 150ms ease-out, font-size 150ms ease-out;
 transition: transform 150ms ease-out, font-size 150ms ease-out, -webkit-transform 150ms ease-out;
}
.focused .form-label {
 -webkit-transform: translateY(-160%) translateX(-8px);
 transform: translateY(-160%) translateX(-8px);
 font-style: normal;
 font-size: 1rem;
}
.form-input {
 position: relative;
 padding: 0.75rem 0px 0.313rem 0;
 outline: 0;
 border: 0;
 background: none;
 -webkit-transition: box-shadow 150ms ease-out;
 transition: box-shadow 150ms ease-out;
}
.form-input:focus {
 border-bottom: 0.125rem solid #007DE1

}
.form-input.filled {
}
.empty_element_grey {
 height:28.125rem;
}
.empty_element_white {
 height:18.75rem;
}
.heading.bedankt p {
 max-width: 31.25rem;
 height:18.75rem;
 line-height:2rem
}

@media screen and (max-width:1680px) {

h1 {top:120px;padding-top:0;
font-size:6rem;
 }
 
 h1 span.thin{
 font-size:3.75rem;
 }

 
 html, body {
 width: 100%;
 overflow-x: hidden;
}
}

@media screen and (max-width:1366px) {
.inner-content{max-width:1000px}
.blue-box{width:450px;padding:50px;height:auto;}

.logo{width:15%;}
}

@media screen and (max-width:1200px) {
.blue-box {
 width: 28.125rem;
 padding: 3.5em 1.8em;
 height: auto;
}
}
@media screen and (max-width:1000px) {
.heading.bedankt{padding-top:60px;} 
.heading.bedankt .line{ top: 8.375rem;}
}
@media screen and (max-width:800px) {

.heading.bedankt{padding-top:0;} 
.heading.bedankt .line{ top: 5.375rem;
}
/* CONTAINER X - Radio buttons */
/* The container */
.radio-group label {
 padding-left: 1.688rem;padding-right: 1.563rem;
}
header>div {
 display: block;
}
.fish {
 left: -40px;
 bottom:-200px;
}
.turtle {
 right: -40px;
 bottom: -100px;
}
.logo {
 width: 30%;
 max-width:190px;
}
.logo img {
margin-top:0;
}
h1 {
top:160px;
 width: calc(100% - 40px);
 margin: 0 1.25rem;
 font-size: 3.5rem;
 line-height: 2.25rem;
}
h1 span.thin {
 font-size: 2rem;
 font-weight: 200;
}
h1 span.heading1 {
 font-size: 3rem;
}

.blue-box {
 margin: 0 auto;
 width: calc(100% - 40px);
 position: relative;
 left: 0;
 top: 0;
}
.inner-content {
 position: relative;
 margin: 0;
 padding-top: 1.25rem;
 padding-bottom: 0;

}
h2 {
 font-size: 3.5rem;
 line-height: 2.75rem
}
h2 span.thin {
 font-size: 2.25rem
}
.line {
 display: none;
}
.heading {
 padding: 0 2.5rem;
 background-image: url('https://beheer.closecontact.nl/testcloudpages/Naturalis/line.png');
 background-repeat: no-repeat;
 background-position: left 4.188rem;
}
.form-wrapper input.form-input {
 box-sizing: border-box;
 width: calc(100% - 100px);
}
div .body_copy {
 width: 11.25rem;
 height:18.75rem;
 line-height:2rem
}
.heading1 {
 font-size: 4rem;
}
}