﻿/*
	Ckled Systems
	Desarrollador: Jaaziel Mizraim Pulido Rgz.
	© 2013 ckled.net
	For any questions please visit www.ckled.net
	or email us at jaaziel.mizraim@ckled.net

*/ 

@charset "utf-8";
/* ============================= general ================================ */
body { 
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
color: #9b9b9b;
z-index:1;
width: 100%; height: 100%; margin: 0;  }
.glob { width: 100%; height: 100%; overflow: hidden; position: absolute; }
.main { margin: 0px auto 0 auto; width: 960px; z-index: 2; height: 100%; }
.page_spinner { position: fixed; background: #5CBB88; z-index: 99; width: 100%; height: 100%; top: 0; left: 0; }
.page_spinner > span { position: absolute; left: 50%; top: 50%; }
.spinner_bg { position: fixed; width: 0px; height: 0px; z-index: 10000; left: 50%; top: 50%; display: inline-block; }
#cuerpo{ background:#FFF}
article{ padding-bottom:170px;}
.logo { position:relative;}
/* ============================= menú ================================ */
nav{
	font-family: 'Raleway', sans-serif;
	height:157px;
	padding-top:40px;
	font-weight:400;
}
#menu{  position:absolute; display:block; right:0; top:42px;}
#menu > li{ position: relative; color: white; text-align: center; display: inline-block; float: left; width:120px; padding-left:10px;}
#menu > li > a{ display:block; padding:19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border: transparent solid 1px;}
#menu > li > #active{  border:#FFF solid 1px;}
#menu > li > a:hover{ border:#FFF solid 1px; text-decoration:none; padding: 19px}
.sub-menu{ border:#FFF solid 1px; text-decoration:none; padding: 15px 5px 15px 5px; margin-top:10px; }
.sub-menu a{ font-size:12px; line-height: 20px;}
/* ============================= cycle ================================ */
.item{ position:relative; display:block; width:960px; height:206px; padding-bottom:40px;}
/* ============================= links ================================ */
#boton1{ font-family: 'Raleway', sans-serif; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display:block; width:80px; padding:8px; background:#898888; font-size:17px; text-align:center; margin:0px auto 0 auto; font-weight:700}
#boton1:hover{ text-decoration:none; background:#5CBB88;}
#boton2{ font-family: 'Raleway', sans-serif; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display:block; padding:8px; background:#5CBB88; font-size:17px; text-align:center; font-weight:700; float:right; margin-top:-67px;}
#boton2:hover{ text-decoration:none; background:#898888;}
/* ============================= texto ================================ */
.frase{ font-family: 'Lily Script One', cursive; font-size:40px; color:#FFFFFF; font-weight:normaal; padding-top:20px; line-height:50px; }
.texto{ font-family: 'Raleway', sans-serif; text-align:center; padding:20px; width:450px; margin:0px auto 0 auto; color:#FFFFFF; font-size:17px; font-weight:400; text-shadow: 1px 1px 1px #ccc;}
.p { font-size: 14px; color: #585251; line-height: 22px; padding-bottom: 22px; }
ul, ol, dl { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0 }
a img { border: none }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px; }
a { color: #fff; text-decoration: none; outline: none; font-size: 14px; }
a:hover { text-decoration: underline }
h1 {  font-family: 'Raleway', sans-serif; font-size:30px; font-weight:100; line-height:50px; ma }
h1 { color:#000}
h2 { font-family: 'Abel', sans-serif; color: #605650; font-size: 30px; line-height: 24px; width: 100%; text-transform: uppercase; font-weight: normal; padding-bottom: 28px; letter-spacing: -1px; }
h2 a { font-family: 'Abel', sans-serif; color: #605650; font-size: 30px; line-height: 40px; text-transform: uppercase; font-weight: normal; padding-bottom: 28px; letter-spacing: -1px; }
h2 a:hover { text-decoration: underline }
h3 { font-family: 'Abel', sans-serif; color: #97908d; font-size: 17px; line-height: 20px; width: 100%; text-transform: uppercase; font-weight: normal; padding-bottom: 6px; }
.title-section {
	padding:100px 0 0;
}
.title{ color:#000}
#verde{ color:#5dbc89}
.imagen{ float:left}
.padding-right_bottom{ padding-right:20px; padding-bottom:20px;}
.title-header {
text-transform: lowercase;
font-size: 32px;
line-height: 1.2em;
margin: 0 0 25px 0;
}
.title-header2 {
text-transform: lowercase;
font-size: 32px;
line-height: 1.2em;
margin: 20px 0 50px 0;
}
.title-header {
	overflow:hidden;
	margin-bottom:1em;
	word-wrap:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-o-hyphens:auto;
	hyphens:auto;
}
.title-desc {
	display:block;
	color:#999;
	font-size:11px;
}
.breadcrumb {
padding: 8px 15px;
margin: 0 0 24px;
list-style: none;
background-color: #f5f5f5;
}
.breadcrumb a{ color:#5dbc89}
.breadcrumb li { display:inline; }
.number{ font-family: 'Raleway', sans-serif;  font-size:50px; color:#fff; font-weight:100; width:50px; height:50px; background-color:#5dbc89; line-height:40px; text-align:center; float:left}
.text-list1{ overflow:hidden;}
.margin-right20{ margin-right:20px}
.list1{ list-style:none;}
.list1 > li{ margin-bottom:25px;}
.list2 > li{ padding-left:30px; background: url(../images/list2-arrow.png) no-repeat 0px 6px;  line-height:30px;}
.list2 > li > a { color: #5dbc89; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.list2 > #abc { background:#f5f5f5; color:#5dbc89; padding-left:13px; font-family: 'Raleway', sans-serif;}

.list5 > li{ padding-left:30px; background: url(../images/list5-arrow.png) no-repeat 0px 6px;  line-height:30px;}
.list5 > li > a { color: #5dbc89; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}

p > a {color: #5dbc89; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.video{ margin-bottom:40px;}
.download{ float: right; margin-top:10px;}
.pdf{ float:right; margin-top:10px; margin-left:10px;}
.list3 { float:left}
.list4 a{ font-size:10px; color: #9b9b9b; text-transform:uppercase;}
.list4 a:hover{ text-decoration:underline;}
.producto{ display:block; margin-bottom:40px;}
.explicacion{
	position: relative;
	float: left;
	width: 689px;
}
.tabla1 td:last-child { border-right:none;} 
.tabla1 td { padding:10px; border-bottom:#DFDFDF solid 1px; border-right:#DFDFDF solid 1px; width:240px; text-align:center}
#title-table{ background-color:#f5f5f5; font-weight:100; text-transform:uppercase; padding:10px; color:#5dbc89;}
#porciento{ font-family: 'Raleway', sans-serif; position:absolute; top:0; left:0; color:#FFFFFF; font-size:18px; font-weight:100; margin-top:20px; margin-left:20px;}
#fondo-porciento{ width:100%; height:100%; background: url(../images/bg_porc.png) repeat; position:absolute; top:0px; right:0px; z-index:2}
/* ============================= galería de fondo =============================== */
html { _background: url(/images/trans.gif) no-repeat fixed }
.bgstretcher-area { text-align: left; width: 100%; height: 100%; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI { position: absolute; top: 0; left: 0; }
.bgstretcher UL, .bgstretcher UL LI { margin: 0; padding: 0; list-style: none; }
.bgstretcher { background: black; overflow: hidden; width: 100%; position: fixed; z-index: 1; _position: absolute; /*IE6 doesn't support fixed positioning*/ top: 0; left: 0; }
/*.prevBtn { width: 100px; height: 100px; display: inline-block; position: absolute; left: 0; background: url(../images/bg5.png); top: 35%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); cursor: pointer; overflow: hidden; z-index: 10; text-align: center; }
.nextBtn { width: 100px; height: 100px; display: inline-block; position: absolute; right: 0; background: url(../images/bg5.png); top: 35%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); cursor: pointer; overflow: hidden; z-index: 10; text-align: center; }*/
.botones{ display:block; width:68px; margin:0px auto 0 auto; position:relative; font-weight:100; padding-top:20px}
.prevBtn { width: 25px; height: 35px; display: inline-block; cursor: pointer; overflow: hidden; z-index: 10; text-align: center; border:#FFF solid 1px;}
.nextBtn { width: 25px; height: 35px; display: inline-block; cursor: pointer; overflow: hidden; z-index: 10; text-align: center; border:#FFF solid 1px; }
.bgstretcher-page { width: 100%; height: 100%; }
.arrow { font-family: 'Raleway', sans-serif; font-weight:100; line-height: 35px; color: #FFF; font-size:30px; }
/* ============================= footer ====================== */
footer {font-family: 'Raleway', sans-serif;}
#social_links { display:block; width:109px; margin:0px auto 0 auto; }
#social_links li, #social_links2 li{ list-style:none; float:left; width:33px; height:33px;}
#social_links2 { display:block; width:109px; padding-top:80px;}
.links-left{ position:absolute; left:0}
.links-right{ position:absolute; right:0; padding-top:132px;}
.call{ float:left; margin-right:20px;}
.telefono{ color:#5dbc89; font-size:45px; font-weight:100; float:left; line-height:78px}
#facebook{ margin-right:5px; background:url(../images/facebook_b.png);  background-size: 33px 33px;}
#twitter{ margin-right:5px; background:url(../images/twitter_b.png); background-size: 33px 33px;}
#google{ margin-right:0px; background:url(../images/google_b.png); background-size: 33px 33px;}
#facebook2{ margin-right:5px; background:url(../images/facebook2.png);  background-size: 33px 33px;}
#twitter2{ margin-right:5px; background:url(../images/twitter2.png); background-size: 33px 33px;}
#google2{ margin-right:0px; background:url(../images/google2.png); background-size: 33px 33px;}
#facebook img, #twitter img, #google img{ opacity:0}
#facebook2 img, #twitter2 img, #google2 img{ opacity:0}
.derechos{ font-size:10px; color:#FFFFFF; margin:0px auto 0 auto; display:block; margin: 10px; }
.derechos a {font-size:10px; color:#FFFFFF;}
.derechos2{ font-size:10px; color:#5dbc89; display:block; margin-top:10px; }
.derechos2 a {font-size:10px; color:#5dbc89;}
#cuerpo2{ background: #f5f5f5; height:420px; padding-top:60px;}
#hr{ display:block; border-bottom: #DFDFDF solid 1px; line-height:1px; margin-top:-20px; margin-bottom:40px;}
#phone{ font-size:30px ; font-weight:100; }
/* ============================= columnas =============================== */
.col_1 { float: left; width: 600px; }
.col_2 { width: 330px; position: relative; float: left; }
.col_3 { width: 550px; position: relative; float: left; }
.col_4 { width: 380px; position: relative; float: left; }
.col_5 { width: 705px; position: relative; float: left; }
.col_6 { width: 460px; position: relative; float: left; }
.col_7 { width: 470px; position: relative; float: left; font-size:13px }
.cols_2{ width: 180px; position: relative; float: left;}
.cols_4 { width: 200px; position: relative; float: left; }
.cols_3_footer { width: 290px; position: relative; float: left; }
.cols_4_libros { width: 185px; position: relative; float: left; background-color:#f5f5f5; padding:20px; margin-bottom:20px}
.libros { width: 225px; position: relative; float: left; }
.marging_left{ margin-left:30px}
.marging_left20{ margin-left:20px}
.marging_left40{ margin-left:40px;}
.marging_right40{ margin-right:40px;}
.marging_right30{ margin-right:30px;}
.margin_top20{ margin-top:20px;}
.hidden{ overflow:hidden}
/* ============================= google map =============================== */
iframe { border: 1px solid #797471; margin-bottom: 15px; }
/* ============================= Formulario mensaje =============================== */
/* Form defaults */
input, select, textarea { font-family: Arial, sans-serif; font-size: 12px; vertical-align: middle; font-weight: normal; border: none; outline: none; }
input[type="text"], textarea { background: #f5f5f5; padding: 9px 10px; }
input[type="submit"], input[type="reset"] { font-size: 14px; font-weight: bold; display: inline-block; font-style: normal; padding: 10px 15px; color: #FFF; text-decoration: none; line-height: 1.2; font-weight: normal; margin-top: 0px; background: #5dbc89; border: none; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; }
input[type="submit"]:hover, input[type="reset"]:hover { cursor: pointer; text-decoration: none; background: #898888;}
/* Contact form */
.wpcf7-form p.field { margin-bottom: 10px; overflow: hidden; vertical-align: top; width: 460px; position: relative; }
.wpcf7-form p.field label { float: left; width: 79px; padding-top: 6px; }
.wpcf7-form p.field input { float: left; width: 358px; color: #585251; font-size: 14px; }
.wpcf7-form p.field small { color:#5dbc89; }
.wpcf7-form textarea { float: left; width: 369px; min-width: 369px; max-width: 369px; height: 145px; min-height: 145px; max-height: 145px; font-size: 1em; overflow: auto; color: #585251; font-size: 14px; margin-bottom: 0px; padding-bottom: 0; padding-right: 0; }
.wpcf7-form .submit-wrap { padding: 0 0 0 79px; margin: 0; }
span.wpcf7-form-control-wrap { display: block }
.wpcf7-not-valid-tip { width: 289px !important; position: absolute; left: 79px !important; top: 0 !important; height: 19px; padding: 6px 0 7px 10px !important; background: #f3b7b7 !important; color: red !important; border: 1px solid red !important; }
.error{ line-height: 34px; float:right; color:red}
.succes{ line-height:34px; float:right; color: #5dbc89;}
#label-datos {
	width:75px;
	float:left;
}
.imagen2{ margin-right:10px; overflow:hidden; float:left; padding-top:6px;}
