@charset "utf-8";

header, nav, footer {
  font-family : 'Source Sans Pro', Sans-serif;
  font-size : 18px;
  line-height : 27px;
}

/* ************************************************************************* *
 * WHMCS OVERRIDES
 * ************************************************************************* */

/*
.navbar-collapse {
    z-index: 1000;
    position: absolute;
    right: 20px;
    top: 20px;
    background: rgb(0, 0, 0);
    display : none;
}
*/
.pull-right.nav {
    padding-left : 10px;
}
.admin-masquerade-notice {
    max-width : 400px;
}

@media (max-width: 991px) {
/*
	.navbar-collapse.collapse {
		display : block;
	}
*/
}

/* ************************************************************************* *
 * NORMALIZE
 * ************************************************************************* */

footer {
	overflow : hidden;
}

header, nav, main, footer {
  -webkit-box-sizing : border-box;
  -moz-box-sizing : border-box;
  -ms-box-sizing : border-box;
  -o-box-sizing : border-box;
  box-sizing : border-box;
}

/* ************************************************************************* *
 * COMMON
 * ************************************************************************* */

div.wrapper {
  width : 1120px;
  margin : 0 auto;
  position : relative;
}

ul.grid {
  list-style-type : none;
  margin : 0;
  padding : 0;
  text-align : center;
  font-size : 0;
}
  ul.grid > li {
    margin : 0;
    padding : 0;
    display : inline-block;
    text-align : left;
    font-size : 18px;
    vertical-align : top;
    position : relative;
  }

/* ************************************************************************* *
 * LAYOUT
 * ************************************************************************* */

header {
  height : 110px;
}
  header > .wrapper {
    height : 110px;
    background : transparent url('/images/logo-host1-header.png') no-repeat 0px center;
  }
  header h1 {
    margin : 0;
    padding : 0;
    position : absolute;
    top : 10px;
    left : 290px;

    font-family: 'Raleway', sans-serif;
    font-size : 18px;
    font-weight : 300;
    color : #101314;
  }

  header a#logo {
    display : block;
    position : absolute;
    top : 10px;
    left : 0px;
    bottom : 10px;
    width : 265px;
  }

  header div#right {
    position : absolute;
    top : 0px;
    right : 0px;
  }

  header #right ul {
    list-style-type : none;
    margin : 0;
    padding : 0;
    font-size : 0;
  }
    header #right ul > li {
      width : 170px;
      height : 40px;
      line-height : 40px;
      background-color : #4887aa;
      text-align : center;
      display : inline-block;
      text-transform : uppercase;
    }
      header #right ul > li:nth-child(1) {
        margin-right : 10px;
      }
      header #right ul > li:nth-child(2) {
        margin-left : 10px;
      }
      header #right ul > li > a {
        color : #fafaf7;
        font-size : 18px;
        text-decoration : none;
      }

    header div#status {
      width : 360px;
      height : 40px;
      line-height : 20px;
      padding : 10px;
      margin-top : 15px;
      background-color : #ffe9cf;
      font-weight : 500;
      font-size : 16px;
    }
      header div#status span:nth-child(1) {
        font-weight : 300;
      }

body > nav {
  height : 40px;
  background-color : #3b3c3a;
  color : #fff;
}
  body > nav > .wrapper {
    height : 40px;
  }
  body > nav > .wrapper > ul {
    list-style-type : none;
    padding : 0;
    margin : 0;
    margin-left : -10px;
    margin-right : -10px;
  }
    body > nav > .wrapper > ul > li {
      display : inline-block;
      margin-left : 10px;
      margin-right : 10px;
      height : 40px;
      line-height : 40px;
    }
      body > nav > .wrapper > ul > li > a {
        color : #fff;
        text-decoration : none;
        font-weight : normal;
        text-transform : uppercase;
      }
      body > nav > .wrapper > ul > li > a:hover {
        color : #ffe9cf;
      }

#hamburger {
  display : none;
}
  #hamburger > span {
    position : absolute;
    top : 50%;
    right : 10px;
    margin-top : -20px;
    height : 40px;
    width : 40px;
    font-size : 40px;
    z-index : 10;
    cursor : pointer;
  }

  #hamburger > ul {
    position : absolute;
    margin : 0;
    padding : 0;
    top : 110px;
    left : 0px;
    right : 0px;
    z-index : 999999;
    display : none;

    background-color : #3b3c3a;
    color : #fff;
  }
    #hamburger > ul > li {
      width : 100%;
      padding : 10px;
      margin : 0;
      display : block;
      text-align : center;
      font-size : 14px;
    }
    #hamburger > ul > li > a {
      text-decoration : none;
      color : #fff;
    }

footer {
  padding-top : 26px;
  padding-bottom : 26px;
  background-color : #143548;
  color : #fff;
}

ul.grid-footer {
  margin-left : -10px;
  margin-right : -10px;
}
  ul.grid-footer > li {
    margin : 10px;
  }
  ul.grid-footer li.contact {
    width : 265px;
    background : transparent url('/images/logo-host1-footer.png') no-repeat;
    padding-top : 42px;
    line-height : 36px;
  }
    ul.grid-footer li.contact p {
      padding : 0;
    }
    ul.grid-footer li.contact a {
      text-decoration : underline;
    }
  ul.grid-footer li.follow {
    width : 265px;
    line-height : 36px;
  }
    ul.grid-footer li.follow p {
      padding : 0;
    }
    ul.grid-footer li.follow a {
      position : relative;
      padding-left : 22px;
    }
    ul.grid-footer li.follow a:hover {
      text-decoration : underline;
    }
      ul.grid-footer li.follow a > i{
        position : absolute;
        left : 0px;
        top : 5px;
        font-size : inherit;
        color : #fff;
      }
  ul.grid-footer li.about {
    width : 550px;
  }

  ul.grid-footer a {
    color : #fff;
    font-weight : normal;
    text-decoration : none;
  }

  ul.grid-footer .bold {
    font-size : 20px;
    line-height : 20px;
    font-weight : 600;
  }


/* ************************************************************************* *
 * PAD / SMALL SCREEN
 * ************************************************************************* */

@media (max-width: 1160px) {

  div.wrapper {
    width : 95%;
  }

  header {
    height : 110px;
  }

  header > .wrapper {
    background-size : 200px;
  }

  header h1 {
    top : auto;
    left : 0px;
    bottom : -20px;
  }

  ul.grid-footer {
    margin : 0;
  }
    ul.grid-footer > li:nth-child(1) {
      width : 30%;
      margin : 0;
    }
    ul.grid-footer > li:nth-child(2) {
      width : 20%;
      margin : 0;
    }
    ul.grid-footer > li:nth-child(3) {
      width : 50%;
      margin : 0;
    }
}

@media (max-width: 1000px) {


  header, body > nav, footer {
    font-size : 14px;
  }
  ul.grid > li {
    font-size : 14px;
  }

  header h1 {
    font-size : 14px;
  }

}

/* ************************************************************************* *
 * MOBILE
 * ************************************************************************* */

@media (max-width: 800px) {
}

@media (max-width: 700px) {
  header div#right {
    display : none;
  }

  body > nav {
    display : none;
  }

  #hamburger {
    display : block;
  }


  header, body > nav, footer {
    font-size : 12px;
  }
  ul.grid > li {
    font-size : 12px;
  }

  header h1 {
    font-size : 12px;
  }

  ul.grid-footer > li:nth-child(1) {
    width : 70%;
  }
  ul.grid-footer > li:nth-child(2) {
    width : 30%;
  }
  ul.grid-footer > li:nth-child(3) {
    width : 100%;
  }
}

@media (max-width: 560px) {
}