@charset "UTF-8";



/*****************************************************
*****   Formatting   *********************************
*****************************************************/
/* Reset HTML */
a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, summary, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr {border:0; box-sizing:border-box; font-size:1em; margin:0; padding:0; vertical-align:top;}

/* Default HTML */
html {font-size:0.625em;}
body {color:#5a5a5a; font-family:"Roboto",sans-serif; font-size:1.6rem; line-height:1.25; min-width:360px;}
h1, h2, h3, h4, h5, h6 {font-weight:400;}
h1 {font-size:5rem;}
h2 {font-size:2.75rem;}
h3 {font-size:4rem;}
h4 {font-size:2rem;}
h5 {font-size:1.8rem;}
ul, ol {list-style:none;}
p {margin:25px 0 0;}
a, a:visited {color:#9e0b0f; text-decoration:none;}
a:hover {color:#9e0b0f; text-decoration:underline;}
:focus {border:0; outline:0;}
img {display:block; width:100%;}

/* Form Elements */
button, a.button {background:#9e0b0f; border-radius:3px; color:#fff; display:inline-flex; height:40px; line-height:40px; margin:0 auto; padding:0 25px;}
button:hover, a.button:hover {opacity:0.5; text-decoration:none;}

/* Pic */
.pic {border:1px solid #ddd; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); overflow:hidden;}



/*****************************************************
*****   Header   *************************************
*****************************************************/
/* Containers */
#header.scroll {background:rgba(0,0,0,0.8);}
#header {background:rgba(0,0,0,0.4); height:65px; left:0; position:fixed; top:0; width:100%; z-index:3;}
#header .wrapper {padding:0;}
#header .logo {background:url("../images/design/tei-logo.svg") 0 0 no-repeat; float:left; height:36px; margin:15px 0 0 25px; width:114px;}
#header .logo:hover {opacity:0.5;}

/* Menu Icon */
#header menu {border-left:1px solid rgba(255,255,255,0.5); cursor:pointer; display:none; float:right; height:65px; position:relative; width:70px;}
#header menu:hover {background:#9e0b0f;}
#header menu li {background:#fff; border-radius:3px; height:4px; left:16px; position:absolute; transition:all 250ms ease; width:40px;}
#header menu li:nth-of-type(1) {top:18px;}
#header menu li:nth-of-type(2) {top:30px;}
#header menu li:nth-of-type(3) {top:42px;}
#header.menu-open menu li:nth-of-type(1) {top:30px; transform:rotate(-135deg);}
#header.menu-open menu li:nth-of-type(2) {opacity:0;}
#header.menu-open menu li:nth-of-type(3) {top:30px; transform:rotate(135deg);}

/* Nav Links (Horizontal) */
#header nav {float:right;}
#header nav li {box-sizing:content-box; display:inline-block; height:65px; line-height:6.5rem; margin-left:-4px; position:relative; transition:all 250ms ease;}
#header nav li:hover {background:#9e0b0f; cursor:pointer;}
#header nav .active:after {background:#9e0b0f; bottom:0; content:""; height:5px; left:0; position:absolute; width:100%;}
#header nav a {color:#fff; display:inline-flex; height:100%; padding:0 25px;}
#header nav a:hover {text-decoration:none;}

/* Media Queries */
@media screen and (max-width:1024px) {
    #header > a {margin-left:12px;}
    #header menu {display:block;}
    #header nav {height:0; opacity:0; top:65px;}
    #header nav .active:after {bottom:inherit; height:100%; top:0; width:5px;}
    #header.menu-open nav {float:none; height:255px; opacity:1; overflow:hidden; position:absolute; right:0; top:65px;}
    #header.menu-open nav li {background:rgba(0,0,0,0.4); border-left:1px solid rgba(255,255,255,0.5); border-top:1px solid rgba(255,255,255,0.5); display:block; height:50px; line-height:5rem; margin:0;}
    #header.menu-open nav li:hover {background:#9e0b0f!important;}
    #header.menu-open nav li:last-child {border-bottom:1px solid rgba(255,255,255,0.5);}
    #header.menu-open.scroll nav li {background:rgba(0,0,0,0.8);}
}



/*****************************************************
*****   Hero Banner   ********************************
*****************************************************/
.hero {background:url("../images/design/hero.jpg") no-repeat #252224; background-size:cover; border-bottom:1px solid #ddd; color:#fff; display:flex; height:350px; position:relative; text-align:center; text-shadow:0 3px 5px rgba(0,0,0,0.75);}
.hero hgroup {align-self:center; justify-content:center;}
.hero h2 {margin:25px 0 0;}
@media screen and (max-width:480px) {
    .hero h1 {font-size:4.25rem;}
}



/*****************************************************
*****   Containers   *********************************
*****************************************************/
.wrapper {margin:0 auto; padding:0 25px; max-width:1440px;}

/* Info */
.info {display:flex; justify-content:space-between; margin-top:50px;}
@media screen and (max-width:1023px) {
    .info {flex-direction:column-reverse;}
}

/* SubNav */
.subnav {width:calc(25% - 25px);}
.subnav ul {border:1px solid #ddd; border-radius:3px;}
.subnav li {border-top:1px solid #ddd;}
.subnav li:first-child {border:0;}
.subnav li.active a {color:#9e0b0f; cursor:default;}
.subnav li.active a:after,
.subnav li a:hover:after {background-image:url("../images/design/icon-chevron-active.jpg");}
.subnav li a:after {background:url("../images/design/icon-chevron.jpg") no-repeat; content:""; height:18px; width:12px;}
.subnav a {color:#999; display:flex; height:100%; justify-content:space-between; padding:10px; width:100%;}
.subnav a:hover {color:#9e0b0f; text-decoration:none;}
@media screen and (max-width:1023px) {
    .subnav {margin:25px 0 0; width:100%;}
}

/* Content */
.content {margin:10px 0 0; min-height:425px; width:calc(75% - 25px);}
.content h3 {border-bottom:1px solid #ddd; padding:0 0 25px;}
@media screen and (max-width:1023px) {
    .content {width:100%;}
}



/*****************************************************
*****   Footer   *************************************
*****************************************************/
#footer {background:#f5f5f5; border-top:1px solid #ddd; margin:50px 0 0; text-align:center;}
#footer .wrapper {display:flex; flex-wrap:wrap; justify-content:center; padding:0;}

/* Text Links */
#footer ul {margin:50px 25px 0; min-width:150px;}
#footer ul:first-child {margin-left:0;}
#footer li {line-height:2.4rem; margin:6px 0 0; word-wrap:break-word;}
#footer h3 {border:none!important; font-size:1.6rem; margin:0 0 6px!important; padding:0!important;}
#footer a {color:#5a5a5a;}

/* Branding */
#footer .branding {margin:50px 0 0 25px; max-width:250px;}
#footer .branding figure {align-items:center; display:flex;}
#footer .branding .logo {margin:0 12px 0 0; max-height:50px; width:auto;}
#footer .branding .watermark {max-height:90px; width:auto;}
#footer .branding p {margin-top:3px;}

/* Legal */
#footer .legal {border-top:1px solid #ddd; margin:50px 0 0;}
#footer .legal .wrapper {justify-content:space-between;}
#footer .legal a {margin:0 6px;}
#footer .legal menu,
#footer .legal p {margin:12px;}
@media screen and (max-width:480px) {
    #footer .legal {padding:12px 0;}
    #footer .legal menu {margin-bottom:0;}
    #footer .legal .wrapper {justify-content:center;}
}