@font-face
{font-family:"Amaranth-Regular";
src: url(../Fonts/amaranth-webfont.eot);
src: url('../Fonts/amaranth-webfont.eot?#iefix') format('embedded-opentype'),
	local("Amaranth"), url(../Fonts/amaranth-webfont.ttf);format ("truetype");
}

@font-face
{font-family:"vidaloca";
src: url(../Fonts/vidaloka-regular-webfont.eot);
src: url('../Fonts/vidaloka-regular-webfont.eot?#iefix') format('embedded-opentype'),
	local("Vidaloca"), url(../Fonts/vidaloka-regular-webfont.ttf);format ("truetype");
}

@font-face
{font-family:"Segoe-Print";
src: url(../Fonts/Segoe_Print.eot);
src: url('../Fonts/Segoe_Print.eot?#iefix') format('embedded-opentype'),
	local("Segoe Print"), url(../Fonts/Segoe_Print.ttf);format ("truetype");
}

@font-face
{font-family:"shortstack";
src: url(../Fonts/shortstack-regular-webfont.eot);
src: url('../Fonts/shortstack-regular-webfont.eot?#iefix') format('embedded-opentype'),
	local("Short Stack"), url(../Fonts/shortstack-regular-webfont.ttf);format ("truetype") ;
}

a{
	color:black; /*changes all links to black*/
}

a:focus /*removes blue outline when focused on anchor*/
	{	 
	outline: none;
	}
img
	{
	max-width: 100%;  /*container for background-required to keep aspect ratio when shrinking*/
	border:none;  /*IE 8,9,10 add borders to images that are also links*/
	}
	

body
	{
	background:rgb(255, 255, 221);
	margin:0;
	padding:0;
	font-family:vidaloca;
	} 
	
	article:focus  /*==========touch anywhere to close (The cursor is a pointer and indicates a link)============*/
	{
	cursor: pointer;
	}

header{
	text-align:center;
	background:#EFDBC8 url(../Photos/cherrycreekflooding.jpg) center/cover no-repeat;		 
	color:white;
-pie-background: url(../Photos/cherrycreekflooding.jpg)center/cover no-repeat; /*PIE*/
behavior: url(PIE2.0/PIE.htc);	
}

/*contains all header elements for vertical positinioning/centering*/
.hdrcontainer{
	padding:5% 0;		
}

/*hwy 288 sign*/
object{
	display:inline-block; 	 
}

.hdrcontents{
	display:inline-block; 
	vertical-align:top;	 
	font-size:2em;	
	padding: 0 1%;	 	
}

.hdrcontents>h1 {
	margin:0;
	display:inline-block;	 
}

.hdrcontents>p{	 
	font-size:1em;
	margin-top:0;
}

/*Begin Time panel under header*/

aside{
	background:#EFDBC8;	
	background:#E6E2E2;
	background:#EFDBC8;
	text-align:center;
	padding:.35% 0;		
}



.mst{
	white-space:nowrap;
}


/*Begin Information panel*/

main{
	max-width:1366px;
	text-align:center;	/*centers all images horizontally*/
	margin:auto;	
}



article{
	display:inline-block;
	vertical-align:top;	/*keeps pictures from dropping down*/	
	/*min-height:225px;increase so line isn't short.  275 is biggest number needed*/
	background:#ECEAD7;
	padding:15px 10px;
	border-radius:10px;
	box-shadow:2px 2px 5px black;
	margin:15px 10px;
	/*width:29%; adjust width of panels-size of panels here*/
	behavior: url(PIE2.0/PIE.htc);	 
}

.mainsection1 img{
	width:50px;
	height:50px; 
}

#carpic{
	width:60px; /*must use ID to override class*/
	height:60px; /*must use ID to override class*/
}

#eatpic, #explorepic, #propertiespic{
	margin-top:10px;
}

#servicespic, #homepic{
	margin-top:5px;
}

/*individual nav links begin here*/ 

.navlinkcontainer{
	display:inline-block;
	margin:15px 10px;	
	padding:0;	

}



.navlink{
	width:150px; 
	height:100px;	 
}

.navtitle{
	background:#C0D3C0;
	border-radius:10px 10px 0 0;
	font-size:1.5em;
	behavior: url(PIE2.0/PIE.htc);		 
}

.navlinkcontainer:hover{	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}	
	
/*===================FOR IE 10 and 11 only====================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
.navlinkcontainer:hover{
	background:#fdfbe9;	/*lighter background*/
	 
	}	
 
}

/*Page Title Section begins here-overrides a class selector below*/
#pagetitle h3{
	border-radius:10px;	
	behavior: url(PIE2.0/PIE.htc);
}

#pagetitle article{
	padding:0;	
}

/*Welcome Section begins here*/

.welcomecontainer{	 
	background:#ECEAD7;	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	
}

.welcomecontainer>h3{
	background:#C9D8C5;	
	margin-bottom:10px;
	margin:0;	 
	border-radius:10px 10px 0 0;
	font-size:1.5em;	 
	padding:0;	
	behavior: url(PIE2.0/PIE.htc);	
}

.welcome{
	display:block;				/*overrides article background*/
	vertical-align:baseline; 	/*overrides article background*/
	background:none;			/*overrides article background*/
	box-shadow:none;			/*overrides article background*/
	border-radius:0;			/*overrides article background*/
	margin:0;
	padding:0;
	padding:1%; 	
}

.intro{
	display:inline-block;
	max-width:31%;
	vertical-align:top;
	text-align:left;
	margin:0;
	padding:10px 10px;
	font-size:1em;	 
}
 

.intro>span{	
	font-weight:bold;	 
}

.intro::first-letter{
	font-size:1.4em;	 
}

/*single colon for IE8*/
.intro:first-letter{
	font-size:1.4em;	 
} 
 

/*Scroller section begins here*/

section.scroller{
	margin:15px 10px;	
}

.scroller>article{
	display:block; /*makes scroller full width.*/
	padding:0;
	margin:auto; /*fills to full width of section-scroller*/   
	padding-bottom:5px; 	
}

.scroller>article>h3, .factscontainer>h3{
	background:#C9D8C5;
	margin:0;
	margin-bottom:10px;
	border-radius:10px 10px 0 0;
	font-size:1.5em;
	behavior: url(PIE2.0/PIE.htc);
}


 /*=========This section belongs to the plug in slider============================================*/ 
 
 /*container for messages*/
.tickerstyle img{
	border-radius:10px;	
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);		 
	}

	/*actual messages*/
.messagediv{
	margin: 0 15px; /*adjust spacing between message and container here*/
	margin-bottom:10px;		
	text-align:left;	
	min-height:325px;/*can be deleted but panel will jump*/	 
	} 
 
/*======== Individual Messages CSS For Plug in Slider ===========================================*/
.messagediv h2{
	text-align:center;	
	margin:0 auto;	 
}

.infocontainer{
	display:inline-block;
	vertical-align:top;	
	font-size:.9em;	
}

.category{
	text-align:center;	 
}

.date{
	text-align:center;	 
}

.locationinfo{
	display:inline-block; 
}

