/* CSS Document */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/*=================================== RESPONSIVE GRID ====================================*/
.wrap {
  max-width: 1200px;
  width: 92%;
  margin: 0px auto;
  position: relative; }

/*  GROUPING  */
.group:before,
.group:after {
  content: "";
  display: table; }

.group:after {
  clear: both; }

/*  GRID OF SIX  */
.grid_1_of_6, .grid_2_of_6, .grid_3_of_6, .grid_4_of_6, .grid_5_of_6, .grid_6_of_6 {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%; }

.grid_6_of_6 {
  display: block;
  float: left;
  margin: 0% 0 0% 1.6%; }

.grid_1_of_6:first-child, .grid_2_of_6:first-child, .grid_3_of_6:first-child, .grid_4_of_6:first-child, .grid_5_of_6:first-child, .grid_6_of_6:first-child {
  margin-left: 0; }

.grid_6_of_6 {
  width: 100%; }

.grid_5_of_6 {
  width: 83.06%; }

.grid_4_of_6 {
  width: 66.13%; }

.grid_3_of_6 {
  width: 49.2%; }

.grid_2_of_6 {
  width: 32.26%; }

.grid_1_of_6 {
  width: 15.33%; }

/*-------------------MY STYLES----------------------------------*/
.content {
  position: relative;
  margin: auto;
}
.content-overlay p{
  width:9&%;
  padding:10px;
  text-align:center;
}
  .content:hover .content-overlay {
    opacity: 1; }
  .content:hover .content-details {
    top: 40%;
    left: 43%;
    opacity: 1; }
  .content a {
    color: #1E2424; }
    .content a .content-overlay {
      background: #F5E612;
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0%;
      top: 0%;
      bottom: 0;
      right: 0;
      opacity: 0;
      -webkit-transition: all 0.4s ease-in-out 0s;
      -moz-transition: all 0.4s ease-in-out 0s;
      transition: all 0.4s ease-in-out 0s;
      z-index: 1; }
    .content a .content-details {
      position: absolute;
      text-align: center;
      padding-left: 4em;
      padding-right: 1em;
      width: 100%;
      top: 50%;
      left: 160px;
      opacity: 0;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
      z-index: 2; }

html {
  scroll-behavior: smooth; }

body {
  font-family: 'Sarabun', sans-serif;
  -webkit-font-smoothing: antialiased; }

ul {
  list-style: none; }

#mobile_logo {
  display: none; }

h1 {
  font-size: 8em;
  text-transform: uppercase; }

h2 {
  font-size: 5em;
  text-transform: uppercase;
  color: #fff;
  line-height: 100px; }

h3 {
  font-size: 1.7em;
  text-transform: uppercase; 
  margin: 10px;
  text-align: center;
}

p {
  line-height: 25px;
  padding: 8% 0; }

a {
  text-decoration: none; }

span {
  display: block; }

section {
  padding: 5%; }

strong {
  font-size: 1.2em; }

.max-img {
  max-width: 100%; }

