.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding: 0%;
}

.row {
margin: 0px!important;
padding: 100px 50px;
position: relative;
overflow-x: hidden!important;
}

.modal-open {
  overflow: hidden;
}

:root {
font-size: 18px;
}

body {
--color-text: #000000;
--color-bg: #ffffff;
color: var(--color-text);
background-color: var(--color-bg);
font-family: 'HelveticaNeue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
overflow-x: hidden!important;
max-width: 100vw!important;
max-height: 100vh;
position: relative;
}

/* T Y P O G R A P H Y */

@font-face {
  font-family: Black;
  src: url("../fonts/Helvetica_Neue_Black.woff2") format("opentype");
}

h1 {
margin: auto;
font-family: Black, sans-serif;
text-align: left;
margin-bottom: 25px;
letter-spacing: -0.1em;
text-transform: uppercase;
}

h2 {
  margin: 0 0 25px 0px;
  font-family: Black, sans-serif;
  font-size: 42px;
  line-height: normal;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h3 {
font-family: Black, sans-serif;
margin: 0 0 25px 0px;
letter-spacing: -0.01em;
text-transform: uppercase;
}

h4 {
margin: 0px;
font-family: Berry, sans-serif;
letter-spacing: -0.03em;
}

p {
margin-bottom: 0px;
font-family: CircularLight, sans-serif;
font-variation-settings: 'wght' 300;
}

.fade-in-p {
  opacity: 0;
}

.pbold {
font-weight: 800;
}

a {
cursor: pointer;
transition: .75s ease-in-out;
text-decoration: none!important;
color: #ffffff;
font-family: CircularBook, sans-serif;
display: inline-block;
padding: 0px 0px 1px;
position: relative;
font-variation-settings: 'wght' 500;
}

a:hover {
color: #ffffff;
}

a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: .5px;
  position: absolute;
  background: #ffffff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0%;
  left: 50%;
}

a:hover:after { 
width: 100%; 
left: 0%;
}

.burberry {
  font-family: berry, serif;
  letter-spacing: 5%;
}

@media screen and (min-width: 1025px) {  
  h1 {
    font-size: 5vw;
    line-height: 100%;
  }
  
  h2 {
    font-size: 4vw;
    line-height: 100%;
  }
  
  .h2-style {
    font-size: 4vw;
    line-height: 100%;
  }
  
  h3 {
    font-size: 2vw;
    line-height: 100%;
  }
  
  h4 {
    font-size: 1vw; 
    line-height: 150%;
  }
  
  p {
    font-size: 1.2vw;
    line-height: 150%;
  }
  
  .p2 {
    font-size: .8vw;
    line-height: 150%;
  }
  
  .p3 {
    font-size: .6vw;
    line-height: 150%;
  }
  
  p a {
    font-size: 1vw;
    line-height: 150%;
  }
  
  a {
    font-size: 1vw;
    line-height: 150%;
  }
}

@media screen and (max-width: 1025px) {  
  h1 {
    font-size: 5vw;
    line-height: 100%;
  }
  
  h2 {
    font-size: 4vw;
    line-height: 100%;
  }
  
  .h2-style {
    font-size: 4vw;
    line-height: 100%;
  }
  
  h3 {
    font-size: 2vw;
    line-height: 100%;
  }
  
  h4 {
    font-size: 1vw; 
    line-height: 150%;
  }
  
  p {
    font-size: .8vw;
    line-height: 150%;
  }
  
  .p2 {
    font-size: .7vw;
    line-height: 150%;
  }
  
  .p3 {
    font-size: .6vw;
    line-height: 150%;
  }
  
  p a {
    font-size: 1vw;
    line-height: 150%;
  }
  
  a {
    font-size: 1vw;
    line-height: 150%;
  }
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 25px;
  }

  h2 {
    font-size: 10vw;
    line-height: 100%;
  }

  .h2-style {
    font-size: 1.5vw;
    line-height: 100%;
  }

  .oversized {
    font-size: 45px;
    line-height: 60px;
} 

  h3 {
  font-size: 20px;
  line-height: 25px;
  }

  h4 {
    font-size: 10px;
    line-height: 15px;
}

p a {
  font-size: 18px;
  line-height: 33px;
}

a {
  font-size: 18px;
  line-height: 33px;
}

p {
  font-size: 10px;
  line-height: 135%;
}

.p2 {
    font-size: 14px;
    line-height: 24px;
}

.p3 {
  font-size: 10px;
  line-height: 20px;
}
}

.black-text {
  color: #000000;
}

.white-text {
  color: #ffffff;
}

.white-text div {
  color: #ffffff;
}

.blue-text {
  color:#040F9E;
}

.HelveticaNeue {
  font-family: HelveticaNeue, sans-serif;
  font-weight: 100;
}

.italic {
  font-family: HelveticaNeueItalic, sans-serif;
}

.invert {
  mix-blend-mode: difference;
}

.not-upper {
  text-transform: unset;
} 

.indented {
  text-indent: 50px;
}

.indented-small {
  text-indent: 25px;
}

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

.indented-img {
  width: 20px;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* H E R O */

#content {
  position: absolute;
  top: 0px;
  left: 0px;
}

.hero {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 50%);
  z-index: 999;
}

.hero-graident {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 50%);
  height: 100vh;
  width: 100vw;
  z-index: 9999999999;
  position: absolute;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.language-hero {
  position: absolute;
  bottom: 25px;
  left: 0px;
  color: #CCFF00;
  z-index: 9;
}

.sale-hero {
  color: #CCFF00;
}