.locationinfo2{
	display:inline-block;
	margin-top:10px;	 	  
}

.labelcontainer{
	margin:0;	 
}

.label{
	 display:inline-block;	 
	 text-align:right;
	 padding-right:5px;
	 vertical-align:top;
	 min-width:80px;
	font-weight:bold;	 
}

.data{
	 display:inline-block;	 
	 text-align:left;
	  padding-left:5px;	  
}

.label2{
	 display:inline-block;	 
	 text-align:right;
	 padding-right:5px;
	 vertical-align:top;
	 min-width:80px;
	font-weight:normal;	 
}

.data2{
	 display:inline-block;	 
	 text-align:left;
	  padding-left:5px;	  
}

.msgpics{
	 
	width:250px;
	float:right;
	margin: 5px 20px;
	margin-bottom:20px;	 
	padding-left:0;	
/*	float:none;
	margin:auto;*//*activate when text drops below image-to center image*/	
}
 
.msgpics>img{
	 
	width:250px; /*controls image size when float is set to none*/	
} 
/*========End of Plug in Slider===================================================================*/ 


/*Facts and Map section begins here*/
section.factscontainer{
	background:#ECEAD7;	
	border-radius:10px;	
	margin:15px 10px;
	box-shadow:2px 2px 5px black;
	behavior: url(PIE2.0/PIE.htc);	
}

.facts  {
	background:none;
	display:block;	 
	border-radius:0;
	box-shadow:none;
	vertical-align:baseline;	 
	padding:1%; 
	margin:0;		
}

.map{		 
	width: 250px; 
	height: 266px;
	vertical-align:top;
	margin: 3% 0 0 6%;  	
}

#usacomwg{
	padding:10px;
	display:inline-block; 	
}


/*Footer begins here*/

section.footerwrap{
	background:#EEECDA;	
	background:#E6E2E2;
	background:#FBF4E0;
}

div.footercontainer{
	max-width:1366px;
	margin:auto;
	text-align:center;	 
}

nav.footlinks{
	display:inline-block;
	width:265px;  /*makes line up single file even-a must or big boxes will push to next line*/
	margin:15px;
	vertical-align:top;	 
}

nav.footlinks h2{
	text-align:left;
	margin:0;
	padding-left:5px;	 
}

nav.footlinks>ul{
	text-align:left;
	padding-left:20px;
	margin-top:0;
	font-size:.9em;
}

nav.footlinks>ul>li{
	padding:3px 0;	 
}



.footlinks>p{
	text-align:left;
	font-size:.8em;	
}


/*SUB Footer begins here*/

div.subfooter{
	text-align:left;	 
	padding:0 10px;	 
}

.subfooter>p{
	display:inline-block;
	font-size:.8em;		
}

.subfooter>p.copyright{
	float:right; 	
}

.jump2top
	{
	position:fixed;	
	right:5px;
    bottom:-5px;
	-webkit-backface-visibility: hidden;
	}

/*=============================Travel Page Begins Here=======================================*/
.travwelcomecontainer{	 
	background:#ECEAD7;	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);		
}

.travwelcomecontainer>h3{
	background:#C9D8C5;	
	margin-bottom:10px;
	margin:0;	 
	border-radius:10px 10px 0 0;
	font-size:1.5em;	 
	padding:0;	
	behavior: url(PIE2.0/PIE.htc); 	
}

span.smallmessage{
	display:none; 	
}


.travwelcome{
	display:block;				/*overrides article background*/
	vertical-align:baseline; 	/*overrides article background*/
	background:none;			/*overrides article background*/
	box-shadow:none;			/*overrides article background*/
	border-radius:0;			/*overrides article background*/
	margin:0;	
	padding:0;	 
	min-height:275px;  /*or map will exceed the panel*/	 
}

.travmapcontainer{
	float:right;
	vertical-align:top;
	max-width:24%; /*adjust width here as shrinking occurs*/
	margin:15px 10px;	 
}

.travmapcontainer iframe{	 
	border-radius:10px;
behavior: url(PIE2.0/PIE.htc);		
}


.travbulletcontainer{
	display:inline-block;
	vertical-align:top;
	max-width:24%;  /*adjust width here as shrinking occurs*/
	margin:15px 10px;	
}

.travbulletcontainer h4{	
	margin:0;
	margin-left:10px;
	text-align:left;
}

.travbulletcontainer ul{
	text-align:left;
	margin-top:0;	 
}

.travbulletcontainer ul li{
	font-size:.9em;
}


/*=============================Stay Page Begins Here=======================================*/

.staywelcomecontainer{
	background:#C9D8C5;	 	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	padding-bottom:5px; /*added to prevent small panel when large screen*/
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	 
}

.newlisting
	{
	display:inline-block;
	}

.newlisting img
	{
	display:block;  	 
	}
	
.staywelcomecontainer h3{	
	margin-bottom:0;
	padding:5px;
	font-size:1.5em;  
}

.staywelcome{
	background:#EEECDA;	 
	margin-top:0;
	box-shadow:none;
	display:block;	/*added to prevent small panel when large screen*/
}

.staywelcome h4{
	margin:0;
	padding:0;
	font-size:1.25em;	
}

.staydescription{
	display:inline-block;
	width:75%;
	vertical-align:top;
	padding:5px;
	border-right: 2px dotted black;
	min-height:300px;/*keeps dotted line full length of neighboring panel*/	
	position:relative;/*to allow for absolute disclaimer*/	 
}



.staydescription>p{
	text-align:left;	
	margin-top:5px;
	padding-right:5px;	 
}

.staydescription img{
	width: 167px; 
	height: 18px;	
}

.staydescription>.stayhow2reserve{
	text-align:center;
	font-weight:bold;	 
}

.staydescription>.staydisclaimer{
	 position:absolute;
	 bottom:0;
	 right:0;
	 margin:0;
	 padding-right:10px;
	 font-size:.75em;
/*position:relative;
text-align:right;
margin-top:10px;*/	 
}

.staycontactcontainer{
	display:inline-block;
	width:23%;
	vertical-align:top;
	padding:5px 0;
	text-align:left; 
	white-space:nowrap;/*keeps everything in this container from wrapping*/	
	min-width:250px;/*keeps content inside the div-otherwise will go outside div to right due to nowrap*/	
}

.staylabelcontainer{
	 margin:2px auto; 
}

.staylabel{
	display:inline-block;
	vertical-align:middle;	 
	min-width:110px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	
}

.staylabelemail{
	display:inline-block;
	vertical-align:middle;	 
	min-width:110px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	 
}

.staydata{
	display:inline-block;
	vertical-align:middle;	
	text-align:left;
	padding-left:5px;
	color:black;	 
	padding-left:0;
}

.staydata a{	
	outline:none;
}

.staydata img{
	padding-top:5px;
	 
}

/*=============================Eat Page Begins Here=======================================*/

section.eatwelcomecontainer{
	background:#C9D8C5;	 	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	padding-bottom:5px;
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	 
}

