@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
    /*background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);*/
    
  }


  .perso{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    width: 374px;
    height:374px; 
  }

  body {
    font-family: 'Lato', sans-serif;
    color: #b3aca7;
  }


  h3 {text-align:center;
    color:#f2956a;
    text-transform: uppercase;

  }

  a:link, a:visited
  {color:grey;
    text-decoration: none;}

    a:hover, a:active
    {color:#f2956a;
      text-decoration: none;}
      h1
      {color:white;
        font-size:18px;
      }

      p {text-align:center;

      }
      h2
      {
        font-size:18px;
        text-transform: uppercase;
        text-align: center;
      }
      .footer 
      {display:block;
        background-color:#585858;
        width: auto;
      }

      hr
      {

       border-color:#f2956a;
     }

     .menu {
      height: 70px;
      width: 70px;
      right: 70px;
      top: 20px;
      text-align: center;
      position: absolute;
      background: #F2956A;
      overflow: hidden;
      -webkit-transition: all .2s ease;
      transition: all .2s ease;
      z-index: 999;
    }
    .menu.active {
      width: calc(100% - 140px);
    }
    .menu.active .menuContent * {
      opacity: 1;
    }
    .menu.active span i:nth-child(1) {
      -webkit-transform: rotate(-45deg) translate(-50%, -50%);
      transform: rotate(-45deg) translate(-50%, -50%);
      top: 50%;
    }
    .menu.active span i:nth-child(2) {
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0;
    }
    .menu.active span i:nth-child(3) {
      -webkit-transform: rotate(45deg) translate(-50%, -50%);
      transform: rotate(45deg) translate(-50%, -50%);
      top: 50%;
    }
    .menu span {
      width: 70px;
      height: 70px;
      position: absolute;
      right: 0;
      cursor: pointer;
      background: #F2956A;
      z-index: 1;
    }
    .menu span i {
      position: absolute;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      width: 45%;
      height: 2px;
      left: 0;
      right: 0;
      margin: auto;
      background-color:white;
      -webkit-transition: opacity .1s ease .1s, -webkit-transform .3s ease;
      transition: opacity .1s ease .1s, -webkit-transform .3s ease;
      transition: transform .3s ease, opacity .1s ease .1s;
      transition: transform .3s ease, opacity .1s ease .1s, -webkit-transform .3s ease;
    }
    .menu span i:nth-child(1) {
      top: 40%;
    }
    .menu span i:nth-child(2) {
      top: 50%;
    }
    .menu span i:nth-child(3) {
      top: 60%;
    }
    .menu .menuContent {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 70px;
      right: 0px;
      text-align: center;
    }
    .menu .menuContent * {
      opacity: 0;
    }
    .menu .menuContent ul li {
      display: inline-block;
      margin-left: 50px;
      margin-right: 50px;
      color: white;
      -webkit-transition: opacity .3s ease .3s;
      transition: opacity .3s ease .3s;
      cursor: pointer;
      position: relative;
    }
    .menu .menuContent ul li:hover:before {
      opacity: .8;
      top: 13px;
      left: 20px;
    }
    .menu .menuContent ul li:hover:after {
      opacity: .8;
      bottom: 13px;
      left: -20px;
    }
    .menu .menuContent ul li:before, .menu .menuContent ul li:after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2px;
      background: #cccccc;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }
    .menu .menuContent ul li:before {
      -webkit-transform: rotate(-55deg);
      transform: rotate(-55deg);
      left: 60px;
      top: -30px;
      opacity: 0;
      right: 0;
      margin: auto;
    }
    .menu .menuContent ul li:after {
      -webkit-transform: rotate(-55deg);
      transform: rotate(-55deg);
      left: -60px;
      bottom: -30px;
      opacity: 0;
      right: 0;
      margin: auto;
    }

    .colorfond
    {display:block;
      background-color:gray;
    }

    * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   .container{
     max-width:1000px;
     margin:0 auto;
     min-height: 800px;
   }


   .image 
   {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width:166px ;
     height:204px;
     
   }