/* ATELIER VOOVOYEZ - COPYRIGHT */

/****/

/* STYLES SUR SUPPORT MOBILE - */
/* MAX WIDTH : 480/360PX */
/* PORTRAIT */


@media screen and (max-width: 480px){

	/********************************/
	/********* CSS VIEW.CSS ************/
	/********************************/
	.view a.info{
		margin-top: 30%; /*20px*/
		margin-left: -50%;
		font-size: 16px;
	}

	.view a.zoom{
		margin-top: 45%;
	}




	/********************************/
	/********* CSS BODY ************/
	/********************************/



	/********************************/
	/******* CSS PARALLAX ***********/
	/********************************/
	#container .ma_taille{ /*.parallax .scene */
	    width: 80%; /* Taille des vignettes */
	    margin: auto;
	}

	#container{
		overflow-y: auto;
		padding: 20px;
		box-sizing:border-box;
		/*margin-top: 100px;*/
	}

	#container .parallax .scene{
		overflow-y: auto;
		min-height: 0;
	}

	#container .scene, #container .scene .layer{
	    transform:translate3d(0, 0 ,0) !important;
	}

	#container .scene, #container .scene .layer:nth-child(2){
	    width: 100%;
	    height: 100%;
	}


	#container .parallax .scene .illustrations{
		width: auto;
		height: auto;
	}

	#container .parallax .scene .illustrations,#container .parallax .scene .logo,#container .parallax .scene .site, #container .parallax .scene .retouche,#container .parallax .scene .miseenpage,#container .parallax .scene .packaging{
	    position: initial;
	    display: block;
	    background:none;
	    width: 100%;
	    margin-bottom: 50px;
	}


	#container .parallax .scene .illustrations h1{
	    position: initial;
	    font-size:2em;
	    margin-left: 5%;
	}

	#container .parallax .scene .logo h1,#container .parallax .scene .site h1,#container .parallax .scene .retouche h1,#container .parallax .scene .miseenpage h1,#container .parallax .scene .packaging h1{
	    position: initial;
	    font-size:2em;
	    margin-left: 5%;
	}

	#container .parallax .scene .illustrations #illustration_1,#container .parallax .scene .logo #logo1,#container .parallax .scene .site #web1,#container .parallax .scene .retouche #retouche1,#container .parallax .scene .miseenpage #page1,#container .parallax .scene .packaging #CD1{
	    display: block;
	    position: initial;
	}

	#container .parallax .scene .illustrations #illustration_2,#container .parallax .scene .logo #logo2,#container .parallax .scene .site #web2,#container .parallax .scene .retouche #retouche2,#container .parallax .scene .miseenpage #page2,#container .parallax .scene .packaging #CD2{
	    display: block;
	    position: initial;
	    margin-top: 10px;
	}

	/****************************************/
	/********* CSS OTHERS THUMB *************/
	/****************************************/
	.others{
	    width: 80%;
	    top:0;
	}


	/********************************/
	/********* CSS MAIN *************/
	/********************************/
	.main-fixed{
		margin-bottom: 100px;
	}

	.main-fixed nav#nav{
	    position: fixed;
	    top:20px; /*510px*/
	    margin: auto;
	    width:100%;
	    display: block;
	    z-index: 1600;
	    text-align: center;
	    left: 0;
	   	/*-webkit-box-shadow: 0 8px 6px -6px black;*/
	   /*-moz-box-shadow: 0 8px 6px -6px black;*/
        /*box-shadow: 0 8px 6px -6px black;*/
	}

	/********************************/
	/********* CSS CONTACT ***********/
	/********************************/



	/**********************************/
	/********* CSS OVERVIEW ***********/
	/**********************************/
	#overview{
		
	}

	#overview .header #vignette{
	    width: 100%;
	    height: 100%;
	}

	#overview .header #description{
	    width: 100%;
	    text-align: justify;
	    margin-left: 0;
	}

	#overview .header #description h1{
	    text-align: center;
	    font-size: 2em;
	    text-transform: uppercase;
	    margin-bottom: 1.5px;
	    line-height: 1;
	}

	#overview #projects figure{
    	margin-bottom: 80px;
	}

	#overview #projects figure:last-child{
	    /*margin-bottom: 200px;*/
	}

	/********* Avant-Après *********/
	#overview #projects .twenty{
	    width: 100%;
	    margin: auto;
	    margin-bottom: 80px;
	}

	/********* Digipack *********/
	#overview #projects figure.digipack{
	    width: 100%;
	}

	

	/********* Affiche/Image *********/
	#overview #projects figure.soixante-dix img{
	     height: auto;
	     width: 100%;
	}

	/********* Card *********/
	.container-card { 
	    /*width: 200px;*/
	    /*height: 260px;*/
	}

	.card img {
	    display: block;
	    position: initial;
	    /*width: 100%;*/
	    height: 100%;
	    backface-visibility: hidden;
	    left: 0%;
	    top: 0%;
	    transform: translate(0%, 0%);
	}

	.card img:last-child {
	    /*background: blue;*/
	    transform: translate(0%, -100%) rotateY( 180deg );
	}

	.container-card p{
		margin-top:-130%;
		position: relative;
		z-index: 20;
	}
}




@media screen and (max-width: 360px) and (orientation:portrait){
	/********************************/
	/********* CSS VIEW.CSS ************/
	/********************************/
	.others .view a.info{
		margin-top: 25%; /*20px*/
		margin-left: -40%;
		font-size: 16px;
	}

	.others .view a.zoom{
		margin-top: 45%;
	}
}