/* ==========================================================================
   Base styles
   ========================================================================== */

   html,body {
    min-height:100%;
    height: 100%;
    width: 100%;
    font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
    color:#0F084B;
}

#info {display: none}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Instrument Sans', Helvetica, Arial, sans-serif; font-weight:700;
}
p,ul,li,a,span,div {font-family: 'Instrument Sans', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;}

a {color:#204FC2;}

#contact a,
.dark-bg a,
.homeSlide a {
    color: #fff;
}
#contact a:hover,
.dark-bg a:hover,
.homeSlide a:hover {
    color: #E84C01;
}

/* =Fonts (loaded via Google Fonts in <head>)
-----------------------------------------------------------------------------*/


/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: center;
   width: 100%;
   min-height: 30px;
   margin-left: 6.5%;
   *margin-left: 1.875%;*/

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span2 {
   width: 20%;
   *width: 20%;
   text-align: center;
 }

 .team1 .profile_img {background:url(../images/team_erik_o.jpg) no-repeat;}
 

.row-fluid-5 .span2 .profile_img {
    display:block;
    border:0;
    width:100%;
    height:166px;   
    background-position: top center; 
 }

.row-fluid-5 .span2 .profile_img .m-over {
  opacity:1;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.row-fluid-5 .span2 .profile_img .m-over:hover {
  opacity:0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
 
.row-fluid-5 .span2 .a-name {
  /*font-size:18px;
  font-family: 'Instrument Sans';
  margin:10px 0 0;*/
}
.row-fluid-5 .span2 .a-title {
  font-size:1em;
  margin-top:5px;
  margin-bottom: 12px;
}

@media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }
 }


::-moz-selection {
    background: #a8bef5;
    text-shadow: none;
}

::selection {
    background: #a8bef5;
    text-shadow: none;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #0F084B;
    padding: 0.2em 0;
}

.no-js {
    padding-top: 106px;
}
section {
    /*opacity: 0;*/
    min-height:100%;
    height: auto;
}

.loaded section,
.no-js section {
    opacity: 1;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}
main {
    overflow-x: hidden;
}

/* ==========================================================================
   Body
   ========================================================================== */

.navbar-nav a {font-size: 1.14em; font-weight: 600;}
.navbar-inverse {
  border-color: rgba(0, 0, 0, 0);
  background-color: #fff;
}
.navbar-inverse .navbar-toggle .icon-bar {background-color: #0F084B;}
.navbar-inverse .navbar-toggle {border-color: #0F084B;}
.navbar-inverse .navbar-collapse {background-color: #fff;}
.navbar-inverse .navbar-nav>li>a {color:#0F084B;}
.navbar-inverse .navbar-nav>li>a:hover {color:#E84C01;}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
    background-color: rgba(0, 0, 0, 0);
    color:#E84C01;
}

.btn-default {
    color:#fff;
    background-color:#E84C01;
    font-family: 'Instrument Sans';
    border:none;
    border-radius:10px;
}

.btn-cobalt {
    color:#fff;
    background-color:#204FC2;
    font-family: 'Instrument Sans';
    border:none;
    border-radius:10px;
}
.btn-cobalt:hover, .btn-cobalt:focus {
    color:#fff;
    background-color:#1a3fa0;
}

.a-wrapper {
  position:relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateZ(0);
}

.a-bg {
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-size: cover !important;
  background-position: top center;
}

.xs-text-center {text-align:center;}
.blue {color:#fff;}
.light {color:#fff;}
.grey-base {background-color: #ededed}
.dark-bg {background-color:#0F084B;}

.navbar-brand img {width:120px;height:auto;margin:0 0 10px;}
#brandlogo img {
  width:90%;
  max-width:810px;
  height: auto;
}

.inner {
  display: table;
  table-layout: fixed;
  height: 100%;
  width:100%;
  padding: 0; /*20px;*/
  position: relative;
  z-index: 0;
}
.inner .container {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
#slide-2 .inner > .container > .row{padding-top: 100px;} 
#slide-4 .inner > .container > .row{padding-top: 100px;}  
#slide-3 .inner .container {vertical-align: middle;}
.homeSlide .container {
  text-align: center;
  padding: 0;
}
#home.homeSlide .container {
  text-align: left;
}
.homeSlide .container .row {padding-left:20px;padding-right: 20px}
.pad-section > .inner > .container {
    padding:50px 25px;
}

#slide-2 .a-bg {background-image: url(../images/section1_mobile.jpg)}
#slide-3 .a-bg {background-image: url(../images/section2_mobile.jpg)}
#slide-4 .a-bg {background-image: url(../images/section3_mobile.jpg)}
#people .a-bg {background-image: url(../images/team_mobile.jpg)}

#home div.hidden {opacity: 0}

/* HERO TEXT
   ========================================================================== */
.hero-content {
    text-align: left;
    padding: 120px 0 60px;
    margin-left: 6%;
}
.hero-headline {
    font-size: 6em;
    font-weight: 700;
    color: #0F084B;
    line-height: 1.0;
    margin: 0 0 0.25em;
}
.hero-sub {
    font-size: 2em;
    font-weight: 600;
    color: #0F084B;
    margin: 0 0 0.5em;
    line-height: 1.2;
}
.hero-body {
    font-size: 1.25em;
    color: #0F084B;
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

/* ABOUT / THE PROBLEM
   ========================================================================== */
#about .container {padding:100px 20px;text-align: center}
#about img {margin:0 0 25px 0; width: 100%; max-width: 650px; height: auto}

/* STRATEGY
   ========================================================================== */
#strategy_aspects {
    margin:0;
    width:100%;
    text-align: right;
    position: relative;
    z-index: 999 ;
    
}
#strategy_aspects > ul > li {      
    font-size: 0.875em;
    padding: 0 1px;
    cursor:pointer;
}

#strategy_aspects li > img {
    width:30px;
    height: auto
}

#stratmodel {
    display:block;
    clear:both;
    width:100%;
    position:relative;
    height:auto;
}
#stratmodel img {
    width:95%; 
    height:auto; 
    margin:0 auto;
}
.model_loop {
    position:absolute;
    z-index:400;
    width: 95%;
}
#strat-labels img { 
    width:100%; 
    opacity: 1;
    margin-left: -20px;
}

#model-quote {
  margin-top:20px;
  margin-bottom:50px;
  padding:20px;
  border-top:1px solid #0F084B;
  border-bottom: 1px solid #0F084B;
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  font-style: italic;
}

/* THE TEAM
   ========================================================================== */
#people a{
    color:#0F084B;
    text-decoration: none;
}
.a-info .fa {margin: 0 8px; font-size:30px;}

/* CONTACT
   ========================================================================== */
#contact {color:#fff;}
.contact-logo {width:160px;height:auto;margin:10px 0 20px;}
#contact .lead {text-transform: uppercase;}
#map {
  width: 100%;
  height: 400px;
}

