/*
 * -- Text Styles --
 */
body{color:rgb(80,100,100) ;}
h2, h3{letter-spacing:0.25em ; text-transform:uppercase ; font-weight:600 ;}
p{line-height:1.6em ;}
.pure-form-message-inline{font-size:10px ; margin-bottom:10px ; margin-left:10px ; display:block ;}

form .error-text{font-size:10px ; color:rgb(255,0,0) ;}


/*
 * -- Layout Styles --
 */
.l-content{margin: 0 auto ;}
.l-box{padding: 0.5em 2em ;}
textarea{min-height: 150px ;}
.success-msg{margin-left:auto ; margin-right:auto ; width:325px ;}


/*
 * -- Link Styles --
 */
.l-box a{color:rgb(50,100,250) ; text-decoration:none ;}
.l-box a:visited{color:rgb(50,100,250) ; text-decoration:none ;}
.l-box a:hover{text-decoration:underline ;}

.footer a{color:rgb(255,255,255) ; text-decoration:none ;}
.footer a:visited{color:rgb(255,255,255) ; text-decoration:none ;}
.footer a:hover{text-decoration:underline ;}
 

/*
 * -- Menu Styles --
 */
.pure-menu{box-shadow:0 1px 1px rgba(0,0,0, 0.20) ;}
.pure-menu-link{padding: .5em .7em ;}


/*
 * -- BANNER --
 * The top banner with the headings. By using a combination
 * of `display: table;` and `display: table-cell;`, we can
 * vertically center the text.
 */

.banner {
    background: transparent url('/img/banner.jpg') 0 0 no-repeat fixed;
    text-align: center;
    background-size: contain;

    height: 100px;
    width: 100%;
    margin-bottom: 2em;
    display: table;

}

.banner-head {
	display: table-cell;
	vertical-align: middle;
	margin-bottom: 0;
	font-size: 2em;
	color: white;
	font-weight: 500;
	text-shadow: 0 1px 1px black;
}


.information-head {
    color: black;
    font-weight: 500;
}

.footer {
    background: #111;
    color: #888;
    text-align: center;
	font-size:10px;
}



/* -- TABLET MEDIA QUERIES --*/
@media(min-width: 767px)
{.banner-head{font-size: 2em;}}

/* -- PHONE MEDIA QUERIES -- */
@media(min-width: 480px)
{.banner{height: 200px;} .banner-head{font-size: 2em;}}