/*//////////////////////////////////
//////// Willem Vermeersch /////////
//////// custom build v3.04 ////////
//////// rogez.design™ 2020 ////////
//////////////////////////////////*/

/* ANIMATIONS */
@keyframes blurin{ from {filter:blur(20px);} to {filter:blur(0px);} }
@keyframes fadein{ from {opacity:0;} to {opacity:1;} }

/* koningsblauw:#2672EC; */


*{ margin:0; padding:0; border-collapse:collapse; font-weight: normal;}
body{ font-family:"Courier New", Courier, monospace; color:#222; background-color:rgba(200,200,200,0.6); font-size:16px; overflow-y:auto;}
main{ width:80vw; display:block; margin:2vh auto;  text-align:center; }
footer{ display:none; position:fixed; width:100%; height:20px; bottom:0px; text-align: center; font-size:0.7rem;}

.hidden{display:none;}

/* NAV */
a{ text-decoration: none; color:#222; }
a:hover{ text-decoration: underline;}
nav{ position: relative; height:10vh; display:flex; flex-flow: row nowrap; justify-content:space-around; align-items: center; z-index: 10;}
nav a{ text-transform:uppercase; font-size:1.5rem; color:#222; }	
nav a:link{ border-bottom:2px solid transparent; text-decoration:none; color:#222;}
nav a:hover{ border-bottom:2px solid #2672EC;}
nav a.active{ border-bottom:2px solid #2672EC;}
img.icon{ width: 25px; }

/* HEADINGS & PARAGRAPHS */
h1{ font-size: 2.5rem; text-transform: uppercase;}
h2{ font-size: 1.4rem; text-transform: uppercase; }
h3{ font-size: 1.4rem; text-transform: uppercase; padding-bottom:0.6rem; }
h4{ font-size: 1.5rem; font-style: italic;}
h5{ font-size: 2.5rem; text-transform: uppercase; margin-top:5rem;}
h6{ font-size: 1.0rem;}
p{ font-size: 1.0rem; padding-bottom: 0.5rem; }
p.small{ font-size: 0.8rem; }
b{ font-weight: bold;}
i{ font-style: italic; }

/*HOME*/
figure#home{height:80vmin; }
figure#home img{height:100%; margin:auto;}

/* SCRIPT */
section#script{ display: block; text-align:center; max-width:600px; margin:10vh auto;}
section#script article{ line-height: 1.5rem; padding-bottom: 2rem; }
section#script article h6{ font-weight: bold; }
section#script article h6::after{ content: " :"; }
section#script article p{ padding-left: 0rem;}	

/*VESSELS*/
section#vessels{ display: block; width:50vw; margin:10vh auto;}
section#vessels figure.thumb{ width:6%; object-fit:cover;}
section#vessels figure img{ width:100%; }
section#vessels figure img.thumb{ border:1px solid white; box-shadow:2px 2px 0px #444; }
section#vessels figure img.thumb:hover{ box-shadow:2px 2px 0px #444; }
section#expo{ position:relative; display: flex; z-index: 10; height: 80vh; width:100%;  justify-content: space-between; }
section#expo div#left{ width:70%; }
section#expo div#left figure{ width: 100%; }
section#expo div#left figure{ height:100%; width:100%; padding-bottom: 0.5rem; animation: blur 800ms ease-out; animation-play-state: paused;}
section#expo div#left figure img{ max-width: 100%; object-position: bottom left; object-fit: contain; }
section#expo div#right{ width: 30%; }
section#expo div#right figcaption{ height:100%; display:flex; flex-flow:column nowrap; justify-content: flex-end; align-items: flex-end;} 
section#vessels figure.thumb img{ filter: drop-shadow(0 -1px 1px rgba(50, 50, 50,.5));}

/* FRICTIONS */
nav#filter{ display: flex; flex-flow: row nowrap; justify-content: center; height: auto; margin-bottom: 1vh;}
nav#filter a{ font-size:1.2rem; border-bottom: none; cursor: pointer !important;} 
nav#filter a.active{ color: white; background-color: #2672EC; }
section#frictions{ display: flex; flex-flow: row wrap; justify-content: center; }
/* other properties under responsive */

/* ANIMA */
section#anima{ margin:1.5em 0; column-gap:2rem; font-size: 0.85em; animation: blurin 1s ease-out;}
section#anima section{ display:block; padding-bottom:5vh; width:40%; transition:filter 3s ease,background 3s ease; margin:0 auto;}
section#anima section a{ text-decoration:none; color:black; }
section#anima section h4{ position:relative; z-index:2; background:linear-gradient(135deg, #131313 0%,#595959 80%,#131313 100%); opacity:1; color:white; margin:0rem -0.6rem -0.3rem -0.6rem; }
section#anima section:hover h4{ background:linear-gradient(135deg, #A08C5C 0%,#131313 60%,#A08C5C 100%);  }
section#anima img, iframe { max-width:100%; height:auto; display:block; }
section#anima section article{ display:block;  font-style: italic; line-height:1.5rem; }
section#anima section figcaption{ padding-top: 1rem; color: black; background-color:transparent; font-weight: bold; }
section#anima section figcaption a{ color: tomato; }
section#anima section figcaption a:hover{ text-decoration: underline; }
section#anima section.video div{ position: relative; padding: 28.13% 0;}
section#anima section.video div iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/*INFO*/
section#info{ width:60%; margin:0 auto; padding-top:4vh; text-align: center; animation: blurin 400ms ease-out;}
section#info article{ padding-bottom:10vh; }
section#info form{ display:flex; flex-flow:column nowrap; align-items: center; padding-top:1vh; }
section#info input{ margin-bottom:2vh; text-align: center; background-color: transparent; border:none; border-bottom:2px solid grey; transition:border-bottom 500ms;}
section#info input::placeholder{ color:grey; }
section#info input[value]{ color:rgb(120,120,120); }
section#info input[type=email]{ width:200px; }
section#info input[type=name]{ width:300px; }
section#info input[type=submit]{ width:100px; padding:0 5px;}
section#info input:focus{ border-bottom:2px solid black; }
section#info input[type=submit]:hover{background-color:#222;}

/*COPYRIGHT*/
section#copyright{ width:60%; margin:0 auto; padding-top:4vh; text-align: center; animation: blurin 400ms ease-out; }


@media screen and (orientation:landscape) {
	figure#babel{height:75vmin; display:flex; margin:0 auto; }
	figure#babel svg{height:100%; margin:auto;}
	section#frictions figure{ height:15vh; margin:1vh; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3); }
	section#frictions figure:hover{ box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.2); }
	section#frictions figure img{ height:100%; object-fit: cover; }
	section#expo div#left figure img{ height: 100%; }
	section#expo div#right figcaption p{ padding: 1rem 0 0 1rem; text-align: right; }
	nav#filter a{ margin: 0 1rem; } 
}

@media screen and (orientation:portrait) {
	main{width:95vw; margin:0vh auto;}
	nav{ height: 6vh; justify-content: space-between; width: 90%; margin: 1vh auto 1vh auto;}
	nav a{ font-size: 1.2rem; }
	nav#filter a{ margin: 0 0.5rem; } 
	h3{ font-size: 1.2rem; }
	section#vessels{ margin:0;  }
	section#vessels figure.thumb{ width:15%; }
	section#frictions figure{ width:40vw; height: auto; margin:1.5vh 0.2vh; }
	section#frictions figure img{ width:35vw; object-fit: cover; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);  }
	section#expo{ display: flex; flex-flow:column nowrap; }
	section#expo div#left{ width:100%; }
	section#expo div#right{ width:100%; }
	section#expo div#right figcaption{ margin-top:1vh;}
	section#expo div#right figcaption p{ padding-top:0.5rem; }
	section#info{ width:100%;}
	section#anima section{ width: 90%; }
}