body{
    max-width: 1920px;
    margin: auto;
    font-family: 'Lora'!important;
}
html, body {
    padding-top: 0!important;
}


/***************************
******* Carousel ***********
****************************/
#wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption h3{
    font-family: 'Lora';
    font-size: 18px;
    font-weight: 700;
}

#wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption p{
    font-family: 'Lora';
    font-size: 12px;
}

#wrapper #myCarousel #carousel-info{
    width: 100%;
    max-width: 1280px;
    padding: 0 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
@media (min-width: 768px) {
    #wrapper #myCarousel #carousel-info .carousel-info-card{
        width: 33.33%;
    }
}
#wrapper #myCarousel #carousel-info .carousel-info-card{
    position: relative;
    background-color: #025940;
    width: 100%;
    /*margin: 5px;*/
    margin-bottom: 92px;
    padding:40px 10px;
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.3);
}

#wrapper #myCarousel #carousel-info .carousel-info-card .rounded-circle{
    position: absolute;
    top: -33px;
    width: 66px;
    height: 66px;
    left: calc(50% - 33px);
    border:4px solid #199546;
}

#wrapper #myCarousel #carousel-info .carousel-info-card .read-more{
    position: absolute;
    bottom: -22px;
    width: 120px;
    height: 44px;
    left: calc(50% - 60px);
    border-radius: 33px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    border-color: #199546;
    cursor: pointer;
}

#wrapper #myCarousel #carousel-info .carousel-info-card .read-more:hover{
    background-color: #eaeaea !important;
}

#wrapper #myCarousel #carousel-info #info-card-2 .read-more:hover{
    background-color: #0e7c35 !important;
}

#wrapper #myCarousel #carousel-info .carousel-info-card .read-more{
    background-color: #199546;
    border-color: transparent;
    font-size: 18px;
    font-weight: 400;
    width: auto;
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 14px 20px;
    height: auto;
    bottom: 0;
    box-shadow: 0px 0px 24px rgba(0,0,0,.1);
}

#wrapper #myCarousel #carousel-info .carousel-info-card p{
    color: white;
    text-align: center;
    font-weight: 400;
}

#wrapper #myCarousel #carousel-info .carousel-info-card .card-info-title{
    text-transform: capitalize;
    font-size: 24px;
    margin: 20px 0 22px 0;
}

/*** Seccion Recepcion ***/
#wrapper .content-reception .reception-title{
    position: relative;
}

#wrapper .content-reception .reception-title:after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background-color: #e77842;
}

#wrapper .content-reception .reception-text{
    color: #8C8C8C;
}

#wrapper .content-reception #container-reception-card .reception-card .rounded-circle{
    width: 50px;
    height: 50px;
    background-color: #e77842;
    text-align: center;
    padding-top: 10px;
}

#wrapper .container-fluid .content-reception #container-reception-card .reception-card .rounded-circle:hover{
    width: 50px;
    height: 50px;
    background-color: #fff;
    text-align: center;
    padding-top: 10px;
}

#wrapper .content-reception #container-reception-card .reception-card{
    margin: 10px 40px;
}

#wrapper .content-reception #container-reception-card .reception-card .rounded-circle .fa{

    font-size: 32px;
    color: white;
}

#wrapper .container-fluid .content-reception #container-reception-card .reception-card .rounded-circle .fa:hover{

    font-size: 34px;
    color: #e77842;
}

#wrapper .content-reception #container-reception-card .reception-card .reception-card-title{
   color: black;
   font-weight: 500;
}
#wrapper .content-reception #container-reception-card .reception-card a:hover {
   text-decoration: none;
}

/***Sección de Información de habitaciones***/
#wrapper #our-rooms{
    background-color: #2a2a2a;
}
#wrapper #our-rooms h3, 
#wrapper #our-rooms h3 + h6 {
    text-align: center;
}
@media(min-width: 768px) {
    #wrapper #our-rooms h3, 
    #wrapper #our-rooms h3 + h6 {
        text-align: left;
    }   
    #wrapper #our-rooms h3 + h6 {
        margin-bottom: 0;
    } 
}
#wrapper #our-rooms h3 + h6 {
    margin-bottom: 32px;
}

@media(min-width: 768px) {
    #wrapper #our-rooms h3 + h6 {
        margin-bottom: 0;
    } 
}

#wrapper #our-rooms *{
    color: white;
}
#wrapper #our-rooms h3 + h6{
    color: white!important;
    font-weight: 400;
    font-size: 18px;
}

#wrapper #our-rooms .col-7.col-md-5 {
    display: none;
}

#wrapper #our-rooms > div:first-child {
    justify-content: space-around;
}
#wrapper #our-rooms > div.row.mt-5 {
    max-width: 1280px;
    justify-content: space-around;
    margin: 0 auto;
}


#wrapper #our-rooms > div:first-child .col-2.col-md-2 {
    display: flex;
    justify-content: center;
}

#wrapper #our-rooms .btn-go-reserve{
    background-color: #199546!important;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}

#wrapper #our-rooms .btn-go-reserve:hover{
    background-color: #199546;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}

