@media all and (max-width: 1200px)  {
	
	/*scale up text to make it readable*/
    html, body{
        
    }
	body{
		font-size: 1.4em;
		min-width: 360px;
	}
	
	/************* Intro Screen *************/
	
	h1{
        text-align: center;
        font-size: 5vw;
    }
	h2{
        text-align: center;
        font-size: 4vw;
    }
		
	/* Orange lines */
    #logosec{
        position: relative;
        /*border-top: 2px solid #ffff00;*/
        border-bottom: 2px solid #ffff66;
		width:50vw;
		transform: translate( 25vw );
    }
	
	/* White lines */
	#innerBdr {
			width:50vw;
			margin: 0 auto;     
			height: 55vh;
	}
	
	/* text "Ouvrir" */ 
    #ouvrir{
        position: absolute;
        bottom: 0;
		font-size: 3vh;
        width: 50vw;
		text-align: center;
        padding:0 0 20 0;
    }
	
	#portfolio{
			
	}
	
	#introContainer{
        width:100vw;
        height:100vh;
		/*reset placement to 0*/
        transform: translate(0,0);
    }
	
	#nomContain{
		position: relative;
		height: 25vh;
	}
	#nameTitle{
		position: absolute;
		bottom: 0;
		display: block;
		width: 100vw;		
		margin:0 auto;
	}
	
/******************* Logo ****************************/	
		
	#logoAnimated{
        background-size:cover;
		height: 28vh; /*35vh*/
		width: 40vh;   /*50vh*/
		top:calc(50% - 12vh);
		left:calc(50% - 20vw);
	}

	@keyframes logoResize{
	100%{
		top:0;
		left:5%;
		width: 100px; /*140px*/
		height: 70px;/*100px*/
        margin: 5px 0 0 0;
		}
	}
	
	/************* Section 1 *************/
	/*height*/
	.bgimg1 {
   		/*min-height: 70vh;*/
	}
	
	/* Name */
	#nameHeader{
        width:calc(100px + 40vw);
		transform: translate(calc(-60px - 20vw),0);
		font-size: calc(7px + 0.4vw);		
		padding:0;
	}
	#nameHeaderInner{
		border:1px solid #ffff66; /* #e6b13b solid;*/
        margin: calc(5px + 1vw);
		padding:18px 0 18px 0;
	}
    h4{
        font-size:calc(8px + 0.4vw);
    }
    h3{
        font-size: 1.5em;
        
    }
    #me{
        width:25vw;
        height:25vw;
    }
    #submit{
        font-size:12;
 
    }
	/*********** Services **********/
	#aboutContainer{
        width:90vw;
	}
	#aboutDesc{
		padding: 10px 20px 40px 20px;
    	/*font-size:calc(10px + 1.5vw);*/
        font-size: 1em;
	}
    #aboutVisit{
		padding: 10px 20px 40px 20px;
    	/*font-size:calc(10px + 1.5vw);*/
        font-size: 1em;
	}
    #aboutContact{
            font-size: 1em;
    }
    #zoneDesc{
            font-size: 1em;
    }
	/* portfolioSection */
	.headerPadding{
		/*padding: 10px 0 5px 30px;*/
		/*font-size: 2em;*/
	}
	figcaption{
		margin-top: -10px;
		font-size: 30px;
	} 
	.boxVertical figcaption{
		padding-top: 40px;
	}
	
	
    #workSection{
        width:90vw;
    }
    #VisitSection{
        width:90vw;
    }
    #zone{
        width:90vw;
    }
    #ContactSection{
        width:90vw;
    }
    
    
    
