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


body {
	background-color:#E8EAA6;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	color: black;
	margin: 0px;
	padding: 0px;
}

@-ms-viewport{
  width: device-width;
}

.content {
	position:relative;
	top:110px;
	text-align:center;	
}

.mainMenuContainer {
	display:block;
	position:absolute;
	left:0;
	right:0;
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
}

.main2Container {
	display:block;
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
}

.menuParent {
	display:block;
	position:relative;
	margin: 0 auto;
	padding:0;
	width: 100%;
}

.menuButton
{
    position: absolute;
    top: 0px;
	cursor: pointer;
    z-index: 1010;
    height: 30px;
	line-height: 30px;
    border:1px;
	width: 100%;
	outline:0;
	color:#FFF500;
}

.menuButtonRed
{
	background-color: #DA251C;
}

.menuButtonYellow
{
	background-color: #FFF500;
	color:black;
}

.menuButtonGreen
{
	background-color: #00923F;
}


.menuButton img {
	width:20px;
	height:20px;
	vertical-align:middle;
	margin:0px 10px;
}

.menuButton span {
	margin-left:30px;
	font-weight: bold;
}


.menuButtonOpen img
{
    -ms-transform: rotate(180deg);
	-ms-transition-duration:0.3s;
	
	-webkit-transform: rotate(180deg);
	-webkit-transition-duration:0.3s;
	
	transform: rotate(180deg)
	transition-duration:0.3s;
}

.menuButtonClose img
{
	-ms-transform: rotate(0deg);
	-ms-transition-duration:0.3s;
	
	-webkit-transform: rotate(0deg);
	-webkit-transition-duration:0.3s;
	
	transform: rotate(0deg);
	transition-duration:0.3s;
}

.menu
{
    position: relative;

    top: 0px;
    z-index: 1000;
	width: 100%;
	margin:0;
	padding:0;
	overflow:hidden;

	/*-webkit-transition-property: max-height;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;*/
	max-height: 30px;
}

/*.menuButton:focus + .menu*/
.menuOpen
{
	/* -webkit-transition: max-height 0.7s ease-in; */
		
	-ms-transition-property: max-height;
	-ms-transition-duration: 0.3s;
	-ms-transition-timing-function: ease-in;
	
	-webkit-transition-property: max-height;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-in;
	
	transition-property: max-height;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	
	max-height: 265px;
}

.menuClose
{
	/* -webkit-transition: max-height 0.7s ease-in; */
		
	-ms-transition-property: max-height;
	-ms-transition-duration: 0.3s;
	-ms-transition-timing-function: ease-out;
	
	-webkit-transition-property: max-height;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	
	transition-property: max-height;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	
	max-height: 30px;
}

.transparent {
	width:inherit;
	height:30px;
}

.menuContent {
	width:inherit;
    background-color: #333;
	padding:1% 0;
	text-align:center;
}

.menuContainer {
	display:table;
	margin: 0 auto;
	text-align: center;
	min-width:300px;
	max-width: 1100px;
	width:100%;
	border-collapse: separate;
  	border-spacing: 0px 0px;	
}

.menuGroup {
	display:table-cell;
	width:100%;
}

.menuGroupLeft {
	text-align:right;
}

.menuGroupRight {
	text-align:left;
}

.menuSubGroup {
	display:inline-block;
	width:100%;
	margin:0;
	padding:0;
	text-align:center;
}

.menuItem {
	display: inline-block;
	z-index: 1005;
	width: 97%;
	margin: 1% auto;
	padding: 10px 0px;
	background-color: #555555;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #FFF984;
}

.hiddenMenuItem {
	display:none;
}

.clearFloat {
	clear:both;
}


@media only screen and (min-width: 464px) {
	
	.menuContainer {
		width:auto;
	}
	
	.menuGroup {
		width:auto;
	}
	
	.menuSubGroup {
		width:auto;
		max-width:464px;
		text-align:left;
	}
	
	.menuItem {
		width:230px;
		margin:1px;
	}
}

@media only screen and (min-width: 464px)  and (min-device-width: 701px) {
	.menuSubGroup {
		max-width:304px;
	}
	
	.menuItem {
		width:150px;
	}
}


@media only screen and (min-device-width: 701px) {
	
	.menuItem {
		padding:7px 0px;
		font-size: 0.8rem;
	}
	
}