/*
========================================
Reset
========================================
*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1em;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    border-collapse: collapse;
}

:root {
    font-size: 1em;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
========================================
Typo Styling
========================================
*/


h1 {
    Font-Family: 'Permanent Marker', Cursive;
    font-size: 3em;
}

h2 {
    Font-Family: 'Permanent Marker', Cursive;
    font-size: 2em;
    margin-bottom: 1em;
}

h3 {
    Font-Family: 'Permanent Marker', Cursive;
    font-size: 1.5em;
}

h4 {
    Font-Family: 'Overpass', Sans-Serif;
    font-size: 0.9em;
}

p {
    font-family: 'Neuton', serif;
    Font-Family: 'Overpass', Sans-Serif;
    font-size: 1.1em;
    line-height: 1.2em;
    letter-spacing: 0.01em;
}

a {
    font-family: 'Neuton', serif;
    Font-Family: 'Overpass', Sans-Serif;
    font-size: 1em;
    line-height: 1.2em;
    letter-spacing: 0.01em;
    text-align: center;
}

/*
========================================
Sections Styling
========================================
*/

.wrapper {
    display: grid;
    grid-template-columns: 2vw 1fr 1fr 1fr 1fr 1fr 1fr 2vw;
    grid-column-gap: 10px;
    overflow-x: hidden;
}

.background {
    display: block;
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: grey;
    background-size: cover;
    z-index: -1;
    grid-column: 1/9;
    box-shadow: inset 0 0 10em 3em rgba(0,0,0, .75);
}

img {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 15%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

/*
========================================
Parallax Animation
========================================
*/

main .show {
    opacity: 1;
    transform: translateY(0);
}

main section.panel span.show {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

.sideScroll.fixed {
    position: fixed
}

#white-space .bottom {
    position: absolute;
    bottom: 0;
    top: auto;
}

div.reveal {
    transform: translateX(0vw);
    opacity: 1;
}

/*
.stopScroll {
    overflow:hidden;
}

.goScroll {
    overflow: initial;
}
*/

/*
========================================
Header Styling
========================================
*/

header {
    display: block;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 1/9;
    height: 100vh;
    width: 100%;
    background-color: #000;
}

.background {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(assets/images/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0.6;
}

header h1 {
    position: absolute;
    font-size: 3vw;
    max-width: 25%;
    z-index: 2;
}

.center {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}


/*
========================================
Header SVG Styling
========================================
*/

svg #panel1-lamp {
    transform-origin: 50% -65px;
    animation: swing 1.5s infinite alternate ease-in-out;
}

@keyframes swing {
  0% { transform: rotate(-3deg) }
  100% { transform: rotate(3deg) }
}

header > svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    fill: black;
    z-index: 100;
}

.center svg  {
    width: 60%;
}

#panel1-tafel,
#panel1-karakter2-lijn path,
#panel1-karakter1-lijn path,
#panel1-lamp-lijn path {
    fill: none;
    stroke: black;
    stroke-width: 4px;
    stroke-linecap: round;
}

svg #panl1-karakter1-shirt path {
    fill: rgba(230, 35, 35, 1);
}

svg #panel1-lamp-licht path {
    fill: url(#panel1-light) rgba(255,255,255, 0.8);
}

svg #panel1-lamp-licht {
    animation: flicker 3s ease-in-out infinite;
}

.flicker{
	animation: flicker 10s infinite;
}

@keyframes flicker {
	0%, 20%, 24%, 60%, 64%, 65%, 77%, 100% {
		opacity: .9;
	}
	20.5%, 24.5%, 63%, 65.5%, 66%, 76% {
		opacity: 0.4;
	}
}

svg #panel1-gradient {
    fill: url(#panel1-wall) rgba(200,200,200, 1);
}

svg #panel1-karakter2-fill path,
svg #panel1-karakter1-fill path {
    fill: rgba(255, 255, 255, 0.8);
}

