/* CSS Document */

html, body{
	margin:0px;
	height:100%;
	background-color: #191919;
}

img{
	border: 0;
	max-width: 100%
}

a{
	text-decoration: none;
	color: #9c1b31;
}

a:hover{
	text-decoration: none;
}

a.botones {
	font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    padding-top: 7px;
    padding-right: 30px;
    padding-bottom: 7px;
    padding-left: 30px;
    display: inline-block;
}

.boton-gris { color: #333333; border: 1px solid #666666;}
a.boton-gris:hover{	color: #FFFFFF;	background: #666666;}

.boton-blanco { color: #ffffff; border: 1px solid #ffffff;}
a.boton-blanco:hover{ color: #bd3333; background: #ffffff;}

.boton-negro { color: #333333; border: 1px solid #333333;}
a.boton-negro:hover{ color: #ffffff; background: #333333;}

.boton-bgblanco { color: #333333; background-color: #ffffff;}
a.boton-bgblanco:hover{ color: #ffffff; background: #9c1b31;}

.boton-bgcolor { color: #ffffff; background-color: #9c1b31;}
a.boton-bgcolor:hover{ color: #ffffff; background: #333333;}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	color: #666666;
	margin: 0px;
	padding: 0;
}

h1{	font-size: 48px; line-height: 42px;}
h2{	font-size: 36px; line-height: 36px;}
h3{	font-size: 24px; line-height: 26px;}
h4{	font-size: 20px;}
h5{	font-size: 16px;}
h6{	font-size: 14px;}

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666666;
	font-size: 13px;
	margin: 0px;
	padding: 0;
}

.line-big {
	line-height: 23px;
}

.bullet {
	background-image: url(../images/bullet.png);
	background-repeat: no-repeat;
	background-position: 0px 9px;
	padding-left: 20px;	
}


.light { font-weight: 300;}
.semibold { font-weight: 600;}
.bold { font-weight: 700;}
.ultrabold { font-weight: 900;}

.white { color: #ffffff;}
.dark { color: #333333;}
.black { color: #000000;}
.color { color: #9c1b31;}

.small { font-size: 11px;}
.large { font-size: 15px;}
.xlarge { font-size: 18px;}

.bg-grey{background-color: #666666;}
.bg-light{background-color: #cccccc;}


/* ==================================================
  GENERAL - CONTENT
================================================== */

.content{
	max-width: 1580px;
	position: relative;
	margin:	auto;
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
}

.content-s{
	max-width: 1370px;
	position: relative;
	margin:	auto;
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
}


.separador{
	width: 70px;
	height: 1px;
	margin:	20px 0px 20px 0px;
}

.separador-gris{ background-color: #CCCCCC;}
.separador-blanco{ background-color: #ffffff;}
.separador-oscuro{	background-color: #666666;}


/* ==================================================
  MAIN
================================================== */

#main {
    width: 100%;
    margin: auto;
    overflow: hidden;
	padding-top: 60px;
    background-color: #ffffff;
}


/* ==================================================
   COLUMNAS
================================================== */

.columna-100{
	width: 100%;
	float: left;
}

.columna-big{
	width: 75%;
	float: left;
}

.columna-mid{
	width: 50%;
	float: left;
}

.columna-33{
	width: 33.33%;
	float: left;
}

.columna-small{
	width: 25%;
	float: left;
}


.columna-content{
	padding: 10px 20px;
}

.text-content{
	max-width: 560px;
    margin: auto;
}

.vertical-align{
    margin-top: 50px;
	margin-bottom: 50px;
}

.top40{
    margin-top: 40px;
}

.bot40{
	margin-bottom: 40px;
}


/* ==================================================
   SLIDE DE BANNERS - INFO
================================================== */

.banner-content{
	position: relative;
}

.banner-info{
	position: absolute;
    background-color: rgba(255,255,255, 0.8);
    padding: 40px 40px;
}

.banner-info a.botones{
	margin-top: 20px;
}

.banner-left-bottom{ left: 3%; top: 25%;}
.banner-left-top{ left: 3%; top: 25%;}
.banner-right-top{ right: 3%; top: 25%;}
.banner-right-bottom{ right: 3%; top: 25%;}


.banner-plan{
	position: absolute;
    background-color: rgba(255,255,255, 0.8);
    padding: 40px 40px;
}

.banner-plan-right{ left: 55%; top: 25%;}
.banner-plan-left{ right: 55%; top: 25%;}




/* ==================================================
   INTRO
================================================== */

.intro{
	width: 100%;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
}

.intro .separador{
	margin:	20px 0px 40px 0px;
}

.intro .botones{
	margin-top:	40px;
}

/* ==================================================
   PIC BG
================================================== */

.pic-bg{
	width: 100%;
	overflow: hidden;
}

.pic-bg .separador{
	margin:	20px 0px 40px 0px;
}

.pic-bg .botones{
	margin-top:	40px;
}

/* ==================================================
   INFO TX
================================================== */

.info-tx{
	width: 100%;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
}

/* ==================================================
   FICHA TECNICA
================================================== */

#ficha-tecnica{
	width: 100%;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666666;
	font-size: 13px;
}

#ficha-tecnica .seccion{
	padding: 10px;
}

#ficha-tecnica h4{
	margin-left: 10px;
	margin-bottom: 20px;
}

#ficha-tecnica .separador-seccion{

	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin: 30px 10px 20px 10px;
}


/* ==================================================
   NOTAS
================================================== */

#notas{
	width: 100%;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
}

#notas .content-s {
    display: table;
}

#notas .columna-small {
    float: none;
    display: inline-block;
	vertical-align: top;
}

#notas p{
	margin-top: 10px;
	margin-bottom: 10px;
}

#notas h4{
	margin-top: 20px;
}

#notas h3{
	margin-top: 20px;
}

#notas .botones {
    margin-top: 20px;
}

a.button-vermas {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 9px;
    font-weight: 300;
    text-decoration: none;
    color: #666666;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 1px;
    padding-right: 1px;
    border: 1px solid #666666;
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    margin-top: 4px;
}

a.button-vermas:hover {
    color: #9c1b31;
    border: 1px solid #9c1b31;
}

/* ==================================================
   VENTANA
================================================== */

#ventana{
	max-width: 800px;
	padding: 20px;
	background-color: #ffffff;
}

#ventana h4{
	margin-top: 10px;
}

/* ==================================================
   MAPA
================================================== */

#mapa {
	width: 100%;
    overflow: hidden;
    background-color: #d0d0d0;
    background-image: url(../images/zen-mapa.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

#mapa .col-pic {
   width: 25%;
   float: left;
}

#mapa .col-info {
   width: 75%;
   float: left;
}

#mapa .col-info-content {
    padding: 40px 20px;
	overflow: hidden;
}

#mapa .mapa-columna {
	width: 33.33%;
	float: left;
}