.sale-hero-scribble{
  background-image: url(../img/sale-scribble.svg);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 25px;
  right: 0px;
  background-size: contain;
  padding: 25px 50px 0;
  z-index: 9;
  width: fit-content;
  cursor: pointer;
  transition: 1s ease-out;
}

.intheknow .sale-hero-scribble{
  background-image: url(../img/sale-scribble.svg);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  bottom: auto;
  right: auto;
  margin-top: 25px;
  background-size: contain;
  padding: 35px 50px 1px;
  background-position: left;
}
.sale-hero-scribble:hover {
  transform: rotate(-360deg);
}

.logo-hero {
  width: 15vw;
  position: absolute;
  margin: auto;
  left: calc(50% - 7.5vw);
  height: 100%;
  z-index: 9999;
  opacity: 1;
  transition: .5s ease-out;
}

.hero-card {
  position: absolute;
  width: 16.67%;
  aspect-ratio: 9 / 16;
  top: 0px;
  left: 0px;
  display: none;
  opacity: 0px;
  transition: 1s ease-out;
}

/* S H O P */

.shop .col-md-10, .shop .col-md-12 {
  position: relative;
}

.shop .scale-image-row {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.clothing-item {
  display: inline-block;
  position: relative;
  overflow: hidden;
  align-self: auto;
  opacity: 0;
  text-align: left;
}

.clothing-img {
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.f0-opacity {
  opacity: .5;
  text-transform: capitalize;
}

.clothing-item:nth-of-type(odd) {
  vertical-align: top;
}

.clothing-item:nth-of-type(even) {
  vertical-align: bottom;
}

.clothing-item img{
  width: 100%;
}

.black-text-clo {
  background: #000;
  height: 100%;
  width: 100%;
  padding: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(102%);
    transition: .5s ease-out;
}

.clothing-item:hover .black-text-clo {
  transform: translateY(0%);
}

.clothing-item img:nth-of-type(2) {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  transform: translateY(102%);
  transition: .5s ease-out;
  grid-row: span 7 / auto;
}

.clothing-item:hover img:nth-of-type(2) {
  transform: translateY(0%);
}

.shop .col-md-10 {
  text-align: center;
}

.shop .xs {
  width: calc(20% - 25px);
  margin-right: 25px;
  margin-top: 50px;
  margin-bottom: 100px;
  height: fit-content;
}

.shop .sm {
  width: calc(25% - 25px);
  margin-right: 25px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: fit-content;
}

.shop .md {
  width: calc(33.3333333% - 25px);
  margin-right: 25px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: fit-content;
}

.shop .lg {
  width: calc(49% - 25px);
  margin-right: 25px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: fit-content;
}

/* I N T H E K N O W */

.intheknow {
  padding: 0px!important;
  background: #000;
}

.intheknow .col-md-5 {
  background: #000;
  padding: 100px;
}

.intheknow .col-md-5 img {
  width: 33%;
}

.intheknow .col-md-7 {
  height: 100%;
}

/* I M A G E   S C A L E */

.clipped {
  overflow: hidden;
}

.scale-image-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.scale-image-outer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; 
  top: 0;
  left: 0;
  transition: .5s ease-out;
}

/* G E N E R A L */

.shadow {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
}

.modal-pop-up-outer {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgb(0 0 0 / 25%);
  z-index: 99999999999999;
  backdrop-filter: blur(10px);
}

.modal-pop-up {
  width: 66%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #000;
}

.website-iframe {

}

.background-cover {
  background-size: cover;
  object-fit: cover!important;
}

.background-contain {
  object-fit: contain!important;
  background-size: contain!important;
}

.overflow-hidden {
  overflow: hidden;
}

.line-of-coke {
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

.lazy::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.screen {
  height: 420px!important;
  min-height: 350px!important;
}

.tall-card {
  height: 800px!important;
}

.alert {
  padding: 15px 0px!important;
}

.alert p {
  color: #ffffff!important;
}

.text-center {
  text-align: center;
}

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

.hidden {
  display: none;
}

.six-hero {
  height: 66vh;
}

.rounded-section {
border-radius: 100px;
}

.rounded-section-top {
  border-radius: 100px 100px 0px 0px;
  }

.points-img-inside img {
max-width: 75%;
margin-top: 25px;
}

#hidden-image {
width: 0px;
height: 0px;
z-index: -999999;
position: absolute;
color: transparent!important;
}

#hidden-image img {
width: 0px;
height: 0px;
z-index: -999999;
position: absolute;
}

.hero {
padding-top: 0px;
padding-bottom: 0px;
}

.subheading-hero {
  width: 66%;
  font-weight: 500;
}

.hero-project a {
color: #000000;
}

.hero-project a:after {
background: #000000;
}

.hero-contact h1 {
color: #000000;
}

.hero-contact p {
color: #000000;
}

.hero-contact a {
color: #000000;
}

.hero-contact a:after {
background: #000000;
}

.hero-arrow {
position: absolute;
right: 100px;
bottom: 125px;
}

.blackText a {
color: #000000;
}

.blackText #hidden-image {
color: transparent!important;
}

.blackText a:after {
background: #000000;
}

.blackText .hamburger .line{
background-color: #000000;
}

.email-hero {
position: absolute;
left: 5%;
transform: rotate(-90deg);
bottom: 50px;
width: 0px;
}

.email-hero a {
font-size: 14px;
line-height: 14px;
}

.date-hero {
position: absolute;
bottom: 50px;
font-weight: 600;
right: 5%;
}

.ui-page {
min-height: auto!important;
}

.ui-loader {
display: none!important;
}

.loomframe {
  height: 600px;
  border-radius: 25px;
  max-width: 80%;
}

.video-1 {
width: 75%;
position: relative;
margin-left: 12.5%;
border-radius: 15px;
}

