@charset "UTF-8";
/* CSS Document */

@font-face{
	font-family: "puritan";
	src: url(puritan.TTF);
}

@font-face{
	font-family: "opensans";
	src: url(opensans.ttf);
}

@font-face{
	font-family: "opensansbold";
	src: url(opensansbold.ttf);
}

html{
	width: 100%;
	max-width: 1366px;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	
}

body{
	width: 100%;
	padding: 0;
	margin: 0;
	
	position: relative;
	min-height: 100vh;
	left: 50%;
	transform: translateX(-50%);
}

.container{
	margin: 0;
	padding-bottom: 90px;
	
}

header{
	width: 100%;
	text-align: center;
	height: 70px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	position: sticky;
	top: 0;
	background-color: white;
	z-index: 100;
}

main{
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
}

footer{
	position: absolute;
	bottom: 0;
	height: 90px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	background-color: black;
	
}








.text{
	font-family: "opensans";
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
}

.textuppercase{
	font-family: "opensans";
	font-size: 12px;
	text-transform: uppercase;
}

.textitalic{
	width: 90%;
	font-family: "opensans";
	font-style: italic;
	font-size: 10px;
	margin-left: auto;
	margin-right: auto;
}



/*-----------------------------------------HEADER------------------------------------------*/


.logo{
	width: 200px;
	text-align: center;
	padding: 0;
	margin-right: auto;
}

.h1logo{
	padding: 0;
	margint: 0;
}

.imagelogo{
	height: 50px;
	padding: 0;
	margin-right: 0;
	
}

/*--------- NAVBAR -----------*/

nav{
	float: left;
	text-align: center;
}

nav ul li a{
	font-family: puritan;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: uppercase;
	color: black;
	background-color: white;
	transition: 0.3s;
}

nav ul li a:hover{
	background-color: black;
	color: white;
}

/*-- Horizontal menu-- */

	ul .horizontal{
	display: flex;
	justify-content: center;
	align-items: center;
}

	.horizontal li{
		display: inline-block;
		padding: 0 30px;
		vertical-align: middle;
		margin:0;
		list-style-type: none;
}

		.horizontal li{
			list-style: none;
			margin: 0;
			text-transform: uppercase;
			letter-spacing: 1px;
			text-align: center;
}


input{display: none}
label{
	margin-right: 20px;
	display: none;
	cursor: pointer;}


/*--- Hamburger Menu --- */

	@media screen and (max-width: 768px) {
	/* start of phone styles */

		label{display: block;}
		
		nav ul.horizontal{display: none;}
		
		nav {
			height: auto;}
		
		ul.vertical{
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 80vh;
			display: flex;
			flex-direction: column;
			text-align: center;
			z-index: 100;
			background-color: white;
			padding: 0;
}
	
			.vertical li{
			
			display: block;
			margin: 5em;
	}
	
		nav ul.vertical, nav.vertical:active{
			display: none;	
	}
	
		#toggle:checked + ul.vertical{
			display: block;}
	
		
}














/*-------------------------------------------- MAIN -------------------------------------------- */






/* --------------------- MAIN PAGE --------------------------*/



.intro{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}

.intro1{
	width: 50%;
}

.intro2{
	width: 50%;
	margin-right: 5px;
}

.marchelink{
	font-family: "puritan";
	color: black;
	text-transform: uppercase;
	font-size: 16px;
}



@media only screen and (max-width: 767px) {
	.intro{display: block;}
	.intro1{width: 100%;}
	.intro2{width: 90%; margin-top: 20px; margin-bottom: 30px; margin-left: auto; margin-right: auto; }
}











/* --------------------- SECTION MAIN EXPO --------------------------*/


.sectionexpo {
	width: 100%;
	text-align: center;
	margin-top: 0px;
	color: white;
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
}

.sectiontext{
	text-align: center;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	color: white;
}

.sectionexpo h2{
	font-family: "snowinter";
	font-size: 80px;
	padding: 0;
	color: #E76769
}


/*------------------ ART GRID -------------------- */

