@charset "utf-8";
/* CSS Document */

:root{
	--8020-gray:#576B6C;
	--8020-orange:#EA8719;	
}

@font-face {
    font-family:"Carme-Regular";
    src: url(../../asset/font/Carme-Regular.ttf);				 
}

@font-face {
    font-family:"UBR";
    src: url(../../asset/font/Ubuntu-R.ttf);				 
}

*{
	padding:0;
	margin:0;
	box-sizing: border-box;
}

body, html{
	height:100%;
}

body{	
	font-family:"UBR", Verdana, Geneva, sans-serif;
	font-size:24px;
	line-height:1.25em;
	text-align:center;
	/*
	background-image: linear-gradient(#096 10%, #096 20%, #EEEEFF 20%, #EEEEFF 99%, #234 98%, #234 100%);
	
	
	*/
	background-color:#576B6C;
	color:#FFF;	
}

h1, h2, h3, h4{
	font-family:UBR, Verdana, Geneva, sans-serif;	
	text-align:left;	
	color:#FFF;
}

h1{
	padding:1em 0 .25em;
	font-size:2em;
	font-weight:normal;
}

p{
	padding:1em 0;
	font-size:.875em;
	text-align:left;
}

.page-box{
	margin:0 auto;
	
	width:100%;
	max-width:1200px;
}

#hdrEnv{
	background-color:#FFF;
}

#hdr{
	
}

#hdr p{
	text-align:left;
	padding:1em;
}

#hdr p img{
	width:100%;
	max-width:5.5em;
	height:auto;
}

#page{	

}

#cntEnv{
	position:relative;
	padding:2em 0;
	background-color:#EA8719;
}

#cnt{
	padding:4em 0;	
}

#cntBtm{
	border-top:1px solid #CCC;
}

.author{
	padding:1em;
	text-align:left;
	font-size:.5em;
	color:#CCC;
}

.author a{
	color:#FFF;
}

.author a:hover{
	color:#CCC;
	text-decoration:none;
}

#locationListingEnv{
	padding:1em;
	overflow:auto;
	height:640px;	
}

#locationListingEnv h3{
	padding:.5em .25em .25em;
	border-bottom:2px solid #CCC;
	margin:0 .5em;
	/* text-shadow:.125em .125em .125em #AAA; */
}

.letter-navigation{
	padding:.75em 1.25em;
	text-align:left;
	background-color:#EEE;
	border-bottom:1px solid #CCC;
}

.letter-navigation a{
	padding:.25em .5em;
	color:var(--8020-gray);
	text-decoration:none;
}

.letter-navigation a:hover{
	background-color:var(--8020-gray);
	color:#FFF;
}


.box-location{
	padding:.25em .5em;
}

.box-location p{	
	text-align:left;
	color:#CCC;
}

.box-location p a{
	padding:.5em .5em;
	text-decoration:none;
	display:block;
	
	color:var(--8020-gray);
	position:relative;
	
	background-image: linear-gradient(40deg, #DDD, #EEE, #FFF, #EEE, #EEE, #DDD);
	border:1px solid #EEE;
	transition:all .5s;
}

.box-location p a:hover{
	background-image: linear-gradient(40deg, #CCC, #DDD, #EEE, #FFF, #EEE, #DDD);
	border:1px solid #CCC;
}

.pattern-bg-one{
	background-image:url(../../img/denim.webp);
	background-repeat:repeat;
}

#overlayEnv{
	position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.88); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

#overlayHeader{
	position:relative;
}

#overlayHeader a{
	position:absolute;
	z-index:18;
	
	top:-1em;
	right:-1em;
	
	text-decoration:none;
	
	display:inline-block;
	background-color:#FFF;
	border:2px solid #F40;
	
	border-radius:50%;
	line-height:1em;
	
	text-align:center;
	
	width:2em;
	height:2em;
	padding:.25em 0 0;
	
	color:#000;
	box-shadow:inset 0 0 .25em rgba(88, 88, 88, .75);
	transition:all .5s;
}

#overlayHeader a:hover{
	box-shadow:inset 0 0 .25em rgba(42, 42, 42, .75);
	border:2px solid #F00;
}
	
#overlayContent{
	max-width:480px;
	width:100%;
	padding:0;
	background-color:#FFF;
	margin:0 auto;
	
	top:18%;
	position:relative;
	box-shadow:0 0 .25em 0 rgba(0,0,0,.5);
}	

#overlayContent h1{
	font-size:1em;
	border-bottom:1px solid #EEE;
	padding:.5em;
	color:var(--8020-gray);
}

#overlayContent h1 span{
	display:block;
}

#overlay{
	padding:2em .5em;
}

#overlay form input
{
	display:block;
	padding:.5em;
	text-align:left;
	width:100%;
	margin:.125em;
	border-radius:.25em;
	border:1px solid #888;
	box-shadow:inset 0 .125em .25em rgba(100, 100, 100, .5);
}

#overlay form input[type="submit"]
{
	width:auto;
	text-align:center;
	background:linear-gradient(var(--8020-orange), #D40, var(--8020-orange), #E80);
	padding:.5em 2em;
	color:#FFF;
	border:1px solid var(--8020-orange);
	border-radius:.25em;
	text-transform:uppercase;
	box-shadow:none;
}

#overlay form input[type="submit"]:hover
{
	background:linear-gradient(#D42, var(--8020-orange), var(--8020-orange), #D80);
	cursor:pointer;
}

#overlayFooter{
	background-color:var(--8020-gray);
	border-bottom:1px solid #000;
}

/* small */
@media (max-width: 992px) {
	
	#cnt .p25{
		width:50%;
	}
	
	#cntTop{
		left:1em;
	}
	
	#overlayEnv{
		padding:0 1em;
	}
	
	#overlayContent{
	  max-width: 480px;
		min-width: 320px;
    width: 100%;
    padding: 0;
    background-color: #FFF;
    margin: 0 auto;
    top: 18%;
    position: relative;
    box-shadow: 0 0 .25em 0 rgba(0,0,0,.5);
	}
	
}

/* small */
@media (max-width: 768px) {
	
	#cnt .p25{
		width:50%;
	}
}

/* extreme small */
@media (max-width: 576px) {
	#cnt .p25{
		float:none;
		width:100%;
	}
	
	h1{
		font-size:1.5em;
	}
	
		#overlayContent{
	  max-width: 240px;
		min-width: 120px;
    width: 100%;
    padding: 0;
    background-color: #FFF;
    margin: 0 auto;
    top: 18%;
    position: relative;
    box-shadow: 0 0 .25em 0 rgba(0,0,0,.5);
	}
}