.video-2 {
width: 100%;
position: relative;
transition: .75s ease-in-out;
background-size: cover;
background-position: center;
}

.video-outer {
height: 600px;
overflow: hidden;
margin-top: 100px;
}

.video-outer-projects-home {
height: 300px;
overflow: hidden;
width: 100%;
}

.video-outer-projects-home video {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0px;
}

.video-outer-projects-catagory {
height: 100%;
overflow: hidden;
width: 100%;
}

.video-outer-projects-catagory video {
width: 100%;
margin: 0;
position: relative;
left: 0px;
border-radius: 25px;
}

.video-outer-projects-related {
margin-bottom: 25px;
overflow: hidden;
width: 100%;
}

.video-outer-projects-related video {
width: 100%;
margin: 0;
position: relative;
left: 0px;
}

.not-centered-inside {
padding-top: 100px;
padding-bottom: 0px;
}

.not-centered-inside img {
width: 100%;
margin-top: 50px;
max-height: 75vh;
object-fit: cover;
max-width: 75%;
}

.background-image {
min-height: 150px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.background-70 {
background-size: 75%!important;
}

.full-height {
min-height: 100vh;
}

.full-height-ca {
min-height: 600px;
}

.half-height {
min-height: 50vh;
}

.half-height .vertically-center {
min-height: 50vh;
height: 50vh;
}

.full-height-home {
min-height: 100vh;
}

.float-right {
float: right;
}

.padding-0 {
padding: 0px!important;
}

.text-left {
max-width: 100%;
}

.snort-outer {
padding-top: 0px;
padding-bottom: 0px;
}

.snort {
height: 1px;
background-color: #000000;
width: 100%;
}


.snort-surf {
  background-color: #ffffff;
  }

  .snort-black {
    background-color: #000000;
    }

.snort-3 {
width: calc(33.33333333% - 50px);
margin-right: 50px;
border-top: #ffffff 1px solid;
padding-top: 50px;
}

.snort-3end {
width: 33.33333333%;
border-top: #ffffff 1px solid;
padding-top: 50px;
}

.snort-33 {
width: calc(66.6666666666% - 50px);
margin-right: 50px;
border-top: #ffffff 1px solid;
padding-top: 50px;
}

::selection {
background: rgba(255, 191, 124, 0.75); /* WebKit/Blink Browsers */
}
::-moz-selection {
background: rgb(255, 191, 124/ 75%); /* Gecko Browsers */
}

/* H E A D E R */

.logo:after {
  height: 0px;
}

.preheader {
  position: fixed;
  background-color: #000000;
  text-align: center;
  width: 100vw;
  top: 0px;
  z-index: 999999999;
  padding: 5px;
  text-align: center;
}

.preheader p {
  color: #CCFF00;
  text-align: center;
}

.header {
  margin: 0px!important;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  transition: .75s ease-in-out;
  z-index: 999999;
  background-color: transparent;
  pointer-events: none;
  padding: 50px 50px 0px;
}

.header .nav {
  pointer-events: auto!important;
  color: #CCFF00;
  display: grid;
  justify-content: space-between;
  cursor: default;
  line-height: 30px
}

.nav-icons {
  position: absolute;
  right: 0px;
  height: 15px;
}

.nav-logo {
  margin: auto;
  height: 100%;
  margin-top: 3px;
  opacity: 0;
  transition: .5s ease-out;
}

.menu-desktop {
text-align: right;
overflow: visible;
max-width: fit-content;
max-width: -moz-fit-content;
float: right;
}

.menu-desktop a {
  text-transform: capitalize;
  font-family: 'HelveticaNeue', sans-serif;
  display: table-header-group;
  max-width: fit-content;
  text-align: right;
}

.menu-desktop a:after {    
  width: 0%;
  left: 50%;
}

.menu-desktop a:hover:after { 
width: 100%; 
left: 0%;
}

.menu-desktop path {
  max-width: 100px;
  padding-left: 15px;
}

.projects-item {
  display: block;
}

.projects-item-outer {
  margin-top: 10px;
  margin-right: 0;
  text-align: left;
  position: absolute;
}

.projects-item-outer a {
  opacity: 0;
  transition: .5s ease-in-out;
}

.projects-item-outer a:hover {
  opacity: 1;
}

.projects-menu {
  display: inline-block;
}

.projects-menu:hover a {
  opacity: 1;
}

.projects-item-outer a {
font-weight: 100;
margin-bottom: 15px;
width: fit-content;
width: -moz-fit-content;
}

.hamburger .line{
width: 10px;
height: 1px;
background-color: #FFFFff;
display: block;
margin-bottom: 2.5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#hamburger-1 .line:nth-child(2){
  width: 7.5px;
  transform: translateX(2.5px);
}

.hamburger {
  z-index: 999999999999;
  right: 25px;
  position: fixed;
  top: 32px;
  cursor: pointer;
  mix-blend-mode: difference;
}

#hamburger-1.is-active {
  mix-blend-mode: normal;
  transform: scale(3) translateY(10px);
}

