/* This css was created by AGRA; 
Created 15/12/2020 5:00pm*/

:root{
    --negro: #000;
    --negroB: #353535;
    --blanco: #fff;
    --amarillo: #eead36;
    --gris: #b2b2b2 ;
    --rosa: #a19a8d;
    --grisB: #424242;
    --playfairRegular: 'Playfair Display SC', serif;
    --playfairBold: 'Playfair Display', serif;
    --hkNovaMedium: "HKNova-Medium";
    --helveticaNeuLT: "HelveticaNeueLTStd";
    --gilroyExtrabold: "gilroy-extrabold";
}
@font-face{
    font-family: "HKNova-Medium";
    src: url('../../archivos/fonts/HKNova-Medium.otf');
  }
@font-face{
    font-family: "HelveticaNeueLTStd";
    src: url('../../archivos/fonts/HelveticaNeueLTStd-Roman.otf');
}
@font-face{
    font-family: "gilroy-extrabold";
    src: url('../../archivos/fonts/gilroy-extrabold.otf');
}
.navbar{
    background: var(--negroB);
}
.nav-link{
    color: var(--blanco);
    font-family: var(--playfairRegular);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.highlighted{
    color: var(--amarillo);
}
.logoHeader{
    position: relative;
}
.logoHeader a{
    font-family: var(--gilroyExtrabold);
    color: var(--rosa);
    font-size: 35px;
}
.logoHeader.brackets a:before{
    content: "";
    position: absolute;
    width: 8px;
    height: 35px;
    background: transparent;
    border-left: 3px solid var(--amarillo);
    border-top: 3px solid var(--amarillo);
    border-bottom: 3px solid var(--amarillo);
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}
.logoHeader.brackets a:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 35px;
    background: transparent;
    border-top: 3px solid var(--amarillo);
    border-right: 3px solid var(--amarillo);
    border-bottom: 3px solid var(--amarillo);
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}
#slider11{
    background-color: var(--grisB);
}
.titleSlide{
    font-size: 50px;
    font-family: var(--playfairRegular);
    color: var(--blanco);
}
.btnSlide{
    background: var(--amarillo);
    color: var(--blanco);
    font-family: var(--playfairRegular);
    border: 1px solid var(--amarillo);
    font-weight: 400;
    font-size: 19px;
    transition: all .5s ease-in-out!important;
}
.btnSlide:hover{
    background: transparent;
}
.hesperiden .tp-bullet:hover, .hesperiden .tp-bullet.selected{
    background-color: var(--amarillo);
}
.hesperiden .tp-bullet{
    background: transparent;
    border: 2px solid var(--amarillo);
}


#cube-grid-mosaic-filter{
    padding: 50px 0;
    background-color: var(--grisB);
}
.filterHome{
    font-family: var(--hkNovaMedium);
    color: var(--blanco);
    font-size: 17px;
    line-height: normal;
    transition: .5s ease-in-out;
}
.filterHome.cbp-filter-item-active{
    color: var(--amarillo);
}
.filterHome:hover{
    color: var(--amarillo);
}
.cbp-filter-item:after{
    background-color: #b2b2b2;
    width: 5px;
    height: 5px;
}
.overlay span.bgGalleryHome{
    background: rgb(238 173 54 / .55);
    opacity: 0;
    z-index: 4;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer !important;
}
.overlay:hover span.bgGalleryHome {
    opacity: 1;
    -webkit-transition: opacity 0.35s ease-in-out;
    -o-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
}


#aboutJob .plyr__play-large{
    background: var(--amarillo);
}
#aboutJob .title{
    font-family: var(--playfairBold);
    color: var(--amarillo);
    font-size: 35px;
    margin-bottom: 35px;
}
#aboutJob .subtitle{
    font-family: var(--hkNovaMedium);
    color: var(--rosa);
    line-height: normal;
    font-size: 17px;
    margin-bottom: 35px;
}
#aboutJob p{
    font-family: var(--helveticaNeuLT);
    text-align: justify;
    color: var(--blanco);
    font-size: 17px;
    line-height: 22px;
}


.social-bg.social-s li a i{
    width: 45px;
    height: 45px;
}
.social-bg .fa-facebook-f,
.social-bg .fa-pinterest,
.social-bg .fa-instagram{
    background: var(--grisB);
    color: var(--amarillo);
    transition: .5s ease-in-out;
}
.social-bg .fa-facebook-f:hover,
.social-bg .fa-pinterest:hover,
.social-bg .fa-instagram:hover{
    background: var(--blanco);
}
footer{
    background: var(--amarillo);
}
footer .inner{
    padding: 30px 0;
}
footer .copyright{
    color: var(--blanco);
    font-family: var(--helveticaNeuLT);
}
footer img.creator{
    width: 170px;
    height: auto;
}
.logoFooter{
    position: relative;
    display: table;
    margin: 0 auto;
}
.logoFooter a{
    font-family: var(--gilroyExtrabold);
    color: var(--grisB);
    font-size: 35px;
}
.logoFooter.brackets a:before{
    content: "";
    position: absolute;
    width: 8px;
    height: 35px;
    background: transparent;
    border-left: 3px solid var(--blanco);
    border-top: 3px solid var(--blanco);
    border-bottom: 3px solid var(--blanco);
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}
.logoFooter.brackets a:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 35px;
    background: transparent;
    border-top: 3px solid var(--blanco);
    border-right: 3px solid var(--blanco);
    border-bottom: 3px solid var(--blanco);
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}
#scrollUp .btn{
    background: var(--grisB);
}
#scrollUp .btn:hover, 
#scrollUp .btn:focus, 
#scrollUp .btn:active, 
#scrollUp .btn.active{
    background: var(--grisB);
}

/*** 

====================================================================
  Responsive
====================================================================

***/
/*Ipad Pro Vertical*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait){
    
}

/*Ipad Pro Horizontal*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
    
}

/*Ipad Horizontal*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    
}

/*Ipad Vertical*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    
}

/*Phone Vertical*/
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait){ 
    
}

/*Phone Horizontal*/
@media only screen
  and (min-width: 320px) 
  and (max-width: 736px) 
  and (orientation: landscape){ 

}