.drk_bckgrnd {
  background-color: #1E2424;
  color: #fff; }

.float-l {
  float: left; }

.float-r {
  float: right; }

.a-center {
  text-align: center;
  margin: 0 auto; }
.center-img{
  display:flex;
  flex-direction: row;
  justify-content:center;
  flex-wrap:wrap;
  
}
.center-img img{
  width:15%;
  margin:0 10px;
}

.a-right {
  text-align: right; }

.a-left {
  text-align: left; }

.inline-blk {
  display: inline-block; }

.headline-blk {
  color: #1E2424; }

.yellow_btn {
  background-color: #F5E612;
  color: #1E2424;
  border-bottom: 4px solid #454545;
  padding: 2.5% 8%;
  display: inline-block; }
  .yellow_btn:hover {
    background-color: #fff;
    border-bottom: 4px solid #F5E612;
    cursor: pointer;
    transition: all 0.3s; }

.blk_btn {
  background-color: #1E2424;
  color: #F5E612;
  border-bottom: 4px solid #F5E612;
  padding: 2% 6%;
  display: inline-block; }
  .blk_btn:hover {
    background-color: #F5E612;
    border-bottom: 4px solid #454545;
    color: #1E2424;
    transition: all 0.3s; }

.wht_btn {
  background-color: #fff;
  color: #1E2424;
  border-bottom: 4px solid #454545;
  padding: 2.5% 8%;
  display: inline-block; }

.img_overlay {
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 3%;
  right: 0px;
  min-height: 304px;
  max-width: 316px;
  opacity: 0;
  transition: .5s ease;
  background-color: #F5E612; }

.typographic:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background-image: url("../imgs/typograph.svg");
  background-size: cover;
  opacity: 0.4;
  width: 65%;
  height: 100%; }

.typographic-blk:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background-image: url("../imgs/typographic-black.svg");
  background-size: cover;
  opacity: 0.4;
  width: 65%;
  height: 100%; }

#vert_menu_scrll {
  background-color: #F5E612;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 32px; }
  #vert_menu_scrll svg {
    transform: translate(10px, -40px); }

.cont-sub #name, .cont-sub #email {
  border: none;
  border-bottom: 2px solid #F5E612;
  display: flex;
  padding: 2% 0;
  font-size: 1.2em;
  width: 96%; }
.cont-sub label {
  display: none; }
.cont-sub span {
  margin: 0 10px 10px 0;
  vertical-align: top;
  width: 49%; }
.cont-sub #submit {
  display: block;
  width: 100%;
  border: none;
  padding: 1.5% 0;
  font-size: 1.3em;
  text-transform: uppercase;
  color: #F5E612;
  background-color: #1E2424; }
  .cont-sub #submit:hover {
    background-color: #F5E612;
    color: #1E2424;
    transition: 0.3s all;
    cursor: pointer; }
.cont-sub #textarea {
  height: 200px;
  border-color: currentcolor currentcolor #f5e612;
  border-style: none none solid;
  border-width: 0px 0px 2px;
  margin-bottom: 10%;
  margin-top: 5%;
  width: 96%;
  resize: none;
  font-size: 1.2em;
  font-family: inherit; }

.cont-sub #email {
  align: right; }

/*-------------------End Form Styles----------------------------*/
#main_banner {
  position: relative; }
  #main_banner #qlinks {
    width: 100%;
    position: absolute;
    z-index: 99;
    list-style: none;
    top: 4%; }
    #main_banner #qlinks li {
      margin-right: 3%;
      display: inline;
      border-bottom: 2px solid #F5E612; }
      #main_banner #qlinks li a {
        color: #fff; }
    #main_banner #qlinks #logo svg {
      width: 7%; }
  #main_banner header {
    background-color: #fff;
    z-index: 9999;
    position: fixed;
    width: 7%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline; }
    #main_banner header .overlay {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 100;
      left: 0;
      top: 0;
      background-color: black;
      overflow-x: hidden;
      transition: 0.5s; }
      #main_banner header .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s; }
        #main_banner header .overlay a:hover {
          color: #F5E612;
          cursor: pointer; }
      #main_banner header .overlay .vert_nav {
        position: relative;
        top: 25%;
        width: 100%;
        margin: 30px 30px auto; }
        #main_banner header .overlay .vert_nav:hover {
          color: #F5E612; }
        #main_banner header .overlay .vert_nav:focus {
          color: #f1f1f1; }
      #main_banner header .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px; }
    #main_banner header .nav-icon {
      font-size: 6em;
      transform: rotate(90deg); }
      #main_banner header .nav-icon:hover {
        cursor: pointer; }
  #main_banner picture {
    width: 93%;
    margin-left: auto;
    height: 800px;
    display: block;
    position: relative;
    overflow: hidden; }
    #main_banner picture img {
      min-width: 100%;
      min-height: 800px;
      position: absolute;
      left: -9999px;
      right: -9999px;
      margin: 0 auto; }
    #main_banner picture:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 2;
      background: rgba(245, 230, 18, 0.8);
      width: 50%; }
  #main_banner .banner_content {
    position: absolute;
    top: 30%;
    left: 10%;
    right: 0;
    z-index: 99; }
    #main_banner .banner_content #test h1 {
      padding: 1% 0 10%; }
      #main_banner .banner_content #test h1 span {
        background-color: #1E2424;
        color: #F5E612;
        font-weight: 400;
        display: inline; }