svg #panel1-frame-light {
    fill: rgba(86, 86, 86, 1);
}

svg #panel1-frame-dark {
    fill: rgba(53, 53, 53, 1);
}

/*
========================================
Intro Styling
========================================
*/

#intro {
    grid-column: 1/9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: black;
    color: white;
}

.metadata {
    display: grid;
    grid-template-columns: 2vw 1fr 1fr 1fr 1fr 1fr 1fr 2vw;
    grid-column-gap: 10px;
    grid-column: 1/9;
    z-index: 1;
    opacity: 0;
    transform: translateY(3em);
    transition: all .4s ease-out;
}

.metadata div:first-of-type {
    grid-column: 4/6;
    grid-row: 3/4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.metadata h3 {
    grid-column: 4/6;
    grid-row: 1/2;
    margin-bottom: 1em;
}

.metadata h3 ~ h4 {
    grid-column: 4/6;
    grid-row: 2/3;
    margin-bottom: 5em;
}

.metadata > p:first-of-type {
    grid-column: 4/6;
    grid-row: 4/5;
}

.metadata > p:last-of-type {
    grid-column: 4/6;
    grid-row: 5/6;
}

.metadata h4 {
    margin-bottom: 2em;
    text-align: center;
    color: grey;
}

.metadata p + p {
    margin-top: 1em;
}



/*
========================================
Main Styling
========================================
*/

main {
    display: grid;
    grid-template-columns: inherit;
    grid-column: 1/9;
}

/*
========================================
Panels Styling
========================================
*/

.grid {
    display: grid;
    grid-template-columns: inherit;
    grid-column: 1/9;
}

.panel {
    display: grid;
    grid-template-columns: inherit;
    grid-column: 1/9;
    height: 80vh;
}

.panel p {
    grid-column: 2/8;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*p*/

.panel:nth-of-type(2) p,
.panel:nth-of-type(9) p,
.panel:nth-of-type(10) p,
.panel:nth-of-type(12) p,
.panel:nth-of-type(14) p,
.panel:nth-of-type(16) p,
.panel:nth-of-type(7) p {
    grid-column: 4/6;
}

.panel:nth-of-type(13) p,
.panel:nth-of-type(14) p {
    grid-column: 6/8;
}

.panel:nth-of-type(1) p,
.panel:nth-of-type(3) p {
    grid-column: 5/7;
    grid-row: 1/2;
}

/*SVG*/

.panel:nth-of-type(12) .images,
.panel:nth-of-type(15) .images,
.panel:nth-of-type(18) .images {
    grid-column: 6/8;
}

.panel:nth-of-type(2) .images,
.panel:nth-of-type(9) .images,
.panel:nth-of-type(10) .images,
.panel:nth-of-type(12) svg,
.panel:nth-of-type(14) .images,
.panel:nth-of-type(16) .images,
.panel:nth-of-type(19) .images {
    grid-column: 4/6;
}

.panel:nth-of-type(13) .images,
.panel:nth-of-type(17) .images {
    grid-column: 2/4;
}

.panel:nth-of-type(1) .images,
.panel:nth-of-type(3) .images {
    grid-column: 1/6;
    grid-row: 1/2;
}

.panel:nth-of-type(7) .images {
    grid-column: 1/4;
}

/*
.panel:nth-of-type(1) p {
    grid-row: 1/2;
}
*/

.panel:nth-of-type(5) {
    height: 100vh;
}

.panel:nth-of-type(7) {
    height: 50vh;
}

.panel:nth-of-type(5) p:first-of-type {
    grid-column: 3/5;
    grid-row: 1/2;
}

.panel:nth-of-type(5) p:last-of-type {
    grid-column: 5/7;
    grid-row: 2/3;
}

.panel:nth-of-type(5) .images:first-of-type {
    grid-column: 2/5;
    grid-row: 2/3;
}

.panel:nth-of-type(5) .images:last-of-type {
    grid-column: 5/8;
    grid-row: 1/2;
}

.panel:nth-of-type(6) {
    grid-column: 1/9;
}

.panel:nth-of-type(6) p:nth-of-type(1) {
    grid-column: 2/4;
    grid-row: 1/2;
}

.panel:nth-of-type(6) p:nth-of-type(2) {
    grid-column: 4/6;
    grid-row: 2/3;
}

.panel:nth-of-type(6) p:nth-of-type(3) {
    grid-column: 6/8;
    grid-row: 3/4;
}

.panel:nth-of-type(6) .images:first-of-type {
    grid-column: 5/7;
}

.panel:nth-of-type(6) .images:last-of-type {
    grid-column: 3/5;
    grid-row: 3/4
}

.panel:nth-of-type(8) p {
    grid-row: 3/6;
    grid-column: 1/8;
}

.panel:nth-of-type(8) .images {
    grid-row: 5/9;
    grid-column: 6/7;
}

.panel .images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
========================================
Panels SVG Styling
========================================
*/

/*
.panel svg {
    animation: floating 2s infinite ease-in-out alternate;
    max-height: 100%;
}

@keyframes floating {
	0% {
		transform: translatey(0px);
    }
    100% {
		transform: translatey(.3em);
    }
}
*/

.panel:nth-of-type(1) .images svg {
    height: 80%;
    width: auto;
}

.panel:nth-of-type(1) #panel2-karakter2 {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(1) #panel2-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(2) .images {
    position: absolute;
    height: 80%;
    width: 100%;
}

.panel:nth-of-type(2) .images svg {
    position: absolute;
    stroke: rgba(0, 0, 0, 1);
    height: auto;
    width: 30%;
    stroke-width: 4px;
    stroke-linecap: round;
    animation: none;
}

.panel:nth-of-type(2) .images:first-of-type svg {
    left: 0;
    bottom: 0;
}

.panel:nth-of-type(2) .images:last-of-type svg {
    transform: rotate(180deg);
    right: 0;
    top: 0;
}

.panel:nth-of-type(3) svg {
    height: 80%;
}

#panel3-character1 path {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

#panel3-background path {
    stroke: none;
    fill:  rgba(230, 35, 35, 1);
    stroke-width: 4px;
    stroke-linecap: round;
}

