:root{
  --lightest_accent: #00bfb0;
  --light_accent: #009788;
  --dark_accent: #007A6B;
  --darkest_accent: #00584b;
  --lighter_blue_accent: #344b62;
  --blue_accent: #203040;
  --white: #ffffff;
  --almost_white: #f8f8f8;
  --med_gray: #b4b4b4;
  --darker_gray: #888888;
  --darkest_gray: #444444;
  --almost_black: #1e1e1e;
}

*{
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
  -webkit-font-smoothing: antialiased !important;
}

a{
  color: var(--blue_accent);
}

p{
  padding: 15px 0px;
  line-height:1.5;
}

html{
  background: var(--almost_white);
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  line-height:1.3;
}

h1, h2, h3, h4, h5{
  font-weight: normal;
}

h1{
  font-size:1.5em;
}

h2{
  font-size:.7em;
}

h3{
  font-size: 17px;
  line-height: 28px;
}

.mountain_bg{
  background-image: url('mountain.jpg');
  background-size: cover;
}

.green_bg{
  box-shadow: 0 10px 20px rgba(0,0,0,.1) inset;
  background: var(--lightest_accent);
  color: var(--almost_white);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.social_share a{
  color: rgba(0,0,0,.15);
  text-shadow: none;
}

.gray_bg{
  box-shadow: 0 10px 20px rgba(0,0,0,.1) inset;
  text-shadow: 0 1px 1px rgba(255,255,255,.3);
  background: var(--med_gray);
  color: var(--blue_accent);
}

.white_bg{
  box-shadow: 0 10px 20px rgba(0,0,0,.1) inset;
  background: var(--almost_white);
  color: var(--darkest_accent);
}

.blue_bg{
  box-shadow: 0 10px 20px rgba(0,0,0,.1) inset;
  background: var(--blue_accent);
  color: var(--almost_white);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.page_content{
  max-width: 1350px;
  margin: 0 auto;
}

.centered{
  text-align: center;
}

.left_text{
  text-align:left;
}

.right_text{
  text-align:right;
}

.birthday_form{
  padding: 120px 25px;
}

.birthday_form h3{
  text-shadow: -1px 1px 2px rgba(0,0,0,.3);
  color:#fff;
}

.birthday_form select{
  -webkit-appearance: none;
  border-radius: 5px;
  appearance: none;
  background: var(--white);
  padding: 5px;
  color: var(--blue_accent);
  margin: 0 5px;
  font-size:17px;
  text-transform:uppercase;
}

.new_comment input[type=text], .new_comment textarea{
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
  width: 100%;
  padding: 10px 15px;
  background: rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.2);
  margin: 5px 0;
  color: var(--white);
  border-radius: 8px;
  font-size:14px;
  box-shadow: 0px 0px 15px rgba(0,0,0,.1) inset;
}

.new_comment input[type=submit]{
  margin: 10px 0;
}

.extra_top_padding{
  padding-top: 25px;
}

.little_bottom_padding{
  padding-bottom:15px;
}

.side_padded{
  padding-left: 20px;
  padding-right:20px;
}

input{
  -webkit-appearance: none;
  appearance: none;
}

.green_bg .btn{
  background: var(--light_accent);
  background: -moz-linear-gradient(-45deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.blue_bg .btn{
  background: var(--lighter_blue_accent);
  background: -moz-linear-gradient(-45deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%);
}

.gray_bg .btn{
  background: var(--lighter_blue_accent);
  background: -moz-linear-gradient(-45deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--lighter_blue_accent) 0%, var(--blue_accent) 100%);
}

.btn{
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight:normal;
  border-radius: 3px;
  text-shadow: -1px 1px 2px rgba(0,0,0,.1);
  text-transform: uppercase;
  background: var(--light_accent);
  background: -moz-linear-gradient(-45deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--light_accent) 0%, var(--dark_accent) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.btn:hover{
  background: var(--dark_accent);
  background: -moz-linear-gradient(-45deg, var(--dark_accent) 0%, var(--darkest_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--dark_accent) 0%, var(--darkest_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--dark_accent) 0%, var(--darkest_accent) 100%);
}

.green_bg .btn:hover{
  background: var(--dark_accent);
  background: -moz-linear-gradient(-45deg, var(--dark_accent) 0%, var(--darkest_accent) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--dark_accent) 0%, var(--darkest_accent) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--dark_accent) 0%, var(--darkest_accent) 100%);
}

.blue_bg .btn:hover{
  background: var(--blue_accent);
  background: -moz-linear-gradient(-45deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.gray_bg .btn:hover{
  background: var(--blue_accent);
  background: -moz-linear-gradient(-45deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, var(--blue_accent) 0%, var(--almost_black) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.larger_btn{
  font-size:30px;
  line-height:44px;
  padding: 5px 30px;
}

.mid_btn{
  font-size:20px;
  line-height:30px;
  padding: 5px 15px;
}


#footer{
  border-top: 1px solid var(--med_gray);
  padding: 40px;
  font-size:16px;
  line-height:30px;
  color: var(--darker_gray);
}

table{
  margin:0 auto;
  border-spacing: 4px;
  border-collapse: separate;
}

td{
  border: 1px solid #606989;
  border-radius: 2px;
  font-size:3px;
  height:5px;
  width:5px;
}

td.completed{
  background: #606989;
}

i{
  width:1em;
  text-align:center;
}

.data_section{
  padding: 90px 10px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.lite_data_section{
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.f_1_5x{
  font-size:1.5em;
}

.f_2x{
  font-size:2rem;
}

.f_3x{
  font-size:3rem;
}

.f_4x{
  font-size:4rem;
}

.f_5x{
  font-size:5rem;
}

.f_6x{
  font-size:6rem;
}

.f_7x{
  font-size:6rem;
}

.overflow_auto{
  overflow: auto;
}

.almost_half{
  width:49%;
}

.float_left{
  float:left;
}

.float_right{
  float:right;
}

.inline_block{
  vertical-align:middle;
  display:inline-block;
}

.peer_icons{
  font-size:22px;
}

.week_icons{
  font-size:10px;
  white-space: nowrap;
}

.completed{
  color: #7784a8;
}

.incomplete{
  color:#a7b1d4;
}

.page_width{
  max-width: 760px;
  margin: 0 auto;
}

.link_header{
  text-align:left;
  font-size:22px;
  line-height: 2em;
  padding: 20px 0 0 20px;
}

.sub_links{
  padding: 20px;
  text-align:left;
  font-size:15px;
  line-height:1.8;
  background: rgba(0,0,0,.05);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.05) inset;
}

.section_link:hover{
  color: var(--darker_gray);
}

.sub_links i{
  vertical-align:middle;
  font-size:.75em;
}

.sub_links a{
  display:inline-block;
}

.sub_links a:hover{
  color: var(--light_accent);
}

.social_share{
  text-align:right;
}

.section_link i{
  transition: all 0.4s ease;
  font-size: .6em;
}

.expanded_link i{
  transform: rotate(45deg)
}

.language-switcher {
  text-align: center;
  line-height:1.8;
  font-size:14px;
  padding: 10px 20px;
  float:right;

  .lang-select {
    text-decoration: none;
    color: #6c757d;
    padding: 2px 5px;
    border-radius: 3px;
  }
}

@media only screen and (max-width: 850px){
  .f_1_5x{
    font-size:1.25em;
  }
  
  .f_2x{
    font-size:1.4rem;
  }
  
  .f_3x{
    font-size:2rem;
  }
  
  .f_4x{
    font-size:3rem;
  }
  
  .f_5x{
    font-size:4rem;
  }
  
  .f_6x{
    font-size:4rem;
  }
  
  .f_7x{
    font-size:5rem;
  }

  table{
    border-spacing: 3px;
  }
  td{
    height:4px;
    width:4px;
  }
  .week_icons i{
    font-size:5px;
  }
  .half_width, .almost_half{
    width: auto;
  }

  .data_section{
    padding: 50px 10px;
  }
}

@media only screen and (max-width: 420px){
  table{
    border-spacing: 2px;
  }
  td{
    height:2px;
    width:2px;
  }
  .sub_links{
    font-size: .7em;
  }
  a.section_link{
    font-size: .8em;
  }
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wave-animation {
  animation: wave 3s ease-in-out infinite;
  transform-origin: center;
  display: inline-block;
}

/* Inline icon sizing, matching the rules Font Awesome injected at runtime.
   height:1em tracks font-size (e.g. .peer_icons sets 22px); width follows each
   icon's viewBox aspect ratio, which differs for the star (576x512). */
.icon {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
}