/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
	padding-top:35px;
    font-size: 1em;
	background: #282D32;
	text-align:center;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
  font-family: "RockwellN";
  src: url("http://typefront.com/fonts/825591473.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591473.woff") format("woff"),
       url("http://typefront.com/fonts/825591473.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591473.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Rockwell Light";
  src: url("http://typefront.com/fonts/825591479.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591479.woff") format("woff"),
       url("http://typefront.com/fonts/825591479.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591479.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gotham HTF Medium Condensed asdf";
  src: url("http://typefront.com/fonts/825591471.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591471.woff") format("woff"),
       url("http://typefront.com/fonts/825591471.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591471.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gotham HTF Medium";
  src: url("http://typefront.com/fonts/825591475.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591475.woff") format("woff"),
       url("http://typefront.com/fonts/825591475.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591475.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gotham HTF Book";
  src: url("http://typefront.com/fonts/825591476.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591476.woff") format("woff"),
       url("http://typefront.com/fonts/825591476.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591476.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Knockout Full Cruiser Weight";
  src: url("http://typefront.com/fonts/825591478.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591478.woff") format("woff"),
       url("http://typefront.com/fonts/825591478.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591478.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Knockout Ultimate Cruiser Weight";
  src: url("http://typefront.com/fonts/825591477.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591477.woff") format("woff"),
       url("http://typefront.com/fonts/825591477.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591477.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Knockout Cruiser Weight";
  src: url("http://typefront.com/fonts/825591474.eot");
  src: local("?"),
       url("http://typefront.com/fonts/825591474.woff") format("woff"),
       url("http://typefront.com/fonts/825591474.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591474.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}


/*
  Actual stuff =========================================================== 
*/ 
a {
	text-decoration:none;
	color:#fff;
}
   
.mainwrapper {
	margin-left:auto;
	margin-right:auto;
	width:80%;
	max-width:900px;
	background: #282D32;
}

.header {
}

.logo {
	margin-left:10px;
	float:left;
	width:20%;
}

.contactinfo {
	float:right;
	margin-top:5%;
	font-family: "RockwellN", sans-serif; 
	font-size:14pt;
	font-weight:normal;
	font-style:normal;
}

.contactinfoimg {
	width:30px;
}

.menu {
	width:100%;
	text-align:center;
	height:45px;
	float:left;
	margin-bottom:5px;
	font-family: sans-serif;
}

.menuitem {
	text-align:center;
	float:left;
	width:13.7%;
	height:100%;
	margin-right:0.2%;
}

.menuitemcontent {
	padding-top:20px;
	padding-bottom:20px;
	height:100%;
}

.donate {
	color:#5000af;
	text-align:center;
	float:left;
	width:16.6%;
}

.footer {
	color:#fff;
	background:#1a1a1a;
	width:100%;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding-top:50px;
	padding-bottom:100px;
}

.footercontent {
	text-align:left;
	width:80%;
	max-width: 900px;
	display:inline-block;
}

.slide {
	position:relative;
	width:20%;
	padding-bottom:7.782%;
	overflow:hidden;
	text-align:left;
	float:left;
	height:100%;
}

#slideshow {
	width:100%;
	overflow:hidden;
	font-family: sans-serif;
}

#slides {
	width:500%;
	height:100%;
    position:relative;
    left:0px;
    transition: left 1s ease-in-out;
    display:inline-block;
}

#triangle-topright-orange {
	width: 0;
	height: 0;
	border-top: 70px solid #ff6a09;
	border-left: 110px solid transparent;
	float:right;
	margin-right:8px;

}

#triangle-topright-purple {
	width: 0;
	height: 0;
	border-top: 110px solid #5000af;
	border-left: 65px solid transparent;
	float:right;
	margin-right:8px;
	position:absolute;
	bottom:0;
	right:35.55%

}

#triangle-topright-green {
	width: 0;
	height: 0;
	border-top: 110px solid #66cc00;
	border-left: 65px solid transparent;
	float:right;
	margin-right:8px;
	position:absolute;
	bottom:0;
	right:35.55%

}

#triangle-topright-pink{
	width: 0;
	height: 0;
	border-top: 110px solid #ed008c;
	border-left: 65px solid transparent;
	float:right;
	margin-right:8px;
	position:absolute;
	bottom:0;
	right:35.55%

}


.mainnavigation {
	font-family: "Gotham HTF Medium Condensed asdf", sans-serif; 
	font-size: 200%;
	letter-spacing:40;
}
.horizbar{
	font-family: "Knockout Cruiser Weight", sans-serif;
	font-size:14pt;
	letter-spacing:1px;
}
.horizpadding{
	padding:10px;
}
.footerbook{
	font-family: "Gotham HTF Book", sans-serif;
	font-size:12pt;
	letter-spacing:14;
}
.footermedium{
	font-family: "Gotham HTF Book", sans-serif;
	font-size:10pt;
	letter-spacing:14;
}
.heading1 {
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:32pt;
	letter-spacing:20;
}
.heading2 {
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:48pt;
	letter-spacing:20;
}
.heading3 {
	font-family: "Knockout Full Cruiser Weight", sans-serif; 
	font-size:22pt;
	letter-spacing:20;
}
.indexheader {
	font-family: "Knockout Cruiser Weight", sans-serif; 
	font-size:16pt;
	text-transform: uppercase;
	letter-spacing:20;
	color:#333;
}
.rockwellbody {
	font-family: "Rockwell Light", sans-serif;
	font-size:14.5pt;
	line-height:17.5pt;
	color:#5000af;
}
.gothambody {
	font-family: "Gotham HTF Book", sans-serif;
	font-size:11.5pt;
	letter-spacing:19;
}
.bodycopy{
	font-family: "Rockwell Light", sans-serif;
	font-size:11.5pt;
	letter-spacing:25;
	color:#000;
}
.mainbodycopy{
	font-family: "Rockwell Light", sans-serif;
	font-size:16.5pt;
	letter-spacing:25;
	color:#000;
}
.maincaption {
	font-family:"Gotham HTF Book", sans-serif;
	font-size:10pt;
	color:#004FAD;
}
.bodylink{
	font-family: "Gotham HTF Medium", sans-serif;
	font-size:11.5pt;
	color:#000;
}
.mainbodylink{
	font-family: "Gotham HTF Medium", sans-serif;
	font-size:11.5pt;
	color:#000;
}

.hspacer{
	height:5px;
	width:100%;
}

.boardname {
	font-family: "Knockout Cruiser Weight", sans-serif; 
	font-size:15pt;
	color:#444;
}

.boardrole {
	font-family:"Gotham HTF Book", sans-serif;
	font-size:11pt;
	color:#333;
}







.person {
	position:relative;
	float:left;
	width:24.4%;
	padding-bottom:27.5%;
	margin-bottom:7px;	
	hyphens: auto;
}
.person:hover {
	z-index:100;
}
.personinner {
	height:100%;
	background-size:100%;
	width:100%;
	position:absolute;	
	hyphens: auto;
}
.personinfowrapper{
	height:100%;
	width:100%;
	position:absolute;	
	hyphens: auto;
}
.personinfo {
	font-family: "Gotham HTF Book";
	font-size:9.5pt;
	text-align:left;
	float:left;
	background-image:url('../img/transparentwhite.png');
	width:100%;
	max-height:17%;
	min-height:17%;
	margin-top:93.5%;
	overflow:hidden;	
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
}
.personinfo:hover{
	transition: max-height 0.5s;
	max-height:1000px;
	background:#fff;	
	hyphens: auto;
}
.sponsorimg{
	display:inline-block;
	width:15%;
	margin:5px;
}





.greenheader{
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:25pt;
	color:#66cc00;
	letter-spacing:1pt;
	line-height: 26pt;
}

.purpleheader{
	color:#5000AF;
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:24pt;
	letter-spacing:1pt;
	line-height: 26pt;
}

.violetheader{
	color:#b243a5;
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:25pt;
	letter-spacing:1pt;
	line-height: 26pt;
}

.greenbody{
	font-family: "Rockwell Light", sans-serif;
	font-size:16pt;
	color:#66cc00;
	line-height: 18pt;
}

.getinvolvedbody{
	font-family: "Gotham HTF Book", sans-serif;
	font-size:11.5pt;
}

.getinvolvedcontact{
	font-family: "Gotham HTF Medium", sans-serif;
	font-size:11.5pt;
}

.whatbody{
	font-family: "Gotham HTF Book", sans-serif;
	font-size:12pt;
	line-height:15pt;
}

.homebody{
	font-family: "Gotham HTF Book", sans-serif;
	font-size:12pt;
	line-height:15pt;
}
.getinvolvedblue{
	color:#2896ff;
	font-size:10pt;
}




.orangeheader{
	font-family: "Knockout Ultimate Cruiser Weight", sans-serif; 
	font-size:25pt;
	line-height:26pt;
	color:#ff6a09;
	letter-spacing:1pt;
}

.orangebody{
	font-family: "Rockwell Light", sans-serif;
	font-size:15pt;
	color:#ff6a09;
	line-height:18pt;
}

.whyhspace{
	height:5px;
}

.whopinkbody{
	font-family:'Rockwell Light', sans-serif;
	font-size:12pt;
	color:#ed008c;
}



.vidmenu{
	width:100%;
}
.vidmenuitem{
	float:right;
	width:16.6%;
}
.videos{
	width:100%;
}
.vid{
	float:left;
	width:33.33%;
}

#art{
	background-image:url('../img/vidfilters/art.png');
	background-size:cover;
}
#healthcare{
	background-image:url('../img/vidfilters/healthcare.png');
	background-size:cover;
}
#entertainment{
	background-image:url('../img/vidfilters/entertainment.png');
	background-size:cover;
}
#entrepreneurial{
	background-image:url('../img/vidfilters/entrepreneurial.png');
	background-size:cover;
}
#stem{
	background-image:url('../img/vidfilters/stem.png');
	background-size:cover;
}
#art:hover{
	background-image:url('../img/vidfilters/art-hover.png');
	background-size:cover;
}
#healthcare:hover{
	background-image:url('../img/vidfilters/healthcare-hover.png');
	background-size:cover;
}
#entertainment:hover{
	background-image:url('../img/vidfilters/entertainment-hover.png');
	background-size:cover;
}
#entrepreneurial:hover{
	background-image:url('../img/vidfilters/entrepreneurial-hover.png');
	background-size:cover;
}
#stem:hover{
	background-image:url('../img/vidfilters/stem-hover.png');
	background-size:cover;
}