#panel3-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(5) .images:first-of-type {
    transform: translateY(-6vh);
}

.panel:nth-of-type(5) .images svg {
    height: 100%;
    width: auto;
}

.panel:nth-of-type(5) .images:last-of-type {
    transform: translateY(6vh);
}

.panel:nth-of-type(5) #panel5-queen {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(5) #panel5-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(5) #panel5-ww2 {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(5) #panel5-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-child(6) .images svg {
    height: 90%;
    width: auto;
}

.panel:nth-of-type(6) .images:first-of-type {
    transform: translateY(3vh);
}

.panel:nth-of-type(6) .images:last-of-type {
    transform: translateY(-3vh);
}

.panel:nth-of-type(6) .images:first-of-type svg {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(6) #panl6-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(6) #panel6-eyes {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(6) #panel6-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(7) svg {
    height: 90%;
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
}

.panel:nth-of-type(7) #paspoort-background {
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(8) .images {
    transform: translateX(20%);
}

.panel:nth-of-type(8) svg {
    height: 100%;
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;  
}

.panel:nth-of-type(8) #panel8-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(9) .images {
    position: absolute;
    top: auto;
    left: auto;
    height: 80vh;
    width: 100%;
    z-index: 10;
}

.panel:nth-of-type(9) svg {
    height: 80%;
    fill: rgba(0, 0, 0, 1);
    stroke: none;
}

.panel:nth-of-type(10) .images {
    transform: translateY(5vh);
}

.panel:nth-of-type(10) svg {
    height: 100%;
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;  
}