.eatwelcomecontainer h3{	
	margin-bottom:0;
	padding:5px;
	font-size:1.5em;  
}

article.eatwelcome{
	display:block;
	background:#EEECDA;	
	margin-top:0;
	box-shadow:none;
	min-height:280px; /*control height so pic doesn't exceed panel height*/	
}

.eatpiccontainer{
	float:right;
	display:block;	
	width:25%;  /*find correct width percentage and then shrinking will occur*/
	height:auto;
	
	min-width:250px; /*control min pic size so it doesn't shrink too much*/
	margin:15px 10px;
	margin-right:20px;
	margin-top:20px;	
}
/*image needs to be 100% of container*/
.eatpiccontainer img{
	width:100%;
	height:100%;  	
	border-radius:25px;
	box-shadow:10px 10px 20px black;	
	behavior: url(PIE2.0/PIE.htc);	
	max-height:250px;	/* keeps image from exceeding container*/
}

/*small screen H4*/
.eatsmallscreen4{
	margin:0;	 
	font-size:1.25em;
	display:none;
}  

/*small screen H5*/
.eatsmallscreen5{
	margin:5px auto;
	display:none; 	
}
 
/*big screen H4*/
.eatbigscreen4{
	margin:0;	 
	font-size:1.25em;
}  

/*big screen H5*/
.eatbigscreen5{
	margin:5px auto; 	
}

.eatdetailswrap{
	text-align:left;
	font-size:.9em;		
}

.eatdetailswrap>p{
	font-size:.8em;
	margin-left:25px;
	margin-right:10px;
	
}


/*=============================Explore Page Begins Here=======================================*/

.explorewelcomecontainer{
	background:#C9D8C5;	 	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	padding-bottom:5px; /*added so bottom inset panel has padding*/
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	
}

.explorewelcomecontainer h3{	
	margin-bottom:0;
	padding:5px;
	font-size:1.5em; 
}

.explorewelcome{
	background:#EEECDA;	 
	margin-top:0;
	box-shadow:none;
	display:block; /*changed from inline-block so that width is full*/
}

.explorewelcome h4{
	margin:0;
	padding:0;
	font-size:1.25em;	
}

.exploredescription{
	display:inline-block;
	width:75%;
	vertical-align:top;
	padding:5px;
	border-right: 2px dotted black;
	min-height:160px;/*keeps dotted line full length of neighboring panel*/	
	position:relative;/*to allow for absolute disclaimer*/	 
}

.exploredescription>p{
	text-align:left;	
	margin-top:5px;
	padding-right:5px;	
}

.exploredescription>p>span{
	font-weight:bold;	 
}
 

.exploredescription>.exploredisclaimer{
	 position:absolute;
	 bottom:0;
	 right:0;
	 margin:0;
	 padding-right:10px;
	 font-size:.75em;
/*position:relative;
text-align:right;
margin-top:10px;*/	 
}

.explorecontactcontainer{
	display:inline-block;
	width:23%;
	vertical-align:top;
	padding:5px 0;
	text-align:left; 
	white-space:nowrap;/*keeps everything in this container from wrapping*/	
	min-width:250px;/*keeps content inside the div-otherwise will go outside div to right due to nowrap*/	
}

.explorelabelcontainer{
	 margin:2px auto; 
}

.explorelabel{
	display:inline-block;
	vertical-align:middle;	 
	min-width:110px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	
}

.explorelabelemail{
	display:inline-block;
	vertical-align:middle;	 
	min-width:110px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	 
}

.exploredata{
	display:inline-block;
	vertical-align:middle;	
	text-align:left;
	padding-left:5px;
	color:black;	 
	padding-left:0;
}

.exploredata a{	
	outline:none;
}

.exploredata img{
	padding-top:5px;	 
}

/*=============================Services Page Begins Here=======================================*/

section.serviceswelcomecontainer{
	background:#C9D8C5;	 	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	padding-bottom:5px;
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	 
}

.serviceswelcomecontainer h3{	
	margin-bottom:0;
	padding:5px;
	font-size:1.5em;  
}

article.serviceswelcome{
	display:block;
	background:#EEECDA;	
	margin-top:0;
	box-shadow:none;
	min-height:280px; /*control height so pic doesn't exceed panel height*/	
}

.servicespiccontainer{
	float:right;
	display:block;	
	width:25%;  /*find correct width percentage and then shrinking will occur*/
	height:auto;
	
	min-width:250px; /*control min pic size so it doesn't shrink too much*/
	margin:15px 10px;
	margin-right:20px;
	margin-top:20px;	
}
/*image needs to be 100% of container*/
.servicespiccontainer img{
	width:100%;
	height:100%;  	
	border-radius:25px;
	box-shadow:10px 10px 20px black;	
	behavior: url(PIE2.0/PIE.htc);	
	max-height:250px;	/* keeps image from exceeding container*/
}

/*small screen H4*/
.servicessmallscreen4{
	margin:0;	 
	font-size:1.25em;
	display:none;
}  

/*small screen H5*/
.servicessmallscreen5{
	margin:5px auto;
	display:none; 	
}
 
/*big screen H4*/
.servicesbigscreen4{
	margin:0;	 
	font-size:1.25em;
}  

/*big screen H5*/
.servicesbigscreen5{
	margin:5px auto; 	
}

.servicesdetailswrap{
	text-align:left;
	font-size:.9em;		
}

.servicesdetailswrap>p{
	font-size:.8em;
	margin-left:25px;
	margin-right:10px;
	
}


/*=============================Properties Page Begins Here=======================================*/

.propertywelcomecontainer{
	background:#C9D8C5;	 	
	border-radius:10px;	
	margin:15px 10px;
	margin-top:0;
	padding:0;
	padding-bottom:5px;
	box-shadow:2px 2px 5px black;	
	behavior: url(PIE2.0/PIE.htc);	 	
}

.propertywelcomecontainer h3{	
	margin-bottom:0;
	padding:5px;
	font-size:1.5em; 
}

.propertywelcome{
	background:#EEECDA;	 
	margin-top:0;
	box-shadow:none;
display:block;	
} 

.propertywelcome h4{
	margin:0;
	padding:0;
	font-size:1.25em;		
}

.propertywelcome h5{
	margin:5px auto;
	font-size:1.1em;	 
}

.propertypiccontainer{	 
	display:inline-block;	
	vertical-align:top;	
	height:auto;		
	margin:1%;
	margin-top:0;
	width:180px;
	border: 5px solid #488196;
	border-radius:25px;		
	behavior: url(PIE2.0/PIE.htc);	
	overflow:hidden;	/*hides corners of the image*/		 
}

/*image needs to be 100% of container*/
.propertypiccontainer img{
	width:100%;
	height:100%; 	 
	max-height:250px;	/* keeps image from exceeding container*/	
	display:block;  /*removes space from bottom of picture*/
}

.vlightbox0, .vlightbox1{
	width:auto!important;	/*makes first image larger-overrides vlb size setting for thumb*/	 
}

.propertydetailswrap{
	display:inline-block;
	 width:83%;	
}

