gistfile1.scss

$tiny_snap: 320px;
$small_snap: 480px;
$med_snap: 769px;
$large_snap: 1000px;

$internal_width: 83%;
$max_width: 1200px;
$line_height_small: 22px;
$line_height_large: 32px;

$home_large_spacing_block: 80px;
$home_spacing_block: 35px;
$home_small_spacing_block: 15px;
$home_small_snap_spacing_block: 40px;


$small_spacing_block: 20px;
$spacing_block: 30px;
$large_spacing_block: 70px;

$line_height_work: 0;
$tiny_spacing_block: 0;

$mojo_blue: #0896aa;
$mojo_light_blue: #9fb5cc;
$mojo_vibrant_blue: #0095e2;
$mojo_red: #ed1c37;
$mojo_purple: #6500b3;
$mojo_yellow: #eda500;
$mojo_orange: #e65626;
$mojo_green: #28ba00;
$mojo_orange: #e65626;
$mojo_navy: #001b36;
$mojo_navy_two: #192f42;
$mojo_navy_three: #435c73;
$mojo_navy_four: #9fb5cc;
$mojo_mid_navy: #50697d;
$mojo_light_navy: #eef2f5;
$yellow: #FFF000;
$black: #000000;
$white: #FFF;
$grey: rgb(77, 77, 77);

$facebook_blue: #3b5998;
$twitter_blue: #00acee;

$groove_blue: #329ac4;
$tracelytics_red: #f53170;
$batchbook_blue: #013f65;
$passkey_gold: #f1cc5a;
$splashfm_blue: #141d26;
$mobee_orange: #f48b0a;
$snowcast: #00A4FF;
$swipely_blue: #008AD9;
$velocity_orange: #ee7922;
$ist_black: #222;
$savant_blue: #08428e;

%work_tiny {
  font-size: 18%;
}
%tiny {
  font-size: 25%;
}
%small {
  font-size: 18%;
}
%med, %display {
  font-size: 25%;
}
%large {
  font-size: 55%;
}
@mixin landingTitle() {
  h3 {
    @extend .altis_extrabold;
    margin: 0px auto;
    text-align: center;
    color: $mojo_navy;
    padding-bottom: $home_spacing_block;
    span {
      font-size: 60px;
      color: $mojo_green;
      @media screen and (max-width: $small_snap) {
        font-size: 100%;
      }
    }
    @media screen and (max-width: $med_snap) {
      font-size: 62%;
      padding-bottom: $home_spacing_block - 20;
    }
    @media screen and (max-width: $small_snap) {
      font-size: 62%;
      padding-bottom: $home_spacing_block - 20;
    }
  }
}

@mixin landingSectionPadding($bg) {
  text-align: center;
  @if $bg == false {
    background-color: #e5eaee;
  }@else {
    background-color: $mojo_light_navy;
  }
  padding: $home_large_spacing_block 0;
  @media screen and (max-width: $med_snap) {
    padding: $home_small_snap_spacing_block ($home_large_spacing_block - 40);
  }
  @media screen and (max-width: $small_snap) {
    padding: $home_small_snap_spacing_block ($home_large_spacing_block - 70);
  }
}
@mixin contain() {
  max-width: $max_width;
  margin: 0px auto;
}

@mixin boxWidth($the_width, $the_spacing) {
  width: $the_width - $the_spacing * 2;
}

@mixin headline($color) {
  @extend .altis_extrabold;
  color: $color;
}

@mixin blockCopy() {
  @extend %meta_serif;
  padding: 0 $home_large_spacing_block ($home_small_spacing_block + 20) $home_large_spacing_block;
  color: $mojo_mid_navy;
  font-size: 54%;
  line-height: 50px;
  text-align: center;
  @media screen and (max-width: $med_snap) {
    padding-left: $home_spacing_block;
    padding-right: $home_spacing_block;
  }
  @media screen and (max-width: $small_snap) {
    padding-left: $home_spacing_block - 10;
    padding-right: $home_spacing_block - 10;
    font-size: 34%;
    line-height: 36px;
  }
}

