@import url(http://fonts.googleapis.com/css?family=Ubuntu);

*{
	margin: 0;
	padding: 0;
	font-family: "Ubuntu";
}

body{
	background-image : -webkit-gradient(radial,center center,900,center bottom,0,from(rgba(0, 204, 255, 0.5)),to(white));
	background-image : -moz-gradient(radial,center center,900,center bottom,0,from(rgba(0, 204, 255, 0.5)),to(white));
	background-image : -0-gradient(radial,center center,900,center bottom,0,from(rgba(0, 204, 255, 0.5)),to(white));
	background-repeat: no-repeat;
	padding-top: 2%;
}

.main-content{
	width: 58%;
	height: 100%;
}

.containers{
	height: 210px;
	margin-bottom: 1%;
}

#cont1{
	width: 66.2%;
	height: 100%;
	float: left;
	background-image: url("../img/waw banner.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat:no-repeat;
	background-color: rgba(0, 0, 0, 1.00);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

#cont1:hover{
	cursor: pointer;
	margin: 0.2% 0.8% 0 0.4%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	transition: all;
	transition-duration: 0.8s;
	transition-timing-function: linear;
}

#cont12{
	width: 32.6%;
	height: 100%;
	background-color: rgb(0, 204, 102);
	float: right;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1.00);
}

#cont12:hover{
	box-shadow: 0 0 10px rgba(0, 0, 0, 1.00);
	cursor: pointer;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	animation-name: pop_out;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	-webkit-animation-name: pop_out;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
}

.profil_preview{
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#extremite_gauche{
	float: left;
}

#milieu{
	margin: 0 1% 0 1.254%;
}

#extremite_droit{
	float: right;
}

.profil_contain{
	width: 32.5%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-repeat:no-repeat;
	display: inline-block;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}


.profil_contain:hover{
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	animation-name : profilAnimation;
	animation-fiming-function : linear;
	animation-duration : 1s;
	animation-iteration-count : 1;
	animation-delay : 0s;
	animation-fill-mode: none;
	transform-origin : 50% 50%;
}

#cont3{
	width: 66.2%;
	height: 100%;
	float: right;
	background-image: url("../img/web_development.png");
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #E97D7E;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1.00);
	animation-name : wallpaper;
	animation-duration: 3s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

#cont3:hover{
	width: 65%;
	height: 95%;
	margin: 0.4% 0.8% 0 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	background-color:transparent;
	animation-name : wallpaper;
	animation-play-state: paused;
	transition: width, height, margin, background-color;
	transition-duration: 0.8s;
	transition-timing-function: linear;
}

#cont32{
	width: 32.6%;
	height: 100%;
	background-color: #e76022;
	float: left;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1.00);
}

#cont32:hover{
	box-shadow: 0 0 10px rgba(0, 0, 0, 1.00);
	cursor: pointer;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	animation-name: pop_out;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	//animation-direction: alternate;
	-webkit-animation-name: pop_out;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	//-webkit-animation-duration: alternate;
}

.img_profil{
	width: 45%;
	border: 5px solid rgba(211,211,211,0.6);
}

.infos{
	width: 99%;
	height: 30%;
	margin-top: 13%;
	color: white;
	//border: 1px solid black; 
}

.contact, .infos{
	display:inline-block;
}

h3{
	width: 45%;
	margin: auto;
	font-size: 1.5em;
	//text-decoration: underline;
	vertical-align: top;
	position: relative;
	top: 40%;
	text-align: center;
	//border: 1px solid white;
}

span{
	color: rgba(0,179,255,0.7);
}

ul{
	position: relative;
	left: 13%;
}

li{
	font-size: 0.9em;
}

.contact{
	width: 100%;
	height: 50%;
	color: white;
	background-color: rgba(255,255,255,0.20);
}

.contact img, .contact h3{
	display: inline-block;
}

.contact:hover{
	animation-name : hinge;
	animation-fiming-function : ease;
	animation-duration : 1.5s;
	animation-iteration-count : 1;
	animation-delay : 0.5s;
	animation-fill-mode: towards;
	transform-origin : 0% 0%;
}

#links{
	margin-left: 10%;
	margin-top: 4%;
}

#links img{
	width: 15%;
	margin-left: 3%;
}

#back_end, #front_end{
	color: white;
	text-align: center;
	position: relative;
	top: 31%;
	font-size: 1.7em;
	font-weight: bold;
	//border: 1px solid black;
}

.developer{
	color: white;
	font-size: 1.6em;
	font-weight: bold;
	position: relative;
	top: 21%;
	text-align: center;
}