#hamburger-1.is-active .line:nth-child(1){
background-color: #000000!important;
-webkit-transform: translateY(-0px) rotate(45deg);
-ms-transform: translateY(-0px) rotate(45deg);
-o-transform: translateY(-0px) rotate(45deg);
transform: translateY(-0px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(3){
  background-color: #000000!important;
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

.menu-hidden {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 110vh;
  background-color: #ffef2a;
  transition: 0.7s cubic-bezier(0.5, 0, 0.75, 0);
  z-index: 99999999999999999999999999999999999999999999999999999999;
  transform: translateY(-100%) rotate(40deg);
  pointer-events: none;
  transform-origin: bottom right;
}

.menu-hidden.visible {
  pointer-events: auto;
  transform: translateY(0) rotate(0deg);
}

.menu-hidden .h2-style {
    color: #000000;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 15px auto;
}

.menu-hidden .h2-style:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  background: #000000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0%;
  left: 50%;
  top: calc(50% - 3px );
}

.menu-hidden .h2-style:hover:after { 
width: 100%; 
left: 0%;
}

/* F O O T E R */

.footer-logo {
  width: 150px;
  margin-bottom: 25px;
}

.footer-nav {
  pointer-events: auto!important;
  display: flex;
  justify-content: space-between;
  cursor: default;
}

.footer-line {
  height: 100%;
  width: 0%;
  background-color: #0F0F0F;
  position: absolute;
  top: 0px;
  left: 0px;
}

.footer-blurb {
  padding-right: 50px;
  padding-bottom: 100px;
}

.footer .col-md-7 {
  padding-left: 50px;
}

.footer p, .footer a, .footer h4, .footer {
  color: #ffffff;
}

.footer-links {
  line-height: 40px;
  margin-bottom: 40px;
}

.footer-collumn  {
  opacity: 0;
}

.footer h4 {
  margin-bottom: 10px;
}

.sub-footer {
  width: 100%;
}

.footer {
  background-size: cover;
  background-position: top;
  z-index: 4;
  mix-blend-mode: normal;
  pointer-events: auto;
  padding-top: 50px;
  padding-bottom: 15px;
  height: auto;
  background-color: #000000;
}

.footer a:hover:after { 
  width: 0%!important; 
  left: 50%!important;
  }

  .sub-footer p {
    height: auto!important;
  }

.date {
text-align: right;
}

.date p {
font-size: 30px;
line-height: 30px;
font-weight: 600;
}

.footer-lang {
  margin-top: 40px;
}

.footer-socials  {
  margin-bottom: 15px;
}

.footer-news {
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
  max-width: 50%;
  margin-bottom: 25px;
}

.socials a:after {
background: transparent!important;
}

.socials div {
width: 15px;
height: 15px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
transition: .5s ease-in-out;
}

.socials div:hover {
opacity: .5;
}

.socials .facebook {
background-image: url(../img/facebook-white.svg);
}

.socials .instagram {
background-image: url(../img/instagram-white.svg);
}

.socials .linked {
background-image: url(../img/linked-white.svg);
}

.socials .awwwards {
background-image: url(../img/awwwards-white.svg);
}

.hidden {
display: none!important;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}

.inline {
display: inline!important;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}

.not-hidden {
display: block;
padding-bottom: 50px;
}

/* M A R G I N + P A D D I N G + M O R E */

.padding-top-bottom-0 {
  padding-top: 0px!important;
  padding-bottom: 0px!important;
  }

.height-100vh {
  height: 100vh;
}

.minus-5-desk {
margin-right: -5%!important;
margin-left: -5%!important;
}

.width-50 {
width: 50%;
}

.vertically-center {
display: table;
}

.vertically-center .vc-inner {
display: table-cell;
vertical-align: middle;
}

.completely-center {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

.padding-top-0 {
padding-top: 0px;
}

.padding-top-0-imp {
  padding-top: 0px!important;
  }

.padding-top-100 {
  padding-top: 100px;
}

.padding-left-25 {
  padding-left: 25px;
}
  
.padding-left-50 {
  padding-left: 50px;
}

.padding-top-150 {
  padding-top: 150px;
}

.padding-bottom-0 {
padding-bottom: 0px!important;
}

.padding-top-50 {
padding-top: 50px!important;
}

.padding-top-25 {
  padding-top: 25px!important;
  }

.padding-top-5 {
padding-top: 5%;
}

.padding-bottom-50 {
padding-bottom: 50px;
}

.margin-top-0 {
margin-top: 0px!important;
}

.margin-50-tb {
  margin-top: 50px!important;
  margin-bottom: 50px!important;
  }

.margin-left-0 {
  margin-left: 0px!important;
}

.margin-top-20 {
margin-top: 20px;
}

.margin-top-25 {
margin-top: 25px;
}

.margin-top-30 {
margin-top: 30px;
}

.margin-right-25 {
margin-right: 25px;
}

.margin-top-50 {
margin-top: 50px;
}

.margin-top-100 {
margin-top: 100px!important;
}

.margin-top-10 {
  margin-top: 10px!important;
  }
  

.margin-bottom-50 {
margin-bottom: 50px!important;
}

.margin-bottom-25 {
margin-bottom: 25px;
}

.margin-bottom-100vh {
  margin-bottom: 100vh;
}

.margin-bottom-100 {
  margin-bottom: 100px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.margin-bottom-0 {
  margin-bottom: 0px;
}

.padding100 {
padding: 0 0 100px 0!important;
background-color: #000000;
z-index: 99;
position: relative;
}

@media screen and (min-width: 1025px) {

.margin-bottom-25-desktop {
  margin-bottom: 25px;
}

.margin-top-50-desktop {
margin-top: 50px;
}

.width-50-desktop {
width: 50%;
}

.width-75-desktop {
width: 75%;
}

.padding-10-percent-desktop {
padding: 10%;
}

.padding-right-5-desktop {
padding-right: 5%!important;
}

.padding-left-5-desktop {
padding-left: 5%!important;
}

.padding-right-10-desktop {
padding-right: 10%!important;
}

.padding-right-25-desktop {
  padding-right: 25%!important;
  }

.padding-left-10-desktop {
padding-left: 10%!important;
}

.padding-top-100-desktop {
  padding-top: 100px;
}}


@media screen and (max-width: 800px) {

.margin-bottom-25-tablet {
margin-bottom: 25px;
}

.width-75-tablet {
width: 75%;
}}

@media screen and (max-width: 500px) {

.width-75-tablet {
width: 100%;
}

.margin-bottom-25-mobile {
margin-bottom: 25px;
}

.margin-bottom-10-mobile {
  margin-bottom: 10px;
  }}


/* D E S K T O P */

@media screen and (min-width: 1025px) {
.display-none-desktop {
  display: none!important;
}

.padding-top-150-desktop {
  padding-top: 150px;
}

.padding-right-tab-land {
padding-left: 0%!important;
}

.modual-img {
  transition: .75s ease-in-out;
}

.modual-img:hover {
  transform: translateY(-10px);
  }
}

/* T A B L E T  L A N D S C A P E */

@media screen and (max-width: 1185px) {
  .row {
    padding-left: 75px;
    padding-right: 75px;
    }

  .fixed-back-home  {
    background-image: url(../img/ligh.webp);
    background-position: center;
    background-size: 100% 100%;
    position: fixed;
    background-repeat: no-repeat;
    z-index: -5;
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    top: 0px;
    left: 0px;
  }

}

@media screen and (max-width: 1025px) {

.menu-desktop a {
width: fit-content;
width: -moz-fit-content;
}

.footer {
position: relative;
z-index: 1;
}

.display-none-tablet  {
display: none;
}

.display-none-tablet-overide  {
display: none!important;
}

.three-item-padding {
padding: 25px 25px!important;
width: 50%;
}

.three-item-padding .gif-mobile {
min-height: auto;
}

.width-75-desktop {
width: 90%!important;
}

.width-50-desktop {
width: 66%!important;
}

.carousel {
height: 500px;
}

.video-outer {
height: 500px;
margin-top: 50px;
}

.modual-img {
margin-bottom: 25px;
}

.gif-mobile {
background-size: contain!important;
min-height: 400px;
border-radius: 15px 15px 0 0;
}

.modual-text{
min-height: 1px!important;
margin-bottom: 50px;
max-width: 100%;
margin-top: 25px;
}

.cta {
padding-bottom: 75px!important;
}

.padding-right-tab-land {
padding-left: 5%!important;
}

}

/* T A B L E T */

@media screen and (max-width: 850px) {

.padding-top-50-tablet {
  padding-top: 50px;
  }


  .project-ticker {
    overflow-x: hidden!important;
  }

  #hidden-image {
    width: 100%;
    height: 100%;
    z-index: -999999;
    position: absolute;
    color: transparent!important;
}

#hidden-image img {
  width: 100%;
  height: 100%;
  z-index: -999999;
  position: absolute;
  object-fit: cover;
  left: 0px;
  top: 0px;
}

.projects-item-outer { 
  position: relative;
}

.projects-item-outer a {
  margin-left: 0px;
  opacity: 1;
  margin-bottom: 25px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
}

  .ticker {
    overflow: hidden;
  }

  .menu-outer {
    width: 100%;
    max-width: 100%;
  }

  .margin-bottom-25-tab {
    margin-bottom: 25px;
    }


    .footer p {
      max-width: 66%;
    }

  .footer-collumn {
    padding-left: 0px!important;
  }

  .socials {
    margin-bottom: 25px;
  }

  .subheading-hero {
    width: 80%;
  }

    .hero-ticker {
      transform: translateY(-200px);
    }

  .cta-video video {
    margin-top: -400px;
  }

  .rounded-section {
    border-radius: 50px;
}

.large-landscape {
  grid-column: auto / span 3;
  grid-row: auto / span 3;
  height: 450px;
}

.normal {
  grid-column: auto / span 3;
  grid-row: auto / span 3;
  height: 450px;
}

.home-proect-outer {
  width: calc(100% - 50px);
}

.carousel-inner {
  width: 85%;
}

.logo {
  margin-top: 0px;
}

  .ticker { 
    margin-left: -62px;
  }  

.row {
    margin: 0px!important;
    padding: 50px;
}

#venn-lottie {
  bottom: 50px;
  position: relative;
}

.minus-5-desk {
  margin-right: 0%!important;
  margin-left: 0%!important;
}

.minus-5-desk .container {
  padding-left: 0%!important;
}

.modual-text{
  min-height: 1px!important;
  padding: 0px!important;
}

.modual-img-small {
height: fit-content;
height: -moz-fit-content;
min-height: 2px;
height: 200px;
}

.margin-top-25-mob {
  margin-top: 25px!important;
}

.margin-top--50-mob {
  margin-top: -50px!important;
}

.three-item-padding {
  padding: 25px 0px!important;
  width: 100%;
}

.three-item-padding .three-item-paddingInside {
width: 100%;
}

.three-item-paddingInside .p-small {
font-size: 18px!important;
line-height: 24px!important;
}

.hero-project h1 {
margin-top: 47.5%;
}

a:hover:after { 
width: 0%!important; 
}

h1 {
max-width: 100%;
}

ul {
padding-inline-start: 20px;
}

.sub-footer {
position: relative;
}

.row {
padding: 10% 7.5%;
}

.hero {
padding-top: 100px;
max-height: 100vh;
}

.header {
  padding: 0px;
}

.project-rows {
padding-bottom: 0px!important;
padding-top: 0px!important;
}

.project-text {
padding: 100px 0%;
min-height: auto!important;
height: auto!important;
}

.project-rows .background-image {
  min-height: 50vh;
}

.full-height {
min-height: 100vh;
}

.full-width {
min-height: 100%;
}

.full-height-ca {
min-height: 600px;
}

.half-height {
min-height: auto;
}

.not-centered-inside img {
max-width: 100%;
}


.video-outer {
height: 400px;
}

.carousel {
height: 400px;
}

.carousel-inner img {
height: 400px!important;
}

.project-text .vc-inner {
padding-left: 0px;
padding-right: 0px;
}

.width-75-desktop {
width: 100%!important;
}

.width-50-desktop {
width: 100%!important;
}

.date {
position: relative;
text-align: right!important;
right: 0px;
margin-top: -30px;
width: 50%;
float: right;
}

.contact-video video {
  position: absolute;
  top: 100px;
  pointer-events: none;
  z-index: -1;
  left: -50%;
  width: 200%;
  height: 100%;
}

.socials {
position: relative;
}

.sub-footer {
padding-top: 15px!important;
padding-bottom: 15px!important;
}

.hero-home-h1 {
margin-top: 75px!important;
}

.display-none-tablet-port {
display: none!important;
}

.padding-right-tab-land {
padding-left: 0%!important;
}

.padding-top-bottom-0-tablet {
padding-top: 0px;
padding-bottom: 0px;
}

.padding-top-0-tablet {
padding-top: 0px;
}
}

