@import url("normalize.css"); 
@import url("caroufredsel.css"); 
body {
    font-size: 1em;
    line-height: 1.4em;
    background-color:#dedede;
    margin: auto;
    padding: auto;
    font-family: 'Raleway', sans-serif;
    text-align: justify;
    color: #575757; 
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #F0F0F0;
    margin: 1em auto;
    padding: 0;
    width: 70%;
}
img {
    vertical-align: middle;
}
img.izq{
    float: left;
    margin: 0 1em 0 0;
    padding: 2px;
    border: 1px solid #ccc;
}
.der{
    float: right;
    margin: 0 0 1em 1em;
    padding: 2px;
    border: 1px solid #ccc;
}
ul {
    margin: 1em 2em;
    list-style: disc;
    position: relative;
}

a{
    text-decoration: none;
}
a:hover, :hover{

}
fieldset{
    border:none;
}
div{
    box-sizing: border-box;
}
/* ==========================================================================
Layout
========================================================================== */
.bodyint{
    background-color: #f2f2f2;
}
.wrap{
    max-width: 1100px;
    margin: 1em auto 0;
    text-align: justify;
    clear: both;
    overflow: hidden;
    background-color: #fff;
    z-index: 10;
    position: relative;
}
header{
    float: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #3d3d3d;
    z-index: 100;
    border-bottom: 5px solid #fff;
    height: 70px;
}
section{
    float: left;
    position: relative;
    padding: 1em;
    line-height: 1.2em;
}
a.logo{
    float: left;
    width: 180px;
    padding: 0;
    margin: 0 auto;
    display: block;
}
aside{
    width: 360px;
    float: right;
}
footer{
    width: 100%;
    float: left;
    margin:0;
    padding: 3em 0;
    text-align: center;
    color: inherit;
}
#rrss{
    display: block;
    clear: both;
    list-style-type: none;
    overflow: hidden;
    margin: 20px 0 0 50px;
    float: left;
}
#rrss li{
    float: left;
    display: block;
    margin: 0 5px;
}
#rrss li a{
    color: #7e0c15;
    font-size: 20px;
}
#rrss li a:hover{
    color: #575757;
}
#cssmenu{
    margin: 0;
    display: block;
    overflow: hidden;
    position: relative;
}


nav.princ{
    clear: both;
    margin: 0 auto;
    max-width: 1100px;
    line-height: 1em;
    display: block;
    position: relative;
    overflow: hidden;
}
nav.princ ul{list-style: none;position: relative;text-align: center;display: block;overflow: hidden;width: 830px;margin: 0 0 0 20px;}
nav.princ ul li{
    float: left;
    display: block;

}
nav.princ ul li a{
    color: #fff;
    text-decoration: none;
    padding: 27px;
    margin: 0;
    display: block;
    text-align: left;
}
#cssmenu  ul li a:hover, #cssmenu  ul li a.active{
    color: #fff;
    background: #096f97;
}
ul li ul{
    display: block;
}
/***** Slide Menu ****/


.slideout-menu{

}

.menuresp, .slideout-menu h3{
    display: none;
}

/***** Slide Menu ****/
#mapa{
    width: 600px;
    height: 350px;
    float: right;
    border: none;
}
#mapa2 {
    float: right;
    width: 600px;
    height: 400px;
    border: none;
}
#sop-superior{
    position: absolute;
    top: 0;
    right: 0;
    height: 70px;
    width: 625px;
}
#sop-superior img {
    float: left;
}

#fono-cont{
    float: left;
    background-color: #5686a3;
    color: #fff;
    height: 70px;
    width: 293px;
}
#fono-cont p{
    font-size: 1.1em;
    font-weight: bold;
    font-style: italic;
    padding: .5em ;
    text-align: center;
}
/**** Contenido ***/
h1 {
    font-weight: normal;
    color: #575757;
    font-size: 1.8em;
    margin: 1em 0;
}
h2 {
    font-weight: normal;
    font-size: 1.4em;
    margin: 1em 0 0.5em;
}
section h3{
    color: #193F76;
    font-size: .94em;
    font-weight: bold;
    margin: .4em 0;
}
article{
    padding: 0 .5em;
    font-size: .9em;
}
article p{

    margin: .5em 0 .8em;
}
article ul li:before{
    content: "- "
}
#wrap-cita{
        max-width: 1100px;
        position: relative;
        margin: 0 auto;
        clear: both;
}
#cita{
    width: 100%;
    margin: -20px auto 30px;
    padding: 30px 0;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    background: #004e96;
    color: #fff;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 999;
    overflow: hidden;
    display: block;
}
#cita p{
    margin: 0 30px;
    text-align: left;
    float: left;
}
#cita img{
    float: right;
    margin: -10px 30px;
}