#wrapper .btn-go-reserve{
    background-color: #199546;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}

#wrapper .btn-go-reserve:hover{
    background-color: #199546;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}


#wrapper #info-rooms #info-room-title{
    font-size: 24px;
}

#wrapper #img-decoration{
    width: 65%;
}

#wrapper #info-room-subtitle{
    font-size: 20px;
}

#wrapper #our-rooms #our-rooms-title{
    color: white;
}

#wrapper #our-rooms #rooms-footer{
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

#wrapper #our-rooms #rooms-footer #rooms-footer-title{
    position: absolute;
    top: 60px;
    color: white;
    z-index: 2;
    text-align: center;
    width: 80%;
    left: 10%;
}

iframe#home-video{
    height: 190px;
    max-width: 680px !important;
    width: 100% !important;
    margin: 0 auto;
    display: flex;
    padding: 0 0 52px;
}



/*******************
*** Small Device ***
********************/
@media (min-width:576px){
    
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption h3{
        font-size: 28px;
    }
    
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption p{
        padding: 0 10px;
        font-size: 14px;
    }

    iframe#home-video{
        height: 300px;
    }
}

/*BTN DEL SLIDE SHOW*/
#wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-outline-success{
    background-color: #e88021;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}
#wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-outline-success:hover {
    background-color: white;
    color: #494949;
}

/********************
*** Medium Device ***
*********************/
@media only screen and (min-width:768px){

    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption h3{
        font-size: 38px;
    }

    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-caption, 
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-outline-success{
        background-color: #199546;
        border-color: transparent;
        color: white;
        border-radius: 100px;
        font-family: 'Lora';
        text-transform: capitalize;
        font-size: 18px;
        font-weight: 400;
        padding: 16px 32px;
    }

    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-caption:hover, 
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption .btn-outline-success:hover {
        background-color: white;
        color: #494949;
    }
    
    #wrapper #myCarousel #carousel-info{
        flex-wrap: nowrap;    
    }

    iframe#home-video{
        height: 400px;
    }
}

/*******************
*** Large Device ***
********************/
@media only screen and (min-width:992px){
    
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption h3{
        font-size: 48px;
    }
    
    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption p{
        font-size: 18px;
        padding: 20px 10%;
        text-align: center;
    }
    
    #wrapper #info-rooms #info-room-title {
        font-size: 32px;
    }
    
        #wrapper #img-decoration {
        width: 240px;
    }

    iframe#home-video{
        height: 480px;
        
    }
}

@media only screen and (min-width: 1200px){

    #wrapper #myCarousel .carousel-inner .carousel-item .carousel-caption{
        top: 50%;
        width: 50%;
        margin: 0 auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        margin: 0 auto;
    }

    #wrapper #myCarousel #carousel-info{
        position: absolute;
        width: 80%;
        padding: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        bottom: 0;
    }

    #wrapper #myCarousel #carousel-info .carousel-info-card{
        position: relative;
        background-color: #025940;
        width: 33.33%;
        margin: 5px;
        padding: 40px 10px;
        box-shadow: none;
        border-radius: 8px;
        margin: 16px;
        padding: 40px 52px;
    }

    iframe#home-video{
        height: 502px;
    }
}


@media only screen and (min-width: 1920px){
    div.zopim{
        right: calc(50% - 940px) !important;
    }
}

/**********************************************
*********** Animation Images Rotate ***********
/**********************************************/
figure.room{
    border-radius: 8px;
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    overflow: hidden;
}

figure.room .price{
    font-family: 'Lora';
    font-weight: bold;
    position: absolute;
    top: 0;
    width: 160px;
    background-color: rgb(231 120 66);
    color: white;
    z-index: 11;
    margin: auto;
    text-align: center;
    padding: 18px;
    left: 50%;
    transition-duration: 500ms;
    border-radius: 0 0 8px 8px;
    transform: translateX(-50%);
}

figure.room img {
    display:block;
    position:relative;
    z-index:10;
    min-height: 320px;
    object-fit: cover;
}

figure.room figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    top:0;
    left:0;
    width:100%;
    height:100%;
/*    padding:15px;*/
    background-color: #025940;
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
        display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

figure.room figcaption h4,
figure.room figcaption p{
    color:white;
}

figure.room + h5 {
    margin-top: 24px!important;
}

figure.room figcaption p{
    margin-top: 15px;
}

figure.room img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

