*, *:before, *:after {
box-sizing:inherit
}
html {
scroll-behavior:smooth; /*for anchor links*/
box-sizing:border-box
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align:baseline
}
article, aside, details, figcaption, figure, footer, main, header, hgroup, menu, nav, section {
display:block
}
ol, ul {
list-style:none
}
table {
empty-cells:show;
border-collapse:collapse;
border-spacing:0
}

/*-------------
	General
-------------*/
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family:'Lato', sans-serif;
font-weight:400;
font-size:16px;
line-height:1.5;
color:#1b1b32;
min-height:100vh
}
p {
margin:1em 0
}
p:first-child {
margin-top:0
}
p:last-child {
margin-bottom:0
}
.first {
margin-top:0 !important
}
.last {
margin-bottom:0 !important
}
i {
font-style:italic
}
b {
font-weight:700
}
a {
color:#0000ee;
text-decoration:none;
cursor:pointer;
opacity:.9
}
a:hover{
text-decoration:underline;
color:#0000a2;
opacity:1
}
a.btn{
color:#fff;
border-radius:4px;
text-transform:uppercase;
background-color:#2196F3;
font-weight:800;
text-align:center;
padding:2em 4em
}
hr {
margin:2em 0;
width:10em;
height:.1em;
background:#2196f3;
border:0;
width:auto
}



/*-------------
	Header
-------------*/
/* --- Generic Styles --- */

header {
display: flex;
align-items:center;
position:relative;
z-index:1;
font-size:1.1em;
height:75px
}
@media (max-width:800px) {
    header {
    display:block;
    min-height:auto;
    position:fixed;
    background:#fff;
    width:100%
    }
}

header .logo {
display:flex;
align-items:center;
width:400px;
font-size:1.2em;
font-weight:700
}
header .logo img {
display:block;
margin:.5em
}
header .logo a {
text-decoration:none;
color:#000
}

@media (max-width:400px) {
    header .logo {
    width:auto;
    position:absolute;
    margin:0
    }
    header .logo span {
    display:none
    }
}


.red {
color:#d10000
}


/*
.container {
  margin: 10px auto;
  max-width: 1200px;
  padding: 10px;
}
*/

/* --- Hamburger Functionality --- */
div.hamburger {
color:#000
}

/* When screen is small, center content and animate transitions. */
nav[role=navigation] {
clear:both;
overflow:hidden;
max-height:0;
transition:all 0.3s ease-out;
width:100%;
/*  margin: 0px 0px 0px -50px; */
}

/* Positioning when nav does appear in small screen mode */
nav[role=navigation].open {
max-height:30em;
margin-bottom:1em;
background:#fff
}

/* When in small screen, center the list */
nav[role=navigation] ul {
margin-top:75px
}

nav[role=navigation] li {
    margin:1em
}

nav[role=navigation] li a {
  display:indline-flex;
  color: #000;
  text-decoration: none;
  text-align: left;
}
  nav[role=navigation] li i {
    display:none
  }


/* Style for larger screens. Hide the menu button, and show the normal navigation menu. */
/* Credit: https://codepen.io/bradfrost/pen/sHvaz */
@media screen and (min-width: 70em) {
  div.hamburger {
    display: none;
  }

  nav[role=navigation] {
    max-height: none;
    margin: 0px;
  }

  nav[role=navigation] ul {
    margin: 0 1.5em 0 -0.25em;
    border: 0;
    text-align: right;
  }

  nav[role=navigation] li {
    display:inline-flex;
    align-items:center;
    color:#999
  }

  nav[role=navigation] li i {
    display:block
  }
}

/* --- Hamburger Appearance & Animation --- */
/* Credit: https://codepen.io/mblode/pen/evjfn */
div.hamburger {
/*  width: 30px;    */
top:100px;
left:120px;
transition-duration:.5s
}
div.hamburger .icon {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 30px;
right:1em;
background-color:#000
}
div.hamburger .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #000;
content: "";
top:-10px
}
div.hamburger .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #000;
content: "";
top:10px
}
div.hamburger.open .icon {
transition-duration:.5s;
background:transparent
}
div.hamburger.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px)
}
div.hamburger.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px)
}
div.hamburger:hover {
cursor:pointer
}


nav ul li a {
font-weight:700
}
nav ul li a:hover {
text-decoration:underline
}


.radius {
border-radius:8px
}



