* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
	font-family: 'Roboto Slab', serif;
	color: #34495e;
	letter-spacing: 0;
}

a {
	text-decoration: none;
	color: rgba(0, 150, 57, 1);
}

a:hover,
a:focus {
	text-decoration: none;
}

ul,ol {
	margin-left: 0;
	padding-left: 0.75em;
}

ul.nobullets{
	list-style: none;
}

li {
	margin-left: 1.5em;
}

table {
	margin-bottom: 1.5em;
}

hr {
    clear: both;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 1.5em 0;
}

.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.is-center {
	text-align: center;
}

.is-right {
  text-align: right;
}

.is-left{
	text-align: left;
}


.l-box-lrg {
	padding: 2em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.l-box-lrg-alt{
	padding: 2em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.pull-left{
    float: left;
}

/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form fieldset{
	border: none;
	margin: 0;
}

.pure-form label {
	margin: 1em 0 0;
	font-weight: bold;
	font-size: 100%;
}

.pure-form input[type],
.pure-form textarea {
	border: 2px solid #ddd;
	box-shadow: none;
	font-size: 100%;
	width: 100%;
	margin-top: 0.5em;
	margin-bottom: 0.8em;
	text-align: left;
}

.pure-form input[type], .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly], .pure-form select {
    margin-bottom: 0.8em;
    margin-top: 0.5em;
}

.pure-form input[type=checkbox],
.pure-form input[type=radio] {
	width: auto;
	margin:0;
}

.pure-form input[type="sumbit"]{
	width: 50%;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/

.pure-button {
	background-color: white;
	color: #009639;
	padding: 0.5em 1em;
	border-radius: 5px;
}

a.pure-button-primary {
	background: white;
	color: #009639;
	border-radius: 5px;
	font-size: 120%;
}

.pure-button-success {
	background-color: #009639;
	color: white;
	border-radius: 5px;
	font-size: 120%;
	margin-top: 1em;
	-moz-box-shadow: 0px 1px 4px #1871a7;
	/* FF3.5+ */
	-webkit-box-shadow: 0px 1px 4px #1871a7;
	/* Saf3.0+, Chrome */
	box-shadow: 0px 1px 4px #1871a7;
	/* Opera 10.5, IE 9.0 */
}

.cta-button{
	font-size: 1em;
	font-weight: bold;
	margin-top: 1em;
	padding: 6px 14px;
	line-height: 2em;
}

/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/


.pure-menu-heading, .pure-menu-children {
	color: white;
	font-weight: 400;
	font-size: 120%;
	background-color: #2d3e50;
	margin: 0;
	width: 100%
}


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

/*.header .pure-menu {
	background: #2d3e50;
	position: fixed;
	z-index: 4;
	width: 100%;
	top: 0;
	padding-top: 0.5em;
}*/

.pure-menu-heading{
	font-weight: normal;
	font-size: 1em;
	vertical-align: top;
	width: 100%;
	max-width: 15em;
	margin: 0.5em 0 0.5em 1em;
}

    @media screen and (max-width: 767px) {
		.pure-menu-heading{
			max-width: 10em;
		}
    }

.logo {
	-webkit-tap-highlight-color: rgba(45,62,80,0.5);
	text-decoration: none;
	font-weight: bold;
	line-height: 4em;
	color: #fff;

}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.header {
	background: #2d3e50;
}

.header .pure-menu {
    border-bottom-color: black;
    border-radius: 0;
    text-align: right;
}

.header .pure-menu > .pure-menu-list {
	text-align: left;
	margin: 2em 1em;
}

.pure-menu-link {
	/*margin-top: 2em;*/
    padding: .5em .7em;
		color: white;
}

.pure-menu-link:hover{
	color: #2d3e50;
	border-radius: 5px;

}

li ul li a.pure-menu-link{
	margin-top:0;
	padding: 0.5em 0.7em;
	font-size: 0.9em;
}

li ul li a.pure-menu-link:hover{
	color: black;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
}

.pure-menu-link-footer{
	display: inline-block;
	color: white;
	width: 2em;
	height: 2em;
	border-radius: 100%;
	border: 2px solid white;
	padding: .2em 0.5em 1em;
	margin-right: 1em;

}

a.pure-menu-link-footer:last-of-type{
	margin-right: 0;
}

/*--winners+finalists internal navigation--*/
.pill{
	background-color: #fff;
	border: 1px solid #2eb82e;
	border-radius: 4px;
}

.pure-menu {
    /*padding: 15px 0;*/
    border: 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}

/*--winners+finalists internal navigation--*/
.pill, .pure-menu-children.pill{
	background-color: #f4f4f4;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
}

.pill .pure-menu-link {
	margin-top: 0;
	color: rgba(45,62,80,1);
}

.pill .pure-menu-link:hover {
	color: #2eb82e;
	background-color: #fff;
}


@media (max-width: 47.999em) {
	.header .pure-menu {
		text-align: left;
	}
	.header .pure-menu > .pure-menu-list {
		margin: 0.5em 1em;
	}
}

/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/

.splash-container {
	/*background: linear-gradient(rgba(45,62,80,0.9), rgba(96, 108, 136, 0.0)), url(../../images/site/banner_image2015.jpg) no-repeat center bottom;*/
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0, 0, 0, 0.6)), url(../../images/site/banner_image2015.jpg) no-repeat center bottom;
	background-size: cover;
	width: 100%;
	height: 50vh;
	display: table;
}

