/*
    MAQUETADO POR GIOVANNI ORTEGA ARIAS PARA BOOKS & BOOKS
*/

body{
    background-color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    
}

/*HEADER*/

.header {
    background-color: #EAE1C5;
	min-height:125px;
}

.header h1{
    color:#fff;
}

.logo {
    background-color: #DE182A;
    padding: 20px;
}

.LogoT1 {
    color:#fff;
    text-align: center;
	font-family: 'Raleway', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: bold;
}

.LogoT2 {
    color:#fff;
    text-align: left !important;
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 600;
}

.navbar-default {
	background-color: none !important;
	border-color: none !important;
}


.navbar-default .navbar-nav > li > a {
    font-size: 1.3em;
}

hr {
    margin-top: 7px !important; 
    margin-bottom: 7px !important;
}

nav li a{
    padding: 3px 15px !important;
}

.nav > li {
    border-left: solid 1px #6D6F72; 
}

.nav > li:first-child {
    border-left:none; 
}

@media only screen 
and (max-width : 320px) {
.nav > li {
    border-left: none; 
}

.nav > li:first-child {
    border-left:none; 
}
}

/*BREADCRUMBS*/

aside {
	width: 95%;
	margin: 20px auto;
	font-family: 'Raleway', sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	text-transform: uppercase;
}

aside hr{
	border: #B1B3B6 solid 1px;
	}
	
.txt-amarillo_1 {
	color: #FBAF3F;
}

.txt-rojo_1 {
	color: #DE182A;
}

.txt-gris_1 {
	color: #6D6E71;
}

/*CONTROLES*/

.sec_btn_boton a{
	color: #DE182A;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.3em;
	font-family: 'Raleway', sans-serif;
	display:inline-block;
	vertical-align:top;
	margin:10px 0;
	padding:0 30px;
	}      
	
.sec_btn_boton2 a{
	color: #FBAF3F;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.3em;
	font-family: 'Raleway', sans-serif;
	display:inline-block;
	vertical-align:top;
	margin:10px 0;
	}
	
.sec_btn_boton a:hover {
	color:  #FBAF3F;
	text-decoration:none;
	}
	
.sec_btn_boton2 a:hover{
	color:  #DE182A;
	text-decoration:none;
	}		
	
/*FOOTER*/

.footer {
    background-color: #E9E0C4;
	margin-top:20px;

}

.footer p{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
    color: #6D6E71;
    padding: 10px 10px;
    margin: 0;
}


/**************************************************** CONTENIDO PERSONALIZADO **********************************************************************/


/* BOTONES */

.btn-danger{
	background-color: #DE182A !important;
	}

.btn-warning{
	background-color: #FBAF3F !important;
	}
	

.btn-lg, .btn-group-lg > .btn {
	border-radius: 0px !important;
}

.btn-start{
		position:absolute; 
		bottom:0px; 
		right:0;
		}

/* TABS BOTON NARANJA */

.tabs-lateral ul{
	padding:0px;
	margin:0px;
	list-style:none;
	}		
		
.tabs-lateral li{
	width:55px;
	height:33px;
	padding:0;
	margin-bottom:10px;
	list-style:none;
	}

.tabs-lateral li {
	margin-bottom:10px;
  	line-height: 33px;
  	background-image: url(../img/icons.png);
  	background-repeat: no-repeat;
	background-position: 0 0;
	}
	
.tabs-lateral li a{
	text-decoration:none;
	color:#fff;
	font-size:1.9em;
	font-family: 'Raleway', sans-serif;
	padding:8px;
	}	
	
.tabs-lateral li:hover , .tabs-lateral .active {
	background-image: url(../img/icons.png);
	background-position: 0 -40px;
	}
	
.title {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 25px;
}

.title_red {
	color: #DE182A;
}

.title_yellow {
	color: #FBAF3F;
}

/* TITULOS Y TEXTOS */

.tituloExer	{
	color: #DE182A;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 25px;
	}

.txt1 {
	color: rgb(109, 110, 113);
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	margin-bottom: 15px;
	text-transform: none;
	cursor: pointer;
	text-transform:none;
}
.txt1t {
	color: rgb(109, 110, 113);
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	margin-bottom: 15px;
	text-transform: none;
}