/* QUOTE BLOCKS
   ========================================================================== */
#quote1 .content-col, #quote3 .content-col {background-color: #E84C01;}
.float-block {
    color: #FFFFFF;
    position: relative;
    z-index:800;
    opacity: 1;
    width: 100%;  

}
#quote1,#quote2, #quote3 {
    position: absolute;
    bottom:0;
    right:0;
    margin:0;
}
.content-col {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  text-align: center;
  width:100%;
  padding: 24px 20px;
  background-color: #0F084B;
  border-radius: 10px;
}
.v-gutter {
    display:block; 
    height:40%;
}
.quote-artist {
  font-style: italic;
}

/* ==========================================================================
   VIDEO STYLES
   ========================================================================== */
.video-section {

  background: url(../images/hero.jpg) no-repeat center center fixed; 
  position: relative;
  width: 100% !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.video-section:nth-of-type(1) {
  
  /*min-height: 700px;*/
  height: 100%;
}

.video-section .pattern-overlay {
/*background-color: rgba(71, 71, 71, 0.59);*/
  padding: 32px 0 32px;
  min-height: 496px; 
  position:relative;  
/* Incase of overlay problems just increase the min-height*/
}
.pattern-overlay {z-index:10 !important;}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}


/* Social Links
---------------------------------- */
.social-links {
  padding: 0;
  list-style: none;
  margin: 10px 0 0;
}
.social-links li {
  margin: 0 25px 0 0;
  display: inline-block;
  font-size: 36px;
}
.social-links li a {
  font-size:36px;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.social-links li.twitter a:hover {
  color: #55acee;
}
.social-links li.linkedin a:hover {
  color: #0976b4;
}
.social-links li.instagram a:hover {
  color: #dd4b39;
}
.social-links li.facebook a:hover {
  color: #3e6c93;
}
.social-links li.threads a:hover {
    color: #ba0383;
  }

#down-arrow {
  z-index:999;
  font-size: 72px;
  color:#fff;
  position:absolute;
  width:10%;
  left:45%;
  bottom:40px;
  display: none;
}


