/*
Theme Name: Spaceful
Theme URI: http://spaceful.com.au
Author: Thi Nguyen
Description: Spaceful 2023
Version: 1.0
*/


html {
  height:100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size:15px;
  background: #F7F7F3;
  color:#7F593E;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  height:100%;
  font-weight: 500;
  scrollbar-width: thin;
  scrollbar-color: #7F593E #F7F7F3;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  vertical-align: ;
}

body::-webkit-scrollbar {
  width: 11px;
}

body::-webkit-scrollbar-track {
  background: #F7F7F3;
}

body::-webkit-scrollbar-thumb {
  background-color: #7F593E ;
  border-radius: 6px;
  border: 3px solid #F7F7F3;
}

* {
  padding:0;
  margin:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -box-sizing:border-box;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue-Light.eot');
    src: url('HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
        url('HelveticaNeue-Light.woff2') format('woff2'),
        url('HelveticaNeue-Light.woff') format('woff'),
        url('HelveticaNeue-Light.ttf') format('truetype'),
        url('HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue-Medium.eot');
    src: url('HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
        url('HelveticaNeue-Medium.woff2') format('woff2'),
        url('HelveticaNeue-Medium.woff') format('woff'),
        url('HelveticaNeue-Medium.ttf') format('truetype'),
        url('HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue-Bold.eot');
    src: url('HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
        url('HelveticaNeue-Bold.woff2') format('woff2'),
        url('HelveticaNeue-Bold.woff') format('woff'),
        url('HelveticaNeue-Bold.ttf') format('truetype'),
        url('HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue.eot');
    src: url('HelveticaNeue.eot?#iefix') format('embedded-opentype'),
        url('HelveticaNeue.woff2') format('woff2'),
        url('HelveticaNeue.woff') format('woff'),
        url('HelveticaNeue.ttf') format('truetype'),
        url('HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue-Italic.eot');
    src: url('HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
        url('HelveticaNeue-Italic.woff2') format('woff2'),
        url('HelveticaNeue-Italic.woff') format('woff'),
        url('HelveticaNeue-Italic.ttf') format('truetype'),
        url('HelveticaNeue-Italic.svg#HelveticaNeue-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

b {
  font-weight: bold;
  font-style: normal;
}

a {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  color: #815a3b;
  cursor: pointer!important;
}

a:hover {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: 0.2s;
  color: #2C3D46;
  cursor: pointer!important;
}

p {
  display: block; 
  margin-top: 0; 
  margin-bottom: 1em; 
  margin-left: 0; 
  margin-right: 0;  
}

ul {
  list-style-type: none!important;
  margin: 0!important;
  padding:0!important;
}

li {
  list-style-type: inherit;
  margin: 0!important;
  padding:0!important;
}

.clear {
  width:100%;
  clear:both;
}

figure{
  margin: 0;
  font-size: 16px;
  padding-bottom: 50px;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =HEADING
-------------------------------------------------------------- */


h1 {
  font-weight: bold;
  font-size: 1.8em;
  margin: 0px;
  line-height: 1.2;
  padding-bottom: 20px;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight: bold;
  font-size: 1.2em;
  margin: 0px;
  line-height: 1.2;
  padding-bottom: 20px; 
  -webkit-font-smoothing: antialiased;
}

h3 {
  font-weight: bold;
  font-size: 1.4em;
  margin: 0px;
  line-height: 1.2;
  padding-bottom: 20px; 
  -webkit-font-smoothing: antialiased;
}

h4 {
  font-weight: bold;
  font-size: 2.2em;
  margin: 0px;
  line-height: 1;
  padding-bottom: 20px;
  -webkit-font-smoothing: antialiased; 
}


/* =SPACERS
-------------------------------------------------------------- */

#spacer {
  width:100%;
  height: 100px;
  clear: both;
  display: block;
}

#spacer-10 {
  width:100%;
  height: 10px;
  clear: both;
  display: block;
}

#spacer-20{ 
  width: 100%;
  height: 20px;
  clear: both;
  display: block;
}

#spacer-30{ 
  width: 100%;
  height: 30px;
  clear: both;
  display: block;
}

#spacer-50{ 
  width: 100%;
  height: 50px;
  clear: both;
  display: block;
}

#spacer-80{ 
  width: 100%;
  height: 80px;
  clear: both;
  display: block;
}


/* =COLOURS
-------------------------------------------------------------- */

.white {
  color: #fff!important;
}

.copper{
  color: #D78F64!important;
}

.steel{
  color: #2C3D46!important;
}

.glass{
  color: #8EA69A!important;
}

.bronze {
  color: #7F593E!important;
}


/* =BRAND MARK
-------------------------------------------------------------- */

.mark {
  width: 25px!important;
  height: 43px;
  padding-top: 0px;
  margin-bottom: 0px;
  background: url(images/mark.svg) no-repeat;
  background-size: contain; 
  display: inline-block;
}

.mark-steel {
  width: 25px!important;
  height: 43px;
  padding-top: 0px;
  margin-bottom: 0px;
  background: url(images/mark_steel.svg) no-repeat;
  background-size: contain; 
  display: inline-block;
}



/* =HORIZONTAL LINES
-------------------------------------------------------------- */

.line-bronze {
  width: 100%;
  border-top: 1px solid #7F593E;
}

.line-copper {
  width: 100%;
  border-top: 1px solid #D78F64;
}

.line-steel {
  width: 100%;
  border-top: 1px solid #2C3D46;
}



/* =LINE CONTAINERS
-------------------------------------------------------------- */

#footer, #related-container {
  width:100%;
  border-top: 1px solid #7F593E;
  padding-top: 30px;
  padding-left: 5%;
  padding-right: 5%;
  display: block;
  text-align: left;
}


/* =ARROWS
-------------------------------------------------------------- */

.arrow-white { 
  position: relative;
  max-width: 50px;
  min-width:50px;
  height:15px;
  margin-left: 0;
  background: url(images/arrow_white.svg) no-repeat;
  background-size: contain;
  transition: all 0.6s ease;
}

.arrow-white img {
  width: 100%;
  height: auto;
}

.arrow-white:hover {
  margin-left: 10px!important;
  background: url(images/arrow_copper.svg) no-repeat;  
}

.arrow-bronze { 
  position: relative;
  max-width: 50px;
  min-width:50px;
  height:15px;
  margin-left: 0;
  background: url(images/arrow_bronze.svg) no-repeat;
  background-size: contain;
  transition: all 0.6s ease;
}

.arrow-bronze img {
  width: 100%;
  height: auto;
}

.arrow-bronze:hover {
  margin-left: 10px!important;
  background: url(images/arrow_steel.svg) no-repeat;  
}

.arrow-steel { 
  position: relative;
  max-width: 50px;
  min-width:50px;
  height:15px;
  margin-left: 0;
  background: url(images/arrow_steel.svg) no-repeat;
  background-size: contain;
  transition: all 0.6s ease;
}

.arrow-steel img {
  width: 100%;
  height: auto;
}

.arrow-steel:hover {
  margin-left: 10px!important;
  background: url(images/arrow_copper.svg) no-repeat;  
}

.arrow-copper { 
  position: relative;
  max-width: 50px;
  min-width:50px;
  height:15px;
  margin-left: 0;
  background: url(images/arrow_copper.svg) no-repeat;
  background-size: contain;
  transition: all 0.6s ease;
}

.arrow-copper img {
  width: 100%;
  height: auto;
}

.arrow-copper:hover {
  margin-left: 10px!important;
  background: url(images/arrow_glass.svg) no-repeat;  
}


/* =BACKGROUNDS
-------------------------------------------------------------- */

.background-diamond {
  width: 450px;
  height: 772px;
  position: absolute;
  top: 0!important;
  right: -6%;
  z-index: -100;
  opacity: 0.3;
  background: url(images/background_diamond.svg) no-repeat;  
}

.background-outline {
  width: 450px;
  height: 772px;
  position: absolute;
  top: 0!important;
  right: -6%;
  z-index: -100;
  opacity: 0.3;
  background: url(images/background_diamond_outline.svg) no-repeat;  
}




/* =VIDEO
-------------------------------------------------------------- */

.desktop{
  display: none;
}

.mobile{
  display: block;
}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  background: url(images/background.jpg) no-repeat center center/cover;
}

.bg-video-wrap-2{
  position: relative;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  background: url(images/background.jpg) no-repeat center center/cover;
}

#myVideo {
  object-fit: cover;
  width: 100%;
  height: 50vw;
  top: 0;
  left: 0;
}


/* =TEXT BOX SIZES
-------------------------------------------------------------- */

.text-50p {
  width: calc(100% - 65px)!important;
}

.text-450 {
  width: 100%;
}

.text-475 {
  width: calc(100% - 65px)!important;
}

.text-500 {
  width: 90%!important;
}

.text-550 {
  width: 90%!important;
}

.text-600 {
  width: 90%!important;
}

.text-650 {
  width: 90%!important;
}


/* =IMAGE SIZES
-------------------------------------------------------------- */

.img-35 {
  min-width: 35%;
  max-width: 35%;
  height: auto;
  object-fit: cover;
}

.img-50 {
  min-width: 50%;
  max-width: 50%;
  height: auto;
  object-fit: cover;
}

