/* ==========================================================================
   Layout Styles - Mobile First
   ========================================================================== */

	* {
		box-sizing: border-box;
	}
	
	html {
		height: 100%;
	}
	
	body {
		font-size: 1em;
		line-height: 1.25;
		height:100%;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	.section {
		margin: 0 auto;
		max-width: 960px;
		padding: 2rem;
		transition: .6s;
	}	
	
	.col {
		display: block;
		float: left;
		width: 100%;
		padding: 1rem 0;
		overflow: hidden;
		transition: .6s;
	}	
	
	.video-wrapper {
	    position: relative;
	    padding-bottom: 43%; /* 16:9 */
	    padding-top: 25px;
	    height: 0;
	    max-width: 740px;
	    margin: 0 auto;
	    margin-bottom: 1rem;
    }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }	
	
	.clearfix:before,
	.clearfix:after {
	    content: " ";
	    display: block;
	}
	
	.clearfix:after {
	    clear: both;
	}
	


/* ==========================================================================
   Element Styles
   ========================================================================== */
   
   h1 {
   	font-size: 2rem;
   	line-height: 1.25;
	font-family: 'Playball', hevletica, arial, sans-serif;
	font-weight: 800;
   }
   
   h2 {
   	font-size: 1.625rem;
   	line-height: 1.16;
   	font-weight: bold;
	font-family: 'Playball', hevletica, arial, sans-serif;
   }
   
   h3 {
   	font-size: 1.375rem;
   	line-height: 1.14;
   	font-weight: bold;
   }
   
   h4 {
   	font-size: 1.125rem;
   	line-height: 1.11;
   	font-weight: bold;
   }
   
   a,
   a:visited {
   	color: rgba(1, 74, 98, 1);
   	font-weight: bold;
   }
   
   .bg-alt-dark a {
   	color: #efe8e5;
   }
   
   hr {
   	border-width: 0;
   	height: 1px;
   	background-color: rgba(255,255,255,.3);
   	margin: 2rem 0;
   }
   
   table {
   	width: 100%;
   	overflow-x:auto;
   }
   
   td {
   	padding: .5rem;
   }
   
	@media screen and (min-width: 481px) {
	
	   td {
   		padding: 2rem 1.5rem;
   		}
	
	}
   
   
   blockquote {
   	font-style: italic;
   	background: #f1f1f1;
   	padding: 1em;
   	border-left: 5px solid #000000;
   }
   
   blockquote .author {
   	text-align: right;
   	font-style: normal;
   	font-weight: bold;
   }
   
   label {
   	text-transform: uppercase;
   	font-weight: bold;
   }
   
   input {
   	width: 100%;
   	padding: .6rem 1rem;
   	border: 1px solid #dedede;
   	margin-bottom: .8rem;
   }
   
   input[type=submit] {
   	border: 0;
   }
   
   input:focus {
   	outline: none;
   	background: #f1f1f1;
   }
   

/* ==========================================================================
   General Class Styles
   ========================================================================== */

	.bg-alt-dark {
		background: rgba(1, 74, 98, 1);
		color: #efe8e5;
		box-shadow: inset 0px 0px 40px rgba(0,0,0,.3);		
	}
	
	.bg-alt-light {
		background: #f1f1f1;
		color: #333333;
		box-shadow: inset 0px 0px 40px rgba(0,0,0,.3);		
	}
	
	.bg-alt-light hr {
	   	background-color: rgba(2,74,97,.2);	
	}
	
	.bg-white {
		background-color: white;
	}
	
	.btn {
		line-height: 3.4;
	}
	
	.btn,
	.btn:visited,
	input[type="submit"] {
		padding: 1rem 2rem;
		color: #ffffff;
		background: rgba(1, 74, 98, 0.75);
		white-space: nowrap;
		overflow: hidden;
		text-transform: uppercase;
		font-weight: bold;
		text-decoration: none;
		transition: .5s;
		border-radius: 2rem;
	}
	
	.btn:hover,
	.btn:active,
	.btn:focus,
	input[type="submit"]:hover,
	input[type="submit"]:focus {
		background: #f1f1f1;
		color: rgba(1, 74, 98, 1);
	}
	
	.bg-alt-dark .btn {
		color: #ffffff;
		background: #c31b2a;
	}
	
	.bg-alt-dark .btn:hover,
	.bg-alt-dark .btn:active,
	.bg-alt-dark .btn:focus {
		color: #024a61;
		background: #ffffff;
	}
	
	.bg-alt-light .btn:hover,
	.bg-alt-light .btn:active,
	.bg-alt-light .btn:focus {
		color: #ffffff;
		background: rgba(1, 74, 98, 0.9);
	}		
	
	/* === Animation Styling === */

	@-webkit-keyframes fade {
		from {opacity: 0;}
		to   {opacity: 100%;}
	}
	
	@keyframes fade {
		from {opacity: 0;}
		to   {opacity: 100%;}
	}
	
	@-webkit-keyframes move {
		from {top: -100px;}
		to   {top: 0;}
	}
	
	@keyframes move {
		from {top: -100px;}
		to   {top: 0;}
	}	
	

