/*	################################################################

        
################################################################# */ 
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,900);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,900);

/*@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }*/
/*@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }*/

/*Fonts source: https://github.com/adampash/Lifehacker.me/tree/master/fonts */
@font-face {
    font-family: fontface_HelveticaNeue;
    src: url(../font/HelveticaNeue.ttf);
}
@font-face {
    font-family: fontface_HelveticaNeueCondensed;
    src: url(../font/HelveticaNeue-CondensedBold.ttf);
}

@font-face { font-family: 'helvetica neue'; src: local('Arial'); }
@font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }

/*@font-face {*/
    /*font-family: fontface_HelveticaNeueLight;*/
    /*font-weight: 100;*/
    /*src: url(../font/HelveticaNeue-Light.eot);*/
/*}*/
/*@font-face {*/
    /*font-family: fontface_HelveticaNeueUltraLight;*/
    /*src: url(../font/HelveticaNeue-UltraLight.eot);*/
/*}*/

/*	################################################################
        COSTANTS
################################################################# */
/*
    main-color    009ed3 ==> 96ACC1
*/
:root {
    /*--main-color:   #0964AF;*/
    /*--accent-color: #63B0DC;        !* >>> SFR before: 00b3fe*!*/

    /* Esta es la nueva gama de colores: Usamos el color directamente sino no funciona en algunos navegadores */
    --main-color: #96ACC1;
    --accent-color: #312f79;
    --footer-color: #374451;
    --beach-color: #f6b080;
}
/*	################################################################
        1. GENERAL STRUCTURES
################################################################# */
* { 
    margin: 0 auto;
    padding: 0px;
} 

/*  */
body {
    margin: 0;
    padding: 0;
    /*font-family: 'Roboto', sans-serif, "Helvetica Neue";*/
    /*font-family: fontface_HelveticaNeue;*/ /* Con esta no van la propiedad font-weight*/
    /*font-family:  "Helvetica Neue", Helvetica;*/
    /*font-family:  "Helvetica Neue";*/
    font-family:  Helvetica, fontface_HelveticaNeue;
    /*font-weight: 300;*/
    color: #333;
    margin: 0 auto
}

h1, h2, h3, h4, h5, h6, ul, ol, li {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style-type: none;
}

p {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    -webkit-transition: background-color .4s linear, color .4s linear;
    -moz-transition: background-color .4s linear, color .4s linear;
    -o-transition: background-color .4s linear, color .4s linear;
    -ms-transition: background-color .4s linear, color .4s linear;
    transition: background-color .4s linear, color .4s linear;
}
a:hover,
a:focus {
    text-decoration: none;
    color:#312f79;
}
a:link {
    text-decoration: none;
    margin: 0;
    /*padding: 0;*/
}
a:visited {
    text-decoration: none;
    margin: 0;
    /*padding: 0;*/    /* Estropea los botones en el front del usuario */
}

