/* ************************************************************************** *\
|* ****************************** GENERAL *********************************** *|
\* ************************************************************************** */






/* ************************************************************************** *\
|* ******************************** #hero *********************************** *|
\* ************************************************************************** */

#hero {
    height: -webkit-calc(55vh - 80px);
    height: calc(55vh - 80px);
	background-position-y: -400px;
    background-color: #325182;
}

#hero .container {
	height: 100%;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#hero .container #page-title {}

#hero .container #page-title:after{
	position: initial;
    display: block;
    content: '';
    height: 3px;
    width: 100%;
    margin: 5px 0 0;
    background-color: #4068a7;
}









/* ************************************************************************** *\
|* ****************************** PRE-TEXT ********************************** *|
\* ************************************************************************** */

#pretext {
	width: 100%;
	height: auto;
	display: block;
	padding: 75px 0;

	background-color: #EEE;
}

#pretext .inner {
	height: auto;
	width: 90%;
	max-width: 1100px;

	display: block;
	margin: 0 auto;
}

#pretext .inner p {
	display: block;
    margin: 0 auto;
    
    height: 100%;
  	width: 100%;
    
    font: 400 13px 'Open Sans', 'Helvetica';
    letter-spacing: 0.04em;
    line-height: 25px;
}

#pretext .inner p:after{
	position: initial;
    display: block;
    content: '';
    height: 2px;
    width: 200px;
    margin: 35px 0 0;
    background-color: #4068a7;
}

@media only screen and (max-width: 1024px) {
    #pretext { padding: 50px 0; }

    #pretext .inner p { line-height: 23px; }

    #pretext .inner p:after { margin: 20px 0 0; }
}


@media only screen and (max-width: 500px){
    #pretext .inner { width: 90%; }
    #pretext .inner p { font-size: 13px; }
}







/* ************************************************************************** *\
|* ****************************** SPONSORS ********************************** *|
\* ************************************************************************** */

#sponsors {
	width: 100%;
	height: auto;
	display: block;
	padding: 25px 0 75px;
}

#sponsors .container {
	height: auto;
    width: 95%;
    max-width: 1100px;
    display: block;
    margin: 0 auto;

    /* Everything before this is just a fallback */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

#sponsors .img-container {
	display: inline-block;
    padding: 0;
    margin: 75px 0.75%;
    
    height: auto;
    width: 31%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    flex: 1 0 30%;
}

#sponsors .img-container img {
	/*height: 100%;*/
	max-height: 175px;
	width: auto;
    max-width: 290px;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 0 0;
	   object-position: 0 0;
    vertical-align: middle;

	display: block;
	margin: 0 auto;

	/* -webkit-filter: grayscale(100%); */ /* Safari 6.0 - 9.0 */
    /* filter: grayscale(100%); */

    -webkit-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

#sponsors .img-container:hover img {
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);

    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}


@media only screen and (max-width: 769px) {
    #sponsors { padding: 25px 0 !important }
    #sponsors .img-container { width: 46% !important; }
}

@media only screen and (max-width: 500px) {

    #sponsors .img-container img { max-height: 100px !important; }
}

@media only screen and (max-width: 400px) {
    #sponsors .img-container {
        width: 100% !important;
        margin: 40px 0.75%;
    }

    #sponsors .img-container img { max-height: 135px !important; }
}