/************************************************** RESPONSIVE ***********************************************************/

@media (max-width: 799px){
/*style smartphones et petites tablettes en portrait*/




									/*Index*/


	


	.header .artsNav ul{
	 	align-items: center;
	}
	.header .artsNav ul li a{
	  	font-weight:600;
	  	font-size: 10px;
	  	text-align: center;
	}

	.header .artsNav ul h2 a{
		Font-Family: 'Montagu Slab', Serif;
		Font-Size: 16px;
		font-weight: 600;
		color: #2e2e2e;
	}

	div.main {
	  min-height: 100vh;
	  background-image: url(../img/bg/backHome1.jpg);
	  background-size: cover
	  background-position: right 50% bottom 500%;
	}

	div.title{
		padding: 10% 0 0 5%;
	}

	div.title h1{
		Font-Family: 'Montagu Slab', Serif;
		font-weight: 600;
		Font-Size: 25px;
		color: #2e2e2e;
		text-transform: uppercase;
	}

	div.title h2{
		Font-Family: 'Rubik', Sans-Serif;
		Font-Size: 12px;
		color: #2e2e2e;
	}

	div.title h3{
		Font-Family: 'Rubik', Sans-Serif;
		Font-Size: 11px;
		color: #2e2e2e;
	}

	div.nav{
		margin: 15% 0 0 5%;
	}

	div.nav ul li {
		line-height: 30px;
	}

	div.nav ul li a {
		font-size: 12px;
	}

	.footer, .footer a {
		font-size: 10px;
	}

	div.nav ul hr{
		width: 90%;
	}




									/*Works*/



									
	.worksContent{
		margin-left: 10%;
		margin-top: 5vh;
		margin-bottom: 70px;
	}

	.worksElement{
		width: 80vw;
	 	Font-Family: 'Rubik', Sans-Serif;
		Font-Size: 12px;
	  	color: #2e2e2e;
	  	text-align: justify;
	}

	.worksElement h4{
		Font-Family: 'Montagu Slab', Serif;
		Font-Size: 16px;
	  	font-weight:600;
	  	text-align: justify;
	}

	.worksElement h4.date{
		text-indent: 0px;
		display: inline-block;
		margin-top: 20px;
	}






									/*Arts*/



							


	.landing{
	  	background-size: contain;
	  	background-repeat: no-repeat;
	  	background-position: center top;
	}

	/*.landing .boxTitle{
	  	height: 50vh;
	}*/

	.landing h1 {
		Font-Size: 24px;
	}

	.artsSection h3{
		Font-Size: 16px;
	}

	.artsContent {
	  	/*background-color: #ffffff;*/
	  	padding: 5% 0 1% 0;
	  	display: flex;
	  	flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.artsContent .card {
	  	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	  	transition: 0.3s;
	  	border-radius: 2px;
	  	width: 45%;
	  	background-color: #ffffff;
	 	Font-Family: 'Rubik', Sans-Serif;
		Font-Size: 14px;
	  	overflow: hidden;
	  	margin-bottom: 20px;
	}

	.artsContent .card .container h4 {
	  	font-weight:700;
	  	font-size: 12px;
	  	text-align: center;
	}

	.artsContent .card .container p {
	  	text-align: justify;
	  	font-size: 12px;
	  	padding-top: 7%;
	}






									/*Cadres*/



							

	.cadresLanding{
	    background-image: url(../img/expo/cad/bg_small.jpg);
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.cadresLanding h1 {
		Font-Size: 24px;
	}

	.cadres--desc{
		Font-Size: 12px;
		width: 80vw;
		margin-left: 10%;
		line-height: 18px;
	}

	.cadres--date{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 80vw;
		margin-left: 10%;
		line-height: 20px;
	}

	div.gal div{
		height: 20vh;
		width: 29vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*Mario*/



							

	.marioLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.marioLanding h1 {
		Font-Size: 24px;
	}

	.mario--desc{
		Font-Size: 12px;
		width: 80vw;
		margin-left: 10%;
		line-height: 18px;
	}

	.mario--date{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 80vw;
		margin-left: 10%;
		line-height: 20px;
	}

	div.marioGal div{
		height: 20vh;
		width: 29vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*Puppet*/



							

	.puppetLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.puppetLanding h1 {
		Font-Size: 24px;
	}

	.puppet--desc{
		Font-Size: 12px;
		width: 80vw;
		margin-left: 10%;
		line-height: 18px;
	}

	.puppet--date{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 80vw;
		margin-left: 10%;
		line-height: 20px;
	}

	div.puppetGal div{
		height: 20vh;
		width: 29vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*Birds*/



							

	.birdsLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.birdsLanding h1 {
		Font-Size: 24px;
	}

	.birds--desc{
		Font-Size: 12px;
		width: 80vw;
		margin-left: 10%;
		line-height: 18px;
	}

	.birds--date{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 80vw;
		margin-left: 10%;
		line-height: 20px;
	}

	.bubbles{
		width: 80%;
		margin-left: 10%;
	    margin-bottom: 70px;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-evenly;
	}

	.bub{
	  	flex: 1 0 39%;
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: auto;
	    width: 160px;
	    height: 160px;
	    border-radius: 80px;
	    transition: 0.5s;
	}

	div.birdsGal div{
		height: 20vh;
		width: 29vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*Cosmo*/



							

	.cosmoLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.cosmoLanding h1 {
		Font-Size: 24px;
	}

	.artsSection h5{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 90vw;
		margin-left: 5%;
	}

	.cosmo--desc{
		Font-Size: 12px;
		width: 80vw;
		margin-left: 10%;
		line-height: 18px;
	}

	.cosmo--date{
		Font-Size: 12px;
		color: #2e2e2e;
		width: 80vw;
		margin-left: 10%;
		line-height: 20px;
	}

	div.cosmoGal div{
		height: 20vh;
		width: 49vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*Hamlet*/



	.hamletLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.hamletLanding h1 {
		Font-Size: 24px;
	}

	div.hamletGal div{
		height: 20vh;
		width: 30vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}

	.wrapper{
	    width: 80%;
	    margin-left: 10%;
	    margin-bottom: 35px;
	    background: #CCC;
	}

	.hamletImg{
		width: 80%;
		margin: 30px 10%;
	}






									/*Railroad*/



	.railLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.railLanding h1 {
		Font-Size: 24px;
	}

	div.railGal div{
		height: 20vh;
		width: 30vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}

	.railImg{
		width: 80%;
		margin: 30px 10%;
	}

	.railImg2{
		width: 80%;
		margin: 0 10%;
	}






									/*Kokdu*/



	.kokduLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.kokduLanding h1 {
		Font-Size: 24px;
	}

	div.kokduGal div{
		height: 20vh;
		width: 30vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}

	.kokduImg{
		width: 80%;
		margin: 30px 10%;
	}

	.kokduImg2{
		width: 80%;
		margin: 0 10%;
	}

	.kokduImg3{
		width: 80%;
		margin: 30px 10%;
	}






									/*Sceno*/



	.scenoLanding{
	    background-size: contain;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-position: center top;	
	}

	.scenoLanding h1 {
		Font-Size: 24px;
	}

	div.scenoGal div, div.scenoGal2 div, div.scenoGal3 div {
		height: 20vh;
		width: 30vw;
		background-size: cover;
		background-position: 50%;
		margin-bottom: 8px;
	}






									/*CV*/



	div.CV{
		margin-left: 10%;
	}

	div.CV h4{
		font-size: 16px;
	}

	div.CV h5.cvTitle{
		Font-Size: 14px;
	}

	div.CV p{
		width: 80%;
		Font-Size: 12px;
	  	padding-left: 20px;
	}

	div.CV p.cvDate{
		Font-Size: 14px;

	}

	div.CV p em{
	 	font-style: italic;

	}

	div.CV p.last{
		margin-bottom: 70px;
	}

		
		

}