figure.room:hover img{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

figure.room:hover .price{
    transform: translate(-50%, -100%);
}

figure.room:hover figcaption{
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

/******************************
******* Parallax Effect *******
*******************************/
#banner-offer{
    background-image: url(../images/Parallax.jpg);
    background-attachment: fixed;
    background-size: cover;
}

#banner-hotel{
    padding: 140px 20px;
    background: url("../images/Banner-Hotel.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-restaurante{
    padding: 140px 20px;
    background: url("../images/Banner-Restaurante.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-cafeteria{
    padding: 140px 10px;
    background: url("../images/Banner-Principal.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-eventos{
    padding: 140px 10px;
    background: url("../images/Banner-Eventos.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-nosotros{
    padding: 140px 10px;
    background: url("../images/Banner-Nosotros.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
header.fixed-top + #wrapper > div:first-child:not(#myCarousel):not(.container),
header.fixed-top + #wrapper section > div:first-child:not(#myCarousel):not(.container) {
    overflow: hidden;
    position: relative;
}
header.fixed-top + #wrapper > div:first-child:not(#myCarousel):not(.container)::before,
header.fixed-top + #wrapper section > div:first-child:not(#myCarousel):not(.container)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,.4);
    width: 5000px;
    height: 5000px;
}

#banner-informacion {
    padding: 140px 10px;
    background: url("../images/Banner-Informacion.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-naturaleza{
    padding: 140px 10px;
    background: url("../images/Banner-Naturaleza.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-paquete{
    padding: 140px 10px;
    background: url("../images/Banner-Paquete.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-religion{
    padding: 140px 10px;
    background: url("../images/Banner-TReligioso.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#banner-historia{
    padding: 140px 10px;
    background: url("../images/Banner-THistorico.jpg"); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}


#banner-offer #rounded{
    margin: auto;
    padding: 75px 0;
    position: relative;
    background-color: transparent !important;
    color: white;
    font-size: 60px;
    width: 100%;
    text-transform: capitalize;
}
#banner-offer #rounded button.btn.btn-success{
    background-color: #199546;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
}

/*DONDE NO ESTÁN*/
header.fixed-top {
    position: sticky!important;
    background-color: white;
}
#myCarousel {
    margin-bottom: 0px;
}
@media (min-width: 1200px) {
    #myCarousel {
        margin-bottom: 120px;
    }   
}
.carousel-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 5000px;
	min-height: 5000px;
	background-color: black;
	opacity: .4;
}
.carousel-item img {
    min-height: 480px;
    object-fit: cover;
}
footer .carousel-item img {
    min-height: auto;
}
.carousel-caption {
    top: 50%;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    height: fit-content;
    width: 80%;
}
footer .carousel-caption {
    width: 100%!important;
}
@media (min-width: 998px) {
    .carousel-caption {
        width: 50%;
    }
    footer .carousel-caption {
        width: 100%!important;
        margin-top: 0 !important;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .6);
    width: 80px;
    height: 80px;
    background-size: 18px;
    border-radius: 100px;
    display: none;
}
@media (min-width: 768px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        display: block;
    }
}

.navbar-expand-lg .navbar-nav {
    margin-right: 0!important;
}

#myCarousel + div.container-fluid.py-1.py-md-5 {
    max-width: 1280px;
    padding-top: 0px!important;
    padding-bottom: 80px!important;
}
@media (min-width: 1200px) {
    #myCarousel + div.container-fluid.py-1.py-md-5 {
        padding-top: 120px!important;
    }
}

#myCarousel + div.container-fluid.py-1.py-md-5 .row > div img {
    width: 100%;
    border: 18px solid white!important;
        box-shadow: 1px 10px 24px rgba(0,0,0,.1);
}
@media (min-width: 998px) {
    #myCarousel + div.container-fluid.py-1.py-md-5 .row > div img,
    #myCarousel + div.container-fluid.py-1.py-md-5 .row > div:last-child img + span {
        width: 60%!important;
    }
}
#myCarousel + div.container-fluid.py-1.py-md-5 .row > div:last-child {
    flex-wrap: wrap;
    align-content: center!important;
}
#myCarousel + div.container-fluid.py-1.py-md-5 .row > div:last-child img + span {
    box-shadow: 0px 20px 24px rgba(0,0,0,.1);
    width: 100%;
    background-color: white!important;
    position: relative!important;
    top: 0!important;
    bottom: 0;
    color: black;
    font-size: 24px;
    padding: 16px 0;
}
header.fixed-top + #wrapper.mt-5 {
    margin-top: 0!important;
}

h2 {
    text-transform: capitalize;
}
.w-100 + section.container-fluid .row {
    max-width: 1280px;
    margin: 0 auto;
}

footer p, footer a {
    color: white;
    font-size: 18px;
    font-family: 'Lora' !important;
    text-align: left;
}
footer .btn-outline-success {
        background-color: #199546;
    border-color: transparent;
    color: white;
    border-radius: 100px;
    font-family: 'Lora';
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    padding: 16px 32px;
    margin-left: 0 !important;
    margin-top: 18px !important;
}
footer iframe + ul .nav-item a {
    background-color: #e77842;
    border-radius: 7px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px;
}
footer > .container-fluid {
    max-width: 1280px;
    margin: 0 auto;
}
footer #copy {
    display: none;
}

@media (min-width: 576px) {
    div > .card.col-12.col-sm-6.col-xl-4 {
        flex: none!important;
        margin: 0!important;
    }
}
div > .card.col-12.col-sm-6.col-xl-4 {
    flex: none!important;
    margin: 0!important;
}

@media (min-width: 768px){
    .col-md-12 {
        -ms-flex: none!important;
        flex: none!important;
    }
}
.col-md-12 {
    -ms-flex: none!important;
    flex: none!important;
}