/*
font-family: 'Bevan', cursive;
font-family: 'Slabo 13px', serif;
font-family: 'Slabo 27px', serif;
font-family: 'Source Sans Pro', sans-serif;
*/

/****************************************************
 *	HTML TAGS
 ***************************************************/
 
* { 
	padding:0; 
	margin:0; 
}

html {
	min-height:100%;
	font-size:1em;
}

body {
	/*background-color:#000;*/
	font-family: 'Source Sans Pro', sans-serif;
}

a { 
	color:#000;
	outline:none; 
}

a img {
	border:none;
}

/****************************************************
 *	GLOBAL 
 ***************************************************/
 
.offFrameRight {
	/*left:150%;*/
}

.animated {
	display:none;
}

#imageCache {
	width:1px;
	height:1px;
	overflow:hidden;
}

/****************************************************
 *	MAIN 
 ***************************************************/
 
#wrapper {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	overflow:hidden;
}

/****************************************************
 *	HEADER
 ***************************************************/
 
#header {
	position:fixed;
	z-index:20;
	left:0;
	top:0;
}

#header h1 {
	padding:10px 20px 19px 20px;
	line-height:1em;
	background-color:#3b3633;
	color:#FFF;
	font-family: 'Bevan', cursive;
	font-weight:normal;
	font-size:4em;
}

#header h1 span {
	color:#139ea9;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	font-size:.8em;
}

#header div.subtitle {
	position:fixed;
	left:130px;
	top:65px;
	color:#c0c5ca;
	font-family: 'Slabo 13px', serif;
	font-size:1.16em;
}

#header .sectTitle {
	text-align:center;
	text-transform:uppercase;
	color:#3b3633;
	line-height:2.8em;
	font-family: 'Bevan', cursive;
	font-size:1em;
	background:url(../images/section-title-bg.png) repeat left top;
}

@media screen and (max-width: 600px) {

	#header h1 {
		padding:3px 10px 8px 10px;
		font-size:2.2em;
		
	}
	
	#header h1 span {
		font-size:.75em;
	}
	
	#header div.subtitle {
		font-size:.65em;
		left:69px;
		top:33px;
	}
	
	#header .sectTitle {
		line-height:5em;
		font-size:.55em;
	}
}

/****************************************************
 *	FOOTER
 ***************************************************/
 
#footer {
	position:fixed;
	z-index:20;
	left:1%;
	bottom:1%;
	color:#FFF;
	font-family: 'Slabo 27px', serif;
	font-size:2.25vmin;
}

.mobile #footer {
	font-size:3.5vmin;
}

/****************************************************
 *	BACKGROUND
 ***************************************************/
 
#background  {
	position:fixed;
	z-index:1;
	width:100%;
	bottom:0;
}

#background img {
	position:absolute;
	bottom:0;
	width:100%;
}

/****************************************************
 *	BACKGROUND FILL
 ***************************************************/
 
#backgroundFill {
	position:fixed;
	top:0; 
	left:0;
	z-index:-1;
	width:100vw;
	height:100vh;
}

#backgroundFill .bgFill {
	position:absolute;
	top:0; 
	left:0;
	width:100vw;
	height:100vh;
}

/****************************************************
 *	NAV BUTTONS
 ***************************************************/
 
#nav {
	position:fixed;
	z-index:20;
}

.navLandscape img.navButton {
	position:fixed;
	bottom:2%;
	right:3%;
	width:10%;
	cursor:pointer;
}

.navPortrait img.navButton {
	position:fixed;
	bottom:2%;
	right:3%;
	width:16%;
	cursor:pointer;
}

.navLandscape img.navButton-3 {
	bottom:.5%;
	width:9%;
}

.navPortrait img.navButton-3 {
	bottom:1%;
	width:18%;
}

#nav .offFrameRight {
	/*
	left:auto;
	right:-150%;
	*/
}

/****************************************************
 *	Frames 
 ***************************************************/

.frame {
	position:absolute;
	z-index:5;
	width:100%;
	height:100%;
}

.frame .house .contentBlock {
	display:none;
	position:absolute;
	z-index:10;
	font-size:5vmin;
	font-weight:normal;
	text-align:center;
	line-height:1em;
}

.frame .housePortrait .contentBlock {
	font-size:5.6vmin;
}

