@charset "utf-8";
/* Clear padding/margin and set border-box */
* {
	padding: 0;
	margin: 0;
	
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
html {
	overflow-y:scroll;
}
body {
	font-family: Garamond, 'EB Garamond', 'Source Serif Pro', Georgia, serif;
	font-size: 18px;
	line-height:20px;
	background-color: #3A393E;
	background:url(memoria.jpg) fixed;
}
ul, ol, dl { 
	padding: 0;
	margin: 0;
	list-style:none;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}
img {
	max-width:100%; 
	height:auto;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	text-decoration: none;
	}
a:visited {
	text-decoration: none;
	}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration:underline;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
	margin: 45px auto; /* the auto value on the sides, coupled with the width, centers the layout */
	top-margin:30px;
	min-width:320px;
	max-width: 75%;
	min-height:600px;
}
.content {
	display:block;
	margin:5px auto;
	padding: 10px 0px;
	background-color: rgba(0,0,0, 0.7);
	color: #fff;
	min-height:300px;
	min-width:320px;
}
.content a {
	color:#81F8E7;
}
/* Custom CSS here */
.bold {
	font-weight:bold;
}
.center {
	text-align:center;
}
.column2 {
	text-align:justify;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;'
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}
.course-description {
	background: rgba(0,0,0, 0.6); 
	border-radius:20px;
	transition: background 1s;
}
.course-description:hover {
	background: rgba(0,0,0,0.9);
}
.course-list {
	width:25%;
	text-align:left;
	padding:0px 5px;
	font:18px/20px serif;
	height:100%;
}
.course-info {
	width:75%;
	text-align:justified;
	padding:0px 5px;
	margin-right:5px;
	border: 1px solid white;
}
.CV {
	width:80%;
	border:hidden;
	font: 300 16px/20px;
	margin-left:10%;
	margin-top: 15px;
}
.CV td,tr {
	padding:5px 10px;
}
.cvyear  {
	width:40px;
}
.cvdegree {
	min-width:40px;
	max-width:125px;
}
.double-tab {
	margin-left: 80px; 
	margin-top: 16px;
}
.fancy {
  text-align: center;
  font-variant:small-caps;
  margin:25px auto;
}
.fancy:before,
.fancy:after {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  content: "";
  display: inline-block;
  height: .1em;
  margin-bottom: .25em;
  position: relative;
  width: 33%;
}
.fancy:before {
    right: .5em;
    margin-left: -50%;
}
.fancy:after {
    left: .5em;
    margin-right: -50%;
}
.fancy-name {
	font-size: 2em;
	line-height:40px;
	text-shadow: #CCC 0.1em 0.1em 0.2em;
	margin-right: 1px;
	margin-left: 1px;
}
hr.flair {
	margin:15px 10px;
	border:0;
	height:2px;
	background:#2128AC;
	background-image: -webkit-linear-gradient(left, #4AE5F3 #2128AC, #4AE5F3); 
    background-image:    -moz-linear-gradient(left, #4AE5F3, #2128AC, #4AE5F3); 
    background-image:     -ms-linear-gradient(left, #4AE5F3, #2128AC, #4AE5F3); 
    background-image:      -o-linear-gradient(left, #4AE5F3, #2128AC, #4AE5F3); 
}
p.first-letter:first-letter {
	font-size:240%;
}
.footer {
	position:fixed;
	bottom:0px;
	height:30px;
	background:rgba(68,68,68, 0.9);
	border: 3px inset white;
	border-bottom:hidden;
	border-radius:60px 60px 0px 0px;
}
.icon-space {
	margin: 2px;
}
#index  {
	width: 100%;
	color: #FFF;
	text-align: center;
	padding:10px;
	font: 300 16px/20px;
}
.italic {
	font-style:italic;
}
.justify {
	text-align:justify;
}
.left-align {
	text-align:left;
}
.main-image {
	border-radius: 35px;
}
.margin5 {
	margin:5px;
}
.margin20 {
	margin:20px;
}
.margin50 {
	margin:50px;
}
#news {
	max-width:650px;
	font:16px/19px serif;
	margin:0 auto;
}
.pad5 {
	padding:5px;
}
.pad20 {
	padding:20px;
}
.pad50 {
	padding:50px;
}
.right-align {
	text-align:right;
}
.sans {
	font-family:Helvetica, Gotham, "Helvetica Neue", Arial, sans-serif;
}
.shadow-text {
	text-shadow: #CCC 0.1em 0.1em 0.2em;
}
.tab { 
	margin-left: 40px;
	padding-top:25px;
}
#teaching-philosophy {
	max-width:650px;
	margin-left:auto;
	margin-right:auto;
}
.wide650 {
	max-width:650px;
	margin:0 auto;
}

/* Navigation CSS */
nav.cv-nav {
	margin: 0px auto;
	overflow: hidden;	
}
nav.cv-nav ul  {
	list-style: none;
	overflow: hidden;
	width:100%;
}
nav.cv-nav li a {
	width:60px;
	padding: 5px 2px;
	text-align: center;
	text-decoration: none;
	font: 300 11px/20px sans-serif;
	display: block;
	margin:0 auto;
	border-radius:0;
	color:white;
	border-right: 1px solid #fff;
	float: left;
}
nav.cv-nav li:last-child a {
	border: none;
	width:70px;
	text-align:left;
	padding-left:8px;
}
nav.cv-nav li:first-child a {
	width:50px;
	text-align:right;
	padding-right:8px;
}
/* ~~ miscellaneous float/clear classes ~~ */
.floatright {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.floatleft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


/* Responsive nav menu with help from http://demo.html5xcss3.com/demo.php?url=http://dabblet.com/gist/2030070 */

nav.mainnav {
	width: 80%;
	margin: 0px auto;
	overflow: hidden;	
}

nav.mainnav ul {
	list-style: none;
	overflow: hidden;
}

nav.mainnav li a {
	background-color: rgba(68,68,68, 0.7);
	border-right: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	font: 400 25px/28px 'FontAwesome';
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	width: 12.5%;
	
	
	/*TRANSITIONS*/
	-webkit-transition: background 0.5s ease;
	   -moz-transition: background 0.5s ease;
	     -o-transition: background 0.5s ease;
	    -ms-transition: background 0.5s ease;
	        transition: background 0.5s ease;
}

/*HOVER*/
nav.mainnav li a:hover {
	background: #222;
}

/*SMALL*/
nav.mainnav small {
	font: 100 14px/16px 'Source Serif Pro', serif;
	text-transform: uppercase;
	color: #aaa;
}

/*BORDER FIX*/
nav.mainnav li:last-child a {
	border: none;
	border-radius: 0 0 25px 0;
}
nav.mainnav li:first-child a {
	border-radius: 0 0 0 25px;
}
/* MEDIA QUERIES*/
/* This section for screen between 930px-1220px (small laptops) */
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
nav.mainnav li a {
		font: 400 22px/24px 'Source Serif Pro', serif;
	}
	
nav.mainnav small {
		font: 100 12px/14px 'Source Serif Pro', serif;
	}
#teaching-philosophy {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}
	
}

/* This section for screens between 580px-930px (tablets) */
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav.mainnav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		font: 300 16px/18px 'Source Serif Pro', serif;
	}
	