.txt2 {
	color: rgb(109, 110, 113);
	font-family: 'Open Sans', sans-serif;
	font-size: 1.3em;
	margin-bottom: 15px;
	text-transform: none;
}

.txt1W {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.3em;
	margin-bottom: 15px;
	text-transform: none;
}

.radio{
    display: inline-block;
    vertical-align: middle;
}
.backAsk {
    padding: 20px;
}

.backAsk input , .backAsk p {
    display: inline-block;
    vertical-align: top;
}

.backAsk input{
    margin: 5px 10px !important;
}

.textGray{
	color: #6D6E71;
	font-family: 'Raleway',sans-serif;
	font-size: 1.1em;
	font-weight: 700;
	text-align: justify;
}

.lightBrown{
    background-color: #E7E0C5;
}

.lightPink{
    background-color: #FAF7EE;
}


/* CAJAS DE DIALOGO */

.scrollTexto2{
	width:100%;
	height:250px;
	overflow:scroll;
	overflow-x: hidden;
	background-image:url(../img/back-sheet.png);
	background-repeat:no-repeat;
	padding:10px 10px 10px 60px !important;
	}
	
.scrollTexto{
	width:100%;
	height:250px;
	overflow:scroll;
	overflow-x: hidden;
	padding:10px;
	}
	
.character_a {
	font-family: 'Open Sans', sans-serif;
	text-transform: none;
	color: rgb(35, 31, 32);
	text-align: justify;
	font-size: 1.3em;
	margin-bottom: 10px;
}

.character_b {
	font-family: 'Open Sans', sans-serif;
	text-transform: none;
	color: rgb(147, 148, 152);
	text-align: justify;
	font-size: 1.3em;
	margin-bottom: 10px;
}

.character_c {
	font-family: 'Open Sans', sans-serif;
	text-transform: none;
	color: rgb(100, 100, 100);
	text-align: justify;
	font-size: 1.3em;
	margin-bottom: 10px;
}

/* ICONOS */

.icono{
	margin:30px 0;
	}
		
.listen , .save , .send , .recstop , .play , .script, .compare, .help{
  width:55px !important;
  height: 33px !important;
  line-height: 33px !important;
  background-image: url(../img/icons.png) !important;
  background-repeat: no-repeat !important;
}

.listen {
  background-position: 0 -80px !important;
}

.save {
  background-position: 0 -212px !important;
}

.recstop {
  background-position: 0 -120px !important;
}

.play {
  background-position: 0 -290px !important;
}

.send {
  background-position: 0 -254px !important;
}

.script {
  background-position: 0 -327px !important;
}

.compare {
  background-position: 0 -168px !important;
}

.help{
    background-position: 0 -365px !important;
}

.txtIcon1 {
	display: inline-block;
	font-size: 40px;
	color: #DE182A;
	vertical-align: top;
	margin-top: -9px;
	}

.txtIcon2 {
	font-size: 14px;
	color: #DE182A;
	margin-top:5px;
	font-weight:bold;
}

.btnGroup{
	display:inline-block;
	margin:0 10px;
	}
        
/* CHECKBOX */

.chbxempty , .chbxright , .chbxwrong {
  width:23px !important;
  height: 23px !important;
  line-height: 23px !important;
  background-image: url(../img/checkbox.png) !important;
  background-repeat: no-repeat !important;
  display: inline-block;
  margin: 0 10px;
}

.chbxempty {
  background-position: 0 0 !important;
}

.chbxright {
  background-position: 0 -24px !important;
}

.chbxwrong {
  background-position: 0 -48px !important;
}

/* BOTONES */

.button{
	margin:30px 0;
	}
		
.check , .clear , .view , .seepred , .listenlg, .findout, .try {
  width:85px;
  height: 29px;
  margin:5px 10px !important;
  line-height: 29px;
  background-image: url(../img/buttons.png);
  background-repeat: no-repeat;
}

.check:hover , .clear:hover , .view:hover , .seepred:hover , .listenlg:hover, .findout:hover, .try:hover {
  opacity:0.5;
  cursor: pointer;
}

