@charset "UTF-8";
/* CSS Document */

* {
margin:0px;
}

body {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:0.9em;
}

h1 {
font-size: 76%;
text-align:center;
color:#CCCCCC;
}

h2 {
font-size: 94%;
margin-bottom:15px;
padding-left:1%;
font-weight:bold;
}

h3 {
font-size: 94%;
margin-bottom:15px;
font-weight:bold;
}

h4 {
font-size: 94%;
margin-bottom:15px;
font-weight:bold;
}

p {
font-size:90%;
margin-bottom:15px;
padding-left:1%;
}


@media only screen and (min-width : 320px) and (max-width : 480px) {

    h1 {
    font-size: 80%;
    text-align:center;
    color:#CCCCCC;
    }

    h2, h3, h4 {
    font-size: 110%;
    margin-bottom:15px;
    padding-left:1%;
    font-weight:bold;
    }

    p {
    font-size:110%;
    margin-bottom:15px;
    padding-left:1%;
    }

}


#header-wrapper {
width:100%;
}

#header {
width:100%;
margin-left:auto;
margin-right:auto;
}

#header img {
width:100%;
height:auto;
}

#menu-wrapper {
width:100%;
background-color:#000000;
padding:10px 0px;
margin-bottom:25px;
}

/* responsive menu */

nav {
width:100%;
margin: 0 auto;
#000000
}

nav a {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
display:block;
}

nav ul {
background-color:#000000;
overflow:hidden;
color:#FFFFFF;
padding: 0;
text-align:center;
margin: 0px 0px 0px 0px;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
clear:both;
}

nav ul li {
display:inline-block;

}

nav ul li:hover {
background-color:#FFFFCC;
}

nav a {
color:#FFFFFF;
padding:20px 20px;
}

nav a:hover {
color:#000000;
}


.handle {
width:100%;
height:auto;
background-color:#000000;
background-image:url(../images/menu-button.png);
background-position:right;
background-repeat:no-repeat;
border-right: 10px solid transparent;
text-align:left;
font-size:120%;
box-sizing: border-box;
padding: 25px 10px 25px 10px;
cursor: pointer;
color:#FFFFFF;
display:none;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
	
	nav ul {
	max-height:0px;
	}
	
	.showing {
		max-height:20em;
	}
	
	nav ul li {
		box-sizing: border-box;
		width: 100%;
		padding: 0px;
		text-align:center;
	}
	
	nav a {
	font-size:1.2em;
	line-height:1.2em;
	color:#FFFFFF;
	}
	
	.handle {
	display:block;
	margin-top:0px;
	}
}

#content-wrapper {
width:100%;
}

#content {
width:100%;
max-width:960px;
margin-left:auto;
margin-right:auto;
}

#content-left {
width:48%;
float:left;
}

#content-left img {
max-width:100%;
height:auto;
}

#content-right {
width:48%;
float:right;
padding-right:2%
}

.quotes {
margin-top:20px;
background-color:#FFFFCC;
width:90%;
padding:2% 4%;
margin-left:auto;
margin-right:auto;
}

.quote-text {
color: #555555;
font-size: 90%;
font-style: italic;
}

@media screen and (max-width: 640px) {

#content {
width:96%;
padding-left:2%;
padding-right:2%;
margin-left:auto;
margin-right:auto;
}

#content-left {
width:100%;
float:left;
}

#content-right {
width:100%;
float:left;
margin-top:15px;
}

.quotes {
margin-top:10px;
}

}


#footer-wrapper {
margin-top:20px;
width:100%;
background-color:#666666;
padding:15px 0px;
}

#footer {
width:100%;
max-width:760px;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font-size:80%;
}

#footer a {
color:#FFFFFF;
}