/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
/*heathertysco.com*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amita&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,500i,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Expletus+Sans:600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:600,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url("https://use.typekit.net/boo7hre.css");

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome/fontawesome-webfont.eot'); /* IE9 Compat Modes */
  src: url('/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/fontawesome/fontawesome-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/fonts/fontawesome/fontawesome-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/fontawesome/fontawesome-webfont.svg') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat/Montserrat-Light.ttf'),
       url('/fonts/montserrat/Montserrat-Medium.ttf') format('truetype'),
       url('/fonts/montserrat/Montserrat-Regular.ttf') format('truetype'),
       url('/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype'),
       url('/fonts/montserrat/Montserrat-Bold.ttf')  format('truetype'),
       url('/fonts/montserrat/Montserrat-RegularItalic.ttf') format('truetype');
}
.fontawesome-i2svg-active, .fontawesome-i2svg-complete {
  /*overflow-x: hidden;*/
}
/*FONT AWESOME FIX*/
/* general styling shared between versions */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;}
/* version 4's styling (using calendar-o) */
.calendar::before {
  font-family: FontAwesome;
  content: "\f133";}
/* version 5's styling (using updated regular style of calendar) */
.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";}


html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, em, img, q, s, strong,
dl, dt, dd, ol, ul, li, tr, th, td,
article, aside, embed, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, 
footer, header, menu, nav, section {
  display: block;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
section {
  display: block;
  clear: both;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset {
  border: none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
}
::-ms-input-placeholder { /* Microsoft Edge */
}
.clearfix:after {
  content: ".";
  display: inline-block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.clearfix {
  display: block;
}
html[xmlns] .clearfix {
  display: inline-block;
  margin: 0;
  padding: 0;
}
* html .clearfix {
  margin: 0;
  padding: 0;
}
[class^="col-"] {width: 100%; max-width: 100%;}
/*END CSS RESET*/
body::-webkit-scrollbar {
    width: 15px;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background: #fff;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.5);
  outline: 1px solid rgba(0,0,0,0.5);
}
body::-webkit-scrollbar-thumb:hover {
  background: #3daeb5; 
}
*:before, *:after, form *, form *:before, form *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html {
  height: 100%; 
}
body {
  overflow-x: hidden;
  min-height: 100%;
  font: 18px/1.5em "Montserrat", sans-serif;
  background-color: #fff;
  color: #555;
  text-align: left;
  line-height: 1.5em;
  width: 100%;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
html, body, header {
  position: relative;
}
img {
	max-width: 100%;
	height: auto;
}
h1, h2 {
  font-weight: 600;
  line-height: 1.2em;
}
h1 {
  font-size: 2.8em;
}
h2 {
  font-size: 2em;
  color: #3daeb5;
}
.container {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}
.logo img {
  max-width: 200px;
  padding-top: 5px;
}
footer {
  padding: 20px 0;
  background: #555;
  font-size: 0.8em;
}
footer, footer a {
  color: #fff;
}
.active {

}
.max, .social, .button, .grid_text,
.contact_home, .blurb_content {
  text-align: center;
}
.fa-copyright:before {
    content: "\f1f9";
}
.copyright {
  float: left;
  width: 50%;
  letter-spacing: 0px;
}
.social {
  float: right;
  width: 25%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.full_container {
  max-width: none;
}
.button {
  position: relative;
  border: 2px solid transparent;
  padding: 10px 20px;
  font: 500 1em "Montserrat", sans-serif;
  text-decoration: none;
  display: inline-block;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  color: #555!important;
  border-width: 2px!important;
  border-color: #3daeb5;
  border-radius: 4px;
  letter-spacing: 1.5px;
  font-size: 12px;
  text-transform: uppercase!important;
  background-color: rgba(0,0,0,0);
}
.button:hover,
#contact_wrapper .reset:hover {
  color: #ffffff!important;
  background-image: initial!important;
  background-color: #3daeb5!important;
  border-color: #3daeb5!important;
}

/*HOMEPAGE*/
.hero {
  background: #555;
  position: relative;
  border-bottom: 7px solid #3daeb5 ;
}
.bold {
  font-weight: 600;
}
.color {
  color: #3daeb5;
}
.hero_text {
  color: #fff;
  padding: 80px 0 100px;
}
.portfolio_home {
  padding: 4rem 0;
}
.pf_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px 10px;
}
.grid_item {
  position: relative;
}
.grid_item img {
  width: 650px;
}
.opacity {
  opacity: 0;
  background: rgba(0,0,0,0.7);
  background: #3daeb5;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
.grid_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  color: #fff;
  width: 100%;
}
.opacity:hover {
  opacity: 1;
}
.grid_text h3 {
  font-size: 2em;
  font-weight: 600;
  line-height: 36px;
  padding: 0 10px;
}
.grid_text p {
  font-style: italic;
  font-size: 1.1em;
}
.grid_text h3, .contact_home {
  text-transform: uppercase;
}
.contact_home {
  padding: 5rem 10% 10rem;
}
.contact_home h2 {
  padding-bottom: 40px;
}

/*WORK PAGE*/
.work_title {
  text-transform: uppercase;
  padding: 40px 0 15px;
}
.pf_grid_work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px 10px;
}
.portfolio_work {
  padding-bottom: 40px;
}
.pf_grid_work .grid_item .opacity .grid_text h3 {
  font-size: 1.5em;
  line-height: 28px;
}
#work_spired {
  grid-area: 2 / 1;
}
#work_fg {
  grid-area: 1 / 3;
}