#mapa .mapa-content {
    margin: 10px;
	padding: 10px;
    background-color: rgba(209,209,209, 0.8);
}

#mapa p {
    margin-bottom: 20px;
}

#mapa .mapa-pic {
	margin-bottom: 20px;
	padding: 4px;
	background-color: #FFFFFF;
}


/* ==================================================
   TOP BANNER
================================================== */

#top-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0px;
}

/* ==================================================
   CONFORT BANNER
================================================== */

#confort-banner {
    width: 100%;
    line-height: 0px;
	position: relative;
}


/* ==================================================
   IMAGES Hoover Efect
================================================== */

.view {
   margin: 0px;
   border: 0px
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   width: 100%;
}
.view .mask,.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
   width: 100%;
}

.view a.zoom-icon {
	display: inline-block;
	text-decoration: none;
	margin-top: 0px;
	background-image: url(../images/zoom.png);
	background-repeat: no-repeat;
	background-position: center;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.view a.info-icon {
	display: inline-block;
	text-decoration: none;
	margin-top: 0px;
	background-image: url(../images/info.png);
	background-repeat: no-repeat;
	background-position: center;
	padding: 0px;
	height: 100%;
	width: 100%;
}


/* ==================================================
   TOOL TIPS
================================================== */

/* Al pasar el mouse por encima del div "main" mostramos el div con la clase "a.tooltip".
   Esta clase, tiene que estar dentro de "main" para que pueda funcionar.
*/

#confort-banner:hover a.tooltip {
	opacity: 1;
	-webkit-transition-property: opacity, margin-top, visibility, margin-left;
    -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-property: opacity, margin-top, visibility, margin-left;
    transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
}


