/*Fade in effect & one pager AFBLIJVEN*/
.fullpage-wrapper {
	width: 100%!important;
	transform: none!important;
}

.fp-section {
	width: 100%!important;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	transition: all .7s ease-in-out;
}

.fp-section.active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}

/*CSS Variables*/
:root {
    --pink: #FF6C89;
    --grey: #838282;
    --white: #FFFFFF;

    --light: 300;
    --medium: 500;
    --semibold: 600;

    --psize: 1.3em;
    --h1size: 2.2em;
    --h2size: 1.3em;
    --asize: 1.3em;

    --lineheight: 37px;

    --gradient: linear-gradient(-90deg, #FF9A8B 0%, #FF6A88 50%, #FF99AC 100%);
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px; /*20px*/
    line-height: var(--lineheight);
    /*
    font-weight: 300; - Light
    font-weight: 500; - Medium
    font-weight: 600; - SemiBold
    */
    /* Heading teksten medium*/
    /* Actieve navs zijn Semibold*/
}

/*
    Kleuren
    Container BG kleur: #FFFFFF wit
    Wrapper BG kleur #F2F2F2 grijswit
    Font accent kleur #FF6C89 pink
    Tekst kleur #868686 donkergrijs (geen zwart...)

*/
a {
    text-decoration: none;
}
#section0 {
    background-image: url(../img/1/bol.svg), url(../img/1/vlekBG.svg);
    background-position: 0vw bottom, 42.5vw;
    background-repeat: no-repeat;
    background-size: auto, 1500px;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 85%;
    width: 85%;
    transform: translate(-50%,-50%);
    background: #F1F1F1;
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
    border-radius: 15px;
    background-image: url(../img/1/vlek.svg);
    background-position: 35vw;
    background-repeat: no-repeat;
    background-size: 1500px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    grid-auto-rows: 20% 75%;
}

.navleft, .navright, .wrappertekst, .wrapperafbeelding{
    padding: 40px 90px;
    border-radius: 15px;
}
.navleft{
    grid-row: 1/2;
    /*background-color: rgba(96, 23, 212, 0.15);*/
    grid-column: 1/2;

}
.navright {
    grid-row: 1/2;
    /*background-color: rgba(255, 250, 23, 0.15);*/
    grid-column: 2/2;
    text-align: justify;
}
.navright:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.wrappertekst {
    /*background-color: rgba(255, 0, 0, 0.15);*/
    grid-row: 2/3;
    grid-column: 1/2;
}
#section0 .wrapperafbeelding {
    /*background-color: rgba(150, 34, 230, 0.15);*/
    grid-row: 2/3;
    grid-column: 2/2;

    background-image: url(../img/1/runner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75%;
}
navleft > a {color: var(--pink);}
.navright > a {color: var(--white);}
/*
EINDE SECTIE 1
/*/





/*
START SECTIE 2
/*/
#section1 {
    background-image: url(../img/2/vlekBG.svg), url(../img/2/bol.svg);
    background-position: -57vw bottom, 71vw bottom;
    background-repeat: no-repeat;
    background-size: 1500px, 565px;
}

#section1 .wrapperafbeelding  {
    background-image: url(../img/2/Profile.png);
}

#section1 .wrapper {
    background-image: url(../img/2/vlek.svg);
}
/*
EINDE SECTIE 2
/*/






/*
START SECTIE 3
/*/
#section2 {
    background-image: url(../img/3/bol.svg), url(../img/3/vlek.svg);
    background-position: 0vw bottom, 81vw bottom;
    background-repeat: no-repeat;
    background-size: 880px, 335px;
}

#section2 .wrapperafbeelding {
    background-image: url(../img/3/dude.png);
}

#section2 .wrapper {
    background-image: url(../img/3/vlek-container.svg);
}
/*
EINDE SECTIE 3
/*/

nav > a {
    color: var(--pink);
    font-size: var(--asize);
    font-weight: var(--medium);
}
nav > a > img {
    vertical-align: middle;
    padding-right: 10px;
}
.navright a {
    display: inline-block;
    vertical-align: middle;
}


h1 {
    font-weight: var(--medium);
    color: var(--pink);
    font-size: var(--h1size);
    margin-top: 10px;
    margin-bottom: 35px;
}
h2 {
    font-weight: var(--light);
    color: var(--pink);
    font-size: var(--h2size);
}
p {
    color: var(--grey);
    font-size: var(--psize);
    font-weight: var(--medium);
}

.mail {
    margin-top: 30px;
    width: 110%;
    box-shadow: 0 20px 50px 0 rgba(0,0,0,0.45);
}
input[type="email"] {
    width: 70%;
    float: left;
    height: 53px;
    border-radius: 50px;
    background: #FFFFFF;
    outline: none;
    border: none;
    text-align: center;
    font-size: var(--psize);
    color: var(--grey);
    font-weight: var(--medium);
}

button {
    margin-left: -10%;
    height: 55px;
    width: 25%;
    float: left;
    border-radius: 50px;
    background-image: var(--gradient);
    border: none;
    font-size: var(--psize);
    font-weight: var(--medium);
    color: var(--white);
}

input[type="email"]:invalid {
    transition: .3s;
}

input[type="email"]:valid {
    transition: .3s;
}


/* countdown timer */

    .container {
    width: 110%;
    /*background-color: rgba(150, 34, 230, 0.15);*/
    text-align: center;
}
    .container .content > div {
    display: inline-block;
    margin: 100px 10px 0;
    width: 120px;
    font-size: 5em;
    color:var(--white);
}

    .container .title span {
    display: inline-block;
    width: 140px;
    height: 50px;
    font-size:1.4em;
    color:var(--white);
    line-height: 55px;
}