/* TABLE OF CONTENTS
-------------------------------------- 
Mobile/Tablet Display:
- General Content
- Header & Navigation
- Body/Main Content
- Footer

Followed by Desktop Display...

Followed by Landscape (Mobile) Display...
---------------------------------------------------------------------------- */

/* Mobile Styles */ /*  NOTE: USE SMALLER PHOTOS THAN TABLET */
@media only screen and (max-width: 768px) {
  /* General Content
-------------------------------------- */

  a {
    text-decoration: none;
    color: #fff;
  }

  h2 {
    text-align: center;
    padding: 0 1em;
  }

  h2 span {
    /*
		font-family: "Garamond";
		font-weight: 100;
		font-size: 0.9em;
		color: #ffffff;
		letter-spacing: 0.081em;		
		font-style: italic;
		-webkit-font-smoothing: antialiased;
*/
  }

  .ital {
    font-family: "Garamond";
    font-weight: 100;
    font-size: 0.9em;
    color: #ffffff;
    letter-spacing: 0.081em;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
  }

  h2,
  h3,
  h4 {
    font-family: "museo-sans";
    font-weight: 500;
    font-size: 1.126em;
    color: #ffffff;
    letter-spacing: 0.094em;
  }

  h3 {
    text-align: center;
  }

  p {
    font-family: "museo-sans";
    font-weight: 100;
    font-size: 0.875em;
    color: #c4c4c4;
    line-height: 1.5em;
    /* 		text-align: justify; */
  }

  .wf-loading {
    visibility: hidden;
  }

  .wf-active {
    visibility: visible;
  }

  /* Header & Navigation
-------------------------------------- */

  header {
    width: 100%;
    height: auto;
  }

  header a h1 {
    font-family: "museo-sans";
    font-weight: 500;
    font-size: 0.95em;
    color: #ffffff;
    letter-spacing: 0.094em;
    background: #222222;
    margin: 0 auto;
    text-align: center;
    padding: 1.35em;
  }

  header h2 {
    display: none;
  }

  header a figure {
    position: fixed;
    height: 0.125em;
    top: 0;
    width: 100%;
    margin: 0;
    z-index: 1;
  }

  header a figure img {
    width: 30%;
    height: auto;
    position: absolute;
    z-index: 1;
  }

  nav ul {
    display: none;
  }

  nav.home {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    margin-bottom: 2.5em;
    position: relative;
    clear: both;
  }

  nav.home a p {
    width: 16em;
    margin: 0 auto;
    text-align: center;
    padding: 0.5em;
    border: 1px solid #343434;
  }

  nav.home a p:hover {
    background: #343434;
  }

  /* Body/Main Content
-------------------------------------- */

  aside {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
    padding: 0 1em;
  }

  aside h3 {
    font-size: 1.08em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #343434;
  }

  aside article.similar {
    max-width: 900px;
    margin: 1em auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  aside article.similar section.col1,
  aside article.similar section.col3,
  aside article.similar section.col5,
  aside article.similar section.col7,
  aside article.similar section.col9,
  aside article.similar section.col11 {
    /* 		background: rgb(237,228,214); */
    float: left;
    height: auto;
    width: 50%;
    margin: 0 auto;
    padding-bottom: 1em;
    clear: both;
  }

  aside article.similar section.col2,
  aside article.similar section.col4,
  aside article.similar section.col6,
  aside article.similar section.col8,
  aside article.similar section.col10,
  aside article.similar section.col12 {
    /* 		background: rgb(173,169,130); */
    float: left;
    height: auto;
    width: 50%;
    margin: 0 auto;
    padding-bottom: 1em;
  }

  /*
	aside article.similar section.col3 {
		background: rgb(219,126,64);
		float: left;
		height: auto;
		width: 50%;
		margin: 0 auto;
	}	
*/

  aside article.similar .col1 img,
  aside article.similar .col3 img,
  aside article.similar .col5 img,
  aside article.similar .col7 img,
  aside article.similar .col9 img,
  aside article.similar .col11 img {
    max-width: 97%;
    float: left;
    padding-bottom: 0.5em;
  }

  aside article.similar .col2 img,
  aside article.similar .col4 img,
  aside article.similar .col6 img,
  aside article.similar .col8 img,
  aside article.similar .col10 img,
  aside article.similar .col12 img {
    max-width: 97%;
    float: right;
    padding-bottom: 0.5em;
  }

  /*
	aside article.similar .col3 img {
		max-width: 97%;
		float: left;
	}		
*/

  aside article.similar .col1 h4,
  aside article.similar .col1 p,
  aside article.similar .col3 h4,
  aside article.similar .col3 p,
  aside article.similar .col5 h4,
  aside article.similar .col5 p,
  aside article.similar .col7 h4,
  aside article.similar .col7 p,
  aside article.similar .col9 h4,
  aside article.similar .col9 p,
  aside article.similar .col11 h4,
  aside article.similar .col11 p {
    max-width: 97%;
    margin: 0;
  }

  aside article.similar .col2 h4,
  aside article.similar .col2 p,
  aside article.similar .col4 h4,
  aside article.similar .col4 p,
  aside article.similar .col6 h4,
  aside article.similar .col6 p,
  aside article.similar .col8 h4,
  aside article.similar .col8 p,
  aside article.similar .col10 h4,
  aside article.similar .col10 p,
  aside article.similar .col12 h4,
  aside article.similar .col12 p {
    max-width: 97%;
    margin: 0 0 0 3%;
  }

  /*
	aside article.similar .col3 h4, aside article.similar .col3 p {
		max-width: 97%;
		padding: 0;
		margin: 0;
	}
*/

  aside article.similar .col1 header,
  aside article.similar .col2 header,
  aside article.similar .col3 header,
  aside article.similar .col4 header,
  aside article.similar .col5 header,
  aside article.similar .col6 header,
  aside article.similar .col7 header,
  aside article.similar .col8 header,
  aside article.similar .col9 header,
  aside article.similar .col10 header,
  aside article.similar .col11 header,
  aside article.similar .col12 header {
    padding: 0.5em 0;
  }

  aside article.similar .col1 header p,
  aside article.similar .col2 header p,
  aside article.similar .col3 header p,
  aside article.similar .col4 header p,
  aside article.similar .col5 header p,
  aside article.similar .col6 header p,
  aside article.similar .col7 header p,
  aside article.similar .col8 header p,
  aside article.similar .col9 header p,
  aside article.similar .col10 header p,
  aside article.similar .col11 header p,
  aside article.similar .col12 header p {
    padding: 0 0 0.5em 0;
    border-bottom: 1px solid #343434;
  }

  body {
    width: 100%;
    margin: 0 auto;
    /* 		min-width: 1024px; */
    background: #18191B;
    color: #fff;
  }

  main {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  main article {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  main article figure {
    margin: 0 auto;
    padding: 0 1em;
  }

  main article figure img {
    max-width: 100%;
  }

  main article section.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 900px;
  }

  main article section.videowrapper iframe,
  main article section.videowrapper object,
  main article section.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  main article section header {
    height: auto;
  }

  main article h3 span,
  aside h3 span,
  aside header p {
    font-family: "Garamond";
    font-weight: 100;
    font-size: 1.126em;
    color: #ffffff;
    background: #000;
    letter-spacing: 0.081em;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
  }

  main article section a p {
    width: 16em;
    margin: 2em auto 1.25em auto;
    text-align: center;
    padding: 0.5em;
    border: 1px solid #343434;
  }

  main article section a p:hover {
    background: #343434;
  }

  main article section.left,
  main article section.right {
    margin: 0 auto;
    padding: 0 1em;
  }

  /* Footer
-------------------------------------- */

  footer {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    color: #ffffff;
    z-index: 3;
    clear: both;
  }

  footer article {
    height: 6em;
    padding: 0 1em;
    background-color: #25484c;
    min-width: 300px;
  }

  footer article section.contact {
    height: 36px;
    padding: 1em 0 0 0;
    display: inline;
    float: left;
  }

  footer article section.contact span.blt {
    display: none;
  }

  footer article section p {
    display: block;
    margin: 0;
  }

  footer article section.social {
    bottom: 0;
    padding: 3.36em 0 0 0;
    display: inline;
    float: right;
  }
}

/* TABLE OF CONTENTS
-------------------------------------- 
Desktop Display:
- General Content
- Header & Navigation
- Body/Main Content
- Footer
---------------------------------------------------------------------------- */
/* Desktop Styles */
@media only screen and (min-width: 769px) {
  /* General Content
-------------------------------------- */

  a {
    text-decoration: none;
    color: #fff;
  }

  h2,
  h3,
  h4 {
    font-family: "museo-sans";
    font-weight: 500;
    font-size: 1.126em;
    color: #ffffff;
    letter-spacing: 0.094em;
  }

  h2 span {
    /*
		font-family: "Garamond";
		font-weight: 100;
		font-size: 1.126em;
		color: #ffffff;
		background: #000;
		letter-spacing: 0.081em;		
		font-style: italic;
		-webkit-font-smoothing: antialiased;	
*/
  }

  .ital {
    font-family: "Garamond";
    font-weight: 100;
    font-size: 1.126em;
    color: #ffffff;
    background: #000;
    letter-spacing: 0.081em;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
  }

  p {
    font-family: "museo-sans";
    font-weight: 100;
    font-size: 0.875em;
    color: #c4c4c4;
    line-height: 1.5em;
  }

  ul {
    list-style: none outside none;
  }

  .wf-loading {
    visibility: hidden;
  }

  .wf-active {
    visibility: visible;
  }

  /* Header & Navigation
-------------------------------------- */

  header {
    width: 100%;
    height: auto;
    top: 0;
  }

  header.head {
    position: fixed;
    backface-visibility: hidden;
    z-index: 2;
  }

  header a figure {
    position: fixed;
    backface-visibility: hidden;
    height: 0.125em;
    top: 0;
    width: 100%;
    margin: 0;
    z-index: 2;
  }

  header a figure img {
    position: absolute;
    z-index: 2;
  }

  header a h1 {
    font-family: "museo-sans";
    font-weight: 500;
    font-size: 1.126em;
    color: #ffffff;
    letter-spacing: 0.094em;
    background: #343434;
    text-transform: uppercase;
    margin: 0 auto;
    text-align: center;
    padding: 1.8em;
  }

  header h2 {
    margin: 0 auto;
    text-align: center;
    padding: 1em;
    background: #000000;
    border-bottom: 1px solid #343434;
  }

  nav img.leftarrow,
  nav img.rightarrow {
    width: 50px;
  }

  nav .leftarrow {
    float: left;
    position: fixed;
    left: 0em;
    top: 50%;
    z-index: 1;
  }

  nav .rightarrow {
    float: right;
    position: fixed;
    right: 0em;
    top: 50%;
    z-index: 1;
  }

  nav .leftarrow:hover {
    background: #fff;
  }

  nav .rightarrow:hover {
    background: #fff;
  }

  nav.home {
    display: none;
  }

  /* Body/Main Content
-------------------------------------- */

  aside {
    max-width: 900px;
    /* margin: 0 auto 1.5em auto; */
    margin: 0 auto 50px auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
    padding: 0 4em;
  }

  aside h3 {
    padding-bottom: 0.2em;
    border-bottom: 1px solid #343434;
  }

  aside article.similar {
    max-width: 900px;
    margin: 1em auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  aside article.similar section.col1,
  aside article.similar section.col4,
  aside article.similar section.col7,
  aside article.similar section.col10 {
    /* 		background: rgb(237,228,214); */
    float: left;
    height: auto;
    width: 33.3%;
    margin: 0 auto 1em auto;
    clear: both;
  }

  aside article.similar section.col2,
  aside article.similar section.col5,
  aside article.similar section.col8,
  aside article.similar section.col11 {
    /* 		background: rgb(219,126,64); */
    float: left;
    height: auto;
    width: 33.3%;
    margin: 0 auto 1em auto;
  }

  aside article.similar section.col3,
  aside article.similar section.col6,
  aside article.similar section.col9,
  aside article.similar section.col12 {
    /* 		background: rgb(173,169,130); */
    float: left;
    height: auto;
    width: 33.3%;
    margin: 0 auto 1em auto;
  }

  aside article.similar .col1 img,
  aside article.similar .col4 img,
  aside article.similar .col7 img,
  aside article.similar .col10 img {
    max-width: 97%;
    float: left;
    padding-bottom: 0.5em;
  }

  aside article.similar .col2 img,
  aside article.similar .col5 img,
  aside article.similar .col8 img,
  aside article.similar .col11 img {
    max-width: 97%;
    float: left;
    margin: 0 1.5%;
    padding-bottom: 0.5em;
  }

  aside article.similar .col3 img,
  aside article.similar .col6 img,
  aside article.similar .col9 img,
  aside article.similar .col12 img {
    max-width: 97%;
    float: right;
    padding-bottom: 0.5em;
  }

  aside article.similar .col1 h4,
  aside article.similar .col1 p,
  aside article.similar .col4 h4,
  aside article.similar .col4 p,
  aside article.similar .col7 h4,
  aside article.similar .col7 p,
  aside article.similar .col10 h4,
  aside article.similar .col10 p {
    max-width: 97%;
    margin: 0;
  }

  aside article.similar .col2 h4,
  aside article.similar .col2 p,
  aside article.similar .col5 h4,
  aside article.similar .col5 p,
  aside article.similar .col8 h4,
  aside article.similar .col8 p,
  aside article.similar .col11 h4,
  aside article.similar .col11 p {
    max-width: 97%;
    margin: 0 1.5%;
  }

  aside article.similar .col3 h4,
  aside article.similar .col3 p,
  aside article.similar .col6 h4,
  aside article.similar .col6 p,
  aside article.similar .col9 h4,
  aside article.similar .col9 p,
  aside article.similar .col12 h4,
  aside article.similar .col12 p {
    max-width: 97%;
    margin: 0 0 0 3%;
  }

  aside article.similar .col1 header,
  aside article.similar .col2 header,
  aside article.similar .col3 header,
  aside article.similar .col4 header,
  aside article.similar .col5 header,
  aside article.similar .col6 header,
  aside article.similar .col7 header,
  aside article.similar .col8 header,
  aside article.similar .col9 header,
  aside article.similar .col10 header,
  aside article.similar .col11 header,
  aside article.similar .col12 header {
    padding: 0.5em 0;
  }

  aside article.similar .col1 header p,
  aside article.similar .col2 header p,
  aside article.similar .col3 header p,
  aside article.similar .col4 header p,
  aside article.similar .col5 header p,
  aside article.similar .col6 header p,
  aside article.similar .col7 header p,
  aside article.similar .col8 header p,
  aside article.similar .col9 header p,
  aside article.similar .col10 header p,
  aside article.similar .col11 header p,
  aside article.similar .col12 header p {
    padding: 0 0 0.5em 0;
    border-bottom: 1px solid #343434;
  }

  body {
    width: 100%;
    margin: 0 auto;
    /* 		min-width: 1024px; */
    background: #000;
    color: #fff;
  }

  main {
    max-width: 900px;
    margin: 6em auto 1em auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
    padding: 0 4em;
  }

  main article {
    max-width: 900px;
    margin: 1em auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  main article h2.sub {
    display: none;
  }

  main article section.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 900px;
  }

  main article section.videowrapper iframe,
  main article section.videowrapper object,
  main article section.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  main article section.left {
    float: left;
    width: 49%;
  }

  main article section.right {
    float: right;
    width: 49%;
  }

  main article section a p {
    width: 16em;
    margin: 0;
    text-align: center;
    padding: 0.5em;
    border: 1px solid #343434;
  }

  main article section a p:hover {
    background: #343434;
  }

  main article section header {
    height: auto;
  }

  main article figure {
    width: 100%;
    margin: 0 auto;
  }

  main article figure img,
  main article figure iframe {
    max-width: 100%;
  }

  main article h3 span,
  aside h3 span,
  aside header p {
    font-family: "Garamond";
    font-weight: 100;
    font-size: 1.126em;
    color: #ffffff;
    background: #000;
    letter-spacing: 0.081em;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
  }

  /* Footer
-------------------------------------- */

  footer {
    position: fixed;
    backface-visibility: hidden;
    max-width: 900px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    color: #ffffff;
    z-index: 3;
    padding: 0 4em;
    border-top: 10px solid #000000;
    border-right: 0px solid #000000;
    border-bottom: 10px solid #000000;
    clear: both;
  }

  footer article {
    height: 36px;
    padding: 0 1em;
    background-color: #25484c;
    min-width: 300px;
  }

  footer article section.contact {
    width: 460px;
    /* 		height: 36px; */
    padding: 0.45em 0 0 0;
    display: inline;
    float: left;
  }

  footer article section p {
    display: inline;
  }

  footer article section.social {
    width: 74px; /* Change dependingon how many icons are included */
    /* 		height: 36px; */
    padding: 0.45em 0 0 0;
    display: inline;
    float: right;
  }
}

/* TABLE OF CONTENTS
-------------------------------------- 
Landscape (Mobile) Display:
- Main Content
---------------------------------------------------------------------------- */
/* Landscape (Mobile) Styles */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  /* Main Content
-------------------------------------- */

  header a h1 {
    padding: 2.5em 0;
    border-bottom: 1px solid #343434;
  }

  main {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
    padding: 0 1em;
  }

  main article {
    max-width: 900px;
    margin: 1em auto;
    height: auto;
    overflow: hidden;
    /* 		margin-bottom: 4em; */
    position: relative;
  }

  main article h3 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  main article figure {
    margin: 0 auto;
    padding: 0;
  }

  main article section.left {
    float: left;
    width: 48.6%;
  }

  main article section.right {
    float: right;
    width: 48.6%;
  }

  main article section.left {
    margin: 0 auto;
    padding: 0 0.5em 0 0;
  }

  main article section.right {
    margin: 0 auto;
    padding: 0 0 0 0.5em;
  }
}

/* Replacing Brand Styles */

@font-face {
  font-family: "Montserrat Regular";
  src: url("../../typography/montserratfont/Montserrat-Regular.otf")
    format("opentype"); /* IE no comprende format()! */
}

:root {
  --process-margin: 4px;
  --brand-size: 12vw;
}

.brand {
  display: flex;
  position: fixed;
  border-radius: 50%;
  top: 0;
  z-index: 2;

  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.brand:hover {
  width: calc(var(--brand-size) + 9.5vw);
  height: calc(var(--brand-size) + 9.5vw);
  border-radius: 30% 100%;
}

.brand-home {
  display: flex;
  position: fixed;
  border-radius: 50%;
  z-index: 1;
  width: var(--brand-size);
  height: var(--brand-size);
  transform-origin: top left;
  transform: scale(1.2);
}

#upBrand-home {
  width: var(--brand-size);
  height: var(--brand-size);
  transform-origin: top left;
  transform: scale(1.2);
}

#go-process {
  display: flex;
  text-decoration: none;
  transform-origin: center;
  margin: auto 1vw 1vw auto;
  border-radius: 50%;
}

#go-process span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0.3vw solid #000;
  border-radius: 50%;
  background-color: #fff;
  margin-left: -1vw;
  margin-top: -1vw; /* Needed for dxa */
  color: #000;

  font-family: "Montserrat Regular";
  font-size: 1.15vw;
  line-height: 1.15vw;
  letter-spacing: 0.05vw;
  color: #000;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brand,
#upBrand,
#go-process span {
  width: var(--brand-size);
  height: var(--brand-size);
  transform-origin: top left;
}

.brand:hover,
#upBrand:hover,
#go-process:hover {
  animation: expand 1s;
  transform: scale(1.2);
}

#upBrand {
  position: absolute;
  transition: none;
  border-radius: 0 0 50%;

  -webkit-animation-name: shimmy;
  animation-name: shimmy;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@keyframes shimmy {
  92% {
    transform: translate3d(-4px, 0, 0);
  }
  93% {
    transform: translate3d(4px, 0, 0);
  }
  94% {
    transform: translate3d(-3px, 0, 0);
  }
  95% {
    transform: translate3d(3px, 0, 0);
  }
  96% {
    transform: translate3d(-2px, 0, 0);
  }
  97% {
    transform: translate3d(2px, 0, 0);
  }
  98% {
    transform: translate3d(-1px, 0, 0);
  }
  99% {
    transform: translate3d(1px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.35);
  }
  40% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1.3);
  }
  80% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1.2);
  }
}

/* Replacing Brand Styles */