/*Universal Styling*/

/* css only show/hide  */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    position: relative;
    *zoom: 1;
}

body:before, body:after {
    content: "";
    display: table;
}

body:after { clear: both }

article {
    margin-bottom: 0rem;
    position: relative;
    *zoom: 1;
}

article:before, article:after {
    content: "";
    display: table;
}

article:after { clear: both }


article section:first-of-type {
        width: 100%;
}

article section:last-of-type {
    display: none;
    visibility: hidden;
}

section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.readmore {
    position: absolute;
    bottom: 0rem;
    width: 100%;
    text-align: center;
    padding: 0rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

.readmore:hover {
    background: rgba(213,147,81,.5);
    color: rgb(255,255,255);
}

.readmore span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ section {
    display: block;
    visibility: visible;
    width: 100%;
}


input[type=checkbox]:checked ~ .readmore span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ .readmore span:last-of-type {
    display: block;
    visibility: visible;
}

	

/* Nav Trigger */
.nav-trigger {
  	/* critical styles - hide the checkbox input */
  	position: absolute;
  	clip: rect(0, 0, 0, 0);
}

/* Make the Magic Happen */

.nav-trigger + label, .site-wrap {
 -moz-transition: left 0.7s;
 -o-transition: left 0.7s;
 -webkit-transition: left 0.7s;
 transition: left 0.7s;
}

/* Site Wrapper - Everything that isn't navigation */

.site-wrap {
  	/* Critical position and size styles */
  	overflow: hidden;
	min-height: 100%;
  	min-width: 100%;
  	background-color: white; 
	/* Needs a background or else the nav will show through */
	position: relative;
  	top: 0px;
  	bottom: 100%;
  	left: 0px;
  	z-index: 1;
  	/* non-critical apperance styles */
  	padding: 0em;
  
  	background-size: 200%;
}

/* Navigation Menu - Background */

.navigation {
  	/* critical sizing and position styles */
	width: 100%;
  	height: 100%;
  	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 0;
   	/* non-critical appearance styles */
  	list-style: none;
	background: #111;
}
BODY {font-size: 100%; font-size:calc(100% + 2vw);
	/* Without this, the body has excess horizontal scroll when the menu is open */
	
	overflow-x: hidden;
	}


/*SmartPhone Portrait Styling*/
@media screen and (max-device-width: 480px) and (orientation: portrait) {

	.nav-item a {
  		/* non-critical appearance styles */
 		display: block;
 		padding: 1em;
 		color: white;
		font-size: 3.5vw;
		text-decoration: none;
		-webkit-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
		-webkit-transition: color 0.2s, background 0.5s;
		transition: color .2s, background 0.5s;
	}
/* Navigation Menu - List items */
	.nav-item {
  		width: 130px;
		height: 5%;
		border-top: 1px	solid #111;
  		border-bottom: 1px solid #000;
	}
	.nav-item a:active {
		color: yellow;
		font-size: 3.5vw;
		-webkit-transition: color 0.2s, background 0.5s;
		transition: color .2s, background 0.5s;
	}
	.nav-item a:hover {
  		color: #c74438;
  		background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
	}
	.nav-trigger:checked + label {
  		left: 130px;
	}
	.nav-trigger:checked ~ .site-wrap {
  	left: 130px;
  	box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
	}
	H2 {font-size: 3.2vw; padding-bottom: 5px; padding-top: 0px; color: white;}
	H1 {font-size: 3.8vw; text-align: center; padding-bottom: 1em; text-align: left;}
	H4 {font-size: 3.5vw; text-align: center; padding-bottom: 1em; text-align: left;}
	
	TABLE.contact {border-spacing: 10px; padding-top: 10px;}
	FORM.contact {padding-top: 10px;}
	TR.contact {padding-top: 10px;}
	TD.contact {padding-top: 10px;}

	FONT.about {font-size: 4vw; color:  rgb(113,40,64);}




	P {padding-bottom: 1em; padding-left: 1em; padding-right: 1em; font-size: 3.5vw; text-align: justify;}
	P.homerec {color: rgb(172,77,73);}
	TABLE.rates {font-size: 3.5vw; padding: 1em;}
	TD.rateheader {padding-right: 2em; font-weight: bold;}
	LABEL.readmore {font-size: 3.5vw; color: black;}  
	IFRAME.calendar {padding-bottom: 1em; margin-left: auto; margin-right: auto; width: 95%; height: 70%; border-width: 0; display: block;}
	A.links {font-size: 3.5vw; color: black;}
	UL.navigation {height: 100%;}
	DIV.sidebar {margin-top: 10px;}
	DIV.topbar {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    position: fixed;
	    top: 0px;
	    background: rgb(0,0,0);
	    z-index: 2;
	    min-width: 100%;
	    height: 40px;
	    -webkit-backface-visibility: hidden;
	    border-width: 0px;
	    margin: 0px;
	    padding: 0px;
	}
	DIV.header {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    width: auto;
	    margin: 0 auto;
 	    text-align: center;
	    color: white;
	    font-size: 4.3vw;
	    padding: 0px;
	    font-family: "Gungsuh", "Franklin Gothic Medium", "Batang", "Edwardian Script ITC", "Times New Roman", Georgia;
	    }
	IMG {border-width: 0px; margin: 0px; padding: 0px}
	IMG.Logo {width: 120px; height: auto; padding-top: 10px;}
	IMG.social {width: 30px; padding-top: 0px; display: inline;}
	IMG.social:hover {background-image: url("/images/allpages/pinterest.png");}
	#bg {
	  position: relative;
   	  top:  40px;
	  left:  0px;
	  width:  100%;
	  height: auto;
     	}
	DIV.container {font-size: 16px; width: 100%; position: relative; top: 40px; padding: 0px 0px 40px 0px; margin: 0px; z-index: 1;}
	DIV.content {width: 100%; padding: 0px 5px 0px 5px;}
	DIV.sidebar {width: 100%; padding: 0px 5px 0px 5px;}
  	label[for="nav-trigger"] {
  		/* critical positioning styles */position: fixed;
 		left: 5px; top: 2px;
 		z-index: 3;
    		/* non-critical appearance styles */
 		height: 35px;
 		width: 42px;
		cursor: pointer;
  		background-image: url("/images/allpages/hamburger4.gif");
		background-size: contain;
		}
	
	}


