/* Copyright 2015 Arun Vasudeva. All rights reserved. */
/* !FOCUSED IMAGES */
/*-----------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800,600);
@import url("https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800");
.focuspoint {
  position: relative;
  /*Any position but static should work*/
  overflow: hidden;
}

.focuspoint img {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: block;
  /* fill and maintain aspect ratio */
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-height: none;
  max-width: none;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*
.mainbody.homepage
  .main_section #section_xx
    .container
      .row (.vert-centre)
        .col_xx
          h2.centre "Header"  Muli 36px/42px  400
          p subheading        Muli 24px/1.48  300

.mainbody
  .container
    .row
      .col_xx .project-title
        h1 "Project Name"
        h2.small "Client"
        p.lead "strapline"
      .col_xx
        h4 "The challenge"
        p body
        ul
          li
        p.callout "callout"
*/
h1 {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 48px;
  margin-top: 22px;
  margin-bottom: 22px;
}
h1 b {
  font-weight: 600;
}
h1.light {
  font-weight: 300;
}

h2 {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  margin-top: 18px;
  margin-bottom: 34px;
}
h2 b {
  font-weight: 600;
}
h2.light {
  font-weight: 300;
}

h3 {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  margin-top: 14px;
  margin-bottom: 14px;
}
h3 b {
  font-weight: 600;
}
h3.light {
  font-weight: 300;
}

h4 {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  margin-top: 12px;
  margin-bottom: 12px;
}
h4 b {
  font-weight: 600;
}
h4.light {
  font-weight: 300;
}

p, li {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  margin-top: 10px;
  margin-bottom: 10px;
}
p.light, li.light {
  font-weight: 300;
}
p.small, li.small {
  font-size: 14px;
}
p b, li b {
  font-weight: 600;
}

.off-screen {
  position: absolute;
  width: 100%;
  opacity: 0;
}

.centre {
  text-align: center;
}

.arrow-after:after {
  content: url(../img/arrow.svg);
  padding-left: 10px;
}

@media (max-width: 767px) {
  h1 {
    font-size: 36px;
    line-height: 42px;
  }

  h2 {
    font-size: 28px;
    line-height: 34px;
  }

  h3 {
    font-size: 24px;
    line-height: 30px;
  }

  h4 {
    font-size: 20px;
    line-height: 26px;
  }

  p, li {
    font-size: 16px;
    line-height: 20px;
  }
}
.vert-centre {
  min-height: 750px;
  position: relative;
}
.vert-centre > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  .vert-centre {
    min-height: 900px;
  }
}
.muted {
  opacity: 0.7;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

body {
  position: relative;
}
body a {
  color: #337ab7;
}

.mainbody {
  position: relative;
  z-index: 15;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
  background-color: #fff;
  margin-top: 62px;
}
.mainbody.homepage {
  margin-top: 0;
  background-color: #fff;
}
.mainbody p {
  margin-top: 40px;
  margin-bottom: 20px;
}
.mainbody ul {
  padding-left: 20px;
}
.mainbody li {
  margin-bottom: 10px;
}
.mainbody .challenge {
  font-style: italic;
  color: #777;
}
.mainbody .callout {
  font-style: italic;
  color: #c74d4d;
  border-left: 3px solid #c74d4d;
  padding: 20px 10px;
}

.main_section h1, .main_section h2, .main_section h3, .main_section h4, .main_section p {
  color: #424247;
}
.main_section .img-logo {
  width: 100%;
}

@media (max-width: 767px) {
  .main_section {
    border: none;
  }
  .main_section .vert-centre {
    min-height: 500px;
  }
  .main_section .vert-centre div {
    position: relative;
    top: 0px;
    transform: none;
  }
  .main_section .container .row {
    padding: 30px 10px 30px 10px;
  }
  .main_section .container .row > div {
    padding: 40px 15px;
  }
  .main_section .container .row.mydetails {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .main_section .container .row.mydetails > div {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.col-sm-7 {
  padding-left: 40px;
  padding-right: 40px;
}

.section-banner {
  background-color: #eee;
  padding-top: 60px;
  padding-bottom: 15px;
  margin-top: 60px;
  margin-bottom: 30px;
}
.section-banner img {
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.section-banner h1, .section-banner h2, .section-banner h3, .section-banner h4 {
  font-weight: 300;
  text-align: center;
}

@media (max-width: 767px) {
  .section-banner {
    padding-top: 40px;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .section-banner img {
    height: 120px;
  }
}
.mydetails {
  margin-top: 10px;
}
.mydetails .details {
  margin-top: 0px;
  margin-bottom: 0px;
}
.mydetails .details:first-child {
  margin-top: 10px;
}

#section_brands {
  padding-top: 120px;
  padding-bottom: 40px;
  background-color: #f8f8f8;
}
#section_brands .row {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 40px;
}
#section_brands .col-xs-4 {
  padding: 0;
}

@media (max-width: 767px) {
  #section_brands {
    padding-top: 40px;
    padding-bottom: 20px;
    background-color: #f8f8f8;
    padding: 5px 0px;
  }
  #section_brands .row {
    padding: 0px 10px 0px 10px;
  }
  #section_brands .row:first-child {
    padding-top: 30px;
  }
}
#section_experiences {
  background-image: linear-gradient(123deg, #22046E, #B75B81);
}
#section_experiences h1, #section_experiences h2, #section_experiences h3, #section_experiences h4, #section_experiences p {
  color: white;
}
#section_experiences img.img-fg {
  display: block;
  max-height: 600px;
  width: 60%;
  margin-left: 20%;
}

