/**
 * Project:		Yukon Wild
 * Style Sheet:	Base Layout
/* ---------------------------------------- */


@font-face {
    font-family: 'born_ready_slantedregular';
    src: url('/assets/lib/fonts/BornReadySlanted.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 100%;
	line-height: 1.4em;
	width: 100%;
	min-height: 100%;
	color: rgb(82, 44, 27);
	background-color: #f2f2f2;
	background-position: 50% 50%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
}



	/**
	 * BASIC TEXT STYLES
	 */
		
		a:link, a:active, a:visited {
			color: rgb(82, 44, 27);
			font-weight: 400;
     		text-decoration: underline;
     		text-decoration-color: rgb(249, 160, 35);
    	 	-webkit-text-decoration-color: rgb(249, 160, 35);    	 	
		}
		a:hover {
			color: rgb(0, 176, 172);
		}		
			
		

		.clearfix { zoom: 1; }
			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after { clear: both; }

		.centered {
			text-align: center;
		}
		
		h1 {
			font-family: 'Fjalla One', sans-serif;
			text-transform: uppercase;
			font-size: 450%;
			line-height: 1em;
			margin-bottom: 0.5em;
			color: rgb(255, 255, 255);
			text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.3);
		}
		h1.err404{
			color: rgb(82, 44, 27);
		}
		
		h2 {
			font-family: 'Prata', serif;
			font-size: 150%;
			line-height: 1.2em;
			margin-top: 1.5em;
			margin-bottom: 1em;
			color: rgb(82, 44, 27);
			font-smoothing: antialiased;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		h2::after{
			content: '';
			display: block;
			margin-top: .7em;
			border-top: 2px solid rgb(0, 176, 172);
			width: 142px;			
		}		
		h2.centered::after{
			margin: .7em auto 0 auto;
		}
		
		
		h3 {
			font-family: 'Lato', sans-serif;
			font-weight: 700;
			font-size: 90%;
			text-transform: uppercase;
			line-height: 1.5em;
			letter-spacing: .1em;
			color: rgb(0, 176, 172);
			margin-top: 2em;
			margin-bottom: 0.3em;
		}
		
		h4 {
			font-family: 'Lato', sans-serif;
			font-weight: 700;
			font-size: 110%;
			color: rgb(82, 44, 27);
			text-transform: uppercase;
			margin: 0.4em 0;
		}

		h5, h6 {
			font-family: 'Lato', sans-serif;
			font-weight: 700;
			font-size: 100%;
			line-height: 1.3em;
			margin: 0 0 0.4em;
			color: rgb(82, 44, 27);
		}

				
		h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

		
		p { margin: 0 0 1em; line-height: 1.5em; }
		
		big { font-size: 120%; line-height: 1.5em; }
		
		span.marker{ text-transform: uppercase; font-weight: 700; }
		
		strong, b { font-weight: 700; }
		
		em { font-style: italic; }
		
		.body ul{
			list-style-type: disc;
			margin-left: 1em;
		}			
			.body ul li{
				margin: .3em 0;
			}
			.body ul li ul {
 				list-style-type: circle;
			}
		
		img { max-width: 100%; }
		img.pad { max-width: none; display: block; }
		
		.no-mobile {
			display: none;
		}
	
		
		
		
				
		/*	for content semantics	*/
		.outline {
			display: none;
		}
		
		/*	hides from browsers, leaves accessible to screen readers	*/
		.reader {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}




	/**
	 * LAYOUT BLOCKS
	 */

		#viewport {
			width: 100%;
			background: transparent url(/assets/layout/background.jpg) repeat-y right 50%;
			background-size: contain;
			position: relative;
			z-index: 100;
			overflow-x: hidden;
		}		
		
		
		.wrap {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0;
			position: relative;
		}
		.wrap,
		.wrap.slide {
			padding-left: 1em;
			padding-right: 1em;
		}
		
		.slide{
			padding: 3em 0;
		}
		.slide.nopadding{ padding: 0; }
	
	
	
	/**
	 * CENTERRING STYLES
	 *
	 * Elements using these styles should be placed within a positioned parent
	 * to which the centerring will be relative.
	 */

		.center,
		.center-horrizontal,
		.center-vertical { position: absolute; }
		
		.center {
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			   -moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				 -o-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
		}
		
		.center-horrizontal {
			left: 50%;
			-webkit-transform: translate(-50%, 0);
			   -moz-transform: translate(-50%, 0);
				-ms-transform: translate(-50%, 0);
				 -o-transform: translate(-50%, 0);
					transform: translate(-50%, 0);
		}
		
		.center-vertical {
			top: 50%;
			-webkit-transform: translate(0, -50%);
			   -moz-transform: translate(0, -50%);
				-ms-transform: translate(0, -50%);
				 -o-transform: translate(0, -50%);
					transform: translate(0, -50%);
		}




/**********************
		SMALL
**********************/
@media only screen and (min-width: 700px) {


	/**
	 * BASIC TEXT STYLES
	 */
			
	h2 {
		font-size: 190%;
	}
	h2::after{
		border-top: 4px solid rgb(0, 176, 172);
	}

}


/**********************
		MEDIUM
**********************/

@media only screen and (min-width: 950px) {

	/**
	 * BASIC TEXT STYLES
	 */
	 
	 #viewport::before {
		content: '';
		background: transparent url(/assets/layout/yw-macaron-2.png) no-repeat 0 0;
		width: 141px;
		height: 141px;
		position: absolute;
		right: -70px;
		top: 40%;
	}
	 

}


/**********************
		LARGE
**********************/

@media only screen and (min-width: 1350px) {

	/**
	 * BASIC TEXT STYLES
	 */
	 
		body{
			font-size: 120%;
		}		
	
		.no-mobile {
			display: initial;
		}
		
		.wrap,
		.wrap.slide {
			padding-left: 0;
			padding-right: 0;
		}

	

}