/**** global ****/
html{ height: 100%; }
body{ min-height: 100%; padding: 0; margin: 0; position: relative; }
body::after{ content:''; display: block; height: 30px; }
footer { height: 30px; bottom: 0; }

.rel { position: relative; }
.abs { position: absolute; }
.width_100 { width: 100%; }
.center { text-align: center; }
.margin { margin: 0 auto; }
.font { font-family: Helvetica, Verdana, Arial, Sans-Serif; }
.uppercase { text-transform: uppercase; }
.clear:after { content: "."; clear: both; display: block; font-size: 0; height: 0; line-height: 0; overflow: hidden; }
.global_container { margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
.float { float: left; } 
.tab { display: none; }
.dark { color: #000; }
.content_container { margin-top: -30px; width: 90%; }

/**** nav ****/
.main-nav { height: 100px; }
.logo { margin: 20px 0px 20px 20px; width: 40px; position: fixed; z-index: 40; }
.logo-white { left: 0; }
.nav_social { height: 60px; width: 140px; margin-top: 0px; top: 54%; }
.nav_social .behance { margin-top: 3px; margin-left: 21%; width: 20%; }
.nav_social .linkedin { margin-left: 17%; width: 15%; }

/**** nav - burger menu ****/
.navbar-box { height: 30px; width: 34px; position: fixed; top: 7%; right: 5%; z-index: 30; }
nav, .navbar-toggle {
-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
nav { background-color: #000000; color: white; display: table; height: 120%; position: fixed; top: 0; z-index: 50; }
nav ul { width: 140px; height: 141px; padding-left: 0px; margin-top: 0px !important; top: 26% !important; }
nav ul li { list-style: none; margin-bottom: 40px; }
nav ul li a { color: inherit; font-size: 18px; font-weight: 400; letter-spacing: 6px; text-decoration: none; }
nav ul li a:focus { outline: none; }
.nav-hide { display: none; }
.navbar-toggle { cursor: pointer; display: block; height: 20px; margin: 0; width: 34px; z-index: 20; position: fixed; top: 8.4%; right: 5%;
-webkit-transition: margin 600ms;
   -moz-transition: margin 600ms;
    -ms-transition: margin 600ms;
     -o-transition: margin 600ms;
        transition: margin 600ms; }
.bar1, .bar2 {
background: #232323; border-radius: 3px; display: block; height: 4px; width: 33px; margin-bottom: 5px; position: relative; z-index: 1;
-webkit-transform-origin: 4px 0px;
        transform-origin: 4px 0px;
-webkit-transition: opacity 0.55s ease, background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transition: opacity 0.55s ease, background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transition: opacity 0.55s ease, background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transition: opacity 0.55s ease, background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
.bar1 { 
-webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%; }
.bar2 { 
-webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%; }

/**** nav burger menu - clicked ****/
.navbar-on { position: fixed; z-index: 200; top: 8%; right: 4%; cursor: pointer; }
.navbar-on .bar1, .navbar-on .bar2 { background: #fff; opacity: 1;
-webkit-transform: rotate(45deg) translate(-4px, -8px);
        transform: rotate(45deg) translate(-4px, -8px); }
.navbar-on .bar2 {
-webkit-transform: rotate(-45deg) translate(-1px, 5px);
        transform: rotate(-45deg) translate(-1px, 5px); }

/**** homepage ****/
.hp_hero { margin-top: -100px; }
.hp_hero_textbox { height: 60px; width: 100%; }
.hp_hero_textbox h1 { font-size: 26px; font-weight: bolder; letter-spacing: 18px; margin-top: 0px; text-indent: 18px; }
.hp_hero_textbox h2 { font-size: 13px; letter-spacing: 5px; text-indent: 5px; }
.hp_hero_arrow { cursor: pointer; height: 70px; overflow: hidden; position: absolute; bottom: 0px; z-index: 3; }
.hp_hero_arrow:before { background: transparent; box-shadow: 0 0 0 5000px rgba(255, 255, 255, 1); content: ""; height: 32px; width: 50px; position: absolute; top: -50px; left: calc(50% - 35px);  
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }

  /**** all blocks ****/
  .block_2 .left_block, .block_2 .right_block, .block_1 { margin-bottom: 20px; }

  /**** 2 blocks ****/
  .block_title { font-size: 14px; font-weight: 400; letter-spacing: 4px; }
  .last_img_block { margin-bottom: 40px; }

/**** content page - global ****/
.content_page .content_wrapper { background-color: #fff; padding-top: 1px; }
.content_page .content_container h1 { margin: 28px auto 30px auto; text-indent: 3px; }
.content_page .content_container p { font-size: 14px; font-weight: 100; letter-spacing: 1px; line-height: 22px; margin: 50px auto 0px auto; }
.content_page .content_container .content_gallery { margin-bottom: 50px; }
.content_arrows { width: 100px; }
.content_arrows img { width: 10%; }
.arrow_space { margin-left: 80%; }

/**** content page - individual ****/
.content_page.script .content_container p,
.content_page.outlet .content_container p { margin-bottom: 50px; }
.content_gallery_container,
.content_page.magazine .img_block img,
.content_page.record .img_block img,
.content_page.editorial .img_block img,
.content_page.elk-website .img_block img,
.content_page.social-media .img_block img,
.content_page.campaign .img_block img { margin: 20px auto; }

/**** about ****/
.content_page.about .img_block img { display: block; width: 320px; }
.content_page.about .content_container p { margin-bottom: 50px; }

/**** contact ****/
.content_page.contact .content_container h1 { color: #000; font-size: 14px; font-weight: bold; height: 56px; letter-spacing: 4px; line-height: 2; margin: auto; }
.content_page.contact .content_container h1 a { text-decoration: none; }

/**** footer ****/
footer { margin-left: auto; margin-right: auto; left: 0; right: 0; width: 90%; }
.footer-year { display: none; }
.footer-email { width: 80%; }
.footer-email a { font-size: 10px; font-weight: bold; letter-spacing: 4px; text-decoration: none; }

.footer-social { float: right; margin-left: 0%; width: 14%; }
.footer-social a { text-decoration: none; }
.footer-social img { width: 44%; margin-left: 0%; }
.footer-social img.linkedin { width: 29%; margin-left: 14%; }


@media only screen and (min-width: 768px) {
  /**** global ****/
  .mob { display: none; }
  .tab { display: block; }
  .stack_float { float: left; }
  .content_container { width: 700px; }
  .main-nav, footer { width: 97%; }

  /**** nav ****/
  .main-nav { height: 100px; margin-left: auto; margin-right: auto; }
  .main-nav img { margin-left: 0px; z-index: 60; }

  /**** nav - desktop view ****/
  .navbar-toggle, .navbar-box { display: none; }
  nav { display: block !important; background: transparent; height: 100px; opacity: 1 !important; position: relative; }
  nav ul { height: 20px; width: 306px; margin-top: 0px !important; top: 20px !important; margin-right: 0px !important; right: 10px !important; }
  nav ul li { float: left; margin-bottom: 0px; margin-left: 40px; }
  nav ul li:first-child { margin-left: 0px; }
  nav ul li a { color: #000; font-size: 14px; letter-spacing: 4px; }

  /**** homepage ****/
  .hp_hero_arrow { height: 34px; }

    /**** 1 blocks ****/
    .block_1 { margin-top: 30px; }

    /**** 2 blocks ****/
    /*.block_2 { margin-top: 20px; }*/
    .block_2 .left_block, .block_2 .right_block { width: 47.5%; }
    .block_2 .right_block { margin-top: 120px; margin-left: 5%; }

  /**** content page - individual ****/
  .content_page.script .content_container p,
  .content_page.outlet .content_container p { margin-top: 20px; }
  .content_page.dotmailer .content_container p,
  .content_page.illustration .content_container p { margin-bottom: 30px; }

  /**** about & contact ****/
  .content_page.about, .content_page.contact { margin-top: -100px; }
  .content_page.about .content_container, .content_page.contact .content_container { margin-top: 100px; }
  .content_page .content_container p { width: 700px; }

  /**** footer ****/
  .footer-mob { float: right; width: 316px; }
  .footer-year { display: block; }
  .footer-year p { font-size: 10px; font-weight: bold; letter-spacing: 2px; margin-top: 3px; }
  .footer-email { width: 234px; }
  .footer-social { margin-left: 0px; width: 82px; }
  .footer-social img { margin-left: 21%; width: 20%; }
  .footer-social img.linkedin { width: 16%; margin-left: 22%; }
}

@media only screen and (min-width: 1024px) {
  /**** global ****/
  .content_container { width: 1000px; }

  /**** homepage ****/
    /**** 2 blocks ****/
    .block_2 .right_block { margin-top: 140px; }

    /**** about ****/
  .content_page.about .content_container p { width: 768px; }
}

@media only screen and (min-width: 1200px) {
  /**** footer ****/
  .footer-year p { font-size: 12px; }
}