::-moz-selection  {
    color: #fff;
    text-shadow:none;
    background:#96ACC1;
}
::selection {
    color: #fff;
    text-shadow:none;
    background:#96ACC1;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Pedientes */
img {
    height: auto;
    max-width: 100%;
}


/*	################################################################
        media queries
################################################################# */
/* Aquí van los estilos generales del sitio */

/* Aquí van los estilos para iPad horizontal */
@media only screen and ( max-width: 1024px ) {
}

/* Aquí van los estilos para iPad vertical */
@media only screen and ( max-width: 768px ) {
}

/* Aquí van los estilos para iPhone horizontal */
@media only screen and ( max-width: 480px ) {
}

/* Aquí van los estilos para iPhone vertical */
@media only screen and ( max-width: 320px ) {
}


/* ################################################################
        BOOTSTRAP NAVBAR
################################################################# */
.navbar {
    min-height: 85px; /*70px*/
    padding-top: 8px;
}

.navbar-brand {
    /*font-family: 'Raleway', sans-serif;*/
    /*font-weight: 900;*/
    /*padding: 0px;       !* >>> SFR Eliminamos el padding: Texto empresa --> Logo empresa*!*/
}
.navbar-brand > img {
    width: 200px;
}
.navbar-default {
    background-color: #FFF;          /* >>> SFR: Color de fondo base #384452; >> #666666*/
    border-color: transparent;
    font-weight: 700;
    font-size: 12px;
}

.navbar-default .navbar-nav > li > a {
    color: #96ACC1;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #312f79;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #312f79;
    background-color: transparent;
}

.navbar-header .navbar-brand {
    color: white;
}

/* Botones de acceso y registro */
.navbar-backoffice {
    background-color: #96ACC1;
    border-color: transparent;
}
.navbar-backoffice > a {
    color: #FFF !important;
}
.navbar-backoffice > a:hover {
    color: #312f79 !important;
}


/* No se usa */
.dropdown-menu {
    background: #384452;
}
.dropdown-menu > li > a {
    color: white;
    font-weight: 700;
    font-size: 12px;
}

/* *** MEDIA QUERIES *** */
/* Aquí van los estilos para iPad vertical */
@media only screen and ( max-width: 767px ) {

    .navbar-brand > img {
        margin-left: 9px;
    }

    /* Adaptar el logo: La barra supuerior es más ancha de lo normal */
    /* Boton menu */
    .navbar-toggle {
        margin-top: 17px;
    }
    /* Separador menú desplegable */
    .navbar-header {
        margin-bottom: 13px;
    }
}

/* ################################################################
        BOOTSTRAP - COMPONENTES GENERALES
################################################################# */

/* Para el resto de las paginas*/
.display-header-wrapper {
    min-height: 150px;
    padding-top: 100px;
    padding-bottom: 0px;

    /* Fondo azul con texto blanco */
    background-color: #96ACC1;
    color: white;
}

#blue {
    /*background: #96ACC1;*/
    /*margin-top: 80px;*/
    margin-bottom: 60px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.mtb {
    margin-top: 80px;
    margin-bottom: 80px;
}

.mb {
    margin-bottom: 60px;
}

.mt {
    margin-top: 60px;
}

.hline {
    border-bottom: 2px solid #384452;
}

.hline-w {
    border-bottom: 2px solid #FFF;
    margin-bottom: 25px;
}

.centered {
    text-align: center
}

/* Los textos no exceden  */
.d-overflow {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


.kh-container {
    max-width: 900px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.kh-row {
    margin-right: -15px;
    margin-left: -15px;
}

/* *** MEDIA QUERIES **** */
@media only screen and ( max-width: 768px ) {
    .kh-container {
        margin-right: 20px;
        margin-left: 20px;
    }
}

@media only screen and ( min-width: 768px ) {
    .kh-container {
        max-width: 750px;
    }
}
@media only screen and ( min-width: 992px ) {
    .kh-container {
        max-width: 970px;
    }
}
@media only screen and ( min-width: 1200px ) {
    .kh-container {
        max-width: 1170px;
    }
}


/* Botones por defecto en algunos formularios del front: ej.: Contacto(Enviar) */
.btn-theme {
    color: #fff;
    background-color: #374451;
    border-color: #374451;
    margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
    color: #fff;
    background-color: #96ACC1;
    border-color: #96ACC1;
}



/* ################################################################
        BOOTSTRAP - FOOTER
################################################################# */

/* Footer */
.display-footer-wrapper {
    /*padding-top: 40px;*/
    padding-bottom: 60px;
    background: #374451;
}
.display-header-wrapper h1 {
    font-size: 24px;
    text-transform: uppercase;
}

.display-footer-wrapper p {
    color: #fff;
    font-size: 15px;
}

.display-footer-wrapper h4 {
    color: #FFF;
}

.display-footer-wrapper i {
    font-size: 30px;
    color: #fff;
    padding-right: 25px;
}

.display-footer-wrapper i:hover {
    color: #374451
}

.df-hline-w {
    border-bottom: 2px solid #FFF;
    margin-bottom: 25px;
}

.df-div {
    padding-top: 60px !important;
}


/* ################################################################
        BOOTSTRAP - ABOUT US
################################################################# */
/* Cubrimos con un ancho máximo de 900 para evitar ir al extremo */

.display-about_us-wrapper {
    padding-top: 10px;

    font-size: 0;           /* Evitar blanck space*/
    /*max-width: 900px;*/

    /* Márgenes laterales */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 900px;
}

.d-about_us-div {
    padding-top: 10px;
    padding-bottom: 20px;
    width: 100%;
}

.d-about_us-div > ol {
    list-style-type: decimal;
}
.d-about_us-text-title {
    padding-top: 20px;
    font-weight: 900;
    font-size: 24px;
}
.d-about_us-text-content {
    padding-top: 15px;

    text-align: justify;
    line-height: 1.6;
}
.d-about_us-text-content > p {
    font-size: 22px;
    padding-top: 10px;      /* Separación entre párrafos */
}

/* ################################################################
        BOOTSTRAP - LEGAL
################################################################# */
/* Cubrimos con un ancho máximo de 900 para evitar ir al extremo */

.display-legal-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;

    font-size: 0;           /* Evitar blanck space*/
    /*font-family: "Times New Roman";*/

    /* Márgenes laterales */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 900px;
}

.d-legal-div {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;

    font-size: 15px;
}

.d-legal-text-title1 {
    padding-top: 20px;
    font-weight: bold;
    font-size: 17px;
    text-decoration: underline;
}
.d-legal-text-title2 {
    padding-top: 20px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: underline;
}
.d-legal-text-content {
    text-align: justify;
    line-height: 1.2;
}
.d-legal-text-content > p {
    font-size: 15px;
    padding-top: 18px;      /* Separación entre párrafos */
}
.d-legal-text-content > ul {
    list-style-type: disc;
    padding-top: 10px;
}
.d-legal-text-content > ul > li {
    margin-left: 15px;
}

/* Tabla */
.d-legal-text-content-table{
    margin-top: 15px;
    border: 1px solid black;
    border-collapse: unset;
    padding: 2px;
}

/*.d-legal-text-content table, th, td {*/
.d-legal-text-content table tr th,
.d-legal-text-content table tr td {
    margin-top: 15px;
    border: 1px solid black;
    border-collapse: unset;
    padding: 2px;
}



/* ################################################################
        LAND - PRINCIPAL
################################################################# */

/* *** DISPLAY-TOP: dt-*  */
.display-top-main-wrapper {
    margin-top: 82px;
    background: url(../img/fase3/fondos/Fondo_portada.jpg) no-repeat 20% 50%;   /* X=20% Y=50% */
    min-height: 480px;

    /*object-fit: cover;*/
    /*object-position: left center;*/

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
.d-top-main-wrapper {
    padding-top: 50px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0;
}

.d-top-main-left {
    position: relative;
    height: 400px;
    display: inline-block;
    width: calc(40%);
    width: -webkit-calc(40%);
    width: -moz-calc(40%);

    text-align: center;
    /*border: solid 1px black;*/
}
.d-top-main-left-link-ml {
    background: url(../img/fase3/fondos/Fondo_portada_link_propietario_ml.png) no-repeat left;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    height: 100px;
    margin-top: 80px;
}
.d-top-main-left-link-ml:hover {
    height: 130px;
    margin-top: 65px;
}

.d-top-main-right {
    position: relative;
    height: 400px;
    display: inline-block;
    width: calc(60%);
    width: -webkit-calc(60%);
    width: -moz-calc(60%);

    text-align: center;
}
.d-top-main-right-link-ml {
    background: url(../img/fase3/fondos/Fondo_portada_link_huesped_ml.png) no-repeat right;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    height: 100px;
    margin-top: 80px;
}
.d-top-main-right-link-ml:hover {
    height: 130px;
    margin-top: 65px;
}

/* *** DISPLAY COLLUMNS CSS *** */

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
.display-columns-main-wrapper {
    margin-top: 50px;
    position: relative;
    width: 100%;
    height: auto;
    font-size: 0;

    /* Márgenes laterales */
    padding-left: 10px;
    padding-right: 10px;
}
.dc-main-title {
    font-size: 30px;
    text-align: left;
    margin: 0;
    padding-left: 8px;
    color: #96ACC1;
}

/* 2 cajas: 75% + 25% */
.display-columns-main-4 {

    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;

    /* Ganamos un poco más de espacio: Alineamos las imágenes por la derecha y por la izquierda */
    /*margin-left:  8px !important;*/
    /*margin-right: 16px !important;*/
    margin-top: 10px;
}

.dc-main-apartamentos-div-wrapper {
    position: relative;
    display: inline-block;
    width: 25%;
}

/* Testimonials Wrap */
.display-testimonials-wrapper {
    background: url(../img/fase3/fondos/Fondo_generico.jpg) no-repeat center top;
    min-height: 450px;

    /*margin-top: 0px;*/
    /*padding-top:0px;*/

    /*width: 100%;*/

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* *** MEDIA QUERIES **** */

/* Aquí van los estilos para iPad horizontal */
@media only screen and ( max-width: 1024px ) {
    #display-top-main-wrapper {
        min-height: 300px;
    }
}


@media only screen and ( max-width: 991px ) {

    /* *** DISPLAY-TOP: dt-*  */
    .display-top-main-wrapper {
        background: url(../img/fase3/fondos/Fondo_portada_480.jpg) no-repeat 20% 50%;   /* X=20% Y=50% */
        min-height: 320px;

        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

/* Aquí van los estilos para iPad vertical */
@media only screen and ( max-width: 767px ) {


    .display-top-main-wrapper {
        min-height: 280px;
    }

    .display-testimonials-wrapper {
        background: url(../img/fase3/fondos/Fondo_generico_480.jpg) no-repeat center top;
        min-height: 450px;

        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

/* Aquí van los estilos para iPhone horizontal */
@media only screen and ( max-width: 480px ) {
    .display-testimonials-wrapper {
        min-height: 340px;
    }
}

/* Aquí van los estilos para iPhone vertical */
@media only screen and ( max-width: 320px ) {
    .display-testimonials-wrapper {
        min-height: 280px;
    }
}


/* ################################################################
        LAND - PROPIETARIO
################################################################# */

/* *** DISPLAY-TOP: dt-*  */
.display-top-propietario-wrapper {
    margin-top: 82px;
    background: url(../img/fase3/fondos/Fondo_propietario.jpg) no-repeat 20% 50%;   /* X=20% Y=50% */
    min-height: 480px;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Cubrimos con un ancho máximo de 900 para evitar ir al extremo */
.dt-propietario-div-wrapper {
    max-width: 900px;
}

.dt-propietario-div {
    padding-top: 0px;
    float: right;
    margin-right: 10px;

    text-align: left;
    line-height: 1.2;
    width: 470px;           /* ancho justo para el tamaño actual del texto: 420(block5-lighter) 470(block5-Normal) */
}

/* APORTAMOS */
.dt-propietario-text-block1 {
    color: #96ACC1;
    font-weight: 900;
    font-size: 50px;
}
/* AL PROPIETARIO */
.dt-propietario-text-block2 {
    font-size: 40px;
    color: #312f79;
    line-height: 0.6;
}
/* TOTAL CONFIANZA Y SEGURIDAD */
.dt-propietario-text-block3 {
    color: #FFF;
    margin-top: 15px;
}
.dt-propietario-text-block3a {
    font-size: 20px;
}
.dt-propietario-text-block3b {
    font-size: 31px;
}
/* DESPREOCÚPATE */
.dt-propietario-text-block4 {
    font-size: 40px;
    font-weight: lighter;
    color: #FFF;
    letter-spacing: 6px;
}

/* Lista de valores */
.dt-propietario-text-block5 {
    color: #FFF;
    margin-top: 15px;
    font-size: 19px;
    /*font-weight: lighter;*/
    line-height: 2;
}


/* *** DISPLAY-SERVICE: s-service-* *** */

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
#display-service-wrapper {
    padding-top: 10px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0;

    /* Márgenes laterales */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 900px;
}

.d-service-title {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
}
.d-service-title > span {
    letter-spacing: 4px;
}
.d-service-title-p1 {
    color: #1c4a71;
    font-weight: bold;
}
.d-service-title-p2 {
    color: #96ACC1;
    font-weight: lighter;
}
.d-service-title-p3 {
    color: #1c4a71;
    font-weight: lighter;
}

/* OJO que se usa en el main */
.d-service-title-main {
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 48px;
    text-align: center;
}
.d-service-title-main > span {
    letter-spacing: 5px;
}
.d-service-title-main-p1 {
    color: #1c4a71;
    font-weight: bold;
}
.d-service-title-main-p2 {
    color: #96ACC1;
    /*font-family: HelveticaNeue-Light, Helvetica Neue Light;*/
    /*font-family: fontface_HelveticaNeueLight;*/
    /*font-family: fontface_HelveticaNeueUltraLight;*/
    font-weight: lighter;
}


/* Text: Contacta*/
.d-service-footer {
    margin-top: 28px;
    font-size: 30px;
    font-weight: lighter;
    text-align: center;
    color: #FFF;
    background: linear-gradient(to right, #96ACC1 , #1c4a71);
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;

    margin-left: calc(50% - 90px);
    margin-left: -webkit-calc(50% - 90px);
    margin-left: -moz-calc(50% - 90px);

    letter-spacing: 4px;
}
.d-service-footer:hover {
    font-weight: bold;
    margin-left: calc(50% - 97px);  /* Calculamos para mantener centrado */
    margin-left: -webkit-calc(50% - 97px);
    margin-left: -moz-calc(50% - 97px);
}

/* Envolvemos todas las cajas en un flex: Controlar alineación cuando hay varias alturas */
/*  Ya no usamos pq. la propiedad flex no tiene en cuenta los anchos */
.d-service-div-wrapper {
    /*display: flex;*/
}
/* 6 cajas con margen de 15 meons la última: 45 / 3 = 11.25  */
.d-service-div {
    margin-top: 20px;
    position: relative;
    /*display: inline-block;*/
    display: inline-grid;
    width: calc(16.666%);
    width: -webkit-calc(16.666%);
    width: -moz-calc(16.666%);

    text-align: center;
    /*border: solid 1px black;*/
}
.d-service-div:hover {
    background-color: rgba(0,158,211,0.2);
}

.d-service-div-image {
    width: 100px;
    height: 100px;

    border-radius: 10%!important;
    background: linear-gradient(to right, #96ACC1 , #1c4a71);
}
.d-service-div-image >img {
    padding: 12px !important;
}
.d-service-div-text {
    margin-top: 8px;
    font-size: 17px;        /* con 18 falla en mozilla*/
    text-align: center;
    color: #312f79;
    /*font-family: "HelveticaNeue-CondensedBold";*/
    font-family: fontface_HelveticaNeueCondensed;
    font-weight: bold;
}


/* *** DISPLAY-PACK: s-pack-* *** */

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
#display-pack-wrapper {
    padding-top: 50px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0;

    text-align: center;

    /* Márgenes laterales */
    max-width: 964px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Text: NUESTROS PACKS */
.d-pack-title {
    margin-top: 10px;
    font-size: 38px;
    text-align: center;
    letter-spacing: 8px;
}
.d-pack-title-p1 {
    color: #312f79;
    font-weight: lighter;
}
.d-pack-title-p2 {
    color: #96ACC1;
    font-weight: bold;
}

.d-pack-div-wrapper {
    text-align: center;
}

/* 3 cajas */
.d-pack-div {
    margin-top: 20px;
    position: relative;
    display: inline-block;
    width: calc(33.333%);
    width: -webkit-calc(33.333%);
    width: -moz-calc(33.333%);
}

.d-pack-div-image {
    z-index: -1;
    max-width: 300px;
}
.d-pack-div-image >img {
    padding: 0 12px !important;
}

/* Footer sobre la imagen en la parte inferior */
.d-pack-div-footer-separador {
    color: #312f79;
}
.d-pack-div-footer-text1 {
    margin-top: -73px;
    text-align: center;
    color: #96ACC1;

    font-size: 15px;
    font-weight: bolder;
}
.d-pack-div-footer-text2 {
    margin-top: 4px;
    text-align: center;
    color: #312f79;

    font-size: 12px;
    font-weight: normal;
}


/* *** DISPLAY-SERVICE-DETAIL: d-service-det-* *** */

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
#display-service-det-wrapper {
    padding-top: 50px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0;

    /* Márgenes laterales */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 964px;
}

.d-service-det-div-wrapper {
    /*max-width: 768px;*/
}

/* 3 cajas */
.d-service-det-div {
    position: relative;
    height: 140px;
    display: inline-flex;
    width: calc(33.333%);
    width: -webkit-calc(33.333%);
    width: -moz-calc(33.333%);

    /*padding: 0 20px !important;*/
    /*border: solid 1px black;*/
}
.d-service-det-div:hover {
    background-color: rgba(0,158,211,0.2);
}
.d-service-det-div-body-left {
    position: relative;
    height: 140px;
    display: inline-block;
    width: calc(25%);
    width: -webkit-calc(25%);
    width: -moz-calc(25%);

    margin-left: 17px;
    /*text-align: center;*/
    /*border: solid 1px black;*/
}

.d-service-det-div-body-right {
    position: relative;
    height: 140px;
    display: inline-block;
    width: calc(75%);
    width: -webkit-calc(75%);
    width: -moz-calc(75%);

    /*border: solid 1px black;*/
}

.d-service-det-div-body-icon {
    margin-top: 4px;
}
.d-service-det-div-body-icon >img {
    /* No es necesario pq. se ajustan auto. El contenedor tiene un tamaño aceptable */
    /*width: 64px;*/
    /*height: 64px;*/
    /*padding: 8px;*/
    padding: 0px 8px 8px 8px;
}

/* Footer sobre la imagen en la parte inferior */
.d-service-det-div-body-title {
    margin-top: 4px;
    font-size: 15px;
    /*font-weight: 100;*/
    text-align: left;
    color: #96ACC1;
}
.d-service-det-div-body-detail {
    margin-top: 2px;
    font-size: 12px;
    /*font-weight: 100;*/
    text-align: left;
    color: #312f79;
}


/* *** MEDIA QUERIES **** */


/* Aquí van los estilos para iPad horizontal */
@media only screen and ( max-width: 1200px ) {

}
@media only screen and (max-width: 880px ){


    /* *** DISPLAY-SERVICE: s-service-* *** */
    .d-service-title-main {
        font-size: 40px;
    }
    .d-service-title {
        font-size: 26px;
    }
    /* Forzamos el salto de línea */
    .d-service-title-main-p1, .d-service-title-p1, .d-service-title-p2  {
        display: block;
    }
    /* 3 cajas */
    .d-service-div {
        width: calc(33.333%);
        width: -webkit-calc(33.333%);
        width: -moz-calc(33.333%);
    }
}

/* Aquí van los estilos para iPad vertical */
@media only screen and ( max-width: 767px ) {

    /* *** DISPLAY-TOP: dt-*  */
    .display-top-propietario-wrapper {
        margin-top: 82px;
        background: url(../img/fase3/fondos/Fondo_propietario_480.jpg) no-repeat 20% 50%;   /* X=20% Y=50% */
        min-height: 480px;

        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }


    /* PACKS */
    /* Text: NUESTROS PACKS */
    .d-pack-title {
        font-size: 30px;
    }
    .d-pack-div-image {
        /*max-width: 250px;*/
    }
    .d-pack-div {
        margin-top: 10px;
        /*height: 420px;*/
        width: calc(100%);
        width: -webkit-calc(100%);
        width: -moz-calc(100%);

        /*max-width: 250px;*/
    }
    /* Servicios-Detalle */
    .d-service-det-div {
        width: calc(50%);
        width: -webkit-calc(50%);
        width: -moz-calc(50%);

        padding: 0 6px !important;
    }
}

/* Aquí van los estilos para iPhone horizontal */
@media only screen and ( max-width: 480px ) {

    /* *** DISPLAY-TOP: dt-*  */
    .dt-propietario-div {
        float: none;
        margin-left:   0px;         /* Evitar que el ancho fijo de 420 sea más grande que la pantalla */
        padding-left: 10px;
        width: 100%;                /* Evitar que el ancho fijo de 420 sea más grande que la pantalla */
    }

    /* APORTAMOS */
    .dt-propietario-text-block1 {
        font-size: 47px;
    }
    /* AL PROPIETARIO */
    .dt-propietario-text-block2 {
        font-size: 38px;
    }
    /* TOTAL CONFIANZA Y SEGURIDAD */
    .dt-propietario-text-block3a {
        font-size: 19px;
    }
    .dt-propietario-text-block3b {
        font-size: 25px;
    }
    /* DESPREOCÚPATE */
    .dt-propietario-text-block4 {
        font-size: 31px;
    }
    /* Lista de valores */
    .dt-propietario-text-block5 {
        font-size: 17px;
    }

    /* Servicios */
    .d-service-title-main {
        font-size: 30px;
    }
    /* Forzamos el salto de línea */
    .d-service-title-p1, .d-service-title-p2  {
        display: block;
    }
    /* 2 cajas */
    .d-service-div {
        width: calc(50%);
        width: -webkit-calc(50%);
        width: -moz-calc(50%);
    }

    /* Servicios-Detalle */
    .d-service-det-div {
        width: calc(100%);
        width: -webkit-calc(100%);
        width: -moz-calc(100%);

        padding: 0 6px !important;
    }
}

/* Aquí van los estilos para iPhone vertical */
@media only screen and ( max-width: 320px ) {

    .d-service-title {
        font-size: 20px;
    }

    /* 1 caja */
    .d-service-div {
        width: calc(100%);
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
    }
}



/* ################################################################
        LAND - HUESPED
################################################################# */

.display-top-huesped-wrapper {
    margin-top: 82px;
    background: url(../img/fase3/fondos/Fondo_huesped.jpg) no-repeat 20% 50%;   /* X=20% Y=50% */
    min-height: 480px;


    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Cubrimos con un ancho máximo de 900 para evitar ir al extremo */
.dt-huesped-div-wrapper {
    max-width: 1000px;
}
.dt-huesped-div {
    margin-top: 180px;
    float: right;
    margin-right: 10px;

    text-align: left;
    width: 320px;           /* ancho justo para el tamaño actual del texto */

    /*border: solid 1px black;*/
    /*background-color: #96ACC1;*/
    background-color: rgba(0,158,211,0.6);
    padding: 12px;
}

/* RESERVA */
.dt-huesped-text-block1 {
    /*padding-top: 40px;*/
    color: #FFF;
    font-weight: 900;
    font-size: 50px;
    line-height: 1;
}
/* ALOJAMIENTOS UNICOS EXPERIENCIAS */
.dt-huesped-text-block2 {
    font-size: 40px;
    color: #312f79;
    line-height: 1;
}


/* *** DISPLAY COLLUMNS CSS *** */

/* font-size: 0 ==> Esto es para eliminar el inline-block white space */
.display-columns-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    font-size: 0;

    /* Márgenes laterales: Usamos calc(100% - 40px) para el marge */
    /*padding-left: 24px;*/
    /*padding-right: 24px;*/
    max-width: 964px;

    /*background-color: lightblue;*/
}
.display-columns-title-experiencias {
    height: 30px;
    margin: 0;

    color: #FFF;
    text-align: center;

    font-size: 25px;
    font-weight: lighter;
    letter-spacing: 4px;
}

/* 2 cajas: 75% + 25% */
.display-columns-3-1 {
    /*display: -webkit-inline-box;*/
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -o-inline-flex;
    display: -ms-inline-flex;

    /* Margen lateral */
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
}

.display-columns-apartamentos {
    position: relative;
    width: 75%;
    /*height: auto;*/

    /* Ganamos un poco más de espacio: Alineamos las imágenes por la derecha y por la izquierda */
    margin-left:  0px !important;
    margin-right: 16px !important;
    margin-top: 30px;
}
.display-columns-experiencias {
    position: relative;
    width: 25%;
    /*height: auto;*/
    height: 100%;

    /* Ganamos un poco más de espacio: Alineamos las imágenes por la derecha y por la izquierda */
    margin-left: -8px !important;
    margin-right: 0px !important;

    background-color: #96ACC1;
}

/* 3 cajas con margen de 15 meons la última: 45 / 3 = 11.25  */
.dc-apartamentos-div-wrapper {
    position: relative;
    display: inline-block;
    width: calc(33.333%);
    width: -webkit-calc(33.333%);
    width: -moz-calc(33.333%);
}
.dc-experiencias-div-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dc-div-image {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.dc-div-image:hover {
    /*background-color: rgba(0,158,211,1.2);*/
    opacity: 0.7;
}

.dc-div-comment {
    padding: 8px !important;

    /* Los textos no exceden  */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.dc-div-comment-location {
    font-size: 19px;
}
.dc-div-comment-location-apartamentos {
    color: #96ACC1;
}
.dc-div-comment-location-experiencias {
    color: #FFF;
}

.dc-div-comment-city {
    font-size: 14px;
}
.dc-div-comment-city-apartamentos  {
    color: #000;
}

.dc-div-comment-city-experiencias {
    color: #000;
}

/* *** MEDIA QUERIES **** */

/* Aquí van los estilos para iPad vertical */
@media only screen and ( max-width: 767px ) {

    /* DISPLAY-COLUMNS LAND MAIN */
    .dc-main-title {
        font-size: 20px;
    }
    .dc-main-apartamentos-div-wrapper {
        width: 50%;
    }

    /* DISPLAY-COLUMNS HUESPED */
    .display-columns-apartamentos {
        width: calc(66.666%);
        width: -webkit-calc(66.666%);
        width: -moz-calc(66.666%);
    }
    .display-columns-experiencias {
        width: calc(33.333%);
        width: -webkit-calc(33.333%);
        width: -moz-calc(33.333%);
    }
    .dc-apartamentos-div-wrapper {
        width: calc(50%);
        width: -webkit-calc(50%);
        width: -moz-calc(50%);
    }

    .display-columns-title-experiencias {
        font-size: 20px;
        letter-spacing: 3px;
    }
}
/* Aquí van los estilos para iPhone horizontal */
@media only screen and ( max-width: 480px ) {

    /* DISPLAY-COLUMNS MAIN */
    .dc-main-apartamentos-div-wrapper {
        width: 100%;
    }

    /* DISPLAY-COLUMNS HUESPED */
    .display-columns-3-1 {
        /* Margen lateral */
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
    }
    .display-columns-apartamentos {
        width: calc(50%);
        width: -webkit-calc(50%);
        width: -moz-calc(50%);
    }
    .display-columns-experiencias {
        width: calc(50%);
        width: -webkit-calc(50%);
        width: -moz-calc(50%);
    }
    .dc-apartamentos-div-wrapper {
        width: calc(100%);
        width: -webkit-calc(100%);
        width: -moz-calc(100%);
    }
}

/* Aquí van los estilos para iPhone horizontal */
@media only screen and ( max-width: 320px ) {

    /* TOP HEADER */
    .dt-huesped-div {
        float: none;
        margin-left: 0px;   /* Evitar que el ancho fijo de 420 sea más grande que la pantalla */
        padding-left: 10px;
        width: 100%;        /* Evitar que el ancho fijo de 420 sea más grande que la pantalla */
    }
}

/* ################################################################
        BOOTSTRAP CONTACTO
################################################################# */

.display-contacto-wrapper {
    margin-top: 80px;
    margin-bottom: 80px;
}

.display-contacto-wrapper p {
    font-size: 15px;
}

.d-contacto-hline {
    border-bottom: 2px solid #384452;
}

.d-contacto-hline-w {
    border-bottom: 2px solid #FFF;
    margin-bottom: 25px;
}


/* BOTON DE LA IMAGEN PRINCIPAL */

.dmbutton:hover,
.dmbutton:active,
.dmbutton:focus{
    color: #ffffff;
    background-color: #222222;
    border-color: #ffffff;
}
.dmbutton-profile:hover,
.dmbutton-profile:active,
.dmbutton-profile:focus{
    color: #222;
    background-color: #fff;
    border-color: #222;
}
.dmbutton {
    background:rgba(0, 0, 0, 0);
    border: 1px solid #ffffff;
    color: #ffffff;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding-top: 1.025rem;
    padding-right: 2.25rem;
    letter-spacing:0.85px;
    padding-bottom: 1.0875rem;
    padding-left: 2.25rem;
    font-size: 1.55rem;
    cursor: pointer;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    -webkit-appearance: none;
    font-weight: normal !important;
}
.dmbutton-profile {
    background:rgba(0, 0, 0, 0);
    border: 1px solid #222;
    color: #222;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding-top: 1.025rem;
    padding-right: 2.25rem;
    letter-spacing:0.85px;
    padding-bottom: 1.0875rem;
    padding-left: 2.25rem;
    font-size: 1.55rem;
    cursor: pointer;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    -webkit-appearance: none;
    font-weight: normal !important;
}


/*	################################################################
        SITE WRAPS
################################################################# */

#form-register-legal label{
    margin: 0px;
    font-size: 14px;
    line-height: 1.45455;
    font-weight: 400;
    letter-spacing: .005em;
    font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #000;
}

#footer-legal {
    /*background-color: #f2f2f2;*/
    border-top: 3px solid #d6d6d6;
}

#footer-legal p, #footer-legal a{
    margin: 0px;
    font-size: 11px;
    line-height: 1.45455;
    font-weight: 400;
    letter-spacing: .005em;
    font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #848282;
}
#footer-legal a{

    color: #000;

    border-right: 1px solid #d6d6d6;
    margin-right: 10px;
    padding-right: 12px;
    display: inline-block;
    margin-top: 3px;
    white-space: nowrap;
}
#aviso_legal {
    font-synthesis: none;
    -webkit-font-feature-settings: 'kern';
    -moz-font-feature-settings: 'kern';
    font-feature-settings: 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    text-align: left;
}

#aviso_legal p {

    font-size: 17px;
    line-height: 1.52947;
    font-weight: 400;
    letter-spacing: -.021em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    background-color: #fff;
    color: #333;
    font-style: normal;

    margin: 0 0 1em 0;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}


































/* Main page */
/* >>> SFR: New headwrap*/
#headerwrap3 {
    /*background: url(../img/t-back.jpg) no-repeat center top;*/
    /*background: url(../img/Front_01.jpg) no-repeat center top;*/
    background: url(../img/web_4b.jpg) no-repeat center top;
    margin-top: 0px;
    padding-top:80px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 872px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#headerwrap3 h3, #headerwrap3 h5 {
    color: white;
    font-weight: 400;
    margin: 5px;
}

#headerwrap3 h1 {
    color: white;
    /*margin-bottom: 25px;*/
    margin: 0px;
}

#headerwrap3 .img-responsive {
    margin: 0 auto;
}





/* <<< */
#headerwrap {
    background-color: #96ACC1;    /*#0B62A8;     */
    min-height: 300px;                      /*550*/
    padding-top: 100px;
    padding-bottom: 0px;
    text-align: center;
}

