/* DEFAULT - LARGE SCREENS */

body {
	font-family: helvetica, arial, sans-serif;
	background-color: rgb(246, 235, 222);
	height:100%;
	font-size:16px;
	margin:0;
	padding:0;
}

* {
	box-sizing:border-box;
}

ul {
	margin-top:0;
	padding-left:25px;
}


#centerContainer {
	/* position */
	margin:auto;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	height: 450px;
	max-width:850px;
	width:100%;
	
	/* style */
	box-shadow: 0px 30px 25px -20px rgba(0, 0, 0, 0.6);
	
	/* font */
	font-family:'Lora';
	
}

/* NAME AND IMAGE */

#imageContainer {
	float:left;
	width:45%;
	background:white url("images-home/bg1.jpg");
	background-size:cover;
	height:100%;
	
	/* for children positionning*/
	position:relative;
	
	box-shadow: -30px 0px 35px -20px black  inset;
	
	overflow:hidden;
}

#name {
	color: white;
	font-size: 28pt;
	text-align:center;
	position:absolute;
	width:100%;
	top:50%;
	transform:translateY(-50%);
}

.darkFilm {
	height:100%;
	width:100%;
	background:rgba(0, 0, 0, 0.5);
}

#socialLinks {
	position:absolute;
	bottom:10px;
	width:100%;
	text-align:center;

	animation: linksSlideIn 2s;
}

#socialLinks img {
	width:40px;
	margin:10px;
}


#socialLinks img:hover {
	transform:scale(1.1);
}
/* PERSONAL INFO */

#personalInfo {
	padding: 0 20px 0px;
	float:right;
	width:55%;
	background-color:white;
	height:100%;
	
	/* book shadow */
	box-shadow: 15px 0px 15px -15px black inset;
	
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
}


.infoBox {

}

.infoBox p:first-child {
	color:rgb(170, 170, 170);
	font-size:150%;
	margin-bottom:0;
	font-family:'Dancing Script';
}


.infoBox p:nth-child(2) {
	margin-top:0px;
	
}

/* Contact message */


#contactMessage {
	
	margin-top:20px;
	margin-left:20%;
	
	font-family:Courgette;
	font-size:130%;
	color:gray;
}


/* SMALL SCREENS */


@media all and (max-width:1023px) and (orientation:portrait){
	
	#centerContainer {
		width:600px;
		height:80%;
	}
	
	#imageContainer {
		float:none;
		width:100%;
		height:45%;
		/* book shadow */
		box-shadow: 0px -30px 35px -20px black  inset;
	}
	
	#personalInfo {
		float:none;		
		width:100%;		
		height:55%;
		/* book shadow */
		box-shadow: 0px 16px 16px -15px black inset;
	}
}

@media all and (max-width:600px) and (orientation:portrait) {
	
	#centerContainer {
		width:100%;
		height:100%;
		box-shadow:none;
	}
	
	#imageContainer {
		float:none;
		width:100%;
		height:40%;
		/* book shadow */
		box-shadow: 0px -30px 35px -20px black  inset;
	}
	
	#personalInfo {
		float:none;		
		width:100%;		
		height:60%;
		/* book shadow */
		box-shadow: 0px 16px 16px -15px black inset;
	}
	
}

@media all and (max-height:450px) and (orientation:landscape) {
	
	body {
		margin:0;
		padding:0;
	}
	
	#centerContainer {
		width:100%;
		height:101%;
		box-shadow:none;
	}

	#contactMessage {
		display:none;
	}
} 

/* on iphone 4s */
@media all and (max-width:320px) {
	
	#socialLinks {
		bottom:0;
	}

	#socialLinks img {
		width:35px;
	}
}

@media all and (orientation:portrait) {
	#contactMessage {
		display:none;
	}
}


/* animations */

@keyframes linksSlideIn {
	0% {
		transform:translateY(100%);
	}
	50% {
		transform:translateY(100%);
	}
	100% {
		transform:none;
	}
}