/* =================== colors ================== */
/*yellow*/
/*orange*/
/*red*/
/*purple*/
/*blue*/
/*turquoise*/
/*green*/
/*peach*/
/*dark blue*/
/* =============== font source ================= */
@font-face {
	font-family: Quattrocento;
	src: url(../../../assets/fonts/Quattrocento-Regular.ttf);
}
@font-face {
	font-family: Quattrocento;
	src: url(../../../assets/fonts/Quattrocento-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: Oswald;
	src: url(../../../assets/fonts/Oswald-Regular.ttf);
}
@font-face {
	font-family: Oswald;
	src: url(../../../assets/fonts/Oswald-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: Marck Script;
	src: url(../../../assets/fonts/MarckScript-Regular.ttf);
}

/* =================== fonts =================== */
.quattrocento_font {
  font-family: 'Quattrocento', serif; }

.oswald_font {
  font-family: 'Oswald', sans-serif; }

.marck_font {
  font-family: 'Marck Script', cursive; }

/* =================== main box ================ */

.long_image{
	height:500px;
	overflow-x:hidden;
	overflow-y:scroll;
	border:1px solid black;
}

a:link {
    color: #428bca !important; 
}

a:visited {
    color: #428bca !important; 
}

.drop-shadow{
	-webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.50); 
	-moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.50); 
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.50);
}

.text-outline {
	text-shadow: 1px 1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333;
}

.bkgPattern{
	/*background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0.05) 9px, rgba(102, 17, 51, 0.1) 10px, rgba(96, 16, 48, 0.05) 11px) 0px 10px, radial-gradient(at 100% 100%,rgba(96, 16, 48, 0.05) 9px, rgba(102, 17, 51, 0.1) 10px, rgba(96, 16, 48, 0.05) 11px); 
	background-size: 20px 20px;*/
}

main {
  font-family: 'Quattrocento', serif;
  font-size: 100%;
  min-height: 95vh; 
}

.bg {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
}

.height91{ height: 92vh; }
  
#ch0{ background-image: url(../img/ch0.jpg); min-height:1080px; }
#ch1{ background-image: url(../img/ch1.jpg); min-height:1080px; }
#ch2{ background-image: url(../img/ch2.jpg); min-height:1080px; }
#ch3{ background-image: url(../img/ch3.jpg); min-height:1080px; }
#ch4{ background-image: url(../img/ch4.jpg); min-height:1080px; }
#ch5{ background-image: url(../img/ch5.jpg); min-height:1080px; }
#ch6{ background-image: url(../img/ch6.jpg); min-height:1080px; }
#ch7{ background-image: url(../img/ch7.jpg); min-height:1080px; }
#ch8{ background-image: url(../img/ch8.jpg); min-height:1080px; }
#ch9{ background-image: url(../img/ch9.jpg); min-height:1080px; }
#ch10{ background-image: url(../img/ch10.jpg); min-height:1080px; }
#chapp{ background-image: url(../img/appendix.jpg); min-height:1080px; }

.defaultbkg{ background-image: url(../img/ch0.jpg); }
.ch0bkg{ background-image: url(../img/ch0.jpg); }
.ch1bkg{ background-image: url(../img/ch1.jpg); }
.ch2bkg{ background-image: url(../img/ch2.jpg); }
.ch3bkg{ background-image: url(../img/ch3.jpg); }
.ch4bkg{ background-image: url(../img/ch4.jpg); }
.ch5bkg{ background-image: url(../img/ch5.jpg); }
.ch6bkg{ background-image: url(../img/ch6.jpg); }
.ch7bkg{ background-image: url(../img/ch7.jpg); }
.ch8bkg{ background-image: url(../img/ch8.jpg); }
.ch9bkg{ background-image: url(../img/ch9.jpg); }
.ch10bkg{ background-image: url(../img/ch10.jpg); }
.chappbkg{ background-image: url(../img/appendix.jpg); }
	

	
.tooltipcust{
	display: inline;
	position: relative;
	cursor: help;
	color: #0000b1;
}

.tooltipcust:hover:after{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: attr(title);
	left: 20%;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
	white-space:nowrap;
}

.tooltipcust:hover:before{
	border: solid;
	border-color: #333 transparent;
	border-width: 6px 6px 0 6px;
	bottom: 20px;
	content: "";
	left: 50%;
	position: absolute;
	z-index: 99;
}