/*ABOUT PAGE*/
.about_text {
  width: 55%;
  max-width: 475px;
  float: left;
}
.about_text h2,
.about_text h3 {
  text-transform: uppercase;
}
.about_text h3 {
  font-weight: 600;
  padding: 5px 0 15px;
}
.about_text p,
.proj_txt p {
  line-height: 28px;
  font-weight: 300;
}
.about_img {
  width: 40%;
  float: right;
}
.about_tag {
  padding: 10px 0 30px;
  font-style: italic;
}
.about_section {
  min-height: 450px;
  padding: 2.8rem 0 3rem;
}

/*CONTACT PAGE*/
form input[type=text], 
form input[type=email],
form select, form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 16px;
}
.contact_form {
  border-radius: 2px;
  background-color: #d6d6d6;
  padding: 25px 30px 30px;
}
.contact_title,
.contact_form_h3 {
  text-transform: uppercase;
}
.contact_form_h3 {
  font-weight: 700;
}
.contact_title {
  padding-bottom: 20px;
}
.work_section {
  padding-bottom: 7rem;
}
.form {
  /*display: grid;*/
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
.contact_txt {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}
#fname {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
#name {
  grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}
#email {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
#subject {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}
#comment, #message {
  grid-column: 1 / span 2;
  grid-row: 3 / span 1;
}
#message {
  height: 175px;
}
#captcha {
  grid-column: 1 / span 2;
  grid-row: 4 / span 1;
}
#buttons {
  grid-column: 1 / span 2;
  grid-row: 5 / span 1;
}
.contact_btn {
  padding: 5px 0 10px;
}
.contact_btn .button {
  background: #fff;
}
.svg-inline--fa.fa-w-16 {
  width: 0.9em;
}



