@import url("normalize.css");
body {
font-size: 16px;
line-height: 1.4em;
background-color: #fff;
margin: auto;
padding: auto;
font-family: 'Montserrat', sans-serif;
text-align: justify;
color: #363636;
}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em auto 3em;padding: 0;width: 70%;clear: both;}
img {
vertical-align: middle;
}
.izq {
float: left;
margin: 0 1em 1em 0;
}
.der {
float: right;
margin: 0 0 1em 1em;
}
ul {
margin: 1em 2em;
}
a {
    color: #0083c0;
text-decoration: none;
}
a:hover {
    color: #727272;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
fieldset {
border:none;
}
h1, h2, h3, h4 {
    font-family: 'Open Sans Condensed', sans-serif;
}
#wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 0 2em 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
.inic {
padding: 0 !important;
}
header {width: 100%;position: relative;background-color: transparent;}
.imgheader{
    max-width: 1200px;
    margin: 0 auto;
}
section {
float: left;
position: relative;
color: #727272;
}
.logo {float: left;z-index: 999;position: relative;margin: 10px 0 0 20px;}
aside {
width: 360px;
float: right;
}
footer {width: 100%;float: left;background-color: #fff;margin:0;text-align: center;color: inherit;padding: 0 0 2em;clear: both;overflow: hidden;border-top: 5px solid #de0024;}
nav {clear: both;max-width: 1200px;margin: 0 auto;line-height: 1em;display: block;position: relative;height: 98px;z-index: 9990;background: #fff;display: block;overflow: hidden;}
.menu {
        position: relative;
        bottom: 0;
        display:block;
        float: left;
        margin: 40px 0 0 40px;
}
.menu li {display: inline-block;position: relative;z-index:100;margin: 0 10px;}
.menu li a {color: #8d8d8d;text-decoration: none;padding: 0 5px 2px;font-size: 15px;display: block;-webkit-transition: all 0.2s ease-in-out 0s;-moz-transition: all 0.2s ease-in-out 0s;-o-transition: all 0.2s ease-in-out 0s;-ms-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;}
.menu li a:hover, .menu li:hover > a, .menu li a.active {color: #10406a;padding: 0 5px 2px;border-bottom: 1px solid #cd0a0a;}

.menu li:hover > ul {
display: block;
}
.mobile-menu {
display: none;
width: 100%;
text-align: center;
padding: 1em 0;
background: #043990;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
}

/***** Slide Menu ****/


  .slideout-menu{

  }
  
.menuresp, .slideout-menu h3{
display: none;
}
/***** Slide Menu ****/

.slider-wrapper.theme-default {
    margin: -100px 0 0 0;
    display: block;
    /* position: absolute; */
    width: 100%;
    z-index: 0;
}

#fono-cont {
        margin: 1em 1em 0 0;
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    color: #0083c0;
}
#map {
width: 100%;
height: 600px;
}
#firma {
width: 100%;
margin: 0 auto 2em;
text-align: center;
background: transparent;
}
#firma a {
color: #797979;
text-decoration: none;
font-weight: bold;
}
#firma a:hover {
color: #ddd;
}
h1 {color: #4f4f4f;font-size: 1.95em;margin: 0;padding: 1em 0;line-height: 1em;text-transform: uppercase;font-weight: normal;text-align: center;}
h2 {
color: #4f4f4f;
font-weight: normal;
font-size: 1.4em;
line-height: normal;
margin: 0;
}
h3 {
color: #4f4f4f;
font-weight: normal;
font-size: 1.2em;
line-height: normal;
margin: 0;
}
article {
padding: 0 .5em;
font-size: .9em;
}
article p {
margin: .5em 0 .8em;
}
article ul li:before {
content: "- "
}
#wrapareas {width: 100%;padding: 1em 0;overflow: hidden;}
#sopareas {max-width: 900px;margin: 0 auto;overflow: hidden;text-align: justify;border: 1px solid #ccc;padding: 50px 30px 0;}
#sopareas h3 {
text-align: center;
}
.introareadest {
font-size: .9em;
padding: 0;
float: left;
color: #656565;
display: block;
text-align: justify;
}
.areadest {
    width: 385px;
    /* height: 390px; */
    background: #fff;
    padding: 0;
    display: inline-block;
    text-align: center;
    margin: 0 10px;
    vertical-align: top;
    }
