html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face{
	font-family: "Codystar-Regular";
	src: url("../fonts/Codystar-Regular.woff") format("woff");

}

@font-face{
	font-family: "WorkSans-Regular";
	src: url("../fonts/WorkSans-Regular.woff" ) format("woff");

}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	height: 100vh;
	width: 100vw;
	background-color: #effbff;
	font-family: "WorkSans-Regular";
	color: #000812;
	overflow: hidden;
}



#content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100vh;
}

#content a{
	text-decoration: none;
	padding: 0px;
	color: inherit;

}

#header{
	width: 29vw;
	height:6vh; 
	position: fixed;
	background-color: #effbff;
font-size:2.85vw;
padding: 0.2vw;
font-family: "Codystar-Regular";
display: flex;
align-items: center;
justify-content: center;
}

#header a {
	text-decoration: none;
	color: inherit;
}

#menu{
position: relative;
top: 7.7vh;
height: 70vh;
width: 13.3vw;
background-color: #effbff;
z-index: 100;
color: inherit;


}
#menu li{
	padding-left: 0.5vw;
	margin-bottom: 1.5vh;
	font-size: 2.2vh;

}



.active{
	color: #000812;

}

.passive{
	color: #c2cfd3;
/*	filter: blur(1px);*/
}
/*#menu li a{
	color: #444;
} */

footer{
	position: fixed;
	bottom: 0px;
	width: 30vw;
	background-color: #effbff;
z-index: 150;
height: 3.5vh;
box-shadow: 0em 0em 0.5em 1em #effbff;

}

footer nav{
	
display: flex;
justify-content: space-between;
padding-left: 0.5vw;

padding-right: 1vw;

}

footer a {
	text-decoration: none;
	color: black;
}




#imgthumb{
	position: relative;
	width: 16.3vw;
	top: 7.5vh;
	height: 87.5vh;
	z-index: 100;
	background-color: #effbff;
	overflow-y: scroll;
	scrollbar-width: none;

}

#imgthumb::-webkit-scrollbar {
    display: none;
}
/*#imgthumb-scrollbar {
    display: none;
}*/

#imgthumb ul {
 
 height:auto;
 display: flex;
flex-wrap: wrap;
}

#thumb img {
margin: 2px;
height:auto;
width: auto;
max-width:9vw;
max-height: 9vh;
cursor: pointer;
}
/*################### ———— ######################*/
/*################### carousel ######################*/

.siema{
	width: 70vw;
	height: 95vh;
	background-color: #000812;

}
.itemcarou{
	height: 95vh;
	display: flex;
    align-items: center;
    justify-content: center;



}
.siema img{
	height:auto;
	width: auto;
	max-width:62vw;
	max-height: 90vh;
	align-self: center;


  


}


#containCarou{

		width: 70vw;
	height: 95vh;
	background-color: #000812;
	z-index: 200;

}
button{
	background-color: transparent;
	border: none;
	text-decoration: none;
	position: absolute;
	opacity: 0;
	top: 0;
	width: 50px;
	height: 100vh;

	font-size: 4em;
	color: white;
	text-align: center;
	cursor: pointer;}

button:hover{
	transition:  opacity 0.2s ease-in;
  opacity: 1;
  }

.next {
	right: 0px;
}

.transi{
  animation-name: transit;
 animation-duration: 1s;
}
@keyframes transit{
  0%{
    opacity: 0;


  }
 
  100% {
  opacity: 1;
  }
}

#info {
	width: 70vw;
	height: 95vh;
	background-color: #000812;
	
	
}
#info p{
	
	color: #effbff;
	position: fixed;
	right: 2vw;
	
}

.visible{
	visibility: visible;
}
.hidden {
	visibility: hidden;
}
/*################### ———— ######################*/
/*################### home ######################*/
.stamp{
	position: absolute;
	width: 10vw;
	height: auto;
	bottom: 15vh;
	left: 10vw;
	z-index: 1000;

}
/*################### ———— ######################*/
/*################### about ######################*/


#bio{
	position: relative;
width: 40vw;
top: 8vh;
left: 0.5vw;
height:80vh;
line-height: 1.2rem;
overflow-y: scroll;
margin: 0px;
scrollbar-width: none;
}
#bio::-webkit-scrollbar {
    display: none;
}

