/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/* SlimJoe */

textarea {
  min-height: 12.5rem;
  resize: none;
}

/* Proxima Nova */
@font-face {
    font-family: 'proxima-nova';
    src: url('https://use.typekit.net/iuj7ytt.css');
    font-weight: normal;
    font-style: normal;

}

/* Box Sizing */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

}

/* Logo */

.logo img {
  width: 50%;
}

/* Typography */

body {
  font-size: 16px;
  letter-spacing: .05em;
  color: #212121;
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.375rem;
}
p {
  letter-spacing: -.01rem;
}


/* Custom ultilities */
  /* Centered */

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .vertical-centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;

  }
  /* Separator */

  .separator {
    position: relative;
    margin: 2.5rem 0 1.25em 0;
    padding: 2.5rem 0 1.25em 0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: inherit;
  }
  .separator:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 5.375rem;
    height: 0.125rem;
    background-color: #212121;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .separator.blue:before {
    background-color: #014C8F;
  }


/* Button inverted */

.button.inverted {
  font-size: inherit;
  padding: 1.5625rem 4.375rem;
  color: #212121;
  height: auto;
  border: 3px solid white;
  text-transform: none;
  font-size: 1.625rem;
  font-family: "proxima-nova";
  font-weight: 700;
  background-color: #fff;
}

.button.inverted:hover {
  background: #014c8f;
  color: #fff;
}

.button.circle {
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

/*-------- GENERAL STYLING -------- */

section {
  text-align: center;
  padding: 5rem 0;
}

/*

  Section with featured background image. Every section which will have this
  class will get the effect with a background cover.

*/

.help:before {
  background: url("../images/help_bg_image.jpg");
}
.trust:before {
  background: url("../images/trust_bg_image.jpg");
  background-position: 50% 0;
}
.request:before {
  background: url("../images/request_bg_image.jpg");
}
.video-iframe{
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.video:before {
  background: url("../images/video_bg_image.jpg");
}

.featured-bg-image {
  position: relative;
  background-color: #212121;
  color: #fff;
  min-height: 60rem;
}
.featured-bg-image:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .35;
}

.clients {
  background-color: #f4f4f4;
}

.footer {
  background-color: #212121;
  color: #fff;
}


/* ---------------- */
/* NAVIGATION ----- */
/* ---------------- */

.navigation .menu-icon {
  color: white;
  font-size: 1.875rem;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 1.25rem;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.navigation .menu-icon.active {
  background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
  color: #212121;
  background-color: transparent;
}

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 31.25rem;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #212121;
}
.navigation ul li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 0.625rem 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  color: #212121;
  background-color: white;
}


/* --------              -------- */
/* -------- HERO SECTION -------- */
/* --------              -------- */

