/*
Changes to style can be made on the USER-STYLE.CSS file.
EDIT THIS FILE AT YOUR OWN RISK.
 */

 html {
   height:100%;
   font-size: 62.5%; }

 body {
   height:100%;
   font-size: 1.5em;
   line-height: 1.4;
   font-weight: 400;
   font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #222;
 }

h1, h2, h3, h4, h5, h6 {
 margin-top: 0;
 margin-bottom: 2rem;
 font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

@media (min-width: 550px) {
 h1 { font-size: 5.0rem; }
 h2 { font-size: 4.2rem; }
 h3 { font-size: 3.6rem; }
 h4 { font-size: 3.0rem; }
 h5 { font-size: 2.4rem; }
 h6 { font-size: 1.5rem; }
}

p { margin-top: 0; }

:link,:visited {text-decoration:none}

ul,li {
  margin:0; padding:0
}

a img,:link img,:visited img {
  border:none
}

ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}

img{
  max-width:100%
}

.ytvideo {
  margin:auto;
  width:95%;
  max-width:560px;
  height:315px
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

.sharebuttons{
  max-width:100%;
}

.headercontainer{
  margin: 20px 0 auto;
  padding: 0 10px;
}

#title {
  margin:20px auto;
}

#title a{
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 35px;
  color:#000
}

#title a:hover{
  color: #555;
  text-decoration:none
}

.homeimage{
  overflow:hidden;
}

.homeimage img{
  display:block;
  margin:0 auto 20px auto;
  vertical-align:bottom;
  position:relative;
}

.nav-container{
  position:relative;
  z-index:40;
  min-height:45px;
  margin:0 5px;
  background:#eded07;
  border:1px solid #aaa;
}

.logo{
  position:absolute;
  z-index:50;
  width:35px;
  height:35px;
  opacity:0.5;
  top:5px;
  right:10px
}

.icon-bar {
  display: block;
  margin-top:5px;
  width: 35px;
  height: 6px;
  background-color: #555;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#drop {
  position:relative;
  top:15px;
  right:30px;
  display:none
}

.toggle + a{
  display: none;
}

.menu {
  display: none;
}

.toggle {
  display:block;
  position:relative;
  top:4px;
  left:20px;
  z-index:60;
}

.toggle:hover {
  cursor:pointer
}

#drop:checked + ul {
  display: block;
  position:relative;
  margin-bottom:30px
}

nav {
  padding: 0;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  width:100%;
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position:relative;
  top:30px;
  background:#fafa4c;
}

nav ul li {
  display: inline-block;
  width: 100%;
  margin: 0px;
  float: left;
}

nav a {
  display: block;
  padding: 0 20px;
  font-size: 20px;
  line-height: 40px;
  text-decoration: none;
  border-bottom:1px solid #4856a4;
  color:#000
}

nav a:hover{
  text-decoration:none;
  color:#555
}

.container, .homecontainer{
  background:#fff;
  position: relative;
  min-height: calc(100vh - 122px);
  height: auto !important;
  height: 100%;
  margin: 20px auto 0 auto;
  padding: 0 15px;
  box-sizing: border-box;

}

.row{
  padding:10px 0 0;
}
.column {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

.column.one-third{
  padding-top:15px;
  border-top:1px solid #ddd
}

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

.google-map{
  max-width:100%;
  border:1px solid #bbb
}

.footer{
  padding:10px;
  background:#eded07;
  border:1px solid #aaa;
}

/* --------------------------------------*/
/* --------------------------------------*/

@media (min-width: 768px) {
  #title a{
      padding: 0 20px;
  }

  .toggle {
    left:35px;
  }

  nav a{
    padding: 0 35px;
  }

  .container, .homecontainer{
    padding: 0 35px;

 /*.container{
    width:85%
  }*/

  .row{
    padding:15px 0 0
  }

}

/* --------------------------------------*/
/* --------------------------------------*/

@media (min-width: 980px){

  .nav-container{
    height:auto;
  }

  .toggle, #drop{
    display: none;
  }

  .toggle + a,
  .menu {
    display: block;
    margin:auto;
  }

  nav{
    margin-left:20px
  }

  nav ul{
    position:static;
    border:none;
    top:0px;
  }

  nav ul li {
    width:auto;
    float:none;
    display: inline-block;
  }

  nav a {
    padding: 3px 15px;
    font-size: 16px;
    border-bottom:none;
  }

  .container, .homecontainer{
    min-height: calc(100vh - 143px);
    max-width:1150px
  }



  .homeimage img{
    max-width:1000px;
  }

  .column {
    margin-left: 3%;
  }

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

  .column.one-third {
    width: 30.6666666667%;
    border-top:none;
    padding-top:0;
  }

  .column.two-thirds {
    width: 66.3333333333%;
    min-height:10px
  }

}

/* --------------------------------------*/

/* --------------------------------------*/

@media all and (max-width : 500px) {

  #title{
    line-height:30px
  }
  .ytvideo {
    height:250px
  }

}