@font-face {
    font-family: CabinRegular;
    src: url(../fonts/Cabin-Regular.woff);
}

@font-face {
    font-family: PTSerifRegular;
    src: url(../fonts/PTSerif-Regular.woff);
}

@font-face {
    font-family: PTSerifBold;
    src: url(../fonts/PTSerif-Bold.woff);
}

@font-face {
    font-family: PTSerifItalic;
    src: url(../fonts/PTSerif-Italic.woff);
}

@font-face {
    font-family: JuliusSansOne;
    src: url(../fonts/JuliusSansOne-Regular.woff);
}

@font-face {
    font-family: NahuatlOne;
    src: url(../fonts/NahuatlOne_2019_06_25.otf);
}


@font-face {
    font-family: Hariphunchai;
    src: url(../fonts/Hariphunchai4.otf);
}

body{
	font-family:"PTSerifRegular",serif;
	font-size:15pt;
	overflow-y:hidden;
	margin:0;
}

i, em{
	font-family:"PTSerifItalic",serif;
	font-style:normal;
}

b, strong{
	font-family:"PTSerifBold";
}

.nwt{
  font-family:NahuatlOne;
  font-size:30pt;
}

.ttm{
  font-family:Hariphunchai;
  font-size:44pt;
}

h1{
	font-family:"JuliusSansOne",sans-serif;
	font-weight:normal;
	font-size: 22pt;
	background-color:#eee;
	margin:0;
	margin-top:1.5vw;
	padding:0.4vw;
	padding-left:7vw;
	padding-right:7vw;
	clear:both;
}

h2{
	font-family:"JuliusSansOne",sans-serif;
	font-weight:normal;
	font-size: 22pt;
	background-color:#eee;
	margin:0;
	margin-top:2.2vw;
	margin-bottom:1vw;
	padding:0.4vw;
	padding-left:2vw;
	padding-right:7vw;
	clear:both;
}

.clear_float{
	clear:both;
}

.center{
	text-align:center;
}

p{
	line-height:160%;
	text-align:justify;
}

li{
	margin-bottom:1.5vw;
}

.smaller_list > li{
	margin-top:0;
	margin-bottom:1vw;
	text-align:left;
}

.container_div_001{
	padding-top:2vw;
	float:left;
	margin:0;
}

p:first-of-type::first-letter{
	display:block;
	float:left;
	font-size:87pt;
	padding:4pt;
	padding-left:0;
	height:0.6em;
	line-height:0.67em;
}


p::first-letter{
	display:block;
	float:left;
	font-size:87pt;
	padding:4pt;
	padding-left:0;
	height:0.6em;
	line-height:0.67em;
}

.contact_info{
	display:block;
	padding:7pt;
	margin-top:0;
	margin-left:0;
	margin-right:2vw;
	margin-bottom:1vw;
	background-color:#eee;
	border:2px solid black;
	line-height:160%;
	text-align:left;
	float:left;
	width:55vw;
}
.parallax {
  perspective: 1000px;
  //perspective-origin:50vw 10vh;
  height: 100vh;
  overflow-x: hidden; 
  overflow-y: auto; 
}

.parallax_layer{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax_layer_back{
  transform: translateZ(-1000px) scale(2);
}

.parallax_layer_front{
  transform: translateZ(0);
  background-color:#fff;
  top:68vw;
  height:150vh; /* Height needs to be enough to cover the deeper Z layer */
}

.banner_region{
	/* background-color:orange; */
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:70vw;
}	

.banner_image{
	display:block;
	position:absolute;
	left:7vw;
	top:7vw;
	width:86vw;
}

.banner_text{
	position:absolute;
	left:11vw;
	top:11vw;
	font-family:"JuliusSansOne",sans;
	font-size:2.3vw;
	background-color:#fff;
	opacity:0.85;
	//border-radius:0.85vw;
	padding:1vw;
}
		
.lab_intro{
	position:absolute;
	margin-left:11vw;
	margin-top:18vw;
	width:31vw;
	max-height:40vw;
	text-align:justify;
	font-family:"PTSerifRegular",serif;
	//font-size:1.3vw;
	font-size:15pt;
	background-color:#fff;
	opacity:0.93;
	//border-radius:0.85vw;
	padding:2vw;
	overflow:auto;
	line-height:160%;
}

.lab_intro::first-letter{
	display:block;
	float:left;
	font-size:87pt;
	padding:4pt;
	padding-left:0;
	height:0.6em;
	line-height:0.67em;
}

.photo_caption{
	font-family:"PTSerifItalic",serif;
	/* font-style:italic; */
	font-size:15pt;
	padding:3pt;
	padding-left:5pt;
	padding-right:5pt;
	background-color:#eee;
}

#banner_caption{
	position:absolute;
	right:9vw;
	top:48vw;
	background-color:rgba(238,238,238,0.7);
}
	
a{
	/* color:#688aa9; original does not meet WCAG */
        color:#3F5A74;
	text-decoration:none;
	transition:all .5s ease-in-out;
	padding:3px;
	border-radius:7px; 
	font-family:"PTSerifBold";
}