.sop-dest{
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0 100px;
}
.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #64C7CC;
  margin: 57.74px 10px;
  float: left;
  
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #64C7CC;
}
.hexagon-img:nth-child(5) {
    margin: 17.74px 10px 0 120px;
}
.hexagon:nth-child(6), .hexagon:nth-child(7){
    margin: 17.74px 10px 0 10px;
}
.hexagon-img:last-child {
    margin: 17.74px 10px 0 10px;
}
a.hexagon:hover{
    background: #3d3d3d;
}
a.hexagon:hover:before {
  bottom: 100%;
  border-bottom: 57.74px solid #3d3d3d;
}
a.hexagon:hover:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #3d3d3d;
}

.hexagon:nth-child(1) {
    background: #56acb9;
}
.hexagon:nth-child(1):before {
  border-bottom: 57.74px solid #56acb9;
}

.hexagon:nth-child(1):after {
  border-top: 57.74px solid #56acb9;
}

.hexagon:nth-child(4) {
    background: #0099b0;
}
.hexagon:nth-child(4):before {
  border-bottom: 57.74px solid #0099b0;
}

.hexagon:nth-child(4):after {
  border-top: 57.74px solid #0099b0;
}


.hexagon:nth-child(6) {
    background: #096e9a;
}
.hexagon:nth-child(6):before {
  border-bottom: 57.74px solid #096e9a;
}

.hexagon:nth-child(6):after {
  border-top: 57.74px solid #096e9a;
}


.tit-dest{
    position: absolute;
    top:30px;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    color: #fff;
}
/* hexagono img*/
.hexagon-img {
  position: relative;
  width: 200px;
  height: 115.47px;
  margin: 57.74px 0;
  background-image: url(../img/hex-01.jpg);
  background-size: auto 230.9401px;
  background-position: center;
  margin: 60px 10px;
  float: left;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 29.29px;
}
.hexagon-img:nth-of-type(2) {
  background-image: url(../img/hex-02.jpg);
}
.hexagon-img:nth-of-type(3) {
  background-image: url(../img/hex-03.jpg);
}
.hexagon-img:nth-of-type(4) {
  background-image: url(../img/hex-04.jpg);
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 200.0000px;
  height: 115.47005383792516px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -70.7107px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -70.7107px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon-img:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 200.0000px;
  height: 115.4701px;
  z-index: 2;
  background: inherit;
}
/*Fin Hexagono imagen*/
.contenido{
    margin: 1em auto;
    width: 100%;
    box-sizing: border-box;
}
.cont-int{
    margin: 5em auto 1em;
    padding: 0 1em;
    width: 100%;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
}
.contenido ul li{
    margin: .5em 0;
}
#nserv{
    width: 100%;
    background-image: url(../img/bg_cita.jpg);
    min-height: 300px;
    background-size: cover;
}
#nserv-sop{
    max-width: 1100px;
    padding: 2em auto;
    overflow: hidden;
    display: block;
    margin: 0 auto;
}
#nserv-cont{
    float: right;
    color: #fff;
    margin: 5em 4em;
    text-align: center;
}
#nserv-cont h1{
    color: #fff;
    font-weight: bold;
    text-align: center;
}
#nserv-cont span{
    text-align: justify;
    margin: 1em 0;
    font-size: 20px;
    display: block;
    max-width: 500px;
}
#nserv-cont h2{
    text-align: left;
}
.vermas{
    background-color: #1683C4;
    padding: .5em 1em;
    color: #fff;
    text-decoration: none;
    margin: 2em auto;
    width: 120px;

}
.vermas:hover{
    background-color: #fff;
    color: #1683C4;
}
.descargar{
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    margin: .5em;
    float: left;
    clear: left;
    padding: .5em 1em;
    border: 1px solid #ccc;
    color: #9b9b9b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.descargar:after{
    content: url(../img/ico_dwn.png);
    margin-left: 1em;
}
.descargar:hover{
    background-color: #f3f3f3;
}
#qcontact{
    margin: 1em 0 0;
    background-color: #1683C4;
    overflow: hidden;
}
#qcontact-sop{
    max-width: 1100px;
    margin: 0 auto;
}
#qcontact-sop span{
    color: #fff;
    font-size: 1.6em;
    line-height: 1.2em;
    font-weight: bold;
    float: left;
    padding: 1.5em 0;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
}
.obra{
    padding: 1em 2em;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}