.img-60 {
  min-width: 60%;
  max-width: 60%;
  height: auto;
  object-fit: cover;
}

.img-60 img{
  min-width: 60%;
  max-width: 60%;
  height: auto;
  object-fit: cover;
}

.img-75{
  min-width: 75%;
  max-width: 75%;
  height: auto;
  object-fit: cover;
}

.img-100-auto {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.img-100-auto img {
  min-width: 100%;  
  max-width: 100%;
  height: auto;
}

.img-100 img{
  min-width: 100%;
  max-width: 100%;
  height: 500px;
  object-fit: cover;
}

.img-100-400 img{
  min-width: 100%;
  max-width: 100%;
  height: 55vw!important;
  object-fit: cover;
}

.img-auto img{
  min-width: 100%;
  max-width: 100%;
  height: auto;
}


/* =FILTER NAVIGATION
-------------------------------------------------------------- */

.accordion {
  margin: 0;
  width: 100%;
  border: none;
  text-align: left;
  transition: 0.4s;
  background: none!important;
  stroke:#7F593E;
}

.filteractive, .accordion:hover {
  stroke: #2C3D46;
}

.panel {
  max-height: 0;
  padding-top: 10px;
  overflow: hidden;
  transition: max-height 0.6s ease-out;
}



/* =TICKER 
-------------------------------------------------------------- */

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #2C3D46!important;
  padding-left: 100%;
  box-sizing: content-box;
}

.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: #D78F64;
  text-transform: uppercase;
  font-weight: bold;
}

.ticker__item:hover{
  color: #8EA69A!important;
}

.ticker-wrap:hover .ticker:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}


/* =PAGE NAVIGATION ARROWS
-------------------------------------------------------------- */

.next-arrow {
  position: absolute;
  top: 0!important;
  right: 0!important;
  width: 13px;
  background: url(images/next.svg) no-repeat;
  background-size: contain;
  z-index: 100;
}

.previous-arrow {
  position: absolute;
  top: 0!important;
  right:45px!important;
  width: 13px;
  background: url(images/previous.svg) no-repeat;
  background-size: contain;
  z-index: 100;  
}


/* =PAGE
-------------------------------------------------------------- */

#container {
  width:90%;
  position: relative;
  margin-top: 150px;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  vertical-align: top;
}

#page-container{
  width: 100%;
  text-align: left;
  clear: both;
  display: block;
}

#page-header-container{
  width: 100%;
  text-align: left;
  min-height: 70px;
  padding-bottom: 30px;
  clear: both;
  display: block;
  vertical-align: top;
}

.extended-container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  clear: both;
  display: block;
}

.extended {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  height: auto;
}

#parent-container{
  text-align: left;
}

.parent {
  width:100%;
  position:relative;
  text-align: left!important;
  display: block;
}

.parent p{
  margin:0;
}

.child-30 {
  width:100%;
  display:inline-block!important;
  padding-right: 0px;
  padding-left: 0px;
  margin-bottom: 50px;
  vertical-align: top;
  text-align: left!important;
}

.child-30 img{
  width: 100%;
  height:18vw;
  object-fit: cover;
}

.related-child-30 {
  width:100%;
  display:inline-block!important;
  padding-right: 0px;
  padding-left: 0px;
  margin-bottom: 50px;
  vertical-align: top;
  text-align: left!important;
}

.related-child-30 img{
  width: 100%;
  height:45vw;
  object-fit: cover;
}

.child-50 {
  width:100%;
  display:inline-block!important;
  padding-right: 7px;
  padding-left: 0px;
  margin-bottom: 50px;
  vertical-align: top;
  text-align: left!important;
}

.child-50 img{
  width: 100%;
  height:300px;
  object-fit: cover;
}

.link a {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  color: #2C3D46!important;
}

.link a:hover {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: 0.2s;
  color: #8EA69A!important;
}



/* =SECTIONS
-------------------------------------------------------------- */

#section-1-child {
  padding-left: 10%;
  padding-right: 30px;
}

#section-1 {
  min-width: 100%;
  max-width: 100%;
  padding-right: 0px;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-2 {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-2 img{
  width: 100%;
  height: auto;
  vertical-align: top;
  text-align: left;
}

.link a{
  color: #2C3D46;
}

.link a:hover{
  color: #8EA69A;
}

#section-1-article {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-2-single-article {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-2-article {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-2-article a{
  color: #2C3D46;
}

#section-2-article a:hover{
  color: #8EA69A;
}

#section-2-article ul{
  padding-left: 40px!important;
  padding-right: 15px!important;
  list-style-type: disc!important;
}

#section-2-article ol{
  padding-left: 40px!important;
  padding-right: 15px!important;
  list-style-type: decimal-leading-zero;
}

#section-2-article li{
  list-style-position: outside!important;  
  margin-bottom: 15px!important;
}

#section-2-article li:last-child{
}

#section-2-single {
  min-width: 100%;
  max-width: 100%;
  margin-left: 0!important;
  vertical-align: top;
  text-align: left;
}

#section-2-single img{
  width: 100%;
  height: auto;
  vertical-align: top;
  text-align: left;
}

#section-2-right {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}

#section-related-1{
  min-width: 50%;
  max-width: 50%;
  padding-right: 40px;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#section-related-2 {
  min-width: 50%;
  max-width: 50%;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}



/* =FEATURE
-------------------------------------------------------------- */

.feature-container {
  width: 100%;
  position: relative;
  vertical-align: top;
}

.feature{
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

.feature img {
  width: 100%;
  height: 50vw!important; 
  object-fit: cover;
  -o-object-fit: cover;  
}

.feature-text{
  min-width: 100%;
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

.feature-image {
  position: relative;
  top: 0;
  left: 0;
}

.feature-image img{
  width:100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.feature-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  min-height:450px;
  max-height:450px;
  padding-top:50px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom: 50px;
  z-index: 3;
  text-align: left;
  background: rgba(44, 61, 70, 0.5);
}

.bottom-text{
  position: absolute;
  vertical-align: bottom;
  bottom: 0;
  padding-right: 20px;
  padding-bottom: 80px;
}

#process {
  width: 100%;
  vertical-align: top;
  text-align: left;
  line-height: 2;
}

#process h1{
  padding-bottom: 0;
}

#process-card {
  width: 100%;
  padding-top:30px;
  padding-bottom: 20px;
  padding-right: 20px;
}

#process-card h2{
  padding-bottom: 5px;
}

.logo-nav { 
  position: relative;
  width: 151px;
  height:35px;
  margin-top:20px;
  margin-left: 5%;
  padding-bottom: 0;
  background: url(images/logo.svg) no-repeat;
  background-size: contain;
}

#date, #estimated-time {
  font-size: 0.8em;
  padding-bottom: 100px;
  color: #fff;
}


#getintouch {
  font-size: 1.3em;
  text-align: left;
}

#quote {
  font-size: 2em;
  width: 100%;
  font-weight: bold;
  line-height: 1.2;
}

#quote-name{
  margin-top: 20px;
}

#quote-name-small {
  margin-top: 20px;
}

#related-container h2{
  padding-bottom: 30px;
}

#related-container p{
  margin: 0;
}

#category{
  padding-top: 5px;
  padding-bottom: 3px;
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
}

#work-container{
  float: left;
  position: relative;
  text-align: left;
}




/* =HEADER
-------------------------------------------------------------- */

#nav-bar {
  z-index:2000;
  background: #F7F7F3;
  width: 100%;
  height:70px;
  position: fixed;
  top: 0;
  display: block;
  transition: top 0.6s;
  text-align: center;
  visibility:visible;
}

.logo, .logo a{
  z-index:2000;
  position: fixed; 
  left: 5%;
  margin-top:20px;
  width: 151px;
  height: 35px;
  padding: 0;
  background: url(images/logo.svg) no-repeat;
  background-size: contain;
}



/* =THUMBNAIL OVERLAY
-------------------------------------------------------------- */

.thumb {
    position:relative;
    width: 100%;
    height: 100%;
}

.thumb img {
    width:100%;
    vertical-align:top;
}

.thumb:after, .thumb:before {
    position:absolute;
    opacity:0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.thumb:after {
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(44,61,70,0.9);
}

.thumb:before {
    content: attr(data-content);
    width:100%;
    color:#fff;
    z-index:1;
    top: 45%;
    text-align:center;
    vertical-align: middle;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-size: 1.4em;
    font-weight: bold;
}

.thumb:hover:after, .thumb:hover:before {
    opacity:1;
}



/* =TOGGLE MENU
-------------------------------------------------------------- */

#desktop-nav {
  visibility:hidden!important;
}

#mobile-nav {
  position:fixed;
  top: 120px!important;
  visibility: visible!important;
}

#menuToggle{
  display: block;
  position: fixed;
  top: 20px;
  right: 5%;
  z-index: 3000;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle ul{
  margin:0;
  padding:0;
  list-style-type: none;
}

#menuToggle input{
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
  touch-callout: none;
}

