/*
By Carlos J Valle (c)
*/

@view-transition {
  navigation: auto;
}

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/* RESET ALL */
	*{
		margin:0;
		padding:0;
	}
/* RESET ALL */

/* Basic */
	body {
		font-family: Arial;
		color: #404040;
		color: #333;
		font-size: 14px;
	}
	
	hr {
		border-top: solid 1px #888888;
		border: 0;
		margin-bottom: 10px;
	}

	blockquote {
		border-left: solid 0.5em #888888;
		font-style: italic;
		background-color: inherit;
	}
	
	blockquote.mainQuote{
		font-size: 1.6em;
	}

.quote {
	font-style: italic;
	font-family:verdana;
	color: purple;
	-color: #568200;
	color: #800000;
	display:block;
	padding: 10px;
	background-color: #F5F9F9;
	border: 1px solid #DFE5E8;
}

/* Image */

/* header */
.sticky {
  position: fixed;
  top: 0;
}

.sticky + .main-content {
	padding-top: 48px;
}


.wrapper{
	width:100%;
}

.banner{
	display:none;
}
	.logo {
		font-size: 18px;
		color:404040;
		/* font-family: impact;*/
	}
	.logo,a,a:hover{
		text-decoration:none;
	}

p.definition {
	margin: 40px;
	border: 1px solid #808080;
	padding: 5px 10px;;
}

span.definition{
	font-size: 12px;
	font-style: italic;
	color: #000000;
	display:block;
}

/*==================================================== */

/* Style the navigation menu */

/* Hide the links inside the navigation menu (except for logo/home) */
#l-nav {
  display: none;
}

.lnav-icon-holder{
	float:left;
}

/* Style the hamburger menu */
.left-nav a.lnav-icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  
}
.left-nav {
	display:none;
}
.fa-bars{
	color: #00798C;
  font-size: 1.7em;
}

/*================================================ */
.nav{
	width:100%;
	background-color: white;
	border-bottom: #202020 solid 1px;
	font-size: 16px;
	color: #404040;
	font-weight:bold;
	padding: 10px 0px;
	
}

.nav a, a:visited{
	color: #404040;
	
}

.nav a:hover {
	color: #808080;
}

.menu-button{
	margin-left: 10px;
}
	
/* main-content */

.main-content{
	margin:5px;
	padding: 5px;
	color: #202020;
	color: #333;
}

/* tool-tip */
a.tool-tip{
	position: relative ;
}

a.tool-tip:hover::after {
	content: attr(data-tooltip) ;
	position: absolute ;
	top: 1.1em ;
	left: 1em ;
	left: -50px;
	min-width: 200px ;
	border: 1px #808080 solid ;
	padding: 8px ;
	color: black ;
	-background-color: #cfc ;
	background-color: #E0DEDE ;
	z-index: 1 ;
	font-style: italic;
	border-radius: 10px;
	
}

/* left-column */

.left-column{
	border-right: 2px solid #808080;
	font-size: 14px;
	padding-top: 5px;
}

.left-section{
	padding: 5px;
}

.left-section h1,h2,h3,h4{
	color: #404040;
}

.left-column P{
	padding: 5px;
}
	.left-column a{
		text-decoration: none;
		color: #404040;
	}
		
	.left-column a:hover{
		text-decoration: underline;
		color: #00798C;
	}

	.left-column a{
		padding: 5px;
	}

	.left-column ul{
		list-style-type:square;
		list-style-position: inside;
		margin-left: 5px;
		line-height: 1.6;
	}
	
	.left-option {
			
	}

/* right-column */

.right-column{
	padding-left: 20px;
}

.right-column a{
	color: #00798C;
}

.right-column a:hover{
	text-decoration: underline;
	color: #00798C;
}

.right-column a.book{
	color:#1878FE;
}


.right-section p:first-of-type::first-letter{
	font-size: 3em;
	font-weight: bold;
	color: black;
	line-height: 1em;
}

.right-section h1,h2,h3,h4{
	color: #404040;
}

.right-section P{
	margin-bottom: 5px;
	padding-bottom: 10px;
	font-size: 16px;
	color: 404040;
	line-height: 1.6;
}

.right-section .special{
	font-style: italic;
	font-weight: bold;
}

.tagLine{
	color: 000;
	font-style:italic;
	padding: 5px 0px 10px;
	font-size: 20px;
}


/* Footer */
.footer {
	font-size: 10px;
	color:#404040;
	padding-top: 25px;
	background-color:#E0DEDE
}

.Copyright{
	display:grid;
	place-items: center;
	font-size: 12px;
	
	padding: 5px 5px 5px;
	background-color: #E0DEDE;
}



/*   CLASSES  */
	.center {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.copy .regularText{
	background-color: inherit;
	}

	.videoBox{
		padding:1px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		border: 2px solid grey;
		width: 100%;
		height: 45vh;
	}
	
.fs08{font-size:8px;}
.fs09{font-size:09px;}
.fs10{font-size:10px;}
.fs11{font-size:11px;}
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs14{font-size:14px;}
.fs15{font-size:15px;}
.fs16{font-size:16px;}
.fs17{font-size:17px;}
.fs18{font-size:18px;}
.fs19{font-size:19px;}
.fs20{font-size:20px;}
.fs21{font-size:21px;}
.fs22{font-size:22px;}
.fs23{font-size:23px;}
.fs24{font-size:24px;}
.fs25{font-size:25px;}

bold{
	font-weight: bold;
}
italic{
	font-style: italic;
}

.bold { font-weight:bold;}
.italic .i {font-style: italic;}
.green {color:green;}
.red {color:red;}
.purple {color:purple;}
	
	
@media only screen and (min-width: 768px ) {
	.wrapper{
		width: 600px;
		margin: 0 auto;
	}
	
	.banner {
		display:block;
		width: 100%;
		-background: #333333 url("../images/pic01.jpg") no-repeat;
		background-size: cover;
		color: #404040;
		padding: 10px 0px 10px;
		text-align: left;
		background-position: 0% 65%;
		position: relative;
		border-bottom: #404040 solid 1px;
	}
	.left-column{
		display:block;
	}
	#l-nav {
		display: block;
	}

	@media only screen and (min-width: 1000px ) {
		.wrapper{
			width: 1050px;
		}
		
		.main-content{
			display:grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-columns: minmax(200px, 32%) 1fr;
		}
		
		.main-content-collapsed{
			display:grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-columns: minmax(200px, 29%) 1fr;
		}
		
		a.lnav-icon{
		}
	}

}

/* EOF */