@font-face {
  font-family: 'Roundest Bold';
  src: url('../font/roundest-serial-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roundest Medium';
  src: url('../font/roundest-serial-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roundest';
  src: url('../font/roundest-serial-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roundest Light';
  src: url('../font/roundest-serial-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #E0DEB5;
  font-family: 'Roundest'
}

#menubar {
	display: inline;
	width: 85%;
	font-size: 1vw;
	height: 2.8vw;
	margin-right: 0;  
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: min(1.524vw,2.7097vh); /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(255,255,255,0.9); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;  
  padding: 0px;
  border: none;
  /*width: min(60vw,106.667vh);*/
  width: min(65vw, 115.556vh);
  /*aspect-ratio: 19 / 15;*/
  /*font-family: 'Avant Garde';*/
  overflow: hidden;
  /*height: min(47.33vw,84.137vh);*/
  height: min(51.316vw, 91.228vh);
  box-shadow: 0px 0px 5px 5px rgba(128,128,128,.2);
}

#floatingBarsG{
	position:relative;
	width:60px;
	height:75px;
	margin:auto;
}

.blockG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:10px;
	height:23px;
	border-radius:8px 8px 0 0;
		-o-border-radius:8px 8px 0 0;
		-ms-border-radius:8px 8px 0 0;
		-webkit-border-radius:8px 8px 0 0;
		-moz-border-radius:8px 8px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:27px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:8px;
	top:10px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:25px;
	top:3px;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:8px;
	top:10px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:27px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:8px;
	bottom:7px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:25px;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:8px;
	bottom:7px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}

			input {
				font-size: min(1.2vw, 2.133vh);
				height: min(1.815vw, 3.226vh);		
				padding-left: min(0.5vw, 0.889vh);
				padding-top: min(0.5vw, 0.889vh);
				padding-bottom: min(0.5vw, 0.889vh);				
				border: 0.1vw solid #bbbbbb;
				border-radius: min(0.5vw, 0.889vh);
			}	
			
 .loginbutton {
   display: inline-block;
   color: #FFFFFF;
   background-color: #553215;
   font-size: min(1.2vw, 2.133vh);   
   padding-top: min(0.8vw, 1.422vh);
   padding-left: min(0.871vw, 1.548vh);
   padding-right: min(0.871vw, 1.548vh);
   padding-bottom: min(0.15vw, 0.267vh);
   height:  min(2.2vw, 3.911vh);
   border: min(0.1vw, 0.178vh) #333333 solid;
   border-radius: min(1.688vw, 3vh);
   cursor: pointer;
   text-align: center;
   vertical-align: middle;
}