.frame .housePortraitSpecialCase .contentBlock {
	font-size:3.8vmin;
}

/*
.frame .houseSquarish .contentBlock {
	font-size:3.65vmin;
}
*/

.frame .house .contentBlock cite {
	font-style:normal;
}

.frame .house .contentBlock strong, .frame .house .contentBlock b {
	font-weight:900;
}

.frame .house .navButton {
	position:absolute;
	bottom:-9%;
	width:35%;
}

.frame .house {
	position:absolute;
	left:50%;
	width:85%;
}

.frame .houseLandscape {
	width:80%;
	bottom:7%;
}

.frame .housePortrait {
	width:120%;
	bottom:14%;
}

.frame .house .houseImage {
	position:relative;
	margin-left:-50%;
	width:100%;
}

/* frame 0 */

.frame-0 .house .contentBlock {
	position:absolute;
	left:-13%; 
	top:30%;
	width:26%;
	line-height:1em;
	font-weight:300;
}

.frame-0 .housePortraitSpecialCase .contentBlock {
	width:27%;
}

.frame-0 .house .birdAnimation {
	position:absolute;
	z-index:10;
	bottom:70%;
	left:26%;
	width:10%;
}

.frame-0 .housePortrait .birdAnimation {
	position:absolute;
	bottom:77%;
	left:20%;
}

.frame-0 .house .birdAnimation .birdImage {
	width:70%;
}

.frame-0 .house .carHeadlightLeft {
	position:absolute;
	z-index:11;
	bottom:6.5%;
	left:-54%;
	width:2.5%;
}

.frame-0 .house .carHeadlightRight {
	position:absolute;
	z-index:11;
	bottom:6.5%;
	left:-29.5%;
	width:2.5%;
}

.frame-0 .housePortrait .carHeadlightLeft,
.frame-0 .housePortrait .carHeadlightRight {
	bottom:5.5%;
}

.frame-0 .house .carImage {
	position:absolute;
	z-index:10;
	bottom:-3%;
	left:-58%;
	width:35%;
}

/* frame 1 */
.frame-1 .house .treeImage {
	position:absolute;
	z-index:10;
	left:-14%;
	bottom:-7%;
	width:30%;
}

.frame-1 .housePortrait .treeImage {
	width:27%;
	left:-12%;
}

.frame-1 .house .solarPanelImage {
	position:absolute;
	z-index:10;
	left:-59%;
	bottom:-2%;
	width:26%;
}

.frame-1 .house .contentBlock-coolRoof {
	left:-30%; 
	top:29%;
	width:20%;
}

.frame-1 .housePortraitSpecialCase .contentBlock-coolRoof {
	top:27%;
}

.frame-1 .housePortrait .contentBlock-coolRoof {
	top:26%;
}

.frame-1 .house .contentBlock-wellPlacedTrees {
	left:-9%; 
	top:37%;
	width:19%;
}

.frame-1 .house .contentBlock-properDuctwork {
	left:14%; 
	top:32%;
	width:20%;
}

.frame-1 .housePortraitSpecialCase .contentBlock-properDuctwork {
	top:29%;
}

.frame-1 .housePortrait .contentBlock-properDuctwork {
	top:28%;
	width:20%;
}

.frame-1 .house .contentBlock-stormWindows {
	left:-32.5%;
	top:64%;
	width:20%;
}

.frame-1 .housePortrait .contentBlock-stormWindows { 
	top:60%;
}

.frame-1 .housePortraitSpecialCase .contentBlock-stormWindows {
	top:58%;
}

.frame-1 .housePortrait .contentBlock-stormWindows {
	top:58%;
}

.frame-1 .house .contentBlock-solarPanels {
	left:-34%; 
	top:81%;
	width:22%;
}

.frame-1 .housePortraitSpecialCase .contentBlock-solarPanels {
	top:76%;
}

.frame-1 .housePortrait .contentBlock-solarPanels {
	top:75%;
	left:-34%;
	width:23%;
}

.frame-1 .house .contentBlock-programmableThermostat {
	left:14%; 
	top:69%;
	width:20%;
}

.frame-1 .house .treeAnimImage {
	position:absolute;
	z-index:11;
	left:-14%;
	bottom:-7%;
	width:30%;
}

.frame-1 .housePortrait .treeAnimImage {
	width:27%;
	left:-12%;
}


