@charset 'UTF-8';
@import 'https://fonts.googleapis.com/css?family=Abel';
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap');

body {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    background-color: black;
}

/* -- FONTS -- */
.DIN_font_black {
    font-family: FFDINWebBlack;
    font-weight: normal;
    font-style: normal;
}

.DIN_font_med {
    /*font-family: 'FF DIN Pro Medium';*/
    font-family: FFDINWebProMedium;
    font-weight: normal;
    font-style: normal;
}

.DIN_font_ot {
    /*font-family: 'FF DIN OT';*/
    font-family: FFDINWeb;
    font-weight: normal;
    font-style: normal;
}

.DIN_font_el {
    /*font-family: 'FF DIN Pro ExtraLight';*/
    font-family: FFDINWebProExtraLight;
    font-weight: normal;
    font-style: normal;
}

.Roboto-Italic
{
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-style: italic;
}

/*.abel_font
{
    font-family: 'Abel', sans-serif;
}



.BaskervilleMTStd-Italic
{
    font-family: BaskervilleMTStd-Italic;
    font-weight: normal;
    font-style: normal;
}*/

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    cursor: default;
}

.body_text
{
    font-size: .9em;
    line-height: 1.6em;
    letter-spacing: .05em;
    color: #505050;
}

.mouse_pointer {
    cursor: pointer;
}

/* -- DESKTOP SITE -- */

#site_center {
    background-color: #fff;
    overflow: hidden;
}

h2, .full-width {
  margin: 0 -9999rem;
  /* add back section padding value */
  padding: 5rem 9999rem;
  color: black;
  font-size: 1.125rem;
  background-color: rgba(125,125,125,0.05);
}

.project_header_container
{
    background-color: rgba(138, 43, 226, 0);
    padding: 150px 0 150px 0;
    left: 0;
}

#tooth_logo {
    background: url("../img/tooth_logo/tooth_logo.svg") no-repeat;
    width: 144px;
    height: 131px;
    position: relative;
    -webkit-background-size: 144px 131px;
         -o-background-size: 144px 131px;
            background-size: 144px 131px;
    /*padding: 0;*/
    top: 0px;
    left: 5%;
    /*padding: 0 0 0 -150px;*/
    transform-origin:  0 50%;
    transform: scale(1.35);
}
#hide_project{display: none;}
#project_overlay_container{position: absolute;z-index: 99;}
#project_center{width: 100%; height: 100vh; top: 0;left: 0;position: fixed;}
#project_overlay{width: 100%; height: 100vh; top: 0;left: 0;position: fixed;background-color: black;opacity: 1;}

#project_box{
    width: 300px;
    height: 250px;
    background-color: rgba(255, 0, 0, 1);
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}
#project_left_nav{width: 50px;height: 50px;left:20px;background-color: yellow;}
#project_right_nav{width: 50px;height: 50px;right: 20px; background-color: yellow;}
#project_close{width: 50px;height: 50px;top: 84px;right: 20px; position: absolute;background-color: aqua;}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#grunge_container {
    /*right: 0;*/
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: absolute;
    /*background-color: red;*/
}

#top_grunge {
    top: 0;
    position: absolute;
    width: 100%;
    height: 500px;
    background-color: white;
    /*background: url("../img/header_graphics/grunge_header.jpg") no-repeat;
    transform: translate(0, -69px);*/
}

#white_horizontal_upper {
    top: 0;
    left: 0;
    height: 493px;
    width: 100%;
    background-color: #FFF;
    position: absolute;
}

#dc_logos {
    background: url("../img/icons/DC_Thumbs.png") no-repeat;
    width: 218px;height: 59px;top: 0;left: 0;position: relative;
    margin: 5px 0 5px 0;
}

.section_titles
{
    margin: 0px 0 50px 0;
    letter-spacing: .025em;
    color: #000;
    z-index: 12;
    margin-bottom: 0px;
    height: auto;
    width: auto;
    font-size: 1.25em;
 
}

.section_title_bkg {
    left: 0;
    background: yellow;
    height: 200px;
    width: 100%;
    transform: translate(0, -200px);
    position: absolute;
}

.container_margin {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0 70px 0;
}

.clients_container_margin {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0px 0;
}

a {
    /*border-bottom: 1px solid black;*/
    /*padding-bottom: 1px;*/
    text-decoration: none;
    /*border-bottom: 1px solid black;*/
    /*padding-bottom: 1px;*/
    color: whitesmoke;
}

 a:hover {
    color: #f44336;
    /*border-bottom: 1px solid red;*/
    /*padding-bottom: 1px;*/
    text-decoration: none;
}

#contact_info_container a{
     color: #92C9F0;
     text-decoration: none;
}

#contact_info_container a:hover {
    color: #f44336;
    text-decoration: none;
    border-bottom: 1px solid #f44336;
    padding-bottom: 1px;
}

/* -- WORK SECTION -- */
.desktop_example {
    display: block;
}

/*.vw_desktop_example {
    display: block;
}*/

.mobile_example {
    display: none;
}

/*.mobile_example_vw {
    display: none;
}*/

.work_mobile_example {
    display: none;
}

.vimeo_desktop_example {
    display: block;
}

.vimeo_mobile_example {
    display: none;
}

#black_horizontal_upper {
    /*left: 0;
    height: 3859px;
    position: absolute;
    background-color: black;
    width: 100%;*/
}