#security{
	background-image:url('../img/vidfilters/security.png');
	background-size:cover;
}
#business{
	background-image:url('../img/vidfilters/business.png');
	background-size:cover;
}
#hospitality{
	background-image:url('../img/vidfilters/hospitality.png');
	background-size:cover;
}
#sports{
	background-image:url('../img/vidfilters/sports.png');
	background-size:cover;
}
#politics{
	background-image:url('../img/vidfilters/politics.png');
	background-size:cover;
}
#security:hover{
	background-image:url('../img/vidfilters/security-hover.png');
	background-size:cover;
}
#business:hover{
	background-image:url('../img/vidfilters/business-hover.png');
	background-size:cover;
}
#hospitality:hover{
	background-image:url('../img/vidfilters/hospitality-hover.png');
	background-size:cover;
}
#sports:hover{
	background-image:url('../img/vidfilters/sports-hover.png');
	background-size:cover;
}
#politics:hover{
	background-image:url('../img/vidfilters/politics-hover.png');
	background-size:cover;
}


.homebutton{
	background-image:url('../img/menubuttons/home.png');
	background-size:cover;
}
.whatbutton{
	background-image:url('../img/menubuttons/what.png');
	background-size:cover;
}
.whybutton{
	background-image:url('../img/menubuttons/why.png');
	background-size:cover;
}
.whobutton{
	background-image:url('../img/menubuttons/who.png');
	background-size:cover;
}
.videosbutton{
	background-image:url('../img/menubuttons/videos.png');
	background-size:cover;
}
.getinvolvedbutton{
	background-image:url('../img/menubuttons/getinvolved.png');
	background-size:cover;
}
.donatebutton{
	background-image:url('../img/menubuttons/donate.png');
	background-size:cover;
}
.homebutton:hover{
	background-image:url('../img/menubuttons/homeh.png');
}
.whatbutton:hover{
	background-image:url('../img/menubuttons/whath.png');
}
.whybutton:hover{
	background-image:url('../img/menubuttons/whyh.png');
}
.whobutton:hover{
	background-image:url('../img/menubuttons/whoh.png');
}
.videosbutton:hover{
	background-image:url('../img/menubuttons/videosh.png');
}
.getinvolvedbutton:hover{
	background-image:url('../img/menubuttons/getinvolvedh.png');
}
.donatebutton:hover{
	background-image:url('../img/menubuttons/donateh.png');
}

.captionbox {
opacity:0.6;
filter:alpha(opacity=60);
background-color: #ffffff;	
}

.captionbox2 {
background-color: #ffffff;	
opacity:0.8;
filter:alpha(opacity=80);
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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 for images, or javascript/internal links
     */

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

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

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

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

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

    @page {
        margin: 0.5cm;
    }

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

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