.hamsandwich {
  display: none;
}

/* M O B I L E */

@media screen and (max-width: 500px) {

.hamsandwich {
  left: 23px;
  top: 49px;
  position: absolute;
  scale: 1.5;
  display: block;
}

.nav-logo {
  margin-top: 40px;
}

.nav-icons {
  position: absolute;
  right: 0px;
  top: 46px;
  height: 15px;
}

  .footer-socials {
    margin-top: 10px;
  }

  .footer .text-right {
    text-align: left!important;
  }

  .footer-blurb {
    padding-right: 50px;
    padding-bottom: 50px;
}

.footer-line {
  min-width: 100%;
}

  .footer .col-md-7 {
    padding-left: 0px;
}

  .intheknow .full-height {
    height: auto!important;
  }

  .intheknow .col-md-7 {
    height: 50vh;
}

  .intheknow .col-md-5 {
    background: #000;
    padding: 25px;
    width: 100%;
    height: 50vh;
}

  .scale-image-outer {
    height: 50vh;
  }

  .shop {
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
  }

  .preheader p { 
    font-size: 10px; 
  }

  .shop .xs {
    width: calc(50% - 25px);
  }

  .shop .sm {
    width: calc(75% - 25px);
  }

  .shop .md {
    width: calc(90% - 25px);
  }

  .shop .lg {
    width: calc(100% - 0px);
  }

  .do-something p {
    font-size: 16px;
  }

  .preheader {
    padding-top: 5px;
  }

  .footer {
    padding: 25px 7.5%;
  }

  .footer-news {
    margin-top: 40px;
  }

  .nav {
    display: none !important;
  }

  .hero-logo {
    top: calc(50% - 100px);
  }

  .carousel-card{
    width: 100%;
  }

  .carousel-container {
    height: 50vh;
    margin-left: 50px;
    margin-bottom: 100px;
  }

  .hero-card {
    width: 33.33%;
  }

  .timeline-video-black {
    top: 2px;
    right: 0px;
    left: 0px;
  }

.modal-pop-up {
  width: 95%;
}

  .project-ticker {
    bottom: 11vh;
  }
  .text-left-inside-mob p, .text-left-inside-mob h4 {
    text-align: left;
  }

  .venn-diagram {
    margin: 50px;
    width: calc(100% - 100px);
}

  .home-proect-outer {
    width: 100%;
    display: block;
    margin-bottom: 25px;
    height: fit-content;
    height: -moz-fit-content;
  }

  .project-home-outer {
    margin-bottom: 25px;
  }

  .footer p {
    max-width: 100%;
}

  .row-hidden{
    overflow: hidden;
    position: relative;
  }


a:hover:after { 
width: 0%!important; 
}

.display-none-mobile {
display: none!important;
}

.display-only-mobile {
  display: block!important;
  }

.display-block-mobile {
display: block!important;
}

.email-hero, .date-hero {
display: none;
}

.full-height {
padding: 0px;
}

.not-full-mobile {
min-height: auto!important;
}

.date {
margin-top: 45px;
}

.row {
padding: 50px 7.5%;
}

.hero {
padding-top: 100px;
padding-bottom: 50px;
height: 100vh;
}

.hero-social {
  right: 7.5%;
  bottom: 75px;
}

.hero-email {
  left: 7.5%;
  bottom: 75px;
}

.footer-collumn {
margin-top: 50px;
}

.project-text {
padding: 50px 0%;
}

.carousel-inner img {
height: 200px!important;
}

.carousel {
  height: 100%;
  margin-top: 50px;
  overflow-x: visible;
  }
  
.carousel-inner {
width: 100%;
height: 250px;
overflow: visible;
}

.testicalArrow {
right: 0px;
left: 0px;
margin-top: 0;
margin-bottom: 0;
position: relative;
transform: none;
top: 0px;
}

.arrowRight {
width: 25px;
}

.arrowLeft {
width: 25px;
}

.carousel-inner .h2-style {
font-size: 20px;
line-height: 30px;
}

.carousel-inner p {
font-size: 15px;
line-height: 15px;
}

.carousel-indicators {
bottom: 0px;
margin-bottom: 0px;
}

.carousel-indicators li {
  width: 15px;
  height: 15px;
}

.carousel-indicators .active {
  width: 15px;
  height: 15px;
}

.three-item-padding {
  width: 100%;
}

.padding-bottom-50-mob {
padding-bottom: 50px!important;
}

.padding-bottom-100-mob {
padding-bottom: 100px;
}

.padding-top-bottom-0-mob {
padding-top: 0px;
padding-bottom: 0px;
}

.padding-top-0-mob {
padding-top: 0px;
}

.padding-bottom-0-mob {
padding-bottom: 0px;
}

.margin-top-0-mob {
margin-top: 0px!important;
}

.margin-top-25-mob {
margin-top: 25px!important;
}

.margin-top-50-mob {
margin-top: 50px!important;
}

.margin-right-100-mob {
margin-right: 100px!important;
}

.margin-top-100-mob {
margin-top: 100px!important;
}

.margin-bottom-0-mob {
margin-bottom: 0px!important;
}

.margin-bottom-25-mob {
margin-bottom: 25px!important;
}

.margin-bottom-50-mob {
margin-bottom: 50px!important;
}

.margin-bottom-100-mob {
margin-bottom: 100px!important;
}

.overflow-hidden-mob {
overflow: hidden;
}

.cta {
background-position: right;
padding-bottom: 100px!important;
}

input {
width: 100%;
}

textarea {
width: 100%;
}

.snort-3 {
width: 100%;
margin-top: 50px;
}

.snort-3end {
width: 100%;
margin-top: 50px;
}

.three-item-padding {
padding: 0px 0px!important;
margin-top: 50px;
}

.three-item-padding:first-of-type  {
margin-top: 25px;
}

.modual-img-small {
height: 100px!important;
min-height: 100px!important;
}

.modual-img-large-mobile {
height: 300px;
}

.date {
position: relative;
text-align: right!important;
right: 0px;
margin-top: -30px;
}

.socials {
position: relative;
}

.catagories-home {
padding: 50px 15px;
}

.three-item-padding {
width: 100%;
padding-left: 0%!important;
}

.three-item-padding .three-item-paddingInside {
width: 100%;
padding-left: 0%!important;
}

.three-item-paddingInside .p-small {
font-size: 16px!important;
line-height: 22px!important;
}

.p-small {
font-size: 12px;
line-height: 16px;
}

.p-small a {
  font-size: 12px;
  line-height: 16px;
}

.six-image {
height: 350px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 25px;
background-size: contain;
}

.four-image {
width: 100%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5%;
background-size: cover;
}

.only4-image {
height: 350px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 25px;
background-size: contain;
}

.only3-image {
height: 350px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 25px;
background-size: contain;
}

.sub-footer {
padding-top: 15px!important;
padding-bottom: 15px!important;
}

.footer-date {
  display: none;
}

.hero-home-mobile .vertically-center {
height: 100%!important;
display: block!important;
width: 100%;
}

.hero-home-mobile .vc-inner {
display: table-cell!important;
vertical-align: middle;
width: 100%;
}

.home .hero {
  padding-right: 0px!important;
}

.arrow-down-small {
margin-top: calc(3.75% - 33px);
}

.height-auto-mob {
height: fit-content!important;
}

.modual-text  {
padding: 0px!important;
}

.subheading-hero {
  width: 90%;
}

.ticker {
  margin-left: -29px;
}

.hero-ticker {
  transform: translateY(-10px);
}

.project-home-outer h4 {
  display: block;
  width: 100%!important;
}

.project-home-outer p {
  display: block;
  width: 100%!important;
  font-size: 12px;
  line-height: 16px;
}

.project-home-outer:hover {
  background-image: none!important;
  padding: 0px;
}

.catagories-in-card span {
  border: 1px solid #ffffff;
  border-radius: 100px;
  padding: 3px 10px 4px;
  margin-right: 5px;
  font-size: 9px;
}

.project-card-mobimg {
  height: 200px;
  margin-top: -3px;
}

.ticker-card {
  margin-left: -29px;
}

.project-home-img {
height: 150px;
}

.hero-project .vc-inner {
display: block!important;
width: 100%!important;
}

.inner-img-arrow {
position: absolute;
width: 100%;
}

.inner-img-arrow .arrowRight {
margin-top: -75px;
right: 0px;
position: absolute;
}

.inner-img-arrow .arrowLeft {
margin-top: -75px;
}

.carousel-inner-img {
width: 100%;
height: 400px;
}

.carousel-inner img {
height: auto!important;
}

.rounded-section-top {
border-radius: 50px 50px 0px 0px;
}

.filter {
  width: auto;
  padding: 10px;
  margin-right: 10px;
  min-width: 50px;
  text-align: center;
}

.modual-text {
min-height: 1px!important;
padding: 0px!important;
margin-bottom: 0px;
max-width: 100%;
margin-top: 0px;
}

.snort-3end {
width: 100%;
margin-top: 0px;
} 

.padding-top-bottom-0-tablet {
padding-top: 0px;
padding-bottom: 0px;
}

.border-none-mob {
border: transparent 0px dashed;
}

.wriggle-cursor {
  background-image: url(../img/ligh.webp);
  background-position: center;
  background-size: 100% 100%;
  position: relative;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.fixed-back-home { 
  display: none;
}

}

/* B O O T S T R A P    O V E R I D E */
.container {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
.container {
  width: auto!important;
}}

@media (min-width: 900px) {
.container {
max-width: 900px!important;
min-width: 850px!important;
}}

@media (min-width: 1000px) {
.container {
max-width: 1100px!important;
min-width: 850px!important;
}}

@media (min-width: 1200px) {
.container {
max-width: 1500px!important;
}}

@media (min-width: 1400px) {
.container {
max-width: 1500px!important;
}}

/* A N I M A T E D */

.ease {
  transition: .75s ease-in-out;
}

.staggard-1 {
  transition: .5s ease-in-out;
  opacity: 0;
  margin-left: -25px;
}

.staggard-2 {
  transition: .5s ease-in-out;
  opacity: 0;
  margin-left: -25px;
}

.staggard-3 {
  transition: .5s ease-in-out;
  opacity: 0;
  margin-left: -25px;
}

.staggard-4 {
  transition: .5s ease-in-out;
  opacity: 0;
  margin-left: -25px;
}

.transparent {
  opacity: 0;
}

.slide-down {
animation-duration: .7s;
animation-fill-mode: both;
animation-name: slideDown;
}

@keyframes slideDown {
0% {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

100% {
  opacity: 1;
  transform: none;
}
}

.slide-up {
animation-duration: .7s;
animation-fill-mode: both;
animation-name: slideUp;
}

@keyframes slideUp {
0% {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

100% {
  opacity: 1;
  transform: none;
}
}

.fade-in {
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeIn;
}

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

100% {
  opacity: 1;
}
} 

.fade-out {
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeOut;
}

@keyframes fadeOut {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
}
} 

.fade-out-fast {
animation-duration: .5s;
animation-fill-mode: both;
animation-name: fadeOut;
}

@keyframes fadeOut {
0% {
  opacity: 1;
}

100% {
  opacity: 0;
}
} 

.fade-in-fast {
animation-duration: .7s;
animation-fill-mode: both;
animation-name: fadeInFast;
}

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

100% {
  opacity: 1;
}
} 