@media (min-width: 992px) {
  #section_experiences img.img-fg {
    max-height: 700px;
  }
}
@media (max-width: 767px) {
  #section_experiences img.img-fg {
    width: 50%;
    margin-left: 25%;
    margin-top: 0px;
    max-height: none;
  }
}
#section_engagement {
  background-image: linear-gradient(153deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55)), url(../img/analytics.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#section_engagement img.img-fg {
  width: 100%;
}

#section_design {
  background-image: linear-gradient(123deg, #002092, #1ab9c8);
}
#section_design .container {
  background-image: url(../img/sketches-inverse.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#section_design h1, #section_design h2, #section_design h3, #section_design h4, #section_design p {
  color: white;
}
#section_design img.img-fg {
  width: 100%;
}

@media (max-width: 767px) {
  #section_design .container {
    background-image: linear-gradient(163deg, rgba(0, 32, 146, 0), rgba(11, 100, 170, 0.6) 50%), url(../img/sketches-inverse.png);
  }
}
#section_leadership {
  background-image: linear-gradient(153deg, rgba(39, 95, 144, 0.1), rgba(39, 95, 144, 0.25)), url(../img/arun-mex-video.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#section_leadership h2 {
  margin-top: 200px;
}

@media (max-width: 767px) {
  #section_leadership h2 {
    margin-top: 150px;
  }
  #section_leadership .centre {
    text-align: left !important;
  }
}
#section_work {
  margin-top: 120px;
}
#section_work p.lead {
  margin-top: 60px;
  margin-bottom: 100px;
}
#section_work h3 {
  margin-top: 60px;
  margin-bottom: 60px;
}
#section_work a:hover {
  text-decoration: none;
}
#section_work .work-item {
  padding: 80px 0;
}
#section_work .work-item h2, #section_work .work-item p {
  color: white;
}
#section_work .work-item h2 {
  margin-bottom: 18px;
}
#section_work .work-item p {
  opacity: 0.7;
}
#section_work .work-item .img-work-item {
  padding: 20px 20px 20px 0;
}

@media (min-width: 768px) {
  .work-item-label {
    min-height: 220px;
    position: relative;
  }
  .work-item-label div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .img-work-item {
    max-height: 220px;
  }
}
@media (max-width: 767px) {
  #section_work {
    margin-top: 00px;
  }
  #section_work p.lead {
    margin-top: 40px;
    margin-bottom: 0px;
  }

  .work-item {
    padding: 30px 0;
  }
  .work-item h2, .work-item p {
    text-align: center;
  }
  .work-item .img-work-item {
    width: 100%;
    max-height: none;
  }
}
#work_item_mml {
  background-image: linear-gradient(-45deg, #42145F 0%, #34104B 100%);
}