.mapa{
    float: left;
    width: 300px;
}
iframe {
    border: 0;
}
#wrap-bienvenidos{
    width: 100%;
    margin: 50px 0;
    display: block;
    overflow: hidden;
}
.img-bienv{
    float: left;
    width: 50%;
    min-height: 400px;
    background-image: url(../img/bg_bienv.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.txt-bienv{
    float: left;
    width: 50%;
    min-height: 400px;
}
.sop-txt-bienv{
    margin: 50px auto;
    max-width: 350px;
}
.sop-txt-bienv h1{
    font-size: 1.4em;
}

.vermas{
    background: #fff;
    width: 175px;
    display: block;
    text-align: center;
    float: none;
    padding: 10px 5px;
    color: #575757;
    border: 1px solid #575757;
    margin: 30px auto 0;
}
.vermas:hover{
    background: #575757;
    color: #fff;
}

#wrap-habit{
    float: left;
    width: 100%;
    min-height: 400px;
    background-image: url(../img/bg_habit-indx.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 0;
    margin: 50px 0;
}
.sop-habit{
    max-width: 1200px;
    margin: 50px auto;
    overflow: hidden;
}
.txt-habit{
    background: #fff;
    overflow: hidden;
    width: 800px;
}
.sop-txt-habit{
    padding: 30px;
    background: #fff;
}
.precio-habit{
    color: #fff;
    background: #7e0c15;
    padding: 100px 0 0;
}
.precio-habit .vermas{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    width: 130px;
}
.precio-habit .vermas:hover{
    background: #fff;
    border: 1px solid #fff;
    color: #7e0c15;
    width: 130px;
}
.hab-desde{
    margin: 0 0 10px;
    display: block;
    text-align: center;
    padding: 50px 0 0;
}
.precio-desde{
    display: block;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
}
.col-container {
    display: table;
    /* width: 100%; */
}
.col {
    display: table-cell;
    padding: 50px;
    width: 50%;
    vertical-align: top;
}

#soportebanners{
    width: 100%;
    float: left;
    margin: 1em 0;
}
#soportebanners a{
    margin: 0 1em 0 0;
    text-decoration: none;
}
#soportebanners a:hover{
    opacity: .7;
}