/* P A G E    T R A N S I T I O N */

.contact .menu-hidden {
  background-color:#ffbf7c;
}

#menu {
  text-align: center;
	position: relative;
  display: inline-block;
	margin-left: 100px auto;
	-webkit-filter: url("#goo");
	filter: url("#goo");
  position: absolute;
  top: 43%;
}
.menu__item {
	position: absolute;
	display: inline-block;
	padding: 20px;
	height: 40px;
	width: 40px;
	border-radius: 80px;
	background: #ffffff;
	left: 0;
	top: 0;
	transition: 0.33s ease-out;
}

#menu .menu__item:nth-child(1){
	transform : translate3d(0, 0, 0);
}
#menu .menu__item:nth-child(2){
	transform : translate3d(180px, 0, 0);
	transition-delay: 0.1s;
}
#menu .menu__item:nth-child(3){
	transform : translate3d(360px, 0, 0);
	transition-delay: 0.2s;
}
#menu .menu__item:nth-child(4){
	transform : translate3d(360px, 0px, 0);
	height: 10px;
	width: 10px;
	background: #ffffff;
	box-shadow: 0 0 20px #ffffff, 0 0 10px #ffffff;
	animation: goo 5s infinite ease-in-out;
	transform : translate3d(-30px, 0, 0);
}