.propertydescription{
	display:inline-block;
	width:81%; /*change width here as shrinking occurs*/
	vertical-align:top;
	padding:5px;
	border-right: 2px dotted black;
	min-height:135px; /*keeps dotted line full length of neighboring panel*/	 
}

.propertydescription span{
	font-style: italic;
}

.propertydescription>p{
	text-align:left;	
	margin-top:5px;
	padding-right:5px;	 
}

.propertycontactcontainer{
	display:inline-block;
	width:auto;
	vertical-align:top;
	padding:5px 0;
	text-align:left; 
	white-space:nowrap;/*keeps everything in this container from wrapping*/	
	min-width:180px;/*keeps content inside the div-otherwise will go outside div to right due to nowrap*/	 
}

.propertylabelcontainer{
	 margin:2px auto; 
}

.propertylabel{
	display:inline-block;
	vertical-align:middle;	 
	min-width:65px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	
}

.propertylabelemail{
	display:inline-block;
	vertical-align:middle;	 
	min-width:65px; /*adjust label here left and right to line up colons*/
	text-align:right;
	padding-right:5px;	 
	font-weight:bold; 	 
}

.propertydata{
	display:inline-block;
	vertical-align:middle;	
	text-align:left;
	padding-left:5px;
	color:black;	 
	padding-left:0;
}

.peropertydata a{	
	outline:none;
}

.propertydata img{
	padding-top:5px;	 
}

.slidecontainer{
	margin-top:10px;	 
}

.slidecontainer img{
	display:block;
	margin:auto;
	width:100px; /*73px is actual size*/
	height:auto;
}
 
 

/*========================================================================================================================================================================================================================MEDIA QUERIES BEGIN HERE============================================================
=====================================================================================================================================================*/
	
	
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{  

.intro::first-letter{	 
	line-height: 0;	 /*large first letter causes rest of first line to be too high for iPad*/
}

/*single colon for IE8*/
.intro:first-letter{	 
	line-height:0;  /*large first letter causes rest of first line to be too high for iPad*/
}

}

/* iPads (landscape)---------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{
}


/* iPads (portrait)----------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{	 
}

/*iPhone 6,7,8 Landscape------------------------------------------------------------------------------------------------*/
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ 

.intro::first-letter{	 
	line-height: 0;	 /*large first letter causes rest of first line to be too high for iPad*/
}

/*single colon for IE8*/
.intro:first-letter{	 
	line-height:0;  /*large first letter causes rest of first line to be too high for iPad*/
}
}

/*iPhone 6,7,8 Portrait----------------------------------------------------------------------------------------------------*/
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ 
body  /*==========touch anywhere to close (The cursor is a pointer and indicates a link)============*/
	{
	cursor: pointer;
	}
	
	.intro::first-letter{	 
	line-height: 0;	 /*large first letter causes rest of first line to be too high for iPad*/
}

/*single colon for IE8*/
.intro:first-letter{	 
	line-height:0;  /*large first letter causes rest of first line to be too high for iPad*/
}
}

/*iPhone 6+, 7+, 8+ Landscape----------------------------------------------------------------------------------------------------*/
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
	{	
	
.intro::first-letter{	 
	line-height: 0;	 /*large first letter causes rest of first line to be too high for iPad*/
}

/*single colon for IE8*/
.intro:first-letter{	 
	line-height:0;  /*large first letter causes rest of first line to be too high for iPad*/
}

nav.mainsection1{
	padding:0 10%;	 	 
	/*white-space:nowrap;*/
	 
	}
	}


/*iPhone 6+, 7+, 8+ Portrait------------------------------------------------------------------------------------------------------*/
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ 

body  /*==========touch anywhere to close (The cursor is a pointer and indicates a link)===============*/
	{
	cursor: pointer;
	}

.intro::first-letter{	 
	line-height: 0;	 /*large first letter causes rest of first line to be too high for iPad*/
}

/*single colon for IE8*/
.intro:first-letter{	 
	line-height:0;  /*large first letter causes rest of first line to be too high for iPad*/
}	
}

/*iPhone X (10) in landscape */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) 
{

}

/*iPhone X in portrait*/

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) 
{ 

}


/*
 iOS Blocker
 Chrome 15+, Android OS & Browser 4+
 Mobiles (High-Definition)  Mobile phones but not desktops or laptops
*/

/*@media screen and (-webkit-min-device-pixel-ratio:1.1)
	{
    _:-webkit-full-screen, .jump2top
		{ 
		right:30%;
		bottom:30%;		
		} 
	}*/

/*for Android phones-portrait only-landscape looks fine as is*/	
	


/*=================================================================================================================================================================MEDIA QUERIES LARGE TO SMALL BEGIN HERE======================================
======================================================================================================================*/



@media only screen and (min-width :200px) and (max-width :450px)
{ 
 .travwelcomecontainer h3:focus, .staywelcome:focus{	
	border:none;	
	}
}

/*======= Nav Links Stepping Down ======*/

@media only screen and (min-width :830px) and (max-width :1070px)
{ 
nav.mainsection1{
		padding:0 18%; 	 
	/*white-space:nowrap;*/	 
	}
}	

@media only screen and (min-width :640px) and (max-width :829px)
{ 
nav.mainsection1{
	padding:0 8%;	 	 
	/*white-space:nowrap;*/	
	}
}

/*======= Welcome Stepping Down ======*/

@media only screen and (min-width :780px) and (max-width :1020px)
{ 

.intro{
	display:inline-block;
	max-width:30%;
	vertical-align:top;
	text-align:left;
	margin:0;
	padding:10px 10px;
	font-size:1em; 	
	max-width:47%;	 
}
}


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

.intro{	
	max-width:46%;	 
}
}

@media only screen and (min-width :486px) and (max-width :599px)
{ 

.intro{	
	max-width:45%;	 
}
}


@media only screen and (min-width :351px) and (max-width :485px)
{ 

.intro{	
	max-width:100%;	 
}
}

@media only screen and (min-width :1px) and (max-width :350px)
{ 

.intro{	
	font-size:.9em;	 
	max-width:100%;	 
}
}

/*======= Messages Stepping Down ======*/

@media only screen and (min-width :1px) and (max-width :680px)
{ 
.msgpics{	
	width:250px;  /*works in most devices*/
	max-width:250px;  /*needed for smart phones or pic is too large*/
	float:right;
	margin: 5px 20px;
	margin-bottom:20px;
	margin-right:0;
	margin-left:0;
	padding-left:0;		 
	float:none;
	margin: 10px auto;/*activate when text drops below image-to center image*/	
	}
}
	

/*======= Map sticking out to left.  Ipad portrait only ======*/	
	
	/* iPads (portrait)----------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{	
.map{		 
	display:block; /*keeps map from sticking out too far to the right-now it's below*/
	margin:auto;	/*centers map horizonally*/ 	
	} 
}
	
/*======= Sub Footer Stepping Down ======*/	
@media only screen and (min-width :0px) and (max-width :600px)
{ 	
	
div.subfooter{	
	text-align:center;
	padding-bottom:10px;
	}

.subfooter>p{	
	display:block;	
	}

.subfooter>p.copyright{	
	float:none;
	}
}


