/******************************************************************
Site Name: Sam Media Corporate Site
Author: Irvine Acosta

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline; }

html {
  /*font-size: 62.5%;  Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
  overflow-y: scroll;
  /* Keeps page centered in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ }

*,
*:before,
*:after {
  /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: border-box;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: border-box;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box; }

body {
  background: #fff;
  height: 100%; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block; }

ol, ul {
  list-style: none; }

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  font-weight: normal;
  text-align: left; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

a:focus {
  outline: thin dotted; }

a:hover,
a:active {
  outline: 0; }

a img {
  border: 0; }

/******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/** COLORS **/
/** FONTS **/
/******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/* Float Clearing */
/* Border Radius */
/* Single side border-radius */
/** Opacity **/
/** Absolute Position **/
/** Reset (for nested lists) **/
/** Font Size **/
/** Line Height **/
/** SVG BG with fallback **/
/* Transition */
/* Box Shadow */
/* full bleed*/
/* text overflow... */
/* vertical-align */
/******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Animate

Animation keyframes and classes.

******************************************************************/
/******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Forms

Form elements like input fields and buttons

******************************************************************/
.button {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  min-width: 240px;
  text-align: center;
  background: #efb00b;
  color: #fff;
  font-weight: 700;
  font-size: 1.1em !important;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
  -webkit-box-shadow: 0 2px 0 #c99308;
  -moz-box-shadow: 0 2px 0 #c99308;
  box-shadow: 0 2px 0 #c99308; }

.button:hover {
  background: #c99308;
  cursor: pointer;
  color: #fff; }

/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
html, body {
  background: #ffffff;
  color: #666666;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center; }

/* FOR TESTING */
/*
.wrap { border:1px dashed red; }
.contents { border:1px dashed #0096ff; }
h1 { background: rgba(255, 0, 0, 0.2); }
p { background: rgba(255, 217, 0, 0.2); }
section { border: 1px dotted orange;}





/* Text */
a {
  color: #efb00b;
  text-decoration: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.5s; }

a:hover {
  color: #c99308; }

h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  margin-bottom: -5px; }

h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #efb00b;
  text-transform: uppercase;
  margin: 10px 0;
  font-size: 1.2em; }

p {
  margin-top: 15px; }

.tablet-up {
  display: none; }

/* Reusable Sections */
.wrap {
  min-width: 280px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
  box-sizing: border-box; }

/* Intro & Platform */
#intro {
  background: #121212 url("../img/bg-black-smart.jpg") top right no-repeat;
  color: #fff; }
  #intro .wrap {
    padding-top: 60px;
    padding-bottom: 140px; }
  #intro h4 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase; }
  #intro h3.logo {
    font-size: 0;
    width: auto;
    height:120px;
    background-image: url("../img/mainLogo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 20px auto; 
  }
  /*email signature*/
  #logoBlack img{
    width: 180px;
    height: 120px;
    margin: 20px auto; 
    display: none;
  }
  #emailIcon img{
    width: 20px;
    height: 20px;
    display: none;
  }
  #mobileIcon img{
    width: 20px;
    height: 20px;
    display: none;
  }
  #telIcon img{
    width: 20px;
    height: 21px;
    display: none;
  }
  #webIcon img{
    width: 20px;
    height: 20px;
    display: none;
  }
  #skypeIcon img{
    width: 20px;
    height: 20px;
    display: none;
  }
  /*email signature*/
  #intro .platform-list:before,
  #intro .platform-list:after {
    content: "";
    display: table; }
  #intro .platform-list:after {
    clear: both; }
  #intro .platform-list .line {
    display: none; }
  #intro .platform-list ul {
    margin-top: 40px;
    box-sizing: border-box; }
    #intro .platform-list ul li {
      margin-top: 10px; }

#products .wrap {
  position: relative;
  padding-top: 160px;
  padding-bottom: 40px; }

#products .devices {
  width: 386px;
  height: 258px;
  background: url("../img/products-smart.png") 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -100px;
  left: 50%;
  margin-left: -150px; }