.no-shaddow {
  box-shadow: 0 0 0px transparent, 0 0 0px transparent!important;
}

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

@keyframes goo {
	0% {
		transform : translate3d(-30px, 0, 0);
	}
	50% {
		transform : translate3d(420px, 0, 0);
	}
	100% {
		transform : translate3d(-30px, 0, 0);
	}
}

.first-preloader {
z-index: 99999999999999999999999999999999999999;
position: fixed;
height: 100%;
width: 120%;
left: -10%;
pointer-events: none;
background-color: #CCFF00;
text-align: center;
transition: .7s ease-out;
}

.first-preloader svg {
  width: 15vw;
  position: absolute;
  margin: auto;
  left: calc(50% - 7.5vw);
  height: 100%;
}

.preloadeder-outer {
z-index: 999999999999999999999999999999999999;
position: fixed;
height: 100vh;
height: 100vw;
pointer-events: none;
background-color: #040F9E;
}

@keyframes slideOutRight {
from {
  transform: translate3d(-35%, 0, 0);
}

to {
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
}
}

.page-transistion-outer  {
z-index: 999999999999999999999999999999999999;
position: fixed;
height: 100vh;
width: 100vw;
pointer-events: none;
top: 0px;
left: 0px;
transition: 0.7s cubic-bezier(0.5, 0, 0.75, 0);
z-index: 99999999;
pointer-events: none;
transform-origin: bottom right;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: rotateIn;
background-color: #ffbf7c;
}

