/* 
 * @import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css');
 * @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
 * 
 * @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
 * @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 * 
 */


* {
	box-sizing: border-box;
	/* border: 1px solid red; */
}

:root {
	--square_side: min(24vw, 31vh);
	--two_sides: calc-size(2 * var(--square_side));
}

@font-face {
	font-family: tc_icons_font;
	src: url(../fonts/tc_icons3.ttf);
}

.has_icons {
	font-family: tc_icons_font;
	font-size: 1.2em;
	/*border: 1px solid red;*/
}

h1, h2, h3, h4, h5, h6, li, a {
	scroll-margin-top: 15vh;
}

/*.fa,
 * .fas,
 * .fa-solid {
 *  border: 1px solid red;
 * }*/

.has_icons {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display, inline-block);
	font-style: normal;
	font-variant: normal;
	/*line-height: 1;*/
	line-height: inherit; 
	text-rendering: auto; 
}

.icon-side-menu::before { content: "\0061"; }
.icon-book::before { content: "\0062"; }
.icon-download::before { content: "\0063"; }
.icon-media::before { content: "\0064"; }
.icon-schema::before { content: "\0065"; }
.icon-info::before { content: "\0066"; }
.icon-tips::before { content: "\0067"; }
.icon-menu::before { content: "\0068"; }
.icon-pin::before { content: "\0069"; }
.icon-home::before { content: "\006A"; }
.icon-checked::before { content: "\006B"; }
.icon-language::before { content: "\006C"; }
.icon-globe::before { content: "\006D"; }
.icon-undo-2::before { content: "\006E"; }
.icon-save::before { content: "\006F"; }
.icon-open::before { content: "\0070"; }
.icon-undo::before { content: "\0071"; }
.icon-bible::before { content: "\0072"; }
.icon-save-3::before { content: "\0073"; }
.icon-delete-3::before { content: "\0074"; }
.icon-delete-2::before { content: "\0075"; }
.icon-save-2::before { content: "\0076"; }
.icon-open-2::before { content: "\0077"; }
.icon-undo-3::before { content: "\0078"; }
.icon-delete::before { content: "\0079"; }
.icon-open-3::before { content: "\007A"; }
.icon-undo-4::before { content: "\007B"; }
.icon-undo-5::before { content: "\007C"; }

.hebreo:lang(he) { direction: rtl; }
.griego:lang(el) { direction: ltr; }

body {
	background-color: #13234c;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Architects Daughter', cursive;*/
	font-size: 17px;
	margin: 0;
}

.big_title{
	font-size: 6vw;
	text-align: center;  
}

.in_center{
	text-align: center;  
}

.img_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

.home_text {
	/*color: yellow;*/
	font-size: 1em;
	padding: 0em 1em 0em 1em;
	width: 100%;
}

.home_footer {
	display: flex;
	justify-content: center;
	align-items: center;  
	align-content: center;
	padding: 0vw 0vw 3vw 3vw;
}

/* For mobile phones: */
[class *= "col-"] {
	float: left;
	padding: 1em;
	width: 100%;
}

/* For mobile phones: */
[class *= "verse_cl"] {
	float: left;
	padding: 0.1em;
	width: 100%;
}

.verse_cl1 { /* verse ref */
}

.verse_cl2 { /* verse content */
}

.verse_cl3 { /* MAIN TITLE */
	text-align: center;
}

.verse_cl4 { /* FIRST IMAGE */
	width: 80%;
}

.verse_cl5 { /* IMAGES */
}

.ref_video {
	height: 50vh;
}

/*position: static sticky fixed absolute*/
/*border: 5px solid red;*/

#id_content{
display: block;
float: left;
height: 90vh;
margin:0em;
margin-top:10vh;
overflow-y: scroll;
padding:0em;
padding-right:1em;
position: sticky;
text-align: justify;
top: 10vh;
width: 100%;
z-index: 50;
}

#id_content a {
color: #00dd00;
}

#id_content a:hover {
color: black;
background-color: white;
}

#id_content::after {
content: "";
clear: both;
display: table;
}

.key_verses img:hover {
	border: 5px solid white;
}

@media only screen and (min-width: 600px) {
	/* For tablets: */
	.col-m1 {width: 8.33%;}
	.col-m2 {width: 16.66%;}
	.col-m3 {width: 25%;}
	.col-m4 {width: 33.33%;}
	.col-m5 {width: 41.66%;}
	.col-m6 {width: 50%;}
	.col-m7 {width: 58.33%;}
	.col-m8 {width: 66.66%;}
	.col-m9 {width: 75%;}
	.col-m10 {width: 83.33%;}
	.col-m11 {width: 91.66%;}
	.col-m12 {width: 100%;}
	
	.verse_cl1 { /* verse ref */
		width: 16.66%;
	}
	
	.verse_cl2 { /* verse content */
		width: 83.33%;
	}
	
	.verse_cl5 { /* IMAGES */
		padding: 1em;
		width: 41.66%;
	}
	
	.home_text {
		/*color: red;*/
		font-size: 1.3em;
		padding: 0em 1em 0em 1em;
	}
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	
	.verse_cl1 { /* verse ref */
		width: 16.66%;
	}
	
	.verse_cl2 { /* verse content */
		width: 83.33%;
	}
	
	.verse_cl5 { /* IMAGES */
		width: 41.66%;
	}
	
	.home_text {
		/*color: black;*/
		font-size: 1.3em;
		padding: 0em 1em 0em 1em;
	}  
}