#products .categories {
  text-align: center; }
  #products .categories ol {
    margin-top: 30px; }
    #products .categories ol h2 {
      color: #333333; }
    #products .categories ol li {
      margin-top: 5px; }
    #products .categories ol li.title {
      list-style: none;
      margin: 0; }

#publisher-advertiser {
  background-color: #fff;
  background-image: url("../img/bg-advertiser.png");
  background-image: none, url("../img/bg-advertiser.svg");
  background-position: center 20px;
  background-repeat: no-repeat;
  background-size: 280px auto;
  box-shadow: 0 0 85px 0 rgba(0, 0, 0, 0.3);
  padding: 280px 30px 50px 30px;
  border-top: 5px solid #efb00b;
  position: relative; }

#numbers {
  color: #fff;
  background: #121212;
  background: -moz-linear-gradient(-45deg, #121212 0%, #333333 100%);
  background: -webkit-linear-gradient(-45deg, #121212 0%, #333333 100%);
  background: linear-gradient(135deg, #121212 0%, #333333 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#333333',GradientType=1 );
  text-align: center; }
  #numbers .wrap {
    padding-top: 50px;
    padding-bottom: 50px; }
  #numbers ul {
    display: inline-block;
    text-align: left; }
    #numbers ul:before,
    #numbers ul:after {
      content: "";
      display: table; }
    #numbers ul:after {
      clear: both; }
    #numbers ul li {
      margin-bottom: 15px;
      position: relative;
      min-height: 60px; }
      #numbers ul li h3 {
        text-transform: uppercase;
        margin-left: 70px;
        font-weight: 600;
        font-size: .85em; }
        #numbers ul li h3 em {
          color: #efb00b;
          display: block;
          font-family: "Open Sans", sans-serif;
          font-size: 2em;
          font-weight: 700; }
        #numbers ul li h3 span {
          display: none; }
        #numbers ul li h3 br {
          display: none; }
      #numbers ul li .num-icon {
        width: 60px;
        height: 60px;
        display: block;
        font-size: 0;
        background-color: #fff;
        -webkit-border-radius: 30px;
        border-radius: 30px;
        position: absolute;
        top: 0;
        left: 0;
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat; }
      #numbers ul li .i-impression {
        background-image: url("../img/icon-impression.png");
        background-image: none, url("../img/icon-impression.svg"); }
      #numbers ul li .i-click {
        background-image: url("../img/icon-click.png");
        background-image: none, url("../img/icon-click.svg"); }
      #numbers ul li .i-country {
        background-image: url("../img/icon-country.png");
        background-image: none, url("../img/icon-country.svg"); }
      #numbers ul li .i-carrier {
        background-image: url("../img/icon-carrier.png");
        background-image: none, url("../img/icon-carrier.svg"); }
      #numbers ul li .i-people {
        background-image: url("../img/icon-people.png");
        background-image: none, url("../img/icon-people.svg"); }
      #numbers ul li .i-chat {
        background-image: url("../img/icon-chat.png");
        background-image: none, url("../img/icon-chat.svg"); }
      #numbers ul li .i-coffee {
        background-image: url("../img/icon-coffee.png");
        background-image: none, url("../img/icon-coffee.svg"); }
    #numbers ul li:last-child {
      margin-bottom: 0; }

.floater.wrap {
  padding-left: 0;
  padding-right: 0; }

#company {
  background: #fff url("../img/bg-company-smart.png") bottom center no-repeat;
  background-size: 100% auto;
  box-shadow: 0 0 85px 0 rgba(0, 0, 0, 0.3);
  padding: 30px 20px 40% 20px;
  border-bottom: 5px solid #efb00b; }
  #company .careers {
    border-top: 1px solid #ccc;
    text-indent: .3em;
    margin-top: 30px;
    padding-top: 25px; }
    #company .careers .button {
      margin-top: 20px; }
      #company .careers .button span {
        display: none; }

