/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height          : 80px !important;
  position        : fixed !important;
  top             : 0px;
  left            : 0px;
  right           : 0px;
  box-shadow      : 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #008493 !important;
}


@media (min-width: 991px) {

  .background-header .logo,
  .background-header .main-nav .nav li a.destacado {
    color: white !important;
  }
}


.background-header .main-nav .nav li:hover a {
  color        : #686868 !important;
  border-bottom: 3px solid #67C3A7;
}

.background-header .nav li a.active {
  color        : #686868 !important;
  border-bottom: 3px solid #67C3A7;
}

.header-area {
  /* position: absolute; */
  top               : 0px;
  left              : 0px;
  right             : 0px;
  z-index           : 100;
  height            : 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition   : all .5s ease 0s;
  -o-transition     : all .5s ease 0s;
  transition        : all .5s ease 0s;
}

.header-area .main-nav {
  min-height     : 80px;
  background     : white;
  width          : 100%;
  justify-content: space-between;
}

.header-area .logo {
  float             : left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition   : all 0.3s ease 0s;
  -o-transition     : all 0.3s ease 0s;
  transition        : all 0.3s ease 0s;
}

.header-area .logo>div>div.imagen {
  width            : 100px;
  height           : 100px;
  background-image : url(../images/logo.png);
  background-repeat: no-repeat;
  background-size  : contain;
}

.header-area .logo>div.flex>div.encabezado {
  letter-spacing: 2px;
  color         : #008493;
  font-size     : 35px;
  font-family   : 'Montserrat-Semi-Bold';
  align-self    : center;
}

.header-area .logo>div.sub-encabezado {
  letter-spacing: 5px;
  color         : #F5822A;
  font-size     : 13px;
  font-family   : 'Montserrat-Extra-Light';
  white-space   : nowrap;
  text-shadow   : 0px 0px 1px #d26c1f;
}

.header-area .main-nav .nav {
  padding           : 0px 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition   : all 0.3s ease 0s;
  -o-transition     : all 0.3s ease 0s;
  transition        : all 0.3s ease 0s;
  /*ACÁ*/
  position          : relative;
  z-index           : 999;
  align-self        : center;
}

.header-area .main-nav .nav li {
  padding-left : 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display           : block;
  font-weight       : 500;
  font-size         : 14px;
  color             : #008493;
  text-transform    : uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition   : all 0.3s ease 0s;
  -o-transition     : all 0.3s ease 0s;
  transition        : all 0.3s ease 0s;
  height            : 40px;
  line-height       : 40px;
  border            : transparent;
  letter-spacing    : 1px;
}

.header-area .main-nav .nav li:hover a {
  color        : #686868 !important;
  border-bottom: 3px solid #67C3A7;
}

.header-area .main-nav .nav li.submenu {
  position     : relative;
  padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content    : "\f107";
  font-size  : 12px;
  color      : #7a7a7a;
  position   : absolute;
  right      : 18px;
  top        : 12px;
}