/*PROJECT PAGES*/
/******* *******/
.proj_section, .proj_left, .proj_right,
.proj_2col, .proj_3col, .proj_5col {
  float: left;
}
.proj_container {
  margin: 4rem 0;
}
.proj_section {
  margin: 2rem 0;
  clear: both;
}
.proj_container, .proj_section {
  width: 100%;
}
.screenshots, .web_mock {
  margin-top: 2rem;
}
.screenshots {
  padding: 2rem 0;
  background-color: #969696;
}
.aloma_ss {
  background-color: #333333!important;
}
.kazan_ss {
  background-color: #999999!important;
}
.fg_ss {
  background-color: #ccc!important;
}
.gx_ss {
  background-color: #777777!important;
}
.sp_ss {
  margin: 0 0 2rem; 
  background-color: #cccccc!important;
}
.stationary_1 {
  padding-top: 10px;
}
.scn_3 {
  margin-top: 0rem;
}
.proj_left {
  padding-right: 30px;
}
.proj_right {
  width: 55%;
}
.proj_2col {
  width: 50%;
}
.proj_3col {
  width: 33%;
}
.proj_5col {
  float: left;
  width: 20%;
}
.second_set {
  clear: both;
}
.proj_btn {
  margin: 1rem 0 4rem;
}
.proj_txt h2,
.proj_txt h3 {
  text-transform: uppercase;
}
.proj_txt h2 {
  padding-right: 15px;
  letter-spacing: -0.02em;
}
.proj_txt h3 {
  font-size: 0.9em;
  font-weight: 600;
}
.proj_hero {
  height: 400px;
}
.live_btn {
  margin: 20px 0;
}
.fs {
  height: 250px;
  margin-bottom: 2rem;
}
.max700 img {
  max-width: 650px;
}
.p-60 {width: 60%;}
.p-40 {width: 40%;}
#cph_hero {background: url(../images/cph/cph_hero.jpg)no-repeat;}
#kazan_hero {background: url(../images/kazan/kazan_hero.jpg)no-repeat;}
#aloma_hero {background: url(../images/aloma/aloma_hero.jpg)no-repeat;}
#fg_hero {background: url(../images/fg/fg_hero.jpg)no-repeat;}
#spired_hero {background: url(../images/spired/spired_hero.jpg)no-repeat;} 
#gx_hero {background: url(../images/gx/gx_hero.jpg)no-repeat;}
#cph_fs {background: url(../images/cph/cph_fullscreen_noborder.jpg)no-repeat;}
#kazan_fs {background: url(../images/kazan/kazan_fullscreen_noborder.jpg)no-repeat;}
#aloma_fs {background: url(../images/aloma/aloma_fullscreen_noborder.jpg)no-repeat;}
#fg_fs {background: url(../images/fg/fg_fullscreen_noborder.jpg)no-repeat;}
#spired_fs {background: url(../images/spired/spired_fullscreen_noborder.jpg)no-repeat;}
#gx_fs {background: url(../images/gx/gx_fullscreen_noborder.jpg)no-repeat;}
#cph_hero, #kazan_hero, #aloma_hero,
#fg_hero, #spired_hero, #gx_hero,
#cph_fs, #kazan_fs, #aloma_fs,
#fg_fs, #spired_fs, #gx_fs {background-size: cover; background-position: center;}
.type_wrap {
  padding: 10px 0;
}
.type_wrap:first-child {
  padding-top: 0;
}
.type_wrap:last-child {
  padding-bottom: 0;
}
.fonts, .img_left {
  padding-right: 10px;
}
.img_right {
  padding-left: 10px;
}
.img_cntr {
  padding: 0 10px;
}
.left_sp {padding-bottom: 20px;}
#cph_fonts {
  color: #3e4349!important;
}
.font_title {
  font-weight: 700;
  font-size: 13px;
  color: #777777!important;
}
.font_subj {
  line-height: 1em;
  padding-right: 10px!important;
  max-width: 450px;
}
.lora {
  font-family: 'Lora',Georgia,"Times New Roman",serif;
  font-style: italic;
  font-weight: 700;
}
.roboto {
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
  letter-spacing: 0.3px;
}
.amita {
  font-family: 'Amita',handwriting;
  color: #10100d!important;
}
.montserrat {
  font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; 
  color: #000000!important;
  letter-spacing: 0.3px;
  line-height: 1.4em;
}
.mont-alt {
  font-weight: 600;
  color: #10100d!important;
  letter-spacing: -0.1px;
}
.raleway {
  font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif!important;
  text-transform: uppercase;
  color: #10100d!important;
}
.avant {
  font-family: itc-avant-garde-gothic-pro,sans-serif!important;
  font-weight: 300!important;
  color: #10100d!important;
}
.bebas {
  font-family: bebas-neue,sans-serif!important;
  text-transform: uppercase;
  color: #10100d!important;
}
.expletus {
  font-family: 'Expletus Sans',display!important;
  font-weight: 600;
  font-size: 44px;
  color: #333333!important;
}
.proxima {
  font-family: proxima-nova,sans-serif!important;
  color: #333333!important;
  font-weight: 600;
}
.poppins {
  font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
  color: #000000!important;
}
.audiowide {
  font-family: 'Audiowide',display!important;
  text-transform: uppercase;
  font-size: 40px;
  color: #000000!important;
  letter-spacing: -1px;
}
#lora-h1 {font-size: 78px;}
#lora-h2 {font-size: 44px; font-style: normal;}
#lora-h3 {font-size: 32px;}
#roboto-h4 {font-size: 29px; text-transform: uppercase; font-weight: 700;}
#roboto-p {font-size: 16px; font-weight: 300; letter-spacing: 0.3px; line-height: 1.4em;}
#amita-h1 {font-size: 52px;}
#amita-h2 {font-size: 36px;}
#montserrat-p {font-size: 16px; font-weight: 300;}
#raleway-h1 {font-size: 48px; font-weight: 800;}
#raleway-h2 {font-size: 42px; font-weight: 600; letter-spacing: -0.5px;}
#avant-h3 {font-size: 27px; letter-spacing: -0.05px;}
#avant-p {font-size: 16px; letter-spacing: 0.3px; line-height: 1.4em;}
#bebas-h1 {font-size: 56px;}
#bebas-h2 {font-size: 45px;}
#montserrat_alt-h3 {font-size: 23.5px;}
#montserrat_alt-h4 {font-size: 19px;}
#montserrat_alt-p {font-size: 18px; font-weight: 500; color: #000000!important; letter-spacing: 0.3px; line-height: 1.4em;}
#proxima-h2 {font-size: 32px; letter-spacing: -0.1px;}
#proxima-h3 {font-size: 20px; text-transform: uppercase;}
#proxima-p {font-size: 17px; font-weight: 500; letter-spacing: 0.3px; line-height: 1.4em;}
#poppins-h1 {font-size: 50px; font-weight: 600; text-transform: uppercase;}
#poppins-p {font-size: 16px; font-weight: 500; letter-spacing: 0.3px; line-height: 1.4em;}
.blurb_wrap, .blurb_content, .blurb_img, .blurb_img span, .blurb_txt, .blurb_name, .blurb_nbr { margin: 0; padding: 0; border: 0;}
.blurb_wrap, .blurb_img, .blurb_img span { border-width: 0; border-style: solid; border-color: #333; text-align: left;}
.colors {
  position: relative;
  z-index: 2;
}
.blurb_wrap {
  overflow: hidden;
  font-size: 16px;
  color: #999999!important;
  border-color: #999999!important;
  border-radius: 2px;
  border-width: 0.5px;
  margin-bottom: 8px!important;
  max-width: 400px;
}
.blurb_content {
  position: relative;
  max-width: 550px;
  border-right: 0.5px solid #999;
  z-index: -999;
  margin: 0 auto;
}
.blurb_img {
  display: table-cell;
  width: 32px;
  line-height: 0;
}
.blurb_img span {
  display: block;
  width: 125px;
  border-right-width: 1px;
  border-color: #777 #999 #777 #777;
}
.blurb_img span img {
  opacity: 1;
}
.blurb_txt {
  padding-left: 15px;
  display: table-cell;
  vertical-align: top;
}
.blurb_name {
  max-width: 100%;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 0em;
  text-align: left;
  color: #555;
  padding-bottom: 10px;
  padding-top: 23px; 
}
.blurb_nbr span {
  padding-bottom: 0;
  text-align: left;
  font-weight: 500;
}
.m-crct {margin-left: -5px;}
.m-crct1 {margin-left: -10px;}
.m-crct2 {margin-left: -20px;}
.m-crct3 {margin-left: -30px;}
.m-crct35 {margin-left: -35px;}
.m-crct4 {margin-left: -40px;}
.m-crct45 {margin-left: -45px;}
.m-crct5 {margin-left: -50px;}
.m-crct55 {margin-left: -55px;}
.m-crct6 {margin-left: -60px;}
.icons {
  margin: 2rem 0; 
}
.aloma_icons {
  background: #000;
}
.spired_icons {
  background-color: #747f83;
  margin: 2rem 0 0;
}
.aloma_icons .icon_grid,
.spired_icons .icon_grid {
  display: grid;
  grid-gap: 15px;
  text-align: center;
  align-items: baseline;
  padding: 2rem 0;
}
.aloma_icons .icon_grid {
  grid-template-columns: repeat(6, 1fr);
}
.spired_icons .icon_grid {
  grid-template-columns: repeat(3, 1fr);
}
.aloma_icons .icon_img img {
  max-height: 60px;
}
.gx_img img {
  max-height: 275px;
}

/*CAPTCHA*/
#contact_wrapper {}
#contact_wrapper legend {}
#contact_wrapper .genField {
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -webkit-box-sizing:border-box; 
  -moz-box-sizing:border-box; 
  box-sizing:border-box;
}
#contact_wrapper .genField.auto { width:auto; }
#contact_wrapper textarea.genField { min-height:200px; }
#contact_wrapper .button {
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#contact_wrapper .f_left { float:left; }
#contact_wrapper .f_radio{ font-weight:normal; display:block; }
#contact_wrapper .submit { background-color: #ffffff; }
#contact_wrapper .reset { margin-left: 10px; border-color: #aaa; color: #777!important; }
#contact_wrapper input.error, #contact_wrapper textarea.error { border: 1px dashed #F41724; }
#contact_wrapper label {
  display: block;
  width:auto;
  line-height: 1.8;
  vertical-align: top;
  cursor: pointer;
  color: #222;
  margin-top:12px;
}
#contact_wrapper label.error {font-size:80%; color:#F41724; margin-top:2px; float: right; }
#contact_wrapper .captcha label.f_left { margin:7px 10px inherit inherit;}
#contact_wrapper #results p {
  padding: 20px;
  color: #FFFFFF;
  border-radius: 5px;
}
#contact_wrapper #results p.sending_success { background-color: #337AB7; }
#contact_wrapper #results p.sending_error   { background-color: #D9534F; }    
.rc-anchor-error-message {
  color: #ff0000;
  font-family: "montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  padding: 0 10px;
}
.margin-contact {
  margin-top: 20px;
}