footer {
  padding: 30px 0 0 0; }
  footer ul.addresses {
    padding: 0 20px; }
    footer ul.addresses li {
      border-bottom: 1px solid #f3f3f3;
      position: relative;
      margin-bottom: 30px;
      padding-bottom: 30px; }
      footer ul.addresses li p {
        margin-bottom: 10px;
        margin-top: 0; }
      footer ul.addresses li h2 {
        color: #333333;
        margin-top: 0;
        margin-bottom: 10px; }
      footer ul.addresses li a {
        display: block; }
    footer ul.addresses li:last-child {
      border: 0; }

/* CAREERS PAGE */
#careers {
  text-align: left; }
  #careers ul.accordion {
    margin-top: 20px;
    border-bottom: 1px solid #ccc; }
    #careers ul.accordion li {
      border-top: 1px solid #ccc; }
      #careers ul.accordion li header {
        cursor: pointer;
        padding: 18px 30px 20px 0;
        position: relative; }
        #careers ul.accordion li header h3 {
          font-size: 1.3em;
          color: #333333;
          margin: 0 0 3px 0;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        #careers ul.accordion li header h4 {
          margin: 0;
          font-weight: 600;
          text-transform: uppercase;
          color: #efb00b; }
        #careers ul.accordion li header .toggle {
          position: absolute;
          overflow: hidden;
          font-size: 0;
          display: block;
          width: 26px;
          height: 26px;
          background: #efb00b;
          -webkit-border-radius: 13px;
          border-radius: 13px;
          right: 0;
          top: 50%;
          margin-top: -13px;
          outline: none;
          background-image: url("../img/icon-plus.png");
          background-image: none, url("../img/icon-plus.svg");
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
          -moz-transition: transform 0.2s ease-out, background-color 0.2s ease-out;
          -o-transition: transform 0.2s ease-out, background-color 0.2s ease-out;
          -webkit-transition: transform 0.2s ease-out, background-color 0.2s ease-out;
          transition: transform 0.2s ease-out, background-color 0.2s ease-out; }
      #careers ul.accordion li .panel {
        max-height: 0;
        overflow: hidden;
        -moz-transition: max-height 0.5s ease-out;
        -o-transition: max-height 0.5s ease-out;
        -webkit-transition: max-height 0.5s ease-out;
        transition: max-height 0.5s ease-out; }
      #careers ul.accordion li .description {
        padding: 20px 20px 40px 20px;
        background: #fafafa;
        border-top: 1px dotted #e4e4e4; }
        #careers ul.accordion li .description h5 {
          color: #333333;
          font-weight: 600;
          margin-top: 15px; }
        #careers ul.accordion li .description h5:first-child {
          margin-top: 0; }
        #careers ul.accordion li .description ul {
          margin: 0;
          padding: 0;
          border: 0;
          margin-top: 15px; }
          #careers ul.accordion li .description ul li {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: disc;
            list-style-position: outside;
            margin-left: 20px;
            margin-bottom: 5px; }
        #careers ul.accordion li .description p em {
          font-weight: 600; }
    #careers ul.accordion li.open .toggle {
      background-color: #ccc;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg); }