#menuToggle span{
  display: block;
  width: 27px;
  height: 3px;
  margin-bottom:5px;
  position: relative;
  background: #7F593E;
  z-index: 1;
  -webkit-transform-origin: 2px 0px;
  transform-origin: 2px 0px;
  -webkit-transform: rotate(30deg);  
  transform: rotate(30deg);  
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child{
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2){
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span{
    opacity: 1;
    -webkit-transform: rotate(45deg) translate(-2px, -1px);
    transform: rotate(45deg) translate(-2px, -1px);
    background: #7F593E;
}

#menuToggle input:checked ~ span:nth-last-child(3){
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.2, 0.2);
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2){
    -webkit-transform: rotate(-45deg) translate(0, -1px);
    transform: rotate(-45deg) translate(0, -1px);

}

#menu{
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  right:0;
  margin: 0;
  padding: 0;  
  background-color: rgba(247, 247, 243, 0.8);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  list-style-type: none;
  text-align: left;
 -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: translate(200%, 0);
  transform: translate(200%, 0);
  -webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}


#menu a:hover {
  color: #2C3D46;
}

#menuToggle input:checked ~ ul
{
  -webkit-transform: none;
}

#menu-container{
  padding-left: 5%;
  padding-top: 50px;
  font-weight: bold;
}

.ani {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinate;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(30deg) scale(0) translate(0);
  }
  to {
    -webkit-transform: rotate(30deg) scale(1) translate(0px);
  }
}



/* =MENU (MAIN MOBILE)
-------------------------------------------------------------- */

.menu-parent {
  font-size: 2.5em;
  font-weight: bold;
  text-align: left;
  line-height: 1.2;
  color: #7F593E!important;
}

.menu-sub-wrapper{
  padding-bottom: 20px;
}

.menu-sub {
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  padding-bottom: 7px;  
}



/* =MENU (MAIN DESKTOP)
-------------------------------------------------------------- */

.dropdown {
  padding: 20px 40px;
  width: 320px;
  position: relative;
  font-size: 2.4em;
  font-weight: bold;
  text-align: left;
  perspective: 1000px;
}

.dropdown:hover {
  cursor: pointer;
  color: #2C3D46;
}

.dropdown:hover .sub-menu li {
  display: block;
}

.menu-small {
  font-size: 1.8em;
}

.sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  perspective: 1000px;
}

.sub-menu li {
  display: none;
  padding: 10px 20px;
  font-size: 0.7em;
  opacity: 0;
  color: #7F593E;
}

.sub-menu li:hover {
  color: #2C3D46!important;
  transition: all 0.6s ease;    
}

.sub-menu li:nth-child(1) {
  transform-origin: top center;
  animation: rotateX 300ms 60ms ease-in-out forwards;
}

.sub-menu li:nth-child(2) {
  transform-origin: top center;
  animation: rotateX 300ms 120ms ease-in-out forwards;
}

.sub-menu li:nth-child(3) {
  transform-origin: top center;
  animation: rotateX 300ms 180ms ease-in-out forwards;
}

.sub-menu li:nth-child(4) {
  transform-origin: top center;
  animation: rotateX 300ms 240ms ease-in-out forwards;
}

.sub-menu li:nth-child(5) {
  transform-origin: top center;
  animation: rotateX 300ms 300ms ease-in-out forwards;
}

.dropdown:hover {
  display: block;
}

@-moz-keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@-webkit-keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@-o-keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}


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

.people-parent {
  width:100%;
  margin: 0!important;
  padding: 0!important;
  position:relative;
  text-align: left!important;
  display: block;
  vertical-align: top;
}

.people-menu{
  width: 100%;
  text-align: left;
  float: left;
  padding-bottom: 50px;
}

.people-menu li.active{
  text-decoration: underline 2px;
}

.people-menu ul li{
  margin: 0;
  list-style-type: none;
  cursor: pointer;
  -webkit-transition: all .7s ease-in time;
  -moz-transition: all .7s ease-in time;
  -ms-transition: all .7s ease-in time;
  -o-transition: all .7s ease-in time;
  transition: all .7s ease-in time;
}

.people-menu ul li:hover{
  color: #2C3D46;
}

.people-item{
  width: 100%;
  margin-left: 0%;
  float: right;
}

.item{
  width: 49.5%!important;
  height: auto;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.item img {
  width: 100%;
  height: 55vw!important; 
  object-fit: cover;
  -o-object-fit: cover;
}

 #people-name{
  font-weight: bold;
  margin-top: 10px;
}

 #people-title{
  font-size: 0.8em;
  height:50px;
  vertical-align: top;
}

.people-text {
  width: 450px;
}



/* =EVENTS
-------------------------------------------------------------- */

#events h2{
  padding-bottom: 10px!important;
}

.events-sponsors ul{
  padding-bottom: 30px!important;
  padding-top: 30px!important;
  border-top: 1px solid #7F593E;
  border-bottom: 1px solid #7F593E;
  text-align: left;
}

.events-sponsors-2 ul{
  padding-bottom: 30px!important;
  padding-top: 30px!important;
  border-bottom: 1px solid #7F593E;
  text-align: left;
}

.sponsor-logos {
  height: 65px!important;
  float: left;
  margin-right: 60px!important;
  margin-bottom: 30px;
  text-align: center;
  vertical-align: bottom;
  bottom: 0;
}

.sponsor-logos img {
  width: auto;
  height: 100%; 
  object-fit: contain;
  -o-object-fit: contain;
}

.sponsor-logos-small {
  height: 40px!important;
  float: left;
  margin-right: 40px!important;
  margin-bottom: 30px;
  text-align: center;
  vertical-align: bottom;
  bottom: 0;
}

.sponsor-logos-small img {
  width: auto;
  height: 100%; 
  object-fit: contain;
  -o-object-fit: contain;
}

.event-gallery-heading {
  width: 100%;
  text-align: left;
}


/* =CONTACT
-------------------------------------------------------------- */

.contact-col-parent {
  width: 100%;
  vertical-align: top;
  height: auto;
  text-align: right;
}

.contact-col3 {
  width: 48%;
  display: inline-block;
  text-align: left;
  margin-right: 2%;
  vertical-align: top;
}

.contact-col3:nth-child(2n){
  margin-right: 0px!important;
}



/* =CONTACT FORM 7 
-------------------------------------------------------------- */

::-webkit-input-placeholder { /* WebKit browsers */
    color: #7F593E!important;
    opacity: 0.4;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #7F593E!important;
    opacity: 0.4;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #7F593E!important;
    opacity: 0.4;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #7F593E!important;
    opacity: 0.4;
}

form.wpcf7-form{
}
form.wpcf7-form * {
  transition: 225ms;
}
form.wpcf7-form label {
  display: block;
  width: 100%;
  cursor: pointer;
}
form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
  display: block;
  width: 100%;
  padding: .5em 0;
  margin-bottom: 1em;
  border: 0;
  border-bottom: 1px solid rgba(127,89,62,0.2);
  background: transparent;
  font-size: 1em;
}

form.wpcf7-form textarea {
  display: block;
  width: 100%;
  padding: .5em 0;
  margin-bottom: 1em;
  border: 0;
  border-bottom: 1px solid rgba(127,89,62,0.2);
  background: transparent;
  font-size: 1em;
  font-family: 'Helvetica Neue', sans-serif;
  color: #7F593E;
}

form.wpcf7-form input:hover,
form.wpcf7-form select:hover,
form.wpcf7-form textarea:hover {
  cursor: pointer;
  border-bottom: 1px solid rgba(127,89,62,0.2);
}
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
  border-bottom: 1px solid #7f593e;
  outline: none;
}

form.wpcf7-form input {
  color: #7f593e;
}

form.wpcf7-form input::placeholder {
  color: #7f593e!important;
  opacity: 0.4;
}

form.wpcf7-form input,
form.wpcf7-form textarea{
}

form.wpcf7-form input[type="submit"] {
  padding: 1em;
  margin-bottom: 0;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #2C3D46;
  box-shadow: none;
  color: #2C3D46;
  line-height: 1.2em;
  width: 130px;
  display: inline-block;
  margin-right: 1em;
}
form.wpcf7-form input[type="submit"]:hover {
  background-color: #F7F7F3;
  color: #D78F64;
}

span.wpcf7-not-valid-tip {
  position: relative;
  top: -1em;
  color: #D78F64!important;
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
}
div.wpcf7-response-output {
  padding: 1em !important;
  margin: 0 !important;
}

div.wpcf7 .ajax-loader {
  display:none;
  background: none;
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s cubic-bezier(0.36, 0.09, 0.27, 0.97) infinite;
  border: 3px solid #dedede;
  border-top: 3px solid #000000;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin: 0;
  vertical-align: middle;
}

@-webkit-keyframes spin {
  50% {
    border-top-color: #a7005d;
  }
  100% {
    border-top-color: #000000;
   -webkit-transform: rotate(360deg);
           transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    border-top-color: #a7005d;
  }
  100% {
    border-top-color: #000000;
   -webkit-transform: rotate(360deg);
           transform: rotate(360deg);
  }
}

.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    opacity: .75;
}

div.wpcf7-response-output {
    margin-top: 10px!important;
    padding: 10px!important;
    border: none!important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;  
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    color: #D78F64;
    background: #FFF;
}

.wpcf7-form select {
    color: #D78F64;
}



/* =STEEL CONTACT FORM
-------------------------------------------------------------- */

#events ::-webkit-input-placeholder { /* WebKit browsers */
    color: #D78F64!important;
}
#events :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #D78F64!important;
}
#events ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #D78F64!important;
}
#events :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #D78F64!important;
}