/*=============================Travel Page Begins Here=======================================*/	
@media only screen and (min-width :1126px) and (max-width :1250px)
{ 
.travmapcontainer{	
	max-width:23%;	 
}

 
.travbulletcontainer{	
	max-width:23%;
}
}

@media only screen and (min-width :1025px) and (max-width :1125px)
{ 
.travmapcontainer{	
	max-width:22%;
	margin-right:4%;	 
}
 
.travbulletcontainer{	
	max-width:22%;
}
}


@media only screen and (min-width :740px) and (max-width :1024px)
{ 

.travmapcontainer{	
	margin:auto;
	margin-top:15px;
	float:none;
	max-width:none;	 
}
 
.travbulletcontainer{	
	max-width:30%;
}
}

@media only screen and (min-width :500px) and (max-width :739px)
{ 

.travmapcontainer{	
	margin:auto;
	margin-top:15px;
	float:none;
	max-width:none;	 
}
 
.travbulletcontainer{
	max-width:45%;
}
}

@media only screen and (min-width :200px) and (max-width :499px)
{ 

.travwelcomecontainer h3:hover {	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}

#pagetitle h3{
	padding:5px;	/*adds padding to match travel h3 text*/ 
}

 
.travwelcomecontainer h3{
	outline:none;  /*removes outline around header when tapped on phone*/
	padding:5px 10px; 
}

span.smallmessage{
	display:block;
	font-size:.5em;	 
	width:100%; 
}

.travwelcome{
	padding-bottom:5px;
	
	/*below needed for clam	 */
	min-height:auto;  	 
	padding:0;
	opacity:0;
	position:relative;
	z-index:-1;
	max-height:0; 	
	transition:   max-height .75s ease-out .25s,  z-index .5s ease-out .25s, opacity .5s ease-out .25s;	
}

.travmapcontainer{		
	margin:15px auto;	
	float:none;
	max-width:none;	 
	
/*below needed for clam*/
	visibility:hidden;
	margin:0;
	transition:  margin .5s ease-out .25s; /*this is the important margin to transition*/	 
}

.travbulletcontainer{	
	max-width:none;
	display:block;
	padding-bottom:10px;
	
/*needed for clam*/	
	margin:0;	
	transition:  margin .01s ease-out .55s; /*this is the important margin to transition*/
}


/*CLAM SHELL IS NEXT*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/	

/*Pointer Event on and off allows to click same button to close*/
.travwelcomecontainer h3:focus{
	pointer-events:none;
	outline:none;
	border-radius:10px 10px 0px 0px;
}	
	
.travwelcomecontainer h3:focus  + .travwelcome, .travwelcome:focus
/*includes clam button and the clam panel to open panel*/
	{
	pointer-events:auto;	
	 
	margin:15px 10px;
	padding:0;
	opacity:1;	 
	z-index:1;
	max-height:100%;
	margin:0;
 transition:   max-height .75s ease-in .25s, z-index .5s ease-in .25s, opacity .5s ease-in .25s; 	
	}	
	
.travwelcomecontainer h3:focus  ~ .travwelcome>.travmapcontainer, .travwelcome:focus >.travmapcontainer  {	 
	visibility:visible;
	margin:15px auto;
	margin: .5s ease-in .25s; /*this is the important margin to transition*/
} 

.travwelcomecontainer h3:focus ~ .travwelcome>.travbulletcontainer{	 
	margin:0 10px;/*restore side margins*/
transition:  margin .01s ease-in .01s; /*this is the important margin to transition*/	
}
	
	
 
} 

/*=============================Stay Page Begins Here=======================================*/

@media only screen and (min-width :1080px) and (max-width :1140px)
{ 


.staydescription{
	width:72%;
}
}

@media only screen and (min-width :1030px) and (max-width :1079px)
{ 
.staydescription{
	width:72%;
}
}


@media only screen and (min-width :940px) and (max-width :1029px)
{ 
 
.staydescription{
	width:69%;
}
}

@media only screen and (min-width :860px) and (max-width :939px)
{ 
 .staydescription{
	width:66%;
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:right;
margin-top:10px;	 
}
}

@media only screen and (min-width :800px) and (max-width :859px)
{ 
 
.staydescription{
	width:63%;
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px; 	 
}
}

@media only screen and (min-width :750px) and (max-width :799px)
{ 
 
.staydescription{
	width:60%;
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px;	 
}
}

@media only screen and (min-width :690px) and (max-width :749px)
{ 
 
.staydescription{
	width:55%;
	padding-right:15px;
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px;	 
}
}

@media only screen and (min-width :640px) and (max-width :689px)
{ 
 
.staydescription{
	width:50%;
	padding-right:15px;	 
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px;	 
}
}

@media only screen and (min-width :421px) and (max-width :639px)
{ 


.staydescription{	
	width:auto;
	border:none;
	border-bottom:2px dotted black;
	padding:5px;
	min-height:0;/*keeps dotted line full length of neighboring panel*/	
	
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px;	 
}

.staycontactcontainer{	 
	display:block;
	width:auto;	
}

.staylabelcontainer{	  
	 width:250px;	
	 margin:auto;		
}
}

@media only screen and (min-width :330px) and (max-width :420px)
{  
.staywelcome{
	background:#EEECDA;	 
	margin-top:0;
	box-shadow:none; 
} 

.staydescription{	
	width:auto;
	border:none;
	border-bottom:2px dotted black;
	padding:5px;
	font-size:.9em;	
	min-height:0;/*keeps dotted line full length of neighboring panel*/		 
}

.staydescription>.staydisclaimer{	 
position:relative;
text-align:center;
margin-top:10px;	 
}

.staycontactcontainer{	 
	display:block;
	width:auto;		
}

.staylabelcontainer{	  
	 width:250px;	
	 margin:auto;		
}
}

@media only screen and (min-width :200px) and (max-width :329px)
{
.staydescription{	
	width:auto;
	border:none;
	border-bottom:2px dotted black;
	padding:5px;
	font-size:.9em;	
	min-height:0;/*keeps dotted line full length of neighboring panel*/	 
}

.staydescription>.staydisclaimer{	 
	position:relative;
	text-align:center;
	margin-top:10px;	 
}

.staycontactcontainer{	 
	display:block;
	min-width:auto;
	width:auto;
	white-space:normal;	
	font-size:.9em;	
} 
}

/*====================== Stay Clam begins here============================*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/	

/*Pointer Event on and off allows to click same button to close*/