.career-head {
  text-align: left;
  background: #333333;
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px; }
  .career-head .wrap {
    position: relative; }
    .career-head .wrap h2 {
      color: #fff;
      padding-left: 60px;
      margin: auto; }
      .career-head .wrap h2 em {
        color: #efb00b; }
    .career-head .wrap .back-btn {
      display: block;
      position: absolute;
      width: 40px;
      height: 40px;
      top: 10px;
      left: 20px;
      font-size: 0;
      background-image: url("../img/icon-back.png");
      background-image: none, url("../img/icon-back.svg");
      background-position: 0 center;
      background-repeat: no-repeat;
      background-size: 40px auto;
      border-right: 1px solid #666; }

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 425px) {
  /******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to
481px because at 480px it would load on a landscaped iPhone.
This isn't ideal because then you would be loading all those
extra styles on that same mobile connection.

A word of warning. This size COULD be a larger mobile device,
so you still want to keep it pretty light and simply expand
upon your base.scss styles.

******************************************************************/
  /*
IMPORTANT NOTE ABOUT SASS 3.3 & UP 
You can't use @extend within media queries
anymore, so just be aware that if you drop
them in here, they won't work.
*/
  /* Intro & Platform */
  #intro .wrap {
    padding-bottom: 200px; }
  #intro .platform-list ul {
    padding-bottom: 20px; }
    #intro .platform-list ul li h2 {
      font-size: 1.1em; }
  #intro .platform-list ul.sales {
    text-align: right;
    float: left;
    width: 45%;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2); }
  #intro .platform-list ul.payment {
    text-align: left;
    float: right;
    width: 55%;
    padding-left: 20px; }
  #products .wrap {
    padding-top: 200px; }
  #products .devices {
    width: 567px;
    height: 380px;
    top: -180px;
    left: 50%;
    margin-left: -210px; }
  #publisher-advertiser {
    margin-bottom: -100px; }
  #numbers .wrap {
    padding: 160px 0 260px 0; }
  .floater.wrap {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 560px; }
  #company {
    margin-top: -200px;
    padding: 30px 30px 36% 30px; }
  footer ul.addresses {
    padding: 0; } }

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  /******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
  /******************************************************************
Site Name:
Author:

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to
481px because at 480px it would load on a landscaped iPhone.
This isn't ideal because then you would be loading all those
extra styles on that same mobile connection.

A word of warning. This size COULD be a larger mobile device,
so you still want to keep it pretty light and simply expand
upon your base.scss styles.

******************************************************************/
  /*
IMPORTANT NOTE ABOUT SASS 3.3 & UP 
You can't use @extend within media queries
anymore, so just be aware that if you drop
them in here, they won't work.
*/
  /* Reusable Sections */
  html, body {
    font-size: 18px; }
  .wrap,
  .floater.wrap {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px; }
  h1 {
    font-size: 1.8em;
    margin-bottom: -5px; }
  h2 {
    font-size: 1.2em; }
  p {
    margin-top: 25px; }
  .tablet-up {
    display: block; }
  #intro {
    background-image: url("../img/bg-black-pc.jpg");
    background-size: 100% auto; }
    #intro .wrap {
      padding-top: 100px;
      padding-bottom: 360px; }
      #intro .wrap:before,
      #intro .wrap:after {
        content: "";
        display: table; }
      #intro .wrap:after {
        clear: both; }
    #intro .platform-list ul {
      white-space: nowrap; }
      #intro .platform-list ul li h2 {
        font-size: 1.2em; }
    #intro .platform-list ul.sales {
      padding-right: 30px;
      width: 50%; }
    #intro .platform-list ul.payment {
      padding-left: 30px;
      width: 50%; }
  #products {
    text-align: left; }
    #products .wrap {
      padding-top: 190px;
      padding-bottom: 60px; }
    #products .devices {
      width: 756px;
      height: 508px;
      background-image: url("../img/products-pc.png");
      top: -280px;
      left: 120px;
      margin: 0; }
    #products .categories {
      display: block; }
      #products .categories:before,
      #products .categories:after {
        content: "";
        display: table; }
      #products .categories:after {
        clear: both; }
      #products .categories ol {
        width: 33.3%;
        float: left;
        text-align: left;
        max-width: 300px; }
        #products .categories ol li {
          list-style: disc;
          list-style-position: outside;
          margin-left: 29px;
          padding-left: 6px;
          margin-top: 5px; }
        #products .categories ol li.title {
          list-style: none;
          margin: 0;
          height: 30px;
          line-height: 32px;
          position: relative;
          padding-left: 35px; }
          #products .categories ol li.title h2 {
            font-size: 1em; }
          #products .categories ol li.title .cat-icon {
            width: 30px;
            height: 30px;
            display: inline-block;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #333333;
            background-size: 100% 100%; }
          #products .categories ol li.title .i-entertainment {
            background-image: url("../img/icon-entertainment.png");
            background-image: none, url("../img/icon-entertainment.svg"); }
          #products .categories ol li.title .i-games {
            background-image: url("../img/icon-games.png");
            background-image: none, url("../img/icon-games.svg"); }
          #products .categories ol li.title .i-learning {
            background-image: url("../img/icon-learning.png");
            background-image: none, url("../img/icon-learning.svg"); }
  #publisher-advertiser {
    padding: 50px 50px 60px 30%;
    background-position: top 60px left 40px;
    background-size: 30% auto;
    text-align: left; }
    #publisher-advertiser h2 br {
      display: none; }
    #publisher-advertiser .writeup {
      padding-left: 70px; }
  #numbers .wrap {
    padding: 180px 0 280px 0; }
  #numbers ul {
    display: block;
    text-align: center; }
    #numbers ul li {
      width: 24%;
      display: inline-block; }
      #numbers ul li h3 {
        margin-left: 0; }
        #numbers ul li h3 em {
          font-size: 4em; }
        #numbers ul li h3 span {
          display: inline; }
        #numbers ul li h3 br {
          display: block; }
      #numbers ul li .num-icon {
        display: inline-block;
        position: static; }
  #company {
    background-image: url("../img/bg-company-pc.png");
    padding: 50px 50px 20% 50px;
    text-align: left; }
    #company .history {
      margin-right: 12%; }
    #company .careers {
      margin-top: 30px;
      margin-left: 32%;
      border-top: 0;
      padding-top: 0; }
      #company .careers h1 {
        font-size: 1.7em; }
      #company .careers .button {
        margin-top: 20px; }
        #company .careers .button span {
          display: inline; }
  footer {
    padding-top: 50px; }
    footer ul.addresses {
      display: flex;
      justify-content: space-between;
      text-align: left;
      font-size: .9em; }
      footer ul.addresses:before,
      footer ul.addresses:after {
        content: "";
        display: table; }
      footer ul.addresses:after {
        clear: both; }
      footer ul.addresses li {
        position: relative;
        padding-left: 40px; }
        /* footer ul.addresses li .contact {
          position: absolute;
          top: 37px;
          right: 40px;
          text-align: right; } */
  #careers {
    padding: 40px 0; }
    #careers ul.accordion {
      margin-top: 40px; }
      #careers ul.accordion li header {
        padding: 22px 0 25px 0; }
      #careers ul.accordion li .description {
        padding: 40px; }
        #careers ul.accordion li .description h5 {
          margin-top: 25px; }
        #careers ul.accordion li .description ul {
          margin-top: 25px; }
  .career-head .wrap .back-btn {
    left: 40px; } }

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1024px) {
  /******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
  /*
IMPORTANT NOTE ABOUT SASS 3.3 & UP 
You can't use @extend within media queries
anymore, so just be aware that if you drop
them in here, they won't work.
*/
  /* Reusable Sections */
  html, body {
    font-size: 20px; }
  h1 {
    font-size: 2.2em; }
  h2 {
    font-size: 1.3em; }
  .wrap,
  .floater.wrap {
    max-width: 1024px;
    padding-left: 60px;
    padding-right: 60px; }
  #intro .wrap {
    padding-bottom: 220px; }
    #intro .wrap:before,
    #intro .wrap:after {
      content: "";
      display: table; }
    #intro .wrap:after {
      clear: both; }
  #intro h3.logo {
    width: 304px;
    height: 200px; }
  #intro .platform-list {
    margin-top: 30px;
    margin-left: -40px;
    background-image: url("../img/slant-line.png");
    background-image: none, url("../img/slant-line.svg");
    background-repeat: no-repeat;
    background-position: 230px 35px;
    padding-bottom: 30px;
    display: block;
    position: relative; }
    #intro .platform-list .line {
      display: block;
      position: absolute;
      top: 35px;
      left: 230px; }
    #intro .platform-list ul {
      white-space: nowrap; }
      #intro .platform-list ul li {
        margin-top: 25px; }
    #intro .platform-list ul.sales {
      width: 220px;
      float: left;
      border: none;
      padding-right: 0; }
      #intro .platform-list ul.sales li:nth-child(1) {
        margin-right: -130px; }
      #intro .platform-list ul.sales li:nth-child(2) {
        margin-right: -92px; }
      #intro .platform-list ul.sales li:nth-child(3) {
        margin-right: -62px; }
      #intro .platform-list ul.sales li:nth-child(4) {
        margin-right: -31px; }
    #intro .platform-list ul.payment {
      width: 220px;
      float: left;
      padding-left: 0;
      margin-left: 255px; }
      #intro .platform-list ul.payment li:nth-child(2) {
        margin-left: -32px; }
      #intro .platform-list ul.payment li:nth-child(3) {
        margin-left: -66px; }
      #intro .platform-list ul.payment li:nth-child(4) {
        margin-left: -97px; }
      #intro .platform-list ul.payment li:nth-child(5) {
        margin-left: -131px; }
  #products .wrap {
    padding-top: 150px;
    padding-bottom: 90px; }
  #products h1 {
    font-size: 2em; }
  #products .devices {
    top: -280px;
    left: 370px; }
  #publisher-advertiser {
    margin-bottom: -140px;
    padding: 80px 80px 80px 30%;
    background-size: 30% auto;
    background-position: 50px 70px; }
    #publisher-advertiser .writeup {
      padding-left: 80px; }
  #numbers .wrap {
    padding: 200px 0 360px 0; }
  #numbers ul li h3 em {
    font-size: 4em; }
  #company {
    padding: 80px 80px 20% 80px;
    margin-top: -280px; }
    #company .careers h1 {
      font-size: 1.9em; }
  footer {
    font-size: .8em;
    padding: 50px 0 10px 0; }
    footer ul.addresses li {
      padding-left: 0;
      width: 25%;
      float: left;
      border-bottom: 0; }
      footer ul.addresses li p {
        min-height: 70px; }
      footer ul.addresses li .contact {
        position: static;
        top: auto;
        right: auto;
        text-align: left; }
  #careers {
    padding: 60px 0 80px 0; }
    #careers h1 {
      font-weight: 700;
      color: #333333;
      font-size: 1.8em; }
    #careers ul.accordion li header h3 {
      font-weight: 400; }
    #careers ul.accordion li .description {
      padding: 60px; }
  .career-head .wrap .back-btn {
    left: 60px; } }

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1280px) {
  /******************************************************************
Site Name: Sam Media Corp. Site
Author: Irvine Acosta

Stylesheet: Super Large Monitor Stylesheet

You can add some advanced styles here if you like. This kicks in
on larger screens.

******************************************************************/
  .wrap,
  .floater.wrap {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px; }
  #intro {
    background-image: url("../img/bg-black-hd.jpg"); }
    #intro .wrap {
      padding-bottom: 160px; }
    #intro h1 {
      font-size: 2.3em; }
  #products .wrap {
    padding-top: 90px; }
  #products .devices {
    width: 945px;
    height: 634px;
    background-image: url("../img/products-hd.png");
    top: -350px;
    left: 560px; }
  #products .categories {
    margin-top: 20px; }
  #publisher-advertiser {
    padding: 80px 100px 80px 30%; }
  #numbers .wrap {
    padding-top: 240px;
    padding-bottom: 400px; }
  #numbers ul li h3 {
    font-size: 1.1em; }
    #numbers ul li h3 em {
      font-size: 4em; }
  #company {
    padding: 100px 100px 20% 100px; }
    #company .history {
      margin-left: 5%; }
    #company .careers h1 {
      font-size: 2.2em; }
    #company .careers .button {
      margin-top: 30px; }
  footer {
    padding: 80px 0 60px 0;
    font-size: 1em; }
    footer ul.addresses li p {
      min-height: 90px; }
  .career-head .wrap .back-btn {
    left: 80px; } }

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/