.frame-1 .house .solarPanelAnimImage {
	position:absolute;
	z-index:11;
	width:23%;
	left:-57.5%;
}

.frame-1 .houseLandscape .solarPanelAnimImage {
	bottom:6.4%;
}

.frame-1 .housePortrait .solarPanelAnimImage {
	bottom:5.5%;
}

.frame-1 .house .sunImage {
	position:absolute;
	z-index:10;
	width:25%;
	left:-18%;
	bottom:76%;
}

.frame-1 .house .thermostatImage {
	position:absolute;
	z-index:9;
	width:8.5%;
	left:17.5%;
}

.frame-1 .houseLandscape .thermostatImage {
	bottom:37%;
}

.frame-1 .housePortrait .thermostatImage {
	bottom:43%;
}

.frame-1 .house .fanImage {
	position:absolute;
	z-index:9;
	width:13%;
	left:4.8%
}

.frame-1 .houseLandscape .fanImage {
	bottom:62.6%
}

.frame-1 .housePortrait .fanImage {
	bottom:66.2%;
}

/* frame 2 */

.frame-2 .house .contentBlock-runningToilet {
	left:-30%; 
	top:31%;
	width:21%;
}

.frame-2 .housePortrait .contentBlock-runningToilet {
	left:-32%;
	top:28%;
	width:23%;
}

.frame-2 .housePortraitSpecialCase .contentBlock-runningToilet {
	top:29%;
}

.frame-2 .house .contentBlock-turnOff {
	left:-32%; 
	top:55%;
	width:19%;
}

.frame-2 .house .contentBlock-mandatoryLink {
	left:-35%; 
	top:93%;
	width:19%;
}

.frame-2 .house .contentBlock-dontRinse {
	left:-9%; 
	top:77%;
	width:19%;
}

.frame-2 .housePortrait .contentBlock-dontRinse {
	top:72%;
}

.frame-2 .house .contentBlock-tvSettings {
	left:13%; 
	top:31%;
	width:19%;
}

.frame-2 .housePortraitSpecialCase .contentBlock-tvSettings {
	top:29%;
}

.frame-2 .housePortrait .contentBlock-tvSettings {
	left:12%;
	top:28%;
	width:21%;
}

.frame-2 .house .contentBlock-brushingTeeth {
	left:12.5%; 
	top:67%;
	width:22%;
}

.frame-2 .housePortraitSpecialCase .contentBlock-brushingTeeth {
	top:62%;
}

.frame-2 .housePortrait .contentBlock-brushingTeeth {
	top:63%;
}

.frame-2 .house .tvImage {
	position:absolute;
	z-index:9;
	width:13.55%;
	left:0%;
}

.frame-2 .houseLandscape .tvImage {
	bottom:65.1%
}

.frame-2 .housePortrait .tvImage {
	bottom:68.5%
}

.frame-2 .house .houseElectricityAndWaterImage {
	position:absolute;
	z-index:8;
	width:100%;
	bottom:0;
	left:-50%;
}

/* frame 3 */

.frame-3 .house .contentBlock-recyclingAluminum {
	left:-37.5%; 
	top:33%;
	width:26%;
}

.frame-3 .housePortrait .contentBlock-recyclingAluminum {
	top:29%;
	left:-36%;
	width:25%;
}

.frame-3 .housePortraitSpecialCase .contentBlock-recyclingAluminum {
	top:30%;
	width:28%;
	left:-38%;
}

.frame-3 .house .contentBlock-workFromHome {
	left:12%; 
	top:70%;
	width:23%;
}

.frame-3 .housePortrait .contentBlock-workFromHome { 
	top:68%;
}

.frame-3 .house .contentBlock-17Trees {
	left:-9%; 
	top:40%;
	width:19%;
}

.frame-3 .house .contentBlock-recyclingGlass {
	left:8%; 
	top:28%;
	width:22%;
}

.frame-3 .housePortrait .contentBlock-recyclingGlass {
	top:31%;
}

.frame-3 .housePortraitSpecialCase .contentBlock-recyclingGlass {
	top:28%;
	width:20%;
}

.frame-3 .house .contentBlock-idlingCars {
	left:-33%; 
	top:51%;
	width:21%;
}

.frame-3 .housePortrait .contentBlock-idlingCars { 
	top:47%;
}

.frame-3 .house .contentBlock-carwash {
	left:-33%; 
	top:63%;
	width:21%;
}