.desc{
    float: left;
    width: 320px;
    margin: 0 0 0 1em;
}
.dest{
    font-weight: bold;
    color: #ee820f;
}
#wrap-gal-port{
    width: 100%;
    display: block;
    overflow: hidden;
}
#sop-gal-port{
    width: 100%;
    padding: 30px 0;
    overflow: hidden;
    margin: 0 auto;
}
#sop-gal-port h1{
    text-align: center;
    margin: 0 auto 50px;
}
#sop-gal-port ul{
    width: 100%;
    text-align: justify;
    margin: 0;
    padding: 0;
}
#sop-gal-port ul li{
    display: block;
    margin: 0 auto;
    width: 16.666667%;
    padding: 0;
    overflow: hidden;
    float: left;
}
.galeria li{
    display: block;
    margin: 0 auto;
    width: 33%;
    padding: 0;
    overflow: hidden;
    float: none;
}
#sop-gal-port ul li a img, .galeria li a img{
    width: 100%;
    height: auto;
    transition: transform 0.3s linear 0s;
}
#sop-gal-port ul li a img:hover, .galeria li a img:hover{
        transform: scale(1.05);
}
.sop-gal-prods{
        width: 450px;
        float: right;
        overflow: hidden;
        display: block;
        margin: 0 10px;
        box-sizing: border-box;
}
.sop-gal-prods ul{
    margin: 0 8px 0 0;
    overflow: hidden;
}
.sop-gal-prods ul li, .galeria li{
    display: inline-block;
    margin: 0 auto 10px;
}
.tit-prod{
 font-weight: 600;
 font-size: 18px;
 margin: 0 0 10px;
}
.producto {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0 0 20px 0;
}
.producto ul li ol{
    margin: 0 0 0 30px;
}
.producto ul li ol li{
    float: left;
}
.desc-prod{
    float: left;
    max-width: 530px;
}
ul.galeria{
    margin: 1em  0;
    text-align: justify;
    width: 100%;
    display: block;
    clear: both;
}
ul.galeria li{
    list-style: none;
    display: inline-block;
    margin: 1em auto;
}
table{
    margin: 0 0 1em 0;
    width: 100%;
}
table thead{
    background: #7e0c15;
    color: #fff;
    border: transparent;
}
table, td, th {
    border: 1px solid #ddd;
    border-collapse: collapse;
    padding: .5em;
}
th {
    border: 1px solid #7e0c15;
    border-collapse: collapse;
    padding: .5em;
}
.esqitil{
    float: right;
}
ul.gps li{
    float: left;
}
.slider-wrapper.theme-default {
     margin: 0;
     display: block;
     /* position: absolute; */
     width: 100%;
     z-index: 0;
}
.sop-slide-qs{
    max-width: 500px!important;
    margin: 0 0 10px 10px;
    float: right; 
}
/* Clientes */ 
#wrap-clientes{
    width: 100%;
    display: block;
    margin: 50px 0;
}
#sop-clientes{
    max-width: 1100px;
    margin: 0 auto;
    float: none;
    
}
#sop-clientes h2{
    font-size: 33px;
    text-align: center;
    margin: 30px 0;
}
.clientes-indx{
    text-align: justify;
}
.cliente{
    float: none;
}
/******* Formulario *******/
#wrapcontac{
    max-width: 970px;
    height: 560px;
    margin: 0 auto;
    background-image: url(../img/bg_contacto.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
}
#datos{
    padding: 0 1em;
    float: left;
    margin: 0;
    width: 380px;
}
#datos h3{
    font-size: 20px;
    text-transform: uppercase;
}
span.dato{
    float: left;
    display: block;
    clear: left;
    margin: 0 0 .5em 0;
    width: 20px;
    color: inherit;
}
span.info {
    float: left;
    text-align: left;
    margin: 0 0 .5em 1em;
    line-height: 1.3em;
    font-size: 15px;
}
#sop-contacto{
    float: left;
    margin: 0 2em;
}
#contacto {
    float: left;
}
#contacto h2{
    color: #fff;
}
#contacto fieldset{
    padding: 0 1em;
    background: rgba(255, 255, 255, 0.3);
    max-width: 360px;
}
#contacto label {
    float: left;
    margin: .3em 0 0;
    width: 100px;
    text-align: left;
    color: #193F76;
}
#contacto input {
    float: left;
        width: 100%;
    margin: 0;
}
#contacto .inputchico {
    float: left;
    width: 100px;
    margin: 0;
}

#contacto input, #contacto textarea, #contacto select{
    padding: 6px;
    background: #F2F2F2;
    border: 1px solid #DBDBDB;
    color: #4A4A4A;
    box-sizing: border-box;
}
#contacto textarea{
        width: 100%;
    height: 100px;
    float: left;
}
#contacto input#send{
    background: #193F76;
    margin: 0 0 0 0;
    color: #fff;
    padding: .5em;
    width: 200px;
}
#contacto input#send:hover{
    background: #395CC0;
}
#contacto ul{
    margin: 0;
}
#contacto li {
    margin: 0 0 .5em 0;
    display: block;
    float: left;
    width: 100%;
}
.output_message, .output_message2 {
    clear: both;
    padding: 1em 0 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color: #5686A3;
    display: block;
}
.output_message2 {
    padding: .1em 0 0;
    color: #3F6503;
}


/****** Footer   *******/
footer{
    background: #363636;
    text-align: center;
}
#sop-footer{
    margin: 0 auto;
    max-width: 1100px;
    text-align: justify;
    vertical-align: top;
    float: none;
}
#datos{
    float: none;
    color: #fff;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin: 0 auto;
}


.rrss{
    list-style-type: none;
    float: right;
    margin: 70px 50px 0;
}
.rrss li{
    float: left;
    display: block;
    margin: 0 5px;
}
.rrss li a{
    width: 30px;
    height: 30px;
    background: #096f97;
    color: #fff;
    display: block;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    padding: 0;
}
.rrss li a i{
    margin: 7px 0 0 0;
}
.rrss li a:hover{
    background: #7a7a7a;
}
#datos-footer h4{
    margin: 0 auto;
}