/* Para el resto de las paginas*/
#headerwrap2 {
    background-color: #96ACC1;    /*#0B62A8;     */
    min-height: 150px;                      /*550*/
    padding-top: 100px;
    padding-bottom: 0px;
    text-align: center;
}

#headerwrap h3, #headerwrap h5 {
    color: white;
    font-weight: 400;
}

#headerwrap h1 {
    color: white;
    margin-bottom: 25px;
}

#headerwrap .img-responsive {
    margin: 0 auto;
}




/* Services Wrap */

/* Service (Alternative) */
#service2 {
    margin-top: 60px;
    margin-bottom: 40px;
}
#service2 img{
    width: 86px;
    border-radius: 50%!important;
    background-color: #f2db94;
    padding: 20px;
}
#service2 .section-heading {
    margin-top: 10px;
    margin-bottom: 20px;
}
#service2 .section-item {
    margin-top: 60px;
}

#service2 .section-item h6 {
    font-weight: 500;
}

@media (max-width: 768px) {
    #service2 img{
    width: 124px;
    }
}

/* Service (Default) */
#service img{
    width: 86px;
    border-radius: 10%!important;
    background-color: #f2db94;
    padding: 20px;
}

@media (max-width: 768px) {
    #service img{
        width: 124px;
    }
}