.areadest h1{
    font-size: 16px;
    font-weight: normal;
    background: transparent;
    text-align: center;
    color: #212121;
    text-transform: uppercase;
    line-height: .5em;
    margin: 1em 0 .5em 0;
    padding: 0;
}
.areadest p{
    font-size: 14px;
    padding: 1em 2em;
    background: transparent;
    text-align: justify;
    color: #6e6e6e;
}
.areadest img{
    transition: transform 0.3s linear 0s;
}
.areadest:hover img{
    transform: scale(1.05);
}
.areadest:hover h1{
    color: #10406a;
}
.areadest:hover p{
    color: #10406a;
}
.areadest:hover{
    background: #f6f6f6;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
}
.imgareadest {position: relative;text-align: center;vertical-align: top;overflow: hidden;padding: 0;margin: 0;}
.imgareadest span {
text-align: center;
font-size: 1.3em;
display: block;
color: #1a171b;
padding: 1em 0 0;
}
a.vermasareadest {
width: 120px;
text-decoration: none;
color: #565656;
font-size: 1em;
text-align: center;
line-height: 2em;
border: 1px solid #535353;
padding: .2em 1em;
margin: 0 auto;
}
a.vermasareadest:hover {
background-color: #0d345f;
color: #fff;
}

.contenido {
margin: 1em auto 0;
padding: 0 1em;
width: 97%;
min-height: 400px;
}
.interior {padding: 1em;}
.interior h1 {
    margin: .5em 0;
    padding: 0;
    text-align: left;
}


.paginacion {
clear: both;
width: 30%;
margin: 1em auto;
text-align: center;
}
.paginacion a {
font-size: 1.2em;
font-weight: bold;
color: #0d345f;
}
.paginacion a:hover {
color: #5d5e5e;
}

/*** cita ***/
#wrap-cita{
    max-width: 1200px;
    position: relative;
    margin: 0 auto;
}
#cita{
    width: 100%;
    margin: -20px auto 30px;
    padding: 30px 0;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    background: #de0024;
    color: #fff;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 999;
    overflow: hidden;
    display: block;
}

/*** Bienvenida ***/
#wrap-bienvenida{
    width: 100%;
    position: relative;
    margin: 80px auto 50px;
}

#wrap-bienvenida span{
    float: left;
    font-size: 30px;
    padding: 50px;
}
#sop-bienvenida{
    max-width: 1200px;
    margin: 0 auto;
}

/*** msg ***/
#wrap-msg{
    width: 100%;
    position: relative;
    display: block;
    margin: 80px auto 0;
    background-image: url("../img/bg_msg.jpg");
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: cover;
}

#wrap-msg span{
    float: left;
    font-size: 30px;
    padding: 120px 0;
    color: #fff;
    line-height: 1.4em;
    font-weight: normal;
}
#sop-msg{
    max-width: 1200px;
    margin: 0 auto;
}


/*** Prod Dest Indx ***/
#wrap-prod-dest{
    width: 100%;
    display: block;
    clear: both;;
}
#sop-prod-dest{
    max-width: 1200px;
    margin: 0 auto;
    text-align: justify;
}
.prod-dest{
    display: inline-block;
    width: 580px;
    height: 160px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    margin: 0 auto 20px;
}
.prod-dest h2, a.prod-dest h2{
    font-size: 16px;
    font-weight: normal;
    color: #212121;
}
.prod-dest img{
    float: left;
    z-index: 0;
}

a.prod-dest p{
    font-size: 14px;
    color: #6e6e6e;
}
a.prod-dest:hover{
    background: #f6f6f6;
}
a.prod-dest:hover p, a.prod-dest:hover h2{
    color: #10406a;
}
.sop-txt-prod-dest{
    float: left;
    padding: 20px 10px 10px;
    display: block;
    width: 340px;
}

/** /Tarifas **/
table{
    width: 550px;
}
th, td {
    border: 1px solid #ccc;
    padding: .3em .5em;
}
.tabtarifas tr:first-child{
    background: #0083c0;
    color: #fff;
}
/** /Tarifas **/
/*** Galeria **/
.fotosgal {
    display: none;

}

ul.galeria {
    clear: both;
    display: block;
    text-align: justify;
margin: 0;
}
ul.galeria li {
    float: left;
    margin: 1em .5%;
    display: block;
    text-align: center;
}
.der{
    float: right;
    margin: 0 0 10px 10px;
}
/*** Proyectos Realizados ***/

.sop-proyectos{
    width: 100%;
    text-align: justify;
}
.proy-real{
    display: inline-block;
    max-width: 500px;
    margin: 0 auto 30px;
}
.proy-real h2{
    font-size: 16px;
    font-weight: bold;
    margin: 5px 0;
}
.proy-real span{
    display: block;
}