a:hover{
	color:#fff;
	background-color:#8ab6e0;
}

.top_menu{
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding-top:5pt;
	padding-bottom:5pt;
	padding-right:7vw;
	/* background-color:#eee; */
	/* opacity:0.90; */
	z-index:1;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+47,eeeeee+100&0+0,0.9+47,0.9+100 */
    background: -moz-linear-gradient(left,  rgba(238,238,238,0) 0%, rgba(238,238,238,0.9) 47%, rgba(238,238,238,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,0)), color-stop(47%,rgba(238,238,238,0.9)), color-stop(100%,rgba(238,238,238,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(238,238,238,0) 0%,rgba(238,238,238,0.9) 47%,rgba(238,238,238,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(238,238,238,0) 0%,rgba(238,238,238,0.9) 47%,rgba(238,238,238,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(238,238,238,0) 0%,rgba(238,238,238,0.9) 47%,rgba(238,238,238,0.9) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(238,238,238,0) 0%,rgba(238,238,238,0.9) 47%,rgba(238,238,238,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eeeeee', endColorstr='#e6eeeeee',GradientType=1 ); /* IE6-9 */

}

.top_menu_push_right{
	display:block;
	float:right;
}

.top_menu a{
	display:block;
	float:left;
	text-decoration:none;
	margin-left:0.2vw;
	padding:0.2vw;
	padding-left:0.4vw;
	padding-right:0.4vw;
	border-radius:1vw;
	font-family:"JuliusSansOne";
	font-size:15pt;
	color:#000;
}

.top_menu a:hover{
	background-color:#8ab6e0;
	color:#fff;
}

.content_container{
	padding-left:7vw;
	padding-right:7vw;
}	

.wide_columnizer{
	margin-top:1vw;
    -webkit-column-width:12cm; /* Chrome, Safari, Opera */
    -moz-column-width:12cm; /* Firefox */
    column-width:12cm;
    -webkit-column-count:auto; /* Chrome, Safari, Opera */
    -moz-column-count:auto; /* Firefox */
    column-count:auto;
    -webkit-column-gap:2vw;
    -moz-column-gap:2vw;
    column-gap:2vw;
    -webkit-column-rule:2px solid black;    
    -moz-column-rule:2px solid black;    
    column-rule:2px solid black;    
}

li{
	text-align:justify;
}

.list_columnizer{
    -webkit-column-width:15cm; /* Chrome, Safari, Opera */
    column-width:15cm;
}

.photo_on_left_holder{
	display:block;
	float:left;
	margin-left:0;
	margin-top:0;
	margin-right:2vw;
	margin-bottom:1vw;
}

.photo_on_right_holder{
	display:block;
	float:right;
	margin-left:2vw;
	margin-top:0;
	margin-right:0;
	margin-bottom:1vw;
}

.medium_size_photo{
	display:block;
	width:30vw;
}

.jre_photo{
	display:block;
	width:30vw;
}

.clear_float{
	clear:both;
}

.photo_on_right{
	display:block;
	float:right;
	margin-right:0;
	margin-top:0;
	margin-left:2vw;
	margin-bottom:0;
	width:30vw;
}

.full_width_image{
	width:84vw;
}

/* first author class */
.fa{
	font-family:"PTSerifBold",serif;	
	color:#3F5A74;
}

.ytembed{
  margin-left:auto;
  margin-right:auto;
  width:560px;
}

.imref{
  text-decoration: none;
  padding:0;
  border-radius:0;
}

.imref img{
  transition: all .5s ease-in-out;
}

.imref img:hover{
  filter:contrast(125%) drop-shadow(0px 0px 7px #aaa) ;
  width:(100% * 1.2);
  border-radius:7px;
}

.h1ctr{
  text-align:center;
}

/* ===== 1280px (TYPICAL TABLET) DEVICE ==== */
@media screen and (max-width:1280px) {
 body{
	/* FOR TESTING PURPOSES:  */
 	/* background-color:#bd0; */
 }
 .lab_intro{
        width:70vw;
        font-size:12pt;
 }
 .top_menu a{
	font-size:13pt;
 }

 .photo_caption{
        font-size:12pt;
 }

 p:first-of-type::first-letter{
	font-size:87pt;
 }	
 .lab_intro::first-letter{
	font-size:70pt;
 }
 .medium_size_photo{
 	width:45vw;
 }

 .jre_photo{
	width:30vw;
 }
}

/* ===== 640px (TYPICAL SMART PHONE) DEVICE ==== */
@media screen and (max-width:640px) {
 body{
	/* FOR TESTING PURPOSES:  */
 	/* background-color:#fda; */
 }
 .lab_intro{
        width:70vw;
	font-size:10pt;
 }

 .top_menu a{
	font-size:12pt;
 }

 .photo_caption{
        font-size:10pt;
 }

 p:first-of-type::first-letter{
	font-size:55pt;
 }	
 .lab_intro::first-letter{
	font-size:55pt;
 }
 .medium_size_photo{
 	width:84vw;
 }
 .jre_photo{
	width:50vw;
 }
}