/* 100% equals 16px for most browsers*/
/*target px / content 16px = em result*/
/*phone5*/
@media all and (min-width: 0em) {
	body {
		font-size: .75em; /*12px/16px*/
	}
	.menu {
		font-size: 1.1875em; /*19px/16px*/
	}
	.menu_pages {
		font-size: 1.1875em; /*19px/16px*/
	}
	.nav {
		font-size: 1.1875em; /*19px/16px*/
	}
	.about {
		margin: auto;
		width: 95%;
	}
}
/*tablet10*/
@media all and (min-width: 30em) { /*800*/
	body {
		font-size: .875em; /*14px/16px*/
	}
	.menu {
		font-size: 1.1875em; /*19px/16px*/
	}
	.menu_pages {
		font-size: 1.1875em; /*19px/16px*/
	}
	.nav {
		font-size: 1.1875em; /*19px/16px*/
	}
	.about {
		margin: auto;
		width: 95%;
	}
}
/*Laptop*/
@media all and (min-width: 60em /*1280*/) {
	body {
		font-size: .9375em; /*15px/16px*/
	}
	.menu {
		font-size: 1.25em; /*20px/16px*/
	}
	.menu_pages {
		font-size: 1.25em; /*20px/16px*/
	}
	.nav {
		font-size: 1.25em; /*20px/16px*/
	}
	.about {
		margin: auto;
		width: 75%;
	}
}
/*Desktop*/
@media all and (min-width: 120em /*1920*/) {
	body {
		font-size: 1.10625em; /*17px/16px*/
	}
	.menu {
		font-size: 1.375em; /*22px/16px*/ ;
	}
	.menu_pages {
		font-size: 1.375em; /*22px/16px*/
	}
	.nav {
		font-size: 1.375em; /*22px/16px*/
	}
	.about {
		margin: auto;
		width: 65%;
	}
}
/*start of Menu*/
.menu {
	background: #ffc;
	border: 1px solid #ccc;
	color: #00f;
	padding: .25em;
	position: fixed;
	right: .25em;
	text-align: center;
	top: -.75em;
	z-index: 5;
}
.nav nav {
	float: left;
	width: 9em;
}
.nav {
	display: none;
}
/*iOS use onclick="" to recognize hover*/
.menu_nav:hover .nav {
	background: #ffc;
	display: block;
	position: fixed;
	right: .25em;
	top: -.5em;
	z-index: 6;
}
.menu_nav:hover ul > li {
	list-style-type: none;
}
/*end of Menu*/

/*start of pages*/
.menu_pages {
	background: #ffc;
	border: 1px solid #ccc;
	color: #00f;
	padding: .25em;
	position: fixed;
	right: .25em;
	text-align: center;
	top: 3.5em;
	z-index: 5;  
}
.nav_pages nav {
	float: left;
	width: 10.5em;
}
.nav_pages {
	display: none;
}
/*iOS use onclick="" to recognize hover*/
.menu_pages_nav:hover .nav_pages {
	background: #ffc;
	border: 1px solid #ccc;
	display: block;
	position: fixed;
	right: .25em;
	top: 3em;
	z-index: 6;
}
.menu_pages_nav:hover ul > li {
	list-style-type: none;
}
/*end of pages*/