.frame-3 .house .sodaCanImage {
	position:absolute;
	z-index:10;
	left:-10.5%;
	width:10%;
}

.frame-3 .houseLandscape .sodaCanImage {
	bottom:66.25%;
}

.frame-3 .housePortrait .sodaCanImage {
	bottom:69.5%;
}

.frame-3 .house .paperStackImage {
	position:absolute;
	z-index:10;
	left:-4.5%;
	width:10%;
	bottom:3%
}

.frame-3 .house .smokeImage {
	position:absolute;
	z-index:10;
	left:-4.5%;
	width:10%;
	bottom:3%
}

.frame-3 .house .computerImage {
	position:absolute;
	z-index:10;
	bottom:41%;
	left:25%;
	width:7%;
}

.frame-3 .housePortrait .computerImage {
	bottom:46%;
}

.frame-3 .house .carHeadlightLeft {
	position:absolute;
	z-index:11;
	bottom:6.5%;
	left:-54%;
	width:2.5%;
}

.frame-3 .house .carHeadlightRight {
	position:absolute;
	z-index:11;
	bottom:6.5%;
	left:-29.5%;
	width:2.5%;
}

.frame-3 .housePortrait .carHeadlightLeft,
.frame-3 .housePortrait .carHeadlightRight {
	bottom:5.5%;
}

.frame-3 .house .carImage {
	position:absolute;
	z-index:10;
	bottom:-3%;
	left:-58%;
	width:35%;
}

.frame-3 .housePortrait .contentBlock-17Trees {
	left:-10%;
	width:21%;
}

.frame-3 .housePortrait .contentBlock-recyclingGlass {
	top:26%;
	left:8%;
	width:24%;
}

.frame-3 .housePortrait .contentBlock-workFromHome {
	width:23%;
	left:12%;
}


/****************************************************
 *	DID YOU KNOW
 ***************************************************/

#didYouKnow {
	position:fixed;
	z-index:2;
	width:100%;
	height:100%;
}

#didYouKnow .dykInfoBox {
	display:none;
	position:absolute;
	z-index:4;
	border:3px solid #3b3633;
	background-color:#FFF;
	font-size:2vmin;
}

#didYouKnow .dykInfoBox p {
	padding:.4em;
	font-family: 'Slabo 27px', serif;
	font-size:1.1em;
	line-height:1.2em;
}

#didYouKnow .dykInfoBox p strong {
	font-size:1.5em;
}

#didYouKnow .dykInfoBox h5 {
	padding:0 .25em;
	color:#FFF;
	font-size:1.5em;
	font-weight:900;
	background-color:#3b3633;
}

#didYouKnow .dykInfoBox-1 {
	width:18%;
	right:7%;
	bottom:65%;
}

#didYouKnow .dykInfoBox-1 h5 {
	color:#139ea9;
}

#didYouKnow .dykInfoBox-2 {
	width:18%;
	right:7%;
	bottom:65%;
}

#didYouKnow .dykInfoBox-2 h5 {
	color:#f8ae1b;
}

#didYouKnow .dykInfoBox-3 {
	width:18%;
	right:7%;
	bottom:65%;
}

#didYouKnow .dykInfoBox-3 h5 {
	color:#c6d046;
}

#didYouKnow .dykOutline {
	display:none;
	position:absolute;
}

#didYouKnow .dykOutline-1 {
	width:29%;
	height:61%;
	bottom:4%;
	left:55%;
	border-left:2px dotted #FFF;
	border-bottom:2px dotted #FFF;
	border-right:2px dotted #FFF;
}

#didYouKnow .dykOutline-2 {
	width:34%;
	height:14%;
	bottom:71%;
	left:50%;
	border-left:2px dotted #FFF;
	border-top:2px dotted #FFF;
	border-right:2px dotted #FFF;
}

#didYouKnow .dykOutline-3 {
	width:34%;
	height:14%;
	bottom:71%;
	left:50%;
	border-left:2px dotted #FFF;
	border-top:2px dotted #FFF;
	border-right:2px dotted #FFF;
}

.dykPortrait .dykInfoBox {
	position:fixed!important;
	top:4%;
	right:4% !important;
	width:40% !important;
	bottom:auto !important;
}

.dykPortrait .dykOutline {
	display:none !important;
}