.panel:nth-of-type(10) #panel10-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(11) {
    height: 60vh;
    background-image: url(assets/images/tekst-mask.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.panel:nth-of-type(11) p {
    grid-column: 1/9;
    font-size: 1em;
    color: rgba(255, 255, 255, 1);
    font-size: 1.5em;
}

.panel:nth-of-type(13) svg {
    height: 90%;
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;  
}

.panel:nth-of-type(13) #panel13-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(13) p:nth-of-type(1) {
    grid-column: 2/4;
    grid-row: 1/2;
}

.panel:nth-of-type(13) p:nth-of-type(2) {
    grid-column: 6/8;
    grid-row: 1/2;
}

.panel:nth-of-type(13) .images {
    grid-column: 4/6;
     grid-row: 1/2;
}

.panel:nth-of-type(13) svg {
    width: 100%;
    height: auto;
}

.panel:nth-of-type(14) p {
    grid-column: 4/6;
    grid-row: 1/2;
}

.panel:nth-of-type(14) .images {
    grid-column: 1/9;
    grid-row: 1/2;
}

.panel:nth-of-type(14) svg {
    height: 70%;
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;  
}

.panel:nth-of-type(14) #panel14-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(14) #panel14-bloed {
    stroke: none;
    fill: rgba(230, 35, 35, 1);
}

.panel:nth-of-type(15) p {
    grid-column: 4/6;
    grid-row: 1/2;
}

.panel:nth-of-type(15) .images {
    grid-column: 1/9;
    grid-row: 1/2;
    bottom: 0;
}

.panel:nth-of-type(15) svg {
    height: 100%;
    fill: rgba(0, 0, 0, 1);
    stroke: none;
}

.panel:nth-of-type(15) #panel14-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(15) #panel14-bloed {
    stroke: none;
    fill: rgba(230, 35, 35, 1);
}

.panel:nth-of-type(17) p {
    grid-column: 3/5;
    grid-row: 1/2;
}

.panel:nth-of-type(17) .images {
    grid-column: 2/5;
    grid-row: 1/2;
}

.kick {
    animation: kick .8s ease-out forwards;
    animation-delay: 1s;
}

.kickshoe {
    animation: kickshoe 0.8s ease-out forwards;
    animation-delay: .59s;
}

.panel:nth-of-type(17) svg {
    height: 70%;
    transform: translateX(-60em);
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;  
}

.panel:nth-of-type(17) #panel17-background {
    stroke: none;
    fill: rgba(86, 86, 86, 1);
}

