/* CSS */
@font-face {
    font-family: Raleway-Light;
    src: url(Raleway-Light.ttf);
}

body {background: #fff;margin:0;padding:0;font-family: Raleway-Light;color:#000;font-size:16px;}
.hero {width: 40%;display: block;float: left;}
.page {float: left;width:53%;padding-left: 4%;padding-top: 4%;padding-bottom: 4%;}
.content {}
.btn {display: inline-block;background: #000;border: none;color: #fff;padding: 10px;font-family: Raleway-Light;font-size:1em;text-decoration: none;margin: 20px 20px 0px 0;}
.btn:hover {background:#666;}
.btnP {background: #166544}
.btnP:hover {background: #019C5B}
.small {font-size:0.8em;}
.req {font-size:0.8em;color:#aaa;margin-left:2px;}
h1 {font-size: 3em;background: url(../images/maggiekruklogo.png) no-repeat;text-indent: -99999px;background-size: 65%;padding: 4%;}
p {line-height: 1.3em;}

label {display:block;margin-bottom: 5px;font-weight: bold;}
input, textarea {display:block;margin-bottom: 10px;width: 90%;border: 1px solid #ccc;padding: 6px;font-family: monospace;font-size: 1em;color: green;background: rgba(238, 238, 238, 0.2);-webkit-appearance: none; border-radius: 0;}
input#submit {width:auto}
.form_instructions {color:#bbb;}
.form_instructions li {display:inline-block;color: #DE9090;margin-right:5px;}

/* Mobile */
@media screen and (max-width: 700px) {
	.hero {width: 100%;position: absolute;z-index:-1;opacity:0.0;}
	.page {float:none;width:auto;padding:20px;z-index:999;}
	.content {clear:both;z-index:999;font-weight:bold;}
	h1 {margin:0;padding:0;position:relative;display:block;background-size: 100%;border-bottom:1px solid #999;text-indent: 0;background: none;padding-bottom: 15px;}

}

@media screen and (max-width: 1100px) {
	h1 {padding:2%;}
}