@mixin columnCopy($col_type) {
  .col {
    @if $col_type == "half" {
      width: 42%;
      margin-right: 11%;
      &.last {
        margin-right: 0;
      }
    }
    @if $col_type == "third" {
      width: 28%;
      margin-right: 2%;
    }
    float: left;
    margin-top: 20px;
    &.first {
      margin-left: 2%;
      @media screen and (max-width: $med_snap), screen and (max-width: $small_snap) {
        margin-left: 0;
      }
    }
    h3 {
      @extend .altis_extrabold;
      font-size: 36%;
      margin-bottom: 15px;
      color: $mojo_green;
      text-align: left;
      padding-bottom: 0;
      @include centerAtSmall();
    }
    p, li {
      @extend %meta_serif;
      color: $mojo_mid_navy;
      font-size: 28%;
      padding: 0;
      text-align: left;
      line-height: 28px;
      .orange {
        color: $mojo_orange;
      }
      a {
        color: $mojo_navy;
        &:hover {
          color: $mojo_mid_navy;
        }
      }
      &.full_text {
        @media screen and (max-width: $med_snap), screen and (max-width: $small_snap) {
          display: none;
        }
      }
      &.small_snap {
        display: none;
        @media screen and (max-width: $med_snap) {
          text-align: left;
          display: block;
        }
        @media screen and (max-width: $small_snap) {
          display: block;
          text-align: center;
        }
      }
      @include centerAtSmall();
    }
    ul {
      margin-bottom: 10px;
      margin-top: 10px;
      margin-left: 50px;
      li {
        font-size: 24% !important;
        list-style-type: square;
      }
    }
    @media screen and (max-width: $med_snap) {
      width: 100%;
    }
    @media screen and (max-width: $small_snap) {
      text-align: center;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }
}
@mixin button(){
  @extend .altis_extrabold;
  background-color: #e65626;
  padding: 20px 28px;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  @include border-radius(4px);
  @include transition(background-color 500ms);
  &:hover {
    background-color: #f4764c;
  }
}

@mixin hideAtTiny() {
  @media screen and (max-width: $tiny_snap) {
    display: none;
  }
}

@mixin hideAtMed() {
  @media screen and (max-width: $med_snap) {
    display: none;
  }
}

@mixin hideAtSmall() {
  @media screen and (max-width: $small_snap) {
    display: none;
  }
}

@mixin centerAtMed() {
  @media screen and (max-width: $med_snap) {
    text-align: center;
  }
}

@mixin centerAtSmall() {
  @media screen and (max-width: $med_snap) {
    text-align: center;
  }
}

@mixin headerSizeSnaps(){
  @media screen and (max-width: 975px) {
    font-size: 80%;
  }
  @media screen and (max-width: $small_snap) {
    font-size: 70%;
    text-align: center;
    width: auto;
  }
}

@mixin topTitle($the_width) {
  h4 {
    @extend %small;
    text-transform: uppercase;
    white-space: nowrap;
    color: #2f2f2f;
    width: $the_width;
    margin: $spacing_block 0 $small_spacing_block 0;
    border-top: solid 2px $mojo_green;
    padding-top: 3px;
    @include headline(#2f2f2f);
    @media screen and (max-width: $small_snap) {
      margin: $small_spacing_block 0;
    }
    &.get_in_touch{
      @media screen and (max-width: $small_snap) {
        width: 150px;
        clear: both;
      }
    }
    &.our_approach {
      @media screen and (max-width: $small_snap) {
        width: 220px;
      }
    }
    &.what_makes_mojo_diff{
      @media screen and (max-width: $small_snap) {
        width: 239px;
        padding-bottom: $spacing_block;
      }
    }
    &.who_we_work_with{
      @media screen and (max-width: $small_snap) {
        width: 144px;
      }
    }
    &.want_to_join_our_team {
      @media screen and (max-width: $med_snap) {
        width: 175px;
      }
      @media screen and (max-width: $small_snap) {
        width: 175px;
        margin-top: 15px;
      }
    }
    @media screen and (max-width: $med_snap) {
      margin: 20px 0;
    }
    @media screen and (max-width: $small_snap) {
      margin: 20px auto;
    }
  }
}

@mixin processIndicator(){
  float: right;
  height: 25px;
  width: 135px;
  background-repeat: no-repeat;
}

@mixin title($the_width){
  .title {
    @include topTitle($the_width);
    &.groove {
      h4 {
        border-color: $groove_blue;
      }
    }
    &.mobee {
      h4 {
        border-color: $mobee_orange;
      }
    }
    &.snowcast {
      h4 {
        border-color: $snowcast;
      }
    }
    &.splashfm {
      h4 {
        border-color: $splashfm_blue;
      }
    }
    &.passkey {
      h4 {
        border-color: $passkey_gold;
      }
    }
    &.batchbook {
      h4 {
        border-color: $batchbook_blue;
      }
    }
    &.velocity {
      h4 {
        border-color: $velocity_orange;
      }
    }
    &.savant {
      h4 {
        border-color: $savant_blue;
      }
    }
    &.ist {
      h4 {
        border-color: $ist_black;
      }
    }
  }
}
.brand .ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}