#confort-banner a.tooltip {
	background-image: url(../images/tooltip-ico.png);
	background-repeat: no-repeat;
	background-position: center center;
	width: 25px;
    height: 25px;
    position: absolute;
	opacity: 0;
	z-index: 20;
}

#confort-banner a.tooltip:hover {
	background-image: url(../images/tooltip-ico_active.png);
}

a.tooltip > span {
    width: 140px;
	padding: 10px;
    margin-top: 0;
    margin-left: 0px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
 	line-height: normal;
    border-radius: 0px;
	background-color: rgba(255,255,255,0.9);
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
	border: 1px solid #999999;	
    -webkit-transition-property: opacity, margin-top, visibility, margin-left;
    -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-property: opacity, margin-top, visibility, margin-left;
    transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
}

/*a.tooltip > span:hover,*/
a.tooltip:hover > span {
    opacity: 1;
    text-decoration: none;
    visibility: visible;
    overflow: visible;
    display: inline;
	margin-top: 25px;
    margin-left: 0px;
}


a.tooltip .nombre {
    font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}


a.tooltip .editar {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-size: 12px;
    padding: 2px;
    text-align: center;
    background: #666;
    margin-top: 5px;
	cursor: pointer;
}

a.tooltip .editar:hover {
    background: #000;
}


/* ==================================================
  ZEN CONTACT
================================================== */

#zen-contact{
	width: 100%;
	overflow: hidden;
	background-color: #b6b6b6;
	background-image: url(../images/cheryplan/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

#zen-contact .content{
	padding-top: 40px;
    padding-bottom: 40px;
}



/* ==================================================
   VARIOS
================================================== */

#service-table{
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #333333;
    font-size: 13px;
    padding: 20px 0px 25px 0px;
}



/* ==================================================
   CONTACTO
================================================== */

.columna-form{
	width: 50%;
	float: left;
}

.columna-form-left{
	margin-right: 10px;
}

.columna-form-right{
	margin-left: 10px;
}

.form100 {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: #666666;
    background-color: #fff;
    border: 0px solid #999;
    padding: 8px 4px 8px 4px;
    margin-bottom: 10px;
    border-radius: 4px;
	/* Firefox */
	width: -moz-calc(100% - 10px);
	/* WebKit */
	width: -webkit-calc(100% - 10px);
	/* Opera */
	width: -o-calc(100% - 10px);
	/* Standard */
	width: calc(100% - 10px);
}

.form100-fill {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: #666666;
    background-color: #fff;
    border: 1px solid #999;
    padding: 8px 4px 8px 4px;
    margin-bottom: 10px;
    border-radius: 4px;
	/* Firefox */
	width: -moz-calc(100% - 10px);
	/* WebKit */
	width: -webkit-calc(100% - 10px);
	/* Opera */
	width: -o-calc(100% - 10px);
	/* Standard */
	width: calc(100% - 10px);
}

.form-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: #666666;
    padding: 5px 5px 5px 0px;
    width: 100%;
    overflow: hidden;
}