#purple_horizontal_upper {
    left: 50%;
    /*height: 3600px;*/
    height: 300px;
    position: absolute;
    background-color: purple;
    width: 100%;
    display: none;
}

.content_container {
    /*width: 970px;*/
    background-color: #ffffff;
}

.selected_work {
    padding: 20px 0 40px 0;
    overflow: hidden;
   
}

.main_work_container {
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 384px;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

#project_1 .info_holder.right_info_holder {
    display:none;
}

#project_3 .info_holder.right_info_holder {
    display:none;
}

#project_5 .info_holder.right_info_holder {
    display:none;
}

#project_7 .info_holder.right_info_holder {
    display:none;
}

.homepage_project_images {
    width: 1024px;
    height: 384px;
    margin: 0 auto;
    padding: 0;
    top: 0;
    overflow: hidden;
}

.img_load {
    background-repeat: no-repeat;
}

#project_1 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/
    _desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/vw_desktop_1024.jpg");
}
#project_2 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/vw_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/stadia_desktop_1024.jpg");
}
#project_3 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/corvette_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/paypal_desktop_1024.jpg");
}
#project_4 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/sony_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/corvette_desktop_1024.jpg");
}
#project_5 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/amazon_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/sony_desktop_1024.jpg");
}
#project_6 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/audi_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/fitbit_desktop_1024.jpg");
}
#project_7 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/applebees_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/audi_desktop_1024.jpg");
}
#project_8 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/noosa_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/amazon_desktop_1024.jpg");
}
#project_9 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/fitbit_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/chipotle_desktop_1024.jpg");
    
}
#project_10 .img_load {
    background-image: url("../img/work_images/_desktop_1024/electrifyAmerica_desktop_1024.jpg");
}
#project_11 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/stadia_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/noosa_desktop_1024.jpg");
}
#project_12 .img_load {
    /*background-image: url("../img/work_images/_desktop_1024/nba2k17_desktop_1024.jpg");*/
    /*background-image: url("../img/work_images/_desktop_1024/applebees_desktop_1024.jpg");*/
    background-image: url("../img/work_images/_desktop_1024/social_desktop_1024.jpg");
}
/*#project_13 .img_load {
    background-image: url("../img/work_images/_desktop_1024/hiscox_desktop_1024.jpg");
}
#project_14 .img_load {
    background-image: url("../img/work_images/_desktop_1024/nba2k17_desktop_1024.jpg");
}*/




.proj1_color {
    background-color: #000;
}

.proj2_color {
    background-color: #000;
}

.image_holder {
    top: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    overflow: hidden;
    height: inherit;
    
}

/* WORK GRID */
.work_grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(485px, 1fr));*/
  /*grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));*/
  /*grid-auto-rows: 1fr;*/
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  grid-auto-flow: row;
}

.work_grid::before {
  content: '';
  width: 0;
  /*padding-bottom: 100%;*/

  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.work_grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;

  /*border: 3px solid green;*/
}

/* Just to make the grid visible */

.work_grid > * {
  /*background: rgba(0,0,0,0.1);*/
  /*border: 1px white solid;*/
}

/* WHAT WE DO GRID */
#position_whatWeDo_grid{
    position: relative;
    margin: 77px 0 0 5%;
}

.whatWeDo_grid {
  display: grid;
  grid-template: repeat(1, 1fr) / repeat(2, 1fr);
  grid-auto-flow: row;
}

.whatWeDo_grid::before {
  width: 0;
  /*padding-bottom: 100%;*/

  grid-row: 1 / 1;
  content: '';
  grid-column: 1 / 1;
}

.whatWeDo_grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;

  /*border: 3px solid green;*/
}

/* Just to make the grid visible */

.whatWeDo_grid > * {
  /*background: rgba(0,0,0,0.1);*/
  /*border: 1px white solid;*/
}

/*.right_image_holder {
  left: 0;
}*/

.left_image_holder {
    left: 54%;
       -webkit-transform-origin: 100% 0;
          -moz-transform-origin: 100% 0;
           -ms-transform-origin: 100% 0;
            -o-transform-origin: 100% 0;
               transform-origin: 100% 0;
        -webkit-transform: translate(-54%, 0);
           -moz-transform: translate(-54%, 0);
            -ms-transform: translate(-54%, 0);
             -o-transform: translate(-54%, 0);
                transform: translate(-54%, 0);
}

/*.info_holder {
    top: 0;left: 0;
    position: absolute;
    max-width: 95%;
    max-height: 95%;
    width: 500px;
    height: 200px;
    overflow: hidden;
    background-color: red;
}*/

.info_holder_test_2 {
    top: 5px;left: 5px;
    position: absolute;
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    /*max-width: 100%;
    max-height: 100%;
    width: 1024px;
    height: 100%;
    margin: 0 auto;*/
    /*border: -8px solid red;*/
    /*padding: -2% -5% 0 0;*/
    /*background-color: red;*/
    overflow: hidden;
    /*margin: 15px;*/
}

.info_holder_test_3 {
    top: 0px;left: 0px;
    position: absolute;
    /*width: inherit;*/
    /*position:relative;*/
    width: inherit;
    height: inherit;
    /*background-color: rgba(0,0,0,0.85);*/
    /*background-color: rgba(245, 67, 54, 1);*/
    overflow: hidden;
}