#datos-footer ul{
    list-style: none;
    background-color: transparent;
    position: relative;
    width: 180px;
    margin: 1em 0;
    padding: 0;
}
#datos-footer ul li{
    float: none;
    display: inline-block;
    margin: 0 auto;
}
#datos-footer ul li a{
    margin: 0;
    padding: 0;
}
#datos-footer ul li a:hover{
    opacity: .75;
}
/**** Pie Pagina ***/  
#piedepagina {
    width: 100%;
    text-align: center;
    display: block;
    float: left;
    padding: 1em 0;
    background: #2d2d2d;
    color: #696969;
    font-size: .9em;
}
#piedepagina a{
  color: #696969;
}
#piedepagina a:hover{
  color: #F9F9F9;
}
/*** /Pie Pagina ****/
/**** Media Queries ****/
@media (max-width: 900px){
body{
     overflow-x: hidden; 
}
    header {
        float: left;
        position: relative;
        width: 100%;
        background-image: none;
        background-repeat: repeat-x;
        height: auto;
        overflow: hidden;
    }
    h1 {
        font-size: 1.6em;
    }
    img{
        max-width: 100%;
    }
    a.logo{
        float: none;
        display: block;
        margin: 1em auto;
        z-index: 0;
        /* width: 100%; */
        clear: both;
        overflow: hidden;
        position: relative;
        text-align: center;
        cursor: pointer;
    }
    a.logo img{
        width: 70%;
    }
    #sop-superior {
        position: relative;
        top: 0;
        right: 0;
        height: 70px;
        width: 625px;
        margin: 0 auto;
    }
    #servcli {
        float: none;
        color: #fff;
        font-size: .95em;
        margin: .5em;
        clear: both;
        display: block;
        width: 100%;
    }
    #datos {
        width: 100%;
        float: left;
      margin: 0;
    }
    span.dato {
        margin: 0 1em;
        width: 40px;
    }
    #sop-contacto {
        float: left;
        margin: 0;
    }
    #contacto1 {
        float: left;
        margin: 1em 0 0 0;
        width: 100%;
    }
    #contacto1 label {
        clear: left;
        margin: 0 0 1em;
    }
    #cita {
        font-size: 1.05em;
        line-height: 1.1em;
    }
    .destacado{
        display: block;
    }
    #bienvenidos img {
        float: none;
        margin: 0 auto 1em;
        width: 100%;
    }
    .esqitil{
        float: none;
        margin: 0 auto;
        text-align: center;
        max-width: 100%;
    }
    #accordion{
        overflow: hidden;
        display: block;
        width: 90%;
        margin: 1em auto;
    }
    #cssmenu{
        height: 100%;
        display: block;
        overflow: scroll;
        position: none!important;
        clear: none;
        z-index: 99999;
        width: 230px;
        margin: 0;
        padding: 0;
    }
    #cssmenu ul li a{
        color: #fff;
        background-color: transparent;
        height: 22px;
        padding-top: 10px;
        float: left;
        width: 250px;
    }
    #cssmenu ul:after{
        content:none;
float: left;
}
#cssmenu ul:before{
    content: none;
    float: left;
}
.menuresp, .slideout-menu h3{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
} 
a.slideout-menu-toggle img {
    margin: .3em;
    vertical-align: middle;
    zoom:.9;
}
a.slideout-menu-toggle {
    padding: 0;
    overflow: hidden;
    display: block;
    color: #000;
}
nav.princ ul {
    list-style: none;
    margin: 0;
    position: relative;
    bottom: 0;
    right: 0;
    width: 230px;
}
nav.princ ul li:after {
    content: none;
}
nav.princ ul li a:hover, nav.princ ul li a.active {
    color: #8CD1FB;
    background: #151515;
}
.slideout-menu {
    position: fixed!important;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: #3d3d3d;
    z-index: 1000;
}
.slideout-menu h3 {
    position: relative;
    padding: 12px 10px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 400;
}
.slideout-menu .slideout-menu-toggle {
    position: absolute;
    top: 0;
    right: 10px;
    display: inline-block;
    padding: 6px 9px 5px;
    font-weight: bold;
    line-height: 1;
    background: #fff;
    color: #096f97;
    text-decoration: none;
    vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
    color: #fff;
}
.slideout-menu ul {
    list-style: none;
    font-weight: 300;
    /* border-top: 1px solid #7d4b4f; */
    /* border-bottom: 1px solid #7d4b4f; */
    margin: 0;
    padding: 0;
    width: 100%;
}
.slideout-menu ul li {
    border-top: 1px solid #737373;
    border-bottom: 1px solid #3a3a3a;
    margin: 0;
    width: 250px;
    float: none!important;
    clear: both;
}

