/* Web Fonts ---------------------- */

@font-face {
	font-family: 'Abolition Regular';
	src: url('../fonts/abolition-regular-webfont.eot');
  	src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');

}

/* Base Styles -------------------- */

* {
	box-sizing: border-box;
}

body {
	/* background-image: url(../img/backgrd01.jpg); */
  	color: #878787;
	margin: 0;
	font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	
}

h1,
h2{
	font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}

h1 {  
  	font-size: 5.625rem; /* 90px/16px  */
  	color: rgba(255, 255, 255, 1);
  	text-transform: uppercase;
  	font-weight: normal;
  	line-height: 1.3;
	text-shadow: 0 1px 1px rgba(0,0,0,.8);
	margin: 12px 0 0;
}

h2 {
  	font-size: 3.3125em; /* 53px/16px  */
  	font-weight: normal;
  	line-height: 1.1;
  	margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  	font-size: 1.25em; /* 20px/16px  */
  	color: #48525c;
  	line-height: 1.2;
  	margin-bottom: 1.7em; /* 34px */
}

img{
	max-width: 100%; /* keeps image size within box */
	margin-bottom: 0;
	
}

ul,
ol {
	list-style-position: inside;
	list-style-type: none;
	padding:5px;
}

li{
	list-style-type: none;
	font-weight: bold;
	padding:5px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
}

a:hover {
	background-color: #ccc;
  	color: brown;
}

a:active {
  color: blue;
}
hr {
	margin-top: 10px;
    height: 1px;
    width: 100%;
}

/* Main Styles --------------------- */

.main-header {
  	max-height: 960px;
	/*margin-top: 10px;*/
	padding: 25px 25px 0px 25px;
	background-repeat: no repeat;
	background-position: center;
	background-size: cover; 
}

/*.hamburger{
	max-height: 200px;
	padding: 50px 0px 500px 0px ;
}*/
/*
.title {
  	color: white;
  	font-size: 1.625rem; 
	text-shadow:0 1px 0px rgba(0,0,0,.8);
	font-weight:200;
	
	padding-bottom: 10px;
}
*/

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

/*text Alignment----------------------------*/
.primary-content,
.secondary-content,
.main-header,
.main-footer,
.menu{
  text-align: center;
}

.primary-content {
	padding-top: 25px;
  	padding-bottom: 95px;
}

.secondary-content {
	/*padding-top: 25px 10px 95px 10px;*/
	padding: 0;
  	font-size: .85em;
	/* overflow:auto; simple method to clear floats */
}

.callout {
  font-size: 1.25em;
 
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
	font-size: .75em;
	padding-top: 30px;
 	padding-bottom: 30px;
  
}


.multiColumn {
	
	column-count:3;
	
}


/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
 	width: 75%;
	padding:0;
  	margin: auto;
	max-width: 900px;
}




/* Menu Styles --------------------- */
.menu {
	
	font-family: "Viner Hand ITC";
	text-shadow: 0 1px 1px rgba(0,0,0,.8);
	padding: 10px;
	margin:inherit;
}

.menu a{
	color: black;
	padding: 5px ;
	text-decoration: none;
	
}

.menu a:hover{
	background-color: #ccc;
}

.menu a:active{
	background-color: #4CAF50;
	color: white;
}
/* Floated columns ------------------ */

.resorts,
.tips {
	width: 46.5%;
}

.tips{
	float: left;
}
.resorts{
	float: right;
}
/* Float Clearfix ------------------ */

.group:after {
  content: "";
  display: table;
  clear: both; /* clears any colased space created by floats */
} /*pushes psuedo element "" below group class where inline content can follow*/

/* Media Queries ------------------ */

@media (max-width: 2632px ) {
	.primary-content,
	.secondary-content {
		width: 90%; /*expand content width when window smaller than 1024 px */
	}
	.wildlife{
		padding: 10% 12%;
		margin: 50px 0 20px;
	}
	
	.iframe {
		width: 700px;
    	height: 820px;
    	border: 0; 
	}
	
	
	
}

@media (max-width: 768px) {
	p {
		margin-top: 0;
	}
	h1 {
		font-size: 5rem;
		line-height: 1.1;
	}
	img{
		max-width: 100%; /* keeps image size within box */
		margin-bottom: 0;
		
	}
	
	.primary-content,
	.secondary-content {
		width: 100%; /*expand content width when window smaller than 768 px */
		padding: 8px 8px 8px 8px ; /* contract padding  */
		
	}
	.multiColumn {
	column-count:1;
		margin:10px;
	}
	/*.main-header {
		max-height: 190px;
		padding: 50px 25px 0;
	}*/
	.title {
		font-size: 1.3rem;
		
	}
	.intro{
		font-size: 1rem;
	}
	.resorts,
	.tips{
		float: none; /*back to one column*/
		width: 100%;
	}
	.main-footer {
		padding: 20px ;
	}
	.iframe {
		width: 300px;
    	height: 480px;
    	border: 0;
	}
	
	
}