@media only screen and (min-width :200px) and (max-width :420px)
{ 

 .staywelcome h4:hover {	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}
	

	
section.staywelcomecontainer{
	padding-bottom:5px;/*maybe change when clam is open  makes room under buttons when clam closed*/
}
	
article.staywelcome{	
	display:block;
	padding:5px 5px; 
	padding:0;
}

.staywelcome h4{
	 padding:5px 10px; 	
}	
	
 .staydetailswrap{
	max-height:0;
	position:relative;
	opacity:0;
	z-index:-1;
	font-size:.9em;
	
	transition:   max-height .75s ease-out .01s,  z-index .5s ease-out .01s, opacity .5s ease-out .01s,  padding .5s ease-out .25s;		
}




		


/*MUST FOCUS ON H3 SO THE LINKS INSIDE THE PANEL WORK.  OR  ANY CLICK INSIDE THE PANEL CLOSES THE PANEL AND LINKS */	
.staywelcome h4:focus{
	pointer-events:none;
	outline:none;/*removes outline for smart phones*/
	padding:10px;
	border-radius:10px 10px 0 0;
	
	
}

.staywelcome h4:focus  + .staydetailswrap  {
	pointer-events:auto;	
	max-height:100%;	 
	opacity:1;	 
	z-index:1;	
	padding:10px;
	padding-top:0;
	
	
	transition:   max-height .25s ease-in .25s, z-index .25s ease-in .25s, opacity .25s ease-in .75s,  padding .5s ease-in .01s; 
	
	
}
}

/*FOR IE 10 and IE 11  Filter brightness does not work with IE10 or 11 but does work with Edge and all other browsers and devices so make bg lighter for IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width :200px) and (max-width :420px) {  
.staywelcome h4:hover{
	background:#fdfbe9;	/*lighter background*/	 
	 
	}	
 
}

/*=============================Eat Page Begins Here=======================================*/

@media only screen and (min-width :851px) and (max-width :1150px)
{
article.eatwelcome{	
	min-height:260px; 
}	
}

@media only screen and (min-width :600px) and (max-width :850px)
{
article.eatwelcome{
	min-height:260px; 	 	
	}
	
.eatdetailswrap li>.eatnowrap{	
	white-space:pre;	/*keeps groups of words from wrapping separately*/ 
}	
}

@media only screen and (min-width :851px) and (max-width :1150px)
{
article.eatwelcome{	
	min-height:260px; 
}	
}

@media only screen and (min-width :420px) and (max-width :559px)
{
article.eatwelcome{
	min-height:260px; 	 
	}
	
.eatdetailswrap li>.eatnowrap{	
	white-space:pre;	/*keeps groups of words from wrapping separately*/ 
}

.eatpiccontainer{	
	float:none;
	margin: 15px auto;
}
}
 
@media only screen and (min-width :200px) and (max-width :419px)
{
	
	
.eatsmallscreen4:hover{	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}
 	
article.eatwelcome{
	min-height:260px;  
	padding:15px 10px;	
	/*need for clam */	 	
	min-height:auto;	 	 
	padding:5px 10px; /*padding removed for button and added back for image container*/	
	padding:0;
	}
	
.eatpiccontainer{	
	float:none;
	min-width:200px;
	margin: 15px auto;
	position:relative;	
	/*need for clam*/	
		margin:0 auto;		 
		max-height:0;
		opacity:0;
		z-index:-1;
	transition: max-height .1s ease-out .01s,  z-index .05s ease-out .1s, opacity .5s ease-out .01s;		
}
	
	/*small screen H4*/
.eatsmallscreen4{
	margin:0;	 
	font-size:1.25em;	
	display:block;
	padding:5px 10px;	
}  

/*small screen H5*/
.eatsmallscreen5{
	display:block;
	margin:5px auto;	
	font-size: .83em; /*NATIVE H5 size*/
	
	/*need for clam */	
	font-size:0em;
	margin:auto; 	
	transition:  font-size .05s ease-out .01s, margin .05s ease-out .01s;		
}
 
 
/*big screen H4*/
.eatbigscreen4{
	margin:0;	 
	font-size:1.25em;
	display:none;	 
}  

/*big screen H5*/
.eatbigscreen5{
	margin:5px auto; 
	display:none; 	
}


.eatdetailswrap {
	font-size:.8em;
	max-height:100%;
	visibility:visible;	
	/*need for clam */
	max-height:0;
	visibility:hidden;
	transition:  max-height .15s ease-out .01s;			
}

 .eatdetailswrap>ul {	 
	margin:1em 0; /*default margin for UL*/	
	 /*need for clam*/
	margin:0; 
	transition: margin .2s ease-out .01s;		
}  

.eatdetailswrap>p{	 
	margin:1em 0; /*default margin for P*/	
	 /*need for clam */ 
	 margin:0 5px;
	 transition:  margin .2s ease-out .01s;		
}   

.eatdetailswrap li>.eatnowrap{	
	white-space:pre;	/*keeps groups of words from wrapping separately*/ 
} 
  
 
/*CLAM SHELL IS NEXT*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/	

/*Pointer Event on and off allows to click same button to close*/
  .eatsmallscreen4:focus{
	pointer-events:none;
	outline:none; 
	border-radius:10px 10px 0 0;
}

.eatsmallscreen4:focus +.eatsmallscreen5{
	pointer-events:auto;
	display:block;
	margin:5px auto;	
	font-size: .83em; /*NATIVE H5 size*/	
	transition:   font-size .05s ease-in .01s, margin .05s ease-in .01s;
}

.eatsmallscreen4:focus   + .eatsmallscreen5  + .eatpiccontainer{
	pointer-events:auto;
	float:none;
	min-width:200px;
	margin: 15px auto;	
	max-height:100%;
	opacity:1;	
	z-index:1;
	transition:   max-height .25s ease-in .25s, z-index .25s ease-in .01s, opacity .25s ease-in .01s;	
}

.eatsmallscreen4:focus    ~ .eatdetailswrap{
	pointer-events:auto;
	font-size:.8em;
	max-height:100%;
	visibility:visible;
	padding:15px 10px;	
transition:   max-height .25s ease-in .01s, visibility .25s ease-in .5s; ; 
}

.eatsmallscreen4:focus    ~ .eatdetailswrap>ul{
	pointer-events:auto;
	margin:1em 0; /*default margin for UL and paragraph*/
	transition:   margin .1s ease-in .01s;
}

.eatsmallscreen4:focus    ~ .eatdetailswrap>p{
	pointer-events:auto;
	margin:1em 1em; /*default margin for UL and paragraph*/
	transition:   margin .01s ease-in .01s;
}
}	

/*FOR IE 10 and IE 11  Filter brightness does not work with IE10 or 11 but does work with Edge and all other browsers and devices so make bg lighter for IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width :200px) and (max-width :420px) {  
.eatsmallscreen4:hover{
	background:#fdfbe9;	/*lighter background*/	 
	 
	}
}
/*=============================Explore Page Queries BeginsHere ===================================*/
@media only screen and (min-width :1050px) and (max-width :1150px)
{	
.exploredescription{ 
width:72%;	
}
}

@media only screen and (min-width :940px) and (max-width :1049px)
{	
.exploredescription{ 
width:69%;	
}

.exploredescription>.exploredisclaimer{	 
position:relative;
text-align:right;
margin-top:10px;	 
}
}


@media only screen and (min-width :840px) and (max-width :939px)
{	
.exploredescription{	 
width:65%;	
}

.exploredescription>.exploredisclaimer{	 
position:relative;
text-align:right;
margin-top:10px;	 
}
}