#work_item_nowtv {
  background-image: linear-gradient(-45deg, #223153 0%, #6e3da4 100%);
}

#work_item_atom {
  background-image: linear-gradient(135deg, #0073C4 0%, #00528E 100%);
}

#work_item_knowledgebase {
  background-image: linear-gradient(68deg, #272A69 18%, #101342 78%);
}

#section_footer {
  margin-top: 60px;
  margin-bottom: 30px;
}

.project-title {
  background-color: clear;
  padding-top: 15px;
  padding-bottom: 15px;
}
.project-title h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.project-title h2 {
  margin-top: 0px;
}
.project-title h2 .small {
  font-size: 75%;
}
.project-title p.lead {
  font-weight: 400;
  margin-bottom: 0px;
}

#mml_banner_1 {
  background-color: #FBBA20;
  color: #4A4A4A;
}

#mml_banner_2 {
  background-color: #009FAC;
  color: #fff;
}

#mml_banner_3 {
  background-color: #42145F;
  color: #FBBA20;
}

#mml_banner_4 {
  background-color: #CE3B57;
  color: #fff;
}

.scroll-container {
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  z-index: 0;
}
.scroll-container .scroll-banner {
  left: 0px;
}
.scroll-container .scroll-half,
.scroll-container .scroll-threequarters {
  top: 0px;
  height: 300px;
  position: fixed;
  width: 100%;
  z-index: 0;
}
.scroll-container .scroll-half > div,
.scroll-container .scroll-half > img,
.scroll-container .scroll-threequarters > div,
.scroll-container .scroll-threequarters > img {
  position: absolute;
  bottom: 0px;
  min-height: 300px;
  width: 100%;
  z-index: 0;
}

/* from focuspoint.css */
.focuspoint {
  position: relative;
  /*Any position but static should work*/
  overflow: hidden;
  bottom: auto !important;
}
.focuspoint img {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: block;
  /* fill and maintain aspect ratio */
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-height: none;
  max-width: none;
}