.header-area .main-nav .nav li.submenu ul {
  position  : absolute;
  width     : 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow  : hidden;
  top       : 40px;
  opacity   : 0;
  transform : translateY(-2em);
  visibility: hidden;
  z-index   : -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left  : 0px;
  padding-left : 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  display           : block;
  background        : #fff;
  color             : #008493 !important;
  padding-left      : 20px;
  height            : 40px;
  line-height       : 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition   : all 0.3s ease 0s;
  -o-transition     : all 0.3s ease 0s;
  transition        : all 0.3s ease 0s;
  position          : relative;
  font-size         : 13px;
  border-bottom     : 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:before {
  content           : '';
  position          : absolute;
  width             : 0px;
  height            : 40px;
  left              : 0px;
  top               : 0px;
  bottom            : 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition   : all 0.3s ease 0s;
  -o-transition     : all 0.3s ease 0s;
  transition        : all 0.3s ease 0s;
  background        : #fba70b;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background  : #fff;
  color       : #fba70b !important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility      : visible;
  opacity         : 1;
  z-index         : 1;
  transform       : translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor     : pointer;
  display    : block;
  position   : absolute;
  top        : 23px;
  width      : 32px;
  height     : 40px;
  text-indent: -9999em;
  z-index    : 99;
  right      : 40px;
  display    : none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition   : all 0.4s;
  -o-transition     : all 0.4s;
  -webkit-transition: all 0.4s;
  transition        : all 0.4s;
  background-color  : #1e1e1e;
  display           : block;
  position          : absolute;
  width             : 30px;
  height            : 2px;
  left              : 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #278393;
  ;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition   : all 0.4s;
  -o-transition     : all 0.4s;
  -webkit-transition: all 0.4s;
  transition        : all 0.4s;
  background-color  : #1e1e1e;
  display           : block;
  position          : absolute;
  width             : 30px;
  height            : 2px;
  left              : 0;
  width             : 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #278393;
  ;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin   : 33% 100%;
  -ms-transform-origin    : 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin        : 33% 100%;
  top                     : -10px;
  z-index                 : 10;
  width                   : 30px;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin   : 33% 0;
  -ms-transform-origin    : 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin        : 33% 0;
  top                     : 10px;
  width                   : 30px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width           : 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform   : translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform    : translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform        : translateY(6px) translateX(1px) rotate(45deg);
  background-color : #278393;
  ;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #278393;
  ;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform   : translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform    : translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform        : translateY(-6px) translateX(1px) rotate(-45deg);
  background-color : #278393;
  ;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #278393;
  ;
}

.header-area.header-sticky {
  min-height: 130px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color        : #686868 !important;
  border-bottom: 3px solid #67C3A7;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left : 12px;
    padding-right: 12px;
  }

  .header-area .main-nav .nav li a {
    font-size: 80%;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 991px) {
  .destacado {
    color: black !important;
  }

  .logo {
    text-align: center;
    float     : none !important;
  }

  .header-area {
    padding   : 0px 15px;
    height    : 80px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    /*       overflow: hidden;
 */
  }

  .background-header .logo,
  .background-header .main-nav .nav li a {
    color: #67c3a7 !important;
  }

  .header-area .main-nav .nav {
    float             : none;
    width             : 100%;
    margin-top        : 100px !important;
    display           : none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition   : all 0s ease 0s;
    -o-transition     : all 0s ease 0s;
    transition        : all 0s ease 0s;
    margin-left       : 0%;
    position          : absolute;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area .main-nav .nav li {
    width        : 100%;
    background   : #fff;
    border-bottom: 1px solid #eee;
    padding-left : 0px !important;
    padding-right: 0px !important;
    border-left: 1px solid #eee;
  }

  .header-area .main-nav .nav li a {
    height     : 50px !important;
    line-height: 50px !important;
    padding    : 0px !important;
    border     : none !important;
    background : #f9f7f7 !important;
    font-weight: 900;
/*     text-shadow: 0px 0px 2px black;
    color      : white !important; */
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color     : #fba70b !important;
  }

  .header-area.header-sticky .nav li a.active {
    color        : #fba70b !important;
    border-bottom: 3px solid #67C3A7;
    text-shadow  : 0px 0px 2px white;
  }

  .header-area .main-nav .nav li.submenu ul {
    position        : relative;
    visibility      : inherit;
    opacity         : 1;
    z-index         : 1;
    transform       : translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top             : 0px;
    width           : 100%;
    box-shadow      : none;
    height          : 0px;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size  : 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }

  .header-area .main-nav .nav li.submenu:after {
    color    : #3B566E;
    right    : 25px;
    font-size: 14px;
    top      : 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

.destacado {
  background-color: #F5822A;
  padding-right   : 20px;
  padding-left    : 20px;
  color           : white;
}

.destacado:hover {
  color           : white;
  background-color: #67C3A7;
}

a .destacado:hover {
  color: white;
}