#events form.wpcf7-form input,
#events form.wpcf7-form select,
#events form.wpcf7-form textarea {
  border-bottom: 1px solid rgba(127,89,62,0.2);
}

#events form.wpcf7-form textarea {
  border-bottom: 1px solid rgba(127,89,62,0.2);
  color: #D78F64;
}

#events form.wpcf7-form input:hover,
#events form.wpcf7-form select:hover,
#events form.wpcf7-form textarea:hover {
  cursor: pointer;
  border-bottom: 1px solid rgba(127,89,62,0.2);
}
#events form.wpcf7-form input:focus,
#events form.wpcf7-form select:focus,
#events form.wpcf7-form textarea:focus {
  border-bottom: 1px solid #7f593e;
}

#events form.wpcf7-form input {
  color: #D78F64;
}

#events form.wpcf7-form input::placeholder {
  color: #D78F64!important;
}

#events form.wpcf7-form input,
#events form.wpcf7-form textarea{
}

#events form.wpcf7-form input[type="submit"] {
  margin-top: 20px;
  border: 1px solid #D78F64;
  color: #D78F64;
}
#events form.wpcf7-form input[type="submit"]:hover {
  margin-top: 20px;
  background-color: #D78F64;
  color: #F7F7F3;
}




/* SUBSCRIPTION
-------------------------------------------------------------- */

#subscription-container{
  width:100%;
  background: #2C3D46;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 80px;
  padding-bottom: 80px;
  color: #D78F64;
}

#subscription-title {
  width:100%;
  padding-bottom: 30px;
}


#wpcf7-f1003-o1 input,
#wpcf7-f1003-o1 select,
#wpcf7-f1003-o1 textarea {
  display: block;
  width: 100%;
  padding: .5em 0;
  margin-bottom: 1em;
  border: 0;
  border-bottom: 1px solid rgba(215,143,100,0.2);
  background: transparent;
  font-size: 1.3em;
}

#wpcf7-f1003-o1 textarea {
  display: block;
  width: 100%;
  padding: .5em 0;
  margin-bottom: 1em;
  border: 0;
  border-bottom: 1px solid rgba(215,143,100,0.2);
  background: transparent;
  font-size: 1.3em;
  font-family: 'Helvetica Neue', sans-serif;
  color: #D78F64;
}

#wpcf7-f1003-o1 input:hover,
#wpcf7-f1003-o1 select:hover,
#wpcf7-f1003-o1 textarea:hover {
  cursor: pointer;
  border-bottom: 1px solid rgba(215,143,100,0.2);
}
#wpcf7-f1003-o1 input:focus,
#wpcf7-f1003-o1 select:focus,
#wpcf7-f1003-o1 textarea:focus {
  border-bottom: 1px solid #D78F64;
  outline: none;
}

#wpcf7-f1003-o1 input {
  color: #D78F64;
}

#wpcf7-f1003-o1 input::placeholder {
  color: #D78F64!important;
  opacity: 0.4;
}


#wpcf7-f1003-o1 input[type="submit"] {
  padding: 1em;
  margin-bottom: 0;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #D78F64;
  box-shadow: none;
  color: #D78F64;
  line-height: 1.2em;
  width: 130px;
  display: inline-block;
  margin-right: 1em;
}
#wpcf7-f1003-o1 input[type="submit"]:hover {
  background-color: #D78F64;
  color: #2C3D46;
}


/* =SCROLL
-------------------------------------------------------------- */

.fadein {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
  -webkit-transition: .6s;
  -o-transition: .6s;
  transition: .6s;
  opacity: 0;
}

.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) translateX(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg) translateZ(0);
}

/* Trigger  */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  }

/* Optional Delays, change values here  */
.one { animation-delay: 0.2s; }
.two { animation-delay: .6s; }
.three { animation-delay: 1s; }
.four { animation-delay: 1.4s; }

/* Animations start here  */

/* FADE IN  */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }

/* FADE IN DOWN */

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }

/* FADE IN UP */

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }

/* FADE IN LEFT */

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-50px, 0, 0)rotateZ(0deg); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }

/* FADE MAINSTROKE */

@keyframes fadeMainStroke{
  from { opacity: 0; }
  to { opacity: 1; width:450px; } }
.fadeMainStroke { animation-name: fadeMainStoke; }

.fadeleft.in-view {
  animation: fadeInLeft 1.4s;
  }

.fadeup.in-view {
  animation: fadeInUp 1.2s;
  }

.fademainstroke.in-view {
  animation: fadeMainStroke 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  animation-delay: 0.6s;
  }

#stroke-container {
  position: relative;
  width: auto;
}

.mainstroke {
  width: 0px;
  height: 2px;
  background: #7F593E;
  position: absolute;
  transform-origin: bottom right;
  transform: rotate(30deg);  
  top: 350px;
  right: -10%;
  z-index: 100;
}

.secondarystroke {
  width: 0px;
  height: 2px;
  background: #7F593E;
  position: absolute;
  transform-origin: bottom right;
  transform: rotate(30deg);  
  top: 300px;
  right: -10%;
  z-index: -100;
}

.secondarystroke-steel {
  width: 0px;
  height: 2px;
  background: #2C3D46;
  position: absolute;
  transform-origin: bottom right;
  transform: rotate(30deg);
  opacity: 0.2!important;
  top: 700px;
  right: -15%;
  z-index: -100;
}



/* =STROKE
-------------------------------------------------------------- */

#stroke {
  width: 400px;
  height: 2px;
  background: #7F593E;
  right: -200px;
  bottom:5%;
  position: absolute;
  overflow: hidden;  
  -webkit-transform-origin: -100, 300px;
  -webkit-transform: rotate(30deg);  
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


/* =UNDERLINE
-------------------------------------------------------------- */

.hover-underline-animation {
  display: inline-block;
  position: relative;
  margin: 0;
}

.hover-underline-animation:hover {
  color: #7F593E;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  -webkit-transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #815a3b;
  -webkit-transform-origin: bottom left;
  -webkit-transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  -webkit-transform: scaleX(1);
  -webkit-transform-origin: bottom left;
}



/* =HOME
-------------------------------------------------------------- */

.home-cta {
  width:100px!important;
  padding-top: 20px!important;
  padding-bottom: 30px!important;
}

.casestudy {
  position: relative;
  top:0;
  left: 0;
  clear: both;
}

.casestudy-text {
  width:100%;
}

.casestudy-image img{
  width:100%;
  height: 450px;
  object-fit: cover;
  z-index: 0;
}

.casestudy-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 75%;
  min-height:500px;
  max-height:500px;
  padding-top:50px;
  padding-left:5%;
  padding-right:0px;
  z-index: 10;
  text-align: left;
  vertical-align: bottom;
  background: rgba(44, 61, 70, 0.4);
}

.home-carousel-text {
  margin-top: 0px;
}

.home-blog{
  width: 100%!important;
  text-align: left;
  vertical-align: top;
}

.home-blog-cards {
  width: 100%;
  margin-right: 0px;
  margin-top: 30px;
  margin-bottom: 0!important;
  padding: 0;
  display: inline-block;
  vertical-align: top;
  cursor: pointer!important;
}

.home-blog-cards:nth-child(5n){
  padding-right: 0;
}

.home-blog-cards img{
  width: 100%;
  height: 50vw;
  object-fit: cover;
}

.home-blog-text {
  margin-top: 10px;
  text-align: left;
  position: relative;
}

.home-blog-cta{
  margin-top: 30px;
  width: 100%;
  padding-left: 0;
  display: inline-block;
}

.home-people-text {
  width: 320px!important;
}

 
/* =HOME -CAROUSEL 
-------------------------------------------------------------- */

.carousel-cell {
  width: 100%;
  height: auto;
  margin-right: 10px;
  counter-increment: carousel-cell;
  text-align: left;
}

.carousel-cell img{
  width:100%;
  height: 55vw;
  object-fit: cover;
}

.dot {
  margin:0 5px!important;
  background:#7F593E!important;
}

.flickity-page-dots{
  position:absolute;
  width:100%;
  bottom:-25px;
  padding:0;
  margin:0;
  list-style:none;
  text-align:right!important;
  line-height:1}

.flickity-button:disabled{
  opacity:0!important;
}

.flickity-button-icon {
  fill: #fff!important;
}

.flickity-button {
  background: transparent!important;
}


/* =WORK
-------------------------------------------------------------- */

.work-title {
  width:400px;
  vertical-align: top;
  text-align: left;
  display: inline-block;
  line-height: 2;
}

.work-parent {
  width:100%;
  margin: 0!important;
  padding: 0!important;
  position:relative;
  text-align: left!important;
  display: block;
  vertical-align: top;
}

.work-parent h2 {
  padding-bottom: 0;
  margin-bottom: 0;
}

.work-menu{
  width: 100%;
  text-align: left;
}

.work-menu li.active{
  color: #2C3D46;
}

.work-menu ul li{
  margin: 0;
  list-style-type: none;
  cursor: pointer;
  -webkit-transition: all .7s ease-in time;
  -moz-transition: all .7s ease-in time;
  -ms-transition: all .7s ease-in time;
  -o-transition: all .7s ease-in time;
  transition: all .7s ease-in time;
}