.foot{
	height: 100px;
}

/* Animations keyframes  */

@keyframes profilAnimation{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  40% {
    transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  50% {
    transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  60% {
    transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  70% {
    transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  80% {
    transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  90% {
    transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(1.05) scaleY(1.05) ;
  }
}

@-moz-keyframes profilAnimation{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -moz-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  40% {
    -moz-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  50% {
    -moz-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  60% {
    -moz-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  70% {
    -moz-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  80% {
    -moz-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  90% {
    -moz-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  100% {
    -moz-transform:  rotate(0deg) scaleX(1.05) scaleY(1.05) ;
  }
}

@-webkit-keyframes profilAnimation {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -webkit-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  40% {
    -webkit-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  50% {
    -webkit-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  60% {
    -webkit-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  70% {
    -webkit-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  80% {
    -webkit-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  90% {
    -webkit-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(1.05) scaleY(1.05) ;
  }
}

@-o-keyframes profilAnimation {
  0% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -o-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  40% {
    -o-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  50% {
    -o-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  60% {
    -o-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  70% {
    -o-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  80% {
    -o-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  90% {
    -o-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  100% {
    -o-transform:  rotate(0deg) scaleX(1.05) scaleY(1.05) ;
  }
}

@-ms-keyframes profilAnimation {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -ms-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  40% {
    -ms-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  50% {
    -ms-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  60% {
    -ms-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  70% {
    -ms-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  80% {
    -ms-transform:  rotate(-3deg) scaleX(1.05) scaleY(1.05) ;
  }
  90% {
    -ms-transform:  rotate(3deg) scaleX(1.05) scaleY(1.05) ;
  }
  100% {
    -ms-transform:  rotate(0deg) scaleX(1.05) scaleY(1.05) ;
  }
}

@keyframes hinge{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(60deg)  ;
  }
  40% {
    transform:  rotate(40deg) ;
  }
  60% {
    transform:  rotate(54deg) ;
  }
  80% {
    transform:  rotate(42deg) ;
  }
  100% {
    transform:  rotate(46deg) ;
  }
}

@-moz-keyframes hinge{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(60deg) ;
  }
  40% {
    -moz-transform:  rotate(40deg) ;
  }
  60% {
    -moz-transform:  rotate(54deg) ;
  }
  80% {
    -moz-transform:  rotate(42deg) ;
  }
  100% {
    -moz-transform:  rotate(46deg) ;
  }
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform:  rotate(0deg);
  }
  20% {
    -webkit-transform:  rotate(60deg) ;
  }
  40% {
    -webkit-transform:  rotate(40deg) ;
  }
  60% {
    -webkit-transform:  rotate(54deg) ;
  }
  80% {
    -webkit-transform:  rotate(42deg) ;
  }
  100% {
    -webkit-transform:  rotate(46deg) ;
  }
}

@-o-keyframes hinge {
  0% {
    -o-transform:  rotate(0deg);
  }
  20% {
    -o-transform:  rotate(60deg) ;
  }
  40% {
    -o-transform:  rotate(40deg) ;
  }
  60% {
    -o-transform:  rotate(54deg) ;
  }
  80% {
    -o-transform:  rotate(42deg) ;
  }
  100% {
    -o-transform:  rotate(46deg) ;
  }
}

@-ms-keyframes hinge {
  0% {
    -ms-transform:  rotate(0deg);
  }
  20% {
    -ms-transform:  rotate(60deg) ;
  }
  40% {
    -ms-transform:  rotate(40deg) ;
  }
  60% {
    -ms-transform:  rotate(54deg) ;
  }
  80% {
    -ms-transform:  rotate(42deg) ;
  }
  100% {
    -ms-transform:  rotate(46deg) ;
  }
}

@keyframes wallpaper{
	from { background-color: #E97D7E;}
	to{ background-color: transparent;}
}

@-webkit-keyframes wallpaper{
	from{ background-color: #E97D7E;}
	to{ background-color: transparent;}
}

@keyframes pop_out{
	from{ transform: scale(1, 1);}
	to{ transform: scale(1.05, 1.05);}
}

@-webkit-keyframes pop_out{
	from{ -webkit-transform: scale(1, 1);}
	to{ webkit-transform: scale(1.05, 1.05);}
}

@keyframes vire{
	from { transform: rotate(0deg) scale(1,1);}
	to{ transform: rotate(360deg) scale(0.0,0.0);}
}

@-webkit-keyframes vire{
	from { -webkit-transform: rotate(0deg) scale(1,1);}
	to{ -webkit-transform: rotate(360deg) scale(0.0,0.0);}
}