/*** Formulario ***/
#contacto {
float: left;
margin: 1em 0;
width: 700px;
}
.formcontacto2{
    width: 620px!important;
}
#contacto h2 {
color: #fff;
}
#contacto fieldset {
padding: 0;
width: 100%;
text-align: center;
}
#contacto label {
float: left;
margin: .5em 0 0;
width: 100px;
text-align: left;
font-weight: normal;
color: #3F3F3F;
}
#contacto .label2{
    width: 120px;
    margin: .5em 0 0 1em;
}
#contacto input {
float: left;
margin: 0 1em 0 0;
}
#contacto input, #contacto textarea {
padding: 8px 5px;
width: 70%;
background: #F2F2F2;
border: 1px solid #DBDBDB;
color: #6C6C6C;
}
input.inputchico{
   width: 80px!important;
}
input[type="radio"] {
    width: 20px!important;
    float: none;
    margin: 12px 0 0 !important;
}
#contacto textarea {
height: 100px;
float: left;
}
#contacto input#send {
background: #de0024;
margin: 0 auto;
color: #fff;
padding: .5em;
width: 150px;
float: none;
}
#contacto input#send:hover {
background: #565656;
}
#contacto ul {
margin: 0;
}
#contacto li {
margin: 0 0 1em 0;
display: block;
float: left;
width: 100%;
}
#enviado {
display: block;
float: left;
width: 80%;
margin: 2em auto;
color: #000;
}
.output_message, .output_message2 {/* clear: both; *//* padding: 1em 0 0; */width: 100%;text-align: center;font-weight: bold;font-size: 1.2em;color: #727272;display: block;float: left;}

/**** Formulario ***/
#pull {
display: none;
}
#datos-footer {
    max-width: 1000px;
    margin: 0 auto;padding: 2em 0 0;
    text-align: justify;
    /* color: #fff; */
}

.widget{
    vertical-align: top;
    display: inline-block;
}

h4 {
margin: .5em 0;
}
ul#rrss {float: none;list-style: none;width: 170px;margin: 1em auto 3em;}
ul#rrss span{
display: block;
clear: both;
text-align: center;
font-weight: bold;
}
ul#rrss li a {float: left;margin: 0 .5em;background: #de0024;width: 25px;height: 25px;text-align: center;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
font-size: 14px;
color: #fff;
line-height: 1.8;
padding: 0;
}
ul#rrss li a:hover{
    background: #565656;
}
ul#rrss li img:hover {
opacity: .75;
}

/* PopUp */

#capabnr {
  position:absolute;
  display: block;
  z-index:9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 150%;
  visibility: visible;
  background: rgba(0,0,0,0.85);
}
.cont-bnr {
       margin: 10% auto;
    position: relative;
    max-width: 558px;
    padding: 2px;
    background: #fff;
}
a.btn-cerrar {
    background: #000;
    color: #fff;
    padding: 3px 4px;
    position: absolute;
    top: -10px;
    right: -10px;
    border: 2px solid #fff;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
}
#datos{
    float: left;
}
span.dato {
    float: left;
    display: block;
    clear: left;
    font-weight: bold;
    margin: 0 0 .5em 0;
    width: 110px;
}
span.info {
    float: left;
    text-align: left;
    margin: 0 0 .5em 1em;
    line-height: 1.3em;
}
#mapa{
    width: 100%;
    display: block;
    clear: both;
    height: 500px;
    border: none;
}
/**** Pie Pagina ***/  
#piedepagina {
    width: 100%;
    text-align: center;
    display: block;
    float: left;
    padding: 1em 0;
    background: #565656;
    color: #a0a0a0;
    font-size: .9em;
}
#piedepagina a{
  color: #a0a0a0;
}
#piedepagina a:hover{
  color: #F9F9F9;
}
.ui-accordion .ui-accordion-header {
    margin: 10px 0 0 0!important;
}
.ui-accordion .ui-accordion-content {
    padding: 1em!important;
}
.ui-widget-content {
    color: inherit;
    font-size: 16px;
    font-family: inherit;
}
/*** /Pie Página ****/
@media (max-width: 1200px) {
nav {
    clear: both;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1em;
    display: block;
    position: relative;
    z-index: 9999;
    overflow: none!important;
    height: auto;
}

.logo {
    float: none;
    z-index: 999;
    position: relative;
    border-bottom: none;
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 270px;
}
.menu {
       position: relative;
       bottom: 0;
       display: block;
       float: none;
       margin: 0 auto;
       width: 890px;
}
#fono-cont {
    margin: 0;
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    color: #0083c0;
    position: absolute;
    top: 10px;
    right: 20px;
}

#sopareas{
    padding: 1em;
}
}
@media (max-width: 800px) {
header {
float: left;
position: relative;
width: 100%;
height: auto;
background-image: none;
background-repeat: repeat-x;
}
#wrap {
margin: 0;
float: left;
padding: .5em;
}
#wrapareas {
    width: 100%;
    padding: 1em 0;
    box-sizing: border-box;
}