.work-menu ul li:hover{
  color: #2C3D46;
}

.work-item{
  width: 100%;
  float: right;
}

.itemwork{
  width: 100%;
  height: auto;
  float: right;
  margin-bottom: 40px;
  margin-left: 0px;
  margin-right:0px;
  text-align: left;
}

.itemwork img {
  width: 100%;
  height: 50vw!important; 
  object-fit: cover;
  -o-object-fit: cover;
}


/* =PROJECT
-------------------------------------------------------------- */

#project-details {
  margin-bottom: 20px;
  text-align: left;
}

#project-details h2{
  padding-bottom: 0px!important;
}

#project-content h2{
  padding-bottom: 10px!important;
}

#project-feature img{
  width:100%;
}

.rsNav {
  position: absolute;
  bottom: auto;
  top: -20px;
}

.royalSlider {
  width: 100%!important;
  height: 53vw!important;
}


/* =JOURNAL
-------------------------------------------------------------- */

.journal-intro {
  width: 100%;
  padding-left: calc(5% + 5px);
  padding-right: calc(5% + 5px);
  float: right;
  text-align: left;
  display: block;
}

.journal-parent {
  width:100%;
  margin: 0!important;
  padding: 0!important;
  position:relative;
  text-align: left!important;
  display: block;
  vertical-align: top;
}

.journal-featured-container{
  width: 100%;
  text-align: left;
  float: left;
}

.journal-featured-parent {
  min-width: 100%;
  max-width: 100%;
  height: 450px;
  position: relative;
  vertical-align: top;
  text-align: left;
  float: right;
}

.journal-featured-child {
  width:100%;
  height: 450px!important;
  position: absolute;
  top:0;
  right:0;
  display:inline-block!important;
  text-align: right!important;
  clear: both;
}

.journal-featured-child img{
  width: 100%;
  height: 450px!important;
  object-fit: cover;  
}

.journal-featured-mark{
  width: 100%;
  height: auto!important;
  position: absolute;
  top: 50px!important;
  right: 0px;
  z-index: 10;
  opacity: 0.3;
}

.journal-featured-mark img{
  width: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.journal-featured-cat {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  margin-bottom: 5px;
}

.journal-parent h2 {
  padding-bottom: 0;
  margin-bottom: 0;
}

.journal-menu{
  width: 100%;
  text-align: left;
}

.journal-menu li.active{
  color: #2C3D46!important;
}

.journal-menu ul li{
  margin: 0;
  list-style-type: none;
  cursor: pointer;
  -webkit-transition: all .7s ease-in time;
  -moz-transition: all .7s ease-in time;
  -ms-transition: all .7s ease-in time;
  -o-transition: all .7s ease-in time;
  transition: all .7s ease-in time;
}

.journal-menu ul li:hover{
  color: #2C3D46!important;
}

.journal-item{
  width: 100%;
  float: right;
  left: 0px;
}

.itemjournal{
  width: 100%;
  height: auto;
  float: right;
  margin-bottom: 40px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: left;
}

.itemjournal img {
  width: 100%;
  height: 55vw!important; 
  object-fit: cover;
  -o-object-fit: cover;
}



/* =INNOVATION
-------------------------------------------------------------- */

.innovation-wrapper{
  width: 100%;
  text-align: left;
  text-transform: uppercase!important;
  font-size: 1.4em;
}

.coming-soon {
  text-transform: uppercase!important;
}

.innovation-container {
  text-align: left!important;
}

.innovation-container a:hover{
  color:#fff!important;
}

.hover_img a { 
  position:relative;
  margin-bottom: 0;
  transition: all 0.6s ease;  
}

.hover_img a span { 
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.6s all ease-in-out;
  display:none; 
  z-index:-100;
}

.hover_img img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.hover_img a:hover span { 
  display:block;
  margin-bottom: 100px!important;  
}

.list-animation,
.list-animation span {
  animation-duration: 0.6s;
}

.cssanimation span {
  display: inline-block;
}

.fadeInBottom {
  animation-name: fadeInBottom;
}

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

.innovation-item-list {
  transition: opacity .25s ease-in-out;
  color: #fff!important;
}

.innovation-item-list a{
  font-size: 0.9em;
}

.innovation-item:hover .innovation-item-list {
  opacity: 0.25;
  color: #fff!important;
}

.innovation-item:hover .innovation-item-list:hover {
  opacity: 1;
  color: #fff!important;
}

.innovation-item-list li{
  padding-bottom: 0px!important;
  padding-top: 20px!important;
  margin-top: -1px!important;
  border-top: 1px solid #2C3D46;
  border-bottom: 1px solid #2C3D46;
}

.innovation-item-list li:hover{
  margin-top: -1px!important;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}


/* =INNOVATION SINGLE ARTICLE
-------------------------------------------------------------- */

.innovation-title {
  font-size: 1em;
}

.innovation-image img {
  max-width: 100%;
  height: auto;
}

.innovation-text-wrapper{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.innovation-heading {
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.3;
}

.innovation-text {
  font-size: 1em;
  line-height: 1.3;
}

.innovation-text-large {
  font-size: 1.2em;
  line-height: 1.3;
}

.innovation-link a{
  color: #D78F64!important;  
}

.innovation-link a:hover{
  color: #F7F7F3!important;
  transition: all 0.4s;
}



/* =STUDIO
-------------------------------------------------------------- */

.studio-icons {
  width: 80px;
  height: 80px!important;
  float: left;
  margin-right: 20px;
  text-align: center;
  vertical-align: bottom;
  bottom: 0;
}

.studio-icons img {
  width: 100%;
  height: 80px!important; 
  object-fit: contain;
  -o-object-fit: contain;
}


/* =METHODOLOGY
-------------------------------------------------------------- */

.methodology-title {
  width:80%;
  padding-bottom: 50px;
}

.methodology-icons{
  max-width: 110px;
  margin-bottom: 30px;
}

.methodology-col-parent {
  width: 100%;
  vertical-align: top;
  height: auto;
  text-align: right;
}

.methodology-col3 {
  width: 100%;
  display: inline-block;
  text-align: left;
  padding-top: 30px;
  margin-left: 0px;
  vertical-align: top;
  border-top: 1px solid #D78F64;
}

.methodology-cta {
  width: 100%;
}

.svg-parent {
  width:auto;
  position: relative;
  text-align: left!important;
}

.svg-child{
  width: 65%;
  text-align: left!important;
}

.svg-child-strategy{
  width:35%;
  text-align: left!important;
}



/* =ARTICLE
-------------------------------------------------------------- */

.article-feature {
  position: relative;
  width: 100%;
  height: 400px;
  top:0;
  left: 0;
  clear: both;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* =FOOTER
-------------------------------------------------------------- */

#footersection-1 {
  min-width: 100%;
  max-width: 100%;
  padding-bottom: 30px;
  display: inline-block;
  vertical-align: top;
}

#footersection-2 {
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
  vertical-align: top;
}

#details{
  min-width: 100%;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 30px;
}



/* =Certifications
-------------------------------------------------------------- */

.climateactive {
  width: 70px;
  height: 85px;
  margin-bottom: 30px;
  margin-right: 20px;
  background: url(images/climate.png) no-repeat;
  background-size: contain;
  display: inline-block;
}

.reconciliation{
  width: 105px;
  height: 62px;
  margin-bottom: 30px;
  margin-right: 20px;
  vertical-align: top;
  background: url(images/reconciliation.svg) no-repeat;
  background-size: contain;
  display: inline-block;
}

.splitting .char {
  animation: slide-in .7s cubic-bezier(.3, 0, .7, 1) both;
  animation-delay: calc(50ms * var(--char-index));
}

@keyframes slide-in {
  0%  {
    opacity: 0;
  }

  100%  {
    opacity: 1;
  }


}



/* =SVG ANIMATION
-------------------------------------------------------------- */

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1em;
}




