style.css

body {margin: 0; padding: 0; overflow: auto; font-family: Source Sans Pro; color: #333;}

/*#ee3c30 rgb(238, 60, 48)*/
/*#AAA688*/

h1, .big-heading {font-size: 3em; margin: 10px 0;}
h2, h3 {font-size: 2em;}
h3 a { color: black; }

code {font-family: Source Code Pro; font-size: 12px; background: #fafafa; border-radius: 3px; padding: 3px 5px; line-height: 20px;}

img {width: 100%;}

p, li {line-height: 1.4em;}
li {padding-bottom: 4px;}
p:first-child {padding-top: 0; margin-top: 0;}

a {color: #333; text-decoration: none; border-bottom: 1px solid #888;}
a:hover {border-color: #333;}
a.imglink {border: none; outline: none;}

hr {border: 2px solid #333; margin: 0;}

header {color: #333; background-image: url('images/test-bg.png'); background-size: 25%; background-position: 0 -100px; z-index: -1; display: block; background-color: #FFE51F; background-blend-mode: multiply; }
header h1 {font-size: 500%; font-weight: 900; margin-bottom: 0px; margin-top: 20px; line-height: 1;}

header .big-link { color: #333; font-weight: bold; border-color: #333;}
header .big-link:hover { border-color: #777; color: #777; }
header h1 { text-transform: uppercase; }

header p { font-size: 1.5em; font-weight: 500; margin: 10px 0 0 0; }
header .full { width: 47%; }
header .subtitle { margin-bottom: 20px; letter-spacing: .05em; }
header .nav a {color: #333; border-color: #fff; border: none;}
header img  {width: 400px; padding-right: 60px; position: relative; display: block; margin: 0 auto; padding-right: 20px; }
header .container {padding: 100px 40px;}

.events header .container,
.about header .container,
.host header .container,
.building-workshops header .container,
.chapters header .container {padding: 20px;}

.events .logo,
.about .logo,
.host .logo,
.building-workshops .logo,
.chapters .logo {padding: 15px 0;}

/*.events .first-photo,
.about .first-photo,
.host .first-photo,
.building-workshops .first-photo,
.chapters .first-photo {background-color: #CFB914;}*/

.container {clear: both;}
.container {padding: 60px 40px;}

.get-started code {font-size: 24px; background: #fff;}
.get-started h3 {margin-top: 0;}

.window-pane {height: 400px; width: 100%; background-image: url('images/hero3.jpg'); background-position: 0 -200px; background-size: 100%; background-repeat: no-repeat;}
.caption {color: #fff; font-size: 11px; padding: 40px; display: inline-block; opacity: .5;}

.other-photo {background-image: url('images/hero.jpg'); background-repeat: no-repeat; position: fixed; background-size: 100%; background-position: 0 600px; z-index: -1; display: block; height: 200%; width: 100%; }

/*ul.inner-nav {list-style: none;}
ul.inner-nav li {padding-right: 30px; display: inline;}
.inner-nav a {border-color: #F7DA03; color: #333; border-color: #F7DA03; padding: 0 10px 3px 10px; border-bottom-width: 2px;}
.inner-nav a:hover {color: #F7DA03; border-color: #F7DA03;}*/

ul.inner-nav {list-style: none;}
ul.inner-nav li {margin-right: 12px; display: inline-block; line-height: 3em;}
ul.inner-nav li:last-of-type {margin-right: 0;}
.inner-nav a {background-color: #F7DA03; color: #333; border: none; padding: 8px 12px; border-radius: 3px;}
.inner-nav a:hover {color: #fff; background-color: #333;}
span.no-break {display:inline-block;}

ul.nav {display: inline; list-style: none; color: #333; /*text-transform: uppercase;*/ font-weight: 700; letter-spacing: .1em; padding-left: 0;}
ul.nav li {display: inline; font-size: 16px; margin-right: 10px;}
ul.nav li:last-of-type {margin-right: 0;}
ul.nav li a {display: inline-block; padding: 6px 8px; border: 2px solid #333; border-radius: 3px; margin-bottom: 10px;}
ul.nav li:hover a {color: #F7DA03; background: #333; cursor: pointer;}
ul.nav li.current-page a {background: #333; color: #FFE51F;}
header .full:after {content: ''; display: block; clear: both;}

ul.nav-lang {list-style: none; margin: 0; padding: 5px 20px; text-align: right}
ul.nav-lang li {border: none; margin-right: none; display: inline;}
ul.nav-lang li a {color: #333; text-decoration: none; border-color: #333;}
ul.nav-lang li a:hover {color: #666; border-color: #666;}
ul.nav-lang li:after {content: "|"; margin-right: 5px; margin-left: 5px;}
ul.nav-lang li:last-child:after {content: none; color: #333;}
ul.nav-lang li.selected {text-decoration: none; color: #666;}

#map {width: 100%; min-height: 375px; background: #eaeaea;}
#map .past-event { border-radius: 50%; background: #9f9b9b; border: 2px solid #c6c4c4;}
.key {padding: 8px 0;}
.key span {padding-right: 12px;}
.key-past::before {content: ""; width: 12px; height: 12px; background: #A09C9C; display: inline-block; border-radius: 3px; margin-right: 8px;}
.key-future::before {content: ""; width: 12px; height: 12px; background: #F7DA03; display: inline-block; border-radius: 3px; margin-right: 8px;}
.events #map {margin: 0; padding: 0;}

.leaflet-container .leaflet-control-attribution a {border: none;}
.leaflet-container a {font-family: Source Sans Pro; color: #333;}

.half {width: 45%; display: inline-block; vertical-align: top;}
.half + .half {padding: 0 20px;}

.centered.half { margin-right: 25%; margin-left: 25%;}
.centered.third { margin-right: 33%; margin-left: 33%;}
.centered.two-thirds { margin-right: 16.5%; margin-left: 16.5%;}

.third {width: 30%; display: inline-block; vertical-align: top; }
.third + .third {padding-left: 30px;}
.third p, .third h3, .third h4 {margin-top: 0; line-height: 28px;}

.full {width: 63%; text-align: center; margin: 0 auto;}
.full p {font-size: 26px;}
#calendar .full, .events .workshops .full {width: 100%;}
.logo {text-align: center;}

.two-thirds {width: 60%; display: inline-block; vertical-align: top;}
.two-thirds + .third {padding-left: 30px;}
.third + .two-thirds {padding-left: 30px;}

.core-workshoppers h3,
.elective-workshoppers h3 {font-weight: 500; font-size: 3em; margin: 10px 0}

.workshopper h4 a { border-radius: 3px; font-size: 20px; padding: 6px 10px; font-family: Source Code Pro; font-weight: 500; text-decoration: none; display: block; border: none;}
.elective-workshoppers h4 a {background: #333; color: #fff;}
.core-workshoppers h4 a {background: #FFE51F; color: #333; }
.elective-workshoppers h4 a:hover {background: #000; }
.core-workshoppers h4 a:hover {background: #F7DA03;}

.workshopper {padding-bottom: 20px;}
.workshopper p{ min-height: 2.8em;}
#workshoppers {background-color: #F8F8F8; z-index: 99;}

#upcoming-workshops { margin-bottom: 15px;}
#upcoming-workshops ul { margin: 0;}
#upcoming-workshops>div { display: none; }
#upcoming-workshops>div.loading { display: block; }
#upcoming-workshops.success>div.loading,
#upcoming-workshops.empty>div.loading,
#upcoming-workshops.error>div.loading { display: none; }
#upcoming-workshops.success>div.success { display: block; }
#upcoming-workshops.error>div.error { display: block; }
#upcoming-workshops.empty>div.empty { display: block; }

.term,
.term .chrome,
.term .chrome .btn{ border:solid 2px #777;}
.term{ display: block; border-radius: 4px; margin-bottom:10px; text-align: left; }
.term .shell{ min-height:130px; overflow:hidden; }
.term .chrome{ height:34px; padding-left:4px; border-top:0 none; border-right:0 none; border-left:0 none; }
.term .chrome:before{ content:" "; display:inline-block; height:100%; vertical-align:middle; }
.term .chrome .btn{ display:inline-block; vertical-align:middle; width:8px; height:8px; border-radius:100%; }
.term .shell{ padding:10px; color:#494949; }
.term .workshopper{ background: #F8F0BD; padding:2px; }
.term .workshopper code{ border:0 none; }
.term code{ display:block; margin:12px 0; padding: 4px 10px; border-left: 8px solid #F7DA03; border-radius: 0; background:none; }
.term .chrome .btn:hover{ border-color:#404040;}
.term .chrome .btn.close:hover{ background:red; }
.term .chrome .btn.max:hover{ background:green; }
.term .chrome .btn.min:hover{ background:#F7DA03; }
.term.max{ top:0; left:0; position:absolute; width:100%; height:100%; max-width:none; }
.term.min{ position:absolute; bottom:0; }
.term.min .shell{ min-height:0; height:0; padding:0; }
.term.min .chrome{ border:0 none; }

footer {border-top: 3px solid #333; padding-top: 60px; padding-bottom: 40px; color: #333; padding-top: 20px;}
footer ul {display: inline-block; padding-right: 60px; vertical-align: top; margin: 0; padding: 0;}
footer ul + ul {padding-left: 80px;}
footer ul {list-style: none;}
footer strong {line-height: 2em;}
footer li a {font-size: 14px; text-decoration: none; border: none;}
footer a {border: none;}
footer p {margin: 0; padding: 0;}
footer .container {padding: 0 40px;}

.hexdex img.hex {width: 240px; padding: 10px;}


@media only screen and (max-width : 1366px) {
  h1, .big-heading { font-size: 2.0em}
  .get-started code { font-size: 12px; }
  header img { height: 75px; }
  header h1 { font-size: 2.0em; margin-top: 0; }
  header .subtitle { margin: 0 auto 20px; width: 75%; }
  header .full { width: 80%; }
  .full p { font-size: 16px; }
  h2 { font-size: 18px; }
  h4 { font-size: 16px; }
  .container { padding: 20px; }
  header .container { padding: 20px; }
  .full { width: 95%; }
  .core-workshoppers h4 a, .elective-workshoppers h4 a { font-size: 16px; }
  ul.inner-nav li {display: inline-block; line-height: 3em;}
  .window-pane { display: none; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.0em; }
  .container {padding: 20px;}
  .first-photo {background-image: none;}
  p {font-size: 1em;}
  .third, .two-thirds, .full, .half {width: 100%; }
  .two-thirds + .third, .third + .third, .third + .two-thirds {padding-left: 0;}
  .half, .two-thirds { margin-left: 0 !important; margin-right: 0 !important; }
  header .container {padding: 40px 20px;}
  header .full { width: 80%; }
  header img {width: 100%; padding: 0;}
  header h1 { font-size: 2.5em; margin-top: 0; }
  header h1 span {margin: 0 -3.8px;}
  header p {font-size: 1em; }
  #map {margin: 0; padding: 0; width: 100%;}
  .window-pane {background-position: 0 0; height: 200px;}
  footer ul {width: 100%;}
  footer ul + ul {padding-left: 0;}
  footer li a {font-size: 14px;}
}

/* skip naviation links */
.skip {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
    background-color: white;
}

a.skip:active,
a.skip:focus,
a.skip:hover {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
}


.mentoring-intro-quote {
  font-size: 20px;
  font-style: italic;
  position: relative;
}

.mentoring-intro-quote::before {
  content: "“";
  position: absolute;
  left: -0.6em;
  font-size: 5em;
  top: -0.3em;
}

@media only screen and (min-width : 768px) {
  .mentoring-intro-quote::before {
    font-size: 10em;
  }
}


.mentoring-header-full-width {
  background-image: url('images/mentoring-by-oleharland-cropped.jpg');
  background-size: cover;
  background-position: center;
  min-height: 500px;

  position: relative;
}

.mentoring-headline-container {
  position: absolute;
  /*bottom: 0em;*/

  background-color: rgba(00,00,00,0.6);
  width: 100%;
  height: 100%;
}

.mentoring-headline-container .container {
  height: 100%;
  /*width: 100%;*/
  position: relative;
}



.mentoring-headline {
  color: white;
  font-size: 2em;
  position: absolute;
  bottom: 2em;
  left: 0;
  width: 94%;
  text-align: center;
}

@media only screen and (min-width : 1366px) {
  .mentoring-headline {
    bottom: 5em;
  }
}