@media (min-width: 2000px){
	.sliderPlan{
		height: 350px;
	}
	
	.sliderPlan .infoPlanHover p{
		width: 100%;
		margin: 5% 0 8% 0;
	}
}

@media (max-width: 700px){
    
    /* Estilos Globales */

    html{
        font-size: 9px;
    }

    /********************
    ********************
    Estilos Globales
    ********************
    ********************/
	
	/******************** 
	Botón WhatsApp
	********************/

	#botonWhatsapp{
		padding: 6px 12px;
	}

	#botonWhatsapp i{
		margin-right: 2px;
	}

    /******************** 
    Estilos Globales - Colores
    ********************/

    /******************** 
    Estilos Globales - Textos
    ********************/

    h1{
        font-size: 5.8rem;
        line-height: 7rem;
    }

    h2{
        font-size: 3rem;
        line-height: 3rem;
        letter-spacing: 0.5px;
    }

    h3{
        font-size: 9rem;
        letter-spacing: 1px;
    }

    h4{
        font-size: 3.5rem;
        font-weight: 700;
    }

    h5{
        font-size: 2.6rem;
        line-height: 3.2rem;
        font-weight: 700;
    }

    h6{
        font-size: 2.4rem;
        font-weight: 300;
    }

    p{
        font-size: 1.4rem;
        line-height: 2rem;
        font-weight: 300;
    }

    b{
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    sup{
        font-size: 1.2rem;
    }

    /******************** 
    Estilos Globales - Retícula
    ********************/

    .between{
        justify-content: space-between;
    }

    .around{
        justify-content: space-around;
    }

    .center{
        justify-content: center;
    }

    .alignCenter{
        align-items: center;
    }

    .contentCenter{
        align-content: center;
    }

    .contentBetween{
        align-content: space-between;
    }

    .contentStart{
        align-content: flex-start;
    }

    .ancho100{
        width: 100%;
    }

    .ancho100 img{
        width: 100%;
    }

    .ancho80{
        width: 80%;
    }

    .ancho60{
        width: 100%;
    }
    
    .ancho65{
        width: 100%;
    }

    .ancho50{
        width: 100%;
    }

    .ancho45{
        width: 100%;
    }

    .ancho40{
        width: 100%;
    }

    .ancho30{
        width: 100%;
    }
    
    .ancho35{
        width: 100%;
    }

    .fotoCover{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /******************** 
    Estilos Globales - Padding & Margin
    ********************/

    .paddingHorizontal{
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .paddingVertical{
        padding-top: 50px;
        padding-bottom: 50px;
        box-sizing: border-box;
    }

    .margenArriba{
        margin-top: 50px;
    }

    .margenAbajo{
        margin-bottom: 50px;
    }

    .margenAuto{
        margin-left: auto;
        margin-right: auto;
    }

    /******************** 
    Estilos Globales - Botones
    ********************/

    .boton{
        display: inline-block;
        font-size: 1.6rem;
        line-height: 2rem;
        letter-spacing: 1px;
        padding: 10px 30px;
        box-sizing: border-box;
    }

    .boton i{
        font-size: 1.8rem;
        margin: 0 0 0 10px;
    }

    .botonGrande{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 25px;
        line-height: 1.8rem;
    }

    .botonGrande p{
        font-size: 2rem;
        font-weight: 300;
    }

    .botonGrande p span{
        font-size: 1.4rem;
        font-weight: 100;
    }

    .botonGrande i{
        font-size: 1.6rem;
        margin: 0 0 0 25px;
    }

    .botonBlanco{
        color: #fff;
        border: 1px solid #fff;
    }

    .botonAzul{
        color: var(--azul);
        border: 1px solid var(--azul);
    }

    /******************** 
    Estilos Globales - Cabeceras
    ********************/

    .cabecera{
        width: 100%;
        height: 100vh;
        background-size: cover;
    }

    /******************** 
    Estilos Globales - Titulo Sección
    ********************/

    .tituloSeccion{
        padding: 0;
    }

    .tituloSeccion h2{
        width: 100%;
        transform: translate(-50%,-5%);
    }


    .tituloSeccion h3 i{
        width: 100%;
        font-size: 7.5rem;
        height: 10px;
    }

    .icono-sup{
        position: relative;
        top: 50px;
    }

    .icono-sub{
        position: relative;
        bottom: 50px;
    }

    #textoComplementario {
        padding: 0 5vw 10% 5vw;
    }

    /******************** 
    MENÚ - Estilos Menú
    ********************/

    #menu{
        flex-direction: column-reverse;
    }

    #menu > div{
        width: 100%;
        height: auto;
    }

    #menuItems{
        height: 70% !important;
    }

    #menu div ul{
        padding: 12vh 5vw;
    }

    #menu div ul li a{
        font-size: 3rem;
    }

    #cuadriculaMenu{
        height: 30% !important;
    }

    #cuadriculaMenu a{
        width: 50%;
        height: 100%;
    }

    #planesCuadriculaMenu{
        display: none !important;
    }

    #logoCuadriculaMenu img{
        width: 35%;
    }

    #cuadriculaMenu a div{
        top: 0;
        left: 0%;
        background-color: rgba(72, 113, 179, 0.5);    
    }

    #cuadriculaMenu a p{
        font-size: 3rem;
        opacity: 1;
    }

    #hotelesCuadriculaMenu{
        display: none !important;
    }

    /******************** 
    Menú - Header Estático
    ********************/

    #menuHeader{
        background-color: var(--azul);
        padding: 2.5vh 5vw;
    }

    #menuHeader a:first-child{
        width: 40%;
    }
	
	#menuHeader img{
        width: 100%;
    }

    #iconoHamburguesa{
        font-size: 3rem;
    }

    #iconoCerrarMenu{
        top: 2.5vh;
        right: 5vw;
        font-size: 3.6rem;
    }

    /******************** 
    Footer - Estilos Pie de Página
    ********************/

    #contenidoFooter{
        padding: 5vh 5vw;
    }

    #logoFooter{
        width: 100%;
        text-align: center;
    }

    #logoFooter img{
        width: 25%;
        height: 100%;
    }

    #textoFooter{
        width: 100%;
    }


    #menuFooter nav{
        width: 100%;
        margin: 10% 0;
    }

    #menuFooter nav ul li{
        margin: 5% 0 0 0;
        width: 33.33%;
        text-align: center;
    }

    #redesFooter{
        justify-content: center;
        width: 100%;
        margin: 5% 0 10% 0;
    }

    #redesFooter a{
        font-size: 2.8rem;
        margin: 0 15px;
    }

    #copyFooter{
        margin: 2.5% 0 0 0;
        font-size: 1.2rem;
        text-align: center;
    }

    #autorFooter{
        padding: 2.5vh 5vw;
        font-size: 1.4rem;
    }

    #autorFooter img{
        height: 20px;
        margin: 0 0 0 10px;
    }
    
    /**************************************** 
    **************************************** 
    HOME - ESTILOS
    ****************************************
    ****************************************/

    /******************** 
    HOME - Cabecera Home
    ********************/

    #cabeceraHome{
        padding: 15vh 0 5vh 0;
        background-position: top center;
    }
	
	#tortugaHome{
		top: 35% !important;
		right: 8%;
		width: 80%;
	}

    #cifrasCabecera{
        width: 80vw;
        height: 50px;
    }

    #cifrasCabecera div{
        margin: 0 3% 0 0;
    }

    #cifrasCabecera div p{
        font-size: 2rem;
        letter-spacing: 1px;
    }

    .separadorVertical{
        width: 1px;
    }

    #cabeceraHome h1{
        width: 80vw;
        margin: 5% auto 10% auto;
        font-size: 5.5rem;
        line-height: 5.2rem;
    }

    #botonesCabecera{
        flex-direction: column-reverse;
        margin: 42% 0 0 0;
    }

    #redesCabecera{
        width: 100vw;
        font-size: 3rem;
        margin: 3% 0 0 0;
    }

    #redesCabecera a{
        width: 20%;
    }

    #redesCabecera a:first-child{
        margin: 0 0 20px 0;
    }

    #buscarCabecera{
        justify-content: center;
        width: 100vw;
    }

    #buscarCabecera a{
        width: 80%;
        margin: 0 0 3% 0;
		padding: 10px 25px;
    }

    #cabeceraHome .degradadoAzul{
        height: 70vh;
    }

    /******************** 
    HOME - Slider Planes
    ********************/

    #sliderPlanes{
        padding: 0 2%;
    }

    #sliderPlanes .carousel-cell {
        width: 80%;
        margin: 0 10%;
    }

    .sliderPlan{
        height: 230px;
        margin: 0 auto 10% auto;
    }

    .sliderPlan .degradadoAzul{
        height: 50%;
        opacity: 0.75;
    }

    .sliderPlan h5, .sliderPlan h6{
        top: 0;
        position: relative;
        width: 100%;
        transition: all 0.2s ease;
    }

    .sliderPlan h6{
        font-size: 2.2rem;
        font-weight: 100;
    }

    .sliderPlan .infoPlanSlider,
    .sliderPlan .infoPlanHover{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10% 5%;
        box-sizing: border-box;
    }

    .sliderPlan .infoPlanSlider{
        align-content: flex-end;
        align-items: flex-end;
    }

    .sliderPlan .infoPlanHover{
        top: 100%;    
        z-index: 10;   
        opacity: 0;
        align-content: center;
        align-items: center;    
        background-color: rgba(72, 113, 179, 0.7);
        transition: all 0.3s ease;
    }

    .sliderPlan .infoPlanHover p{
        margin: 10% 0 10% 0;
    }

    /******************** 
    HOME - Nosotros - Quiénes somos
    ********************/
    
    #nosotrosHome iframe{
        height: 225px;
    }

    #textoNosotros p{
        width: 90%;
        margin: 10% 0;
    }

    /******************** 
    HOME - Slider Hoteles
    ********************/

    #sliderHoteles{
        background: linear-gradient(to bottom, var(--azul) 50%, #fff 50%);
    }

    #sliderHoteles .carousel-cell {
        width: 80%;
        margin: 0 10%;
    }

    .sliderHotel{
        display: block;
        width: 100%;
        height: 300px;
        margin: 0 auto 10% auto;
        position: relative;
        text-align: center;
        color: #fff;
        overflow: hidden;
    }

    .sliderHotel .fotoHotelSlider{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .sliderHotel .degradadoAzul{
        width: 100%;
        height: 50%;
        opacity: 0.75;
    }

    .sliderHotel h5 {
        bottom: 0;
        padding: 0 0 8% 0;
        width: 100%;
    }

    .sliderHotel .infoHotelSlider{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10% 5%;
        box-sizing: border-box;
    }

    .sliderHotel .infoHotelSlider{
        align-content: flex-end;
        align-items: flex-end;
    }

    .sliderHotel .infoHotelSlider,
    .sliderHotel .infoHotelHover{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10% 5%;
        box-sizing: border-box;
    }

    .sliderHotel .infoHotelSlider{
        align-content: flex-end;
        align-items: flex-end;
    }

    .sliderHotel .infoHotelHover{
        top: 100%;    
        z-index: 10;   
        opacity: 0;
        align-content: center;
        align-items: center;    
        background-color: rgba(72, 113, 179, 0.7);
        transition: all 0.3s ease;
    }

    .sliderHotel .infoHotelHover p{
        margin: 10% 0 10% 0;
    }

    /******************** 
    HOME - Slider Blog
    ********************/

    #sliderBlogs{
        background: var(--azul);
        width: 100%;
        padding-top: 10%;
    }

    #sliderBlogs .carousel-cell {
        width: 90%; /* full width */
        margin: 0 10%;
    }

    .sliderBlog{
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .sliderBlog .fotoBlogSlider{
        width: 90%;
    }

    .sliderBlog .fotoBlogSlider img{
        width: 100%;
    }

    .sliderBlog h6{
        margin: 10% 0 10% 0;
        font-size: 2rem; 
    }

    /******************** 
    HOME - Formulario contacto
    ********************/

    .formularioHome{
		padding-bottom: 10%;
    }

    .formularioHome form{
        width: 90%;
        margin: 0 auto 0 auto;
    }

    .formulario{
        justify-content: center;
    }
	
    .formulario textarea{
        font-size: 1.4rem;
    }

    .formulario input::placeholder, .formulario textarea::placeholder{
        font-size: 1.4rem;
    }

    .formulario button{
        margin: 0 auto;
    }
    

	
	/**************************************** 
	**************************************** 
	NOSOTROS - ESTILOS
	****************************************
	****************************************/

	/******************** 
	NOSOTROS - Cabecera Nosotros
	********************/

	#cabeceraSeccionNosotros{
		display: flex;
		align-content: center;
		padding: 15vh 10vw 10vh 10vw;
		background-position: bottom center;
	}

	#cabeceraSeccionNosotros h1{
		text-align: center;
	}

	/******************** 
	NOSOTROS - Texto Introducción
	********************/

	#textoSeccionNosotros p{
		width: 100%;
		margin: 10% 0 0 0;
	}

	#textoSeccionNosotros img {
		width: 80%;
	}

	#videoSeccionNosotros{
		flex-direction: column-reverse;
	}

	#dosBotonesFila{
		align-content: flex-start;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}
	
	#dosBotonesFila a{
		margin: 0 0 5% 0;
	}

	#videoNosotros {
		width: 100%;
		height: 250px;
		margin: 0 0 10% 0;
	}

	/******************** 
	NOSOTROS - Plan de Ahorro
	********************/

	#planAhorro{
		justify-content: flex-end;
		align-items: center;
		position: relative;
		padding: 10% 5vw 10% 5vw;
	}

	#planAhorro img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#planAhorro > h4 {
		padding: 2.5%;
	}

	#tarjetas {
		top: 0;
		justify-content: space-between;
		width: 100%;
		margin: 10% 0 0 0;
		overflow: visible;
	}

	.tarjeta{
		transform: translate(0%, 0%);
		width: 100%;
		max-width: 1000px;
		margin: 10% 0 0 0;
		padding: 5%;
	}

	.tarjeta a{
		margin-top: 10%;
	}

	#buscarNosotros{
		padding-top: 5%;
		padding-bottom: 10%
	}
	
	#buscarNosotros a{
		width: 100%;
		margin: 10% 0 0 0;
	}
	
	/**************************************** 
	**************************************** 
	PLANES - ESTILOS
	****************************************
	****************************************/

	/******************** 
	PLAN - Cabecera Planes
	********************/

	.cabeceraPlan{
		padding: 25vh 10vw 15vh 10vw;
	}

	#cabeceraPlanCartagena h3{
		font-size: 7.5rem;
	}

	.barraInfoPlan{
		padding: 5% 5% 10% 5%;
	}

	.item{
		width: 100%;
		letter-spacing: 0px;
		padding: 6px 3px;
		margin-bottom: 5px;
	}

	.item i{
		position: relative;
		top: 3px;
		margin: 0 5px 0 0;
		font-size: 1.5rem;
	}

	/*************** 
	PLANES - Cuadrícula Lugares Turistícos
	***************/

	.cuadriculaFotos{
		padding: 10% 10vw;
		background: #fff;
	}

	.fotoCuadricula{
		margin-top: 5%;
	}

	.fotoCuadricula img{
		width: 100%;
		height: 180px;
		object-fit: cover;
	}

	.fotoCuadricula div{
		left: 0;
		top: 0;
		background-color: rgba(72, 113, 179, 0.5);
		opacity: 1;
		padding: 3%;
	}

	.fotoCuadricula div h4 {
		width: 100%;
		margin: 0 0 3% 0;
	}

	/*************** 
	PLANES - Descripción del plan
	***************/

	#tarjetaDescripcionPlan{
		padding: 10% 5vw 0 5vw;
	}
	
	.descripcionPlan {
		padding: 10% 5%;
	}

	.texto90grados .tiempoEstadia{
		width: 300px;
	}

	.texto90grados .temporada{
		width: 300px;
	}

	.texto90grados .tiempoEstadia h2{
		font-size: 3rem;
		line-height: 2.2rem;
	}
	
	.calificacionEstrellas{
		margin-top: 1.5%;
	}

	.temporada i{
		font-size: 1.2rem;
		margin: 0 3% 0 0;
	}

	.textoDescripcionPlan{
		max-width: 77%;
	}

	.listadoDescripcion{
		width: 100%;
	}

	.listadoDescripcion ul li {
		margin: 5% 0;
	}

	.listadoDescripcion ul li i{
		top: 4px;
		width: 10%;
		margin-right: 1%;
		font-size: 1.4rem;
	}

	.listadoDescripcion ul li p{
		width: 90%;
	}
	
	.precioBoton .precio{
		margin: 0 0 15px 0;
	}

	.precioBoton .botonImpuestos a{
		margin: 10% 0 0 0;
	}

	/*************** 
	PLANES - Formulario de reserva
	***************/

	.formularioReservaPlan span{
		margin: 0 0 10% 0 !important;
	}
	
	.datosReserva {
		flex-direction: column-reverse;
	}

	.datosReserva img {
		width: 100%;
	}

	.datosReserva p{
		padding:  10% 0;
	}

	/*************** 
	PLANES - Términos & Condiciones
	***************/
	
	.terminosCondiciones{
		width: 100%;
		padding: 10% 10vw;
	}
	
	/**************************************** 
	**************************************** 
	HOTELES - ESTILOS
	****************************************
	****************************************/

	#cabeceraHoteles{
		padding: 10vh 0 10vh 0;
	}

	.cajaHotel{
		margin-top: 10%;
	}

	.imagenHotel{
		width: 100%;
		height: 200px;
	}

	.imagenHotel h5{
		padding: 0% 5% 5% 5%;
	}

	.imagenHotel .degradadoAzul {
		height: 50%;
		opacity: 0.8;
	}

	.descripcionHotel{
		width: 100%;
		margin: 5% 0 0 0;
	}

	.descripcionHotel ul li {
		width: 100%;
		margin: 5% 0;
	}

	.descripcionHotel ul li i {
		width: 25px;
		height: 25px;
		font-size: 2rem;
		margin: 0 3% 0 0;
	}

	.botonHotel{
		justify-content: center;
		width: 100%;
		margin-bottom: 5%
	}

	.botonHotel > i {
		font-size: 6rem;
	}

	.botonHotel .calificacionEstrellas{
		font-size: 2rem;
		margin: 0 0 10% 0;
		text-align: center;
	}
	
	.botonHotel .calificacionEstrellas i{
		margin: 0 2.5%;
	}

	.botonHotel > a img{
		display: none;
	}
	
	/**************************************** 
	**************************************** 
	BLOG - ESTILOS
	****************************************
	****************************************/

	#cabeceraBlogs{
		padding: 10vh 0 10vh 0;
		background-image: url(../img/divididas/02capados.jpg);
		background-size: cover;
		background-position: top right;
	}

	.cajaBlog{
		margin: 0 0 10% 0;
		padding: 0 0 15% 0;
		border-bottom: 1px solid var(--azul);
	}
	
	.reves{
		flex-direction: column-reverse;
	}

	.cajaBlog .fotoBlog{
		width: 100%;
		margin: 10% 0 0 0;
	}

	.cajaBlog .fotoBlog img{
		width: 80%;
	}

	.infoHotel{
		width: 100%;
		padding: 5% 0;
	}

	.infoHotel p {
		margin: 5% 0 10% 0;
	}

	.infoHotel h6{
		margin: 0 0 5% 0;
	}
	
	/**************************************** 
	**************************************** 
	ARTÍCULO DEL BLOG - ESTILOS
	****************************************
	****************************************/

	.portadaArticulo{
		height: 50vh;
	}

	.portadaArticulo h4{
		width: 90%;
		bottom: 5%;
		left: 5%;
	}


	.seccionBlog{
		padding-bottom: 5%;
	}

	.resaltado{
		margin: 0 0 10% 0;
		padding: 8px 20px;
	}

	.seccionBlog h5{
		margin: 0 0 10% 0;
	}
	
	.seccionBlog div{
		margin: 0 0 5% 0;
	}
	
	.seccionBlog img{
		margin: 0 0 5% 0;
	}

	.seccionBlog div > div {
		margin: 0;
	}

	hr{
		margin: 5% 0 5% 0;
	}
	
	/**************************************** 
	**************************************** 
	CONTACTO - ESTILOS
	****************************************
	****************************************/

	#cabeceraContacto{
		padding: 10vh 0 0 0;
	}

	#redesContacto{
		justify-content: center;
		margin: 15% 0 0 0;
		padding: 0 0 5% 0;
	}
	
	#redesContacto a{
		width: 70%;
		margin: 0 0 10% 0;
	}

	#mapa{
		width: 100%;
		height: 60vh;
	}

	#mapa2{
		width: 100%;
		height: 60vh;
	}

	.mapaDireccion {
		justify-content: flex-start;
		padding: 15% 0 0 0;
	}

	.mapaDireccion ul{
		width: 100%;
		margin: 0 0 20% 10%;
	}

	.mapaDireccion ul li {
		margin: 7.5% 0; 
	}
    
    /******************** 
	HOME - Slider Hoteles
	********************/


	#hotelesSlider .carousel-cell {
		width: 100%;
		height: 100vh;
	}
	
	/******************** 
	ENVIO - Cabecera Envio formularios
	********************/

	#cabeceraSeccionEnvio{
		height: 100vh;
		width: 100%;
		padding: 20vh 5vw;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	#cabeceraSeccionEnvio h1{
		width: 100%;
		font-size: 3.5rem;
		line-height: 5rem;
		margin-bottom: 5%;
	}

	#cabeceraSeccionEnvio p{
		margin: 5% 0 0 0;
		font-size: 2.4rem;
		line-height: 3rem;
	}

	#cabeceraSeccionEnvio .degradadoAzul{
		height: 100vh;
	}

}

@media (max-width: 400px){
	#tortugaHome{
		top: 42% !important;
		right: 8%;
		width: 80%;
	}
}