.page-transistion-elements {
  z-index: 999999999999999999999999999999999999;
  position: fixed;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  top: 0px;
  left: 0px;
  transition: 0.7s cubic-bezier(0.5, 0, 0.75, 0);
  z-index: 99999999;
  pointer-events: none;
  transform-origin: bottom right;
  animation-duration: 1s;
  animation-fill-mode: both;
  background-color: #ffbf7c;
}

.animate-out {
  animation-name: rotateOut;
}

@keyframes rotateIn {
from {
    transform: translateY(-100%) rotate(40deg);
    visibility: visible;
    }

    to {
      transform: translateY(0%) rotate(0deg);
    }
}

@keyframes rotateOut {
  from {
        transform: translateY(0%) rotate(0deg);
      }
  
      to {
        transform: translateY(-100%) rotate(40deg);
        visibility: visible;
      }
  }

  .preloader-svg {
    width: 400px;
    position: absolute;
    top: 47%;
    left: calc(50% - 200px);
    transition: .7s ease-out;
  }

/* F R A M E P R O */

.frame-layer {
width: 100%;
height: 100%;
opacity: 0;
/*
background-image: url(../img/frame-pro.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;*/
z-index: 9;
position: fixed;
top: 0px;
left: 0px;
}

.frame-under {
width: 80%;
height: auto;
}

.frame-outer {
z-index: -1;
}

.frame-top {
background-color: #FFFFFF;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
}

.frame-bottom {
background-color: #FFFFFF;
width: 100%;
height: 100px;
position: absolute;
bottom: 0%;
left: 0px;
}