/*SmartPhone Landscape Styling*/
@media screen and (max-device-width: 640px) and (orientation: landscape){

	.nav-item a {
  		/* non-critical appearance styles */
 		display: block;
 		padding: 0.5em 0.5em 0.5em 1em;
 		color: orange;
		font-size: 5px;
		text-decoration: none; 
		-webkit-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
		-webkit-transition: color 0.2s, background 0.5s;
		transition: color .2s, background 0.5s;
	}
	/* Navigation Menu - List items */
	.nav-item {
  		width: 130px;
		height: 5%;
		border-top: 1px	solid #111;
  		border-bottom: 1px solid #000;
	}
	.nav-item a:active {
		color: yellow;
		-webkit-transition: color 0.2s, background 0.5s;
		transition: color .2s, background 0.5s;
	}
	.nav-item a:hover {
  		color: #c74438;
  		background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
	}
	.nav-trigger:checked + label {
  		left: 130px;
	}
	.nav-trigger:checked ~ .site-wrap {
  	left: 130px;
  	box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
	}
	H2 {font-size: 3.0vw; padding-bottom: 5px; padding-top: 0px; color: white;}
	H1 {font-size: 3.6vw; text-align: center; padding-bottom: 1em; text-align: left;}
	H4 {font-size: 3.3vw; text-align: center; padding-bottom: 1em; text-align: left;}
	
	TABLE.contact {border-spacing: 30px; padding-top: 10px;}
	FORM.contact {padding-top: 10px;}
	TR.contact {padding-top: 10px;}
	TD.contact {padding-top: 10px;}



	P {padding-bottom: 1em; padding-left: 1em; padding-right: 1em; font-size: 2.5vw; text-align: justify;}
	P.homerec {color: rgb(172,77,73);}
	 
	TABLE.rates {font-size: 3.5vw; padding: 1em;}
	TD.rateheader {padding-right: 2em; font-weight: bold;}
	LABEL.readmore {font-size: 3.5vw; color: black;}  
	IFRAME.calendar {padding-bottom: 1em; margin-left: auto; margin-right: auto; width: 95%; height: 70%; border-width: 0; display: block;}
	A.links {font-size: 2.5vw; color: black;}
	UL.navigation {height: 100%;}
	DIV.topbar {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    position: fixed;
	    top: 0px;
	    background: rgb(0,0,0);
	    z-index: 2;
	    min-width: 100%;
	    height: 40px;
	    -webkit-backface-visibility: hidden;
	    border-width: 0px;
	    margin: 0px;
	    padding: 0px;
	}
	DIV.header {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    width: auto;
	    margin: 0 auto;
 	    text-align: center;
	    color: white;
	    font-size: 4.3vw;
	    padding: 0px;
	    font-family: "Gungsuh", "Franklin Gothic Medium", "Batang", "Edwardian Script ITC", "Times New Roman", Georgia;
	    }
	IMG {border-width: 0px; margin: 0px; padding: 0px}
	IMG.Logo {width: 80px; height: auto;}
	IMG.social {width: 30px; padding-top: 0px; display: inline;}
	
	#bg {
	  position: relative;
   	  top:  40px;
	  left:  0px;
	  width:  100%;
	  height: auto;
     	}
	DIV.container {width: 100%; position: relative; top: 40px; padding: 0px 0px 40px 0px; margin: 0px; z-index: 1;}
	DIV.content {width: 100%;}
	DIV.sidebar {width: 100%;}
  	label[for="nav-trigger"] {
  		/* critical positioning styles */position: fixed;
 		left: 5px; top: 2px;
 		z-index: 3;
    		/* non-critical apperance styles */
 		height: 35px;
 		width: 42px;
		cursor: pointer;
  		background-image: url("/images/allpages/hamburger4.gif");
		background-size: contain;
	}
	
}





