/*------------------------------------*\
$CABECERA
\*------------------------------------*/


header {
  margin-bottom: 50px;
  .content-header {
    #btn-mobile {
      background: $color-primary;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      border: 0px;
      margin:0 auto;
      display: block;
      i {
        color: #ffffff;
      }
      &:hover {
       background: $color-secondary;  
     }
   }
   #logo {
    margin-top: 30px;
  }
  #menu{
    padding-left: 45px;
    margin-top: 10px;
  }

  #top-menu {
   padding-left: 100px;
   text-align: right;
 }

 #top-menu{
  width: 100%;
  margin-top: 30px;
}
#menu {
  li:first-child {
    svg path,rect,circle, polygon {
      fill: #111111;
    }
  }

  li:first-child a.active {
    svg path,rect,circle, polygon {
      fill: $color-primary;
    }
  }
  li {
    float: left;
    margin-right: 29px;
    a {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 800;
      font-size: 22px;
      line-height: 26px;
      color: #111111;

      &:hover, &.active, &.active i {
        color:$color-primary;

        &:after {

        }	
      }
    }
  }
  li:last-child {
    margin-right: 0px;
    a {

     &:hover, &.active {

      &:after {

      }   
    }
  }
}
}
#top-menu {
  ul.contact {
    li {
     float: left;
     margin-right: 45px;
     a { 
       font-style: normal;
       font-weight: 400;
       font-size: 16px;
       line-height: 19px;
       color: #999999;
       &:hover, &:hover svg &:hover svg path,&:hover svg rect,&:hover svg circle, &:hover svg polygon {
         color: $color-primary; 
       }
       &:hover svg path,&:hover svg rect,&:hover svg circle, &:hover svg polygon {
         fill: $color-primary; 
       }
       svg {
        margin-right: 15px;  
      }
    }
  }
}
ul.social {
  li {
   float: left;
   margin-right: 15px;
   a {
     color: #999999;
     font-size: 20px;
     svg:hover path,rect,circle, polygon {
      fill: $color-primary;
    }

    svg.active path,rect,circle, polygon {
      fill: $color-primary;
    }
  }
}
li:last-child {
  margin-right: 0px;
}
}  
}
input {
 background: #CCCCCC;
 border-radius: 10px;  
 border:0px;
 width: 105px;
 height: 25px;
 padding: 5px 8px;
 font-style: normal;
 font-weight: 700;
 font-size: 14px;
 line-height: 17px;
 color: #F5F5F5;
 background: #CCCCCC url("/img/frontend/icons/search.png") no-repeat;
 background-size: 20px 20px;
 background-position: right 6px center;
 &::-webkit-input-placeholder {
  color: #F5F5F5;
}

&:-moz-placeholder {
  color: #F5F5F5;
}

&::-moz-placeholder {
  color: #F5F5F5;
}

&:-ms-input-placeholder {
  color: #F5F5F5;
}
}
}
#carouselHome {
  .reference {
    border-radius: 26px;
    background: $color-primary;
    color: #ffffff;
    display: inline;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: 110px;
    padding: 10px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    min-width: 140px;
    text-align: center;
    img {
     margin-left: 8px; 
   }
 }
}
}





/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  header {
    min-height: unset !important;
  }

  #carouselHome {
   display: none; 
 }
 header .content-header #menu li {
   width: 100%;
   text-align: center; 
 }

 header .content-header #btn-mobile {
  margin-top: 20px;  
}

header .content-header #logo {
  width: 100%;
  margin-top: 20px;
}

header .content-header #menu {
  padding-left: unset;
}

#tabs-properties #tabs-home li button {
 font-size: 30px; 
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1387px) {
header .content-header #menu li {
  margin-right:20px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}