* { margin: 0; padding: 0; }

body {
  border-left: 6px solid #0976B5;
  font: 16px/24px "Helvetica Neue", Arial, Helvetica;
  color: #212121;
}

a { text-decoration: none; color: #0976B5;}
a:visited { color: #0976B5; }

h1, h2, h3 { -webkit-font-smoothing: antialiased; font-family: "Siri-BC"; }

h1 { font-size: 42px; margin-bottom: 24px;}
h2 { font-size: 32px; margin: 12px 0 36px;}
h3 { font-size: 18px; margin: 12px 0; text-transform: uppercase; color: #AFAFAF;}

.highlite { color: #E30613; text-transform: uppercase;}
.highlite.tag { color: #E30613; text-transform: none; font-weight: bold; font-size: 15px; }
.highlite.tag:hover { text-decoration: underline; }

.description.right { padding: 10px 0 10px 20px; border-left: 1px dashed #E6E6E6; border-top: none; margin-top: 0;  }
.description.right.alert { padding: 10px 0 10px 20px; background: #fef2f3; border-left: 1px dashed #E6E6E6; border-top: none; margin-top: 0;  }

.description { color: #212121; background: #faf9f7; padding: 20px 20px; border-top: 1px dashed #E6E6E6; margin-top: 20px; font-style: italic; }
.description p { margin-bottom: 10px; font-size: 15px; line-height: 20px;}
.description a { text-decoration: none; color: #0976B5;  font-weight: bold; }


.description.alert { color: #E30613; background: #fef2f3; padding: 20px 20px; border-top: 1px dashed #E6E6E6; margin-top: 20px; font-style: italic; font-weight: bold;}
.description.alert p { margin-bottom: 10px; font-size: 15px; line-height: 20px;}


p.format { font-weight: bold; font-size: 14px; color: #606060; }

section p  { font-size: 14px; line-height: 18px; margin-bottom: 6px;}

.relative { position: relative; }

/* NAVIGATION */

header {
  width: 100%;
  padding: 0;
  background: #fff;
  margin-left: -6px;
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.10);
  position: fixed;
  padding: 20px 0;
  z-index: 12;
}

header span.logo {
  float: left;
  margin-left: 20px;
  color: #E30613;
  font-weight: bold;
}

header span.logo::after {
  content: '';
  margin-left: 6px;
  background-image: url('imgs/geting.png');
  width: 24px;
  height: 19px;
  display: inline-block;
}

header nav { float: right;  margin-right: 20px; }
header nav ul { list-style-type: none; }
header nav ul li { display: inline; text-transform: uppercase; font-size: 13px; font-weight: bold; margin: 0 15px; color: #afafaf; }
header nav ul li.active { padding-bottom: 5px; border-bottom: 3px solid #0976B5; color: #212121;}
header nav ul li a { color: #212121;}
header nav ul li a:visited { color: #212121; }


header nav .mobile-nav { display: none; }

.mobile-button.close {
  width: 30px;
  right: 13px;
}

.mobile-button__line {
  display: block;
  height: 3px;
  width: 100%;
  background: #065683;
  margin: 4px 0;
  border-radius: 0px;
  opacity: 1;
}

.mobile-button {
    display: none;
    width: 25px;
    position: absolute;
    right: 15px;
    cursor: pointer;
    z-index: 20;
}

.close .mobile-button__line {
  background-color: white;
}

.close .mobile-button__line:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: 8px;
}

.close .mobile-button__line:nth-child(2) {
  display: none;
}

.close .mobile-button__line:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: relative;
}

/* INTRODUCTION */

#introduction {
  border-left: 1px solid #F2F0EC;
  border-right: 1px solid #F2F0EC;
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 10%;
}

#introduction preamble {
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  margin: 12px 0 24px;
  display: block;
}

/* WRAPPERS */

#wrapper {
  width: 80%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 150px 10%;
}

#wrapper preamble {
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  margin: 12px 0 24px;
  display: block;
}

.wrapper {
  width: 80%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 6px 0 18px 0;
}

.wrapper.main { padding: 150px 0 32px 0; border-bottom: 1px dashed #e7e4df; margin-bottom: 48px; }

.wrapper preamble {
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  margin: 12px 0 24px;
  display: block;
}

span.red-text { font-weight: bold; color: #E30613;}
section { padding: 0 0 24px 0; border-bottom: 1px solid #e7e4df; margin: 0 0 40px 0; box-shadow: 0 5px 0 #F2F0EC; }

.container { width: 100%; }


.col-20 { width: 18%; margin: 1%; float: left;}

.col-20 ul, .col-25 ul, .col-30 ul, .col-50 ul { list-style-type: none; font-size: 14px;}
.col-20 ul li, .col-25 ul li, .col-30 ul li, .col-50 ul li { width: 50%; float: left;}
.col-20 ul li.left, .col-25 ul li.left, .col-30 ul li.left , .col-50 ul li.left {font-weight: bold;}
.col-20 ul li.right, .col-25 ul li.right, .col-30 ul li.right, .col-50 ul li.right {text-align: right;}

.col-25 { width: 23%; margin: 1%; float: left;}

.col-30 { width: 30%; margin: 1%; float: left;}

.col-33 { width: 33.33%; float: left; padding: 1%; box-sizing: border-box;}
.col-66 { width: 66.67%; float: left; padding: 1%; box-sizing: border-box;}

.col-50 { width: 48%; margin: 1%; float: left;}
.col-50 p.description { border-left: 1px solid #F2F0EC; }

.col-100 { width: 100%; margin: 0 0 4%; float: left;}

.clear { clear: both;}

/* BUTTONS */

.std-button {
  color: #FFF;
  font-size: 14px;
  font-weight: bold;
  background: #0976B5;
  border-radius: 3px;
  padding: 12px 24px;
  display: table;
  margin: 24px auto;
  width: auto;
  box-shadow: 0 2px 0 0 #065683;
}

.std-button:hover { background: #0a80c4;}

/* MEDIA QUERIES */

@media screen and (max-width: 1200px) {
  header nav ul li { margin: 0 10px; }
}


@media screen and (max-width: 1100px) {
    .mobile-button {
      display: block;
    }

    header nav {
      opacity: 0;
      position: fixed;
      background-color: rgba(0,0,0, 0.9);
      height: 100%;
      width: 100%;
      top: 0;
      z-index: 10;
      transition: opacity 300ms ease-in-out;
      -webkit-transition: opacity 300ms ease-in-out;
    }

    header nav.show {
      opacity: 1;
    }

    header nav.show ul {
      top:50%;
    }

    header nav ul {
      position: absolute;
      top: 46%;
      -webkit-transform: translate(0,-50%);
      transform: translate(0,-50%);
      width: 100%;
      text-align: center;
      transition: top 300ms ease-in-out;
      -webkit-transition: top 300ms ease-in-out;
    }

    header nav ul li {
      display: block;
      color: white;
      padding: 10px 5px;
      border-bottom: 1px solid #606060;
    }

    header nav ul li a,
    header nav ul li.active,
    header nav ul li a:visited{
      color: white;
      border-bottom: none;
    }

    header nav ul li.active {
      color: white;
      border-bottom: 3px solid #0976B5;
    }

    header nav .mobile-nav { display: block; }
}

@media screen and (max-width: 880px) {
    .col-20 { width: 31%; margin: 2% 0; padding: 0 1%; float: left;}
    .col-25 { width: 48%; margin: 2% 0; padding: 0 1%; float: left;}
    .col-30 { width: 48%; margin: 2% 0; padding: 0 1%; float: left;}
    .col-50 { width: 90%; margin: 2% 0; float: left;}
}

@media screen and (max-width: 550px) {
    .col-20 { width: 90%; margin: 2% 0 8%; float: left;}
    .col-25 { width: 90%; margin: 2% 0; float: left;}
    .col-30 { width: 90%; margin: 2% 0; float: left;}

    span.icon { text-align: center;}

}