.footer a {color:#fff; text-decoration: none; font-size:11px;}

hr {border-bottom:10px solid #0F084B;width:60px;}

#m-slideshow { 
    display: none;    
    position: absolute;
    top:0;
    bottom:0; 
    width: 100%; 
    height:auto;
    margin:0;
    z-index:2;

}

#m-slideshow > span { 
    
    display: block;
   
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%; height:auto;
    background-size: cover !important;
    background-position: top center;
}


#m-slideshow #s1 {background-image: url(../images/stills/1.jpg);}
#m-slideshow #s2 {background-image: url(../images/stills/2.jpg);}
#m-slideshow #s3 {background-image: url(../images/stills/3.jpg);}
#m-slideshow #s4 {background-image: url(../images/stills/4.jpg);}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    html, body {
        font-size: 12px;
        line-height: 1.42em;
    }
    #brandlogo {margin-top:-50px;}
    h1 {
        font-size: 1.6em;
        letter-spacing: 1px;  
        line-height: 1.25;  
        margin:0 0 0.875em 0;
    }
    h2 {font-size:12px;}
    .homeSlide h1 {margin-bottom:0;}
    .homeSlide h1:last-of-type {margin-bottom:0.75em;}
    #slide-2 h1 {font-size:1.48em;}

    h4 {
        font-size: 1.285em;
        margin: 1.05em 0 0;
    }
    h4.modeltitle {
         margin: 1.05em 0  ;
    }
    p {
        font-size:1em;
        font-weight: 300;
    }
    .content-col {
        font-size:1em;
    }
    #slide-4 .light {color:#0F084B;}
    #model-quote {
        font-size:1.14em;
    }
    #strategy .serviceslist ul {
        margin:0;
    }
    .serviceslist {        
        margin:1.42em 0.2em;
    }
    .core-services {padding:0;}
    .sub-services > li {
        font-size: 0.875em; 
        margin:0.4em 0;
    }
    .sub-services > li:first-child {
        margin-top:-0.875em;
    }
    .quote-artist {
        font-size:0.7em;
    }
    #down-arrow {
        bottom:100px;
    }
    

    .footer {position:absolute; bottom:20px;right:20px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

    h1, #slide-2 h1  {
        font-size: 2.25em;
        line-height: 1.125;
        margin-bottom:0.5em;
    }
    
    h2 {font-size:21px;}
    #slide-2 .inner > .container > .row{padding-top: 150px;} 
    #slide-4 .a-bg  {
        background-position: top 40%;
    }
    #slide-4 .light {color:#fff;}
    #slide-4 .a-bg {background-image: url(../images/section3.jpg)}

    .float-block {
        opacity: 1;
        width: 100%;
        display:table;
        position: relative;
        margin-top:100px;
        
    }
    #slide-4 .text-hright {
        padding-bottom:40px;
    }
    .v-gutter{
        display:none;
    } 
    .content-col {
        width:100%;
        padding: 24px 32px;
    }
    /*   
    .content-col {
        width:310px;
    }
    .content-col.wide{
        width:342px;
    }
    .content-col.sp-wide{
        width:392px;
    }*/
    #quote3 {
        position: absolute;
        bottom:0;
        right:0;
        margin:0;
    }
    .strategy_aspects{      
        padding:10px 10px 2px 10px;
    }
    .quote-artist {
        font-size:0.7em;
    }

    #strategy_aspects {
        padding:14px;
    }
    .core-services {padding:0 10px;}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    html, body {
        font-size: 12px;
        line-height: 1.42em;
    }
    h2 {
        font-size:24px;
    }
    h4 {
        font-size:1.28em;
    }
    p {
        font-size:1.28em;
    }
    .content-col {
        font-size:1em;
    }
    body, html {
        height: auto;
    }
    #slide-2 h1 {margin-bottom: 25px}

    #brandlogo {margin-top:0;}
    /* NAVIGATION */
    ul.nav {
        margin-top:22px;
        margin-right:0;
    }
    .fixed-header-on ul.nav {
        margin-top:14px;
        margin-right:0;
    }
    .navbar{
        background-color: #fff;
    }
    .fixed-header-on .navbar{
        background-color: #fff;
        padding: 5px 0;
    }

    .navbar-brand img {
        opacity: 1;
        width:160px;
        margin:0 10px !important;
    }
    .a-bg {
        background-size: cover !important;
        background-position:50% center;
    }    
    .inner > .container { 
        vertical-align: middle;
    }
    .video-section {background: url(../images/hero.jpg) no-repeat center center fixed; }
    .pad-section > .inner > .container {
        padding: 150px 50px;
    }
    .pad-section {
        height:100%;
        position: relative;
    }

    #slide-2 .a-bg {background-image: url(../images/section1.jpg)}
    #slide-3 .a-bg {background-image: url(../images/section2.jpg)}
    #slide-4 .a-bg {background-image: url(../images/section3.jpg)}
    #people .a-bg {background-image: url(../images/team.jpg)}

    #slide-2 .inner > .container > .row{padding-top: 100px;} 
    #slide-4 .light {color:#fff;}

    #slide-4 .a-bg  {
        background-position: 35% center;
    }

    #about img {
        margin-bottom:10px;
    }
    #contact.pad-section.pad-section > .inner > .container {
        padding:100px 0 40px;
    }
    .btn-default {
        color:#fff;
        background-color:#E84C01;
        font-size:1.28em;
        padding:0.6em 2em;
    }
    .btn-cobalt {
        font-size:1.28em;
        padding:0.6em 2em;
    }
    .float-block {
        
        width: auto;
        display:table;
        position: absolute;
        margin-top:100px;
    }
    #quote1.float-block {bottom:5%;right:2%;}
    #quote2.float-block {bottom:8%;right:2%;}
    #quote3.float-block {bottom:8%;right:2%;}

    .content-col {width:268px;}
    .content-col.wide{width:302px;}
    .content-col.sp-wide{width:366px;}

    .quote-artist {
        font-size:0.7em;
    }
    .md-text-left {
        text-align: left;
    }

    #stratmodel {
        width:86%;
    }
    #stratmodel img, .model_loop {
        width:95%;
    }
    #strategy_aspects {
        position:absolute;
        left:75%;
        bottom:2%;
        width:auto !important;
        padding:20px;
        z-index:800;      
        padding:10px 10px 2px 10px;
        text-align: left;
    }
    #strategy_aspects > ul {
        padding:0;
        margin: 0;
    }
    #strategy_aspects > ul > li {         
        padding: 4px 0;
        display: block;
    }
    #strategy_aspects li > img {
        width:54px;
        height: auto;
    }
    #model-quote {
        font-size:1.28em;
    }
    .serviceslist {
        margin:20px 0 0;
    }
    .core-services, .core-services > li {
        font-size: 16px;  
       
    }
    .sub-services > li {
        font-size: 0.875em; 
        margin:0.6em 0;
    }
    .sub-services > li:first-child {
        margin-top:-0.875em;
    }
    .addition-services {
        margin-top:40px;
    }
    .profile_img img {width:100%;}
    .row-fluid-5 .span2 .profile_img {
        height:auto;
       /* background-image: none;*/
    }
    .row-fluid-5 .span2 .profile_img .m-over:hover {
        /*opacity:1;*/
    }
    h4.a-name {
        margin: 0.875em 0 0;
    }
    #down-arrow {
        bottom:20px;
    }
    .footer {position:absolute; bottom:20px;right:30px;}
    .footer a {font-size:14px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    body {
        font-size:14px;
        line-height:1.71em;
    }
    h2 {
        font-size:30px;
    }
    h1  {
        font-size: 2.8em;
        /* 3x body copy size = 48px */
        line-height: 1.2;
        margin-bottom:0.5em;
        /* keep to a multiple of the 20px line height 
        and something more appropriate for display headings */
    }
    #slide-2 h1  {
        font-size: 2.8em;
        /* 3x body copy size = 48px */
        line-height: 1.2;
        margin-bottom:0 !important;
    }
     
    .homeSlide h1:last-of-type {
        margin-bottom:25px !important;
    }
    h4 {
        font-size:1.28em;
        margin: 1.05em 0 0;
    }
    p {
        font-size:1.28em;
        margin:1.42em 0;
    }
    
    .content-col {width:268px;font-size:1em;}
    .content-col.wide{width:302px;}
    .content-col.sp-wide{width:386px;}

    .quote-artist {
        font-size:0.7em;
    }
    .profile_img img {width:100%;max-width:224px;}
    .addition-services {
        margin-top:10px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #slide-2 .a-bg {background-image: url(../images/section1.jpg)}
    #slide-2 .inner > .container > .row{padding-top: 250px;} 

    .content-col {width:268px;font-size:1.14em;}
    .content-col.wide{width:302px;}
    .content-col.sp-wide{width:436px;}
}


