@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Nunito|Red+Hat+Text|Courier+Prime&display=swap');

:root {
	--spacing: 22px;
	--spacingColor: black;
	--articleBG: black;
	--rgb: 3px 0 1px rgba(255,23,0,0.50),0 3px 1px rgba(0,44,255,0.5),-2px 1px 2px rgba(12,255,12,0.5);
	--spectrum: 2px -1px 1px rgba(0,88,255,1), -1px 0px 3px rgba(255,255,0,.8), -5px 3px 7px rgba(255,133,0,0.6);
	--layers: 5px -2px 0px rgba(255,255,255,0.24);
	--theGap: 16px;

	--7: 7.7vw;
	--i7: calc(7.7vw - var(--7) );
	
	--pFont: calc(7px + .3vw);    /* KILL THIS */
	
	--font: calc(13px + .3vw);
	--fontH1: calc(12px + 1.5vw);
	--fontProject: calc(24px + 3vw);  /*  the huge one */
	}

html{
		cursor: url('graphics/pointerS2.png'), auto;
		margin: 0px;
	height: 100%;
	min-height: 100%;
	}


body{
	margin: 0px;
	background-color: black;
	font-family:   'Nunito',  'Red Hat Text', Arial, Comic sans MS, sans-serif;
	font-size: 15pt;
	color: white;
		/*background-image: url("graphics/glitch2.gif");
	background-size: 30%;
	mix-blend-mode: screen;
	background-blend-mode: screen;	*/
	
	background-image: url(graphics/table_top5B.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0px 7.7vw;
	}


header {								/*Fade in the whole project pages */
	animation: fadein 2s; 
}

.fade {
	animation: fade 2s; 
}
@keyframes fade {
  from {  ;opacity: 0}
  to   {  ;opacity: 0.4} 
	
}

main {
	width: 100%;
	animation: fadein 2s; 
}
@keyframes fadein {
  from {  ;opacity: 0}
  to   {  ;opacity: 1} 
	
}



small{
	font-size: inherit;
	font-size: 72%;
	text-transform: uppercase;
	line-height: 333%;
}
i {
	font-size: inherit;
}
.apa i {
	font-style: normal;
}
div {
	margin: 0;
  	padding: 0;
}

#emptiness {
		
		height: 7.7vw;
		width: 100%;
		margin: 0px;
		padding:0px;
		
		background-image: url(graphics/table_top5A.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	}

	a.anchor {   /*  toplink  */
    display: block;
    position: relative;
    top: 0px;
    visibility: hidden;
}

main * {
  box-sizing: border-box;
	font-size: var(--font);
}


span{
white-space:nowrap;
}
span.show {
	display: inline;
	white-space:nowrap;
}
span.hide {
	display: none;
	white-space:nowrap;
}
/*
main p *{
	font-size: var(--pFont);
}*/

h1 {

	font-size: var(--fontProject);
	text-transform: uppercase;
	
	}

h2 {
		/* font-size: 500%; 
	font-family: 'Spartan';*/
	font-size: var(--fontH1);
	text-transform: uppercase;
	}
h3 {
	/* font-size: 500%; 
	font-family: 'Spartan';*/
	text-align: center;
	font-size: 110%;
	text-shadow: var(--spectrum);
	text-transform: uppercase;
	font-weight: normal;
	}

	a:active, a:focus, img, video { 
    -moz-outline-style: none; 
	outline: none;
}

	a, a:link, a:visited, a:active, .menuKnapp {
	color: white;
	text-shadow: var(--spectrum);
	text-decoration: none;
	font-size: 100%; 
	text-transform: uppercase;
	cursor: url('graphics/pointerS2.png'), auto;
	transition: 200ms;
}
	ul a:hover {
		color: white;
	}
	
	ul .current a, ul .current a:link, ul .current a:visited  {
		opacity: 0.5;
	}
	 ul .current a:hover, ul .current  a:link:hover, ul .current a:visited:hover  {
		opacity: 1;
	}

header a, header a:link, header a:visited, header a:active, main a, main a:link, main a:visited, main a:active {
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	transition-duration: 100ms;
	color: rgba(255,255,255,0.80);
	border-bottom: 3px solid rgba(255,255,255,.50);
	}
 header a:hover, main a:hover {
	 	color:rgba(255,255,255,1);
	border-bottom: 3px solid rgba(255,255,255,1);
		}

	.Vlogo {
	width: 219px;
	background-size: contain;
	/*	animation-name: glip;
	animation-duration: 200ms;
	animation-direction:reverse;
	animation-fill-mode:none;*/
	}/*
@keyframes glip {
 from { background-image: url("graphics/mosh3.gif"); mix-blend-mode: screen; }
  to   { background-image: url("graphics/mosh3.gif"); mix-blend-mode: screen;} 
	
}

.Vlogo img {
	animation: show 200ms;
	animation-fill-mode:none;
}
@keyframes show {  from { opacity: 0; } to   { opacity: 0; } }

*/             /* THE WHOLE TOP STUFF */

nav {
		 grid-gap: 0px;
		height: auto;
		display: grid;
grid-template-columns: 2fr 10px 3fr;
grid-template-rows: 100px auto auto;
	padding-top: 11px;
	z-index:99;
	border
}
	
	.logo { 
		width: 100%;
		grid-area: 1 / 1 / 2 / 2; 
	/*background-color:rgba(14,255,26,0.08);*/
	display: flex;
	align-items: center;
	justify-content: flex-start;
		
	}
menu { 
	grid-area: 1 / 3 / 2 / 4; 
	display: flex;
	align-items: center;
	justify-content: flex-end;
	
	position: relative;
	/*background-color: rgba(255,221,0,0.1); */
	}


/*
  __  __ ______ _   ___     __
 |  \/  |  ____| \ | \ \   / /
 | \  / | |__  |  \| |\ \_/ / 
 | |\/| |  __| | . ` | \   /  
 | |  | | |____| |\  |  | |   
 |_|  |_|______|_| \_|  |_|   
                              
  */                            

	menu {
		 max-width: 100vw;
		overflow: visible;
	}
	 
	li{
	height: 27px;
	margin-top: 0px;
	margin-right: 17px;
	margin-left: -13px;
		 white-space: nowrap;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 5px;
	padding-bottom: 0px;
	}
	
	
	ul {
	
	list-style: none;
	display: flex;
	grid-template-columns: repeat(3, min-content);
	grid-template-rows: 1fr;
	padding-left: 0px;
	padding-right: 0px;
	justify-content: center;
	
		margin: 0px;  /* make FF and chrome same */
	}
	
	
	li.current .menuKnapp{    /* PRESSED KNAPP */
	opacity: 0.7;
		
	border: 7px solid rgba(0,0,0,0.01);
	
	border-image: url("graphics/border3.png") 18 stretch;
	transition-duration: var(--linkTime);	
	
		
	}
	
	
	.menuKnapp{										/* KNAPP default */
	height: 100%;
	width: calc(100% - 22px);
	
	transition-duration: 200ms;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0;
	border: 7px solid rgba(0,0,0,0.01);
					
	animation-name: unhover;
	animation-duration: 100ms;
	animation-direction:reverse;
	animation-fill-mode: backwards;
	}
	@keyframes unhover {
		0% {transform: translateX(0px) skewX(0deg); opacity:1; }
		50% {transform: translateX(2px) skewX(6deg); opacity:0.8; filter: blur(0px); text-shadow: -22px 3px 2px rgb(255,0,0), 5px 7px 2px rgb(0,255,0), -5px -7px 2px rgb(0,66,255);}
		100% {transform: translateX(0px) skewX(0deg); opacity:1;}
	}
	
		
	li:hover .menuKnapp{								/* HOVER */
	border: 7px solid rgba(0,0,0,0.01);
	border-image: url("graphics/border3.png") 18 stretch;
	transition-duration: var(--linkTime);
		
	animation-name: skewhover;
	animation-duration: 100ms;
	animation-direction:normal;
	animation-fill-mode: forwards;
	}
	@keyframes skewhover {
		0% {transform: translateX(-22px) skewX(22deg); opacity:0.5;}
		10% {transform: translate(22px, 0px) skewX(33deg); opacity:0.7; filter:blur(2px); text-shadow: 5px 7px 0px rgb(0,255,0);}
		60% {transform: translate(5px, 0px) skewX(12deg); opacity:0.3; text-shadow: -22px 3px 0px rgb(255,0,0);}
		100% {transform: translateX(0px) skewX(4deg); opacity:0.9;}
	}
	
	li.current:hover .menuKnapp{   				 /* PRESSED KNAPP ->  HOVER */
	opacity: 0.7;
		
	border: 7px solid rgba(0,0,0,0.01);
	border-image: url("graphics/border3.png") 18 stretch;
	transition-duration: var(--linkTime);	
		
	animation: none;	
	}
												/* slut menu */

/*
 
 _____           _           _       
|  __ \         (_)         | |      
| |__) | __ ___  _  ___  ___| |_ ___ 
|  ___/ '__/ _ \| |/ _ \/ __| __/ __|
| |   | | | (_) | |  __/ (__| |_\__ \
|_|   |_|  \___/| |\___|\___|\__|___/
               _/ |                  
              |__/           

*/

.debug {
	position: absolute;
}
.debug p{
	display: none;
}

.cover {
	width: 100%;
		box-sizing: border-box;
		
		display: grid;
		/* grid-auto-rows: 130px auto auto; */
		grid-template-rows: min-content auto;
		position: relative;
		
		overflow: visible;

}

@media not all and (hover: none) {  /* behaviour for desktop browsers */
  .cover {
	min-height: 100vh;
	  
	}
}

@media (max-width: 900px) and (hover: none) and (orientation: landscape){  /* mobile landscape */
  .cover {
	min-height: 56vw;
	 
	}
	.debug .phone_L {
	display: block;
}

}

@media (max-width: 600px) and (hover: none) and (orientation: portrait) {  /* mobile portrait */
  .cover {
	min-height: 178vw;
	 
	}
	
	.debug .phone_P {
	display: block;
}
}


@media (min-width: 600px) and (hover: none) and (orientation: portrait) {  /* ipad portrait */
  .cover {
	min-height: 133vw;
	}
	
	.debug .ipad_P {
	display: block;
}
	
	.thumbs {
		
		grid-template-rows: 31vw;
		grid-auto-rows:  31vw;
		}	
	
}

@media (min-width: 900px) and (hover: none) and (orientation: landscape) {  /* ipad landscape */
  .cover {
	min-height: 75vw;
	}
	
	.debug .ipad_L {
	display: block;
}
	
	.thumbs {
		
		grid-template-rows: 31vw;
		grid-auto-rows:  31vw;
		}	
	
}



nav {
	grid-area:  1 / 1 / 2 / 2;
}
 
header {
	grid-area:  2 / 1 / 2 / 2;
}


.fade {
	grid-area: 1 / 1 / 3 / 2;
	
	
	background-size: cover;
	box-sizing: border-box;
	opacity: 0.4;

  z-index: -1;
	background-position: 50% 50%;
}



.GalleryContainer {
	
	width: 80vw;    /* This is for huge screen */
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 31px;
	box-sizing: border-box;
}

 header {
	display: grid;
	align-content: center;
	text-align: center;
	/*height: auto; */
	width: 100%;
	padding-right: 2vw;
	padding-left: 2vw;
	/* padding-top: 10vw; 
	padding-bottom: 6vw;*/
	margin-bottom: 5vw;
	box-sizing: border-box;
		font-size: var(--font);
	text-shadow: var(--spectrum);
	
	
	}  

@media (min-width:600px) /* For the big screen */	
{
	header {
		
	display: grid;
	
	align-items: center;
	flex-direction: column;
	justify-content: center;
	}
}


header img {
	width: 700px;
	max-width: 90vw;
	height: auto;
}
 
.h1 {
	height:auto;
	min-height:auto;
}


/* TEXT  */


em {
	font-family: 'Courier Prime', Courier New;
	padding: 20px 30px;
	font-size: 105%;
	}

em > p {
	width: 71vw;
	max-width: 800px;
/*	background-color: blue;*/
	
}



		 p{
			 width: 75vw;
			/* font-size: 16px;*/
	max-width: 700px;
	margin: 0px auto;
	text-align:left;
	margin-bottom: 1em;
	line-height: 150%;
		}
	
	article {
	height: 100%;
	text-align: justify;
	display: flex;
	align-items: center;
	padding-top: 3vw;
	padding-right: calc(3vw);
	padding-left: 3vw;
	padding-bottom: 3vw;
	background-color: var(--articleBG);
	min-height: 10vw;
	color: #fff;
	/* margin-right: var(--spacing); */
	
	}
	


.imginfo {   /* to make small text on image  */
	top: 14px;
	left: 14px;
	position: relative;
	height: calc(20px + 1vw);
	text-shadow: none;
	text-transform: uppercase;
	font-size: 66%;
	/*font-family: 'Spartan';*/
	color: #EFEFFE;
	}
.rubrik {
	font-size: var(--fontH1);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	height: calc(22px + 5vw);
	top: 0px;
	color: rgba(255,255,255,1.00);
	margin-top: 0vw;
	margin-right: 2%;
	margin-left: 1%;
	margin-bottom: var(--spacing);
	padding-bottom: 0px;
	text-shadow: var(--spectrum);
	/*	border: 11px solid;
	border-radius: 1px;
	border-image: url("graphics/border.png") 23 round; 
			background-image: url("graphics/raster.jpg");
		background-size: 30%;
		*/
	font-weight: normal;
	
}

/*                                                                
  ,ad8888ba,             88 88                                  
 d8"'    `"8b            88 88                                  
d8'                      88 88                                  
88            ,adPPYYba, 88 88  ,adPPYba, 8b,dPPYba, 8b       d8
88      88888 ""     `Y8 88 88 a8P_____88 88P'   "Y8 `8b     d8'
Y8,        88 ,adPPPPP88 88 88 8PP""""""" 88          `8b   d8' 
 Y8a.    .a88 88,    ,88 88 88 "8b,   ,aa 88           `8b,d8'  
  `"Y88888P"  `"8bbdP"Y8 88 88  `"Ybbd8"' 88             Y88'   
                                                         d8'    
                                                        d8'     */


	.col section img {
	height: 100%;	/*	max-height: 100vh;*/
	}
	
	.smallimg {   /*	project name images */
	width: calc(100px + 7vw);	
		padding-bottom: 16px;
			padding-top: 46px;
	}


.col img, video {
	width:100%;
	 padding: 0;
	 margin: 0;
	   border: 0;
	vertical-align: middle;  /* removes a fucking retarded margin */
	}	
	
.flex-grid, section {
  display: flex;
}
.flex-grid .col, section .col  {
  flex: 1;
}
.flex-grid-half, .flex-grid-third {
  display: flex;
  justify-content: space-evenly;
  padding: 0 var(--spacing) 0 0;
}
.flex-grid-half .col {
  width: 50%;
}

.flex-grid-third .col {
  width: 33%;
    width: calc(100% / 3);
}

@media (max-width: 400px) {
  .flex-grid, .flex-grid-half, section {
    display: block;}
    .flex-grid-half .col {
      width: 100%;
      margin: 0 0 0 0;
    }

}

@media (max-width: 900px) {
  .flex-grid-third {
    display: block;}
    .flex-grid-third .col {
      width: 100%;
      margin: 0 0 0 0;
    }

}


.flex-grid, section {
  margin: 0 0 0 0;
  padding: 0 var(--spacing) 0 0;

}
.col {
	padding: var(--spacing) 0 0 var(--spacing);
	margin: 0 0 0px 0;
	overflow: hidden;
	border: 0px;
	
	background-color: var(--spacingColor);
}
	 .sr .col {
	 visibility: hidden;

 }
	    



/*
 ______          _            
|  ____|        | |           
| |__ ___   ___ | |_ ___ _ __ 
|  __/ _ \ / _ \| __/ _ \ '__|
| | | (_) | (_) | ||  __/ |   
|_|  \___/ \___/ \__\___|_| 

*/

	.footerlinks {
		overflow: hidden;
		box-sizing: border-box;
		padding-right: 1vw;
		width: 100%;
		height: 34px;
		display: flex;
		justify-content: flex-end;
	}



footer {
	grid-template-columns: 1fr 1fr;
	height: 36vw;
	width: 100%;
	background-image: url("graphics/table_bottom4.jpg");
	/* background-size: 100%; */
	background-size: cover;
	background-position: top;
	}
	footer div{
		display: flex;
		justify-content: center;
transform: rotate(20degress);
		align-items: center;
	}

.card{
	height: 12.2vw;
	width: 19.1vw;
	background: rgba(0,0,255,0.0);
	border-radius: 34px;
	color: black; /*
	-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.0);
	box-shadow: 2px 3px 3px rgba(0,0,0,0.0); */
	top: 15.9vw;
	border: thin solid transparent;
	position: relative;
	left: 53%;
	transform: rotate(4deg);
	}
	
	.card:hover{
	/*	background: rgba(255,255,255,0.1);
		filter: blur(22px); */
		background-image: url("graphics/email_.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top;
	}
	.card a{
	width: 100%;
	height: 100%;
		cursor: url("graphics/email.png"), auto;
	}

		.smokeFX{	/* SMOKE PLACEMENT */
	top: 23vw;
	left: 0vw;
	background-color: transparent ;
	
	}



/* 
 ________   __
|  ____\ \ / /
| |__   \ V / 
|  __|   > <  
| |     / . \ 
|_|    /_/ \_\
              
MY AWESOME TEA SMOKE! 
*/


	.smokeFX{  /* don't change, just an emitter */
	width: 0px;
	height: 0px;
	position: relative;
	
	}
	
	.puff {
		background-image: url(graphics/smoke.png);
		background-size: 100% 100%;
		background-position: bottom;
				width: 200px;
		bottom: 0px;
		position: absolute;
		animation: rise 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
	@keyframes rise {
  0% {  opacity: .1; height: 100px; -webkit-filter:blur(0px); filter: blur(0px);  bottom: 0px; left: 0px;}
 50%   {  opacity: 1; height: 300px; -webkit-filter:blur(3px); filter: blur(3px); bottom: 22px;left: 22px;} 
 100%   {  opacity: 0; height: 600px; -webkit-filter:blur(22px); filter: blur(22px); bottom: 77px;left: 66px;} 
}	
	
	.puff:nth-child(2) {
		background-image: url(graphics/smoke.png);
		background-size: 100% 100%;
		background-position: bottom;
				width: 250px;
		bottom: 0px;
		position: absolute;
		animation: rise2 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: .8s;
	}
	@keyframes rise2 {
  0% {  opacity: .1; height: 100px; -webkit-filter:blur(3px); filter: blur(3px); bottom: 0px; left: 0px;}
 50%   {  opacity: .6; height: 300px; -webkit-filter:blur(11px); filter: blur(11px); bottom: 22px;left: 22px;} 
 100%   {  opacity: 0; height: 600px; -webkit-filter:blur(28px); filter: blur(28px); bottom: 77px;left: 66px;} 
}