/*HAMBURGER MENU BEGIN*/
.hamburger-header .hamburger-menu-btn {
  display: none;
}
.hamburger-header {
  padding: 20px 0;
  border-bottom: none;
  background: #555;
  height: 60px;
}
.hamburger-menu {
  font: 400 1em "Montserrat", sans-serif;
  list-style-type: none;
  z-index: 1000;
  padding-top: 20px;
  float: right;
  z-index: 1000;
}
.hamburger-menu li {
  display: inline-block;
  padding: 0 20px;
}
.hamburger-menu li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}
.hamburger-menu li:last-child {
  border-bottom: none;
  padding-right: 0;
}
.hamburger-menu li a:hover,
.social a:hover {
  color: #3daeb5!important;
}
.active {
  border-bottom: 2px solid #3daeb5!important ;
}
.fa-linkedin-in {
  vertical-align: text-top;
}
/*HAMBURGER MENU END*/



/*MEDIA QUERY STARTS*/
@media screen and (max-width: 1070px) {
  .container {width: 90%;}
}

@media screen and (max-width: 960px) {
  .proj_right {
    width: 47%;
  }
}

@media screen and (max-width: 870px) {
  .hamburger-menu {
    right: 4%;
  }
  .hamburger-menu li {
    padding: 0 15px;
  }
  .pf_grid_work {
    grid-template-columns: repeat(2, 1fr);
  }
  #work_spired {
    grid-area: 2 / 1;
  }
  #work_fg {
    grid-area: 2 / 2;
  }
}

