/****************************************************************************************/
/********************************** Animate CSS *****************************************/
/****************************************************************************************/


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(60px);
    -ms-transform: translateX(60px);
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/** End of Animate CSS **/

/* Icon Transition */
.icon {
  position: relative;
  top: 0;
  left: 0%; 
  float: left;
}
.icon.white:before, .icon.white:after {background-color: #ffffff;}
.icon.active:before, .icon.active:after {
    background-color:#282829;
}
.hamburger-to-close {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.hamburger-to-close:before, .hamburger-to-close:after {
  content: '';
}
.hamburger-to-close .hamburger-middle, .hamburger-to-close:before, .hamburger-to-close:after {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #282829;
  border-radius: 10px;
}
.hamburger-to-close .hamburger-middle {
  top: 50%;
  margin-top: -2px;
  -webkit-transition: -webkit-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
  transition: transform ease 200ms, -webkit-transform ease 200ms;
}
.hamburger-to-close:before {
  top: 8px;
  -webkit-transition: top 200ms ease 200ms, -webkit-transform ease 200ms;
  transition: top 200ms ease 200ms, -webkit-transform ease 200ms;
  transition: top 200ms ease 200ms, transform ease 200ms;
  transition: top 200ms ease 200ms, transform ease 200ms, -webkit-transform ease 200ms;
}
.hamburger-to-close:after {
  bottom: 9px;
  -webkit-transition: bottom 200ms ease 200ms, -webkit-transform ease 200ms;
  transition: bottom 200ms ease 200ms, -webkit-transform ease 200ms;
  transition: bottom 200ms ease 200ms, transform ease 200ms;
  transition: bottom 200ms ease 200ms, transform ease 200ms, -webkit-transform ease 200ms;
}
.hamburger-to-close.close .hamburger-middle {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: -webkit-transform 200ms ease 200ms;
  transition: -webkit-transform 200ms ease 200ms;
  transition: transform 200ms ease 200ms;
  transition: transform 200ms ease 200ms, -webkit-transform 200ms ease 200ms;
  display: none;
}
.hamburger-to-close.close:before {
  top: 18px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: top ease 200ms, -webkit-transform 200ms ease 200ms;
  transition: top ease 200ms, -webkit-transform 200ms ease 200ms;
  transition: top ease 200ms, transform 200ms ease 200ms;
  transition: top ease 200ms, transform 200ms ease 200ms, -webkit-transform 200ms ease 200ms;
}
.hamburger-to-close.close:after {
  bottom: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: bottom ease 200ms, -webkit-transform 200ms ease 200ms;
  transition: bottom ease 200ms, -webkit-transform 200ms ease 200ms;
  transition: bottom ease 200ms, transform 200ms ease 200ms;
  transition: bottom ease 200ms, transform 200ms ease 200ms, -webkit-transform 200ms ease 200ms;
}

.plus-to-minus {
  width: 20px;
  height: 20px;
  cursor: pointer;
  -webkit-transition: -webkit-transform ease 400ms;
  transition: -webkit-transform ease 400ms;
  transition: transform ease 400ms;
  transition: transform ease 400ms, -webkit-transform ease 400ms;
}
.plus-to-minus:before, .plus-to-minus:after {
  content: '';
  position: absolute;
  background-color: #282829;
  border-radius: 10px;
}
.plus-to-minus:before {
  left: 50%;
  margin-left: -3px;
  margin-top: 3px;
  width: 2px;
  height: 15px;
}
.plus-to-minus:after {
  top: 50%;
  margin-top: -1px;
  height: 2px;
  width: 15px;
  -webkit-transition: -webkit-transform ease 400ms;
  transition: -webkit-transform ease 400ms;
  transition: transform ease 400ms;
  transition: transform ease 400ms, -webkit-transform ease 400ms;
}
.plus-to-minus.minus {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.plus-to-minus.minus:after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

/* END Icon Transition */


/* Hamrburger - CHZ Version */
.hamburger {
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; 
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 4px;
    background-color: #000;
    border-radius: 0px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
}
.hamburger.white .hamburger-inner, .hamburger.white .hamburger-inner::before, .hamburger.white .hamburger-inner::after{
 	background-color: #ffffff;   
}

.hamburger.black .hamburger-inner, .hamburger.black .hamburger-inner::before, .hamburger.black .hamburger-inner::after{
 	background-color: #282829;   
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; 
}
  .hamburger-inner::before {top: -10px; }
  .hamburger-inner::after {bottom: -10px; }
  .hamburger-inner::after {width: 18px;}
/*
 * Spring
 */
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.15s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.32s;
  background-color: transparent; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
            transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    width:30px;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
            transform: translate3d(0, 10px, 0) rotate(-45deg); }

/* END HAMBURGER CHZ-VERSION */

/* Form CSS
=============================================== */
.input[type=text] {background:transparent; 
    border-bottom: 2px solid;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: transparent;
    box-shadow:none;
	outline: none;
}
    
fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-group.left {
    width:50%;
  padding-right:2%;
    margin: 1rem 0 2rem;
    float:left;
}

.form-group.right {
    width:50%;
    margin: 1rem auto 2rem;
    float:right;
}

.form-radio, .form-group {
  position: relative;
  padding: 0;
  padding-right: 0.9375rem !important;
}

.form-group.whole{    
  position: relative;
  margin:1rem 0 1.1rem;
}
.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-group span {font-weight: 500; }

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 1.9rem;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 1rem;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  border: none;
  line-height: 1.6;
  box-shadow: none;
    margin: 0;
}
.form-group .control-label {
  position: absolute;
  top: 0rem;
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: #323d53;
  font-size: 16px;
  font-weight: 300;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #ffffff;
  display: block;
  padding-top: 0;
  line-height: 0.01em;
}
.form-group .bar.black {
    
  border-bottom: 0.0625rem solid #000000;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #890056;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0;
  margin-bottom:0px;
  font-size: 18px;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #323d53;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
/* .form-group input:valid ~ .control-label, */
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
/* .form-group textarea:valid ~ .control-label, */ 
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 16px;
  color: gray;
  top: -1.5rem; /* top: -1rem;*/
  left: 0px;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #0354a2;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

/** END FORM CSS**/


/* ============= MY Template CSS ================
=============================================== */

body {font-family: "futura-pt","Century Gothic", Arial;
	color: #282829;
    font-weight: 400;
    overflow-x: hidden;
	height: 100%;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 1.5;
	font-size: 18px;
}
body.is-reveal-open {
    overflow: auto !important;
}
* {outline: none; transition: all ease-in-out;}

/* ============= FONTS & COLORS =============== */
.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.semi-bold {font-weight: 600;}
.bold {font-weight: 700;}
p {line-height: 1.4;}
.italic {font-style: italic;}

h1, h2, h3, h4, h5, h6 { font-family: "futura-pt","Century Gothic", Arial !important; font-weight: 600;}
h1{ font-size: 52px;}
h2{ font-size: 48px;}
h3{ font-size: 36px;}
h4{ font-size: 29px;}
h5{ font-size: 18px;}
h6{ font-size: 16px;}

.fa-4 {font-size: 40px;}
.fa-3 {font-size: 30px;}
.fa-2 {font-size: 20px;}

.font10 {font-size: 10px;}
.font12 {font-size: 12px;}
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}
.font24 {font-size: 24px;}
.font30 {font-size: 30px;}
.font100{font-size: 100px;} 

.white{color:#ffffff !important;} 
.black {color:#282829;} 
.light-grey {color:#efefef;} 
.grey {color:#7a7a7a;}
.grey2 {color:#c7c5c5;}
.violet {color:#890056;}

.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

/* ============= SPACING =============== */
.indent {margin-left:10px;}
.indent-top {margin-top:10px;}
.indent-bottom {margin-bottom:10px;}
.indent-right{margin-right:10px;}

.margin-bottom10 {margin-bottom:10px;}
.margin-top10 {margin-top:10px;}
.margin-bottom20 {margin-bottom:20px;}
.margin-top20 {margin-top:20px;}
.margin-left20 {margin-left:20px;}
.margin-right20 {margin-right:20px;}
.margin-bottom30 {margin-bottom:30px;}
.margin-top30 {margin-top:30px;}
.margin-bottom40 {margin-bottom:40px;}
.margin-top40 {margin-top:40px;}
.margin-bottom50 {margin-bottom:50px;}
.margin-top50 {margin-top:50px;}
.margin-bottom100 {margin-bottom:100px;}
.margin-top100 {margin-top:100px;}
.margin5 {margin:5%;}
.margin-center {margin-left: auto; margin-right: auto; }

.no-mg {margin:0 !important; margin-top: 0!important; margin-bottom:0!important; margin-left:0!important; margin-right:0!important;}
.no-mg-top {margin-top:0;}
.no-mg-bottom {margin-bottom:0;}
.no-mg-left {margin-left:0;}
.no-mg-right {margin-right:0;}

.padding5 {padding:5%;}
.padding30 {padding:30px;}
.padding50 {padding:50px;}
.padding70 {padding:70px;}
.padding-bottom10 {padding-bottom:10px;}
.padding-top10 {padding-top:10px;}
.padding-left10 {padding-left:10px;}
.padding-right10 {padding-right:10px;}
.padding-bottom20 {padding-bottom:20px;}
.padding-top20 {padding-top:20px;}
.padding-left30 {padding-left:30px;}
.padding-right30 {padding-right:30px;}
.padding-bottom30 {padding-bottom:30px;}
.padding-top30 {padding-top:30px;}
.padding-bottom50 {padding-bottom:50px;}
.padding-top50 {padding-top:50px;}
.padding-right50 {padding-right:50px;}
.padding-bottom100{padding-bottom: 100px}
.padding-top100{padding-top: 100px}


.no-pd {padding:0 !important;}
.no-pd {padding:0 !important; padding-top: 0!important; padding-bottom:0!important; padding-left:0!important; padding-right:0!important;}
.no-pd-top {padding-top:0;}
.no-pd-bottom {padding-bottom:0;}
.no-pd-left {padding-left:0;}
.no-pd-right {padding-right:0;}


/* ============= LIST ITEMS =============== */
ul {margin-left:0;}
.no-list li, li.no-list{list-style:none; display:block;}
ul.inline-list li {list-style:none; float: left;}

/* ============= TABLES =============== */
table.text-center thead th,table.text-center tr td {text-align: center; }

/* ============= BUTTONS & LINKS =============== */
a {text-decoration: underline; color: #7a7a7a; transition: color ease-in-out 0.3s;}
a:focus, button:focus, a, button {outline: none;}
.underline {text-decoration: underline;}
a.no-underline {text-decoration: none !important;}
a:hover, a:focus, a.active, li.active a, #footer-container a:hover, #footer-container a:hover {color:#890056;}
.button {
    padding: 18px 48px; 
 	border: 1px solid #282829;
	background: none;
	color: #282829;
	font-weight: 700;
	font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out 150ms;
    cursor: pointer;
}
.button:hover, .button:focus {
  background: none;
  transform: translate(0, -5px);
  text-decoration: none;
  box-shadow: 0px 10px 13.86px 0.14px rgba(0, 0, 0, 0.1);
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: initial;
  animation-fill-mode: initial;
  animation-play-state: initial;
  color: #282829;
}
.button:active {
  transform: translate(0, 5px) scale(0.98, 0.98);
  box-shadow: 0px 0px 0px 0px transparent;
}

.button.btn-white{ border: 1px solid #ffffff; color: #ffffff;}
.button.btn-white:hover{ border: 1px solid #ffffff; color: #ffffff;}

/** Button SVG **/

.btn-svg {
    margin: auto;
    position: relative;
    display: inline-block;
    width: 201px;
    height: 54px;
    line-height: 0.5;
    text-align: center;
    text-transform: uppercase;
    color: #282829;
    cursor: pointer;
    overflow: hidden;
    background: none;
    transition: all 500ms;
 	padding: 5px 10px;
    line-height: 2.5;
    text-decoration: none;
}
.btn-svg svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.btn-svg svg rect{   
    width: 100%;
    stroke: #282829;
    stroke-width: 3px;
    stroke-dasharray: 422, 0;
    stroke-dashoffset: 0;
    -webkit-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-svg:hover {color: #890056; }
.btn-svg:hover svg rect {
    stroke: #890056;
    stroke-width: 8px;
    stroke-dasharray: 104, 380;
    stroke-dashoffset: 183;
}

.white.btn-svg:hover, a.white.btn-svg:hover { color:#ffffff; }
.white.btn-svg svg rect, .white.btn-svg:hover svg rect {	
    stroke: #ffffff;
}
.home-popup-btn .btn-svg, .home-popup-btn .btn-svg svg, .home-popup-btn .btn-svg svg rect { width: 379px; }
.home-popup-btn .btn-svg:hover svg rect {
    stroke: #890056;
    stroke-width: 8px;
    stroke-dasharray: 323, 510;
    stroke-dashoffset: 375;
}

.disabled, .disabled .fa {
    color: #b7b7b7 !important;
    cursor: default;
}
.pointer {cursor: pointer;}

/* ============= POSITIONING & DISPLAY =============== */
.relative {position:relative;}
.absolute {position:absolute;}
.fixed {position:fixed; z-index:1;}

.clear {clear: both;}
.no-float{float: none !important;}

.table {display: table;} 
.table-row {display: table-row;}
.table-cell {display: table-cell; vertical-align: middle;}
.vertical-align-middle {
    display: -webkit-flex; /* Safari */
    display: flex; 
    align-items: center;
}

.display-block {display: block;}

.no-background {background: none;}
.no-border {border:none;}
.show-for-big {display: none !important;}
.hide-for-big {display: block;}
.show-for-phone-tablet {display:none !important;}


/* ============= GRIDS & BORDERS =============== */
.full {width:100%; }
img.full {width: 100%; height: 100%;}
.row.full {max-width: 100%;}
hr {max-width:100%; border-bottom:1px solid #282829; margin:3rem 0;}



/*** ============= Main Content CSS =============== ***/
/* ======= UTILITIES ======= */
/* Animated Loader */
.spinner {
    position:fixed;
    z-index:999999;
    top:50%;
    left:50%;
    margin:-30px 0 0 -30px;
    height:60px;
    width:60px;
    -webkit-animation:rotation .6s infinite linear;
    -moz-animation:rotation .6s infinite linear;
    -o-animation:rotation .6s infinite linear;
    animation:rotation .6s infinite linear;
    border-left:6px solid rgba(223,219,210,0.98);
    border-right:6px solid rgba(223,219,210,0.98);
    border-bottom:6px solid rgba(223,219,210,0.98);
    border-top:6px solid rgba(22,110,146,0.98);
    border-radius:100%
}
@-webkit-keyframes
rotation {
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(359deg)}
}
@-moz-keyframes rotation {
from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(359deg)}
}
@-o-keyframes
rotation {
from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(359deg)}
}
@keyframes rotation {
from{transform:rotate(0deg)}
to{transform:rotate(359deg)}
}
.callout.success, .alert.callout {background: none; border: none; color: white;}
.callout{border: 1px solid rgba(10, 10, 10, 0.1); display: none;}
.section {margin-bottom:0;}
.section:nth-last-child(2), .section:last-child {margin-bottom:0; }
span.divider{padding: 0 15px; }
.section-marker:before {
    content: '';
    border-bottom: 1px solid #7a7a7a;
    display: inline-block;
    margin-bottom: 6px;
    margin-right: 20px;
    width: 30px;
}

.section-marker.big:before { width: 100px; }
.section-marker.white:before {
    border-bottom: none; /*1px solid #ffffff;*/
}
.wrapper {/*margin:25px auto 25px; max-width: 1863px;*/ margin:0 auto; width: 97.9%;}
.inner-wrapper {width: 100%; max-width: 1842px;}
.inner-wrapper { max-width:1863px !important; }
footer {margin-top:0 !important;}
.marker {
	width: 30px; 
	height: 1px; 
	border-bottom: 1px solid #ffffff;     
	position: absolute;
	top: 50%;
	}
.marker.black {border-bottom: 1px solid #282829; }
.text-center .marker, .text-center.marker{ left: 40%;}
section.block, .block, .section {    
    width: 100%;
    height: 100%;
    position: relative;
	}
.height100 {height: 100%;}
.height-full{height: 100%; overflow: auto;}
iframe{border: none;}
.cream-bg { background: #f3f2f0;}
.white-bg { background: #ffffff;}
.light-grey-bg { background: #f1edec; color: #282829;}
.grey-bg { background: #282829; color:#ffffff;}
.black-bg { background: #000000; color:#ffffff;}
.violet-bg { background: #890056; color:#ffffff;}
.orange-bg { background: #cb5a00; color:#ffffff; }
.grey-half-bg {background: linear-gradient(to bottom, rgba(0,0,0,1) 63%, rgba(243,242,240,1) 0); }
.shadow { box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.15); }
.reveal.full {z-index:10; top:0 !important; left: 0 !important; z-index: 100;}

.grid-sizer{width: 33.33333%; }
.grid-sizer50{width: 50%; }
.vimeo_wrapper {
    padding:56.29% 0 0 0;
    position:relative;
}
.vimeo_wrapper.main-vid{padding:28.29% 0 0 0;}

/* ======= HEADER ======= */
#header {
    position: fixed;
    z-index: 10;    
    top: 3%;
    right: 2%;
    left: 2%;  
    max-width: 100%;
}
.logo, .menu-toggle {font-size: 30px; position: relative; top: 20px;}
.off-canvas-content {box-shadow: none;} 
.home-page .row, .semi-full.row, section.block .row{max-width: 100%;}
.home-popup-btn .button {text-transform: capitalize;}
.semi-full img { width: 100%; }
.reveal-overlay {background:rgba(0,0,0,0.90);}
#menu-modal, .proj-vid-modal { 
	background: none;
	top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    margin-left: 0;
    border: 0;
    border-radius: 0;
	}
.reveal .close-button{ right: 2.5%; top: 5%; }
.people.reveal .close-button, #resume-modal .close-button { right: 3.3%; top: 5.1%; }
.services-modal.reveal .close-button { top: 3.7%; }

/*added by mj @ 2017/11/14 */
.services-modal img.full { display: block; object-fit: cover; }
/*-*/

#menu-modal .marker {margin: 2rem auto; width: 50px; position: relative; }
.menu-container{ height: 100%; position: relative; text-align: center;}
.menu-container h6 {font-size: 18px; margin: 3rem auto 5px;}
.menu-list {margin:0; margin-bottom: 5rem;}
.menu-list li {padding: 0.5% 0;	font-size: 36px; font-weight: 500; }
.menu-list li a{color:#ffffff; cursor:pointer; text-transform: uppercase;}
.social-media li a:hover, .menu-list li a:hover, .menu-list li a.active, .menu-list li.active a{ color:#890056;}
.social-media { /* width: 255px; */ width: 180px; margin: 0 auto; text-align: center;}
.social-media li a {color:#ffffff; float: left; font-size: 18px; font-weight: 500; padding: .7rem 6px; }
.social-media span.divider{padding:0; position: relative; top: 6px;}
.banner-text {
	position: absolute;
    font-size: 100px;
    color: #ffffff;
    text-align: center;
    width: 100%;
    z-index: 10;
    font-weight: 700;
    top: 34%;
}

.page-tabs{ 
    position: absolute;
    top: 43%;
    right: 16%;
}
.mobile-page-tabs {
    position: absolute;
    bottom:15%;
    left: 0;
    width: 100%;   
}
.mobile-page-tabs.people ul {width: 190px;}
.mobile-page-tabs.projects ul {width: 210px;}
.mobile-page-tabs ul{margin: 0 auto; height:20px; }

#frame-top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 26px;
    background: white;
    z-index: 5;
}
#frame-left {
    position: fixed;
    left: 0;
    width: 26px;
    height: 100vh;
    background: white;
    z-index: 5;
}
#frame-right {
    position: fixed;
    right: 0;
    width: 26px;
    height: 100vh;
    background: white;
    z-index: 5;
}
#frame-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 26px;
    background: white;
    z-index: 5;
}

/* ======= PAGE BANNERS ======= */
.inner-banner {
    position: absolute;
    width: 100%;
    top: 33%;
    color: #ffffff;
}
.inner-banner h1{font-size: 100px; font-weight: 600; position: absolute; top: 20px; line-height: 1.1; }
.inner-banner .row {
    position: relative;
    /* width: 55%; */
    margin: 0 auto;
}
.breadcrumbs a{color: #ffffff; font-size: 14px; position: relative; text-decoration: underline;}
.breadcrumbs .marker {
    width: 25%;
    top: 30%;
    left: -33%;
}
.page-title.section-marker:before {
    width: 100px;
    position: absolute;
    left: -8rem;
    top: 50%;
}
.subheading {position: absolute; top: 60%; width: 100%; }
.subheading .row{ /*width: 53%; */ margin: 0 auto;}
.subheading h2 {
    font-weight: 400;
    line-height: 47px;
    font-size: 36px;
    color: #ffffff;
}
/* ======= Privacy Policy ====== */
#privacy-List li.header { margin: 25px 0; }

/* ======= HOMEPAGE ====== */

.banner-overlay {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;    
    z-index: 10;
}
.video-replace{ height:100vh; }
.wistia_responsive_padding{
    position: relative;
    min-height: 97vh; 
}
.banner-iframe{
	position: absolute;
    top: 0px;
    left: 0px;   
    width: 100% !important;
    height: 100% !important;
} 
.home-arrow-down {
	color: #ffffff;
    border: 1px solid #ffffff;
    padding: 20px;
    position: fixed;
    bottom: 5%;
    left: 48.7%;
    width: 50px;
    height: 50px;
    z-index: 1;
}
.home-arrow-down.black{
	color: #282829;
    border: 1px solid #282829;
}
.home-popup-btn {
 	position:absolute; width: 100%; bottom:30%;   
}
.home-arrow-down:hover { background: rgba(173, 173, 173, 0.3); border: 1px solid #cacaca;}
.home-arrow-down i.fa{
    position: relative;
    left: -6px;
    bottom: 10px; 
    animation: fadingDown 2s infinite;
}
section .page_container img{ width: 100%; }
.fullpage-wrapper .page_container {/*min-height: 97vh;*/ position: relative;}
.fullpage-wrapper .page_container img{ width: 100%; /*min-height: 97vh;*/ }
.approach img.shadow-animate {min-height: initial !important; height: auto !important; max-height: 50px;}

#home-popup-btn{
	position: absolute;
    top: 56%;
    left: 38%;
}
.slider-item img.full {
    width: 100%;
    height: 100vh;
}
.text-slider{
	position:relative; top:0; min-height: 100vh;   
}
.slider-item {
    width:100%;
    height:100%;
}

.out-video {
    position: relative;
    min-width:100% !important;
    height: 100vh !important;
    z-index: 10;
    margin:0;
    padding:0;
}

video.bgvid {
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
}

.home-proj-details {position:absolute; width: 100%; bottom: 3%;}
.our-approach.row {margin-left: 0; margin-right: 0;}
.our-approach .columns{color: #282829; padding: 0 50px; text-align: center; }
.our-approach .section-marker:before { border-bottom: 1px solid #c7c5c5; }
.approach-banner .columns {min-height: 285px; max-height: 285px;}
.approach-banner .fa {
    padding: 8px 13px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    top: 45%;
    -webkit-transform: perspective(100) translateZ(5px);
    transform: perspective(100) translateZ(5px);
}
.approach-banner .fa:nth-of-type(1){left: 23.5%;}
.approach-banner .fa:nth-of-type(2){left: 48.4%;}
.approach-banner .fa:nth-of-type(3){right: 24%;}
.approach-banner .wow:nth-of-type(1) .columns, .approach-banner .wow:nth-of-type(3) .columns{
    -webkit-transform: perspective(100px) rotateY(2deg);
    transform: perspective(100px) rotateY(2deg);
    background:#821853;
    position: relative;
    left: 8px;
}
.approach-banner .wow:nth-of-type(2) .columns, .approach-banner .wow:nth-of-type(4) .columns{
    -webkit-transform: perspective(100px) rotateY(-2deg);
    transform: perspective(100px) rotateY(-2deg);
    background:#6c1241;
    position: relative;    
    right: 8px;
}
.hover{
	animation: float-up 6s ease-in-out infinite;
	-webkit-animation: float-up 6s ease-in-out infinite;

}
.shadow-animate{
    animation: width 6s ease-in-out infinite;
	-webkit-animation: width 6s ease-in-out infinite;
    height: 115px;
}
@-webkit-keyframes float-up {
  from {
    -webkit-transform: translate(0, 0px);
  }
  65% {
    -webkit-transform: translate(0px, 15px);
  }
  to {
    -webkit-transform: translate(0, 0px);
  }
}
@keyframes float-up {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0px, 15px);
  }
  to {
    transform: translate(0, 0px);
  }
}
@-webkit-keyframes width {
  from {
    width: 80%;
  }
  65% {
    width: 100%;
  }
  to {
    width: 80%;
  }
}
@keyframes width {
  from {
    width: 80%;
  }
  65% {
    width: 100%;
  }
  to {
    width: 80%;
  }
}

/* ======= SERVICES ====== */
.testimonials-content {font-size: 38px; color:#c7c5c5; line-height: 1.3;}
.services .title {font-size: 36px; color:#7a7a7a}
.testimonials-author {
    position: relative;
    padding-left: 4.5rem;
    font-weight: 600;
    text-transform: uppercase;
}
.testimonials-author .marker{bottom: 14px; left: 13%;}
.services-modal-title {font-size: 100px; position: relative; top: -10px; line-height: 1.1;}


/* ======= PROJECTS ====== */
.project-img:hover img, .project-img:focus img, .people-img:hover img, .people-img:focus img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.project-img:hover .project-overlay, .project-img:focus .project-overlay, .people-img:hover .people-overlay, .people-img:focus .people-overlay{
    opacity: 1;
	z-index: 1;
    
}
.project-img:hover img, .people-img:focus img {transition: filter 0.7s;}
.project-overlay,.people-overlay {
    position: absolute;
    opacity:0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(137, 0, 86, 0.8);
	transition: opacity 0.7s;
    z-index: -1;
}

.project-details, .people-details{
 	margin: 0 auto; 
}
.project-wrapper.grey-half-bg {background: linear-gradient(to bottom, rgba(0,0,0,1) 79%, rgba(243,242,240,1) 0);}
.project-wrapper {min-height: 32.1rem;}
.project-list { position: absolute; top: -18rem; left: 18%; z-index: 1; }
.proj-subsection {
    position: relative;
    top: -6rem;
    min-height: 200px;
    background: #ffffff;
}
.proj-video-content {
 	margin-top:100px;   
    margin-bottom:100px;
	display: inline-block;
}
.proj-video-content .column { margin-top: -100px; }
.proj-dynamic-content :last-child { margin-bottom: 0; }
.proj-dynamic-content :last-child.proj-video-content { margin-bottom: -10px; }
.proj-det .testimonials-content { font-size: 48px; }

/* ====== PEOPLE ======= */

.people-wrapper {min-height: 25rem;}
.people-list  { position: absolute; top: -15rem; left: 18%; z-index: 1; }
.people-wrapper.grey-half-bg {background: linear-gradient(to bottom, rgba(0,0,0,1) 79%, rgba(243,242,240,1) 0);}
.people li { line-height: 1.3; }
.people.full .height100 {height: auto;}

/* ====== BLOG ======= */
.inner-banner .blog-banner {position:absolute; top:10px;}
.blog-banner h1 {position: relative; line-height:1.2; margin-bottom:20px;}
.blog-img-overlay{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
    position: absolute;
    top: 0;
}
.blog-post .inner-banner { z-index: 10; }
.subheading.blog-post {top: auto; bottom: 25%; z-index:10;}
.taglist li a {position:relative; line-height: 2;}
.taglist li a, .blogpost-link{text-decoration: none; transition: all 0.5s;}
.blogpost-link div, .blogpost-link div:before { transition: all 0.5s;}
.blogpost-link div:before, .taglist li a:before { opacity: 0; }
.taglist li a:hover, .taglist li a:focus, .taglist li a.active {color: #cb5a00; text-decoration: none; padding-left: 25px; font-weight: 500;}
.taglist li a:before{    
    content: '';
    border-bottom: 1px solid #282829; 
    display: inline-block;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1px;
    -webkit-transition: width 0.5s;
    transition: width 0.5s; 	
}
.taglist li a:hover:before, .taglist li a:focus:before, .taglist li a.active:before{
    opacity: 1;    
    width: 20px;
}
.blogpost-link:hover div, .blogpost-link:focus div {text-decoration: none; padding-left:40px; }
.blogpost-link:hover h3 {color: #890056;}
.blogpost-link div:before {
    content: ''; 
    border-bottom: 1px solid #282829;
    display: inline-block;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 30%;
    height: 1px; 
    width: 1px;
    -webkit-transition: width 0.5s;
    transition: width 0.5s; 	
}
.blogpost-link:hover div:before, .blogpost-link:focus div:before{ 
    width: 30px;  
    opacity: 1;
}
.featured-post-wrapper {
	position: relative;
    padding: 0;
	margin-bottom: 22%;    
}
#featured-post{
    position: absolute;
    top: -9em;  
}
.featuredpost-details {
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 15px 25px 5px;
    width:45%;
}
.blog-content p:nth-of-type(2){
    position: relative;
    left: -10%;
    width: 120%;
    font-size: 48px;
    color: #c7c5c5;
    margin: 70px auto;
}
.blog-content p, .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content li {
    font-size: 24px;
    color: #7a7a7a;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 400;
}

span.tagsList .tags ul li {
    display: inline-block;
}
span.tagsList .tags {
    padding: 0;
    display: inherit;
}
span.tagsList .tags li:not(:last-child) a::after {
    content: ',';
}
span.tagsList ul {
   list-style: none;
}

span.tagsList {
   display: inline-block;
}

span.tagsList a {
   text-decoration: none;
}
a .violet-bg, a .grey-bg, a .black-bg {transition: background 0.5s ease-in-out;}
a:hover .violet-bg, a:focus .violet-bg, a.active .violet-bg {background: #bd0077;}
a:hover .grey-bg, a:focus .grey-bg, a.active .grey-bg {background: #505050;}
a:hover .black-bg, a:focus .black-bg, a.active .black-bg {background: #464646;}
/* ====== FOOTER ======= */
.selection-menu .columns, .selection-menu .column {padding: 80px; font-weight: 500;}
#footer-container {position: relative; }
#footer-top {z-index: 10;}
#footer-container .row { max-width: 75rem; }
#footer-container h5 { margin-bottom: 30px; }
#footer-top p {color:#ffffff;}
#footer-bottom {padding: 3% 0 5%;}
.sub-footer-title {font-size: 100px;}
#contact-us { margin-top: 2%;}
.contact-form form {opacity: 0; transition: all 0.5s}

/* ============== Animations ================= */
@keyframes fadingDown {
     0%{ transform: translateY(-5px);
          opacity: 1;}
     15%{transform: translateY(-5px);
          opacity: 1;}
     50%{ opacity: 0.8;}
 	 100% {transform: translateY(8px);
     	  opacity:0;}    
}




/* = Custom Media Queries
====================================================== */
/* extra large screens */
@media only screen and (min-width: 1921px){
    .hide-for-big {display: none;}
    .show-for-big {display: block !important;}  
    .subheading .row, .inner-banner .row {width: 100%;}
    .page-tabs {right: 24.5%}
    .wistia_responsive_padding, .fullpage-wrapper .page_container img, .fullpage-wrapper .page_container{height: 100vh; } 
    .approach img.shadow-animate { min-height: initial;  height: auto;}
    .people.full .height100 {height: auto;}
}

/*desktop only*/
@media only screen and (min-width:64.063em){ 
   /* .wistia_responsive_padding {width: 97vh; width: 100%;} */
}

@media only screen and (max-width:1600px){
    
    .button {padding: 18px 30px;}
    .services.large-8, .approach.large-8, .proj-subsection.large-8 { width: 75%;}   
    .font100, .inner-banner h1 {font-size: 70px;}
    .people-list {top: -10rem;}
}

@media only screen and (max-width:1441px){
    
    .featuredpost-details{width: 50%;}
    .banner-text{font-size:85px;}
    .approach.large-8{width: 93%; padding-top:40px; padding-bottom: 20px;}
    .approach img.shadow-animate {height: 50px;}
    .approach-banner .columns{
        min-height: 150px;
   		max-height: 150px;
    }
    .sub-footer-title {font-size: 70px;}
    .approach-banner .wow:nth-of-type(1) .columns, .approach-banner .wow:nth-of-type(3) .columns {
        left: 9px;
    }
    .approach-banner .wow:nth-of-type(2) .columns, .approach-banner .wow:nth-of-type(4) .columns {
    	right: 9px;
	}
    .approach-banner .fa {top: 38%; }
    .project-list {top:-13rem;}
    .people-list {top: -7rem;}
    .project-wrapper {min-height: 36rem;}
}

@media only screen and (max-width: 1441px) and (min-width: 1030px){
 
    #resume-modal .large-7, #resume-modal .large-8 { width: 100%; font-size: 18px; }
    #resume-modal #portfolio-title { font-size: 50px; }
    #resume-modal .form-group { margin: 0; }   
    .people.full .height100 {height: 100%;}
}

/* Small Macbook*/
@media only screen and (max-width:1366px){
    #header{top: 5%;}
    .our-approach .columns {padding: 0 12px;}
    .subheading {top: auto; bottom: 25%;} 
    .subheading h2 {font-size: 28px;}
    .blog .inner-banner {top:18%;}
    .blog .subheading {top: 45%;}    
    
    .blog-post .inner-banner {top:23%;}
    .blog-post .subheading {top: auto;bottom:23%;}
}

/* medium portrait only*/
@media only screen and (max-width: 48.063em) and (orientation:portrait){ 
    
    .vimeo_wrapper.main-vid{padding: 51% 0 0 0;}
	
}

/*medium portrait down*/
@media only screen and (max-width:48.063em){
    .home-arrow-down{left: 46.5%;}   
    .logo{left: 15px;}
    .menu-toggle {right: 10px;}
	.mobile-page-tabs.people ul {width: 170px;}
	.mobile-page-tabs.projects ul {width: 190px;}
    .mobile-no-mg-top {margin-top:0 !important;}
    #fp-nav {display: block !important;}
    
    body, p, h5{font-size: 16px;}
    .button {padding: 15px 20px; font-size: 16px;}
	#footer-bottom .columns {
		padding: 0 !important;
		border: none;
	}
	#footer-bottom { padding-bottom: 5rem; }
    .grid-sizer{width: 60%; }    
}
/*medium landscape only*/
@media only screen and (min-width:48.063em) and (max-width:64em){  
    
}

/*medium landscape down*/
@media only screen and (max-width:64em){
    .wrapper {width: 100%;}
    .home-page .slider-list, .home-page .slider-item, .banner-overlay {min-height:100vh;}
    #frame-top, #frame-bottom, #frame-left, #frame-right {display: none;}
    .services.large-8, .approach.large-8, .system-message.large-8, .system-error-message.large-8  { width: 91.66667%;}  
    .proj-subsection.large-8 {width: 100%;}
    .project .inner-banner h1 { font-size: 70px; }
    .section { margin-bottom: 0; }
    .logo{left: 20px;}
    .menu-toggle {right: 10px;}
    .wrapper {margin:0;}
    #header {top:2%;}
    .banner-text {top:35%; font-size: 75px; padding:0 50px;}
    .mobile-margin-top100 {margin-top:100px !important;}
    .mobile-margin-top70 {margin-top:70px !important;}
    .mobile-margin-bottom20{margin-bottom:20px !important;}
    .mobile-padding-top60 {padding-top:60px !important;}
    .mobile-padding-bottom60 {padding-bottom:60px !important;}
    .mobile-padding-bottom30 {padding-bottom:30px !important;}
    .mobile-text-left {text-align: left; }
    .testimonials-content, h2{font-size: 38px;}
    .show-for-phone-tablet { display: inline !important; }
    li.show-for-phone-tablet{ display: list-item !important; }
    .video-replace.show-for-phone-tablet {display:block !important;}
    .page-tabs{ top: initial; right: 40%; bottom: 20%; }
    .reveal .close-button{ right: 4%; top: 2%; }
    .services-modal-title {top: -10px;}
    .hide-for-phone-tablet { display: none !important;} 
    .wrapper, .padding5, .columns, .column {padding:0;}
    .padding-bottom100 {padding-bottom:60px;}
    .padding-top100 {padding-top:60px;}
    .margin-bottom100 {margin-bottom:60px;}
    .margin-top100 {margin-top:60px;}
    .people .height-full, .services-modal .height-full { height: auto; }
    .people .services-modal-title {font-size: 100px;}
    .inner-banner {top:30%;}
    .inner-banner h1 {
            font-size: 100px;
            top:30px;
        }
    .blog-banner h1 {font-size: 55px; margin-bottom:50px;}
    .blog .subheading {top: 55%;}
    .featyredpost-details {width:80%;}
  	.font100 {font-size: 55px;}  
    .subheading {top: 65%; }    
    .grey-half-bg {background:#282829; }
    #footer-container .row { width: 80%; }	
    #footer-container .columns {
        border-bottom: 1px solid #fff;
        padding: 2rem 0;
    }
    .text-slider{min-height: 100vh;}
    .col-title {margin-bottom:30px;}
    .selection-menu .columns, .selection-menu .column {padding: 40px;}
    .selection-menu .medium-4 { width: 37.5% ;}
    .proj-subsection {position: initial; top: 0; padding: 60px !important;}
    .proj-subsection .columns, .proj-subsection .column { padding: 15px; }
    .proj-video-content { margin-top:0; margin-bottom:60px; }
    .proj-video-content .column {
        margin-top: 0px;
    }
    .proj-video-content .padding-bottom100 {padding-bottom:0; }
    .reveal {padding: 0;}
    
    .project-list, .people-list {left:0; top:0;}
    .featuredpost-details {
        width: 80%;
    }
    .featured-post-wrapper {
        padding: 30px;
        margin-bottom: 0;    
    }
    #featured-post{
        position: relative;
        top: 0;  
    }
    .blog-banner p { margin-top: 30px; }
    #proj-det {padding:0;}
    #featured-img {height: 450px;}
    .approach .padding-bottom50 {padding-bottom:25px;}
    .our-approach .columns{padding: 0 0.9375rem; text-align: left; }
    .our-approach.hover {animation: none; }
    .blog-content p:nth-of-type(2){ left:auto; width: 100%; font-size: 32px; margin:40px auto;}
    .blog-mobile-subheading {margin: 1rem}
    .subheading {top:60%}
    /*.subheading .row {
        width: 70%;
        margin-left: 23%;
    }*/
    .subheading h2 {font-size: 32px;}
    .system-message, .system-error-message {padding-top:60px;}
    .error h1 {font-size: 80px;}
    
    .proj-dynamic-content {padding-top:60px;} 
}

@media only screen and (max-width:64em) and (orientation:landscape){
    .button{padding: 18px 40px;}
    .subheading { top: 65%; }
    .reveal .row.block, .reveal .height-full {height: 100%; padding-bottom:0; }
    .people .height-full {height: 100%;}
    #footer-container .columns {border:0; padding: 2rem;}
    .proj-subsection {width: 100%; padding: 50px !important;}
    .selection-menu .medium-3 { width: 25%;}        
    .project-list, .people-list {top:0; left:16%;}
    .our-approach .large-3 {width: 100%; margin-bottom: 1rem;	}
    img.full {height:auto;}
    .people .services-modal-title {
        font-size: 55px;
    }
    .people.reveal img {display: none !important;}
    .services-modal img.full { height: 100%; }
}

@media only screen and (max-width: 1023px){
    .project-list, .people-list {
        top: 0;
        left: 0;
    }
}

/*small screens*/
@media only screen and (max-width: 39.9375em){
    .proj-dynamic-content {padding-top:60px;} 
  	img.full {height:auto;}
    .logo, .menu-toggle {font-size: 24px; top:10px;}
    .small-text-left {text-align: left; }
    .banner-text {top:35%; font-size: 20px; padding:0;}
    .home-proj-details {bottom: 10%;}
    .home-proj-details p { width: 45%;}
    .inner-banner .row, .subheading .row {width: 65%; }
    .grid-sizer, .grid-sizer50{width: 100%; }
    .home-popup-btn .button {font-size: 12px;}
    .font20, .font24, .font30 {font-size: 18px;}
    .testimonials-content, h2 {font-size: 32px;}
    #footer-contact-form .btn-svg { margin-top:45px; }
    .inner-banner h1 {
        font-size: 42px;
        top: 30px;
    }
    .reveal .close-button {
        right: 20px;
        top: 10px;
    }
    .font100 { font-size: 42px; }
    h4, h3 {font-size: 26px;}
    .section-marker.big:before { width: 50px; }
    .section-marker:before {margin-right: 10px;}
    .inner-banner { top: 25%; }
    .people .services-modal-title { font-size: 46px; }
    .menu-container {top: 15%;}
    .menu-list {margin-bottom: 4rem;}
    .menu-list li {font-size: 20px;}
    .subheading { top: 55%;}
    .sub-footer-title { font-size: 45px; }
	#header-container {margin-top: 0;}   
    .subheading .row{
        width: 75%;
        margin-left: 18%; 
    }
    .subheading h2 {
        line-height: 1.5;
        font-size: 20px;
    }
    .testimonials-author {padding-left: 20px;}
    .selection-menu img{width: 25px;}
	.selection-menu .columns, .selection-menu .column {padding: 10px; font-size: 8px;}  
    .project .inner-banner h1, .approach h2 { font-size: 40px; }
    .project .subheading h2{ font-size: 18px; }
    .proj-subsection {padding:35px 0 !important;}
    .featured-post-wrapper {padding: 30px 0 0;}
    #featured-img {height: 350px;}
    .home-arrow-down {left: auto; right: 20px;}
    .blog-content p:nth-of-type(2), .blog-mobile-subheading{ font-size: 26px; margin:2rem auto 2rem; }
 	.reveal .row.block {height: auto;}
    #footer-container .columns:first-child { padding-top: 0;}
    #footer-bottom .columns { border-bottom: none; }
    #fp-nav ul li a span, .fp-slidesNav ul li a span {font-size: 10px;}
    #fp-nav ul li, .fp-slidesNav ul li{margin: 20px 0;}    
    .vimeo_wrapper.main-vid { padding: 56% 0 0 0; }
    .home-popup-btn .btn-svg, .home-popup-btn .btn-svg svg, .home-popup-btn .btn-svg svg rect { width: 275px; font-size: 14px; height: 44px;}
    
}
@media only screen and (max-width: 736px) and (orientation:landscape){
 .home-popup-btn {
 	 bottom:15%;   
	}
 #footer-container .columns {
    border-bottom: 1px solid #fff;
    padding: 2rem 0;
    }
    
 #footer-bottom{ padding-top: 2rem; }
 #footer-bottom .columns {
    padding: 0;
    border: none;
	}
 .reveal .row.block {height: auto;}
    .logo{left: 5px;}
    .menu-toggle {right: 0;}
}

@media only screen and (max-width: 39.9375em) and (orientation:landscape){
 .logo, .menu-toggle {
    font-size: 30px;
	}
 .inner-banner h1 {
        font-size: 100px;
        top: 30px;
    }  
 .subheading h2 {
        line-height: 1.5;
        font-size: 36px;
    }
 .project .inner-banner h1, .approach h2{
        font-size: 70px;
    }
 .project .subheading h2{
        font-size: 36px;
    }
 .inner-banner .blog-banner h1 {
        font-size: 55px;
    }
 .project-list, .people-list {
    top: 0;
    left: 0;
	}
 .reveal .row.block, .reveal .height-full {
    height: auto;
    }
    
 .selection-menu .columns, .selection-menu .column {padding: 10px; font-size: 12px;}  
}
.project-overlay {
	padding: 0 20px;
}
.project-overlay.stayzon, .project-overlay.scunci  {
    	padding: 0 15%;
}
/*
@media only screen and (max-width: 1440px) {
    .project-overlay {
        padding: 0 22px;
    }

}*/