/*Page style*/
h3 {
	/*linear-gradient top to bottom is default*/
	background: #ccc; /*no support*/
	background: -webkit-linear-gradient(#ccc, #ffc); /*Safari 5.1 to 6.0, Chrome*/
	background: -o-linear-gradient(#ccc, #ffc); /*Opera 11.1 to 12.0*/
	background: -moz-linear-gradient(#ccc, #ffc); /*Firefox 3.6 to 15*/
	background: linear-gradient(#ccc, #ffc); /*standard syntax*/
	color: #00f;
	font-family: Lucida Console, sans-serif;
	padding: .5em;
}
h3 + p {
	background: #ffc;
	padding: 1em;
}

a:hover {
	background-color: #ccc; 
	color: #06c; 
}
/*start quotation marks*/
.blockquote_q_m {
	margin: auto;
	margin-bottom: -4em;
	position: relative;
	width: 80%;
}
.blockquote_q_m p {
	font-family: Courier New, serif;
	margin: auto;
	margin-top: -3em; 
	position: relative;
	z-index: 1;
}
/*> direct child selector*/
.blockquote_q_m > cite {
	color: #aaa;
	display: block;
	text-align: right;
}
/*add quotation marks*/
.blockquote_q_m:after, .blockquote_q_m:before {
	color: #69f;
	font-family: serif;
	font-size: 6em;
	position: relative;
	z-index: 1;
}
/*before and after selectors using content: "\character codes"; or open-quote and close-quote codes are standards for some browsers*/
.blockquote_q_m:before {
	content: "\201C";
	display: block;
	text-align: left;
}
.blockquote_q_m:after {
	content: "\201D";
	display: block;
	text-align: right;
}
.blockquote_q_m > cite:before {
	content: "-- ";
}
/*end quotation marks*/

/*start speech bubble, css-tricks.com/examples/ShapesOfCSS/ */
.blockquote_bubble {
	/*linear-gradient top to bottom is default*/
	background: #ccc; /*no support*/
	background: -webkit-linear-gradient(#ffc, #ccc); /*Safari 5.1 to 6.0, Chrome*/
	background: -o-linear-gradient(#ffc, #ccc); /*Opera 11.1 to 12.0*/
	background: -moz-linear-gradient(#ffc, #ccc); /*Firefox 3.6 to 15*/
	background: linear-gradient(#ffc, #ccc); /*standard syntax*/
	border-radius: 20px;
	margin: auto;
	margin-bottom: 6em;
	padding: 15px 30px;
	position: relative;
	width: 70%;
}
.blockquote_bubble p {
	color: #006;
	font-family: Segoe Script;
	margin: auto;
	margin-top: 0em; 
	position: relative;
	z-index: 1;
}
/*> direct child selector*/
.blockquote_bubble > cite {
	color: #006;
	font-family: Segoe Script;
	bottom: -60px;
	left: 50px;
	display: block;
	position: absolute;
}
/*create bottom triangle*/
.blockquote_bubble:after {
	border-color: transparent #ccc;
	border-style: solid;
	border-width: 0 15px 50px 0px;
	content: ""; /*create new content element to style its borders*/
	display: block;
	bottom: -40px;
	left: 40px;
	position: absolute;
	width: 0;
	z-index: 1;
}
/*end speech bubble*/

textarea.lease_textarea__class {
	height: 21em; 
	font: 95% verdana, sans-serif;
}

/*Cosigner left margin*/
.leftMargin {margin-left: 4em; }

/*start content placement*/

.section_content {
	margin: auto;
	margin-top: 1em;
	width: 90%;
}

@media all and (min-width: 80em) {
	.section_content {
		float: left;
		width: 50%;
	}
	
}
/*end content placement*/

/*start slideshow */

.el_fullscreen {
	background:#000;
	display:block;
	margin: auto;
	position: relative;
}

.el_slideshow {
	/*stack figure slides*/
	background:#000;
	margin:auto;
	position:relative;
	width:90%;
}
.el_slideshow:focus {
	/*define no outline outside of a border, if any*/
	outline: none;
}
.el_slideshow figure {
	/*stack each slide that includes an img and figcaption*/
	background:#000;
	position:absolute;
	margin:auto;
	top:0;
	width:100%;
}

.el_slideshow figure:first-child {
	/*give height to container*/
	position: relative;
}
/*select all <img> elements while the parent is a <figure> element*/
.el_slideshow figure img {
	/*make invisible, then fade in and out*/
	margin-left: 5%;
	position: relative;
	opacity: 0;
	transition: opacity 1.5s;
	-webkit-transition: opacity 1.5s;
	width: 90%;
}

.el_slideshow .figure_show {
	z-index: 3;
}
.el_slideshow .figure_show img {
	opacity: 1;
}
.el_slideshow figcaption {
	/*make invisible, then fade in/out*/
	background: rgba(0,0,0, .5);
	border-radius: 4px;
	color: #fff;
	font-family: Lucida Console, sans-serif;
	padding: 1%;
	position: absolute;
	top: 1%;
	left:5%;
	transition: opacity 1.5s;
	-webkit-transition: opacity 1.5s;
	opacity: 0;
	width:90%;
}
.el_slideshow .figure_show figcaption {
	/*show first figure*/
	opacity: 1;
	z-index: 2;
}
.slideshow_prev, .slideshow_next {
	/*position*/
	display:block;
	position: absolute;
	top: 50%;
	z-index: 4;
	/*appearance*/
	background: rgba(0,0,0, .6);
	color: #fff;
	font-size: 3em;
	text-align:center;
	opacity: .6;
	padding: 1%;
	/*usability feature is non-standard and is not on a standards track: user-select: none;*/
}
.slideshow_prev:hover, .slideshow_next:hover {
	cursor: pointer;
	opacity: 1;
}
.slideshow_prev {
	left: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.slideshow_next {
	right: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.el_fullscreen .fs_open_img {
	display: block;
	position: absolute;
	top:.5%;
	left:2%;
	z-index: 4;
	background: transparent url(/images_icons/full_screen_square_open.png) center/contain no-repeat;
	width:5%;
	height:8%;
	opacity: .9;
}
.el_fullscreen .fs_exit_img {
	display: none;
	position: absolute;
	top:.5%;
	left:2%;
	width:5%;
	height:8%;
	opacity: .9;
}
.el_fullscreen .fs_open_img:hover, .el_fullscreen .fs_exit_img:hover {
	cursor: pointer;
	opacity: 1;
}

.pause_touch_img {
	color:white;
	display: block;
	font-weight:bold;
	position: absolute;
	top: 1%;
	right:-2%;
	z-index: 4;
	background: transparent url(/images_icons/pause.png) center/contain no-repeat;
	width:5%;
	height:7.49999996%;
	opacity: .9;
}
.play_touch_img {
	color:white;
	display: none;
	font-weight:bold;
	position: absolute;
	top: 1%;
	right: -2%;
	z-index: 4;
	background: transparent url(/images_icons/play.png) center/contain no-repeat;
	width:5%;
	height:6.67%;
	opacity: .9;
}
.pause_touch_img:hover, .play_touch_img:hover {
	cursor: pointer;
	opacity: 1;
}

/*https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen Unknown pseudo-class or pseudo-element ‘- ’.  Ruleset ignored due to bad selector.*/
/*.el_fullscreen:-webkit-full-screen .fs_exit_img {
	display: block;
	z-index: 4;
	background: url(/images_icons/full_screen_square_exit.png) center no-repeat;
	-webkit-background-size: contain;
}*/
.el_fullscreen:-moz-full-screen .fs_exit_img {
	display: block;
	z-index: 4;
	background: url(/images_icons/full_screen_square_exit.png) center/contain no-repeat;
}
/*.el_fullscreen:-ms-fullscreen .fs_exit_img {
	display: block;
	z-index: 4;
	background: url(/images_icons/full_screen_square_exit.png) center/contain no-repeat;
}
.el_fullscreen:-o-fullscreen .fs_exit_img {
	display: block;
	z-index: 4;
	background: url(/images_icons/full_screen_square_exit.png) center/contain no-repeat;
}*/
.el_fullscreen:fullscreen .fs_exit_img {
	display: block;
	z-index: 4;
	background: url(/images_icons/full_screen_square_exit.png) center/contain no-repeat;
}

/*.el_fullscreen:-webkit-full-screen {
	position:fixed;
	top:0;
	width:100%;
	cursor: pointer;
	overflow:auto;
}*/
.el_fullscreen:-moz-full-screen {
	position:fixed;
	top:0; 
	right:0; 
	bottom:0; 
	left:0;
	margin:0;
	box-sizing:border-box;
	width:100%;
	height:100%;
	object-fit:contain;
	/*cursor no change*/
	cursor: pointer;
	overflow:auto;
}
/*.el_fullscreen:-ms-fullscreen {
	margin:auto;
	width:auto;
	height:auto;
	cursor: pointer;
	overflow:auto;
}
.el_fullscreen:-o-fullscreen {
	position:fixed;
	top:0; 
	right:0; 
	bottom:0; 
	left:0;
	margin:0;
	box-sizing:border-box;
	width:100%;
	height:100%;
	object-fit:contain;
*cursor no change*
	cursor: pointer;
	overflow:auto;
}*/
.el_fullscreen:fullscreen {
	position:fixed;
	top:0;
	width:100%;
	background:none;
	cursor: pointer;
	overflow:auto;
}
/*	end of slideshow*/

/*barnegat*/
.figure_single img{
	margin: auto;
	width: 100%;
}
/*start read more*/
.read_more {
	background: #cfc;
	cursor: pointer;
	display: block;
	font-weight: bolder;
	margin: inherit;
	width: 10%;
}
.expand {
	background: #cfc;
	display: none;
	margin: auto;
	padding: .5em;
	width: 90%;
}
.read_more:hover + .expand {
	display: block;
}
.read_more:focus + .expand {
	display: block;
}
/*end read more*/

/*display: values; to mix fixed and fluid-width columns instead of nested <div id="container"s>*/

/*container1*/
.container1 {
	margin: inherit;
	width: 96%;
}

/*container1a index.php Rent*/
.container1a {width: 96%; margin: inherit; }

.marginfigure figure {margin: inherit; }
.percentageimg img {width: 100%; height: auto; 
}

figure img {
	width: 100%; height: auto;
}

@media all and (max-width: 37.5em) {
	.figure figure {
		float: left; 
		width: 30%; margin-right: 2%;
	}
	.figure figure:last-child {
		margin-right: 0;
	}
}

/*index.php Rent*/
@media all and (max-width: 37.5em) {
	.figure figure {
	float: left; 
	width: 30%;
	margin-right: 2%;
	}
	.figure figure:last-child {
		margin-right: 0;
	}
}

/*container2*/
/*container2 index.php Rent*/
.container2 {width: 96%; margin: inherit; }

/*Rental_Application.html*/
legend {font-weight: bold;}

/*hiyl index.php*/
.survey {
	display: block;
	text-align: center;
	background: #f90;
	padding: .5em;
	font: 1.25em verdana, sans-serif;
	/*linear-gradient top to bottom is default*/
	background: #f90; /*no support*/
	background: -webkit-linear-gradient(#f90, #fc9); /*Safari 5.1 to 6.0, Chrome*/
	background: -o-linear-gradient(#f90, #fc9); /*Opera 11.1 to 12.0*/
	background: -moz-linear-gradient(#f90, #fc9); /*Firefox 3.6 to 15*/
	background: linear-gradient(#f90, #fc9); /*standard syntax*/
}

/*survey index.php*/
.container_survey {
	margin: auto;
	width: 90%
}

.error {color: #f00; }

/*surveyResults.php*/
.percentagevideo {
	text-align: center;
	margin: auto;
}
.percentagevideo video{
	 max-width: 100%; 
}

.container3 {
	width: 96%; 
	margin: inherit;
}

/*
Early Light Mahalo

Kailua-Kona Hawaii

creative work by Giano Rodriguez

copyright 2014

contact@homeinyourlife.com

There are no missed opportunities only new ones.
I shall observe and listen, and give my humble guidance, if asked.
The Observation of Universe:
expansion randomness conscious
conscience contraction expansion.
*/
 
/*general form media query: @media [not|only] type [and] (expr) { rules } */
/*type: all (default, but varies from browser to browser) braille embossed handheld print projection screen tty tv*/
/*optional keywords: and: more than one expression including type, not: negates the entire expression, or: use comma, only: hide older media queries from older browsers*/
/*expr: media features, some support min- or max- */
/*min-width: px/16px=em 320 20em, 600 37.5em, 860 53.75em, 940 58.75em or larger muti-column-layout modules*/