.hero {
  padding: 0 0 10% 0;
  min-height: 35rem;
  text-align: center;
  position: relative;
  background-color: #5768d2; /* layer fill content */
  color: #fff;
}
.hero-image {
  background: url("../images/hero_bg_image.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .9;
}
.hero-image:after {
  content: '';
  opacity: .87; /* layer alpha */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
  background-image: -moz-linear-gradient(right, #fff 0%, #014c8f 100%); /* gradient overlay */
  background-image: -o-linear-gradient(right, #fff 0%, #014c8f 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(right, #fff 0%, #014c8f 100%); /* gradient overlay */
  background-image: linear-gradient(right, #fff 0%, #014c8f 100%); /* gradient overlay */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h3 {
  font-size: 2.25rem;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

/*Contact*/

.contact-us {
  background-color: #fff;
  text-align: left;
}
.contact-us-details {
  padding: 4.375rem;
}
.contact-us-details h5 {
  font-size: 2rem;
}
.contact-us-details .social-links a {
  color: #212121;
  display: block;
}

.contact-us-details .social-links li {
  list-style: none;
  float: left;
  font-size: 1.5rem;
  margin-right: 0.625rem;
}
.contact-us-details .social-links li:last-child {
  margin-right: 0;
}
.contact-us-form {
  padding: 4.375rem;
  background-color: #fff;
}
.contact-us .row {
  margin: 0;
}

/* services */


/* services Filters */

.services-filters {
  list-style: none;
}
.services-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 1.75rem;
  text-transform: uppercase;
  font-family: "proxima-nova";
}
.services-filters li a {
  color: inherit;
  text-decoration: none;
}
.services-filters li.active {
  font-family: "proxima-nova";
  color: #014C8F;
  font-weight: bold;
  font-size: 2rem;
}

/* services items */

.services-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.services-items li {
  position: relative;
  overflow: hidden;
  height: 22.5rem;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 0.625rem solid white;

  position: relative;
}
.services-items li:nth-child(4n) {
  margin-left: 0;
}
.services-items li img{
  width: auto;
  height: 100%;
  display: block;
}

/* services detail */

.services-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.9);
  color: #fff;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.services-detail h3 {
  font-size: 1rem;
  letter-spacing: .05em;
  font-weight: bolder;
}
.services-detail p {
  font-size: 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-weight: 200 !important;
}

.services-items li:hover .services-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 0.625rem #212121;
}

/* Clients */
.clients {
  list-style: none;
}
.clients li {
  display: inline-block;
  width: 18%;
  margin-right: 2%;
}
.clients li:last-child {
  margin-right: 0;
}
.clients li img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-filter: greyscale(100%);
  -moz-filter: greyscale(100%);
  filter: greyscale(100%);
}

/* About */
.people-list {
  list-style: none;
  margin: 4.375rem 0;
  width: 100%;
}
.people-list li {
  position: relative;
  height: 18.75rem;
  overflow: hidden;
}
.people-list li img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: fill;
}

.people-list .people-hover {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);

  opacity: 0;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.people-list .people-hover a {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  color: white;
}

/* About people details */

.people-list .people-detail {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0 1.25rem;
  z-index: 1;
  color: white;
}
.people-list .people-detail h3 {
  font-size: 1.375rem;
  margin-bottom: 0;
}
.people-list .people-detail p {
  font-size: 1rem;
}

/* Feature people hiring */

.people-list li.blank-feature{
  box-shadow: inset 0 0 0 0.1875rem #212121;
}
.people-list li.blank-feature img {
  visibility: hidden;
}
.people-list li.blank-feature h3 {
  font-size: 1.625rem;
}


.people-list li:hover .people-hover{
  opacity: 1;
  box-shadow: inset 0 0 0 0.3125rem #212121;
}


/* Services */
.services {
  list-style: none;
  margin: 4.375rem 0;
}
.services .service-image {
  padding: 0 0 1rem 0 !important;
  margin: 0 0 1rem 0 !important;
  border-radius: 0.3125rem;
  border-color: #033c66;
}
.services .service-image img {
  display: table-cell;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.services h5 {

}
.services p {
  font-size: 1.25rem;
  letter-spacing: 0;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons secion and style it
there.
*/


/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 0.9375rem;
  }
  .clients .u-full-width li {
    display: inline;
  }

  .logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 75rem;
  }
  .hero h1 {
    font-size: 3rem;
    padding: 5rem 0 1rem 0;
  }
  .hero h3 {
    font-size: 1.75rem;
  }

}

@media (min-width: 400px)  and (max-width: 750px) {
  .services-items li.isotope-item.columns {
    width: 100%;
    object-fit: cover;
  }

  .people-list li.people-list-item.columns {
    width: 46%;
    margin: 2%;
    box-sizing: content-box;
  }
  .contact-us-details {
    padding: 4.375rem 1.5625rem;
    text-align: center;
  }
  .contact-us-details .social-links li {
    text-align: center;
    width: 33%;
    margin: 0;
  }
  .contact-us-details h5 {
    font-size: 1.7rem;
  }

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) and (max-width: 750px) {

  .services-items li.isotope-item.columns {
    width: 50%;
    object-fit: cover;
  }

}

/* Larger than tablet */
@media (min-width: 750px) { }

/* Larger than desktop */
@media (min-width: 1000px) { }

/* Larger than Desktop HD */
@media (min-width: 1200px) { }