.mouse_over_cover{
    background-color: rgba(0,0,0, 0.6);
    mix-blend-mode: overlay;
}

.left_info_holder {
}

.right_info_holder {
    /*right: 0;*/
}

.project_brand_box {
    left: 0;
    width: 95%;
    height: 335px;
    margin: 5% 0 1% 5%;
    background-color: red;
    overflow: hidden;
}

.info_container{
    width: 100%;
    padding: 0;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 30%;
}

.project_brand_text_box {
    font-size: 1.575em;
    margin: auto;
    text-align: left;
    color: #FFF;
    /*z-index: 12;*/
    background-color: #f44336;
    position: relative;
    letter-spacing: .025em;
    padding: 44px 20px 33px 170px;
    top: 0px;
    overflow: hidden;
    /*border-bottom: 2px solid #333;*/
}

/*.project_brand_left {
    right: 0;
}

.project_brand_right {
    left: 0;
}*/

.agency_text {
    font-size: 0.875em;
    position: relative;
    letter-spacing: .15em;
    color: #FFF;
    margin: auto;
    top: 0px;
    background-color: #333;
    text-align: left;
    padding: 15px 8px 15px 170px;
/*    border-bottom: 2px solid #f44336;*/
}

.proj_details {
    font-size: 0.625em;
    position: relative;
    letter-spacing: .15em;
    color: #FFF;
    text-transform: capitalize;
    margin: auto;
    top: 0px;
    background-color: #333;
    text-align: left;
    padding: 5px;
}

/*.proj_details_left {
    right: 0;
}

.proj_details_right {
    left: 0;
}*/

.proj_details_1 {
    /*top: 308px;
    padding: 25px 82px 16px 85px;*/
}

/*.proj_details_2 {
    top: 336px;
    padding: 24px 82px 16px 85px;
}*/

.underscore {
    width: 30px;
    background-color: #f44336;
    height: 1px;
    position: absolute;
    /*padding: 22px 82px 16px 85px;*/
}

.underscore_left {
    right: 0;
    top: 367px;
    margin: 21px 85px;
}

.underscore_right {
    left: 0;
    top: 367px;
    margin: 21px 85px;
}

.bottom_work_content {
    width: 970px;
    height: 2000px;
    background-color: #f9f9f9;
    position: absolute;
    top: 450px;
    display: hidden;
}

/* WORK OVERLAY*/
.grey_img_overlay {
    width: 485px;
    height: 450px;
    top: 0px;
    left: 0;
    position: absolute;
    
}

.arrow_box {
    height: 150px;
    width: 150px;
    top: 30%;
    background-color: #000;
    position: absolute;
    border-bottom: 2px solid #f44336;
}

.view_project_text_box {
    z-index: 12;
    top: 162px;
    background-color: #f3f3f3;
    color: #000000;
    letter-spacing: .025em;
    position: absolute;
    padding: 11px 25px 6px 25px;
    font-size: 0.625em;
}

.view_project_text_box.right {
    right: 0px;
}

.view_project_text_box.left {
    left: 0px;
    
}

.view_project_text_box.mobile {
        left: 5%;
        display: none;
        
    }

.arrow_left_img {
    left: 0;
}

.arrow {
    width: 100%;
    background-image: url(../img/icons/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 0;
    padding: 0; /* reset */
    padding-bottom: 30%;
    left: 40%;
    top: 35%;
    position: relative;
}

.arrow_flip {
    
    width: 100%;
    background-image: url(../img/icons/arrow_left.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 0;
    padding: 0; /* reset */
    padding-bottom: 30%;
    top: 18px;
    position: relative;
    left: 39px;
}

.arrow_flip_right_img {
    left: 39px;
}

/* BRANDS */
#brands_header_graphic {
    background: url("../img/header_graphics/brands_header_graphic.png") no-repeat;
    width: 970px;
    height: 239px;
    display: none;
}

/* -- SERVICES -- */
#offerings_header_graphic {
    background: url("../img/header_graphics/offerings_header_graphic.jpg") no-repeat;
    width: 970px;
    height: 203px;
    left: 0px;
    position: relative;
    margin: 0px 0 0 0;
    display: none;
}

.services{
    padding: 30px 0 0% 5%;
    
}

.whatWeDo_padding{
    padding: 50px 0 0% 5%;
    
}

.toothInfo_padding{
    padding: 30px 0 0% 5%;
    
}

.displayAd_offering_position_right {
    display: inline-block;
    float: left;
    padding: 0 22px 50px 0;
}

.offering_position_right {
    display: inline-block;
    /*max-width: 100%;
    width: 95%;*/
    /*padding: 20px 0 0 0;*/
    float: left;
}

.offering_position_right_2 {
    display: inline-block;
    /*max-width: 100%;
    width: 95%;*/
    padding: 20px 0 0 0;
    float: left;
}

.section_header_content {
    position: relative;
}

/*.position_work  {
    position: relative;
    display: inline-block;
    margin: 0 0 0 0px;
}*/

.section_title {
    color: white;
    text-transform: uppercase;
    padding: 15px 15px 8px 15px;
    font-size: 1.575em;
    width: auto;
    height: auto;
    position: absolute;
    /*background-color: #f44336;*/
    top: 0px;
    overflow: hidden;
}

.section_title_contact {
    color: black;
    text-transform: uppercase;
    padding: 15px 15px 8px 15px;
    font-size: 1.575em;
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
    overflow: hidden;
}

.big_proj_text {
    display: block;
    color: white;
    text-transform: uppercase;
    /*padding: 15px 15px 9px 15px;*/
    font-size: 40em;
    width: auto;
    height: auto;
    position: absolute;
    /*background-color: #f44336;*/
    top: -80px;
    left: -45px;
    overflow: hidden;
    opacity: 1;
}

.work_big_proj_text {
    display: block;
    color: white;
    text-transform: uppercase;
    /*padding: 15px 15px 9px 15px;*/
    font-size: 20em;
    width: auto;
    height: auto;
    position: absolute;
    /*background-color: #f44336;*/
    top: -40px;
    left: -45px;
    overflow: hidden;
    opacity: 1;
}

.section_title_color{background-color: #f44336;border-bottom: solid 3px firebrick;}
.section_contact_color{background-color: white;border-bottom: solid 3px #BAB636;}

.section_title_white {
    font-size: 1.6em;
    color: white;
    text-transform: uppercase;
    padding: 0px 0 15px 0;
    /*display: none;*/
}

.offering_title_HOME {
    font-size: 1.6em;
    color: black;
    text-transform: capitalize;
    padding: 0px 0 10px 0;
    /*display: none;*/
}

.offering_title {
    font-size: 1.6em;
    color: whitesmoke;
    text-transform: capitalize;
    padding: 0px 0 10px 0;
    /*display: none;*/
}

.offering_subhead{
    font-size: 1.240em;
    color: black;
    margin: 0 20% 0 0;
    padding: 20px 0 10px 0;
    line-height: 1.5;
}

.offering_subhead_maxWidth{max-width: 550px;}

.mograph_offering_subhead{
    font-size: 1.240em;
    color: black;
    margin: 0 20% 0 0;
    max-width: 520px;
    padding: 20px 0 65px 0;
    line-height: 1.5;
}

.clients_offering_subhead{
    font-size: 1.240em;
    color: black;
    margin: 0 20% 0 0;
    max-width: 375px;
    padding: 20px 0 10px 0;
    line-height: 1.5;
}

.toothInfo_subhead{
    font-size: 2.25em;
    color: whitesmoke;
    margin: 0 0% 0 0;
    max-width: 88%;
    padding: 0px 0 10px 0;
    line-height: 1.25;
}

.toothInfo_smallhead{
    font-size: 1.5em;
    color: whitesmoke;
    margin: 25px 0% 0 0;
    max-width: 88%;
    padding: 0px 0 10px 0;
    line-height: 1.25;
}

.agency_list{
    font-size: 1.15em;
    color: black;
    margin: 0 20% 0 0;
    max-width: 375px;
    line-height: 1.5;
    padding: 10px 28px 10px 0;
}

.offering_body.color, .offering_subhead.color {
    color: #FFF;
}

.offering_body {
    color: #505050;
    font-size: 0.857em;
    padding: 0 2% 0 0;
    position: relative;
    max-width: 400px;
}

.disclaimer_txt{
    font-size: 0.55em;
    color: white;
    padding: 10px 0 10px 0;
    max-width: 250px;
    /*margin: 0 5% 0 0;*/
    /*opacity: 1;*/
}

.mobile_boards_col_on {
        display: none;
}

.mobile_boards_col_off {
        display: block;
}

.offering_col_1, .offering_col_2{
    line-height: 1.35em;
    float: left;
    min-width: 10%;
    margin: 0 5% 0 0;
}

.offering_col_3 {
    width: 115px;
    margin: 0;
    /*position: relative;*/
    float: left;
    line-height: 1.35em;
}

.display_ads {
    margin: 20px 0 0px 0;
}

/* CLIENTS */
#select_work{
    position: relative;
    /*background-color: black;*/
    background-color: rgba(125, 125, 125, 0.05);
    /*background-color: #333333*/
    /*background-color: rgba(125, 125, 125, 0.05);*/
    
}



/* OTHER GRID */
.grid {
    
}

.grid:after{
    content: "";
    display: table;
    clear: both;
    
}

.grid .red_underscore {
    margin: 15px 0 0 0;
}

#agency_single_column {
    display: block;
}

#agency_columns {
    display: none;
}

#clients_container .grid {
    position: relative;
    padding: 0 0 0 5%;
}

#contact_container .grid {
    padding: 65px 0 0 0;
    /*margin: 25px 0;*/
}

#offerings_container{
    background-color: rgba(125, 125, 125, 0.05);
}

#toothInfo_container{
    background-color:black;
}

#about_container {
    /*margin: 0 0 75px;*/
}

.grey_container_bkg {
    background-color: rgba(125, 125, 125, 0.05);
    transform: translate(0%, 0px);
    position: absolute;
    left: 0;
    width: 100%;  
}

.black_container_bkg {
    background-color: #000000;
    transform: translate(0%, 0px);
    left: 0;
    width: 100%;
    position: absolute;  
}

#offerings_container_bkg {
    height: 1063px;
    transform: translate(0,-74px);
}

/* CONTACT */
.contact {
    float: left;
}


#contact_container_bkg {
    transform: translate(0,-75px);
    height: 372px;
}

#contact_container {
    background-color: #000;
    padding: 0 0 0 5%;
    border-top: 3px solid rgb(35 96 125 / 100%);
} 

.contact_title {
    font-size: 1.575em;
    color: white;
    text-transform: capitalize;
    padding: 0px 0 15px 0;
    /*display: none;*/
}

#contact_info_container {
    background-color: rgba(40, 13, 241,0);
    position: relative;
    margin: 70px 0 0 0;
}

.contact_margin{
    padding: 70px 0 0 0;
}

.contact_2_margin{
    padding: 1px 0 0 0;
}

.offerings_margin{
    padding: 70px 0 0 5%;
}

.selectedWork_margin{
    padding: 70px 0 0 5%;
}

.toothInfo_margin{
    padding: 50px 0 0 0%;
}

.agencies_col_1, .agencies_col_2{
    line-height: 1.2em;
    float: left;
    min-width: 5%;
    margin: 0 0% 0 0;
}

.clients_col_1, .clients_col_2 {
    float: left;   
}

.clients {
    padding: 30px 0 0px 0;
}

.clients_col_1 {
    width: 30%;
    margin: 0 0 5px 0;
    max-width: 472px;
}
.clients_col_2 {
    width: 70%;
    margin: 0 0 50px 0;
}
/*.clients_col_1{
    background-color:rgba(255, 0,0,0);
    padding:2.5% 5% 0 0;
    width:45%;
} 

.clients_col_2{
    background-color:rgba(255, 0,0,0);
    float:left;
    padding:0px 0 0px 50%;
} 

.agencies, .brands {
}*/

.clients_col_1 dl {
    margin: 0;
    line-height: 1.75em;
}

.clients_col_2 .brands dl {
    margin: 0 0 0 -22px;
} 

.clients_col_2 dl dt {
    width: 115px;
    height: 104px;
    display: inline-block;
}



/* ABOUT */
.about {
    padding:0 0 0 5%;
}

#about_header_graphic {
    background: url("../img/header_graphics/about_header_graphic.png") no-repeat;
    width: 970px;
    height: 277px;
    display: none;
}



/* CONTACT */
#contact_header_graphic {
    background: url("../img/header_graphics/contact_header_graphic.jpg");
    background-repeat: repeat-x;
    width: 100%;
    left: 0px;
    height: 202px;
    z-index: -100;
    /*z-index: -100;*/
}

.contact_container_margin {
}

#contact_info_container dt {
    position: relative;
    /*color: #ababab;
    font-size: 1.000em;
    margin: 10px;*/
    display: inline;

    font-size: 1.24em;
    color: white;
    /*margin: 28px; */
    /*max-width: 520px;*/
    /*padding: 20px 0 10px 0;*/
    line-height: 1.5;
}

#contact_info_container .grid dl dt:first-child {
    padding: 10px 0 15px 0;
}

.contact_col_1{
    background-color:rgba(255, 0,0,0);
    width:250px;
    float: left;
} 

.contact_col_2{
    width:250px;
    background-color:rgba(255, 0,0,0);
    float: left;
} 

@media only screen and (min-width: 2048px) {
.work_grid {
      /*display: grid;*/
      /*grid-template-columns: repeat(auto-fill, minmax(485px, 1fr));*/
      /*grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));*/
      /*grid-auto-rows: 1fr;*/
      grid-template: repeat(2, 1fr) / repeat(4, 1fr);
      /*grid-auto-flow: row;*/  /* or 'row', 'row dense', 'column dense' */
    }
    /*.whatWeDo_grid {
      grid-template: repeat(2, 1fr) / repeat(4, 1fr);
    }*/

}

@media only screen and (min-width: 1750px) {
    
    .whatWeDo_grid {
      grid-template: repeat(1, 1fr) / repeat(4, 1fr);
    }
}

@media only screen and (max-width: 1750px) {
    
    .offering_position_right {
    
    padding: 0px 0 50px 0;
   
    }

    .offering_position_right_2 {
       
        /*padding: 0px 0 20px 0;*/
    }
}




/* 1023 WIDTH */

@media only screen and (max-width: 1024px) {

    /*#select_work{
        position: relative;
        background-color: black;
        
    }*/

    .work_grid {
      /*display: grid;*/
      /*grid-template-columns: repeat(auto-fill, minmax(485px, 1fr));*/
      /*grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));*/
      /*grid-auto-rows: 1fr;*/
      grid-template: repeat(3, 1fr) / repeat(1, 1fr);
      /*grid-auto-flow: row;*/  /* or 'row', 'row dense', 'column dense' */
    }

    .main_work_container {
        /*position: relative;
        margin: 0 auto;
        padding: 0;
        height: 384px;
        cursor: pointer;
        
        width: 100%;*/
        /*width: 768px;*/
    }

    .desktop_example {
        display: none;
    }

/*    .vw_desktop_example {
        display: none;
    }*/

    .mobile_example {
        display: block;
    }

/*    #agency_single_column {
        display: block;
    }

    #agency_columns {
        display: none;
    }*/

     /*.mobile_example_vw {
        display: block;
        position: relative;
        width: 970px;height: 500px;
        margin: 0px 20px 50px 0;
        border: 0 none;
    }*/

    .work_mobile_example {
        display: block;
        position: absolute;
        top: 0;
    }

    /*.vimeo_desktop_example {
        display: block;
    }

    .vimeo_mobile_example {
        display: none;
    }*/

    .img_load {
        background-repeat: no-repeat;
    }

    /*#project_1 .img_load {
        background-image: url("../img/work_images/_desktop_1024/paypal_desktop_1024.jpg");
    }
    #project_2 .img_load {
        background-image: url("../img/work_images/_desktop_1024/vw_desktop_1024.jpg");
    }
    #project_3 .img_load {
        background-image: url("../img/work_images/_desktop_1024/corvette_desktop_1024.jpg");
    }
    #project_4 .img_load {
        background-image: url("../img/work_images/_desktop_1024/sony_desktop_1024.jpg");
    }
    #project_5 .img_load {
        background-image: url("../img/work_images/_desktop_1024/amazon_desktop_1024.jpg");
    }
    #project_6 .img_load {
        background-image: url("../img/work_images/_desktop_1024/audi_desktop_1024.jpg");
    }
    #project_7 .img_load {
        background-image: url("../img/work_images/_desktop_1024/applebees_desktop_1024.jpg");
    }
    #project_8 .img_load {
        background-image: url("../img/work_images/_desktop_1024/noosa_desktop_1024.jpg");
    }*/

    #project_1 .info_holder.right_info_holder {
        display:block;
    }

    #project_1 .info_holder.left_info_holder {
        display:none;
    }

    #project_3 .info_holder.right_info_holder {
        display:block;
    }

    #project_3 .info_holder.left_info_holder {
        display:none;
    }

    #project_5 .info_holder.right_info_holder {
        display:block;
    }

    #project_5 .info_holder.left_info_holder {
        display:none;
    }

    #project_7 .info_holder.right_info_holder {
        display:block;
    }

    #project_7 .info_holder.left_info_holder {
        display:none;
    }

/*    .project_brand_text_box {
        font-size: 1em;
        position: absolute;
        letter-spacing: .025em;
        color: #333;
        z-index: 12;
        background-color: #FFF;
        padding: 8px 10px 5px 10px;
        top: 0;
        overflow: hidden;
        border-bottom: 0px solid #333;
    }*/

    .agency_text {
        /*position: absolute;
        letter-spacing: .15em;*/
        /*padding: 6px 10px 3px 10px;
        top: 31px;*/
        padding: 20px 8px 13px 170px;
        font-size: 0.675em;
    }

    .proj_details {
        /*position: absolute;
        letter-spacing: .15em;
        color: #FFF;
        padding: 6px 32px 3px 32px;
        top: 62px;
        background-color: black;
        font-size: 0.675em;*/
        display: none;
        
    }

    .agency_text_right {
    left: 5%;
    }

    .proj_details_right {
        /*left: 5%;*/
    }

    .proj_details_1 {
        top: 52px;
        padding: 4px 32px 3px 32px;
        background-color: black;
    }

    .proj_details_2 {
        top: 70px;
        padding: 4px 32px 3px 32px;
        background-color: black;
    }

    .view_project_text_box.mobile {
        left: 5%;
        display: block;
        top: 88px;
        background-color: #9E9E9E;
        padding: 9px 32px 6px 32px;
        color: white;
    }

    .view_project_text_box.left {
        display: none;
    }

    /*.selected_work {
        padding: 0 0 75px 0;
        left: 5%;
        position: relative;
    }*/

    .right_info_holder {
        right: 0;
    }

    .displayAd_offering_position_right {
        /*display: inline-block;*/
        /*max-width: 100%;
        width: 95%;*/
        /*padding: 0px 2% 65px 0;*/
        /*float: left;*/
    }

    .project_brand_left {
           -moz-transform: translate(-100%, 0);
            -ms-transform: translate(-100%, 0);
             -o-transform: translate(-100%, 0);
        /*-webkit-transform-origin: 50% 0;
           -moz-transform-origin: 50% 0;
            -ms-transform-origin: 50% 0;
             -o-transform-origin: 50% 0;
                transform-origin: 50% 0;*/
        right: 483px;
    }

    .project_brand_right {
        left: 5%;
        /*-webkit-transform-origin: 50% 0;
           -moz-transform-origin: 50% 0;
            -ms-transform-origin: 50% 0;
             -o-transform-origin: 50% 0;
                transform-origin: 50% 0;
        -webkit-transform: translate(-50%, 0);
           -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
             -o-transform: translate(-50%, 0);
                transform: translate(-50%, 0);*/
    }

    .homepage_project_images {
        width: 1024px;
        height: inherit;
        margin: 0;
        padding: 0;
        top: 0;
        left: inherit;
        left: 0;
        
    }

    .info_holder {
    top: 0;
    position: absolute;
    max-width: 1024px;
    width: 100%;
    height: inherit;
    overflow: hidden;
    
    /*padding: 0;
    margin: 0;*/
    /*display: none;*/
    }

    /*#project_6 .left_image_holder {
       left: 10%;
       -webkit-transform-origin: 100% 0;
          -moz-transform-origin: 100% 0;
           -ms-transform-origin: 100% 0;
            -o-transform-origin: 100% 0;
               transform-origin: 100% 0;
        -webkit-transform: translate(-10%, 0);
           -moz-transform: translate(-10%, 0);
            -ms-transform: translate(-10%, 0);
             -o-transform: translate(-10%, 0);
                transform: translate(-10%, 0);
    }*/

    .left_image_holder {
           left: 50%;
           -webkit-transform-origin: 100% 0;
              -moz-transform-origin: 100% 0;
               -ms-transform-origin: 100% 0;
                -o-transform-origin: 100% 0;
                   transform-origin: 100% 0;
            -webkit-transform: translate(-50%, 0);
               -moz-transform: translate(-50%, 0);
                -ms-transform: translate(-50%, 0);
                 -o-transform: translate(-50%, 0);
                    transform: translate(-50%, 0);
    }

    .right_image_holder {
        left: 50%;
        -webkit-transform: translate(50%, 0);
           -moz-transform: translate(50%, 0);
            -ms-transform: translate(50%, 0);
             -o-transform: translate(50%, 0);
                transform: translate(50%, 0);
        
    }

/*    .arrow_box {
        height: 66px;
        width: 100px;
        top: 190px;
        background-color: #000;
        position: absolute;
        border-bottom: 2px solid #f44336;
        display: none;
    }*/

    .grid:after{
        content: "";
        display: table;
        clear: both;
        margin-bottom: 0;
    }

}

/* 768 WIDTH */

@media only screen and (max-width: 768px) {

    .big_proj_text {
        display: none;
    }

  .vimeo_desktop_example {
        display: none;
    }

    .vimeo_mobile_example {
        display: block;
    }

    #contact_info_container {
        background-color: rgba(40, 13, 241,0);
        position: relative;
        margin: 0px 0 0 0;
    }

    .whatWeDo_grid {
      /*display: grid;*/
      grid-template: repeat(1, 1fr) / repeat(1, 1fr);
      /*grid-auto-flow: row;*/
    }

    .offering_position_right {
    
        padding: 0px 0 0px 0;
   
    }

    .offering_position_right_2 {
       
        padding: 50px 0 0px 0;
    }


    /*#top_grunge {
    
        top: 0;
        
        position: absolute;

        width: 100%;
        height: 500px;
        
        background: url("../img/header_graphics/grunge_header.jpg") no-repeat;
        transform: translate(0, -69px);
       
    }*/

    .grid:after{
        content: "";
        display: table;
        clear: both;
        margin-bottom: 0;
    }

    #contact_header_graphic {
        background-image: url("../img/header_graphics/contact_header_graphic.jpg");
        background-repeat: no-repeat;
        width: 100%;
        left: 0px;
        height: 202px;
        z-index: -100;
    }

    /*#tooth_logo {
        background: url("../img/tooth_logo/tooth_logo.svg") no-repeat;
        width: 144px;
        height: 131px;
        position: relative;
        -webkit-background-size: 144px 131px;
             -o-background-size: 144px 131px;
                background-size: 144px 131px;
        padding: 0;
        left: 2.5%;
    }*/

    /*#select_work{
        position: relative;
        background-color: black;
        
    }*/

    .main_work_container {
        position: relative;
        margin: 0 auto;
        padding: 0;
        height: 384px;
        cursor: pointer;
        width: 100%;
    }

/*    .img_load {
        background-repeat: no-repeat;
    }

    #project_1 .img_load {
        background-image: url("../img/work_images/_mobile/paypal_mobile.jpg");
    }
    #project_2 .img_load {
        background-image: url("../img/work_images/_mobile/vw_mobile.jpg");
    }
    #project_3 .img_load {
        background-image: url("../img/work_images/_mobile/corvette_mobile.jpg");
    }
    #project_4 .img_load {
        background-image: url("../img/work_images/_mobile/sony_mobile.jpg");
    }
    #project_5 .img_load {
        background-image: url("../img/work_images/_mobile/amazon_mobile.jpg");
    }
    #project_6 .img_load {
        background-image: url("../img/work_images/_mobile/audi_mobile.jpg");
    }
    #project_7 .img_load {
        background-image: url("../img/work_images/_mobile/applebees_mobile.jpg");
    }
    #project_8 .img_load {
        background-image: url("../img/work_images/_mobile/noosa_mobile.jpg");
    }

    .homepage_project_images {
        width: 768px;
        height: inherit;
        margin: 0;
        padding: 0;
        top: 0;
        left: inherit;
        right: 0;
        
    }*/

    #agency_single_column {
        display: none;
    }

    #agency_columns {
        display: block;
    }

    .agency_list{
    font-size: 1em;
    padding: 0px 28px 0 0;
    }

    .agencies_col_1{
        padding:  10px 50px 0 0;
    }

    /*.agency_list{
        font-size: 1.15em;
        color: black;
        margin: 0 20% 0 0;
        max-width: 375px;
        line-height: 1.5;
        padding: 10px 28px 10px 0;
    }*/


    /*.clients_col_1 {
        width: 100%;
        margin: 0 15% 25px 0;
    }*/

    .display_ads {
        /*padding: 50px 0 50px 0;*/
    }

    .offering_subhead{
        /*font-size: 0.875em;*/
        /*color: black;*/
        /*max-width: 370px;
        margin: 5% 5% 0 0;
        padding: 20px 10px 10px 0;*/
    }

    .offering_body {
        /*color: #505050;
        font-size: 0.75em;
        padding: 0 5% 0 0;
        position: relative;
        max-width: 365px;*/
    }

    .offerings_margin{
        /*margin: 5% 0;*/
        padding: 70px 0% 0 5%;
    }

    .offering_col_1, .offering_col_2{
        line-height: 1.35em;
        float: left;
        margin: 0 10% 0 0;
    }

    .offering_col_3 {
        width: 90px;
        margin: 0 0px 0 0;
        /*position: relative;*/
        float: left;
        line-height: 1.35em;
    }

    .clients_col_1 {
        width: 100%;
        /*margin: 0 15% 0 0;*/
    }
    .clients_col_2 {
        width: 100%;
    }

    .clients_col_2 .brands dl {
        margin: 0 0 0 -4%;
    }

    .clients_col_2 dl dt {
        width: 106px;
        height: 104px;
        display: inline-block;
    }

}

@media only screen and (max-width: 320px) {




  /*  .vimeo_desktop_example {
        display: none;
    }

    .vimeo_mobile_example {
        display: block;
    }*/

    .main_work_container {
        position: relative;
        margin: 0 auto;
        padding: 0;
        height: 160px;
        cursor: pointer;
        /*width: 320px;*/
        width: 100%
    }

    .agency_text {
        font-size: 1em;
        position: absolute;
        letter-spacing: .15em;
        color: #FFF;
        /*z-index: 12;*/
        padding: 6px 32px 3px 32px;
        background-color: black;
        top: 31px;
        display: none;
    }

    .proj_details {
        font-size: 0.625em;
        position: absolute;
        letter-spacing: .15em;
        color: #FFF;
        text-transform: capitalize;
        display: none;
    }

    .homepage_project_images {
        width: 320px;
        height: inherit;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
    }

    .view_project_text_box.mobile {
        top: 31px;
    }

    .proj_details_1 {
        /*top: 52px;
        padding: 4px 32px 3px 32px;
        background-color: black;*/
        display: none;
    }

    .proj_details_2 {
        /*top: 70px;
        padding: 4px 32px 3px 32px;
        background-color: black;*/
        display: none;
    }

    .agency_text {
        /*position: absolute;
        letter-spacing: .15em;
        color: #FFF;
        padding: 6px 32px 3px 32px;
        top: 31px;
        background-color: black;
        font-size: 0.675em;*/
        display: none;
    }

    .img_load {
        background-repeat: no-repeat;
    }

/*    #project_1 .img_load {
        background-image: url("../img/work_images/_phone/paypal_mobile.jpg");
    }
    #project_2 .img_load {
        background-image: url("../img/work_images/_phone/vw_mobile.jpg");
    }
    #project_3 .img_load {
        background-image: url("../img/work_images/_phone/corvette_mobile.jpg");
    }
    #project_4 .img_load {
        background-image: url("../img/work_images/_phone/sony_mobile.jpg");
    }
    #project_5 .img_load {
        background-image: url("../img/work_images/_phone/amazon_mobile.jpg");
    }
    #project_6 .img_load {
        background-image: url("../img/work_images/_phone/audi_mobile.jpg");
    }
    #project_7 .img_load {
        background-image: url("../img/work_images/_phone/applebees_mobile.jpg");
    }
    #project_8 .img_load {
        background-image: url("../img/work_images/_phone/noosa_mobile.jpg");
    }*/

    /*#project_6 .left_image_holder {
       left: 50%;
       -webkit-transform-origin: 100% 0;
          -moz-transform-origin: 100% 0;
           -ms-transform-origin: 100% 0;
            -o-transform-origin: 100% 0;
               transform-origin: 100% 0;
        -webkit-transform: translate(-50%, 0);
           -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
             -o-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
    }*/

    .left_image_holder {
           left: 50%;
           -webkit-transform-origin: 100% 0;
              -moz-transform-origin: 100% 0;
               -ms-transform-origin: 100% 0;
                -o-transform-origin: 100% 0;
                   transform-origin: 100% 0;
            -webkit-transform: translate(-50%, 0);
               -moz-transform: translate(-50%, 0);
                -ms-transform: translate(-50%, 0);
                 -o-transform: translate(-50%, 0);
                    transform: translate(-50%, 0);
    }

    .right_image_holder {
        left: 50%;
        -webkit-transform: translate(50%, 0);
           -moz-transform: translate(50%, 0);
            -ms-transform: translate(50%, 0);
             -o-transform: translate(50%, 0);
                transform: translate(50%, 0);
        
    }

    .clients_col_1 {
        width: 100%;
        /*margin: 0 5% 25px 0;*/
    }

    .offering_subhead{
        /*font-size: 0.75em;*/
        /*color: black;
        padding: 20px 10px 10px 0;
        margin: 0 5% 0 0;
        max-width: 100%;*/
    }

    .offering_body {
        /*color: #505050;
        font-size: 0.65em;
        padding: 0 5% 0 0;
        position: relative;
        max-width: 300px;*/
    }

    .offerings_margin{
        /*margin: 5% 0;
        padding: 3% 0% 0 5%;*/
    }

    .offering_col_1, .offering_col_2{
        line-height: 1.35em;
        float: left;
        margin: 0 0% 0 0;
        min-width: 26%;
    }

    .offering_col_3 {
        width: 70px;
        margin: 0 0px 0 0;
        /*position: relative;*/
        float: left;
        line-height: 1.35em;
    }

    .clients_col_1 {
        width: 100%;
        /*margin: 0 15% 0 0;*/
    }
    .clients_col_2 {
        width: 100%;
    }

    .clients_col_2 .brands dl {
        margin: 0 0 0 -9.5%;
    }

    .clients_col_2 dl dt {
        width: 99px;
        height: 104px;
        display: inline-block;
        transform: scale(0.95);
    }

}