/* Nathan Walker - ACTION SCORE GENERATOR */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;  }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; }
p { margin: 0 0 10px;}
img { display: block; border:thin solid #000000; margin-bottom: 10em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;	}
::selection { background: #3AE7E6; color: #000; text-shadow: none;  /* Safari */ }
::-moz-selection { background: #3AE7E6; /* Firefox */ }

/* Structure */
#wrapper {
	width: 98%;	
	max-width: 790px;
	margin: 0 auto;
	padding: 2%;
	} 

#main-content { display: none; }

/* Header */

.name {			position:fixed; 
                    top:2px; 
                    left:2px; 
                    background-color: none;
                    color:white;
                    font-size: 1em;
                    z-index: 100;
                }


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background:#F1F1F1;	}

a {
	color: #c0392b;
	text-decoration: none;
}

/* Nav */
nav {
	margin-top: 0em;
	margin-bottom:1em;
	text-align: center;

	}
	
nav li {
		display: inline-block;
		margin-left: 1em;
		}

nav a:link{text-decoration: none; color:white; background:none;}
nav a:hover{text-decoration: none; color:white; background:none;}
nav a:active{text-decoration: none; color:white; background:none;}
nav a:visited{text-decoration: none; color:white; background:none;}

div#main {
 margin-top: 0.5em;
 text-transform: uppercase;

/*text-shadow: 41px 45px 60px rgba(150, 150, 150, 1);*/
 text-shadow:0px 1px #343434;
 font-size: 6em;
 font-weight: bold;
 letter-spacing: 0em;
 line-height: 1em;
 text-align: center;
 color:#323232;
}

/* Header Style */
.main,
.container > header {
	margin: 0 auto;
	padding: 2em;
}

.container > header {
	text-align: center;
	background: #d94839;
	padding: 3em;
}

.container > header h1 {
	font-size: 1em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;

	opacity: 0.7;
	padding: 0 0 0.6em 0.1em;
}

button {
	border: none;
	padding: 0.3em 0.9em;
	background: none;
	color: red;
	font-family: 'Monaco', Courier, Arial, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 1px;
}

button:hover {
	color:#FFFFff;
}

.md-close{color:black;}




/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
 
 body{background: #222222;}
	div#main {
	margin-top: 0em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color:#eee;

	}
#wrapper {
	width: 95%;	

	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;
		}	

		nav li {
			margin: 0;
			margin-bottom: 0em;
			background: red;
			border-radius: 5px;
			display: block;
			margin-bottom: 3px;
			}
			nav a {
				display: block;
				padding: 10px;
				text-align: center;
				
				}	
button{border:none;
		color:white;}

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width: 600px){
/* Styles */
 
	body{background: #222222;}
	div#main {
	margin-top: 0em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color:#eee;
	font-size: 3em;
	line-height: 1em;

	}
#wrapper {
	width: 98%;	
	max-width: 430px;
	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;
		}	

nav{margin-bottom:0em;}
		nav li {
			margin: 0;
			margin-bottom: 0em;
			background: red;
			border-radius: 5px;
			display: block;
			margin-bottom: 3px;
			}
			nav a {
				display: block;
				padding: 10px;
				text-align: center;
				
				}	
button{border:none;
		color:white;}

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
	body{background: #222222;}
	div#main {
	font-size: 3.6em;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center;
	color:#eee;

	}
#wrapper {
	width: 95%;	
	max-width: 300px;
	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;
		}	

		nav{margin-bottom:0em;}

		nav li {
			margin: 0;
			margin-bottom: 0em;
			background: red;
			border-radius: 5px;
			display: block;
			margin-bottom: 3px;
			}
			nav a {
				display: block;
				padding: 10px;
				text-align: center;
				
				}	
button{border:none;
		color:white;}

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
 body{background: #222222;}
	div#main {

	margin-top: 0em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color:#eee;

	}
#wrapper {
	width: 95%;	
	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;

				
				}
				button{border:none;
		color:red;}

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
 body{background: #222222;}
	div#main {

	margin-top: 0em;
	text-transform: uppercase;
	font-size: 5.5em;
	letter-spacing: 0.0em;
	line-height: 1em;
	font-weight: bold;
	text-align: center;
	color:#eee;

	}
#wrapper {
	width: 98%;	
	max-width: 750px;
	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;
		}	

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
 body{background: #222222;}
	div#main {

	font-size: 6.2em;
	line-height: 1.2em;
	font-weight: bold;
	text-align: left;
	color:#eee;

	}
#wrapper {
	width: 95%;	
	max-width: 500px;
	margin: 0 auto;
	padding: 2%;
	} 

	nav, #main, {
		float: left;
		clear: left;
		margin: 0 0 0px; 
		width: 100%;
		}	

}