:root {
    --font-mar-primary:"Playfair Display", serif;
    --font-mar-secondary:"rachel";
    --font-text: "Montserrat", serif;
    --color-mar:#6DA8C4;
}
@font-face {
    font-family: 'rachel';
    src: url('/dam/multiHotel-Universal-Beach-Hotels/fonts/rachel/Rachel.otf') format('opentype'),
         url('/dam/multiHotel-Universal-Beach-Hotels/fonts/rachel/Rachel.ttf') format('truetype'),
         url('/dam/multiHotel-Universal-Beach-Hotels/fonts/rachel/Rachel.png') format('png');
    font-style: normal;
    font-display: swap;
}
body p,.accordion-item .accordion-button{
    font-family:var(--font-text);
}
body a{
    font-family:var(--fontPrimary);
}
.colorMar{
    color:var(--color-mar) !important;
}
.breadcrumb-item.active{
    color:var(--color-mar);
}
.grid-swiper-menu-ficha,.preview-rooms .htt-button:hover{
    background:var(--color-mar) !important;
}
#buttonShowSearcherScroll{
    color:var(--color-mar) !important;
    border:1px solid var(--color-mar) !important;
    animation: ripple-mar 1s linear infinite;
    box-shadow: 0 0 0 2px rgba(237,105,74, 0.1),
    0 0 0 1px var(--color-mar, 0.1),        
    0 0 0 5px rgba(109,168,196, 0.1),        
    0 0 0 8px rgba(109,168,196, 0.1) !important;
}
#buttonShowSearcherScroll:hover{
    background:var(--color-mar) !important;
    color:#fff !important;
}
@keyframes ripple-mar {
    0% {
        box-shadow: 0 0 0 2px rgba(109,168,196, 0.1),
        0 0 0 1px var(--color-mar, 0.1),
        0 0 0 5px rgba(109,168,196, 0.1),
        0 0 0 8px rgba(109,168,196, 0.1);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(109,168,196, 0.1),
        0 0 0 2px var(--color-mar, 0.1),
        0 0 0 9px rgba(109,168,196, 0.1),
        0 0 0 12px rgba(109,168,196, 0.1);
    }
    100%{
        box-shadow: 0 0 0 2px rgba(109,168,196, 0.1),
        0 0 0 1px var(--color-mar, 0.1),
        0 0 0 7px rgba(109,168,196, 0.1),
        0 0 0 9px rgba(109,168,196, 0.1);
    }
}


.titleHero, h1:not(.subTitleHero), h2, h3{
    font-family: var(--font-mar-primary);
}
.ficha-hotel p.subTitleSmall{
    font-family:var(--font-text);
    color:var(--color-mar) !important;
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
}

 /*.price-color {
    font-family:var(--font-text)!important;
    color:var(--color-mar) !important;
    text-transform:uppercase;
    font-size:16px;
    font-weight:600;
}*/
.servicio-hotel h2, p.destacado{
    font-size:32px;
}
.servicio-hotel p.title{
     font-family:var(--font-text)!important;
     text-transform:uppercase;
     font-size:16px;
     font-weight:600;
     color:var(--color-mar) !important;
}

/*.titleHero{
    font-size: 52px;
    font-weight: 400;
    line-height: 56px;
    margin-top: 15px;
}
p.textHero{
    margin-top:0 !important;
}*/
.logo {
    max-width: 220px;
    height: auto;
 }
 
.htt-galeria-libreria-1 .bi-camera-fill, .colorPrimary,
.button-transparent.button-primary,.read-link a span,.read-link a,
a.btnBook,a.btnBook.button-primary:hover,
.button-transparent.button-gray{
    color:var(--color-mar) !important;
}
.button-transparent.button-primary,.read-link a span,a.btnBook.button-primary,
.button-transparent.button-gray{
      border-color:var(--color-mar);  
}
.button-transparent:hover,a.btnBook:hover,
a.btnBook.button-primary{
    color:#fff !important;
    background:var(--color-mar);
}
a.btnBook.button-primary{
    color:#fff !important;
}
.button-transparent.button-gray:hover{
    border-color:var(--color-mar);
}
.swiper-ofertas-web .button-transparent:hover,.tabsPrimary nav,
.swiper-ofertas-web p.buttons-offer .button-transparent.button-color:hover{
    background:var(--color-mar) !important;
}
.button-transparent.button-gray:hover{
    border-color:var(--color-mar);
}
.button-transparent:hover{
     background:var(--color-mar);
}
.grid-servicios-habitacion{
    background:rgba(109, 168, 196,.1);
}
.accordion-button:not(.collapsed){
    color:var(--color-mar);
    border-color:var(--color-mar);
}
.accordion a,.accordion a,.tabsPrimary .nav-tabs .nav-item.show .nav-link, .tabsPrimary .nav-tabs .nav-link.active, .tabsPrimary .nav-link:hover, .tabsPrimary button.swiper-slide.active{
     color:var(--color-mar);
}
h2 .subTitleSmall{
    font-family:var(--fontPrimary) !important;
}
.swiper-ofertas-web .button-transparent:hover,.tabsPrimary nav,
.swiper-ofertas-web p.buttons-offer .button-transparent.button-color:hover{
    background:var(--color-mar) !important;
}
.htt-swiper-button-prev-wrapper:not(.preview-rooms .htt-swiper-button-prev-wrapper), 
.htt-swiper-button-next-wrapper:not(.preview-rooms .htt-swiper-button-next-wrapper){
    border:1px solid var(--color-mar) !important;
}
.swiper:not(.preview-rooms .swiper) .htt-swiper-button-next-wrapper .swiper-button-next,
.swiper:not(.preview-rooms .swiper) .htt-swiper-button-prev-wrapper .swiper-button-prev{
    color:var(--color-mar) !important;
}
@media(min-width:1366px){
    div:has(>#hv){
        width:80% !important;
        margin:0 auto;
    }
}
@media(max-width:1024px){
    .ficha-hotel .menu-select-mobile{
        background:var(--color-mar) !important;
    }
    .ficha-hotel .menu-select-mobile .dropdown-button{
        border:none;
    }
}
@media(max-width:767px){
    .tabsPrimary .dropdown button{
        color:var(--color-mar);
    }
      .tabsPrimary .dropdown,
     .tabsPrimary .dropdown-item.active, .tabsPrimary .dropdown-item:active{
        background:var(--color-mar);
    }
    .tabsPrimary .btn-check:checked+.btn, .tabsPrimary .btn.active, .tabsPrimary .btn.show, 
    .tabsPrimary .btn:first-child:active, .tabsPrimary :not(.btn-check)+.btn:active{
        background-color:var(--color-mar) !important;
        border-color:var(--color-mar) !important;
    }
     body.ficha-hotel #buttonShowSearcherMobile{
        background:var(--color-mar) !important;
    }
}