.multi_banner {
  position: inherit !important; }
  .multi_banner .nav-icon {
    color: #1E2424; }
  .multi_banner #logo svg path {
    fill: #F5E612; }
  .multi_banner .case_study_wrap {
    padding: 12% 0; }
    .multi_banner .case_study_wrap h3 {
      padding: 0 0 5%; }
    .multi_banner .case_study_wrap .case_study_box {
      background-color: #F5E612;
      max-width: 1000px;
      min-height: 530px; }
      .multi_banner .case_study_wrap .case_study_box img {
        display: block;
        transform: translate(35px, 43px); }

.banner_content > div:nth-child(1) > span:nth-child(1) {
  font-size: 2.5em; }

.intro_cont {
  padding: 10% 0; }

/*div.group:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h2:nth-child(2){position: absolute; top: 60%; right:70%;}

div.group:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h2:nth-child(2){position: absolute; top: 57%; right:23%;}

div.group:nth-child(4) > div:nth-child(1) > div:nth-child(1) > h2:nth-child(2){position: absolute; top: 75%; right:70%;}*/
.clients_section {
  margin: 10% 0; }
  .clients_section h2 {
    padding: 0 0 5%; }

.services_section {
  padding-bottom: 20%;
  padding: 15% 0; }
  .services_section h2 {
    padding: 5% 0; }
    .services_section h2:nth-child(2) {
      transform: translate(90px, -225px); }
  .services_section .services_box_wrap {
    min-height: 750px; }
    .services_section .services_box_wrap .push {
      transform: translateY(230px);
      margin-bottom: 40%; }
    .services_section .services_box_wrap .services_bx {
      background-color: #F5E612;
      max-width: 330px;
      height: auto; }
      .services_section .services_box_wrap .services_bx h2 {
        height: 0; }
      .services_section .services_box_wrap .services_bx picture img {
        transform: translate(35px, 43px); }

.work_section {
  padding: 0 2%; }
  .work_section .proj_bckgrnd {
    padding: 4% 0;
    background-color: #fff; }
    .work_section .proj_bckgrnd .proj_img {
      max-width: 420px;
      background-color: #daa783; }
      .work_section .proj_bckgrnd .proj_img img {
        transform: translate(35px, 35px); }
    .work_section .proj_bckgrnd .proj_cont {
      padding: 8% 0 0 16%; }
      .work_section .proj_bckgrnd .proj_cont h2 {
        color: #1E2424; }

/*------Latest work page-------*/
.work-section{
  width:100%;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.work_bx{
  margin-bottom:175px;
}

.work .work_bx {
  width: 310px;
  margin: 40px;
}
  .work .work_bx:hover .img_overlay {
    opacity: 1; }
  .work .work_bx img {
    box-shadow: -40px -30px 0px 10px #1e2424; }

.latest_work_row {
  margin: 10% 0; }

/*------End Latest work page------*/
/*------Start Individual Services page------*/
.service_intro .services_img_cont {
  background-color: #F5E612;
  background-image: url("../imgs/typographic-black.svg");
  background-size: cover;
  width: 520px;
  height: 504px;
  display: flex;
  align-items: center;
  justify-content: center; }

.services_process .process_bx {
  background-color: #1E2424;
  color: #fff;
  padding: 8%;
  margin-top: 16%;
  min-height: 340px; }
  .services_process .process_bx h3 {
    color: #F5E612; }

#testim_section {
  background-image: url("../imgs/diamond.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 900px; }
  #testim_section h2 {
    padding: 5% 0 0; }

.operate_section {
  margin-top: 20%; }
  .operate_section .operate_wrap {
    display: flex;
    justify-content: center;
    align-items: center; }
    .operate_section .operate_wrap .operate_background {
      background-image: url("../imgs/operate_image.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      max-width: 100%;
      min-height: 800px; }
    .operate_section .operate_wrap .grid_3_of_6 {
      position: relative; }
      .operate_section .operate_wrap .grid_3_of_6 .operate_content div {
        position: absolute;
        max-width: 450px;
        background-color: #1E2424;
        right: 65%;
        padding: 0 10%;
        bottom: 100%; }
        .operate_section .operate_wrap .grid_3_of_6 .operate_content div h2 {
          color: #F5E612; }

.ylw-border {
  border: solid 40px #F5E612;
  padding: 0 3%; }
  .ylw-border .typographic:before {
    width: 35%;
    height: 50%; }
.pro-show{
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  padding:20px;
}
.team-cont .img-center {
  display: block;
  box-shadow: 33px 20px 0px 0px #1E2424;
  background-color: #1E2424;
  width:250px;
  height:350px;
  margin:20px;
 }

.team-cont img:hover{
    -webkit-filter:grayscale(100%);
    filter: grayscale(100%);
    cursor: pointer;
    transition: all .3s;
}

.case_study_intro .grid_3_of_6 .case_study_cont div {
  padding: 5% 15%; }
  .case_study_intro .grid_3_of_6 .case_study_cont div li {
    margin-top: 2%;
    list-style: none; }
    .case_study_intro .grid_3_of_6 .case_study_cont div li a {
      display: inline-block;
      color: #F5E612;
      padding: 5% 0; }

.case_study_intro .grid_3_of_6 .case_study_cont div .client_icon {
  padding-left: 0; }

.company_description {
  max-width: 70%; }

.case_study_site {
  padding: 10% 0; }
  .case_study_site .site_info h2 {
    color: #1E2424; }

.mobile_showcase {
  padding: 10% 0; }
  .mobile_showcase .mobile_site_bx {
    background-color: #F5E612; }
    .mobile_showcase .mobile_site_bx img {
      transform: translate(47px, 23px); }
  .mobile_showcase .mobile_site_description {
    margin-left: 12%; }
    .mobile_showcase .mobile_site_description h2 {
      color: #1E2424; }

.multi_pages {
  padding: 5%; }
  .multi_pages .page_bx_wrap {
    background-color: #F5E612;
    max-width: 350px; }
    .multi_pages .page_bx_wrap .page_bx {
      max-width: 320px;
      max-height: 520px;
      overflow: auto;
      transform: translate(37px, 23px); }
  .multi_pages h2 {
    color: #1E2424;
    padding: 5% 0; }


.multi_contact .contact_cont h2 {
  padding: 5% 0 10%; }

footer #footer_cont {
  padding: 2% 0; }
  footer #footer_cont ul li {
    margin: 0 7% 0 0;
    border-bottom: 2px solid #F5E612;
    display: inline; }
    footer #footer_cont ul li a {
      color: #1E2424; }

@media only screen and (max-width: 1250px) {
  #main_banner #qlinks {
    top: -1%;
    z-index: 101;
    margin: 0 auto;
    width: 50%;
    left: 0;
    right: 0; }
    #main_banner #qlinks li {
      display: none; }
    #main_banner #qlinks #logo {
      position: fixed;
      width: 50%; }
      #main_banner #qlinks #logo svg {
        width: 15%;
        color: #F5E612; }
  #main_banner header {
    width: 100%;
    height: 70px;
    justify-content: left;
    align-items: center;
    z-index: 100; }
    #main_banner header span {
      width: 17%;
      text-align: center; }
  #main_banner picture {
    width: 100%;
    height: 600px; }
    #main_banner picture img {
      min-height: 500px; }
  #main_banner .banner_content {
    left: 0%;
    top: 35%; }
    #main_banner .banner_content h1 {
      font-size: 6em; }
      #main_banner .banner_content h1 span {
        display: inline-block !important; }

  #vert_menu_scrll {
    display: none; }

  .multi_banner #logo svg path {
    fill: #1E2424; } }