/* Decorative side graphics */
#about,
#strategy {
    overflow: hidden;
}
.deco-side {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.deco-right {
    right: -110px;
    top: 50%;
}
.deco-left {
    left: -110px;
    top: 10%;
}
.deco-side img {
    width: 300px;
    height: auto;
    display: block;
}
@media only screen and (max-width: 991px) {
    .deco-side {
        display: none;
    }
}

/* Launch section — white background */
#launch.pad-section {
    background-color: #fff;
}

/* What Subtrac Does section — cobalt background */
#strategy.pad-section {
    background-color: #204FC2;
}
#strategy h1 {
    color: #fff;
}
#strategy p {
    color: #fff;
}
.features-subtitle {
    color: #fff !important;
}
#strategy .feature-card h4 {
    color: #fff;
}
#strategy .feature-card p {
    color: rgba(255,255,255,0.85);
}
#strategy .feature-icon {
    border-color: rgba(255,255,255,0.7);
}
#strategy .feature-icon i {
    color: #fff;
}

/* Launch section */
.launch-globe {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-bottom: 30px;
}

/* Feature cards grid */
.features-intro {
    margin-top: 0;
    margin-bottom: 10px;
}
.features-subtitle {
    font-size: 1.1em;
    margin-top: 10px;
    color: #0F084B;
}
.features-grid {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}
.features-grid > [class*="col-"] {
    float: none;
}
.feature-card {
    padding: 30px 20px 20px;
    margin-bottom: 30px;
}
.feature-icon {
    width: 76px;
    height: 76px;
    border: 2px solid #0F084B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.feature-icon i {
    font-size: 28px;
    color: #0F084B;
}
.feature-card h4 {
    color: #0F084B;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1em;
}
.feature-card p {
    color: #0F084B;
    font-size: 0.95em;
    line-height: 1.5;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

/* Founders split layout */
.founders-section {
    overflow: hidden;
}
.founders-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 600px;
}
.founders-text {
    flex: 1 1 50%;
    padding: 80px 60px;
    background-color: #fff;
    color: #0F084B;
    box-sizing: border-box;
}
.founders-text h1 {
    color: #0F084B;
}
.founders-photo {
    flex: 1 1 50%;
    overflow: hidden;
    padding: 0;
}
.founders-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media only screen and (max-width: 767px) {
    .founders-row {
        flex-direction: column;
    }
    .founders-text {
        padding: 50px 30px;
        flex: none;
    }
    .founders-photo {
        flex: none;
        min-height: 300px;
    }
}

.modal-header .close {
    margin-top:-25px;
}