/* Scss Document */
/* ------------ VARIABLES -------------- */
body {
  background: #318bc5;
  font-family: "Open Sans", Arial, Helvetica, Sanserif !important;
  font-weight: 500;
  font-size: 16px;
  position: relative;
  color: #ffffff;
  height: 100%; }

h1 {
  font-size: 26px;
  margin-bottom: 0;
  font-weight: 100; }

h2 {
  font-size: 32px;
  margin: 0 auto 0px auto;
  font-weight: 100; }

h3 {
  font-size: 16px;
  margin: 0px 0 10px 0;
  font-weight: 700;
  color: #0e2d4c;
  text-transform: uppercase; }

h4 {
  font-size: 16px;
  margin: 20px 0 0 0;
  font-weight: 900; }

.clear {
  clear: both; }

a {
  color: #ffffff; }
  a:link {
    color: #ffffff;
    padding: 5px 7px; }
  a:hover {
    color: #70c6fa;
    transition: all .3s linear;
    padding: 5px 7px; }

header {
  background: rgba(30, 87, 137, 0.8);
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  width: 100%;
  z-index: 9999;
  position: fixed;
  top: 0;
  align-items: center; }
  header li {
    display: inline-block;
    padding: 0 10px; }
  header #logo {
    padding: 0 10px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700; }
  header .show-for-small-only {
    text-align: right; }
  header .social {
    padding: 20px 10px; }
    header .social div {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-left: -10px; }
  header .nav, header #back {
    text-align: center;
    flex-grow: 2;
    flex-align: center;
    margin: 20px; }
  header #linkedin {
    background: url(../img/social-icons.png) no-repeat 0 0; }
    header #linkedin:hover {
      background: url(../img/social-icons.png) no-repeat 0 -36px; }
  header #behance {
    background: url(../img/social-icons.png) no-repeat -36px 0; }
    header #behance:hover {
      background: url(../img/social-icons.png) no-repeat -36px -36px; }
  header #twitter {
    background: url(../img/social-icons.png) no-repeat -72px 0; }
    header #twitter:hover {
      background: url(../img/social-icons.png) no-repeat -72px -36px; }
  header #work-logo {
    flex-grow: 2;
    position: absolute;
    top: 10px;
    text-align: center; }

#mobile-menu {
  width: 100%;
  z-index: 9999;
  position: fixed;
  top: 0;
  background: #205487;
  margin-top: 60px;
  padding-left: 30px;
  position: fixed; }
  #mobile-menu li {
    padding: 10px 0;
    list-style-type: none; }

#content {
  position: relative; }

#top {
  position: relative;
  width: 100%;
  height: 100vh; }
  #top #cl {
    position: absolute;
    top: 30%;
    text-align: center;
    width: 100%; }
  #top #tagline {
    color: rgba(255, 255, 255, 0.75); }

#index {
  background: #318bc5;
  background-image: url("../img/cl-sm.jpg");
  background-repeat: no-repeat;
  background-size: contain; }

#work {
  padding-top: 100px;
  position: relative;
  width: 100%; }
  #work h2 {
    text-align: center; }
  #work figure {
    display: inline-block;
    position: relative;
    padding-top: 100%;
    border: 3px solid #ffffff;
    height: auto;
    width: 100%;
    border-radius: 50%;
    transition: all .3s linear; }
    #work figure:hover {
      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.6);
      border-color: #205487; }
  #work .small-12 {
    padding: 0 40px;
    border: 1px solid red; }
  #work figcaption {
    text-align: center;
    margin: 0 auto 30px auto; }
  #work #hotelzon {
    background: url(../img/thumb-hotelzon.jpg) no-repeat;
    background-size: cover; }
  #work #viewtrip {
    background: url(../img/thumb-viewtrip.jpg) no-repeat;
    background-size: cover; }
  #work #u-profile {
    background: url(../img/thumb-u-profile.jpg) no-repeat;
    background-size: cover; }
  #work #corp-compliance {
    background: url(../img/thumb-corp-compliance.jpg) no-repeat;
    background-size: cover; }
  #work #location {
    background: url(../img/thumb-location.jpg) no-repeat;
    background-size: cover; }
  #work #qpd {
    background: url(../img/thumb-qpd.jpg) no-repeat;
    background-size: cover; }
  #work #musement {
    background: url(../img/thumb-musement.jpg) no-repeat;
    background-size: cover; }
  #work #airport-services {
    background: url(../img/thumb-airport-services.jpg) no-repeat;
    background-size: cover; }
  #work #map-booking {
    background: url(../img/thumb-map-booking.jpg) no-repeat;
    background-size: cover; }
  #work #ferry-booking {
    background: url(../img/thumb-ferry.jpg) no-repeat;
    background-size: cover; }
  #work #taxi-booking {
    background: url(../img/thumb-taxi-booking.jpg) no-repeat;
    background-size: cover; }
  #work #bus-tour-booking {
    background: url(../img/thumb-bus-tour.jpg) no-repeat;
    background-size: cover; }
  #work #logo-queenpin {
    background: url(../img/thumb-logo-queenpin.jpg) no-repeat;
    background-size: cover; }
  #work #logo-tripcase {
    background: url(../img/thumb-logo-tripcase.jpg) no-repeat;
    background-size: cover; }
  #work #logo-bambora {
    background: url(../img/thumb-logo-bambora.jpg) no-repeat;
    background-size: cover; }
  #work #logo-yahbrah {
    background: url(../img/thumb-logo-yahbrah.jpg) no-repeat;
    background-size: cover; }
  #work #logo-cubeless {
    background: url(../img/thumb-logo-cubeless.jpg) no-repeat;
    background-size: cover; }
  #work #logo-travel-studios {
    background: url(../img/thumb-logo-travel-studios.jpg) no-repeat;
    background-size: cover; }
  #work #illustration-character-design {
    background: url(../img/thumb-illustration-tour.jpg) no-repeat;
    background-size: cover; }
  #work #illustration-icons {
    background: url(../img/thumb-illustration-icons.jpg) no-repeat;
    background-size: cover; }
  #work #illustration-beach {
    background: url(../img/thumb-illustration-beach.jpg) no-repeat;
    background-size: cover; }
  #work #illustration-branding {
    background: url(../img/thumb-illustration-branding.jpg) no-repeat;
    background-size: cover; }