/* -------------------------------- 
Hero
-------------------------------- */
.hero {
height:100vh;
width:100%;
position:relative;
background-size:cover;
background-position:50% 50%;
background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/hero.jpg")
}

.overlay {
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
color:#fff;
display:flex;
justify-content:center;
flex-direction:column;
padding:1em
}

.overlay h1 {
font-size:4em
}
.overlay p {
font-size:2.1em
}

@media (max-width:500px) {
    .overlay {
    padding-top:0
    }
    .overlay h1 {
    font-size:2em
    }
    .overlay p {
    font-size:1em
    }
}







.socials {
display:flex
}
.socials a {
display:block;
margin:1em;
color:#1b1b32;
background:#f2f2f2;
padding:.8em;
text-align: center;
cursor:pointer;
font-size:1.2em;
margin-top:1em;
border-radius:5px;
text-decoration:none
}
.socials a:hover {
background:#fff
}



.hero-note {
font-size:1.2em;
padding:.5em 0;
margin:0;
text-align:center;
border-bottom:3px #c00 solid
}








/* -------------------------------- 
Main
-------------------------------- */
section {
padding:3em
}
@media (max-width:800px) {
    section {
    padding:3em 1em
    }
}
.grey-bg {
background:#f2f2f2
}
.red-blue {
display:block;
border-top:5px #e2271c solid;
border-bottom:5px #13294b solid
}
h3 {
font-size:2em;
font-weight:700
}
h4 {
font-weight:700
}



.two-column {
margin-top:1em;
column-count:2
}
.two-column li {
break-inside:avoid
}
.two-column li:first-child {
margin-top:0
}
@media (max-width:960px) {
    .two-column {
    column-count:1
    }
}



.flex-offsite ul {
display:flex;
width:auto
}



.flex-offsite li {
display:inline-block;
width:500px;
text-align:center;
background:#f7f7f7;
border:1px #ccc solid;
padding:1em;
margin:.5em .5em 1em
}
.flex-offsite li:first-child {
margin-left:0
}




.flex-pics {
display:flex;
width:1050px
}
.flex-pics img {
display:block;
margin:.5em
}
.flex-pics img:first-child {
margin-left:0
}
@media (max-width:1020px) {
    .flex-pics {
    flex-wrap:wrap;
    width:100%
    }
    .responsive {
    width:100%;
    height:auto    
    }
}





/* anchor links */
.return {
position:fixed;
bottom:.5em;
right:.5em;
z-index:100;
display:none;
text-decoration:none;
color:#ccc;
font-size:3em;
background:#333232;
opacity:.3;
padding:0 4px
}
.return:hover {
color:#fff;
opacity:.8
}







/*---------------------
	Chevrons
---------------------*/

/*
.chevron {
display:flex;
flex-flow:column wrap
}
.chevron li {
margin:.5em;
padding:0 1.5em;
position:relative
}
.chevron li:before {
content: "\f105";
font-family:FontAwesome;
position:absolute;
left:0;
top:0
}
*/

.chevron {
margin-left:2em
}

.chevron li {
margin:1em 0
}

.fa-chevron-right {
margin-right:.5em
}


/*-------------
Calendar
-------------*/
.calendar-rap {
margin:2em auto
}
/*-- line breaks the Day Grid Month View --*/
.fc-daygrid-event .fc-event-title {
white-space:break-spaces
}


/*-------------
Contact
-------------*/
.contact-rap {
display:flex;
flex-direction:row
}
@media (max-width:800px) {
    .contact-rap {
    flex-direction:column
    }
}

.recruiter {
width:400px
}
@media (max-width:800px) {
    .recruiter {
    width:auto
    }
}


/*-------------
Google Maps
-------------*/
.map-rap {
width:600px;
height:450px
}
@media (max-width:800px) {
    .map-rap {
    margin-top:2em;
    width:auto;
    height:auto
    }
}

.google-maps {
position: relative;
padding-bottom: 75%; /*This is the aspect ratio*/
height: 0;
overflow: hidden;
}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}







/*-------------
	Footer
-------------*/
footer {
text-align:center;
color:#616161;
background:#f2f2f2;
padding:1.5em 1em 1em
}

footer .rap {
display:flex;
justify-content:center
}
footer .rap ul {
display:flex;
flex-direction:column;
margin:1em;
font-size:1em;
text-align:left;
}
footer .flex-offsite li {
margin-bottom:0
}
@media (max-width:500px) {
    footer .rap {
    flex-wrap:wrap;
    justify-content:left
    }
}