@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 : -o-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: 90%;
	height: 100%;
}

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

#cont1{
	width: 100%;
	height: 50%;
  margin-bottom: 2%;
	background-image: url("../img/waw banner.jpg");
	background-size: 150%;
	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);
}

#cont12{
	width: 45%;
	height: 50%;
	background-color: rgb(0, 204, 102);
	margin-bottom: 2%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1.00);
  animation-name: pop_out;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 3s;
  -webkit-animation-name: pop_out;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 3s;
  //-webkit-animation-fill-mode: forwards;
}

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

.profil_contain{
	width: 100%;
	height: 50%;
	padding: 0;
	margin-bottom: 2%;
	background-repeat:no-repeat;
	display: inline-block;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  animation-name : profilAnimation;
  animation-fiming-function : linear;
  animation-duration : 1s;
  animation-iteration-count : 1;
  animation-delay : 5s;
  animation-fill-mode: none;
  transform-origin : 50% 50%;
}

#cont3{
	width: 100%;
	height: 50%;
	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;
}

#cont32{
	width: 100%;
	height: 50%;
	background-color: #e76022;
	//float: left;
  margin-bottom: 2%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1.00);
  animation-name: pop_out;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 10s;
  -webkit-animation-name: pop_out;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 10s;
}

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

.infos{
	width: 60%;
	height: 50%;
	margin-left: 13%;
  float: right;
	color: white;
	//border: 1px solid black; 
}

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

h3{
	width: 45%;
	margin: auto;
	font-size: 1.5em;
	vertical-align: top;
	position: relative;
	top: 40%;
	text-align: center;
}

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

.contact{
	width: 100%;
	height: 48%;
	color: white;
	background-color: rgba(255,255,255,0.20);
  //border: 1px solid black;
  animation-name : hinge;
  animation-fiming-function : ease;
  animation-duration : 1.5s;
  animation-iteration-count : 1;
  animation-delay : 5.5s;
  animation-fill-mode: towards;
  transform-origin : 0% 0%;
}

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

#links{
	margin-top: 4%;
	margin-bottom: 20%;
}

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

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

.developer{
	color: white;
	font-size: 1em;
	font-weight: bold;
	position: relative;
	top: 7%;
	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);}
}