/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 15, 2014 */
@font-face {
    font-family: 'amertype_md_btmedium';
    src: url('fonts/mt-menu-webfont.eot');
    src: url('fonts/mt-menu-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/mt-menu-webfont.woff2') format('woff2'),
         url('fonts/mt-menu-webfont.woff') format('woff'),
         url('fonts/mt-menu-webfont.ttf') format('truetype'),
         url('fonts/mt-menu-webfont.svg#amertype_md_btmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
.amt {font-family:'amertype_md_btmedium',sans-serif;letter-spacing:0.07rem;} /* links and titles */

/* the pointer-events property does not work in IE, so load
an alternative style sheet with explicit menu */

html {background-color:black;background-image:url('images/paint.jpg');
	background-repeat:no-repeat;background-position: center;
	background-origin:border-box;background-attachment:fixed;
	  background-size: cover;}

/*  font-size: calc( 12px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) ));*/
/* 12px min; 24px max; 800px max width; 400px min width of viewport*/
html {font-size:calc(11px + 1vw * 4 / 9);}
@media (max-width:300px) {html {font-size:12px;}}
@media (min-width:1000px) {html {font-size:16px;}}

body {font-size:1rem;line-height:1.2;color:#ccc;margin:0;padding:0;
	font-family: "Verdana",sans-serif;}

h1 {font-size:2.5rem;margin-bottom:2.5rem;}
h2 {font-size:2.25rem;margin-bottom:2.25rem;}
h3 {font-size:2rem;margin-bottom:2rem;}
h4 {font-size:1.75rem;margin-bottom:1.75rem;}
h5 {font-size:1.5rem;margin-bottom:1.5rem;}
h6 {font-size:1.25rem;margin-bottom:1.25rem;}
p {font-size:1rem;}
.clear {clear:both;}
.center {text-align:center;}

.navigation,.navigation ul  {line-height:200%;list-style:none;
	font-family:'amertype_md_btmedium',sans-serif;letter-spacing:0.07rem;}
.navigation ul {margin:0;padding:0;}
#social .nav-item {display:none;}
#social:active .nav-item,#social:focus .nav-item {display:inline;}

#logo {width:100%;height:auto;float:left;}

#triggerContainer {max-width:60rem;width:100%;min-height:100%;margin:auto;
	position:fixed;top:0;left:50%;background-color:transparent;
	pointer-events:none;  /* lets mouse clicks pass through the overlay to the lower layer */
	/* see "#triggerBox label" below */
}
#triggerPosition {position:absolute;left:-50%;overflow-x: hidden;
	height:100%;background-color:transparent;}


#triggerBox
{
    width: 15rem;height: auto;
    margin: 0;
    padding:1rem;
    position: relative;
    background-color:transparent;
}

input[type="checkbox"] {
	visibility: hidden;
	clip: rect(0, 0, 0, 0);
	padding:0;margin:0;border:none;
}
/* THIS IS WHERE THE MENU GOES */
#triggerBox div  /* unchecked case */
{
    width: 14rem;;
    height:200%;  /* otherwise it clips the bottom */
    background-color: #333;
    border: #000 thin solid;
    border-radius:0.5rem;
    position: relative;
	top:2rem; /* do not overlay the trigger */
    left:-20rem; /* hide the div */
	transition: all 2s ease;
}
/* THIS IS THE VISIBLE MENU */
#triggerBox input[type="checkbox"]:checked ~ div
{
    left:1rem; /* move into the window */
    pointer-events:auto;  /* catch mouse clicks that would have passed trough */
}

#triggerBox label  /* container of the ≡ */
{
    display: block;
/*    width: 3rem;height: 3rem; this makes the box disappear, but the ≡ overflows and is active. */
	transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    line-height:1;
    color: #69f;
    pointer-events:auto;  /* catch mouse clicks that would have passed trough */
}

#triggerBox label:before
{
    content:'≡';
    font-size: 4rem;
    position: absolute;
    left: 50%;
    top:0;
}
#triggerBox label:hover {color:#00f;}

#triggerBox input[type="checkbox"]:checked ~ label
{
    color:#f00;
}
/********************************************/
#socialTrigger
{
    width: 10rem;height: auto;
    margin: 0;
    padding:1rem;
    position: relative;
    background-color:transparent;
}

/* THIS IS WHERE THE SUBMENU GOES */
#socialTrigger div  /* unchecked case */
{
    width: 9rem;
    height:200%;  /* otherwise it clips the bottom */
    background-color: #333;
    border: none;
    position: relative;
    margin-top:-3rem;
    display:none;
}
/* THIS IS THE VISIBLE SUBMENU */
#socialTrigger input[type="checkbox"]:checked ~ div
{
    display:block;
}

#socialTrigger label  /* container of the 'Social' */
{
    display: block;
	transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    line-height:1;
    color: #00f;
    pointer-events:auto;  /* catch mouse clicks that would have passed trough */
}

/* use the same color as in <a> links */
#socialTrigger label:before
{
    content:'Social';
    font-size: 1rem;
    line-height:200%;
    color: #9cc;
}
#socialTrigger:hover label:before {color:#f66;}

/* if sticky color is desired */
/*
#socialTrigger input[type="checkbox"]:checked ~ label
{
    color:#f66;
}
*/

#mainContainer {margin:auto;width:100%;max-width:60rem;
	background-color: #000;padding:0;border:#000 thin solid;border-radius:0.5rem;}
#header img {display:block;max-width:100%;height:auto;margin:auto;border:#000 thin solid;border-radius:0.5rem;}
#main {padding:0 1rem 1rem 1rem;min-height:100%;}
#foot {text-align:center;background-color:black;border-top:thin solid white;
		border-radius: 0 0 0.5rem 0.5rem;height:2rem;font-style:italic;
		line-height:2em;font-size:80%;}

/* use the same link color as in socialTrigger */
a,a:visited {text-decoration:none;color:#9cc;}
a:hover {text-decoration: underline;color: #f66;}