@colour-text-darkgrey: #4c4c4c;
@colour-text-lightgrey: #a9a9a9;
@colour-blue: #4ec0e3;
@colour-darkblue: #36a0ce;

/* Base */

@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-Light.otf) format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-Regular.otf) format("opentype");
  font-weight: bold;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: 15px;
  color: @colour-text-lightgrey;
  line-height: 1.6;
}

a {
  color: @colour-text-lightgrey;
  text-decoration: underline;
}

a:hover {
  color: #fff;
  background-color: @colour-darkblue;
  text-decoration: none;
}

h1 {
  font-size: 22px;
  font-weight: normal;
  color: @colour-text-darkgrey;
  text-transform: uppercase;
}

h1.light {
  color: #ffffff;
}

h2, h3 {
  font-weight: normal;
  color: @colour-text-darkgrey;
}

h2 {
  font-size: 17px;
  text-transform: uppercase;
}

h3 {
  font-size: 16px;
}

p {
}

/* Navbar - colours (http://work.smarchal.com/twbscolor/index.php) */

.navbar-default {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-brand {
  color: @colour-text-lightgrey;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: @colour-darkblue;
}
.navbar-default .navbar-text {
  color: @colour-text-lightgrey;
}
.navbar-default .navbar-nav > li > a {
  color: @colour-text-lightgrey;
  font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: @colour-darkblue;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: @colour-darkblue;
  background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: @colour-darkblue;
  background-color: #ffffff;
}
.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: @colour-text-lightgrey;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: @colour-text-lightgrey;
}
.navbar-default .navbar-link {
  color: @colour-text-lightgrey;
}
.navbar-default .navbar-link:hover {
  color: @colour-darkblue;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: @colour-text-lightgrey;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: @colour-darkblue;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: @colour-darkblue;
    background-color: #ffffff;
  }
}

/* Navbar */

.navbar a {
  text-decoration: none;
}

/* Home */

.what .row {
  h1 {
    font-size: 18px;
  }

  div {
    text-align: center;
  }
}

.case-studies {
  .row {
    div {
      padding-left: 5px;
      padding-right: 5px;
    }

    div img {
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  /* Hover behaviour */
  .app-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: @colour-text-darkgrey;
    font-size: 26px;
    height: 2em;
    width: 100%;
    text-align: center;

    visibility: hidden;
    opacity: 0;
  }

  .app-link:hover .app-text {
    visibility: visible;
    opacity: 1;
  }

  .app-link:hover img {
    opacity: 0.3;
  }
}

.testimonials div {
  .row div {
    margin-top: 60px;
  }

  .quote {
    padding: 10px 15px; 
    background-color: #dbf2f9; 
  }

  .quote.left {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    border-bottom-left-radius: 0px;
  }

  .quote.right {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 22px;
  }

  .by-line {
    color: #fff;
    margin-left: 15px;

    a {
      color: #fff;
      text-decoration: underline;
    }
  }

  .by-line.right {
    text-align: right;
    margin-right: 15px;
  }
}

.specialties {
  .row {
    h1 {
      font-size: 18px;
      margin-top: 0px;
    }

    div {
      margin-bottom: 40px;
    }
  }

  img {
    margin-right: 15px;
  }
}

.call-to-action {
  a.get-in-touch {
    padding: 15px 65px;
    height: 50px;
    border-radius: 25px;
    color: @colour-darkblue;
    background-color: #fff;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
  }

  a.get-in-touch:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.9);
  }
}

/* Contact */

.contact {
  input {
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 0px;
  }

  textarea {
    margin-top: 10px;
  }

  table {
    margin-bottom: 15px;
  }

  button {
    margin-top: 15px;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    color: #fff;
    background-color: @colour-blue;
    border-color: transparent;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
  }

  button:hover {
    text-decoration: none;
    // background-color: rgba(255, 255, 255, 0.9);
  }
}

/* Case studies */

.case-study {
  .overview {
    h2 {
      font-size: 15px;
      margin-top: 0px;
    }

    p {
      font-size: 14px;
    }
  }

  .content {
    h2 {
      margin-top: 60px;
      margin-bottom: 20px;
    }

    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
    } 
  }
}

/* App support */
.app-support {
  h1 {
    margin-top: 0px;
  }
}

/* About */
.about {
  h1 {
    margin-top: 0px;
  }

  .me {
    text-align: center;
    font-size: 14px;
  }
}