#service .section-heading {
    margin-top: 10px;
    margin-bottom: 20px;
}

#service .section-item {
    margin-top: 60px;
}

#service {
    margin-top: 100px;
    margin-bottom: 80px;
}

#service i {
    color: #f2db94;
    font-size: 60px;
    padding: 15px;
}


/* Portfolio Wrap */
#portfoliowrap {
    margin-top: 30px;
    margin-bottom: 60px;
    display: block;
    text-align: center
}
#portfoliowrap .section-heading {
    margin-top: 10px;
    margin-bottom: 20px;
}

#portfoliowrap .portfolio-centered {
    margin-left: 20px;
    margin-right: 20px;
}

#portfoliowrap .portfolio-item {
    padding: 5px;
    background-color: #f2db94;
}

#portfoliowrap h5 {
    color: #384452;
}

#portfoliowrap h3 {
    margin-bottom: 25px;
}

.portfolio {
    padding:0 !important;
    margin:0 !important;
    display:block;
}


#portfoliowrap .portfolio-item .title:before {
    border-radius:0;
    display:none
}

.portfolio-item h3 {
    margin:-10px 0 10px;
    font-size:16px;
    text-transform:uppercase;
}


.tpl6 h3
{
    color:#fff;
    margin:0;
    padding:40px 5px 0;
    font-size:16px;
    text-transform:uppercase;
}
.tpl6 .dmbutton
{
    display:inline-block;
    /*margin:30px 5px 20px 5px;*/
    margin:5px 5px 5px 5px;
    font-size:13px;
}
.tpl6 .dmbutton-profile
{
    display:inline-block;
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-size:13px;
}