.artistgrid{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 20px;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

.artistbox{
	display: block;
	width: 350px;
	height: 300px;
	text-align: center;
	justify-content: center;
	padding: 0px;
	}

.artistbox h4{
	font-family: "puritan";
	text-transform: uppercase;
	padding: 0;
	margin: 1px;
}

.artistbox p{
	font-family: din;
	font-size: 0.7em;
	text-transform: uppercase;
	margin: 0;
}

.artistbox a{
	text-decoration: none;
	color: black;
}

.artistbox img{
	height: 80%;
}


.imagebox{
	max-width: 100%;
	max-height: 100%;
}



















/*--------------------------------- CONCEPT----------------------------------*/


.sectionconcept{
	width: 100%;
	padding: 0;
	margin-left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 70px;
}

.conceptimage{
	width: 50%;
	text-align: center;
}

.conceptimage img{
	width: 80%;
}

.concepttext{
	width: 50%;
	background: white;
	color: black;
	padding:  0px;
	
}

.subtitle{
	font-family: "puritan";
	font-size: 1rem;
	margin: 0;
	letter-spacing: 5px;
}

.concepttext p{
	width: 80%;
	font-family: "opensans";
	font-size: 10px;
	letter-spacing: 2px;
	
}

.uppercase{
	text-transform: uppercase;
}



@media only screen and (max-width: 767px) {
	.sectionconcept{display: block; margin-top: 0px;}
	.conceptimage{width: 100%;}
	.conceptimage img {width: 70%; } 
	.concepttext{width: 100%; text-align: center;}
	.concepttext p{margin-left: auto; margin-right: auto;}
}







/*------------------------------ CONTACT --------------------------*/



.contactpage{
	width: 100%;
	display: flex;
	margin-top: 50px;
}

.contactinfo{
	width: 50%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


.concept_jlucmaclav{
	width: 100%;
}

.jlucmaclav{
	text-align: center;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}



.contactinfotext{
	margin-left: 20px;
	margin-right: 20px;
}

.contactinfotext a{
	text-transform: uppercase;
	font-family: "opensansbold";
	color: black;
}


.contactform{
	width: 50%;
	font-family: "opensans";
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	justify-content: center;
}

.contactform h2{
	font-family: "opensansbold";
	text-align: center;
	text-transform: uppercase;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}



.form_control{
	display: block;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

#contact_form{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	text-align: center;
	margin-bottom: 30px;
}




.email{
	font-family: "puritan";
	font-size: 14px;
	text-transform: uppercase;
	color: black;
	text-align: center;
	justify-content: center;
}


@media screen and (max-width: 768px) {
	.contactpage{display: block;}
	.contactinfo{width: 100%;}
	.contactform{width: 100%;}
}










/*------------------------------ SOCIAL MEDIA --------------------------*/




.socialmedia_buttons{
	padding: 19px;
	top: 50%;
	vertical-align: middle;
}















/*------------------------------- ARTISTS SECTION ------------------------------- */
/*------------------------------- ARTISTS SECTION ------------------------------- */
/*------------------------------- ARTISTS SECTION ------------------------------- */
/*------------------------------- ARTISTS SECTION ------------------------------- */


.artistpage{
	width: 100%;
	display: flex;
	margin-top: 10px;
	justify-content: space-around;
}


.retour{
	width: 50px;
}

.retour img{
	width: 50px;
}


.artistinfo{
	width: 350px;
	text-align: center;
	justify-content: center;
}

.artistinfo h2{
	font-family: "puritan";
	text-transform: uppercase;
	margin-top: 10px;
}
/*
.artistinfo img{
	width: 200px;
}
*/

.size200px{width: 200px;}
.size300px{width: 300px;}



.artistcontact{
	width: 90%;
	font-family: "opensans";
	font-size: 0.8em;
	margin-left: auto;
	margin-right: auto;
}

.artistcontact p{
	margin: 0;
}

.artistcontact a{
	color: black;
}

.artistcontact h3{
	font-weight: bolder;
}







.artistwork{
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
	width: 650px;
	
}

.artistworkbox{
	width: 200px;
	height: 200px;
	text-align: center;
	justify-content: center;
	padding: 5px;
}

.artistworkimage{
	max-width: 100%;
	max-height: 100%;
}


.border{
	border: solid 1px;
	margin: 20px;
}

.artistcontacttittle{
	font-family: "opensansbold";
	text-transform: uppercase;
	font-weight: bold;
  	text-decoration: underline;
}

.spacebetween{
	margin-left: 5px;
  	margin-right: 5px;
}
 


.artistworkgrid{
	display: grid;
	grid-template-columns: 200px 200px 200px;
	max-width: 650px;
	grid-gap: 50px;
}




@media only screen and (max-width: 767px){
	.artistpage{flex-direction: column;}
	.artistinfo{width: 100%;}
	.artistinfo p{width: 90%;}
	.artistwork{width: 100%;justify-content: center;}
	
}