/*------------- projects section-------------*/
	.wrapper{
		width:auto;
	}

    .gridContainer{
       /* justify-content: space-around;*/
    }
    .box{
       /* width:100vw;  */
    }
    .boxVertical{
		height:500px;
    }
	h5{    
		font-size:6vh;		
	}
	.bgimg3 {
		/*min-height:90vw;*/
	}
    .logoProject{
       position:absolute;
	   top:0;
       right:0;
       margin: 1vh 2vw;
       z-index: 100;
    }
    #logoAnimatedProject 
    {
        width:25vw;
        height: 25vw;
		max-height: 100px;
		max-width: 120px;
        
    }
    
    
	
    /*********** NAV ****************/	
    .link i{ 
        display: inline-block;       
    }
    .link,.linkclose{
         font-size: 6.5vw;
    }
    .linkclose i{
        display: none;
    }
    nav{
        display: none;
        /*font-size: 2.5vh;*/
		min-width: 0;
    }
	nav a {
		margin:0px 20px 0.5em 20px;
        font-size: 1.1em;
	}
    .wideWrapper{
        max-width: none;
    }


	/*******************/
	.mobileNav{
		font-size: 30px;
		text-align: center;
	}
	.burger{
		padding: 25px;
	}
	
    /******Footer******/
    /*footer{
        font-size: 1.8vw;
    }*/
    #contact{
        width:45vw;
        height: 7vw;
    }
	
	/******************* Project pages********************/
	.project{
		position: relative;
		margin:0;
		padding: 0;
		width:100vw;
	}
	.project span{	
		display: block;
		font-size:3.5vh;
	}
	.ProjectDesc{
		float:none;
		clear:both;
		width:95vw;
		display: block;
		text-align: left;
		padding:40px 3vw 20px 2vw;
		margin:0;
	}
    .ProjectDesc h5{
    width:75vw;
}
	.ProjectDesc p{
		font-family: 'Lato', sans-serif;
		font-size:calc(10px + 1.2vh);
		line-height: 4vh;
		text-align: justify;
		text-justify: inter-word;
		margin:0 0 2vh 0;
	}
	.ProjectDesc img{
		display: inline-block;
		margin: 0;
		
	}
	.mobileContainer{
		display: inline-block;
		width: 70%;
		vertical-align:top;
	}

	.ProjectImg{
		width:100vw;
        background-position: top;        
	}
	.ProjectImgH{
    	width:95vw;
        background-position: top;
		margin:0 3vw 0 2vw;
	}
	.projectLogo{
		height:150px;
		display: block;
	}
	.overlayProjects{
		height:100%;
		width:100%;
	}
	/** tooltip for games **/
	.game:hover{
		cursor: pointer;    
	}
	.gametooltip {
		display: none;
		position: fixed;
		z-index: 1000;
		font-size:1.3em;
	}
	/** special layout for photos **/
	#photoProject{
		position:relative;
		z-index: 10;
		top:0;
		right: 0;
		height:100%;
		width: 100%;    
	}
	#PhotoProjectDesc{
		width:20%;
	}
    
    .ProjectImgx21, .ProjectImgx22 {
        position: relative; 
        display: block;
		width:100vw;
        background-position: top;  
        height: 80vh;
        opacity:1;
        top:0;
        margin-bottom: 2vw;
        transform: translateX(0);
    }
    .clickToSee{
        display: none;
    }
	/********** Lightbox *************/
    
	
	#lightboxFlickr{
		font-size: 2em;
	}
	.ProjectImgPhoto{
		height: 700px;
    	display: inline-block;
   		padding: 0 calc(50vw - 400px);
	}
	#PhotoProjectDesc{
        float:none;
		clear:both;
		width:90vw;
		display: block;
		text-align: left;
		padding: 30px;
		margin:0;
    }
		

	#lightbox p{
		font-size: 1em;
	}
	
	
    #logoAnimatedPhoto{
        width: 15vw;
        height: 10vh;
    }
    #retour{
        display: none;
    }		
    /**get full width**/
    .bgwrapper{
        max-width: 100vw;
    }
    
    .formInputs{
        font-size: 1em;
    }
	
    #scrollNow{
        background-image: url(../images/down-chevron-white.gif);
        top: 58vh;

    }
    #aboutContact{
        width: 90vw;
    }
    #visitSub{
        font-size: 1.1em;
    }
    
}


@media (hover: none) and  (max-width: 830px) {
/* Light box on small width */
    body{
        font-size: 1.1em;
    }
    
	#lightbox-img{
		width: 90vw;
    	height: 60vw;	
	}
	.ProjectImgPhoto{
		margin-left: 2vw;
	}

    .visitpoints {
        padding: 30px 5px 50px 5px;
        width: 100vw;
        text-align: center;
        font-size: 1em;
    }
    	#logoAnimated{
		height: 28vh;
		width: 40vh;
		top:calc(50% - 9vh);
		left:calc(50% - 20vw);
	}
}

@media all and  (max-width: 740px) {
    /*************************************/
        	#logoAnimated{
		height: 40vw;
		width: 60vw;
		top:calc(50% - 20vh);
		left:calc(50% - 30vw);
	}
    .even{
        display:none;
    }
    .animate-charcter
    {
        font-size: 25px;
    }

@media all  and (orientation: landscape) and (max-width: 1200px) {
	h1{
        text-align: center;
        font-size:5vh;
    }
	h2{
        text-align: center;
        font-size: 4vh;
    }
	#nameTitle{
		top:0;
	}
	#logoAnimated{
		height: 28vh;
		width: 40vh;
		top:calc(50% - 9vh);
		left:calc(50% - 20vw);
	}
    
    	@keyframes logoResize{
	100%{
		top:0;
		left:5%;
		width: 80px; /*140px*/
		height: 52px;/*100px*/
        margin: 2px 0 0 0;
		}
	}
    #nameSection{
        max-height: 50vh;
        
    }
    #nameHeader{
        width:calc(100px + 40vw);
		transform: translate(calc(-60px - 20vw),0);
		font-size: calc(7px + 0.4vw);		
		padding:0;
	}
    .bgimgPh2{
       /* min-height: 100vh; */
    }
    #scrollNow{
        top: 80vh;
    }
    /*******************/
    nav a {
        font-size: 1em;
    }
	.mobileNav{
		font-size: 20px;
		text-align: center;
	}
	.burger{
		padding: 20px;
	}
    
	#ouvrir{
		font-size:3vh;
	}
	
	#videoDiv{
		padding-top: 0;
	}


}