/* ==========================================================================
   Section Styles
   ========================================================================== */

	/* === Header Styles === */

	header {
		background: #f1f1f1;
		color: #024a61;
		box-shadow: inset 0px 0px 40px rgba(0,0,0,.1);
	}
	
	header img {
		float: left;
		margin: 0;
		padding-top: .5rem;
	}
	
	header div.section {
		padding: 0 1rem;
	}
	
	/* === Navigation Styles === */

	a.menu-link {
	    float: right;
	    display: block;
	    padding: 2rem 1.4rem;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		color: #014a62;	
	}
	
	nav[role=navigation] {
		clear: both;
		-webkit-transition: all 0.3s ease-out;  
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		padding: 0;
	}
	
	.js nav[role=navigation] {
		overflow: hidden;
		max-height: 0;
	}
	
	nav[role=navigation].active {
		max-height: 20rem;
	}
	
	nav[role=navigation] ul {
		margin: 0;
		padding: 0;
	}
	
	nav[role=navigation] li {
		list-style-type: none;
	}	
	
	nav[role=navigation] li a {
		display: block;
		border-bottom: 1px solid #666666;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		color: rgba(1, 74, 98, 1);
		padding: 1rem;
	}
	
	nav[role=navigation] li:last-child a {
		border: none;
	}	
	
	nav[role=navigation] li a:hover,
	nav[role=navigation] li a:focus {
		background: rgba(1, 74, 98, 1);
		color: #ffffff;
	}	
	
	nav[role=navigation] li:last-child a:hover {
		background-color: rgba(255, 0, 0, 0.6);
	}
		
	
	/* === Content Section Styles === */
	
	#callout {
		background-color: #c31b2a;
	}
	
	#callout .section {
		padding: .4em 1em;
		color: #ffffff;
		text-align: center; 
		font-weight: bold;
	}
	
	#callout a {
		color: #efe8e5;
	}
	
	#splash {
		background: url('../img/andrew-orzo.jpg') no-repeat center center;
		background-size: cover;
		background-position: top;
		color: #ffffff;
		text-align: center;
		min-height: 86%;
	}
	
	#splash h1 {
		font-size: 1.8rem;
		text-shadow: 2px 2px rgba(0,0,0,.5);
		animation: fade 2s;	
		-webkit-animation: fade 2s;	
	}
	
	#splash h3 {
		font-size: 1.2rem;
	}
	
	#splash h3,
	#splash p {
		animation: fade 4s;	
		-webkit-animation: fade 4s;			
	}
	
	#about {
		position: relative;
		/*-webkit-animation: move 4s;
		animation: move 4s;*/
	}
	
	#about h2 {
		text-align: center;
	}
	
	#intro {
		background-color: rgba(0,0,0,.3);
		margin-top: .5rem;
		padding: 1.5rem;
		border-radius: .2rem;
	}	
	
	#intro h2 {
		font-family: Hevletica, arial, sans-serif;
	}
	
	#events {
		text-align: center;
	}
	
	#events ul {
		padding: 0;
		margin: 0 0 2em 0;
	}
	
	#events li {
		list-style-type: none;
		display: block;
		float: left;
		padding: .4em;
	}
	
	#events img {
		opacity: .8;
		transition: .3s ease-in-out;
	}
	
	#events img:hover {
		opacity: 1;
	}
	
	#event-details {
		background-color: rgba(255,255,255,.1);
		border-radius: .4em;
	}
	
	#events table {
		border-collapse: collapse;
		border: 0;
	}
	
	#events table thead {
		font-size: 1.2rem;
		font-weight: bold;
		border-bottom: 3px solid rgba(255,255,255,.3);
	}
	
	#events table th {
		padding: 1rem;
	}
	
	#events table tr {
		margin: .4rem;
		border-bottom: 1px solid rgba(255,255,255,.3);
	}
	
	#events table td {
		border: 0;
	}
	
	#sponsors {
		text-align: center;
	}
	
	#sponsors img {
		padding: 1.2rem;
	}
	
	#contact {
		text-align: center;
	}
	
	#contact img {
		max-width: 70%;
	    border: 6px solid rgba(1, 74, 98, 1);
	}
	
	#contact h2 {
		margin-bottom: 0;
	}
	
	footer {
		text-align: center;
	}
		
	
	/* === Back to Top Styles === */
	
	.cd-top {
	  display: inline-block;
	  height: 40px;
	  width: 40px;
	  position: fixed;
	  bottom: 40px;
	  right: 10px;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	  /* image replacement properties */
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;
	  background: #666666 url(../img/cd-top-arrow.svg) no-repeat center 50%;
	  visibility: hidden;
	  opacity: 0;
	  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  -moz-transition: opacity .3s 0s, visibility 0s .3s;
	  transition: opacity .3s 0s, visibility 0s .3s;
	}
	
	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	  -moz-transition: opacity .3s 0s, visibility 0s 0s;
	  transition: opacity .3s 0s, visibility 0s 0s;
	}
	
	.cd-top.cd-is-visible {
	  /* the button becomes visible */
	  visibility: visible;
	  opacity: 1;
	}
	
	.cd-top.cd-fade-out {
	  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	  opacity: .5;
	}
	
	.no-touch .cd-top:hover {
	  background-color: #c31b2a;
	  opacity: 1;
	}	
	