/* =SVG ANIMATION METHODOLOGY
-------------------------------------------------------------- */

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
          animation: animate-svg-stroke-1 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 268.91253662109375px;
    stroke-dasharray: 268.91253662109375px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.91253662109375px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 268.91253662109375px;
    stroke-dasharray: 268.91253662109375px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.91253662109375px;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
          animation: animate-svg-stroke-2 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 268.9625549316406px;
    stroke-dasharray: 268.9625549316406px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.9625549316406px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 268.9625549316406px;
    stroke-dasharray: 268.9625549316406px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.9625549316406px;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
          animation: animate-svg-stroke-3 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
          animation: animate-svg-stroke-4 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 167.31495666503906px;
    stroke-dasharray: 167.31495666503906px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.31495666503906px;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 167.31495666503906px;
    stroke-dasharray: 167.31495666503906px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.31495666503906px;
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
          animation: animate-svg-stroke-5 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 167.1417694091797px;
    stroke-dasharray: 167.1417694091797px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.1417694091797px;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 167.1417694091797px;
    stroke-dasharray: 167.1417694091797px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.1417694091797px;
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
          animation: animate-svg-stroke-6 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 308.8896179199219px;
    stroke-dasharray: 308.8896179199219px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.8896179199219px;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 308.8896179199219px;
    stroke-dasharray: 308.8896179199219px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.8896179199219px;
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
          animation: animate-svg-stroke-7 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 167.14175415039062px;
    stroke-dasharray: 167.14175415039062px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.14175415039062px;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 167.14175415039062px;
    stroke-dasharray: 167.14175415039062px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.14175415039062px;
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
          animation: animate-svg-stroke-8 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 15.482590675354004px;
    stroke-dasharray: 15.482590675354004px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 15.482590675354004px;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 15.482590675354004px;
    stroke-dasharray: 15.482590675354004px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 15.482590675354004px;
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both;
          animation: animate-svg-stroke-9 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 44.21440240795426px;
    stroke-dasharray: 44.21440240795426px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.21440240795426px;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 44.21440240795426px;
    stroke-dasharray: 44.21440240795426px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.21440240795426px;
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both;
          animation: animate-svg-stroke-10 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 135.5562744140625px;
    stroke-dasharray: 135.5562744140625px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.5562744140625px;
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 135.5562744140625px;
    stroke-dasharray: 135.5562744140625px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.5562744140625px;
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
          animation: animate-svg-stroke-11 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 135.54287719726562px;
    stroke-dasharray: 135.54287719726562px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.54287719726562px;
  }
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 135.54287719726562px;
    stroke-dasharray: 135.54287719726562px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.54287719726562px;
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both;
          animation: animate-svg-stroke-12 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 302.06915283203125px;
    stroke-dasharray: 302.06915283203125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 302.06915283203125px;
  }
}

@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 302.06915283203125px;
    stroke-dasharray: 302.06915283203125px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 302.06915283203125px;
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both;
          animation: animate-svg-stroke-13 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 95.1422348022461px;
    stroke-dasharray: 95.1422348022461px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 95.1422348022461px;
  }
}

@keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 95.1422348022461px;
    stroke-dasharray: 95.1422348022461px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 95.1422348022461px;
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-stroke-14 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both;
          animation: animate-svg-stroke-14 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 305.6958312988281px;
    stroke-dasharray: 305.6958312988281px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 305.6958312988281px;
  }
}

@keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 305.6958312988281px;
    stroke-dasharray: 305.6958312988281px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 305.6958312988281px;
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-stroke-15 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s both;
          animation: animate-svg-stroke-15 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s both;
}

@-webkit-keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 62.66637420654297px;
    stroke-dasharray: 62.66637420654297px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.66637420654297px;
  }
}

@keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 62.66637420654297px;
    stroke-dasharray: 62.66637420654297px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.66637420654297px;
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-stroke-16 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s both;
          animation: animate-svg-stroke-16 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 28.072208404541016px;
    stroke-dasharray: 28.072208404541016px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.072208404541016px;
  }
}

@keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 28.072208404541016px;
    stroke-dasharray: 28.072208404541016px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.072208404541016px;
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-stroke-17 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s both;
          animation: animate-svg-stroke-17 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s both;
}

@-webkit-keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 28.072208404541016px;
    stroke-dasharray: 28.072208404541016px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.072208404541016px;
  }
}

@keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 28.072208404541016px;
    stroke-dasharray: 28.072208404541016px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.072208404541016px;
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-stroke-18 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s both;
          animation: animate-svg-stroke-18 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s both;
}

@-webkit-keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 167.0517557249448px;
    stroke-dasharray: 167.0517557249448px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.0517557249448px;
  }
}

@keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 167.0517557249448px;
    stroke-dasharray: 167.0517557249448px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.0517557249448px;
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-stroke-19 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s both;
          animation: animate-svg-stroke-19 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s both;
}

@-webkit-keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 11.451860427856445px;
    stroke-dasharray: 11.451860427856445px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451860427856445px;
  }
}

@keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 11.451860427856445px;
    stroke-dasharray: 11.451860427856445px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451860427856445px;
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-stroke-20 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s both;
          animation: animate-svg-stroke-20 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s both;
}

@-webkit-keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 11.451859474182129px;
    stroke-dasharray: 11.451859474182129px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451859474182129px;
  }
}

@keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 11.451859474182129px;
    stroke-dasharray: 11.451859474182129px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451859474182129px;
  }
}

.svg-elem-21 {
  -webkit-animation: animate-svg-stroke-21 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
          animation: animate-svg-stroke-21 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
}

@-webkit-keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 11.451855659484863px;
    stroke-dasharray: 11.451855659484863px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451855659484863px;
  }
}

@keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 11.451855659484863px;
    stroke-dasharray: 11.451855659484863px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451855659484863px;
  }
}

.svg-elem-22 {
  -webkit-animation: animate-svg-stroke-22 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s both;
          animation: animate-svg-stroke-22 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s both;
}

@-webkit-keyframes animate-svg-stroke-23 {
  0% {
    stroke-dashoffset: 11.451864242553711px;
    stroke-dasharray: 11.451864242553711px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451864242553711px;
  }
}

@keyframes animate-svg-stroke-23 {
  0% {
    stroke-dashoffset: 11.451864242553711px;
    stroke-dasharray: 11.451864242553711px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451864242553711px;
  }
}

.svg-elem-23 {
  -webkit-animation: animate-svg-stroke-23 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s both;
          animation: animate-svg-stroke-23 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s both;
}

@-webkit-keyframes animate-svg-stroke-24 {
  0% {
    stroke-dashoffset: 11.50158405303955px;
    stroke-dasharray: 11.50158405303955px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.50158405303955px;
  }
}

@keyframes animate-svg-stroke-24 {
  0% {
    stroke-dashoffset: 11.50158405303955px;
    stroke-dasharray: 11.50158405303955px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.50158405303955px;
  }
}

.svg-elem-24 {
  -webkit-animation: animate-svg-stroke-24 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s both;
          animation: animate-svg-stroke-24 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s both;
}

@-webkit-keyframes animate-svg-stroke-25 {
  0% {
    stroke-dashoffset: 11.451855659484863px;
    stroke-dasharray: 11.451855659484863px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451855659484863px;
  }
}

@keyframes animate-svg-stroke-25 {
  0% {
    stroke-dashoffset: 11.451855659484863px;
    stroke-dasharray: 11.451855659484863px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.451855659484863px;
  }
}

.svg-elem-25 {
  -webkit-animation: animate-svg-stroke-25 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s both;
          animation: animate-svg-stroke-25 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s both;
}

@-webkit-keyframes animate-svg-stroke-26 {
  0% {
    stroke-dashoffset: 11.45185661315918px;
    stroke-dasharray: 11.45185661315918px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.45185661315918px;
  }
}

@keyframes animate-svg-stroke-26 {
  0% {
    stroke-dashoffset: 11.45185661315918px;
    stroke-dasharray: 11.45185661315918px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.45185661315918px;
  }
}

.svg-elem-26 {
  -webkit-animation: animate-svg-stroke-26 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
          animation: animate-svg-stroke-26 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
}

@-webkit-keyframes animate-svg-stroke-27 {
  0% {
    stroke-dashoffset: 11.50157642364502px;
    stroke-dasharray: 11.50157642364502px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.50157642364502px;
  }
}

@keyframes animate-svg-stroke-27 {
  0% {
    stroke-dashoffset: 11.50157642364502px;
    stroke-dasharray: 11.50157642364502px;
  }

  12.5% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.50157642364502px;
  }
}

.svg-elem-27 {
  -webkit-animation: animate-svg-stroke-27 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s both;
          animation: animate-svg-stroke-27 8s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s both;
}



/* =SVG ANIMATION STRATEGY
-------------------------------------------------------------- */

@-webkit-keyframes strategy-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 268.91253662109375px;
    stroke-dasharray: 268.91253662109375px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.91253662109375px;
  }
}

@keyframes strategy-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 268.91253662109375px;
    stroke-dasharray: 268.91253662109375px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.91253662109375px;
  }
}

.strategy-svg-elem-1 {
  -webkit-animation: strategy-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
          animation: strategy-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@-webkit-keyframes strategy-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 269.2857666015625px;
    stroke-dasharray: 269.2857666015625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.2857666015625px;
  }
}

@keyframes strategy-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 269.2857666015625px;
    stroke-dasharray: 269.2857666015625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.2857666015625px;
  }
}

.strategy-svg-elem-2 {
  -webkit-animation: strategy-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
          animation: strategy-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@-webkit-keyframes strategy-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

@keyframes strategy-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 269.112548828125px;
    stroke-dasharray: 269.112548828125px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 269.112548828125px;
  }
}

.strategy-svg-elem-3 {
  -webkit-animation: strategy-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
          animation: strategy-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@-webkit-keyframes strategy-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 268.9625549316406px;
    stroke-dasharray: 268.9625549316406px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.9625549316406px;
  }
}

@keyframes strategy-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 268.9625549316406px;
    stroke-dasharray: 268.9625549316406px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 268.9625549316406px;
  }
}

.strategy-svg-elem-4 {
  -webkit-animation: strategy-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
          animation: strategy-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}




/* =SVG ANIMATION PROPERTY
-------------------------------------------------------------- */

@-webkit-keyframes property-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 167.18194580078125px;
    stroke-dasharray: 167.18194580078125px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18194580078125px;
  }
}

@keyframes property-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 167.18194580078125px;
    stroke-dasharray: 167.18194580078125px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18194580078125px;
  }
}