.tpl6 .bg
{
    height:100%;
    width:100%;
    background-color:#312f79;
    background-color:rgba(0,179,254,.9);
    text-align:center;
}

/* Under construcion Wrap */
#under_wrap {
    background: url(../img/web_in_construction.jpeg) no-repeat center top;
    height: 999px;  /* el alto de la imagen*/
    margin-top: 100px;
    /*background-attachment: relative;*/
    background-position: top center;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

/* Testimonials Wrap */
#twrap {
    background: url(../img/fase3/fondos/Fondo_generico.jpg) no-repeat center top;
    margin-top: 0px;
    padding-top:60px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 450px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#twrap i {
    font-size: 50px;
    color: #f29164;
    margin-bottom: 25px;
}

#twrap p {
    color: #f29164;
    font-size: 15px;
    line-height: 30px;
}

/* clients logo */
#cwrap {
    background: #f7f7f7;
    margin-top: 0px;
    padding-top: 80px;
    padding-bottom: 100px;
}

#cwrap h3 {
    margin-bottom: 60px;
}


/*	################################################################
        PAGE CONFIGURATIONS
################################################################# */
/* General Tweaks */



#blue h3 {
    color: white;
    margin-left: 15px;
}

.ctitle {
    color: #312f79;
    font-weight: 700;
    margin-bottom: 15px;
}

csmall {
    font-size: 12px;
    color: #b3b3b3;
}
csmall2 {
    font-size: 12px;
    color: #f39c12
}

.spacing {
    margin-top: 40px;
    margin-bottom: 40px;
}

.badge-theme {
    background: #312f79;
}

/* Contact Page */
#contactwrap {
    background: url(../img/contact.jpg) no-repeat center top;
    margin-top: -60px;
    padding-top:0px;
    text-align:center;
    background-attachment: relative;
    background-position: center center;
    min-height: 400px;
    width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Blog Page */
.popular-posts { 
    margin: 0px;
    padding-left: 0px;
}

.popular-posts li {
    list-style: none; 
    margin-bottom: 20px; 
    min-height: 70px;
}
.popular-posts li a, 
.popular-posts li a:hover {
    color:#2f2f2f; 
    text-decoration: none;
}

.popular-posts li img {
    float: left; 
    margin-right: 20px;
}

.popular-posts li em {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: #b3b3b3
}

.popular-posts p {
    line-height: normal;
    margin-bottom: auto;
}	

.share i {
    padding-right: 15px;
    font-size: 18px;
}



/* Register and Login Page */

.form-signin {
    max-width: 450px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}