nav.mainnav li:last-child a, nav.mainnav li:nth-child(4) a {
		border-right: none;
	}
nav.mainnav li:first-child a {
		border-radius: 0;
	}
nav.mainnav li:nth-child(5) a {
		border-radius: 0 0 0 25px;
	}	
nav.mainnav li:nth-child(5) a, nav.mainnav li:nth-child(6) a, nav.mainnav li:nth-child(7) a, nav.mainnav li:nth-child(8) a {
		border-bottom: none;
	}
.pad50 {
	padding:15px;
}
.margin50 {
	margin:15px;
}
#teaching-philosophy {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}


}
/* This section for screens between 320-580 (phablets, phones in landscape) */
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav.mainnav li a {
		width: 50%;
		font: 400 18px/20px 'Source Serif Pro', serif;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	
nav.mainnav li:nth-child(even) a {
		border-right: none;
	}
	
nav.mainnav li:nth-child(5) a, nav.mainnav li:nth-child(6) a {
		border-bottom: 1px solid #fff;
	}
nav.mainnav li:nth-child(5) a {
		border-radius: 0;
	}
nav.mainnav li:nth-child(7) a {
		border-radius: 0 0 0 25px;
	}
.pad50 {
	padding:10px;
}
.margin50 {
	margin:10px;
}
#teaching-philosophy {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}


}
/* This section for screens at 320px and below (phones in portrait) */
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav.mainnav li a {
		font: 400 12px/14px 'Source Serif Pro', serif;
		padding-top:16px;
		padding-bottom:16px;
	}
.pad50 {
	padding:5px;
}
.margin50 {
	margin:5px;
}
#teaching-philosophy {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}


}

/*GREY MENU*/

nav.grey li a {
	background-color: rgba(68,68,68, 0.7);
}

nav.grey small {
	color: white;
}

li#active a {
	background-color:rgba(34,83,159,0.75);
}

.grey li a:hover, a:active, a:focus {
	background-color: rgba(199,201,212, 0.7);
}