@media only screen and (min-width :760px) and (max-width :839px)
{	
.exploredescription{
width:68%;	
}

.exploredescription>.exploredisclaimer{	 
position:relative;
margin-top:10px;
text-align:left;	 
}

.explorecontactcontainer{	
	min-width:200px;	  
}

.explorelabel{	
min-width:75px;	
}

.explorelabelemail{	
min-width:75px;		
}
}

@media only screen and (min-width :670px) and (max-width :759px)
{	
.exploredescription{	
width:63%;	
}

.exploredescription>.exploredisclaimer{	 
position:relative;
margin-top:10px;
text-align:left;	 
}

.explorecontactcontainer{	
	min-width:200px;	  
}

.explorelabel{	
min-width:75px;	
}

.explorelabelemail{	
min-width:75px;		
}
}

@media only screen and (min-width :570px) and (max-width :669px)
{	
.exploredescription{	
width:55%;	
}

.exploredescription>.exploredisclaimer{	 
position:relative;
margin-top:10px;
text-align:left;	 
}

.explorecontactcontainer{	
	min-width:200px;  
}

.explorelabel{	
min-width:75px;	
}

.explorelabelemail{	
min-width:75px;		
}
}

@media only screen and (min-width :200px) and (max-width :569px)
{
	
 .explorewelcome h4:hover{	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}


.exploredescription{
width:55%;
display:block;
width:auto;	
border-right:none;
border-bottom:2px dotted black;


}

.exploredescription>.exploredisclaimer{	 
position:relative;
margin-top:10px;
text-align:left;	 
}

.explorecontactcontainer{	
	min-width:200px;  
}

.explorelabel{	
min-width:75px;	
}

.explorelabelemail{	
min-width:75px;		
}

.exploredetailswrap{
	position:relative;
	max-height:0;
	opacity:0;	
	z-index:-1;
	transition:   max-height .75s ease-out .01s,  z-index .5s ease-out .01s, opacity .5s ease-out .01s, padding .25s ease-out .25s;	
}

/*changed for clam*/
.explorewelcome{ 
	padding:0;
	margin-top:0;
	
}

.explorewelcome h4{
	padding:5px 10px; 
}

/*CLAM SHELL IS NEXT*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/	

/*Pointer Event on and off allows to click same button to close*/
 .explorewelcome h4:focus{
	pointer-events:none;
	outline:none;
	border-radius:10px 10px 0 0;	
}

.explorewelcome h4:focus + .exploredetailswrap{
	pointer-events:auto;
	padding:5px 10px; 
	max-height:100%;
	opacity:1;
	z-index:1; 
	 transition: max-height .25s ease-in .25s, z-index .25s ease-in .25s, opacity .25s ease-in .25s, padding .25s ease-in .05s;   
}
}
@media only screen and (min-width :200px) and (max-width :450px)
{
.exploredetailswrap{
	font-size:.9em;	
}
}
 
 /*FOR IE 10 and IE 11  Filter brightness does not work with IE10 or 11 but does work with Edge and all other browsers and devices so make bg lighter for IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width :200px) and (max-width :420px) {  
.explorewelcome h4:hover{
	background:#fdfbe9;	/*lighter background*/	 
	 
	}
}
 
/*=============================Services Page Queries BeginsHere ===================================*/

@media only screen and (min-width :451px) and (max-width :625px)
{


.servicespiccontainer{
	float:none;	 
	margin:auto;
	margin-top:10px;	
}

.servicessmallscreen4, .servicessmallscreen5{
		display:block;
}

.servicesbigscreen4, .servicesbigscreen5{
	display:none;
}
}

@media only screen and (min-width :200px) and (max-width :450px)
{
.servicessmallscreen4:hover{	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	}
	
article.serviceswelcome{
	min-height:260px;  
	padding:15px 10px;	
	/*need for clam */	 	
	min-height:auto;	 	 
	padding:5px 10px; /*padding removed for button and added back for image container 	*/
	padding:0; 	
}

.servicespiccontainer{
	float:none;	 
	min-width:200px;
	margin: 15px auto;
	position:relative;	

/*need for clam	*/
		margin:0 auto;		 
		max-height:0;	
		opacity:0;
		z-index:-1;
		transition: max-height .1s ease-out .01s,  z-index .05s ease-out .1s, opacity .5s ease-out .01s;			 
}

.servicessmallscreen4 {
		margin:0;
		font-size:1.25em;
		display:block;
		padding:5px 10px;		 
}

.servicessmallscreen5{
		display:block;
		margin:5px auto;
		font-size: .83em; /*NATIVE H5 size*/
		/*need for clam		 */	
	font-size:0;
	margin:auto; 	
	transition:  font-size .05s ease-out .01s, margin .05s ease-out .01s;	 
}


.servicesbigscreen4, .servicesbigscreen5{
	display:none;
}

 .servicesdetailswrap {
	font-size:.8em; 
	max-height:100%;
	visibility:visible;	
	/*need for clam */	
	max-height:0;
	visibility:hidden;
	transition:  max-height .15s ease-out .01s;		
}

.servicesdetailswrap>ul {	 
	margin:1em 0; /*default margin for UL*/	
	 /*need for clam*/
	margin:0; 
	transition: margin .2s ease-out .01s;		
}  
	
	
/*CLAM SHELL IS NEXT*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/
 
/*Pointer Event on and off allows to click same button to close*/
  .servicessmallscreen4:focus{
	pointer-events:none;
	outline:none; 
	border-radius:10px 10px 0 0;
}

.servicessmallscreen4:focus +.servicessmallscreen5{
	pointer-events:auto;
	display:block;
	margin:5px auto;	
	font-size: .83em; /*NATIVE H5 size*/	
	transition:   font-size .05s ease-in .01s, margin .05s ease-in .01s;
}

.servicessmallscreen4:focus   + .servicessmallscreen5  + .servicespiccontainer{
	pointer-events:auto; 
	margin: 15px auto;	
	max-height:100%;
	opacity:1;	
	z-index:1;
	transition:   max-height .25s ease-in .25s, z-index .25s ease-in .01s, opacity .25s ease-in .01s;	
}

.servicessmallscreen4:focus    ~ .servicesdetailswrap{
	pointer-events:auto;	 
	max-height:100%;
	visibility:visible;
	padding:15px 10px;	
transition:   max-height .25s ease-in .01s, visibility .25s ease-in .5s; ; 
}

.servicessmallscreen4:focus    ~ .servicesdetailswrap>ul{
	pointer-events:auto;
	margin:1em 0; /*default margin for UL and paragraph*/
	transition:   margin .1s ease-in .01s;
}
}
 
/*FOR IE 10 and IE 11  Filter brightness does not work with IE10 or 11 but does work with Edge and all other browsers and devices so make bg lighter for IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width :200px) and (max-width :420px) {  
.servicessmallscreen4:hover{
	background:#fdfbe9;	/*lighter background*/	 
	 
	}
}
/*========================Properties Page Media Queries for Shrinking==========================*/


