@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: 170px;
  margin-bottom: 1%;
}

#cont1{
  width: 66.2%;
  height: 100%;
  float: left;
  cursor: pointer;
  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{
  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;
  cursor: pointer;
  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);
}

.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;
  text-align: center;
}

/* 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);}
}