#bio p {margin-bottom: 10px;}
#email{
	position: absolute;
	width: 30vw;
	left: 0px;
	text-align: center;
	bottom: 7vh;
}


img.atelier {
	position: relative;
	max-height:70vh;
	padding: 5vw;
	padding-top: 8vh;
}

#close{display: none;}
#burger{display: none;
}

#mobileContainer{
	display: flex;
	flex-direction: row;
}
.aprop{
	display: none;
}

/*################### ———— ######################*/
/*################### mobile ######################*/
@media only screen and (max-width: 700px) {

#mobileContainer{
	display: block;

	top: 10vh;
	height: 70vh;
}

	img.atelier {
	position: fixed;
	max-height:37vh;
	top: 0vh;
}

#bio{
	position: absolute;
	width: 92vw;
	padding: 3vw;
	align-self: center;
	top: 35vh;
	height:40vh; 
	overflow-y: scroll;

}

#email{
	position: fixed;
	top: 91vh;
	width: 100Vw;
	height: 3vh;
	z-index: 3000;
}

	#content{
		flex-direction: column;
		position: relative;
		height: 60vh;
		width: 100vw;
		top: 10vh;
	
	}

	
	#header {
		position: fixed;
		top: 0px;
		right: 0px;
		height: 10vh;
		width: 100vw;
		z-index: 2000;
		font-size: 1.65em;
	}

	#close{
		display: none;
	}
	#burger{
		display: none;
	}



	.logo {
		position:absolute;
		right: 3vw;
	}

	#containCarou{
		position: relative;
		height: 60vh;
		width: 100vw
	}

	.siema {
		height: 60vh;
		width: 100vw
	}

	.siema img{
	height:auto;
	width: auto;
	max-width:90vw;
	max-height: 55vh;
	align-self: center;


  


}
#info {
	width: 100vw;
	height: 5vh;
	background-color: #000812;
	
	
}
#info p{
	
	color: #effbff;
	position: fixed;
	right: 2vw;
	
}

	.itemcarou{
		height: 60vh;
	}

button{
	background-color: transparent;
	border: none;
	text-decoration: none;
	position: absolute;
	opacity: 0;
	width: 50px;
	height: 60vh;

	font-size: 3em;
	color: white;
	text-align: center;
	cursor: pointer;}


#imgthumb{
	position: fixed;

	top: 75vh;
	width: 95vw;
	height: 12vh;
	margin: 2.5vw;
	z-index: 100;
	background-color: #effbff;
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;


}

#imgthumb::-webkit-scrollbar {
    display: none;
}
/*#imgthumb-scrollbar {
    display: none;
}*/

#imgthumb ul{
	height: auto;
	flex-wrap: nowrap;
	overflow-y: auto;
}
#imgthumb ul li{
	
}

#thumb img {
margin: 2px;
height:auto;
width: auto;
max-width:11vw;
max-height: 11vh;
cursor: pointer;
}


	footer{
		width: 100vw;
		height: 6vh;
	}

footer nav{
	
display: flex;
justify-content: space-between;
font-size: 1.3em;
padding: 10px;


}

.stamp{
	position: absolute;
	width: 30vw;
	height: auto;
	top: 72vh;
	z-index: 1000;
	left: 33vw;

}

#close{
		display: block;
		position: fixed;
		right: 3.5vw;
		font-size: 6vh;
		cursor: pointer;
	}
#burger{
		display: block;
		position: fixed;
		top: 3.4vh;
		left: 10px;
		cursor: pointer;
		z-index: 4000;
	}
#menu {
		position: fixed;
		height: 93vh;
		overflow-y: scroll;
		padding: 1vw;
		line-height: 5vh;
		transition: transform .4s cubic-bezier(.25, .1, .25, 1);
		

	}

#menu li{
	font-size: 3.5vh;


}

#menu:not(:target) {
  transform: translate3d(-100vw, 0, 0);
}

#menu:target{

	width: 100vw;
	top: 0vh;
	transform: translate3d(0, 0, 0);
	
	
	z-index: 3000;


}
.aprop{

	display: block;

}

}