@media only screen and (min-width :1290px) and (max-width :1370px)
{ 

.propertydetailswrap{ 
 width:82%;	 
}

.propertydescription{
width:80%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :1220px) and (max-width :1289px)
{ 

.propertydetailswrap{	 
 width:81%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:78%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :1160px) and (max-width :1219px)
{ 

.propertydetailswrap{	 
 width:80%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:77%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :1100px) and (max-width :1159px)
{ 

.propertydetailswrap{	 
 width:79%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:75%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :1050px) and (max-width :1099px)
{ 

.propertydetailswrap{	 
 width:78%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:74%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :1000px) and (max-width :1049px)
{ 

.propertydetailswrap{	 
 width:77%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:72%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :960px) and (max-width :999px)
{ 

.propertydetailswrap{	 
 width:76%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:70%; /*change width here as shrinking occurs*/	
}
}


@media only screen and (min-width :920px) and (max-width :959px)
{ 

.propertydetailswrap{	 
 width:75%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:69%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :885px) and (max-width :919px)
{ 

.propertydetailswrap{	 
 width:74%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:67%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :855px) and (max-width :884px)
{ 
.propertydetailswrap{	 
 width:73%;	 /*change width here as shrinking occurs*/
}

.propertydescription{ 
width:65%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :825px) and (max-width :854px)
{ 
.propertydetailswrap{	 
 width:72%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:63%; /*change width here as shrinking occurs*/	
}
}

 @media only screen and (min-width :795px) and (max-width :824px)
{ 
.propertydetailswrap{	 
 width:71%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:61%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :770px) and (max-width :794px)
{ 

.propertydetailswrap{	 
 width:70%;	 /*change width here as shrinking occurs*/
}

.propertydescription{	 
width:59%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :670px) and (max-width :769px)
{  
.propertydetailswrap{	 
 display:block;
 width:auto;
}

.propertydescription{	 
width:67%; /*change width here as shrinking occurs*/	
}
}

@media only screen and (min-width :610px) and (max-width :669px)
{  
.propertydetailswrap{	 
 display:block;
 width:auto; 
padding-top:10px; 
}

.propertydescription{	 
width:63%; /*change width here as shrinking occurs*/
padding-top:0;	
}

.propertydescription p{	 
	margin-top:0;
}

.propertycontactcontainer{
	padding-top:0;	 
}

.propertylabelcontainer{
	margin:2px auto;		  
	margin-top:0;	
}
}

@media only screen and (min-width :560px) and (max-width :609px)
{  
.propertydetailswrap{	
 display:block;
 width:auto;
 padding-top:10px; 
 font-size:.9em;
}

.propertydescription{	
width:59%; /*change width here as shrinking occurs*/
padding-top:0; 
}

.propertydescription p{	 
	margin-top:0;
}

.propertycontactcontainer{
	padding-top:0; 	
}

.propertylabelcontainer{
	margin:2px auto;		  
	margin-top:0;	
}
}

@media only screen and (min-width :421px) and (max-width :559px)
{  
.propertydetailswrap{	
 display:block;
 width:auto;
 font-size:.9em;
}

.propertydescription{	
width:59%; /*change width here as shrinking occurs*/

display:block;	
width:auto;
border-right:none;
border-bottom:2px dotted black;
min-height:auto;
}
}

@media only screen and (min-width :200px) and (max-width :420px)
{ 
.propertywelcome{
/*needed for clam*/	
	padding:0;
}

.propertywelcome h4{ 

/*needed for clam*/ 
 padding:5px 10px;  
}

.propertywelcome h5{
	margin:5px auto;
	font-size:1.1em;
/*need for clam*/
margin:0;
font-size:0;
transition:  font-size .25s ease-out .5s, margin .25s ease-out .5s;	
}

.propertypiccontainer{	 
	display:inline-block;	
	vertical-align:top;	
	height:auto;		
	margin:1%;
	margin-top:0;
	width:180px; /*control min pic size so it doesn't shrink too much*/	
	border: 5px solid #488196;
	border-radius:25px;		
	behavior: url(PIE2.0/PIE.htc);	
	overflow:hidden;	/*hides corners of the image*/

/*need for clam*/
position:relative;
display:block;
margin:auto;
max-height:0;
border:0 solid #488196; 
opacity:0;	
z-index:-1;
transition: max-height .5s ease-out .01s,  z-index .5s ease-out .25s, opacity .5s ease-out .25s, border .5s ease-out.25s;


}

.propertydetailswrap{	 
 display:block;
 width:auto;
 font-size:.9em;
 
 /*need for clam */
 position:relative;
 max-height:0;
 z-index:-1;
 opacity:0; 
 transition: max-height .75s ease-out .25s, z-index .95s ease-out .25s, opacity .95s ease-out .25s, margin .5s ease-out .75s, padding .5s ease-out .75s;	
}

.propertydescription{	
width:59%; /*change width here as shrinking occurs*/
display:block;	
width:auto;
border-right:none;
border-bottom:2px dotted black;
min-height:auto;
}


.propertywelcome h4:hover {	
	filter: brightness(1.1);
	background:#EEECDA;
	border-radius:10px;
	behavior: url(PIE2.0/PIE.htc);	 
	} 
 
/*CLAM SHELL IS NEXT*/

/*tabindex in html allow the button to both open and close the panel because tabindex creates focus for normally not focusable divs..css needs focus and pointer events...all work together*/

/*Pointer Event on and off allows to click same button to close*/
.propertywelcome h4:focus{
	pointer-events:none;
	outline:none;	 
	padding:10px;
	padding-bottom:0;
	border-radius:10px 10px 0 0;
}

.propertywelcome h4:focus + h5 {
	pointer-events:auto;	 
	margin:5px auto;	
	font-size:1.1em;
	transition:   font-size .1s ease-in .25s, margin .05s ease-in .01s;	 
}

.propertywelcome h4:focus  + h5 + .propertypiccontainer{
	pointer-events:auto;
	border: 5px solid #488196;	
	margin-top:0;	
	max-height:100%;
	border: 5px solid #488196;
	opacity:1;	
	z-index:1;
	transition: max-height .25s ease-in .25s,  border .25s ease-in .25s, max-height .25s ease-in .25s, z-index .25s ease-in .01s, opacity .25s ease-in .01s;		 
}

.propertywelcome h4:focus    ~ .propertydetailswrap{
	pointer-events:auto;	 
	max-height:100%;
	opacity:1;
	 z-index:1;
	padding: 0 15px;
	margin-bottom:10px;
transition: max-height .25s ease-in .01s, opacity .25s ease-in .5s,z-index .25s ease-in .01s; 
} 

}

/*FOR IE 10 and IE 11  Filter brightness does not work with IE10 or 11 but does work with Edge and all other browsers and devices so make bg lighter for IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width :200px) and (max-width :420px) {  
.propertywelcome h4:hover{
	background:#fdfbe9;	/*lighter background*/	 
	 
	}
}

/*TOO SMALL SO MAKE FULL WIDTH*/
@media only screen and (min-width :1px) and (max-width :199px)
{ 
body
	{
	width:1000px;
	}
}