/* =================================
  LAYOUT
   ============================== */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, * {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #2d2d2d;
  font-size: 112%;
  font-family: "brandon-grotesque",sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

a {
  color: #00adee;
  cursor: pointer;
  font-size: 1.1em;
  text-decoration: none;
  -o-transition: background .5s ease;
  -ms-transition: background .5s ease;
  -moz-transition: background .5s ease;
  -webkit-transition: background .5s ease;
  transition:.5s;
}

a:hover { color: #8ad9f6; }

.vertical-align {
  color: #00adee;
  display: inline-block;
  vertical-align: middle;
}

hr {
  border: 0;
  border-top: 1px solid #ecebeb;
  height: 0;
  margin: 1.5em auto;
  width: 30px
}

.full-width { width: 100%; }

img {
  display: block;
  height: auto;
  margin: 0 auto;
  margin-bottom: 1.7em;
  max-width: 100%;
}

/* =================================
  TYPOGRAPHY
   ============================== */

h1, h2, h3 {
  font-weight: 400;
  margin: 0; 
  margin-bottom: .3em;
  text-align: center;
  text-transform: uppercase;
}

h1 {
  color: #00adee;
  font-size: 2.1em;
}

h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }

h4, h5 { 
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: .3em;
  text-transform: uppercase;
}

h5 {
  color: #888;
  font-size: 1em;
}

h6 {
  color: #888;
  font-size: 1.2em;
  font-weight: 400;
  margin: .4em 0 .7em 0;
  text-align: center;
}

p {
  font-size: 1.2em;
  margin-bottom: 1em;
  text-align: left;
}

.grey-text { color: #888; }

/* =================================
  LISTS
   ============================== */

ul { font-size: 1.1em; }

li { list-style: none; }

/* =================================
  WRAPPER
   ============================== */

.wrapper {
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
}

.medium { max-width: 500px; }

@media only screen and (max-width: 940px) {
  .wrapper { text-align: center; }
}

.sponsor-wrap { max-width: 379px; }

@media only screen and (max-width: 440px) { 
  .sponsor-wrap h2 { font-size: 1.3em; }
  .sponsor-wrap h1 { font-size: 1.8em; } 
}

/* =================================
  NAVIGATION
   ============================== */

nav {
  background: #2d2d2d;
  color: #fff;
  height: auto;
  padding: 1em 0;
}

.nav-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

nav a {
  color: #fff;
  font-size: 1em;
}
nav a:hover { color: #00adee; }

nav ul { float: right; }

nav li {
  float: left;
  font-size: 1em;
  font-weight: 400;
  margin-left: 1em;
}

.white-logo {
  display: inline-block;
  float: left;
  margin-bottom: 0;
  max-width: 70px;
}

@media only screen and (max-width: 620px) {
  nav { padding-bottom: 1em;}

  .white-logo {
  display: block;
  float: none;
  }

  .nav-logo {
    float: 0;
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  nav ul {
    float: 0;
    float: none;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 0;
    width: 100%;
  }

  nav li {
    display: block;
    float: 0;
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
 }

/* =================================
  HOMEPAGE - HERO IMAGE
   ============================== */

.hero-image {
  background: #2d2d2d;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  padding: 8em 0;
  position: relative;
  text-align: center;
  width: 100%;
}

.homepage-hero { background-image: url("../images/scna-hero.jpg"); }
.sponsors-hero { background-image: url("../images/hero2.jpg"); }
.sponsors-hero-two { background-image: url("../images/hero4.jpg"); }
.location-hero { background-image: url("../images/google-map-blk.jpg"); }

.hero-tint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(45,45,45,0.6);
  z-index: 10;
}

.header-box {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 370px;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 600px) { .hero-image { padding: 3em 0; } }

/* =================================
  HOMEPAGE - BUTTONS
   ============================== */

button {
  background: #2d2d2d;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  padding: .5em;
  -webkit-appearance: none;
  border: none;
  text-align: center;
  text-transform: uppercase;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  width: 100%;
}

.primary {
  background: 0;
  border: 1px solid #fff;
  font-size: 1em;
  font-weight: 400;
  height: 3em;
  margin-top: 2em;
  line-height: 0;
}

.primary:hover { background: rgba(45, 45, 45, 0.8); }

/* =================================
  HOMEPAGE - MAILING LIST SECTION
   ============================== */

form {
  font-family: "brandon-grotesque",sans-serif;
  font-size: 1em;
  font-weight: 500;
  margin: 0 auto;
  margin-top: 2em;
  max-width: 300px;
  text-align: left;
}

input[type="email"],
input[type="text"],
textarea {
  border: 1px solid #ddd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-weight: 300;
  margin-bottom: 1em;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.3em;
  line-height: 1.5;
}

::-webkit-input-placeholder { color: #bbb;}
:-moz-placeholder { color: #bbb;}
::-moz-placeholder { color: #bbb;}
:-ms-input-placeholder { color: #bbb;}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
  border: 1px solid #00adee;
  outline: none;
}

button[type="submit"],
.submit-button {
  -webkit-appearance: none;
  border: none;
  background: #555;
  font-size: .9em;
  margin-top: 1em;
}

button[type="submit"]:hover,
.submit-button:hover { background: #6d6d6d; }

@media only screen and (max-width: 940px) {
  form {
    display: inline-block;
    margin-top: 1em;
    width: 100%;
    max-width: 340px;
  }
}

/* =================================
  TWITTER STYLING
   ============================== */

.twitter-box { margin-top: 1em; }

.twitter-link { vertical-align: top; }

/* =================================
  SCHEDULE - TIMELINE
   ============================== */

.timeline {
  list-style: none;
  margin-top: 2em;
  padding: 0;
  position: relative;
}

.timeline:before {
  background: #ecebeb;
  color: #ecebeb;
  content: "";
  position: absolute; 
  left: 155px;
  width: 1px;
  height: 100%;
}

.timeline li { position: relative; }

.time {
  background: #fff;
  color: #888;
  font-size: .9em;
  font-weight: 400;
  position: absolute;
  text-align: right;
  left: 100px;
  top: 0;
}

.mobile-time { display: none;}

.day {
  background: #fff;
  color: #888;
  display: block;
  font-size: 1.1em;
  font-weight: 500;
  position: relative;
  left: 100px;
  margin-bottom: 2em;
  top: 0;
  text-transform: uppercase;
}

.content {
  margin-bottom: 2em;
  position: relative;
  left: 40%;
  top: 0;
  width: 100%;
  max-width: 550px;
}

.content a { font-size: 1em; }
.content p { font-size: 1em; }
.timeline hr { display: none; }

@media only screen and (max-width: 940px) {
  .timeline { text-align: center; }
  .timeline:before { left: 50%; }

  .timeline hr { display: block; }
  .timeline li {
    margin-bottom: 2em;
    left: 0;
  }

  .day { left: 0; }

  .time { display: none; }

  .mobile-time { 
    color: #888;
    display: block; 
    font-size: .9em;
    font-weight: 400;
  }

  .content {
    background: #fff;
    left: 0;
    padding: .5em;
    max-width: 100%;
  }

  .content-center { text-align: center; }
}

/* =================================
  IMAGES
   ============================== */

/*homepage logo, diamond images*/
.primary-size { max-width: 250px; }

/*vector diamonds*/
.secondary-size { max-width: 100px; }

/*sponsors logo*/
.medium-logo { max-height: 70px; }

/*homepage social icons, media sponsors logo*/
.small-logo { max-height: 50px; }

.schedule-diamond { 
  display: inline-block;
  margin-bottom: 0;
  max-width: 150px; 
}

@media only screen and (max-width: 940px) {
  .schedule-diamond { display: none; }
}

.pin {
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../images/map-marker.png");
  display: inline-block;
  font-size: 0;
  line-height: 0;
  margin-right: 5px;
  padding: 0px 15px 22px 0;
  padding-top: 9px;
  vertical-align: top;
}

/* =================================
  SECTIONS
   ============================== */

.white {
  background: #fff;
  border-bottom: 1px solid #ecebeb;
  margin: 0 auto;
  padding: 4em 0;
}

.pattern {
  background-image: url("../images/pattern.jpg");
  border-bottom: 1px solid #ecebeb;
  margin: 0 auto;
  padding: 4em 0;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .white, .grey, .pattern { padding: 1.5em 0; }
}

/* =================================
  COLUMNS
   ============================== */

.row {
	margin: 2em 0;
	overflow: hidden;
}

.row:last-child { margin-bottom: 0; }

.column {
  float: left;
  margin-left: 5%;
}

.column:first-child { margin-left: 0; }

.two-third { width: 65%; }
.half { width: 47.5%; }
.third { width: 30%; }
.fourth, .dates-fourth { width: 21.2%; }

.faq-wrapper {
  margin: 0 auto;
  width: 90%;
  max-width: 610px;
}

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

  .column {
    float: none;
    margin-left: 0;
    width: 100%;
  }

  .dates-fourth, .fourth {
    float: left;
    margin-bottom: 2em;
    margin-left: 5%;
    width: 47.5%;
  }

  .fourth:nth-of-type(3), .dates-fourth { 
    margin-left: 0;
  }

  .third {
    margin-bottom: 2em;
    width: 100%;
  }

  .third:last-child { margin-bottom: 0; }
  .third p { text-align: center; }
}

@media only screen and (max-width: 600px) {
  .fourth { 
    float: none;
    margin-left: 0;
    width: 100%;
  }
}

/* =================================
  FOOTER
   ============================== */

footer {
  background: #e3e3e3;
  padding: 1em 0;
  margin: 0 auto;
  width: 100%;
}

footer p {
  color: #a7a7a7;
  font-size: 1em;
  margin: 0;
  text-align: center;
}

/* =================================
  UTILITIES
   ============================== */

.font-one-em { font-size: 1em; }

.padding-none { padding: 0; }
.padding-bottom-none { padding-bottom: 0; }

.center { text-align: center; }

.left { text-align: left; }

.margin-bottom { margin-bottom: 4em; }
.margin-bottom-small { margin-bottom: .7em; }
.margin-bottom-none { margin-bottom: 0; }

.margin-top-none { margin-top: 0; }

.vertical-align { vertical-align: middle; }

@media only screen and (max-width: 940px) { 
  .margin-bottom { margin-bottom: 1em; } 
}

/* =================================
  CLEAR FIX
   ============================== */

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

.cf:after { clear: both; }

.cf { *zoom: 1; }