@media only screen and (min-width: 1100px) {
	.home_text {
		/*color: green;*/
		font-size: 1.6em;
		padding: 0em 2.5em 0em 2.5em;
	}  
}

/*  background-color: #333;*/

.cl_top_nav {
	background-color: #0b142c;
	border: 2px solid #23418c;
	font-size: 3vh;
	height: 10vh;
	overflow: auto;
	position: fixed;
	top: 0em;
	width: 100%;
	z-index: 100;
}

.cl_top_nav .cl_top_elem {
	color: #f2f2f2;
	display: block;
	float: left;
	padding: 1em 1em;
	text-align: center;
	text-decoration: none;
}

.cl_top_nav .cl_top_elem:hover {
	background-color: #ddd;
	color: black;
}

.cl_top_nav .cl_top_elem.active {
	background-color: #04AA6D;
	color: white;
}

#id_top_menu, #id_side_menu {
display: none;
}

/*box-shadow: 0 1px 3px lightgray, 0 1px 2px lightgray;*/
/*border: 5px solid black;*/

#id_side_nav {
background-color: #0a1327;
border: 2px solid #23418c;
display: block;
float: left;
height: 90vh;
margin: 0em;
overflow-y: scroll;
padding: 0em;
position: sticky;
text-align: left;
top: 0em;
z-index: 99;
}

#id_side_nav ul {
display: block;
margin: 0em;
list-style-type: none;
padding: 0em;
}

#id_side_nav li {
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
-webkit-user-select: none; /* Safari 3.1+ */

background-color: #162b58;
color: white;
cursor: pointer;
display: block;
margin: 0em;
padding: 0.5em;
user-select: none;
width: 100%;
}

#id_side_nav h3 {
text-align: center;
}

#id_side_nav [href]:hover {
background-color: #ddd;
color: black;
}

.cl_sub_nav:hover {
	background-color: #ddd;
	color: black;
}

#id_side_nav a {
color: white;
display: inline-flex;
margin: 0em;
padding: 0em;
width: 100%;
}

#id_side_nav .cl_sub_nav {
width: 100%;
}

#id_side_nav .nested {
display: none;
}

#id_side_nav .active {
display: block;
}

#id_side_nav .open {
background-color: #254795;
}

#id_side_nav .selected {
background-color: #0e1a35;
/*background-color: #ff0856;*/
}

#id_side_nav_name {
display: none;
}

.cl_main_content {
	margin-top: 1em;
	padding: 1em;
}

.rside {
	background-color: #1a3067;
	border: 1em solid white;
	box-shadow: 0 1px 3px lightgray, 0 1px 2px lightgray;
	color: white;
	float: right;
	font-size: 0.8em;
	margin-top: 1em;
	padding: 1em;
	text-align: center;
}

/*float: none;*/
/*position: sticky;*/

@media screen and (max-width: 600px) {
	.big_title{
		font-size: 300%;
		text-align: center;  
	}
	
	.home_text {
		/*color: magenta;*/
		font-size: 1em;
	}
	
	.cl_top_nav .cl_top_elem {display: none;}
	
	#id_side_menu.has_side_nav {
	display: block;
	float: left;
	top: 0;
	}
	
	#id_home {
	display: block;
	position: relative;
	text-align: left;
	top: 0;
	}
	
	#id_top_menu {
	display: block;
	float: right;
	height: 10vh;
	position: absolute;
	right: 0;
	top: 0;
	}
	
	.cl_top_nav.show_menu {
		background-color: #0b142c;
		float: none;
		display: block;
		height: auto;
		width: 100%;
		z-index: 110;
	}
	
	.cl_top_nav.show_menu .cl_top_elem {
		display: block;
		float: none;
		text-align: left;
		z-index: 110;
	}
	.cl_top_nav.show_menu #id_side_menu {
		display: none;
	}
	
	#id_side_nav {
	background-color: #0a1327;
	display: none;
	}
	
	#id_side_nav.show_menu {
	display: block;
	float: none;
	position: fixed;
	text-align: left;
	top: 10vh;
	z-index: 100;
	}
	
}

/*border: 1em solid black;*/

.info_ref {
	text-align: center;
}

#id_footer {
background-color: #000000;
color: white;
display: block;
float: right;
font-size: 1em;
padding: 1em;
position: sticky;
text-align: center;
}

#id_footer a {
color: white;
}

.item_can_select {
	//margin: 0.7vw;
	border: 0.2vw solid white;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 1em;
	background-color: transparent;
}

.item_can_select:hover {
	border: 0.5vw solid white;
}

.very_big_font {
	font-size: 200%;
}

.big_font {
	font-size: 150%;
}

.bold_font {
	font-weight: bold;
}