.check {
  background-position: 0 0;
}

.clear {
  background-position: 0 -34px;
}

.view {
  background-position: 0 -67px;
}

.seepred{
   background-position: 0 -99px; 
}

.listenlg{
    background-position: 0 -128px; 
}

.icon1{
	display:inline-block; 
	vertical-align:top;
	}
        
.findout {
  background-position: 0 -155px;
}

.try{
    background-position: 0 -189px; 
}
/*DRAG AND DROP*/
	
.capaDrag{
	width:100%;
	padding:10px 0;
	background-color:#F8F7F0;
	}

.capaDrag2{
	width:100%;
	padding:10px 0;
	background-color:#E4DFC4;
	}
	
.capaDrag3{
	width:150px;
	text-align:center;
	background-color:#E4DFC4;
	}
	
.capaDrag2 p{
	margin:0;
	padding:0;
	}

/* TABLAS */

.table-editable {
  position: relative !important;
 
}

.table-add, .table-add2 {
  cursor: pointer;
  position: absolute !important;
  top: 4px !important;
  right: 5px !important;
}

thead tr th {
    text-align: center;
    background-color: #E7E0C5;
}        

/* AJUSTES */

.no-pad{
	padding:0px !important;
	}

.inputColor{
	width:100%;
	background-color:#F8F7F0;
	}
	
.inputColor2{
	width:90%;
	background-color:#F8F7F0;
	display:inline-block;
	vertical-align:top; 
	height:38px;
	}
	
.buttonsBox {
	padding:50px;
	}
	
.tab-pane{
	background-color: rgba(0,0,0,0.01);
	padding:10px;
	min-height:350px;
	}
		
.marginT5{
	margin:5px 0;
}

.marginT10{
	margin:10px 0;
	}
	
.marginT20{
	margin:20px 0;
	}

.marginT30{
	margin:30px 0;
	}
	
.move{
	cursor:move;	
	}

.hover:hover{
	opacity:0.5;
        cursor: pointer;
	}
	
.hover2:hover{
	background-color: #FAF7EE;
	}

.selection div a{
	text-decoration:none;
	}
	
.audio{
	line-height:100px;
	}

.textArea1{
	width:90%; 
	background-color:#FAF7EE; 
	padding:10px; 
	margin-bottom:30px;
}

.textArea2{
	width:407px; 
        height:352px; 
	background-image: url(../img/back-sheet2.png);
        background-repeat: no-repeat;
	padding:19px 0 15px 35px; 
	margin-bottom:10px;
}

.marginNP{
	margin:20px 0;	
	}
	
.budget{
	background-color:#FBAF3F; 
	color: #fff; font-size: 1.9em; 
	font-family: 'Raleway', sans-serif; 
	padding: 0 8px; 
	display:inline-block; 
	font-weight:100; 
	margin:0 10px;
	vertical-align:top;
	}
        
.budget2{
	background-color:#FBAF3F; 
	color: #fff; 
        font-size: 1.9em; 
	font-family: 'Raleway', sans-serif; 
	padding: 0 8px; 
	display:inline-block; 
	font-weight:100; 
	margin:0 10px;
	vertical-align:top;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        border:2px solid #FCE3BD;
	}
   
        
        .budget2 div{
            margin: -5px 2px;
        }
        
.budgetRound{
	background-color:#fff; 
	color: #FBAF3F; font-size: 18px; 
	font-family: 'Raleway', sans-serif; 
	padding: 0 8px; 
	font-weight:bold; 
	margin:0 10px;
        border:2px #FBAF3F solid;
        width:30px;
        height: 30px;
        border-radius: 50%
	}
	
.popText {
	background-color: #FFF2BD;
	padding: 0 5px;
	cursor: pointer;
	}
	
.shadow {
	
	-webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.75);
	
}

.counter{
	font-size:3em; 
	padding:3px; color:#F00; 
	border:3px solid #F00; 
	border-radius:50%; 
	width:70px; 
	height:70px; 
	font-weight:bold;
	}
        