input#enviar {
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    padding-top: 7px;
    padding-right: 20px;
    padding-bottom: 7px;
    padding-left: 20px;
    display: inline-block;
    background: #9c1b31;
    color: #ffffff;
    border: 0px solid #cccccc;
    cursor: pointer;
	margin-top: 10px;
}

input#enviar:hover {
    background: #333333;
    color: #ffffff;
}

/* ==================================================
   RESPUESTA
================================================== */

#respuesta {
    width: 100%;
    overflow: hidden;
    margin-top: 120px;
    margin-bottom: 120px;
}

#respuesta .content-s {
    text-align: center;
}

#respuesta .separador {
    margin: 20px auto 20px auto;
}

#respuesta .botones {
    margin-top: 20px;
}



/* ==================================================
   MEDIA
================================================== */

.banner-mobile { display:none;}

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

.banner-plan-right{ left: 55%; top: 15%;}
.banner-plan-left{ right: 55%; top: 15%;}

#mapa { background-image: url(../images/zen-mapa2.jpg); background-position: center top;}
#mapa .col-pic { width: 100%; height: 400px;}
#mapa .col-info { width: 100%;}

}


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

.banner-info { padding: 20px 20px;}
.banner-info h1{	font-size: 36px; line-height: 36px;}

.banner-left-bottom{ left: 5%; top: 20%;}
.banner-left-top{ left: 5%; top: 20%;}
.banner-right-top{ right: 5%; top: 20%;}
.banner-right-bottom{ right: 5%; top: 20%;}

.banner-plan { padding: 20px 20px;}
.banner-plan h2{ font-size: 30px; line-height: 30px;}
.banner-plan-right{ left: 55%; top: 15%;}
.banner-plan-left{ right: 55%; top: 15%;}

}

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

#mapa .mapa-columna { width: 50%;}

}

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

.columna-small { width: 50%;}

.vertical-align { margin-top: 0px;}
.top40 { margin-top: 0px;}

.banner-plan-right{ left: 55%; top: 12%;}
.banner-plan-left{ right: 55%; top: 12%;}

}

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

.banner-web { display:none;}
.banner-mobile { display:block;}

.banner-left-bottom{ left: 10%; top: initial; bottom: 12%;}
.banner-left-top{ left: 10%; top: 12%; bottom: initial;}
.banner-right-top{ right: 10%; top: 12%; bottom: initial;}
.banner-right-bottom{ right: 10%; top: initial; bottom: 12%;}

.banner-plan { position: relative; background-color: #191919; padding: 10px 20px 30px 20px;}
.banner-plan h2 { font-size: 24px; line-height: 24px;}
.banner-plan h3 { font-size: 20px; line-height: 22px;}
.banner-plan h4 { font-size: 18px; line-height: 20px;}
.banner-plan .black { color: #cccccc;}
.banner-plan-right{ left: 0px; top: 0px;}
.banner-plan-left{ right: 0px; top: 0px;}

}


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

.columna-mid { width: 100%;}
.columna-33 { width: 100%;}

.intro .botones { margin-bottom: 40px;}
#notas .botones { margin-bottom: 40px;}

}

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

#mapa .mapa-columna { width: 100%;}

}

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

.columna-small { width: 100%;}

.columna-content { padding: 10px 0px;}

.columna-form { width: 100%;}
.columna-form-left { margin-right: 0px;}
.columna-form-right { margin-left: 0px;}

#mapa .col-info-content { padding: 40px 10px;}

#ficha-tecnica .seccion{ padding: 10px 0px; }


.banner-info h1{	font-size: 24px; line-height: 24px;}
.banner-info h3{	font-size: 18px; line-height: 20px;}

.banner-left-bottom{ bottom: 8%;}
.banner-left-top{ top: 8%;}
.banner-right-top{ top: 8%;}
.banner-right-bottom{ bottom: 8%;}

h2{	font-size: 30px; line-height: 30px;}
h3{	font-size: 22px; line-height: 24px;}
h4{	font-size: 18px;}


}