@font-face{
  font-family: colossalis;
  src: url('Colossalis Bold.ttf')
}


body {
  border-top: 6px solid #5c6a8c;
  color:#888;
  font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 }


.clear {
  clear:both;
}


/****************** end icone1********************/
.icone1 {
    float: right;
}

    .icone1 ul {
        list-style-type: none;
    }

     .icone1 ul li {
            display: inline-block;
            position: relative;
            font-size: small;
            margin-right: 15px;
        }


    .icone1 a i {
        color: #a1a1a1;
        font-size: 1em;
        text-decoration: none;
        padding-left: 5px;
        text-align: center;
        transition: color .5s;
        -webkit-transition: color .5s;
        -moz-transition: color .5s;
        margin-top: 0px;
    }

    .icone1 a:hover {
        color: #3B5998;
    }

    .icone1 a {
        color: #a1a1a1;
        font-size: 1em;
        padding-left: 5px;
        text-align: center;
        transition: color .5s;
        -webkit-transition: color .5s;
        -moz-transition: color .5s;
    }

        .icone1 a:hover i {
            color: #3B5998;
        }
   
  /****************** end icone1********************/

  /****************** nav********************/

  /****************** end nav********************/
  

/******************footer********************/
#wrapper .text {
  /*position:relative;*/
  visibility:hidden;
  opacity: 0;
  transition: opacity 1s;
    }
  
  #wrapper:hover .text {
  visibility:visible;
  opacity: 1;
  }
  

footer{
margin-top: 20px;
width:100%;
align-content: center;
}

.footer-container {
    text-align: center;
}
.first-col {
    margin-left: 10px;
}
.overlay-icone ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
  
  .overlay-icone ul li{
    display: inline-block;
    position: relative;
    
  }
  


    .mylogo {
      top:30px;
      left:-35px;
      position:absolute;
      }


    .mylogo {
      animation-name: my-logo;
      animation-duration: 8s;
      animation-iteration-count: infinite; 
    }
    @keyframes my-logo {
      from {transform: rotatey(0deg)}
      to {transform: rotatey(360deg)}
    }


  .overlay-icone a i {
  color:#a1a1a1;
  font-size:1.75em;
  text-decoration: none;
  padding-left:5px;
  text-align: center;
  transition: transform .2s;
  }
  
  .overlay-icone a i.icon-home{
  top:60px;
  left:-90px;
  color: green;
  position:absolute;
  }
  
  .overlay-icone a i.icon-phone{
  top:40px;
  left:170px;
  color: red;
  position:absolute;
  }
  
  .overlay-icone a i.icon-wrench{
  top:40px;
  left:210px;
  color: blue;
  position:absolute;
  }
  
  .overlay-icone a i.icon-envelope{
  top:65px;
  left:70px;
  color: orange;
  position:absolute;
  }
  
  
  .overlay-icone a:hover i.icon-home{
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari 3-8 */
  transform: scale(1.7); 
  }
  
  .overlay-icone a:hover i.icon-phone{
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
  }
  
  .overlay-icone a:hover i.icon-wrench{
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
  }
  
  .overlay-icone a:hover i.icon-envelope{
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}  

.copyright {
  border-top: 1px solid #888;
  font-size: 12px;
  text-align: center;
  width: 100%;
  margin:0 auto;
  padding: 10px;
  }





/******************clearfix********************/

.clearfix:after {


  content: ".";


  display: block;


  clear: both;


  visibility: hidden;


  line-height: 0;


  height: 0;

}




.clearfix {


  display: inline-block;

}




html[xmlns] .clearfix {


  display: block;

}




* html .clearfix {


  height: 1%;

}

/******************end clearfix********************/