.panel:nth-of-type(18) {
    height: 60vh;
    background-image: url(assets/images/tekst-mask.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.panel:nth-of-type(18) p {
    grid-column: 4/6;
    font-size: 1em;
    color: rgba(255, 255, 255, 1);
}

@keyframes kick {
	0% {  
    }
	
    100% {
		transform: translateX(35vw);
	}
}

@keyframes kickshoe {
	0% {  
    }
	
    100% {
		transform: translateX(35vw);
	}
}

/*
========================================
Panels P en Span Styling
========================================
*/

.panel:nth-of-type(8) p span {
    opacity: 0;
    transform: translateY(-3em) translateX(-3em);
    transition: all .4s ease-out;
}

.panel:nth-of-type(8) p span + span {
    margin-left: 3em;
}

.panel:nth-of-type(8) p span:nth-of-type(1) {
    margin-top: -25em;
}

.panel:nth-of-type(8) p span:nth-of-type(2) {
    margin-top: -20em;
}

.panel:nth-of-type(8) p span:nth-of-type(3) {
    margin-top: -15em;
}
.panel:nth-of-type(8) p span:nth-of-type(4) {
    margin-top: -10em;
}

.panel:nth-of-type(8) p span:nth-of-type(5) {
    margin-top: -5em;
}

.panel:nth-of-type(8) p span:nth-of-type(6) {
    margin-top: 0em;
}

.panel:nth-of-type(8) p span:nth-of-type(7) {
    margin-top: 5em;
}

.panel:nth-of-type(8) p span:nth-of-type(8) {
    margin-top: 10em;
}

.panel:nth-of-type(8) p span:nth-of-type(9) {
    margin-top: 15em;
}

/*
========================================
Sidescroll Panels Styling
========================================
*/

/*Bron Batuhan heeft het idee gegeven om het met een beweegende div te doen*/
#white-space {
    position: relative;
    grid-column: 1/9;
    height: 248vw;
    background-color: black;
}

.sideScroll {
    position: absolute;
    top: 0%;
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 300vw;
/*    transform: translateX(-66.67%);*/
/*    right: 0;*/
}

.sideScroll > div {
    display: grid;
    grid-template-columns: 2vw 1fr 1fr 1fr 1fr 1fr 1fr 2vw;
/*
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
*/
    width: 100vw;
    height: 100vh;
}

.sideScroll > div div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.sideScroll > div div:first-of-type {
    grid-column: 1/5;
    grid-row: 1/2;
}

.sideScroll > div div:last-of-type {
    grid-column: 5/9;
    grid-row: 1/2;
}

.sideScroll > div p {
    color: #fff;
    max-width: 50%;
}

.sideScroll > div a {
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 1em;
    transform: translateY(15em);
}

.sideScroll > div h3  {
    color: #fff;
    text-align: center;
    max-width: 80%;
}

.sideScroll > div:nth-of-type(1) div:nth-of-type(2) svg {
    position: absolute;
    top: 0;
    left: 16.6%;
    height: 100vh;
    width: auto;
}

.sideScroll > div:nth-of-type(1) div:nth-of-type(2) {
    background-image: url(assets/images/IS.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}

.sideScroll > div:nth-of-type(2) p  {
    margin: auto;
    position: absolute;
    font-size: 1.5em;
    font-weight: 600;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translateY(-10em);
}

.sideScroll > div:nth-of-type(2) div:nth-of-type(1) {
    background-image: url(assets/images/jongetje-op-boot.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    
}

.sideScroll > div:nth-of-type(2) div:nth-of-type(2) {
    background-image: url(assets/images/vluchtelingen.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left; 
}

.sideScroll > div:nth-of-type(3) div:nth-of-type(1) {
    background-image: url(assets/images/docent.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}

.sideScroll > div:nth-of-type(3) div:nth-of-type(1) svg {
    position: absolute;
    top: 0;
    right: 16.6%;
    height: 100vh;
    width: auto;
}

/*
========================================
Choices Styling
========================================
*/

.choice {
    grid-column: 1/9;
    height: 100vh;
    display: grid;
    grid-template: inherit;
    grid-template-rows: 30vh 70vh;
/*
    grid-template-columns: 2vw 1fr 1fr 1fr 1fr 1fr 1fr 2vw;
    grid-column-gap: 10px;
*/
}

.choice > h3 {
    grid-column: 4/6;
}

.question {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/9;
    height: 100%;
    background-color:  rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.choice button {
    Font-Family: 'Permanent Marker', Cursive;
    font-size: 1.5em;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    border: none;
    text-align: center;
    text-decoration: none;;
    cursor: pointer;
}

.choice button:first-of-type {
    display: block;
    grid-column: 1/5;
    grid-row: 2/2;
}

.choice button:hover,
.choice button:focus,
.choice button:active {
    background-color: rgba(86, 86, 86, 0.1);
    border: none;
}

.choice button:last-of-type {
    display: block;
    grid-column: 5/9;
}

.resultaat {
    transition: all 1s ease;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: auto;
    height: 100vh;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateX(-100vw);
}

.resultaat p:last-of-type {
    position: absolute;
    bottom: 10vh;
}

.footer {
    width: 100%;
    height: 10vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer a {
    color: white;
    text-decoration: underline;
}

.footer a:hover {
    color: rgba(230, 35, 35, 1);
}