.slideout-menu ul li a {
    position: relative;
    display: block;
    padding: .3em 0 .3em 1em!important;
    color: #999;
    text-decoration: none;
}
.slideout-menu ul li a:hover {
    background: #333;
    color: #fff;
}
.slideout-menu ul li a i {
    position: absolute;
    top: 15px;
    right: 10px;
    opacity: .5;
}
#cssmenu ul li a:hover, #cssmenu ul li a.active {
    color: #fff;
}
.cont-int {
    margin: 1em auto;
}
#sop-superior {
    height: 30px;
    width: 100%;
}
#sop-superior img {
    float: left;
    display: none;
}
#fono-cont {
    height: 30px;
    width: 60%;
}
#fono-cont p {
    font-size: .9em;
    margin: 0;
}
#nserv-cont {
    width: 90%;
    margin: 1em;
}
#nserv {
    min-height: 300px;
    padding: 1em 0;
    clear: both;
}
#nserv-cont {
    width: 90%;
    margin: 1em auto;
    float: none;
    display: block;
    position: relative;
    float: left;
    font-size: 16px;
    padding: 0 1em;
}



#qcontact-sop {
    max-width: 1100px;
    margin: 1em auto;
    display: block;
    overflow: hidden;
}

#qcontact-cont {
    text-align: center;
}
#qcontact-sop span {
    float: none;
    padding: 1.5em 0;
    margin: 1em auto;
}
#datos-footer {
    float: none;
    margin: 0 auto 1em;
    width: 280px;
}
footer #comp-rrss {
    width: 50px;
    float: none;
}
ul.galeria li {
    max-width: 45%;
}
#contacto {
    float: left;
    width: 300px;
}
#contacto fieldset {

    max-width: 100%;
}
#mapa{
    width: 350px;
    height: 400px;
    float: none;
    margin: 0 auto;
}
#contacto input {
    float: left;
    width: 90%;
    margin: 0;
}
#contacto input#send {
    margin: 0;
    width: 200px;
}
#contacto textarea {
    width: 92%;
    height: 100px;
    float: left;
}
}
@media (max-width: 768px){
.img-bienv, .text-bienv {
    width: 100%;
}
.txt-bienv {
    width: 100%;
    padding: 0 1em;
    boxsizing:border-box;
}
.sop-txt-bienv {
    margin: 50px 0;
    max-width: 100%;
    width: 100%;
}
.txt-bienv {
    min-height: auto;
}
#mapa{
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}
#sop-gal-port ul li {
    width: 33.333334%;
}
ul.galeria li{
    width: 100%;
}
ul.galeria li img{
    max-width: 100%;
}
.rrss {
    float: left;
}
/*.hexagon, .hexagon-img {
zoom: 0.7;
    }*/
.hexagon-img{
    display: none;
}
.hexagon:nth-child(6) {
    background: #096e9a;
        margin: 57.74px 10px;
}
.cliente{
    width: 235px;
    margin: 0 auto 10px;
    float: none;
    display: block;

}
}
@media (max-width: 690px){
    .sop-habit {
    max-width: 100%;
    height: 75.2px;
}
#nserv-cont span{
    font-size: 16px;
}
#contacto {
    width: 100%;
}
.col {
    width: 100%;
    display: block;
    clear: both;
    padding: 1em;
    overflow: hidden;
}
.hab-desde {
    padding: 0;
    float: left;
    margin: 10px 0 0;
}
.precio-desde{
    float: left;
    margin: 10px 10px 0;
}
.precio-habit .vermas{
    float: left;
    margin: 0 20px;
}
#wrap-habit {
    padding: 0;
    margin: 0;
}
table, td, th {
    font-size: 12px;
}
span.dato {
    margin: 0 10px;
    width: 20px;
}
}
@media (max-width: 500px){
    .hexagon-img:nth-child(5), .hexagon-img:last-child {
        margin: 60px 10px;
    }
    .hexagon:nth-child(6) {
    margin: 50px auto;
}
    .hexagon {
        float: none;
        margin: 115px auto;
        display: block;
        clear: both;
    
}
    .hexagon:nth-child(1) {
    margin: 50px auto;
}
}