.backAsk{
        
        background: #f7931e; /* Old browsers */
        background: -moz-linear-gradient(left,  #f7931e 0%, #ecb74c 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f7931e), color-stop(100%,#ecb74c)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  #f7931e 0%,#ecb74c 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #f7931e 0%,#ecb74c 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #f7931e 0%,#ecb74c 100%); /* IE10+ */
        background: linear-gradient(to right,  #f7931e 0%,#ecb74c 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7931e', endColorstr='#ecb74c',GradientType=1 ); /* IE6-9 */
}

 .bk-gradient-gray{
        background: -moz-linear-gradient(left,  rgba(0,0,0,0) 28%, rgba(164,165,168,0.65) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(164,165,168,0.65))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 28%,rgba(164,165,168,0.65) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(0,0,0,0) 28%,rgba(164,165,168,0.65) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(0,0,0,0) 28%,rgba(164,165,168,0.65) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(0,0,0,0) 28%,rgba(164,165,168,0.65) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6a4a5a8',GradientType=1 ); /* IE6-9 */
    }

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

select option{
    color:#6D6E71 !important;
}

select {
    color:#6D6E71 !important;
}

.inputRound{
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 2px #FBAF3F solid;
    padding: 8px;
    font-weight: bold;
    color:#FBAF3F;
    position: absolute;
}

.rightcheck , .wrong{
    width: 107px;
    height: 105px;
    position: absolute;
    top:10px;
    left:70px;
    text-align: center;
    
}

.rightcheck{
    background-image: url(../img/right.png) !important;
}

.wrong{
    background-image: url(../img/wrong.png) !important;
}

.numberXL{
        font-size: 30em;
        font-weight: bold;
        padding: 0;
        margin-top: -143px;
        color:#B1B3B6;
        height: 446px;
    }

/*ESTILOS L3_exer_6.html Less 1*/

.txtE1-4{
	
	background-color:#FAF7EE;
	padding:50px 0; 
	
	}

/*ESTILOS L3_exer_10.html Less 1*/

.tituloUn{
	color:#fff; 
	font-size:5em; 
	background-color:#235C34; 
	padding:10px 20px; 
	font-family:'Times New Roman', Times, serif;
	}

.tituloSubUn{
	color:#235C34; 
	font-size:2em; 
	margin:20px 65px; 
	font-family:'Times New Roman', Times, serif;
	}
	
.txtBoxUn{
	background-color:#FAF7EE; 
	min-height:273px !important;
	}
	
/*ESTILOS L3_exer_6.html Less 3*/

.txtE3-5{
	
	background-color:#F2F2F2; 
	font-family: 'Open Sans', sans-serif; 
	min-height:336px; 
	border:solid 1px #999; 
	
	}

.roundBullet{
        width: 78px;
        height: 78px;
        background-color: #BD1D2C;
        color:#fff;
        border-radius: 50%;
        font-size: 4em;
        padding: 0 21px;
        margin: 0 10px;
    }
    
.bulletSm{
        background-color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 5px;
        padding: 0px 9px;
    }
    
 .roundBullet2{
        width: 78px;
        height: 78px;
        background-color: #FBAF3F;
        color:#fff;
        border-radius: 50%;
        font-size: 4em;
        padding: 0 21px;
        margin: 0 10px;
    }
/* =================================================================== fix unit 11 ========================================================================= */
.no-bg {
	background: none !important;
}
.ta-c {
	text-align: center;
}
/* fonts size */

.fz-xl {
	font-size: 2.5rem;
	font-family: 'Raleway',sans-serif;
}

.fz-md {
	font-size: 1.2em;
	font-family: 'Raleway',sans-serif;
}
.custom-text-area {
	border: none !important;
	background-color: #F9F7EF;
	padding: 1rem;
	width: 100%;
	height: 20rem;
	font-family: 'Raleway',sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: left;
}
/* checkboxes custom */
	
label {
	display: inline;
}

.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: transparent;
	border: 1px solid #6D6E70;
	padding: 20px;
	display: inline-block;
	position: relative;
	text-align: center;
	cursor: pointer;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
	
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 20px;
	position: absolute;
	top: 20%;
	left: 30%;
	color: red;
}
/*  custom table */
.custom-table {
	background-color: #F9F7EF;
	text-align: center;
}

.custom-table th {
	border-top: none !important;
	border-bottom: 5px solid white;
	border-right: 5px solid white;
	text-align: center;
	font-size: 18px;
	font-family: 'Raleway',sans-serif;
	color: #FBAF3F;
}
.custom-table td {
	border-right: 5px solid white;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 19px;
	color: #939598;
	font-style: italic;
	height: 35rem;
	width: 33%;
}

/* fix clic answers */
.click-ans {
	cursor: pointer;
}
.checked-ans {
	background: #FAF7EE !important;
	display: block;
}

.wrong-xs, .rightcheck-xs {
	width: 20px !important;
	height: 20px !important;
	background-size: 100%;
	position: inherit;
	display: inline-block;
	top: 0 !important;
	left: 0 !important;
	vertical-align: middle;
}
.txt-cus-area {
	display: inline-block;
}
.txt-inp {
	display: inline-block;
	border: none !important;
	background-color: #ECDFBB;
	margin: 0 0.5rem;
	padding: 0 0.5rem;
}

.tab-left {
	margin-left: 5rem;
}

.btn-sel {
	background-color: #E4DFC4;
	text-align: center;
	color: #000000;
	font-size: 2rem;
	width: 100%;
	padding: 0.5rem 0;
	display: block;
	cursor: pointer;
	font-family: 'Raleway',sans-serif;
	font-weight: 700;
	margin-bottom: 1rem;
}
.btn-sel:hover {
	text-decoration: none;
	background-color: #C9C2A6;
	color: #000;

}
.margin-btm-img {
	margin-bottom: 2rem;
}
.tit-yel {
	color: #FBAF3F!important;
}

.wrap-bg {
	padding: 3rem;
	background-color: #FAF6ED;
	margin: 4rem 0;
}
.drag-marg {
	margin: 0 1rem 1rem;
	height: 40rem;
	padding: 1rem;
}
.wrap-events {
	height: 10rem;
	padding: 1rem 0;
}
/* =========================================================================== flip ============================================================================ */


.sponsor{
	width:157px;
	height:97px;
	float:left;
	margin:4px;
	
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: #FAF6ED;
	color: #ECDFBB;
	text-align: center;
	font-size: 10rem;
	line-height: 10rem;
}

.sponsorFlip:hover{
	color: #D3C5A3;

}



.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
	background-color: #fff;

}