/*Tablet/Phablet Styling*/
@media only screen and (min-device-width: 681px) and (max-device-width: 1199px), (orientation: portrait) and (min-device-width: 481px) {
	.nav-item a {
  		/* non-critical appearance styles */
 		display: block;
 		padding: 1em;
 		background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
 		color: yellow;
		font-size: 1.5vw;
		text-decoration: none;
		-webkit-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
  		-webkit-transition: color 0.2s, background 0.5s;
		transition: color 0.2s, background 0.5s;
	}
	/* Navigation Menu - List items */
	.nav-item {  
		/* non-critical appearance styles */
 		width: 130px;
		height: 30px;
		border-top: 1px	solid #111;
		border-bottom: 1px solid #000;
	}
	.nav-item a:hover {
  	color: #c74438;
  	background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
	}
	.nav-item a:active {
	color: yellow;
	font-size: 1.5vw;
	}
	.nav-trigger:checked + label {
  	left: 130px;
	}
	.nav-trigger:checked ~ .site-wrap {
  	left: 130px;
  	box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
	}
	H2 {font-size: 1.9vw; padding-bottom: 5px; padding-top: 0px; color: white;}
	H1 {font-size: 2.7vw; text-align: left; padding-bottom: 10px;}
	H4 {font-size: 2.7vw; text-align: left; padding-bottom: 10px;}
	
	TABLE.contact {border-spacing: 30px; padding-top: 10px;}
	FORM.contact {padding-top: 10px;}
	TR.contact {padding-top: 10px;}
	TD.contact {padding-top: 10px;}

	P {padding-bottom: 1em; padding-left: 1em; padding-right: 1em; font-size: 2.2vw; text-align: justify;}
	P.socialline {margin: 0px; padding: 0px 5px 0px 0px;} 
	P.homerec {color: rgb(172,77,73);}	
	TABLE.rates {font-size: 2.2vw; padding: 1em;}
	LABEL.readmore {font-size: 2.2vw; color: black;}  	
	

	FONT.about {font-size: 2vw; color: orange;}

	IFRAME.calendar {padding-bottom: 1em; margin-left: auto; margin-right: auto; width: 80%; height: 60%; border-width: 0; display: block;}
	A.links {font-size: 2.2vw; color: black;}
	TD.rateheader {padding-right: 2em; font-weight: bold;}
	DIV.topbar {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    position: fixed;
	    top: 0px;
	    background: rgb(0,0,0);
	    z-index: 2;
	    min-width: 100%;
	    height: 40px;
	    -webkit-backface-visibility: hidden;
	    border-width: 0px;
	    margin: 0px;
	    padding: 0px;
	}
	DIV.header {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    width: auto;
	    margin: 0 auto;
 	    text-align: center;
	    color: white;
	    font-size: 3.3vw;
	    padding: 0px;
	    font-family: "Gungsuh", "Franklin Gothic Medium", "Batang", "Edwardian Script ITC", "Times New Roman", Georgia;
	    }
	IMG {border-width: 0px; margin: 0px; padding: 0px}
	IMG.Logo {width: 120px; height: auto; padding-top: 10px;}
	IMG.social {width: 30px; padding-top: 0px; display: inline;}
	#bg {
		position: relative;
		top:  40px;
		left:  0px;
		width:  100%;
		height: auto;
    	}
	DIV.container {width: 100%; position: relative; top: 40px; padding: 0px 0px 40px 0px; margin: 0px; z-index: 1;}
	DIV.content {width: 100%;}
	DIV.sidebar {width: 100%;}
	label[for="nav-trigger"] {
  		/* critical positioning styles */
  		position: fixed;
 		left: 15px;
		top: 2px;
 		z-index: 3;
  		/* non-critical apperance styles */
  		height: 35px;
  		width: 42px;
  		cursor: pointer;
  		background-image: url("/images/allpages/hamburger4.gif");
		background-size: contain;
	}
}