@media (max-width: 580px) {
  .scroll-container {
    height: 220px;
  }
  .scroll-container .scroll-half,
  .scroll-container .scroll-threequarters {
    height: 220px;
  }
  .scroll-container .scroll-half > div,
  .scroll-container .scroll-half > img,
  .scroll-container .scroll-threequarters > div,
  .scroll-container .scroll-threequarters > img {
    min-height: 220px;
  }

  #jumbo-banner img {
    left: -33%;
    min-width: 133%;
  }

  #jumbo-row h1 {
    margin-top: 220px;
    font-size: 40px;
  }
  #jumbo-row p {
    font-size: 17px;
  }

  #project-header .scroll-container {
    height: 180px;
  }
  #project-header .scroll-container .scroll-half,
  #project-header .scroll-container .scroll-threequarters {
    height: 180px;
  }
  #project-header .scroll-container .scroll-half > div,
  #project-header .scroll-container .scroll-half > img,
  #project-header .scroll-container .scroll-threequarters > div,
  #project-header .scroll-container .scroll-threequarters > img {
    min-height: 180px;
  }
}
@media (min-width: 992px) {
  .scroll-container {
    height: 400px;
  }
  .scroll-container .scroll-half,
  .scroll-container .scroll-threequarters {
    height: 400px;
  }
  .scroll-container .scroll-half > div,
  .scroll-container .scroll-half > img,
  .scroll-container .scroll-threequarters > div,
  .scroll-container .scroll-threequarters > img {
    min-height: 400px;
  }

  #jumbo-row h1 {
    margin-top: 275px;
    font-size: 60px;
  }
  #jumbo-row p {
    font-size: 26px;
  }
}
.navbar {
  z-index: 400;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
  min-height: 62px;
  width: 100%;
  margin-top: 0px;
  margin-bottom: -62px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 -27px 55px 0px rgba(0, 0, 0, 0.1);
}
.navbar a {
  font-size: 18px;
  font-weight: 300;
  color: #4a4949;
  transition: color 0.3s;
}
.navbar a:hover {
  color: #337ab7;
}
.navbar .active,
.navbar .active a,
.navbar .active a:hover {
  color: #337ab7;
  background-color: transparent;
}
.navbar.affix {
  background-color: white;
  position: fixed;
  top: 0;
}
.navbar.navbar-inverse {
  background-color: #222;
  border-bottom: 1px solid black;
}
.navbar.navbar-inverse a {
  color: #4a4949;
}
.navbar.navbar-inverse a:hover {
  color: #337ab7;
}
.navbar.navbar-inverse .active,
.navbar.navbar-inverse .active a,
.navbar.navbar-inverse .active a:hover {
  color: #fff;
  background-color: transparent;
}
.navbar.navbar-inverse.affix {
  background-color: #222;
}
.navbar .navbar-right {
  margin-right: 0px;
}
.navbar .navbar-collapse {
  padding-left: 0px;
  padding-right: 0px;
}
.navbar .navbar-toggle {
  float: left;
  margin-left: 5px;
  z-index: 55;
}
.navbar .navbar-nav {
  margin-top: 4px;
  float: none;
  display: inline-block;
}
.navbar .navbar-nav ul li {
  display: inline;
}
.navbar .navbar-nav li a {
  padding: 6px 15px 6px 15px;
}
.navbar .navbar-nav li a:hover {
  background-color: transparent;
}
.navbar .navbar-nav li a .long {
  display: none;
}
.navbar .navbar-nav li.disabled > a {
  color: #B3B2B2;
}
.navbar .navbar-nav li:first-child a {
  padding-left: 0px;
}
.navbar .navbar-nav li:last-child a {
  padding-right: 0px;
}
.navbar .navbar-nav li.projname a {
  -webkit-transition: color 0.5s ease-in 1s;
  transition: color 0.5s ease-in 1s;
  color: #4a4949;
  font-weight: bold;
}
.navbar.affix-top li.projname a {
  transition-delay: 0s;
  color: rgba(0, 0, 0, 0);
  visibility: hidden;
}

.project-item-large {
  text-align: left;
  margin-bottom: 20px;
  padding: 30px;
}
.project-item-large a {
  color: #424247;
  text-decoration: none;
}
.project-item-large img {
  float: left;
  margin-left: 0px;
  width: 100%;
}
.project-item-large h3 {
  text-align: left;
  margin-top: 15px;
  margin-bottom: 5px;
}
.project-item-large p {
  text-align: left;
}

@media (max-width: 767px) {
  .project-item-large {
    padding: 0 !important;
  }
  .project-item-large .row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .project-item-large h3 {
    margin-top: 0px;
    margin-bottom: 5px;
  }
  .project-item-large p {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
#pl-letscode {
  background-image: linear-gradient(123deg, #bbbcb3, #989898);
}

.project-item {
  text-align: left;
  margin-bottom: 20px;
  padding: 0;
}
.project-item a {
  color: #424247;
  text-decoration: none;
}
.project-item img {
  float: left;
  margin-left: 0px;
  width: 140px;
  height: 140px;
}
.project-item h3 {
  text-align: left;
  margin-left: 150px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.project-item p {
  text-align: left;
  margin-left: 150px;
}

@media (max-width: 767px) {
  .project-item {
    padding: 0 !important;
  }
}
/*
@media (min-width: $screen-sm-min) {

  .project-item
  {
    text-align: center;
    margin-bottom: 0px;
    min-height: 300px;

    img {
      float: none;
      margin-left: 0px;
      width: 140px;
      height: 140px;
    }
    h3 {
      margin-left: 0px;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    p {
      margin-left: 0px;
    }
  }
}
*/
footer {
  position: relative;
  z-index: 15;
}

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