@media only screen and (min-width: 1024px) {
  .cont-sub span {
    margin: 0 6px 10px 0; } }
@media only screen and (max-width: 1024px) {
  h2 {
    font-size: 2.5em;
    line-height: 52px; }

  h3 {
    font-size: 2em;
    text-transform: uppercase; }

  section {
    padding: 0%; }

  #Layer_1 {
    display: none; }

  #mobile_logo {
    display: block;
    max-height: 85px;
    margin: 0 auto; }

  .typographic:before {
    width: 100%;
    height: 64%; }

  #vert_menu_scrll {
    display: none; }

  .multi_banner #logo svg path {
    fill: #1E2424; }

  #main_banner #qlinks {
    top: -1%;
    z-index: 101;
    margin: 0 auto;
    width: 50%;
    left: 0;
    right: 0; }
    #main_banner #qlinks li {
      display: none; }
    #main_banner #qlinks #logo {
      position: fixed;
      width: 50%; }
      #main_banner #qlinks #logo svg {
        width: 15%;
        color: #F5E612; }
  #main_banner header {
    width: 100%;
    height: 70px;
    justify-content: left;
    align-items: center;
    z-index: 100; }
    #main_banner header span {
      width: 13%;
      text-align: center; }
  #main_banner picture {
    width: 100%;
    height: 600px; }
    #main_banner picture img {
      min-height: 500px; }
  #main_banner .banner_content {
    left: 0%;
    top: 35%; }
    #main_banner .banner_content h1 {
      font-size: 6em; }
      #main_banner .banner_content h1 span {
        display: inline-block !important; }

  .banner_content > div:nth-child(1) > span:nth-child(1) {
    font-size: 1.7em; }

  .multi_banner .case_study_wrap h3 {
    padding: 20% 0 5%; }
  .multi_banner .case_study_wrap .case_study_box {
    max-width: 650px;
    min-height: 190px; }
    .multi_banner .case_study_wrap .case_study_box img {
      max-width: 100%;
      height: auto;
      transform: translate(10px, 10px); }

  .services_section h2:nth-child(2) {
    transform: translate(24px, -130px);
    text-align: center; }
  .services_section .services_box_wrap {
    height: 40vh;
    min-height: 400px; }
    .services_section .services_box_wrap .push {
      transform: translateY(112px); }
    .services_section .services_box_wrap .grid_3_of_6 {
      width: 49.2%; }
      .services_section .services_box_wrap .grid_3_of_6 .services_bx {
        max-width: 290px; }
        .services_section .services_box_wrap .grid_3_of_6 .services_bx picture img {
          transform: translate(20px, 46px);
          max-width: 100%; }

  .services_process .process_bx {
    min-height: 375px; }

  .work_section {
    padding: 0 2%; }
    .work_section .proj_bckgrnd:nth-child(1), .work_section .proj_bckgrnd:nth-child(2), .work_section .proj_bckgrnd:nth-child(3) {
      padding: 8% 0; }
    .work_section .proj_bckgrnd .proj_cont {
      padding: 8% 0 0; }

  .operate_section {
    margin-top: 15%; }
    .operate_section .operate_wrap {
      display: block; }
      .operate_section .operate_wrap .grid_3_of_6 .operate_content div {
        position: relative;
        right: 0; }

  .case_study_intro .grid_3_of_6 .case_study_cont div {
    padding: 5% 10%; }

  .mobile_showcase .mobile_site_bx img {
    max-width: 100%;
    height: auto;
    transform: translate(7px, 20px); }

  .multi_pages .page_bx_wrap {
    margin: 15% 0 15%; }
    .multi_pages .page_bx_wrap .page_bx {
      transform: translate(23px, 23px); }

  .company_description {
    max-width: 100%; }

  .mobile_showcase .mobile_site_description {
    margin: 16% 0; }

  #testim_section {
    max-height: 500px; }

  .ylw-border {
    border: solid 17px #F5E612; }
    .ylw-border .typographic:before {
      width: 55%;
      height: 34%; }

  .cont-sub span {
    width: 100%;
    margin: 0 0 10% 0; }
    .cont-sub span #name, .cont-sub span #email {
      width: 96%; }
  .cont-sub #textarea {
    width: 942px;
    height: 160px; }
  .cont-sub #submit {
    padding: 2.5% 0; }

  .service_intro .services_img_cont {
    max-width: 400px;
    max-height: 400px; }

  .work {
    padding: 5%; }
    .work .work_bx {
      max-width: 255px; }
      .work .work_bx img {
        transform: translate(25px, 25px); }

  footer #footer_cont {
    padding: 3% 0; }
    footer #footer_cont .grid_3_of_6 {
      width: 49.2%; }
      footer #footer_cont .grid_3_of_6 ul {
        text-align: center; }
        footer #footer_cont .grid_3_of_6 ul li {
          margin: 0 7% 0 0;
          padding: 0; } }