/*Laptop Styling*/
@media only screen and (min-width: 1200px) and (orientation: landscape){
	H2 {font-size: 1.3vw; padding-bottom: 0px; padding-top: 0px; color: white;}
	H1 {font-size: 1.7vw; padding-left: 20px; padding-bottom: 10px; padding-top: 10px; text-align: left;}
	H4 {font-size: 1.5vw; padding-bottom: 10px; text-align: left;}
	P {padding-bottom: 1em; padding-left: 20px; padding-right: 1em; font-size: 1.2vw;}
	P.homerec {color: rgb(172,77,73);}
	P.socialline {margin: 0px; padding: 0px 5px 0px 0px;} 
	
	TABLE.contact {border-spacing: 20px; padding-top: 10px;}
	FORM.contact {padding-top: 10px;}
	TR.contact {padding-top: 10px;}
	TD.contact {padding-top: 10px;}


	IFRAME.calendar {padding-bottom: 1em; margin-left: auto; margin-right: auto; width: 80%; height: 60%; border-width: 0; display: block;}
	A.links {font-size: 1.2vw; color: black; padding: 1em;}
	TABLE.rates {font-size: 1.2vw; padding: 1em;}
	TD.rateheader {padding-right: 2em; font-weight: bold;}
	LABEL.readmore {font-size: 1.2vw; color: black;}     
	DIV.accentbar {height: 5px; width: 100%; background: rgb(140,154,94); z-index: 3;}
	DIV.topbar {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
	    height: 40px;
	    position: fixed;
	    top: 0px;
	    background: rgb(0,0,0);
	    z-index: 2;
	    min-width: 100%;
	    height: 40px;
	    -webkit-backface-visibility: hidden;
	    margin: 0px;
	    padding: 0px;
	    }
	DIV.header {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
 	    width: auto;
	    margin: 0 auto;
	    text-align: center;
	    color: white;
	    font-size: 2.3vw;
	    padding: 0px;
	    font-family: "Gungsuh", "Franklin Gothic Medium", "Batang", "Edwardian Script ITC";
	    }
	IMG {border-width: 0px; margin: 0px; padding: 0px}
	IMG.social {width: 20px; padding-top: 0px;}
	IMG.Logo {padding-top: 10px; height: auto; width: auto;}


	FONT.about {font-size: 1.3vw; color:  rgb(240,120,0);}
	TABLE.contact {border-spacing: 10px; padding-top: 10px;}

	FORM.contact {padding-top: 10px;}


	#bg {
	     position: relative;
	     top: 40px;
	     left:  0px;
	     width: 100%;
	     height: auto;	
	    }
        DIV.container {width: 100%; position: relative; top: 40px; padding: 10px 0px 40px 0px; margin: 0px; z-index: 1;display: flex;}
	DIV.content {position: relative; top: 0px; left: 3%; height: auto; width: 60%; text-align: left;}
	DIV.sidebar {position: relative; top: 0px; left: 7%; height: auto; width: 30%; text-align: left;}
	label[for="nav-trigger"] {
   		/* critical positioning styles */
  		position: fixed;
		left: 15px; top: 2px;
 		z-index: 3;
  		/* non-critical apperance styles */
  		height: 35px;
  		width: 42px;
  		cursor: pointer;
  		background-image: url("/images/allpages/hamburger4.gif");
		background-size: contain;
	}
	.nav-item a {
  		/* non-critical appearance styles */
 		display: block;
  		padding: 1em;
 		background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  		color: white;
		font-size: 1.2vw;
		text-decoration: none;
		-webkit-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
  		-webkit-transition: color 0.2s, background 0.5s;
		transition: color 0.2s, background 0.5s;
	}

	/* Navigation Menu - List items */
	.nav-item {
  		/* non-critical appearance styles */
  		width: 200px;
 		border-top: 1px	solid #111;
  		border-bottom: 1px solid #000;
	}
	.nav-item a:hover {
  		color: #c74438;
  		background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
	}
	.nav-item a:active {
		color: yellow;
		font-size: 1.2vw;
	}
	.nav-trigger:checked + label {
  		left: 215px;
	}
	.nav-trigger:checked ~ .site-wrap {
  		left: 200px;
  		box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
	}
}

   

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }