/*
1200px and below
*/
@media screen and (max-width: 1200px) {

    body         {min-width:320px;}  
    
    /* logo */
    
    #logo          {padding:36px 0 0 5%;}
    #logo img      {margin:0 0 0 -6px}
    
    /* menu */ 
    #menu                {}
    #menu-toggle         {}
    #menu-popup          {}
    
    /* banner */
    #banner-copy h1             {font-size:36px; padding:35px; padding:52px 5.851063829787234%;}
    #banner-nav                 {text-align:center; padding:0 0 5px 0; position:relative; bottom:0; margin:-50px 0 0 0;}
    #service-icons              {bottom:37px;}
    .si                         {width:39px; height:39px; margin:0 20px 0 0; background-size:cover;}
    
    /* content */
    .content     {padding:45px 5% 90px 5%;}
    .quotebox    {padding:45px 5% 90px 5%;}
    h1           {font-size:36px; margin:37px 0 20px 0;}
    h2           {font-size:36px; margin:37px 0 20px 0;}
    h3           {font-size:16px; margin:37px 0 0px 0;}
    h4           {font-size:16px; margin:37px 0 10px 0;}
    p            {font-size:16px;}
    blockquote   {font-size:30px;}
    li           {font-size:16px;}
    
    
    /* homepage content */
    .itemid-101 .content        {padding:45px 5% 120px 5%;}
    .itemid-101 .quotebox       {padding:45px 5% 120px 5%;}
    .itemid-101 blockquote      {margin:100px 0 0 0;}
    
    /* case study content */
    
    #banner-thumbs                     {margin:0 1.041666666666667%; width:97.91666666666667%;}
    #banner-thumbs img                 {margin:10px 1.063829787234043% 10px 0; width:15.78014184397163%;}
    #banner-thumbs img:nth-child(3n+3) {margin:10px 1.063829787234043% 10px 0;}
    #banner-thumbs img:nth-child(3n+6) {margin:10px 0 10px 0;}
    
    .catid-11 .quotebox    {margin:0 1.041666666666667%; width:97.91666666666667%; height:auto; padding:20px 5%}
    .catid-11 blockquote   {font-size:28px;}
    
    
    /* what we do */
    #what-we-do .columns12         {padding:0 5%;}
    #what-we-do-graphic img        {width:100%}
    #what-we-do-graphic h3         {font-size:16px; margin:37px 15% 0 15%;}
    #what-we-do-graphic p          {font-size:16px; margin:0 15% 100px 15%;}
    
    /* our work */
    
    .ow-back       {left:2%;}
    .ow-next       {right:2%;}
    #ow-nav img    {width:75%; height:75%;}
    .ow-next img   {float:right;}
    
    #our-work h2         {margin:37px 0 20px 5%;}
    #our-work-thumbs     {margin-left:5%;}
    
    /* news */
    
    #news h2         {margin:37px 0 20px 5%;}
    #news img        {margin:20px 0 0 0;}
    #news h3         {margin-top:-70px;}
    #news p          {font-size:16px; margin:0 10% 100px 0;}
    #news .columns04 {padding:0 0 0 5%}
    
    /* featured project */
    
    .half-page-copy-right  {padding:0 5% 30px 10%;} /* not accurate */
    
    
    /* meet the team */
    
    .half-page-copy-left   {padding:0 10% 30px 10%;} /* not accurate */
    
    /* contact us */
    
    #contact-us                              {max-height:2000px; padding:0 5% 30px 5%;}
    #contact-form input,
    #contact-form textarea                   {font-size:16px;}
    
    /* map */
    
    #map-1 iframe,
    #map-2 iframe   {height:360px;}
    
    /* let's chat */
    
    #lets-chat .columns06        {width:75%; padding:0 5% 0 5%; float:right;}
    
    
    /* footer */
    #footer p {margin:5px 0 10px 5%;} 
    
    }
    
    
    
    /*
    800px and below
    */
    @media screen and (max-width: 800px) {
      
    body {margin:100px 0 0 0;}
    
    /* branding */
    
    .branding-green #contact-us   {background:#93b522;}
    .branding-green #lets-chat    {background:#2e2e2d;}
    
    .branding-blue #contact-us    {background:#3fa3a6;}
    .branding-blue #lets-chat     {background:#2e2e2d;}
    
    .branding-orange #contact-us  {background:#f07e14;}
    .branding-orange #lets-chat   {background:#2e2e2d;}
    
    .branding-lilac #contact-us   {background:#8d89ad;}
    .branding-lilac #lets-chat    {background:#2e2e2d;}
      
    /* header bar */
    #header    {height:100px;}
    
    .notMobile   {display:none;}
    .mobileOnly  {display:block;}
    
    /* logo */
    #logo img      {width:175.5px; height:auto;}
    
    /* menu toggle */
    #menu-toggle, #hero-menu-toggle         {margin:0 20px 0 0;}
    #menu-toggle img, #hero-menu-toggle img {width:40px;}
    #hero-menu-toggle {top:-7px}
    #banner #banner-arrow   {width:360px; right:1.041666666666667%!important; left:auto!important;}
        
    /* mobile menu */
    #mobile-menu                   {display:none; position:fixed; z-index:9999;}
    #mobile-menu li a              {background:#f07e14; color:#ffffff; display:block; width:100%; text-decoration:none; text-transform:uppercase;
                                    font-weight:600; padding:15px 0; border-bottom:2px solid #b96619;}
    #mobile-menu li:last-child a   {border:none;}
    
    /* banner */
    #banner-copy h1             {font-size:22px; padding:25px 5.851063829787234%;}
    .catid-11 #banner-copy h1   {padding:20px 5.531914893617021%;} /* case studies page */
    #service-icons              {bottom:24px;}
    .si                         {width:32px; height:32px; margin:0 12px 0 0; background-size:cover;}
    #banner-nav                 {margin:-40px 0 0 0;}
    .cycle-slideshow            {position: relative; overflow: hidden; height:345.8333333333334px!important;}
    #banner img                 {width:800px; height:345.8333333333334px; position:absolute; top:0;
                                 /* center horizontally */
                                 left: -1000px !important;
                                 right: -1000px !important;
                                 margin-left: auto;
                                 margin-right: auto;
                                 float:none;}
    .itemid-101 #banner img     {position:relative; left:0!important; right:0!important;}
    #banner-wwd-wrapper,
    #banner-wwd-container       {width:100%; height:345.8333333333334px;}
    #banner-wwd-container img   {position:relative;
                                 /* center horizontally */
                                 left: -400px !important;
                                 right: auto !important;
                                 margin-left: 50%;}
    .move-container-left   {left:auto!important}
    .move-container-right  {left:auto!important}
    #banner-wwd-wrapper .custom                              {display:none;}
    .catid-8 #banner-wwd-wrapper .custom.banner-catid-8      {display:block;}
    .catid-9 #banner-wwd-wrapper .custom.banner-catid-9      {display:block;}
    .catid-10 #banner-wwd-wrapper .custom.banner-catid-10    {display:block;}
    
    /* center homepage slides */
    
    #banner-cycle {margin-left:50%; left:-960px; position:relative; width:1920px;}
    .cycle-slide  {}
    
    /* content */
    .content,
    .columns06.right,
    .quotebox    {width:97.91666666666667%; padding:30px 5% 45px 5%;}
    h1           {font-size:24px; margin:25px 0 20px 0;}
    h2           {font-size:24px; margin:25px 0 20px 0;}
    h3           {font-size:16px; margin:25px 0 0px 0;}
    h4           {font-size:16px; margin:25px 0 10px 0;}
    blockquote   {font-size:22px;}
    
    
    /* homepage content */
    .itemid-101 .content        {padding:10px 5% 60px 5%;}
    .itemid-101 .quotebox       {padding:10px 5% 230px 5%;}
    .itemid-101 blockquote      {margin:30px 0 0 0;}
    
    /* services content */
    
    #client-logos a span               {top:auto; bottom:0px;}
    
    /* case study content */
    .catid-11 .content .item-page {
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count:1;
        -webkit-column-gap:0;
        -moz-column-gap:0;
        column-gap:0;  
    }
    
    /* what we do */
    #what-we-do                    {background:#596260}
    #what-we-do p                  {margin:0}
    #what-we-do-graphic .columns04 {width:100%; margin:0px; padding:60px 0;}
    #what-we-do-graphic h3         {font-size:16px; margin:37px 15% 0 5%;}
    #what-we-do-graphic p          {font-size:16px; margin:0 15% 0 5%;}
    
    #what-we-do-graphic .columns04:nth-child(1) {background:#596260}
    #what-we-do-graphic .columns04:nth-child(2) {background:#747b75}
    #what-we-do-graphic .columns04:nth-child(3) {background:#8c9289}
    
    #what-we-do .columns04 .wwd-icon img   {top:15%;}
    
    /* our work - old method */
    
    #ow-nav img    {width:40%; height:40%;}
    
    #our-work-thumbs               {height:278px; width:3000px;}
    #our-work-thumbs a             {margin:0 10px 10px 0; width:200px; height:272px;}
    #our-work-thumbs               {}
    
    #our-work-thumbs span          {display:block; background:none; color:#3c3c3b; position:absolute; bottom:auto; top:0px; padding:232px 0 0 0;}
    #our-work-thumbs a:hover span  {bottom:0;}
    
    /* our work - NEW method */
    
    .our-work-carousel               {height:calc(272px + 20px); width:calc(100% - 5%); margin-left:5%}
    .our-work-carousel div.image-col {width:420px; margin-right:0px;}
    .our-work-carousel a             {margin:0 10px 10px 0; width:200px; height:272px;}
    
    .our-work-carousel span          {display:block; background:none!important; color:#3c3c3b; position:absolute; bottom:auto; top:0px; padding:232px 0 0 0;}
    .our-work-carousel a:hover span  {bottom:0;}
    
    /* news */
    
    #news .columns04 {width:100%; padding:0 5% 0 5%;}
    #news img        {position:absolute; top:0px;}
    #news h3         {margin:-80px 0 0 115px;}
    #news h3+p       {margin:0 0 40px 115px;}
    
    /* featured project */
    
    #featured-project .half-page                 {width:100%; height:auto!important; padding:0 5% 0 5%}
    #featured-project .half-page-image           {height:500px!important;}
    #featured-project .half-page-copy-right      {width:100%; text-align:left; padding:0 0 30px 0; margin:0 0.4166666666666667%;}
    #featured-project .half-page-copy-right img  {width:45%; max-width:214px; margin:0 0 0 5%;}
    
    /* meet the team */
    
    #meet-the-team .half-page                {width:100%; height:auto!important; padding:0 5% 0 5%}
    #meet-the-team .half-page-image          {height:500px!important; float:left;}
    #meet-the-team .half-page-copy-left      {width:100%; text-align:left; padding:0 0 30px 0; margin:0 0.4166666666666667%;}
    
    /* contact us */
    
    #contact-form input,
    #contact-form textarea                   {width:100%!important; margin-left:0px!important}
    
    /* map */
    
    #map-1 iframe,
    #map-2 iframe   {height:250px;}
    
    
    /* let's chat */
    
    #lets-chat                   {height:auto; padding:0 0 0 0;}
    #lets-chat p                 {font-size:16px; margin:0 0 40px 0;}
    #lets-chat p:nth-child(3),
    #lets-chat p:nth-child(4)    {margin:0 0 40px 30px; position:relative;}
    #lets-chat p img             {position:absolute; left:-33px; top:0px;}
    #lets-chat .columns06        {width:100%; padding:0 5% 0 5%}
    #lets-chat                   {background-image:none!important;}
    #lets-chat-arrow             {float:right; max-width:268px; width:40%}
    
    }
    
    
    /*
    500px and below
    */
    @media screen and (max-width: 500px) {
    
    /* banner */
    .si          {display:none;}
    #banner-nav  {display:none;}
    
    /* featured project */
    
    #featured-project .half-page-image  {height:250px!important;}
    
    /* meet the team */
    
    #meet-the-team .half-page-image  {height:250px!important;}
    
    /* case study content */
    
    #banner-thumbs img                 {width:32.6241134751773%; margin:10px 1.063829787234043% 0 0;}
    #banner-thumbs img:nth-child(3n+3) {margin:10px 0 0 0;}
    #banner-thumbs img:nth-child(3n+6) {margin:10px 0 10px 0;}
    
    }
    
    
    
    
    /*
    320px and below
    */
    @media screen and (max-width: 320px) {
    
    }