@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700|Muli:300,400|Open+Sans:400,300,700|Roboto:400,100,300,700|Michroma|Architects+Daughter);
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
    width: 100%;
}

#bodywrap {
    width: 100%;
    margin: 0 auto;
	overflow-x:hidden;
}

#headwrap {
    width: 100%;
    background-color: #000000;
}

#headarea {
    height: 500px;
    width: 80%;
 	margin: 0 auto;
}

#aninumb {   
    vertical-align: center;
}

#numbheader {
    text-align: center;
    color: #ffffff;
    font-family: 'Muli', sans-serif;
    font-size: 52px;
    font-weight: 700; 
	padding-top: 200px;
} 

#keyboard {
    width: 100%;
    height: 300px;
    margin-top:50px;
    margin-bottom:-23px;
}

#mainwrap {    
    width: 100%;
    background-color: #ffffff;
    align-content: center;
    
}

#bodysection {    
    text-align: center;    
    width: 80%;
    margin: 0 auto;
    display: block;
}

#h2body {
    color: #666666;
    font-family: 'Roboto', sans-serif;
    font-size: 34px;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    font-weight: 300;
    text-align: center;
}

#arrow {
    align-content: center;    
    margin-right: 30px;	
}

/*COLUMNS*/

#midwrap {
    width: 100%;
	margin: 0 auto;
	display:block;
	margin-left:5%;
}

#midsection {    
    width: 90%;
    margin: 0 auto;
	display:block;
	
}

.col13 {
	width: 20%;
	margin-top:200px;
	height:350px;
	background-color:#D1DDF0;
    margin: 10px;
	padding: 10px;
    border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px;
    border: 37px double #b5b5b5;
}

.fl {float:left;}
.clear {clear:both;}

#h3left,
#h3middle,
#h3right {
	font-family: 'Architects Daughter', cursive;
	font-size: 32px;
	font-weight: 700;
	padding-left:10%;
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    margin-bottom:30px;
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
}

form input[type=submit],
form input[type=reset]{
	float: right;
	background: black;
	border: 2px solid #0505FA;
	color: white;
	padding: 6px 20px;
	cursor: pointer;
    margin-top: 10px;
    margin-right: 22px;
    margin-top:10px;
}

#day-input,
#month-input,
#year-input,
#trivia-input{
    width:95%;
}

label {
    font-family: 'Roboto', sans-serif;
    vertical-align: top;
    display: inline-block;
	font-size:14px;
	padding-bottom:5px;  
}

#labmonth {
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
}

#labday {
    margin-top: 6px; 
    font-family: 'Roboto', sans-serif;
}

#labyear {
    margin-top: 6px; 
    font-family: 'Roboto', sans-serif;
}

#labtrivia {
    margin-top: 6px; 
    font-family: 'Roboto', sans-serif;
}

#date-fact {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
	color:#770A0B;
}

#year-fact {
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
	color:#770A0B;
}

#trivia-fact {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color:#770A0B;
}

footer {
	width:100%;
    background-color:#B8B8B8;
	height: 200px;
	text-align:center;
    vertical-align: center;
	
}

#copyright {
   padding-top: 30px; 
}


@media (min-width: 1000px) and (max-width: 1335px){
#midwrap {
	margin-left:4%;
}
#arrow {
    align-content: center;    
}

/*COLUMNS*/

.col13 {
	width: 18%;
}

#h3left,
#h3middle,
#h3right {
	font-size: 24px;
	padding-left:2%;
}

p {
	font-size:18px;
	margin-bottom:20px;
}

form input[type=submit],
form input[type=reset]{
	padding: 5px 18px;
	margin-top: 10px;
}

label {
	padding-bottom:5px;  
}
}


@media (min-width: 631px) and (max-width: 999px){
#midwrap {
	margin-left:2%;
}
#arrow {
    align-content: center;    
	max-width:80%;
	max-height:80%;
}

/*COLUMNS*/

#midsection {    
    width: 90%;
    margin: 0 auto;
}

.col13 {
	width: 25%;
	border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px;
    
	border:solid #b5b5b5;
}

#h3left,
#h3middle,
#h3right {
	font-size: 24px;
	padding-left:2%;
}

p {
	font-size:18px;
	margin-bottom:20px;
}

form input[type=submit],
form input[type=reset]{
	padding: 5px 18px;
	margin-top: 10px;
	float:none;
}

label {
	padding-bottom:5px;  
}
}

@media screen and (max-width: 630px){
#headarea {
    height: 350px;
}
#midwrap {
	margin-left:5%;
}
#numbheader {
    font-size: 36px;
	padding-top:100px;
}
#h2body{
	font-size:24px;	
}

#arrow {
    align-content: center;    
	max-width:60%;
	max-height:60%;
}

/*COLUMNS*/

.fl{
	float:none;	
}

#midsection {    
    width: 95%;
    margin: 0 auto;
	display:block;
}

.col13 {
	width: 75%;
	border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px;
    border:solid #b5b5b5;
}

#h3left,
#h3middle,
#h3right {
	font-size: 24px;
	padding-left:2%;
}

p {
	font-size:18px;
	margin-bottom:20px;
}

form input[type=submit],
form input[type=reset]{
	padding: 5px 18px;
	margin-top: 10px;
	float:none;
}

label {
	padding-bottom:5px;  
}
}