.vocabDefinition::before{
	content: "Definici\00F3n: " !important;
	font-weight: bold;
	font-style: italic;
}

.vocabExample::before{
	content: "Ejemplo: " !important;
	font-weight: bold;
	font-style: italic;
}

.vocabExample{
	font-style: italic;
}

.emailToInput::before{
	content: "Para: " !important;
	font-weight: bold;
	font-style: italic;
}

.emailFromInput::before{
	content: "De: " !important;
	font-weight: bold;
	font-style: italic;
}

.emailSubjectInput::before{
	content: "Asunto: " !important;
	font-weight: bold;
	font-style: italic;
}

.vocabularyBox{
	border:3px solid; 
	padding:10px; 
	border-radius:10px; 
	-webkit-columns: 2 300px; 
	-moz-columns: 2 300px; 
	columns: 2 300px; 
	-webkit-column-gap: 1em; 
	-moz-column-gap: 1em; 
	column-gap: 1em;
}

.storyBox{
	border:3px solid; 
	padding:10px; 
	border-radius:10px;
}

.vocabularyBlock{
	width:100%;
	min-height:35px;
}

.vocabularyBlock:nth-child(odd){
	background: #e8e8e8;	
}

.vocabularyTerm{
	width:50%; 
	float:left; 
	padding:5px 10px;
}

.spTerm{
	font-style:italic;
	font-weight:bold;
	color: #4a8f9e;
}

.enTerm{
	color: #49a25a;
}

.headerBorder{
	border-top:15px solid #ffffff;
	border-bottom:15px solid #ffffff;
}

