/*************** Project images ***************/

#hongKong{
	height: 400px;
	background-image: url("../images/projects/HongKong.png");
}
#hongKongProjectImg{
    background-image: url("../images/projects/HongKong.png");
}
#rock{
	height: 400px;
	background-image: url("../images/projects/Guitar.jpg");
}
#rockProjectImg{
	background-image: url("../images/projects/Guitar.jpg");
}


#cso{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/cso_post.jpg");
}
#csoProjectImg{
	background-image: url("../images/projects/LargeCSOPoster.png");
}

#studios{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/Les-Studios-Mascaron.png");
}
#studiosProjectImg{
	background-image: url("../images/projects/Studios.png");
}

#newsletter{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/newletter.png");
}
#newsletterProjectImg{
	background-image: url("../images/projects/Inauguration_mod.gif");
}
#newsletterProjectImg:hover{
	cursor:pointer;
}

#palegrey{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/palegrey_5.jpg");
}

#dance{
	height: 400px;
	background-image: url("../images/projects/BreakDancePoster300.png");
}
#danceProjectImg{
	background-image: url("../images/projects/BreakDancePoster.jpg");
}
#danceProjectImg2{
	background-image: url("../images/projects/DanceMagazineCover.jpg");
}
#wordface{
	height: 400px;
	background-image: url("../images/projects/composites.jpg");
}

#groot{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/groot500.png");
}
#grootProjectImg{
	background-image: url("../images/projects/groot500.png");
}

#bayblade{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/bayblade500.jpg");
}
#baybladeProjectImg{
	background-image: url("../images/projects/bayblade500.jpg");
}

#trump{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/TrumpJong500.png");
}
#trumpProjectImg{
	background-image: url("../images/projects/TrumpJong.jpg");
}

#haloween{
	height: 300px;
	background-position: center;
	background-image: url("../images/projects/haloweenGirl.jpg");
}
#haloweenProjectImg{
	background-image: url("../images/projects/haloweenGirl.jpg");
}

#photos{
	/*height: 300px;
	background-image: url("../images/photos/colibri.jpg");
    */
}

#cv{
	height: 300px;
	background-image: url("../images/projects/CV.jpg");
}
#cvProjectImg{	
	background-image: url("../images/projects/CV.jpg");
}

/*************** Projects screen ***************/
.overlayProjects{
	position: fixed;
	width:100%;
	height:100%;
	background-color: rgba(40,40,40,1);
	z-index: 10;
}

.ProjectImg{
    display: inline-block;
	width: 65%;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 50px;
}
.ProjectImgH{
    display: inline-block;
	width: 70%;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 50px;
}
.ProjectImgsX{
    position: absolute; 
	width: 60%;
    height:90%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 50px;
}
.ProjectImgx21{       
    transform: translateX(-1%);
    z-index: 2;
}
.ProjectImgx22{
    top:10%;
    transform: translateX(1%);
    z-index: 1;
    opacity: 0.3;
    cursor: pointer;
}
.clickToSee{   
    position: fixed; 
    bottom:0%;
    left:40%;
    margin-bottom: 2vh;
    cursor: pointer;
    z-index: 3;
    opacity: 1;
}
.clickToSee p{
    text-align: center;
    font-size: 2.5vh;
    width: 200px;
    margin: 0;
}
.clickToSeeArrow{
    background-image: url("../images/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 3vh;
    width: 200px;
}
h5{    
    font-size:5em;
    margin:0 0px 30px 0px;
}
.project span{
    display: block;
    font-size:2.5em;
    /*min-width: 300px;*/
}
.ProjectDesc{
    float: left;
    height: 100%;
    width: 25%;
    margin: 150px 2vw 0px 1vw;
}

.ProjectDesc p{
    margin: 0px 0px 20px 0px;
    /*font-family: 'Lato', sans-serif;*/
    font-size:1.5em;
    /*line-height: 2.8vh;*/
    text-align: justify;
    text-justify: inter-word;
}
.ProjectDesc img:not(.projectLogo){
    width:50px;
    height:50px;
    margin: 10px 5px 0 0 ;

}

#logoAnimatedProject:hover, .logoProject a:hover {
    color:#fb1;
}
#logoAnimatedPhoto:hover, .logoProject a:hover {
    color:#fb1;
}
#retour{
    margin: -105px 0px 0px 0px;
    height: 100px;
    width: 60px;
    vertical-align: text-top;
    font-size: 1.2em;
}
.logoProject{
    position:absolute;
	z-index: 100;
    color: white;
    margin:20px 2vw 0 1vw; 
}
#logoAnimatedProject, #logoAnimatedPhoto{
	height:100px;	
    width:130px;
}



/** tooltip for games **/
.game:hover{
    cursor: pointer;    
}
.gametooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    font-size:2.2em;
	color:#fb1;
	text-shadow: 2px 2px 3px #fff;
}


/** tooltips **/
.reloadtooltip {
   display: none;
    position: fixed;
    z-index: 1000;
    font-size:2.2em;
	color:#fb1;
	text-shadow: 2px 2px 3px #fff;
}

/** special layout for photos **/
#lightbox{
 margin:20px auto 0;
}
#PhotoProjectDesc{
    width:20vw;
}
#lightboxDescTxt{
    font-size: 1em;
    line-height: 1.3em;
}
.ProjectImgPhoto{
	height: 100vh;
    display: inline-block;
   	padding: calc( 50vh - 350px ) 0 ;
	
}
#lightboxContainer{
	width:75vw;
	margin: 0 auto;
}

/** layoutfor videos **/
.videoBox{
	height:500px;
	width:800px;
	/*background-color: #424242;*/
}
#videoDiv{
	padding-top: calc(50vh - 250px);
	height:100%;
	text-align: center;	
}