/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/icon.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.logo {
  width: 90%;
  margin-top: 4px;
}

nav ul a, .side-nav a {
  font-size: 1.2em;
}

header{
  width: auto;
  height: 600px;
  bottom: 2px;

}
header .fondoHeader{
   overflow-x:hidden; 
  position: relative;
  height: 100%;
  width: auto;
  background:url("../img/fondoHeader.png");
  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
  -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
  -o-background-size: 100% 100%;           /* Opera 9.5 */
   background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
  opacity: 1;
}
header .fondoHeader h1{
  display: inline;
  padding: 0px;
  top: 350px;
  position: relative;
  width:100%;
  font-size: 1.4em;
  text-align:center;
  color: white;
  font-weight: bold;
  
}
#intro:hover{
    color: black;
   }

header a {
  top:400px;
  width: 70%;
  cursor: pointer;
 
}
.btnHeader {
   margin-left: 30%;
   text-align: center;
}
 .waves-effect{
  background: #018cde;
 }
  
#sidenav-overlay {

  z-index:0;
}

.side-nav a:hover {
    background-color: #562d02;
}
        /*Estilos del footer*/
.footer{
    background: #f0f0f0;
    padding: 4em 0 6em 0;
    text-align: center;
    position: relative;
  }

    .footer .fa a {
      -moz-transition: opacity 0.2s ease-in-out;
      -webkit-transition: opacity 0.2s ease-in-out;
      -ms-transition: opacity 0.2s ease-in-out;
      transition: opacity 0.2s ease-in-out;
      opacity: 0.35;
    }

      .footer .fa a:hover {
        opacity: 0.75;
      }

    .footer .copyright {
      color: #999.
      font-size: 0.9em;
      line-height: 1em;
      margin: 2em 0 0 0;
      padding: 0;
      text-align: center;
    }

      .footer .copyright a {
        color: inherit;
      }

      .footer .copyright li {
        border-left: solid 1px #dddddd;
        display: inline-block;
        list-style: none;
        margin-left: 1em;
        padding-left: 1em;
      }

      
  
        
  ul.icons {
      cursor: default;
      list-style: none;
      padding-left: 0;
    }

      ul.icons li {
        display: inline-block;
        padding: 0 1.25em 0 0;
      }

        /*ul.fa li:last-child {
          padding-right: 0;
        }*/

        ul.icons li .fa {
          font-size: 1.75em;
          color: #E36E2E;
        }

          ul.icons li .fa:hover{
            font-size: 1.75em;
            color: #F15B2B;
          }






@media Screen and (min-width:480px){
 
 header .fondoHeader h1{
       display:inline-table;
       padding: 0px;
       top: 330px;
       position: relative;
       width:100%;
       font-size: 2em;
       text-align:center;
       color:white;
       font-weight: bold;
   }
   #intro:hover{
    color: #018cde;
   }

   header a {
      top:370px;
      width: 30%;
      cursor: pointer;
 
     }
    .btnHeader {
     margin-left: 35%;
     text-align: center;
     }
     .waves-effect{
      background: #018cde;
     }



}
@media Screen and (min-width:600px){

 header{

    width: auto;
    height:550px;

   }
   #intro:hover{
    color: black;
   }
   header .fondoHeader h1{
       display:inline-table;
       padding: 0px;
       top: 320px;
       position: relative;
       width:100%;
       font-size: 2em;
       text-align:center;
       color:white;
       font-weight: bold;
   }
   header a {
      top:350px;
      width: 20%;
      cursor: pointer;
 
     }
    .btnHeader {
     margin-left: 40%;
     text-align: center;
     }
     .waves-effect{
      background: #018cde;
     }


}
@media Screen and (min-width:767px){

   header{

    width: auto;
    height:550px;

   }
   header.fondoheader{
    overflow-x:hidden;
    height: 100%;
    position: relative;
    opacity: 0.6;
   }
   header .fondoHeader h1{
       display:inline-table;
       padding: 0px;
       top: 250px;
       position: relative;
       width:100%;
       font-size: 3em;
       text-align:center;
       color:white;
       font-weight: bold;
    
  
     }

    
      header a {
      top:300px;
      width: 20%;
      cursor: pointer;
 
     }
    .btnHeader {
     margin-left: 40%;
     text-align: center;
     }
     .waves-effect{
      background: #018cde;
     }
     #intro:hover{
    color: black;
     }


     }