.vocabularyBoxColorBorder{ border-color: #EBAC41 !important; }
.storyBoxColorBorder{ border-color: #676967 !important; }
.explainBoxColorBorder{ border-color: #FDC98D !important; }
.wordbankBoxColorBorder{ border-color: #0D190F !important; }
.attentionBoxColorBorder{ border-color: #ff0000 !important; }

/* =================== page header ============= */
#ch0 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch0 .headerTextColor1{ color:#C6B5A2; }  
#ch0 .headerTextColor2{ color:#614014; }  
#ch0 .headerTextColor3{ color:#4E76AA; }  

#ch1 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch1 .headerTextColor1{ color:#DFEAE9; }  
#ch1 .headerTextColor2{ color:#32403C; }  
#ch1 .headerTextColor3{ color:#E29C34; }  
#ch1 .headerTextColor4{ color:#FFF600; }  
#ch1 .headerTextColor5{ color:#0094EA; }  
  
#ch2 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch2 .headerTextColor1{ color:#B39F91; }  
#ch2 .headerTextColor2{ color:#D9D9DE; }  
#ch2 .headerTextColor3{ color:#707A12; }  
  
#ch3 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch3 .headerTextColor1{ color:#FF956A; }  
#ch3 .headerTextColor2{ color:#3A2932; }  
#ch3 .headerTextColor3{ color:#39666F; }  
  
#ch4 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch4 .headerTextColor1{ color:#968362; }  
#ch4 .headerTextColor2{ color:#9D9ABE; }  
#ch4 .headerTextColor3{ color:#E3EBEE; }  
  
#ch5 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch5 .headerTextColor1{ color:#382904; }  
#ch5 .headerTextColor2{ color:#E0DFDB; }  
#ch5 .headerTextColor3{ color:#70C1BA; }  
  
#ch6 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch6 .headerTextColor1{ color:#0087C9; }  
#ch6 .headerTextColor2{ color:#78A4C2; }  
#ch6 .headerTextColor3{ color:#505C54; }  

#ch7 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch7 .headerTextColor1{ color:#968371; }  
#ch7 .headerTextColor2{ color:#5996DF; }  
#ch7 .headerTextColor3{ color:#DF9244; }  

#ch8 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch8 .headerTextColor1{ color:#E71615; }  
#ch8 .headerTextColor2{ color:#4F3E51; }  
#ch8 .headerTextColor3{ color:#BEE0BC; }  

#ch9 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch9 .headerTextColor1{ color:#354137; }  
#ch9 .headerTextColor2{ color:#EBDF01; }  
#ch9 .headerTextColor3{ color:#929292; }  
  
#ch10 .headerBackground{ background-color: rgba(255, 255, 255, 0.85); }  
#ch10 .headerTextColor1{ color:#354137; }  
#ch10 .headerTextColor2{ color:#EBDF01; }  
#ch10 .headerTextColor3{ color:#929292; }  
  
#chapp .headerBackground{ background-color: rgba(255, 255, 255, 0.5); }  
#chapp .headerTextColor1{ color:#354137; }  
#chapp .headerTextColor2{ color:#EBDF01; }  
#chapp .headerTextColor3{ color:#929292; }  
  
/* =================== box definitions =============== */

#vocabBox .primaryBoxColor{ background: #61f268; }
#vocabBox .primaryBoxColorBorder{ border-color: #61f268 !important; }
#vocabBox .secondaryBoxColor{ background: #ffe13d; }
#vocabBox .boxImage{ background: url(../../../French2/assets/img/badges/Education.png) no-repeat; }

#phonBox .primaryBoxColor{ background: #ffe13d; }
#phonBox .primaryBoxColorBorder{ border-color: #ffe13d !important; }
#phonBox .secondaryBoxColor{ background: #e86305; }
#phonBox .boxImage{ background: url(../../../French2/assets/img/badges/Badbreath.png) no-repeat; }

#cultureBox .primaryBoxColor{ background: #00c99e; }
#cultureBox .primaryBoxColorBorder{ border-color: #00c99e !important; }
#cultureBox .secondaryBoxColor{ background: #61f268; }
#cultureBox .boxImage{ background: url(../../../French2/assets/img/badges/Mask.png) no-repeat; }

#parlonBox .primaryBoxColor{ background: #d394d6; }
#parlonBox .primaryBoxColorBorder{ border-color: #d394d6 !important; }
#parlonBox .secondaryBoxColor{ background: #00c99e; }
#parlonBox .boxImage{ background: url(../../../French2/assets/img/badges/Docarchive.png) no-repeat; }

#videoBox .primaryBoxColor{ background: #ff3645; }
#videoBox .primaryBoxColorBorder{ border-color: #ff3645 !important; }
#videoBox .secondaryBoxColor{ background: #ffe13d; }
#videoBox .boxImage{ background: url(../../../French2/assets/img/badges/Moviecam.png) no-repeat; }

#grammBox .primaryBoxColor{ background: #e86305; }
#grammBox .primaryBoxColorBorder{ border-color: #e86305 !important; }
#grammBox .secondaryBoxColor{ background: #ff3645; }
#grammBox .boxImage{ background: url(../../../French2/assets/img/badges/Pen.png) no-repeat; }

#panoBox .primaryBoxColor{ background: #ff3645; }
#panoBox .primaryBoxColorBorder{ border-color: #ff3645 !important; }
#panoBox .secondaryBoxColor{ background: #ffe13d; }
#panoBox .boxImage{ background: url(../../../French2/assets/img/badges/Panorama.png) no-repeat; }

#acrossBox .primaryBoxColor{ background: #bfe1ff; }
#acrossBox .primaryBoxColorBorder{ border-color: #bfe1ff !important; }
#acrossBox .secondaryBoxColor{ background: #00c99e; }
#acrossBox .boxImage{ background: url(../../../French2/assets/img/badges/Targetselect.png) no-repeat; }

#interroBox .primaryBoxColor{ background: #ffe13d; }
#interroBox .primaryBoxColorBorder{ border-color: #ffe13d !important; }
#interroBox .secondaryBoxColor{ background: #ff3645; }
#interroBox .boxImage{ background: url(../../../French2/assets/img/badges/Galaxy.png) no-repeat; }

#practiBox .primaryBoxColor{ background: #2300f2; color:white; }
#practiBox .primaryBoxColorBorder{ border-color: #2300f2 !important; }
#practiBox .secondaryBoxColor{ background: #f77e65; }
#practiBox .boxImage{ background: url(../../../French2/assets/img/badges/Tennis.png) no-repeat; }

#communBox .primaryBoxColor{ background: #ff9ca3; }
#communBox .primaryBoxColorBorder{ border-color: #ff9ca3 !important; }
#communBox .secondaryBoxColor{ background: #59b0ff; }
#communBox .boxImage{ background: url(../../../French2/assets/img/badges/Teammates.png) no-repeat; }

#structBox .primaryBoxColor{ background: #fff1a3; }
#structBox .primaryBoxColorBorder{ border-color: #fff1a3 !important; }
#structBox .secondaryBoxColor{ background: #f77e65; }
#structBox .boxImage{ background: url(../../../French2/assets/img/badges/Bodycells.png) no-repeat; }

#authenBox .primaryBoxColor{ background: #59b0ff; }
#authenBox .primaryBoxColorBorder{ border-color: #59b0ff !important; }
#authenBox .secondaryBoxColor{ background: #fb9b58; }
#authenBox .boxImage{ background: url(../../../French2/assets/img/badges/Connexions.png) no-repeat; }

#evaluBox .primaryBoxColor{ background: #00c99e; }
#evaluBox .primaryBoxColorBorder{ border-color: #00c99e !important; }
#evaluBox .secondaryBoxColor{ background: #d394d6; }
#evaluBox .boxImage{ background: url(../../../French2/assets/img/badges/Brain.png) no-repeat; }

#worksummaryBox .primaryBoxColor{ background: #2300f2; }
#worksummaryBox .primaryBoxColorBorder{ border-color: #2300f2 !important; }
#worksummaryBox .secondaryBoxColor{ background: #f77e65; }
#worksummaryBox .boxImage{ background: url(../../../French2/assets/img/badges/Sunnybeach.png) no-repeat; }


/* =================== box sizes =============== */
.stamp_size {
  height: 6.4em;
  width: 6.4em; }

.header_small_tetris {
  border-radius: 25px;
  height: 2em;
  width: 2em; }
  
.header_tiny_tetris {
  height: 1.5em;
  width: 1.5em; }

.main_header_windows {
  width: 3em;
  height: 3em; }

/* =================== box colors ============== */
.box.blk {
  background: #000; }

.box.wht {
  background: #fff; }

.box.color1 {
  background: #ffe13d; }

.box.color1_light1 {
  background: #fff1a3; }

.box.color1_light2 {
  background: #fff9d6; }

.box.color1_light3 {
  background: white; }

.box.color2 {
  background: #e86305; }

.box.color2_light1 {
  background: #fb9b58; }

.box.color2_light2 {
  background: #fcb98a; }

.box.color2_light3 {
  background: #fed7bb; }

.box.color3 {
  background: #ff3645; }

.box.color3_light1 {
  background: #ff9ca3; }

.box.color3_light2 {
  background: #ffcfd3; }

.box.color3_light3 {
  background: white; }

.box.color4 {
  background: #b54aba; }

.box.color4_light1 {
  background: #d394d6; }

.box.color4_light2 {
  background: #e2b9e4; }

.box.color4_light3 {
  background: #f1def2; }

.box.color5 {
  background: #007ff2; }

.box.color5_light1 {
  background: #59b0ff; }

.box.color5_light2 {
  background: #8cc8ff; }

.box.color5_light3 {
  background: #bfe1ff; }

.box.color6 {
  background: #00c99e; }

.box.color6_light1 {
  background: #30ffd3; }

.box.color6_light2 {
  background: #63ffde; }

.box.color6_light3 {
  background: #96ffe9; }

.box.color7 {
  background: #61f268; }

.box.color7_light1 {
  background: #bffac2; }

.box.color7_light2 {
  background: #eefeef; }

.box.color7_light3 {
  background: white; }

.box.color8 {
  background: #f77e65; }

.box.color8_light1 {
  background: #bffac2; }

.box.color8_light2 {
  background: #eefeef; }

.box.color8_light3 {
  background: white; }

.box.color9 {
  background: #2300f2; }

.box.color9_light1 {
  background: #bffac2; }

.box.color9_light2 {
  background: #eefeef; }

.box.color9_light3 {
  background: white; }

/* =================== font colors ============= */
.font_wht {
  color: #fff; }

.font_color1 {
  color: #ffe13d; }

.font_color2 {
  color: #e86305; }

.font_color3 {
  color: #ff3645; }

.font_color4 {
  color: #b54aba; }

.font_color5 {
  color: #007ff2; }

.font_color6 {
  color: #00c99e; }

.font_color7 {
  color: #61f268; }

.font_color8 {
  color: #f77e65; }

.font_color9 {
  color: #2300f2; }

/* =================== borders ================= */
.border_blk {
  border-color: #000 !important; }

.border_color1 {
  border-color: #ffe13d !important; }

.border_color1_light1 {
  border-color: #fff1a3 !important; }

.border_color1_light2 {
  border-color: #fff9d6 !important; }

.border_color1_light3 {
  border-color: white !important; }

.border_color2 {
  border-color: #e86305 !important; }

.border_color2_light1 {
  border-color: #fb9b58 !important; }

.border_color2_light2 {
  border-color: #fcb98a !important; }

.border_color2_light3 {
  border-color: #fed7bb !important; }

.border_color3 {
  border-color: #ff3645 !important; }

.border_color3_light1 {
  border-color: #ff9ca3 !important; }

.border_color3_light2 {
  border-color: #ffcfd3 !important; }

.border_color3_light3 {
  border-color: white !important; }

.border_color4 {
  border-color: #b54aba !important; }

.border_color4_light1 {
  border-color: #d394d6 !important; }

.border_color4_light2 {
  border-color: #e2b9e4 !important; }

.border_color4_light3 {
  border-color: #f1def2 !important; }

.border_color5 {
  border-color: #007ff2 !important; }

.border_color5_light1 {
  border-color: #59b0ff !important; }

.border_color5_light2 {
  border-color: #8cc8ff !important; }

.border_color5_light3 {
  border-color: #bfe1ff !important; }

.border_color6 {
  border-color: #00c99e !important; }

.border_color6_light1 {
  border-color: #30ffd3 !important; }

.border_color6_light2 {
  border-color: #63ffde !important; }

.border_color6_light3 {
  border-color: #96ffe9 !important; }

.border_color7 {
  border-color: #61f268 !important; }

.border_color7_light1 {
  border-color: #bffac2 !important; }

.border_color7_light2 {
  border-color: #eefeef !important; }

.border_color7_light3 {
  border-color: white !important; }

.border_color8 {
  border-color: #f77e65 !important; }

.border_color8_light1 {
  border-color: #bffac2 !important; }

.border_color8_light2 {
  border-color: #eefeef !important; }

.border_color8_light3 {
  border-color: white !important; }

.border_color9 {
  border-color: #2300f2 !important; }

.border_color9_light1 {
  border-color: #bffac2 !important; }

.border_color9_light2 {
  border-color: #eefeef !important; }

.border_color9_light3 {
  border-color: white !important; }

/* =================== btns ==================== */
.submit_btn {
  text-align: right;
  margin-top: 2em; }

.submit_btn span {
  cursor: pointer;
  padding: 1em;
  font-family: 'Oswald', sans-serif; }

.submit_btn span:hover {
  -webkit-box-shadow: inset 0px 0px 5px 0px black;
  -moz-box-shadow: inset 0px 0px 5px 0px black;
  box-shadow: inset 0px 0px 5px 0px black; }

/* =================== table ==================== */
.table-mode1 > tbody > tr > td, .table-mode1 > tbody > tr > th, .table-mode1 > thead > tr > td {
  padding: 1em;
  border: 1px solid #000; }

/* =================== inputs =================== */
.inputWidth5 {
  width: 5em; }

.inputWidth10 {
  width: 10em; }

.inputWidth15 {
  width: 15em; }

.inputWidth20 {
  width: 20em; }

/* =================== reader =================== */
@media screen and (min-width: 1201px) {
  .reader_page {
    -webkit-flex: 1;
    flex: 1; }

  .reader-text {
    text-shadow: 5px 0px 4px #000;
    color: #fff;
    font-size: 1.5vw; } }
@media screen and (max-width: 1200px) {
  .reader_page {
    width: 100%; }

  .reader-text {
    text-shadow: 5px 0px 4px #000;
    color: #fff;
    font-size: 2.5vw; } }
.title-banner {
  position: absolute;
  background-color: rgba(56, 214, 255, 0.5);
  padding: .2em;
  color: #fff;
  font-family: 'Marck Script', cursive;
  width: 30vw;
  margin-top: 5%;
  font-size: 2vw; }

.drop-cap:first-child:first-letter {
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px; }