.splash {
/* absolute center .splash within .splash-container */
	margin: 1em auto;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	padding: 1em;
}

/* This is the main heading that appears on the blue section */

.splash-head {
	color: #ffffff;
	text-shadow: none;
	line-height: 1.4em;
	margin: 0;
	text-shadow: #000 0px 0px 2px;
}
/* This is the subheading that appears on the blue section */

.splash-introduction {
	color: #ffffff;
	font-size: 1em;
	line-height: 1.4em;
	text-shadow: #000 0px 0px 2px;
}

.splash .button-link {
	font-size: 0.75em;
}


/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/

.content-wrapper {
/* These styles are required for the "scroll-over" effect */
	/*position: absolute;
	top: 60%;
	width: 100%;
	min-height: 12%;
	z-index: 2;*/
	background: white;
}

.content-wrapper-alt {
/* These styles are required for the "scroll-over" effect */
	/*position: absolute;
	top: 7.5rem;
	width: 100%;
	min-height: 12%;
	z-index: 2;*/
	background: white;
}

.content{
	padding: 0.5em 2em;
	margin: 0 auto 2em auto;
    max-width: 1280px;
}

.content + .pure-u-1 {
	/*background: #f8f9fb;*/
}

.l-content {
    padding-top: 1em;
    padding-bottom: 1em;
	margin: 0 auto;
}

.l-box {
	padding: 0.5em 1em;
}

.l-box-lrg {
	padding: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.content-head {
	font-size: 2.5em;
	line-height: 1.2em;
	font-weight: 400;
	margin: 0;
	margin: 1em 0 0.5em;
}

/* This is a modifier class used when the content-head is inside a ribbon */

.content-head-ribbon, .content-subhead-ribbon {
	color: white;
	margin: 0.5em 0 0.5em;
}
/* This is the class used for the content sub-headers (<h3>) */

.content-subhead {
	color: rgb(45,62,80);
	margin: 0.5em 0 0.5em;
}

.content-subhead-green{
	color: rgb(0,150,57);
	margin: 0.5em 0 0.5em;
}

.content-subhead i {
	margin-right: 0.6em;
}
/* This is the class used for the dark-background areas. */

.ribbon {
	background: rgb(45,62,80);
	color: rgb(238,238,238);
	padding: 3em;
}

/*changes the background to the grey*/
.ribbon-bkgrnd{
	padding: 3em;
	background-color: #efefef;
}

.ribbon-white{
	padding: 3em;
	background-color: white;
}

.ribbon-bkgrnd a {
	text-decoration: none;
	color: rgb(0,150,57);
}

.ribbon-bkgrnd a:hover,
.ribbon-bkgrnd a:focus {
	text-decoration: none;
}

canvas{
	position: relative;
	right: 0;
}

.score-label {
    font-size: 9px;
    text-transform: uppercase;
    display: block;
    margin-top: 8px;
    margin-bottom: -3px;
}

/* This is the class used for the footer */

.footer {
	background-color: #111;
	color: white;
	font-size: small;
}

.footer p {
	color: #fff;
	font-size: small;
}

/*----Judges Bios----*/

.judge-head {
	text-align: center;
	margin: 0;
}

.judge-img {
	width: 150px;
	height: 150px;
	/*float: left;*/
	margin: 1em auto;
	border-radius: 75px;
	display: block;
}

.judge-bio {
	margin: 0;
	padding: 0;
	line-height: 1.45;
	position: relative;
	color: #383838;
}

/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
@media (max-width: 48em) {

	/* We increase the body font size */
	body {
	    font-size: 1em;
	}

	.pure-button-success {
		background-color: #009639;
		color: white;
		border-radius: 5px;
		font-size: 1em;
		margin-top: 0.5em;
		padding: 3px 7px;
		line-height: 1.5em;
	}

	.cta-button{
		font-size: 1em;
		font-weight: bold;
		margin-top: 0.5em;
		padding: 3px 7px;
		line-height: 1.5em;
	}

	/* We increase the height of the splash-container */
	.splash-container {
		height: 60vh;
	}

	/* We decrease the width of the .splash, since we have more width
	to work with */
	.splash {
	    width: 80%;
	    height: 60vh;
	}

	.splash-head {
	    font-size: 1.2em;
	}

	.splash-introduction {
		line-height: 1.2em;
	}

	/* We remove the border-separator assigned to .l-box-lrg */
	.content {
	    padding: 0 1em;
	}

	.l-box-lrg {
	    border: none;
	}

}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
@media (min-width: 49em) {
/* We increase the header font size even more */

	.splash-head {
		font-size: 3em;
		margin-bottom: 0em;
		padding-bottom: 0;
	}

	.splash-introduction {
		font-size: 1.5em;
		margin-top: 0.5em;
	}

}

@media (min-width: 768px) {

    .ribbon-bkgrnd .pure-form fieldset {
        width: 46%;
    }

    .ribbon-bkgrnd .pure-form fieldset:first-child {
        margin-right: 4%;
    }

}