@media screen and (max-width: 835px) {
  .hamburger-menu li {
    padding: 0px 10px;
  } 
}


/*MOBILE SCREEN SIZE*/
@media screen and (max-width: 768px) {
/*HAMBURGER MENU*/
  .hamburger-header {
    width: 100%;
    z-index: 3;
  }
  .hamburger-header ul {
    margin: 20px 0 -15px;
    padding: 0;
    text-align: center;
    list-style: none;
    overflow: hidden;
  }
  .hamburger-header li a {
    display: block;
    padding: 20px 20px;
    text-decoration: none;
  }
  .hamburger-menu {
    font-size: 21px;
    font-size: 1.3em;
    display: flex;
    position: absolute;
    top: 52px;
    right: 10%;
    float: none;
    background: #555;
  }
  .hamburger-menu li {
    display: block;
    padding: 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 0.5px solid #e8e8e8;
  }
  .hamburger-menu li a {
    color: #e8e8e8;
  }
  .hamburger-header li a:hover {
    border-bottom: none;
    padding-bottom: 20px;
    background-color: #e8e8e8;
    color: #000;
    font-weight: 500;
  }
  .hamburger-menu li:first-child {
    border-top: 1.5px solid #e8e8e8;
  }
  .hamburger-header .hamburger-menu {
    display: block;
    position: static;
    clear: both;
    max-height: 0;
    transition: max-height .5s ease-out;
  }
/* HAMBURGER MENU ICON */
  .hamburger-header .hamburger-menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 30px 10px;
    position: relative;
    user-select: none;
  }
  .hamburger-header .hamburger-menu-icon .navicon {
    background: #fff;
    display: block;
    height: 3px;
    position: relative;
    transition: background .2s ease-out;
    width: 30px;
  }
  .hamburger-header .hamburger-menu-icon .navicon:before,
  .hamburger-header .hamburger-menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  /* HAMBURGER MENU BUTTON */
  .hamburger-header .hamburger-menu-icon .navicon:before {
    top: 8px;
  }
  .hamburger-header .hamburger-menu-icon .navicon:after {
    top: -8px;
  }
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu {
    max-height: 600px;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  }
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu-icon .navicon {
    background: transparent;
  }
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu-icon:not(.steps) .navicon:before,
  .hamburger-header .hamburger-menu-btn:checked ~ .hamburger-menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  .w3-display-container {
    padding-bottom: 70px;
  }
  .proj_right {
    width: 100%;
    max-width: 500px;
  }
  .about_text {
    padding-top: 20px;
  }
  .about_text {
    width: 100%;
    max-width: 520px
  }
  .about_img {
    width: 60%;
    float: none;
  }
  .proj_section, .proj_left, .proj_right, .proj_2col, .proj_3col {
    float: none;
  }
  .proj_1col, .proj_2col, .proj_3col {
    width: 100%;
  }
  .proj_5col {
    width: 50%;
  }
  .img_left, .img_right, .img_cntr, .stationary_1 {
    padding: 0;
  }
  .left_sp {padding: 0 10px 10px 0;}
  .right_sp {padding: 0 0 10px 10px;}
  .md-query {
    padding-top: 2rem;
  }
  .font-sect, .stationary_mockup, .em-mock {
    margin-top: 4rem;
  }
  .aloma_icons .icon_grid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px 15px;
  }
  .spired_icons .icon_grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .z-query {
    padding-top: 0;
  }
}

