/* ===== Primary Styles ========================================================
   Author: Monica Reyes
   ========================================================================== */

/* Common Styles from Boiler Plate */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Main Elements */
body { background: #e5e3e3; margin: 0; padding: 0; font-family: Verdana; font-size: 11px; /*background-image: url("../img/back.png");*/ background-repeat: repeat; color:#323133; }
.content { max-width: 986px; min-width: 670px; margin: 0 auto; }
a { vertical-align: middle; text-decoration: none; }
a:hover { color:#323133;}
h1 {margin: 0;}
h2  {color: #606060;}
span {color: green;}

.top { float: left; background-color: #FFFFFF; padding: 0 2% 0 2%; width: 96%;}
.under, .php { float: left; background-color: #FFFFFF; width: 100%;}
/*button, input.boton { color:#fff; background: #2E3192; border: 1px solid #66C8AF; border-radius: 2px; font-weight: bold;}*/
.left { float: left;}
.right { float: right;}

/*Top*/
.logo, .php { padding: 1% 2% 1% 2%; width: 96%;}
/*.logo { background-image: url("../img/panoramica.jpg");}*/
#logo { width: 10%;}
#titulo { margin: 0 auto; width: 70%; color: #00adef; font-family: Helvetica; text-align: center; text-height: 100%;}
#titulo h1 { font-size: 3em; margin: 30px auto 0 auto; font-weight: lighter; text-align: center;}
#titulo p { margin: 0 auto; text-align: center; color:#323133; font-size: 1.3em; line-height: 150%; }
#box { width: 30px; margin: 5px 5px 0 0; padding: 0;  list-style-type: none; border: none;}
#box ul li { padding: 5px auto; }
.menu { margin: 0; background-color: #333333; width: 100%;}
.menu a { color: #FFFFFF; }
.menu ul { list-style-type: none; margin: 0; padding: 0; font-weight: bold;}
.menu ul li { float: left; width: 18%; min-width: 50px; padding: 1%; margin: 0; border: 0; text-align: center;}


/*index*/
/*Pictures slices index*/
div#pictureScroller { margin: 0 25px 0 0; position: relative; width: 600px; overflow: hidden; height: 380px; border: 2px solid #323133; }
div#pictureItems { width: 20000px; position: absolute; }
div.pictureItem { width: 600px; position: rerlative; float: right; }
div.pictureItem img {width:600px;  }

/*clima*/
#clima { background-color: #f0f0f0; width:100%; }
#clima1 { background-color: #f0f0f0; width:90%; margin: 0 auto;}
#climabox { margin: 5%; width: 90%;}
#climatitulo { font-size: 1.2em; font-weight: bolder; padding: 10px 0 10px 0; background-color: #00adef; width: 100%; color: white; text-align: center;}
#weather {  font: 1em 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: #e6e6ff; width: 302px;   margin: 0px auto;  text-align: center;  text-transform: uppercase; }
#weather h2 {  margin: 0 0 8px;  color: #606060;  font-size: 2.7em;   font-weight: 300;  text-align: center;  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);}
#weather ul { margin: 0; padding: 0 0 10px 0;}
#weather li { background: #fff; background: rgba(255,255,255,0.90); padding: 7px; display: inline-block; border-radius: 5px;}
#weather .currently { margin: 0 10px;}

/*cuerpo index*/
#sideindex { width: 315px;}
#bienvenida { margin: 10px 0 0 0; background-color: #f0f0f0; padding: 10px 20px;}
#bienvenida h1 { text-align: left; font-size: 1.5em;}
#bienvenida h2 { font-size: 1.4em;}
#bienvenida p { color: #606060; font-size: 1.4em; text-align: justify;}

/*servicios index*/
#serviciosindex { width: 40%; padding: 10px 4% 2% 5%;}
#serviciosindex ul { list-style-type: none; margin: 0; padding: 0; font-size: 1.1em;}
#serviciosindex ul li { float: left; width: 100%; min-width: 80px; padding: 0; margin: 10px 0 0 0; border: 0; text-align: left; border-bottom: dotted 1px #00adef;}
#serviciosindex a { color: #606060;}

/*Informaciónindex*/
#infoindex { width: 100%; padding: 30px 2% 2% 0;}
#infoindex h2 { text-align: center;}
iframe { width: 100%; min-height: 250px;}

.lower { width: 100%; padding: 0; margin: 0;}

/*Publicidad*/
#publicidad { width: 40%; padding: 10px 5% 2% 3%;}
#publicidad h2 { text-align: center;}

#seguridadamb, #seguridadmar{ margin: 2%; padding: 2%; width: 92%;}
#seguridadamb h3 {color: #00adef; text-align: center; margin:10px 0 5px 0; padding: 0;}
#seguridadamb div {background-image: url("../img/backcontent.png"); width: 90%; margin: auto;} 
#seguridadamb p { margin: 0; padding: 5px 10px; text-align: center; font-weight: bold; display: inline-block; } 
#seguridadamb img{ margin: 2px 0 0 9px;  display: inline;}

#seguridadmar h3{ color: #133783; text-align: center;}
#seguridadmar ul { background-image: url("../img/backcontent.png"); width: 80%; margin: auto;}
#seguridadmar ul li { margin: 0; padding: 5px 15px; font-weight: bold; list-style-type: decimal;}
#seguridadmar a { color: #606060;} 
.reef{ margin: auto 5%;}
.reeftxt{ margin: 10% 0;}

/*Under*/
.under { width: 96%; padding: 5px 2%; margin: 0; min-height: 20px; background-color: #00adef; color: white; font-weight: bolder;}
.under p { margin: 0; padding: 0;}
#centerunder { text-align: center; width: 60%; margin: 0; font-size: 0.9em; padding-left: 20%;}
#sideunder { text-align: right; width: 20%; margin: 10px 0;}

/*somos*/
.php { text-align: justify; min-height: 400px;}
#imgfoto { width: 25%; max-height: 420px; margin: 0 20px 10px 0;}
#fundador { width: 100%;}
#fundador h2 { margin-top: 0;}
#fundador p { margin-top: 0; font-size: 1.2em;}
#fundador a { width: 35%; font-weight: bold; color: black; }
p.map { width: 60%; padding-right: 5%;}
#map img { width: 100%; max-height:350px; border:1px solid #606060; scrolling:no; marginheight:0; marginwidth:0; }
#combo { margin: 20px 0 0 0; width: 100%;}
#combo img {border: 1px solid #606060;}
.row { width: 100%;}
.persona { width: 32%; }
.mid { margin: 0 2% 0 2%;}
.pro { width: 100%; margin-bottom: 2%;}
.gerente { margin: 15% 0 10% 2%; font-weight: bold; font-size: 1.1em;}

/*servicio*/
.parr { margin-right: 2%; width: 60%;}
.box  { background-color: #f0f0f0; width: 38%; font-size: 0.75em;}
#servicio { margin: 15px 5% 0 5%; width: 90%; display: inline-block;}
.row, .ventalink { margin: 0; padding: 0; font-weight: bold; width: 100%;}
.row a { margin-left: 1%; margin-right: 1%; width: 29%;}
#servicio a, .ventalink a { max-height: 20px; color: #606060; background-color: #e6e6ff; float: left;  border: 0; text-align: center; padding: 10px 1% 10px 1%; border-bottom-left-radius: 10% 50%; border-bottom-right-radius: 10% 50%; border-top-left-radius: 10% 50%; border-top-right-radius: 10% 50%}
#servicio img { margin: 0 1%; width: 31%;}
.col { margin: 0 1%; width: 31%;}
.col a { width: 98%; margin-top: 22%;}
.low { margin-bottom: 22%;}

/*Ventas*/
#imgventa { width: 18%; margin-right: 2%;}
#venta { width: 80%; font-size: 1.1em;}
.vent { color: black; text-height: 150%; font-weight: bold; }
.ventalink { margin-top: 5%; } 
.ventalink a { margin-left: 1%; margin-right: 1%; width: 29%; padding: 20px 5px;}
.ventalink h2 { text-align: center; font-size: 1.2em;}

/*div transparente*/
/*Arriendo*/
.transparente { position: absolute; top: 12px; left: auto; min-width: 670px; max-width: 950px; background: rgba(250,250,250,0.7); }
#float {position: relative; width: 60%; margin: 19% 0 10% 15%; padding: 5px 3% 3% 3%; background: #F0F0F0 ; background-repeat: no-repeat;}
.header{ width: 100%; margin: 0;}
.imgfloat, .bodyfloat { display: inline-block;}
.imgfloat{ width: 30%; margin: 0 0 10px 10px;}
.imgfl{ width: 50%; margin: 0 0 10px 10px;}
.imgft{ width: 20%; margin: 0 0 10px 10px;}
.bodyfloat{ width: 90%; margin: 0 0;}
.bodyfloat p{ margin: 0 0;}
.next{ width: 5%; padding-bottom: 20%;}

.cont { width: 100%; margin: 2% 0 2% 0;}

 

/*div.but
  min-width: 80px; { width: 140px; text-align: enter; margin: 0; padding-left: 5px;  }
div.but button{ font-size: 1em; margin: 0 5px 0 5px; padding: 2px 5px 2px 5px; }
div.inf { margin-top: 515px;}*/


/*Contacto*/
/*div.contacto { float: left; }
div.contacto span { color: #323133;}
div.button { margin-top: 10px; }
input { margin: 5px 0 5px 0; width: 200px; }
input.boton {width: 70px;}
textarea { margin: 5px 0 5px 0; height:120px; width:270px;}
div.map { position: relative; width:300px; height: 380px; top:-380px; left: 350px;}
input, textarea { border-radius: 5px; border: 1px solid #e5e3e3;}
div.envio, div#envio_error {width: 200px; height: 400px; }
a.envio { margin-top: 10px;}*/

/* Weather*/

.weatherwidget  { width:254px !important; }