.sponsorDescription{
	font-size:11px;
	font-style:italic;
	background-color: #fff;
	color:#6D6E71;
	height: 100%;
	border: 1px solid #FAF6ED;
	font-family: 'Raleway',sans-serif;
	line-height: 2rem;
	font-size: 2rem;
	padding-top: 2rem;
}

.sponsorDescription span {
	vertical-align: baseline;
}

.clear{
	/* This class clears the floats */
	clear:both;
}
.fix-pink {
	float: inherit !important;
	width: 100% !important;
	margin:1rem 0 !important;
}
.fix-block {
	width: 90% !important;
	text-align: left !important;
}
.wrap-scroll {
	padding: 4rem;
	background-color: #F5F5F5;
	height: 350px;
	overflow-y: scroll;
}
.wrap-scroll h3 {
	color: #C73E3F;
	font-size: 5rem;
	text-align: center;
}
.wrap-scroll hr {
	height: 8px;
	background: #C73E3F;
	margin: 2rem 0 4rem !important;
}
.txt-prh {
	font-size: 1.9rem;
	font-family: 'Raleway',sans-serif;
	color: #FBAF3F;
	font-weight: 700;
}
.txt-prh input {
	margin-left: 2rem;
}
.single-text {
	margin: auto;
	border: none;
	background-color: #F9F7EF;
	padding: 1rem;
	width: 80%;
	font-family: 'Raleway',sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: left;
	margin: 2rem 0;
}
 #marco_negro1
{
	width:28px;
	height:28px;
	border:1px solid #000;
	float:left;
	margin:0px 20px 0 64px;
	background-color: #fff;

}
#marco_negro2
{
	width:28px;
	height:28px;
	border:1px solid #000;
	float:left;
	margin:0px 20px 0 64px;
	background-color: #fff;
}