@media screen and (max-width: 720px) {
  .header {
    height: 160px;
  }
  .pf_grid,
  .pf_grid_work {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px 0;
  }
  .portfolio_home {
    padding: 2.5rem 0;
  }  
  #work_cph, #cph {
    grid-area: 1 / 1;
  }
  #work_aloma, #aloma {
    grid-area: 2 / 1;
  }
  #work_spired, #spired {
    grid-area: 4 / 1;
  }
  #work_fg, #fg {
    grid-area: 3 / 1;
  }
  #work_kazan, #kazan {
    grid-area: 5 / 1;
  }
  #work_gx, #gx {
    grid-area: 6 / 1;
  }
  .pf_grid_work .grid_item .opacity .grid_text h3 {
    font-size: 2em;  
    line-height: 36px; 
  }
}

@media screen and (max-width: 660px) {
  .proj_5col {
    width: 100%;
    float: none;
  }
  .left_sp, .right_sp {
    padding: 0 0 2rem 0;
  }
  .lc_sp {
    padding: 0!important;
  }
  .max {
    text-align: left;
  }
  .max700 img {
    max-width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .about_img {
    width: 100%;
  }
}


@media screen and (max-width: 450px) {
  h2 {
    font-size: 2.3em;
  }
  h3 {
    font-size: 1.1em;
  }
  p {
    font-size: 1.2em;
    line-height: 1.4em;
  }
  .proj_hero {
    height: 250px;
  }
  .button {
    font-size: 1em;
    width: 85%;
  }
  .proj_container {
    margin: 2rem 0;
  }
  .proj_left {
    padding-right: 0;
  }
  .icon_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .copyright, .social {
    font-size: 1.3em;
  }
  .copyright {
    width: 70%;
  }
  .social {
    width: 30%;
    grid-gap: 0 10px;
  }
  .contact_form {
    padding: 15px 0px 25px;
  }
  #contact_wrapper .reset {
    margin-left: 0px;
  }
  #contact_wrapper .button {
    width: 100%;
  }
  #contact_wrapper .submit {
    margin-bottom: 20px;
  }
  .contact_home {
    padding: 5rem 0% 10rem;
  }
}


/*BACK-TO-TOP-SCROLL*/
#myBtn {  
  width: 40px;
  height: 40px;
  display: none;
  position: fixed;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 99;
  right: 0;
  bottom: 125px;
  padding: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  color: #fff;
  background: rgba(0,0,0,.4);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-animation: fadeInRight 2s 1 cubic-bezier(.77,0,.175,1);
  -moz-animation: fadeInRight 2s 1 cubic-bezier(.77,0,.175,1);
  -o-animation: fadeInRight 2s 1 cubic-bezier(.77,0,.175,1);
  animation: fadeInRight 2s 1 cubic-bezier(.77,0,.175,1);
}
#myBtn span {
  font-size: 20px;
}

@keyframes fadeInRight {
  from {opacity: 0; transform: translateX(100%);}
  to   {opacity: 1; transform: translateX(0);}
}