#enviado {
width: 100%;
}
#contacto{
    float: left;
}
#sop-cont-res-indx {
    width: 100%;
    float: none;
}
#sop-tripadv {
    width: 250px;
    float: none;
    margin: 0 auto;
}
img {
max-width: 100%;
}
nav {
height: auto;
}
.logo {
float: none;
margin: 1em auto;
z-index: 0;
clear: both;
position: relative;
display: block;
width: 250px;
}
#fono-cont {
    top: 15px;
    left: 20px;
}
.menu{
    position: relative;
}
.slideout-menu h3{

}
.menuresp{
    display: block;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
} 
a.slideout-menu-toggle img {
    margin: 0 .5em 0 0;
    vertical-align: middle;
}
a.slideout-menu-toggle {
    padding: 0;
    overflow: hidden;
    display: block;
    color: #000;
}
.slideout-menu {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #333;
    z-index: 100;
  }
  .slideout-menu h3 {
    position: relative;
    padding: 0 10px 10px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 400;
    border-bottom: 4px solid #222;
    margin: 10px 0;
  }
  .slideout-menu .slideout-menu-toggle {
    position: absolute;
    top: -7px;
    right: 10px;
    display: inline-block;
    padding: 6px 9px 5px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    background: #222;
    color: #999;
    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 #151515;
    border-bottom: 1px solid #454545;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .slideout-menu ul li {
    border-top: 1px solid #454545;
    border-bottom: 1px solid #151515;
        margin: 0;
        width: 100%;
        float: none;
  }
  .slideout-menu ul li a {
    position: relative;
    display: block;
    padding: 10px;
    color: #999;
    text-decoration: none;
  }
  .menu li a:hover, .menu li:hover > a, .menu li a.active {
    color: #fff;
    border-bottom: 1px solid #797c80;
    padding: 10px;
}


.menuresp, .slideout-menu h3{
display: block;
} 
.areadest {margin: 0 auto 2em;float: none;display: block;}

#ecofriendly{
        margin: 0 auto 2em;
}
#ecofriendly h2{
    width: auto;
}
#ecofriendly ul{
    float: none;
    margin: 1em;
    overflow: hidden;
    clear: both;
}
#ecofriendly ul li {
    float: left;
    margin: 0 .5em;
}
}

@media (max-width: 768px) {
.contenido{
    width: auto;
}
h1 {
    font-size: 1.5em;
}
#fono-cont {
    zoom: .8;
}
#sopareas {
    text-align: center;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}
.areadest {
    margin: 2em auto;
    max-width: 350px;
}
ul#datos-cont {
    font-size: 1em;
    margin: 1em auto 2em;
    float: none;
    width: 350px;
}
ul#rrss {
    float: none;
    list-style: none;
    width: 170px;
    margin: 1em auto 3em;
    overflow: hidden;
}
table {
    width: 350px;
    font-size: .85em;
}
#contacto{
        margin: 1em 0;
    width: 100%;
}
#cita {
width: 100%;
    margin: 0px auto;
    padding: 10px 0;
    font-size: 18px;
    position: relative;
    top: auto;
    left: auto;
}
.formcontacto2 {
    width: 90%!important;
}
#contacto input, #contacto textarea {
    width: 90%;
}
.der {
    float: none;
    margin: 1em auto;
}
ul#galeria li {
    width: 45%;
    margin: .5em 2%;
}
.prod-dest {
    display: block;
    width: 85%;
    height: auto;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.30);
    margin: 0 auto 20px;
    padding: 1em;
    box-sizing: border-box;
    float: none;
    /* overflow: hidden; */
    text-align: center;
}
.sop-txt-prod-dest {
    float: none;
    padding: 20px 10px 10px;
    display: block;
    clear: both;
    width: 90%;
    z-index: 0;
    /* height: 500px; */
}
.prod-dest img {
    float: none;
    margin: 0 auto;
    z-index: 0;
}
#wrap-bienvenida{
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
    margin: 0px auto;;
}
#sop-bienvenida span{
    width: 100%;
    display: block;
    padding: 10px;
}
#wrap-msg span {
    font-size: 20px;
    padding: 30px;
}
.widget {
    width: 40%;
    padding: 0 10px;
}
.slider-wrapper.theme-default {
    margin: 0;
    }
}
@media (max-width: 400px){
table {
    width: 100%;
    font-size: .85em;
}
ul#datos-cont {
    font-size: .85em;
    width: 100%;
}
.areadest {
    width: 100%;
    height: auto;
}

#datos-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em 1em 0;
    color: #727272;
    font-size: 14px;
    line-height: 1.4em;
}
#datos {
    float: left;
    font-size: 14px;
}
span.dato {
    float: left;
    display: block;
    clear: left;
    font-weight: bold;
    margin: 0 0 .5em 0;
    width: 90px;
}
.widget {
    width: 100%;
    padding: 0 10px;
}
}