@media only screen and (max-width: 768px) {
  .center-img{
    
  }
  .center-img img{
    width:50%;
    margin:0;
    padding-bottom:15px;
  }
  .grid_1_of_6, .grid_2_of_6, .grid_3_of_6, .grid_4_of_6, .grid_5_of_6 {
    width: 100%;
    margin: 1% 0 1% 0%; }

  h2 {
    font-size: 2.5em;
    line-height: 52px; }

  h3 {
    font-size: 2em;
    text-transform: uppercase; }

  section {
    padding: 0%; }

  #Layer_1 {
    display: none; }

  #mobile_logo {
    display: block;
    max-height: 85px;
    margin: 0 auto; }

  .typographic:before {
    width: 100%;
    height: 64%; }

  #vert_menu_scrll {
    display: none; }

  #main_banner #qlinks {
    top: -1%;
    z-index: 101;
    margin: 0 auto;
    width: 50%;
    left: 0;
    right: 0; }
    #main_banner #qlinks li {
      display: none; }
    #main_banner #qlinks #logo {
      position: fixed;
      width: 50%; }
      #main_banner #qlinks #logo svg {
        width: 15%;
        color: #F5E612; }
  #main_banner header {
    width: 100%;
    height: 70px;
    justify-content: left;
    align-items: center;
    z-index: 100; }
    #main_banner header span {
      width: 16%;
      text-align: center; }
  #main_banner picture {
    width: 100%;
    height: 600px; }
    #main_banner picture img {
      min-height: 500px; }
  #main_banner .banner_content {
    left: 0%;
    top: 35%; }
    #main_banner .banner_content h1 {
      font-size: 4em; }
      #main_banner .banner_content h1 span {
        display: inline-block !important; }

  .banner_content > div:nth-child(1) > span:nth-child(1) {
    font-size: 1.7em; }

  .multi_banner .case_study_wrap h3 {
    padding: 20% 0 5%; }
  .multi_banner .case_study_wrap .case_study_box {
    max-width: 650px;
    min-height: 190px; }
    .multi_banner .case_study_wrap .case_study_box img {
      max-width: 100%;
      height: auto;
      transform: translate(10px, 10px); }

  .clients_section .grid_1_of_6 {
    text-align: center;
    width: 50%; }

  .services_section h2:nth-child(2) {
    transform: translate(24px, -130px);
    text-align: center; }
  .services_section .services_box_wrap {
    height: 80vh;
    min-height: 400px; }
    .services_section .services_box_wrap .push {
      transform: translateY(112px); }
    .services_section .services_box_wrap .grid_3_of_6 {
      width: 49.2%; }
      .services_section .services_box_wrap .grid_3_of_6 .services_bx {
        float: none;
        max-width: 290px;
        max-height: 290px; }
        .services_section .services_box_wrap .grid_3_of_6 .services_bx picture img {
          transform: translate(20px, 20px);
          max-width: 100%; }

  .work_section {
    padding: 0 5%; }
    .work_section .proj_bckgrnd:nth-child(1), .work_section .proj_bckgrnd:nth-child(2), .work_section .proj_bckgrnd:nth-child(3) {
      padding: 8% 0; }
    .work_section .proj_bckgrnd .proj_cont {
      padding: 8% 0 0; }
    .work_section .proj_bckgrnd .proj_img {
      max-width: 290px; }
      .work_section .proj_bckgrnd .proj_img img {
        transform: translate(20px, 23px); }

  .operate_section {
    margin-top: 15%; }
    .operate_section .operate_wrap {
      display: block; }
      .operate_section .operate_wrap .grid_3_of_6 .operate_content div {
        position: relative;
        right: 0; }

  .case_study_intro .grid_3_of_6 .case_study_cont div {
    padding: 5% 4%; }

  #case_study_company .services_box_wrap {
    height: 70vh; }
    #case_study_company .services_box_wrap .services_bx {
      max-height: 500px; }

  .mobile_showcase .mobile_site_bx {
    max-width: 550px; }
    .mobile_showcase .mobile_site_bx img {
      max-width: 100%;
      height: auto;
      transform: translate(57px, 54px); }

  .multi_pages .grid_2_of_6 {
    width: 32.26%; }
    .multi_pages .grid_2_of_6 .page_bx_wrap {
      max-width: 170px;
      margin: 15% 0 15%; }
      .multi_pages .grid_2_of_6 .page_bx_wrap .page_bx {
        transform: translate(23px, 23px);
        max-height: 330px; }

  .company_description {
    max-width: 100%; }

  .mobile_showcase .mobile_site_description {
    margin: 16% 0; }

  #testim_section {
    max-height: 500px; }

  .team-cont .img-center {
    /*margin:20% 0  auto;*/
    box-shadow: 25px 20px 0 0 #F5E612; }

  .ylw-border {
    border: solid 17px #F5E612; }
    .ylw-border .typographic:before {
      width: 80%;
      height: 50%; }

  .cont-sub span {
    width: 100%; }
    .cont-sub span #name, .cont-sub span #email {
      width: 96.5%; }
  .cont-sub #textarea {
    width: 706px;
    height: 160px; }
  .cont-sub #submit {
    padding: 4% 0; }

  footer #footer_cont {
    padding: 3% 0; }
    footer #footer_cont .grid_3_of_6 {
      width: 49.2%; }
      footer #footer_cont .grid_3_of_6 ul {
        text-align: center; }
        footer #footer_cont .grid_3_of_6 ul li {
          margin: 0 3% 0 0;
          padding: 0; } }
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .grid_1_of_6, .grid_2_of_6, .grid_3_of_6, .grid_4_of_6, .grid_5_of_6 {
    width: 100%;
    margin: 1% 0 1% 0%; }

  .grid_6_of_6 {
    width: 100%;
    margin: 0 0 1% 0; }

  ul li {
    margin: 4% 1%; }

  h2 {
    font-size: 2.5em;
    line-height: 52px; }

  h3 {
    font-size: 2em;
    text-transform: uppercase; }

  input {
    -webkit-appearance: none;
    border-radius: 0; }

  section {
    padding: 3%; }

  #Layer_1 {
    display: none; }

  #mobile_logo {
    display: block;
    max-height: 85px;
    margin: 0 auto; }

  .typographic:before {
    width: 100%;
    height: 90%; }

  #vert_menu_scrll {
    display: none; }

  #main_banner #qlinks {
    top: -1%;
    z-index: 101;
    margin: 0 auto;
    width: 50%;
    left: 0;
    right: 0; }
    #main_banner #qlinks li {
      display: none; }
    #main_banner #qlinks #logo {
      position: fixed;
      width: 50%; }
      #main_banner #qlinks #logo svg {
        width: 31%;
        color: #F5E612; }
  #main_banner header {
    width: 100%;
    height: 70px;
    justify-content: left;
    align-items: center;
    z-index: 100; }
    #main_banner header span {
      width: 25%;
      text-align: center; }
  #main_banner picture {
    width: 100%;
    height: 600px; }
    #main_banner picture img {
      min-height: 500px; }
  #main_banner .banner_content {
    left: 0%;
    top: 35%; }
    #main_banner .banner_content #test h1 {
      font-size: 4em; }
      #main_banner .banner_content #test h1 span {
        display: inline-block !important; }

  .banner_content > div:nth-child(1) > span:nth-child(1) {
    font-size: 1.7em; }

  .multi_banner .case_study_wrap h3 {
    padding: 20% 0 5%; }
  .multi_banner .case_study_wrap .case_study_box {
    max-width: 350px;
    min-height: 190px; }
    .multi_banner .case_study_wrap .case_study_box img {
      max-width: 100%;
      height: auto;
      transform: translate(10px, 10px); }

  .clients_section .grid_1_of_6 {
    text-align: center;
    width: 50%; }

  .services_section h2:nth-child(2) {
    transform: translate(24px, -130px);
    text-align: center; }
  .services_section .services_box_wrap {
    height: 110vh; }
    .services_section .services_box_wrap .push {
      transform: translateY(112px); }
    .services_section .services_box_wrap .grid_3_of_6 {
      width: 100%; }
      .services_section .services_box_wrap .grid_3_of_6 .services_bx {
        max-width: 290px; }
        .services_section .services_box_wrap .grid_3_of_6 .services_bx picture img {
          transform: translate(20px, 46px);
          max-width: 100%; }

  .work_section .proj_bckgrnd:nth-child(1), .work_section .proj_bckgrnd:nth-child(2), .work_section .proj_bckgrnd:nth-child(3) {
    padding: 8% 0; }
  .work_section .proj_bckgrnd .proj_cont {
    padding: 8% 0 5%; }
  .work_section .proj_bckgrnd .proj_img {
    max-width: 290px;
    float: none; }
    .work_section .proj_bckgrnd .proj_img img {
      transform: translate(20px, 23px); }

  .case_study_intro .grid_3_of_6 .case_study_cont div {
    padding: 5% 4%; }

  .operate_section .operate_wrap {
    display: block; }
    .operate_section .operate_wrap .grid_3_of_6 .operate_content div {
      position: relative;
      right: 0; }

  .mobile_showcase .mobile_site_bx {
    max-width: 300px; }
    .mobile_showcase .mobile_site_bx img {
      max-width: 100%;
      height: auto;
      transform: translate(24px, 21px); }

  .multi_pages .grid_2_of_6 {
    width: 100%; }
    .multi_pages .grid_2_of_6 .page_bx_wrap {
      max-width: 350px;
      margin: 15% 0 15%; }
      .multi_pages .grid_2_of_6 .page_bx_wrap .page_bx {
        max-height: 520px;
        transform: translate(23px, 23px); }

  .company_description {
    max-width: 100%; }

  .mobile_showcase .mobile_site_description {
    margin: 16% 0; }

  .ylw-border {
    border: solid 17px #F5E612; }
    .ylw-border .typographic:before {
      width: 100%;
      height: 38%; }

  .team-cont .img-center {
    margin: 20% 0  auto;
    box-shadow: 25px 20px 0 0 #F5E612; }

  #testim_section {
    max-height: 500px; }

  .cont-sub span {
    width: 100%; }
    .cont-sub span #name, .cont-sub span #email {
      width: 97%; }
  .cont-sub #textarea {
    width: 324px;
    height: 160px; }
  .cont-sub #submit {
    padding: 4% 0; }

  .work .work_bx {
    max-width: 280px;
    margin: 10% auto; }
    .work .work_bx img {
      transform: translate(30px, 31px); }

  .service_intro .services_img_cont {
    max-width: 324px;
    max-height: 324px; }
    .service_intro .services_img_cont img {
      max-width: 250px; }

  .content a .content-overlay {
    left: 10%;
    top: 11%; }

  footer #footer_cont {
    padding: 20% 0 0; }
    footer #footer_cont ul {
      margin: 10% 0;
      text-align: center; }
    footer #footer_cont .grid_3_of_6 {
      width: 100%; } }
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px; }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px; } }