.property-svg-elem-1 {
  -webkit-animation: property-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
          animation: property-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@-webkit-keyframes property-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 167.18267822265625px;
    stroke-dasharray: 167.18267822265625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18267822265625px;
  }
}

@keyframes property-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 167.18267822265625px;
    stroke-dasharray: 167.18267822265625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18267822265625px;
  }
}

.property-svg-elem-2 {
  -webkit-animation: property-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
          animation: property-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@-webkit-keyframes property-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 308.84613037109375px;
    stroke-dasharray: 308.84613037109375px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.84613037109375px;
  }
}

@keyframes property-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 308.84613037109375px;
    stroke-dasharray: 308.84613037109375px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.84613037109375px;
  }
}

.property-svg-elem-3 {
  -webkit-animation: property-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
          animation: property-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@-webkit-keyframes property-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 167.18264770507812px;
    stroke-dasharray: 167.18264770507812px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18264770507812px;
  }
}

@keyframes property-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 167.18264770507812px;
    stroke-dasharray: 167.18264770507812px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 167.18264770507812px;
  }
}

.property-svg-elem-4 {
  -webkit-animation: property-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
          animation: property-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

@-webkit-keyframes property-animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 15.441900253295898px;
    stroke-dasharray: 15.441900253295898px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 15.441900253295898px;
  }
}

@keyframes property-animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 15.441900253295898px;
    stroke-dasharray: 15.441900253295898px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 15.441900253295898px;
  }
}

.property-svg-elem-5 {
  -webkit-animation: property-animate-svg-stroke-5 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
          animation: property-animate-svg-stroke-5 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
}

@-webkit-keyframes property-animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 44.10372671260527px;
    stroke-dasharray: 44.10372671260527px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.10372671260527px;
  }
}

@keyframes property-animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 44.10372671260527px;
    stroke-dasharray: 44.10372671260527px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.10372671260527px;
  }
}

.property-svg-elem-6 {
  -webkit-animation: property-animate-svg-stroke-6 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
          animation: property-animate-svg-stroke-6 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}



/* =SVG ANIMATION DESIGN
-------------------------------------------------------------- */

@-webkit-keyframes design-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 95.05060577392578px;
    stroke-dasharray: 95.05060577392578px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 95.05060577392578px;
  }
}

@keyframes design-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 95.05060577392578px;
    stroke-dasharray: 95.05060577392578px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 95.05060577392578px;
  }
}

.design-svg-elem-1 {
  -webkit-animation: design-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
          animation: design-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@-webkit-keyframes design-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 305.68475341796875px;
    stroke-dasharray: 305.68475341796875px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 305.68475341796875px;
  }
}

@keyframes design-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 305.68475341796875px;
    stroke-dasharray: 305.68475341796875px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 305.68475341796875px;
  }
}

.design-svg-elem-2 {
  -webkit-animation: design-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
          animation: design-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@-webkit-keyframes design-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 62.694461822509766px;
    stroke-dasharray: 62.694461822509766px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.694461822509766px;
  }
}

@keyframes design-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 62.694461822509766px;
    stroke-dasharray: 62.694461822509766px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.694461822509766px;
  }
}

.design-svg-elem-3 {
  -webkit-animation: design-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
          animation: design-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@-webkit-keyframes design-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 28.07731819152832px;
    stroke-dasharray: 28.07731819152832px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.07731819152832px;
  }
}

@keyframes design-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 28.07731819152832px;
    stroke-dasharray: 28.07731819152832px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.07731819152832px;
  }
}

.design-svg-elem-4 {
  -webkit-animation: design-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
          animation: design-animate-svg-stroke-4 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

@-webkit-keyframes design-animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 28.07731819152832px;
    stroke-dasharray: 28.07731819152832px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.07731819152832px;
  }
}

@keyframes design-animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 28.07731819152832px;
    stroke-dasharray: 28.07731819152832px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 28.07731819152832px;
  }
}

.design-svg-elem-5 {
  -webkit-animation: design-animate-svg-stroke-5 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
          animation: design-animate-svg-stroke-5 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
}

@-webkit-keyframes design-animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 166.84715297325516px;
    stroke-dasharray: 166.84715297325516px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 166.84715297325516px;
  }
}

@keyframes design-animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 166.84715297325516px;
    stroke-dasharray: 166.84715297325516px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 166.84715297325516px;
  }
}

.design-svg-elem-6 {
  -webkit-animation: design-animate-svg-stroke-6 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
          animation: design-animate-svg-stroke-6 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}

@-webkit-keyframes design-animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 11.482633590698242px;
    stroke-dasharray: 11.482633590698242px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.482633590698242px;
  }
}

@keyframes design-animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 11.482633590698242px;
    stroke-dasharray: 11.482633590698242px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.482633590698242px;
  }
}

.design-svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
          animation: animate-svg-stroke-7 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
}

@-webkit-keyframes design-animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 11.493404388427734px;
    stroke-dasharray: 11.493404388427734px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.493404388427734px;
  }
}

@keyframes design-animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 11.493404388427734px;
    stroke-dasharray: 11.493404388427734px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.493404388427734px;
  }
}

.design-svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
          animation: animate-svg-stroke-8 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
}

@-webkit-keyframes design-animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 11.503305435180664px;
    stroke-dasharray: 11.503305435180664px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.503305435180664px;
  }
}

@keyframes design-animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 11.503305435180664px;
    stroke-dasharray: 11.503305435180664px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.503305435180664px;
  }
}

.design-svg-elem-9 {
  -webkit-animation: design-animate-svg-stroke-9 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both;
          animation: design-animate-svg-stroke-9 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both;
}

@-webkit-keyframes design-animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 11.513219833374023px;
    stroke-dasharray: 11.513219833374023px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.513219833374023px;
  }
}

@keyframes design-animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 11.513219833374023px;
    stroke-dasharray: 11.513219833374023px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.513219833374023px;
  }
}

.design-svg-elem-10 {
  -webkit-animation: design-animate-svg-stroke-10 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both;
          animation: design-animate-svg-stroke-10 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both;
}

@-webkit-keyframes design-animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 11.523147583007812px;
    stroke-dasharray: 11.523147583007812px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.523147583007812px;
  }
}

@keyframes design-animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 11.523147583007812px;
    stroke-dasharray: 11.523147583007812px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.523147583007812px;
  }
}

.design-svg-elem-11 {
  -webkit-animation: design-animate-svg-stroke-11 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
          animation: design-animate-svg-stroke-11 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}

@-webkit-keyframes design-animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 11.533571243286133px;
    stroke-dasharray: 11.533571243286133px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.533571243286133px;
  }
}

@keyframes design-animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 11.533571243286133px;
    stroke-dasharray: 11.533571243286133px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.533571243286133px;
  }
}

.design-svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both;
          animation: animate-svg-stroke-12 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both;
}

@-webkit-keyframes design-animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 11.543018341064453px;
    stroke-dasharray: 11.543018341064453px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.543018341064453px;
  }
}

@keyframes design-animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 11.543018341064453px;
    stroke-dasharray: 11.543018341064453px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.543018341064453px;
  }
}

.design-svg-elem-13 {
  -webkit-animation: design-animate-svg-stroke-13 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both;
          animation: design-animate-svg-stroke-13 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both;
}

@-webkit-keyframes design-animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 11.553461074829102px;
    stroke-dasharray: 11.553461074829102px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.553461074829102px;
  }
}

@keyframes design-animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 11.553461074829102px;
    stroke-dasharray: 11.553461074829102px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.553461074829102px;
  }
}

.design-svg-elem-14 {
  -webkit-animation: design-animate-svg-stroke-14 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both;
          animation: design-animate-svg-stroke-14 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both;
}




/* =SVG ANIMATION DELIVERY
-------------------------------------------------------------- */

@-webkit-keyframes delivery-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 135.50643920898438px;
    stroke-dasharray: 135.50643920898438px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.50643920898438px;
  }
}

@keyframes delivery-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 135.50643920898438px;
    stroke-dasharray: 135.50643920898438px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.50643920898438px;
  }
}

.delivery-svg-elem-1 {
  -webkit-animation: delivery-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
          animation: delivery-animate-svg-stroke-1 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@-webkit-keyframes delivery-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 135.5064239501953px;
    stroke-dasharray: 135.5064239501953px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.5064239501953px;
  }
}

@keyframes delivery-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 135.5064239501953px;
    stroke-dasharray: 135.5064239501953px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 135.5064239501953px;
  }
}

.delivery-svg-elem-2 {
  -webkit-animation: delivery-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
          animation: delivery-animate-svg-stroke-2 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@-webkit-keyframes delivery-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 301.91412353515625px;
    stroke-dasharray: 301.91412353515625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.91412353515625px;
  }
}

@keyframes delivery-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 301.91412353515625px;
    stroke-dasharray: 301.91412353515625px;
  }

  20% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.91412353515625px;
  }
}

.delivery-svg-elem-3 {
  -webkit-animation: delivery-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
          animation: delivery-animate-svg-stroke-3 5s infinite alternate cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}






/* Custom Added Style */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.button-primary {
  background: #F7F7F3;
  border: 1px solid #F7F7F3;
  color: #7F593E;
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  padding: 12px 40px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  display: inline-block;
}