/* ==========================================================================
   Larger Width Styles
   ========================================================================== */


@media screen and (min-width: 481px) {
	
	body {
		line-height: 1.375;
	}
	
	h1,
	#splash h1 {
		font-size: 2.5rem;
		line-height: 1.125;
	}
	
	h2 {
		font-size: 2rem;
		line-height: 1.25;
	}
	
	h3,
	#splash h3 {
		font-size: 1.5rem;
		line-height: 1.25;
	}
	
	h4 {
		font-size: 1.125rem;
		line-height: 1.222;
	}	
	
	.col-to-two > .col,
	.col-to-four > .col {
		width: 50%;
	}
	
	.col-to-three > .col {
		width: 33.333333%;
	}
	
	.col {
		padding-right: 1rem;
		padding-left: 1rem;
	}
	
	.col-to-two .col:nth-child(odd), 
	.col-to-four .col:nth-child(odd), 
	.col-to-three .col:nth-child(3n+1) {
		padding-left: 0;
	}	
	
	.col-to-two .col:nth-child(even), 
	.col-to-four .col:nth-child(even), 
	.col-to-three .col:nth-child(3n+3) {
		padding-right: 0;
	}
	
	.col-to-two .col:nth-child(2n+3), 
	.col-to-four .col:nth-child(2n+3),
	.col-to-three .col:nth-child(3n+4) {
		clear: left;
	}
	
	.col-to-four .col:nth-child(4n+1):last-child,
	.col-to-three .col:nth-child(3n+1):last-child,
	.col-to-two .col:nth-child(2n+1):last-child {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}	
	
	.col-to-four .col:nth-child(4n+3):last-child,	
	.col-to-four .col:nth-child(4n+1):nth-last-child(2),
	.col-to-four .col:nth-child(4n+1):nth-last-child(2) + .col,	
	.col-to-three .col:nth-child(3n+1):nth-last-child(2),
	.col-to-three .col:nth-child(3n+1):nth-last-child(2) + .col {	
		width: 50%;		
	}
	
   input[type=submit] {
   	width: auto;
   }
   
   	#intro {
		background-color: rgba(0,0,0,.3);
		margin-top: 1rem;
		padding: 2rem;
	}		
    
	#about h1 {
		margin-top: 0;
	}
	
	#fundraising p,
	#contact p {
		font-size: 1.4rem;
	}	
	
	#fundraising li {
		max-width: 50%;
	}		
	
	/* === Navigation Styles === */
				
	a.menu-link {
	   display: none;
	}
	
	.js nav[role=navigation] {
		max-height: none;
	}
	
	nav[role=navigation] {
		clear: none;
	}
	
	nav[role=navigation] ul {
		margin: 0 0 0 -0.25rem;
		border: 0;
		text-align: right;
	}
	
	nav[role=navigation]  li {
		display: inline-block;
	}
	
	nav[role=navigation] li a {
		padding: 2rem 1.4rem;	
		border: 0;
	}		

}


@media screen and (min-width: 769px) {	

	h1,
	#splash h1 {
		font-size: 3rem;
		line-height: 1.05;
	}
	
	h2 {
		font-size: 2.25rem;
		line-height: 1.25;
	}
	
	h3,
	#splash h3 {
		font-size: 1.75rem;
		line-height: 1.25;
	}
	
	h4 {
		font-size: 1.125rem;
		line-height: 1.222;
	}	

	.col-to-four > .col {
		width: 25%;
	}
	
	.col-to-four .col:nth-child(odd) {
		padding-left: 1rem;
	}		

	.col-to-four .col:nth-child(even) {
		padding-right: 1rem;
	}
	
	.col-to-four .col:nth-child(4n+1) {
		padding-left: 0;
	}		

	.col-to-four .col:nth-child(4n+4) {
		padding-right: 0;
	}		
	
	.col-to-four .col:nth-child(2n+3) {
		clear: none;
	}
	
	.col-to-four .col:nth-child(4n+5) {
		clear: none;
	}	
	
	#fundraising li {
		max-width: 33.333%;
	}	
	
	
	/* === Back to Top Styles === */	
	
	.cd-top {
	    right: 20px;
	    bottom: 20px;
	  }	
	
}


/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* Test */