/*Below styling for smaller screens*/
BODY {font-size: 100%; font-size:calc(100% + 2vw);}

H3 {font-size: 3vw; text-align: center;}

H4 {font-size: 2.5vw; text-align: center;}
P {padding-bottom: 1em; padding-left: 1em; padding-right: 1em; font-size: 2.2vw; text-align: justify;}
IFRAME.calendar {padding-bottom: 1 em; margin: 0 auto;}
A.phone {font-size: 2.3vw; color: white}
A.links {font-size: 2.2vw; color: black;}
LI.rightlist {font-size: 2.2vw;}
img.animate_logo {
  -webkit-animation: color_change 1s infinite alternate;
  -moz-animation: color_change 1s infinite alternate;
  -ms-animation: color_change 1s infinite alternate;
  -o-animation: color_change 1s infinite alternate;
  animation: color_change 1s infinite alternate;
}
@-webkit-keyframes color_change {
  0% { font-color: blue; }
25% { font-color: orange; }
50% { font-color: yellow; }
75% { font-color: black; }
100% { font-color: red; }
}
@-moz-keyframes color_change {
  0% { font-color: blue; }
25% { font-color: orange; }
50% { font-color: yellow; }
75% { font-color: black; }
100% { font-color: red; }
}
@-ms-keyframes color_change {
  0% { font-color: blue; }
25% { font-color: orange; }
50% { font-color: yellow; }
75% { font-color: black; }
100% { font-color: red; }
}
@-o-keyframes color_change {
  0% { font-color: blue; }
25% { font-color: orange; }
50% { font-color: yellow; }
75% { font-color: black; }
100% { font-color: red; }
}
@keyframes color_change {
  0% { font-color: blue; }
25% { font-color: orange; }
50% { font-color: yellow; }
75% { font-color: black; }
100% { font-color: red; }
}



DIV.topbar {position: fixed;
	    top: 0px;
	    background: rgb(68,70,42);
	    z-index: 2;
	    min-width: 100%;
	    height: 80px;
	    -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;
		margin: 0 auto;
 	    text-align: center;
	    position: absolute;
	    width: 70%;
	    height: 76px;
	    border: 1px solid;
	    color: white;
		font-family: "Edwardian Script ITC";
	    font-size: 3.3vw;
	    padding-left: .5em;
	    padding-right: .5em;
	    }*/
DIV.header2 {display: -webkit-flex;
	     /* Safari */
	     -webkit-align-items: center;
	     /* Safari 7.0+ */
    	     display: flex;
             align-items: center;
	     text-align: center;
	     position: absolute;
	     left: 70%;
	     height: 76px;
	     width: auto;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
	     float: right;
	     border: 1px solid;
	     color: white;
	     font-size: 2.3vw;
	     padding-left: 1em;
	     padding-right: 1em;
	     }

IMG {border-width: 0px; margin: 0px; padding: 0px}


	#bg {

position: relative;

		top:  80px;
	
	left:  0px;
	
		width:  100%;
	
		height: auto;
     	     

}

DIV.container {width: 100%; border: 1px solid; position: relative; top: 80px; padding: 0px; margin: 0px; z-index: 1;}
DIV.content {width: 100%; border: 1px solid; padding: 1em;}
DIV.sidebar {width: 100%;  border: 1px solid; padding: 1em;}

/*Below styling for larger screens*/
@media screen and (min-width: 1200px) {
	BODY {font-size: 100%; font-size:calc(100% + 2vw);}
	H3 {font-size: 2.1vw; padding-bottom: 10px;}
	H4 {font-size: 1.7vw; padding-bottom: 10px;}
	P {padding-bottom: 1em; font-size: 1.2vw;}
	LI.rightlist {font-size: 1.2vw; padding-bottom: 1em;}
	A.links {font-size: 1.2vw; color: black; padding: 1em;}
	DIV.topbar {display: -webkit-flex;
	    /* Safari */
	    -webkit-align-items: center;
	    /* Safari 7.0+ */
    	    display: flex;
            align-items: center;
		height: 40px;}






	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;
		    border: 1px solid;
		    color: white;
		    font-size: 2.7vw;
		padding: 0px;
		font-family: "Gungsuh", "Franklin Gothic Medium", "Batang", "Edwardian Script ITC";
		   }
	IMG {border-width: 0px; margin: 0px; padding: 0px}


	#bg {

position: relative;

	     top: 40px;

	     left:  0px;
			
	     width: 100%;

	     height: auto;	
	    }

	
	DIV.container {border: 1px solid; position: relative; top: 40px; padding: 0px; margin: 0px; display:flex;}
	DIV.content {position: relative; top: 0px; left: 5%; height: auto; width: 60%; border: 1px solid; text-align: left;}
	DIV.sidebar {position: relative; top: 0px; left: 7%; height: auto; width: 25%;  border: 1px solid;}


}

/* 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;
}



	/* Navigation Menu - List items */


.nav-item {
  
	/* non-critical appearance styles */
 
 
	width: 200px;
 
	border-top: 1px	solid #111;
  
	border-bottom: 1px solid #000;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.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: 3.5vw;
  
	text-decoration: none;
  
	transition: color 0.2s, background 0.5s;

	}


	.nav-item {
  
	/* non-critical appearance styles */
 
 
	width: 325px;
 
	border-top: 1px	solid #111;
  
	border-bottom: 1px solid #000;

	}


	.nav-item a:active {
	color: yellow;
	font-size: 3.5vw;
	}
	.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: 3.5vw;
	}

	.nav-trigger:checked + label {
  left: 340px;
}


	
.nav-trigger:checked ~ .site-wrap {
  left: 325px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
}	

@media only screen and (min-device-width: 481px) and (max-device-width: 1199px) {
	.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;
  
	transition: color 0.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-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);
}



}

@media screen and (min-width: 1200px) {
	.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;
  
	transition: color 0.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-item a:active {
	color: yellow;
	font-size: 1.3vw;
	}

.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);
}



}




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


.site-wrap {
  

	/* Critical position and size styles */
  
	overflow: hidden;
	min-height: 100%;
  
	min-width: 100%;
  
	background-color: blue; 

	/* 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-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  
	background-size: 200%;
}



/* Nav Trigger */


.nav-trigger {
  

	/* critical styles - hide the checkbox input */

  	position: absolute;
  
	clip: rect(0, 0, 0, 0);
}



@media screen and (min-width: 1200px) {
	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;

	}
}

@media screen and (max-width: 1199px) {
	label[for="nav-trigger"] {
  

	/* critical positioning styles */
  
	position: fixed;
 left: 15px; top: 2px;
 z-index: 3;
  
  
	/* non-critical apperance styles */
  
	height: 70px;
  
	width: 80px;
  
	cursor: pointer;

  	background-image: url("/images/allpages/hamburger.gif");
	background-size: contain;

	}

}

/* Make the Magic Happen */


.nav-trigger + label, .site-wrap {
 transition: left 0.82s;
}



body {
	

	/* Without this, the body has excess horizontal scroll when the menu is open */

	overflow-x: hidden;

	}


	
/* Additional non-critical styles */
	

/* 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; }