.button-primary:hover,
.button-primary:focus {
  background: #7F593E;
  border-color: #7F593E;
  color: #F7F7F3;
}
.button--secondary{
  background: #7F593E;
  border: 1px solid #7F593E;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  padding: 12px 30px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  transition: all .2s ease;
}
.button--secondary:hover,
.button--secondary:focus {
  background: #2c3d46;
  border-color: #2c3d46;
  color: #fff;
}
#nav-bar.nav-bar--with-additional-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nav-bar__quick-contact{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-right: 10%;
}
/*.nav-bar__calendar{
  margin-right: 30px;
}*/
.nav-bar__phone-border-right {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 2px solid #7F593E;
}
.nav-bar__quick-contact a {
  color: #7F593E;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transition: all .2s ease;
}
.nav-bar__quick-contact a:hover,
.nav-bar__quick-contact a:focus {
  color: #2c3d46;
}

.nav-bar__phone .icon{
  height: 24px;
  width: 24px;
  margin-right: 7px;
  display: none;
}
.nav-bar__calendar a {
  color: #7F593E;
  transition: all .2s ease;
}
.nav-bar__calendar a:hover,
.nav-bar__calendar a:focus{
  color: #2c3d46;
}
.nav-bar__calendar .icon{
  display: none;
  height: 24px;
  width: 24px;
}
.casestudy-overlay--customized .casestudy-overlay{
  min-height: auto;
  height: 100%;
}
.casestudy-overlay--customized .casestudy-image img {
  display: block;
}
.two-columns-customized{
  font-size: 0;
}
.two-columns-customized ol{
	margin-left: 25px;
    list-style-type: decimal-leading-zero;
}
.two-columns-customized ol li::marker {
  font-weight: bold;
}
.two-columns-customized ol li:not(:last-child){
  margin-bottom: 1em!important;
}
.two-columns-customized #section-1{
  /*font-size: initial;*/
  font-size: 15px;
}
.text-center{
  text-align: center;
}
.testimonial-carousel-holder {
  text-align: left;
}

.testimonial-item{
  position: relative;
  margin-right: 0;
}

.testimonial-item__cover-link {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-indent: -9999em;
}
.testimonial-text{
  font-style: italic;
  margin-bottom: 25px;
  padding-right: 25px;
}
.testimonial-item__image{
  height: 60px;
  width: 60px;
  margin: 0 0 10px;
  padding: 0;
}
.testimonial-item__image img{
  width: 100%!important;
  height: 100%!important;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.testimonial-item__meta {
  padding-right: 25px;
}
.testimonial-item__meta h2{
  margin: 0 0 5px;
  padding: 0;
}

.secondary-cta-holder{
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}
.secondary-cta-holder #section-1{
  font-size: 15px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;

}

#landing-page-contact__inner {
  width: 100%;
  background: #F7F7F3;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 80px;
  padding-bottom: 80px;
  color: #F7FYF3;
}
.landing-page-contact__main{
  text-align: left;
}
.landing-page-contact__main .wpcf7 {
  max-width: 700px;
  margin-top: 30px;
  text-align: left;
}
.landing-page-contact__main form.wpcf7-form input,
.landing-page-contact__main form.wpcf7-form select,
.landing-page-contact__main  form.wpcf7-form textarea {
  border-bottom: 1px solid #D78F64;
  color: #F7FYF3;
  opacity: 0.6;
}
.landing-page-contact__main form.wpcf7-form input:focus,
.landing-page-contact__main form.wpcf7-form select:focus,
.landing-page-contact__main  form.wpcf7-form textarea:focus {
  opacity: 1;
}
.landing-page-contact__main form input::-webkit-input-placeholder,
.landing-page-contact__main form.wpcf7-form select::-webkit-input-placeholder,
.landing-page-contact__main  form.wpcf7-form textarea::-webkit-input-placeholder{ /* WebKit browsers */
  color: #F7FYF3!important;
  opacity: 0.8;
}
.landing-page-contact__main form input:-moz-placeholder,
.landing-page-contact__main form.wpcf7-form select:-moz-placeholder,
.landing-page-contact__main  form.wpcf7-form textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
  color: #F7FYF3!important;
  opacity: 0.8;
}
.landing-page-contact__main form input::-moz-placeholder,
.landing-page-contact__main form.wpcf7-form select::-moz-placeholder,
.landing-page-contact__main  form.wpcf7-form textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
  color: #F7FYF3!important;
  opacity: 0.8;
}
.landing-page-contact__main form input:-ms-input-placeholder,
.landing-page-contact__main form.wpcf7-form select:-ms-input-placeholder,
.landing-page-contact__main  form.wpcf7-form textarea:-ms-input-placeholder{ /* Internet Explorer 10+ */
  color: #F7FYF3!important;
  opacity: 0.8;
}
.landing-page-contact__main form.wpcf7-form input[type="submit"] {
  border: 1px solid #D78F64;
  background-color: #F7FYF3;
  color: #F7F7F3;
  opacity: 1;
}
.landing-page-contact__main form.wpcf7-form input[type="submit"]:hover,
.landing-page-contact__main form.wpcf7-form input[type="submit"]:focus {
  background: #F7FYF3;
  border-color: #F7FYF3;
  color: #D78F64;
}
.image-gallery-holder {
  text-align: left;
}
.image-gallery-holder__inner {
  display: flex;
  flex-wrap: wrap;

}
.image-gallery-holder__gallery-holder {
  width: 81%;
  padding-right: 10px;
}
.image-gallery-holder__gallery-holder.gallery-holder--full-width {
  width: 100%;
  padding: 0;
}
.gallery-items.carousel  .gallery-item{
  width: 100%;
  margin-right: 0px;
  margin-top: 30px;
  margin-bottom: 0!important;
  padding: 0;
  display: inline-block;
  vertical-align: top;
  cursor: pointer!important;
}

.gallery-item__inner {
  display: block;
  padding-bottom: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.gallery-item__inner:after{
  content: "";
  background: rgba(0,0,0,0);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  transition: background .2s ease;
}
.gallery-item__inner:hover:after {
  background: rgba(0,0,0,0.5);
}
.fancybox__container{
  z-index: 20000!important;
}
.gallery-item__name{

}
.casestudy-overlay--customized .casestudy-text {
  font-size: 26px;
}
.image-gallery-holder h1 a,
.secondary-cta-holder__content-col h1 a,
.home-blog h1 a{
  color: #7F593E;
  text-decoration: none;
}
.image-gallery-holder h1 a:hover,
.image-gallery-holder h1 a:focus,
.secondary-cta-holder__content-col h1 a:hover,
.secondary-cta-holder__content-col h1 a:focus,
.home-blog h1 a:hover,
.home-blog h1 a:focus{
  color: #2C3D46;
}

@media screen and (min-width: 700px) {
  .casestudy-overlay--customized .casestudy-text {
    width: 100% !important;
    max-width: 800px;
  }
  .gallery-items.carousel  .gallery-item {
   width: 50%;
    padding-right: 10px;
  }
}
@media screen and (min-width: 1280px) {
  .casestudy-overlay--customized .casestudy-image img {
    height: 550px;
  }
  .casestudy-overlay--customized  .casestudy-overlay {
    max-height: 550px;
  }
  .gallery-items.carousel  .gallery-item {
    width: 25%;
    padding-right: 10px;
  }
.two-columns-customized .text-650 {
    width: 100% !important;
	max-width: 650px;
}
}

@media screen and (min-width: 1366px) {
  .gallery-items.carousel  .gallery-item {
    width: 20%;
    padding-right: 10px;
  }

}

@media screen and (max-width: 1200px) {
  .image-gallery-holder__gallery-holder {
    width: 100%;
    padding-right:0;
    padding-bottom: 25px;
  }
  .image-gallery-holder__gallery-holder.gallery-holder--full-width {
    padding-bottom: 30px;
  }
  .image-gallery-holder__inner {
    flex-direction: column;
  }
  .casestudy-overlay--customized .casestudy-text {
    font-size: 20px;
  }
}
@media screen and (max-width: 960px) {

}
@media screen and (max-width: 767px) {
  .nav-bar__quick-contact{
    margin-right: 15%;
  }
  /*.nav-bar__calendar{
    margin-right: 15px;
  }*/
  .nav-bar__phone a strong{
    text-indent: -9999em;
    font-size: 0;
  }
  .nav-bar__phone .icon{
    margin-right: 0;
  }
  .nav-bar__calendar .nav-bar__calendar-label{
    display: none;
  }

  .nav-bar__calendar .icon,
  .nav-bar__phone .icon{
    display: inline-block;
  }

}
@media screen and (max-width: 700px) {
  .secondary-cta-holder #section-1{
    margin-bottom: 35px;
  }
  .casestudy-overlay--customized .casestudy-text {
    font-size: 18px;
  }
}
@media screen and (max-width: 500px) {
  .button-primary {
    padding: 12px 25px;
  }
  .gallery-item__inner {
    padding-bottom: 56.25%;
  }
  .secondary-cta-holder__content-col h1 br{
    display: none;
  }
}

@media screen and (max-width: 400px) {
  .nav-bar__quick-contact{
    margin-right: 20%;
  }
  .button-primary {
    padding: 12px 18px;
  }
}