#about {
  padding-top: 100px;
  position: relative;
  width: 100%;
  height: 100vh; }
  #about h2 {
    text-align: center; }

#contact {
  padding: 100px 0;
  margin-top: 300px;
  position: relative;
  width: 100%;
  text-align: center; }
  #contact h2 {
    text-align: center;
    margin-top: 100px; }

/* ------------ @MEDIA QUERIES -------------- */
@media (max-width: 599px) {
  header {
    height: 60px; }

  #work-content {
    margin-top: 70px; }
    #work-content .screen {
      text-align: center;
      margin: 20px 0 0 0; }
      #work-content .screen img {
        margin: 0 0 10px 0; } }
@media (min-width: 600px) {
  h1 {
    font-size: 32px;
    margin-bottom: 0;
    font-weight: 100; }

  h2 {
    font-size: 42px;
    margin: 0 auto 20px auto;
    font-weight: 100; }

  h3 {
    font-size: 16px;
    margin: 20px 0 30px 0;
    font-weight: 700;
    color: #0e2d4c;
    text-transform: uppercase; }

  h4 {
    font-size: 16px;
    margin: 20px 0 0 0;
    font-weight: 900; }

  header {
    height: 76px; }

  #index {
    background: #318bc5;
    background-image: url("../img/cl-bg.jpg");
    background-repeat: no-repeat;
    background-size: contain; }

  #work-content {
    margin-top: 100px; }
    #work-content .screen {
      text-align: center;
      margin: 30px 0 0 0; }
      #work-content .screen img {
        margin: 0 0 20px !important; }

  #work figure {
    display: inline-block;
    position: relative;
    padding-top: 100%;
    border: 3px solid #ffffff;
    height: auto;
    width: 100%;
    border-radius: 50%;
    -webkit-filter: grayscale(0);
    filter: grayscale(0); }
    #work figure:hover {
      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.6);
      border-color: #205487;
      -webkit-filter: grayscale(1);
      filter: grayscale(1); }

  #contact {
    padding-top: 100px;
    margin-top: 0;
    position: relative;
    width: 100%;
    height: 100vh !important;
    text-align: center; }
    #contact h2 {
      text-align: center;
      padding-top: 0; } }
@media (min-width: 900px) {
  header {
    height: 76px; }

  #work-content {
    margin-top: 100px; }
    #work-content .screen {
      text-align: center;
      margin: 30px 0 0 0; }
      #work-content .screen img {
        margin: 0 0 30px 0 !important; } }
@media (min-width: 1200px) {
  header {
    height: 76px; }

  #work-content {
    margin-top: 100px; }
    #work-content .screen {
      text-align: center;
      margin: 30px 0 0 0; }
      #work-content .screen img {
        margin: 0 0 40px 0 !important; } }
@media (min-width: 1800px) {
  header {
    height: 76px; }

  #back {
    margin: 0 0 30px 0; }

  #work-content {
    margin-top: 100px; }
    #work-content .screen {
      text-align: center;
      margin: 30px 0 0 0; }
      #work-content .screen img {
        margin: 0 0 40px 0 !important; } }

/*# sourceMappingURL=main.css.map */