/* preloader */
/* preloader wrapper */
#wrapper {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  position: fixed;
  background-color: #000;
}

.profile-main-loader {
  left: 50% !important;
  margin-left: -50px;
  position: fixed !important;
  top: 50% !important;
  margin-top: -100px;
  width: 45px;
  z-index: 9000 !important;
}

.profile-main-loader .loader {
  position: relative;
  margin: 0px auto;
  width: 100px;
  height: 100px;
}

.profile-main-loader .loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-loader {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.loader-path {
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@-webkit-keyframes color {
  0% {
    stroke: #fff;
  }

  40% {
    stroke: #fff;
  }

  66% {
    stroke: #fff;
  }

  80%,
  90% {
    stroke: #fff;
  }
}

@keyframes color {
  0% {
    stroke: #fff;
  }

  40% {
    stroke: #fff;
  }

  66% {
    stroke: #fff;
  }

  80%,
  90% {
    stroke: #fff;
  }
}

/* end preloader */

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background: black;
  color: white;
  overflow-x: hidden;
}

.viewport-header {
  position: absolute;
  height: 100%;
  text-align: center;
  align-items: center;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
}





.center-container {
  position: relative;
  grid-template-columns: auto;
  background-color: black;
  text-align: center;
  align-items: center;
  width: 100%;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  /* display: grid;
  grid-template-columns: 40vw auto; */
  background-color: black;
  margin: 0;
  padding: 0 20px;
  /* gap: 0; */
}

#science {
  position: relative;
  /* width: 100%; */
  background-color: black;
  padding: 20vh 2rem 2rem 2rem;
  color: white;
  overflow: hidden;
}

.cubeflex {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  /* position: absolute;
  margin: 0;
  width: 100%; */
  /* top: 50%;
  transform: translateY(-50%); */
  /* text-align: center;
  color: #fff; */
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 5vh;
  /* text-align: bottom; */
  /* line-height: 100px; */
  margin: 0;
}


.cube {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  position: relative;
  /* z-index: 5000; */
  vertical-align: text-top;
}

.cube-title {
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}

.cube-a {
  /* top: 200px; */

  background-color: #27aae1;
}

.cube-b {
  /* top: 600px; */
  background-color: #f26522;
}

/* 
.cube.active {
  background-color: red;
} */

#about {
  position: relative;
  /* width: 100%; */
  background-color: black;
  padding: 20vh 2rem 2rem 2rem;
  color: white;
}

#contact {
  position: relative;
  /* width: 100%; */
  background-color: black;
  padding: 20vh 2rem 2rem 2rem;
  color: white;
}

p.subtext {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 2rem;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  font-family: 'Lato', sans-serif;
  background-color: black;
  padding: 0;
  margin: 0;
}

.item2 {
  font-family: 'Lato', sans-serif;

  background-color: black;
}

/* h2 {
  font-size: 5vw;
  margin: 2vh 0;
  padding: 0;
} */

/* TWO COLUMN LAYOUT */

/* container */
.responsive-two-column-grid {
  display: block;
  grid-gap: 3rem;
}

/* columns */
.responsive-two-column-grid > * {
  padding: 0 0 0 0;
}

/* tablet breakpoint */
@media (min-width: 768px) {
  .responsive-two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* LOGO STYLES */
.logos > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 2rem;
}

.logos {
  position: relative;
  opacity: 0;
  /* margin: 6rem 0; */
}

#logos ul {
  list-style-type: none;
}

.lefty {
  text-align: left;
}

#logos {
  visibility: hidden;
  opacity: 0;
}

#about-text {
  opacity: 0;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  text-align: left;
  font-weight: 300;
  margin: 0;
  padding: 0rem 0rem 0rem 0rem;
  color: white;
}

.science-text {
  opacity: 0;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  text-align: left;
  font-weight: 300;
  margin: 0;
  padding: 0rem 0rem 0rem 0rem;
  color: white;
}

.contact-text {
  opacity: 0;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  text-align: left;
  font-weight: 300;
  margin: 0;
  padding: 0rem 0rem 0rem 0rem;
  color: white;
}

/* removed July 5th */

/* 
@keyframes Flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

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

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}
 */

/* removed July 5th */

/* * {
  box-sizing: border-box;
  color: #fff;
} */

/* .text {
  position: absolute;
  font-size: 3vmin;
  line-height: 1;
  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 2vw;
  top: 35px;
  left: 40px;
  opacity: 0;
} */

.text2 {
  position: absolute;
  font-size: calc(.8em + .9vw);
  line-height: 1.4;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-style: normal;
  word-spacing: .25em;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 100%;
}

h1.animate {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family:'Times New Roman', Times, serif;
  font-weight: 900;
  font-style: normal;
  font-size: calc(2em + 10vw);
  margin: 0 0 0 0;
  width: 100%;
  line-height: 5rem;
}

h1.chroma-shift {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
}



/* removed july 5
.item3 {
  position: absolute;
  bottom: 0;
  right: 0;
} */

/* this is the new animation part */

/* .head3 {
font-family: 'Georgia';
font-size: 1vw;
color:#fff;
} */

/* HERE IS THE STUFF FROM THE OLD WEBSITE HERE IS THE STUFF FROM THE OLD WEBSITE HERE IS THE STUFF FROM THE OLD WEBSITE HERE IS THE STUFF FROM THE OLD WEBSITE HERE IS THE STUFF FROM THE OLD WEBSITE*/
/* HERE IS THE STUFF FROM THE OLD WEBSITE */
/* HERE IS THE STUFF FROM THE OLD WEBSITE */
/* HERE IS THE STUFF FROM THE OLD WEBSITE */
/* HERE IS THE STUFF FROM THE OLD WEBSITE */
/* HERE IS THE STUFF FROM THE OLD WEBSITE */

a {
  color: inherit;
}

a:hover {
  opacity: 0.8;
}

/* utilities */

/* REMOVED JULY 5TH */
/* 
.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

.ml-half {
  margin-left: 0.5rem;
}

.over-image {
  z-index: 5;
}

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

.right {
  float: right;
}

.gray {
  color: #ccc;
} 


 .logo-header {
  position: absolute;
  margin: 30px;
  opacity: 0.8;
} 


.logo-header-subpage {
  position: relative;
  margin: 30px;
  opacity: 0.8;
}

.subpage-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subpage-text {
  max-width: 900px;
  background-color: #fff;
  color: #000;
  padding: 6em;
  margin-left: 2em;
  margin-right: 2em;
  font-family: 'Yantramanav', san-serif;
  font-weight: 100;
}

.subpage-text p {
  font-size: larger;
  color: #000;
  font-weight: 100;
}

.subpage-text ul {
  font-size: larger;
  color: #000;
  font-weight: 100;
} 

.subpage-text h3{
	color:#000;
		letter-spacing: 0;
		font-weight: bold;
} 

* .subpage-text h2 {
  color: #000;
  letter-spacing: 0;
  font-weight: bold;
}  */

/*   charlie stuff */

/*for contact page*/

#container {
  width: 85%;
  margin: 0 auto;
  display: table;
  margin-top: 20px;
}

.box {
  float: left;
  background-color: #0f0;
}

.boxInner {
  background-color: #ff0;
}

/* .address {
  font-family: 'Yantramanav', san-serif;
  font-size: small;
  line-height: 1.75em;
  font-weight: 900;
  margin: 0;
  padding: 0;
  color: #000;
}

.address a {
  text-decoration: none;
}

.logo-header a {
  text-decoration: none;
}

.bottomright {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: 18px;
} */

.monpek-down-arrow {
  position: absolute;
  font-size: 50px;
  text-align: center;
  top: 98vh;
  opacity: 0;
  color: white;
  text-decoration: none;
}

.monpek-down-arrow a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}

@media only screen and (max-width: 480px) {
  /* Smartphone view: 1 tile */
  .box {
    width: 100%;
    padding-bottom: 100%;
  }

  .monpek-down-arrow {
    position: absolute;
    top: 85vh;
  }
}

@media only screen and (max-width: 650px) and (min-width: 481px) {
  /* Tablet view: 2 tiles */
  .box {
    width: 50%;
    padding-bottom: 50%;
  }

  .monpek-down-arrow {
    position: absolute;
    top: 85vh;
  }
}

@media only screen and (max-width: 1050px) and (min-width: 651px) {
  /* Small desktop / ipad view: 3 tiles */
  .box {
    width: 33.3%;
    padding-bottom: 33.3%;
  }

  .monpek-down-arrow {
    position: absolute;
    top: 90vh;
  }
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

article {
  opacity: 100;
  text-align: left;
  margin-top: 0;
}

article p {
  margin-top: 0;
  color: #777;
  margin: 0px;
  margin-bottom: 1em;
}

/* 
.rectangle {
  position: absolute;
  width: 300px;
  height: 70px;
  z-index: 9;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.rectangle img {
  opacity: .9;
}


.button02 {
  width: 300px;
  height: 70px;
  z-index: 9;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.button02 img {
  opacity: .9;
}

.button02:hover {
  background: rgba(100, 100, 100, .3);
  cursor: pointer;
}

.rectangle:hover {
  background-color: #000;
  cursor: pointer;
  opacity: 1;
  background: rgba(0, 0, 0, 0.3);
}

#seemorework p {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 100;
  color: #999;
  font-size: large;
} */

/*  VIDEOS */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

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

#splash-monpek-video {
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#splash-monpek-video iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h3 {
  font-size: calc(2em + 1.5vw);
  color: #fff;
  letter-spacing: 3px;
  margin-bottom: 1rem;
  text-wrap: balance;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-style: normal;
}

h4 {
  font-size: calc(1em + 1.5vw);
  color: #fff;
  letter-spacing: 3px;
  margin-bottom: 1rem;
  font-weight: 900;
}

h5 {
  font-size: calc(1em + 1vw);
  color: #fff;
  letter-spacing: 5px;
  margin-bottom: 1rem;
  font-weight: 900;
}

/* #who-we-do p {
  font-size: calc(1em + 1vw);
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  font-weight: 900;
}

#who-we-do a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

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


#who-we-do {
  margin-top: 150px;
  margin-bottom: 150px;
  margin-left: 6em;
  margin-right: 6em;
}


#what-we-do {
  margin-top: 200px;
  margin-bottom: 200px;
  margin-left: 6em;
  margin-right: 6em;
} */

/* #about */

.about_grid {
  padding: 150px 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 25px;
}

.about_grid p {
  color: #fff;
  font-size: calc(1em + 0.5vw);
  /*font-size: calc(1em + .75vw);*/
}

/* FREQUENCY GRAPHIC FREQUENCY GRAPHIC FREQUENCY GRAPHIC FREQUENCY GRAPHIC 
FREQUENCY GRAPHIC FREQUENCY GRAPHIC FREQUENCY GRAPHIC FREQUENCY GRAPHIC  */

.imgbox {
  display: grid;
  height: 100%;
  margin: 7rem 0 0 0;
  display: table-cell;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: 0;
}

.photo {
  background: yellow;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.aikaclear-title {
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.science-title {
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.contact-title {
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.section {
  position: relative;
  margin: 0;
  background-color: black !important;
}

.section-image {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-style: normal;
  min-height: 300px;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 2rem 0;
}

.section-image h1 {
  text-shadow: 1px 1px #000000;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
  color: #fff;
  margin: 0;
  font-weight: 900;
  letter-spacing: 10px;
  font-size: calc(1em + 6vw);
}

.image1 {
  background-image: url('../images/collage03.jpg');
}

.image2 {
  background-image: url('../images/cory.jpg');
}

.image3 {
  background-image: url('../images/collage03.jpg');
}

.container-grid {
  padding: 10px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*charlie*/
  grid-template-rows: auto 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.bio-container {
  padding: 10px 30px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.info-container {
  padding: 30px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.bio-container p {
  margin-top: 0;
  margin-top: 0;
  text-align: left;
}

.item img {
  width: 100%;
  height: 100%;
}

.tile {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.tile img {
  width: 100%;
  height: auto;
  transition: all 0.5s ease;
  align-self: center;
}

.work-tile img {
  /*charlie*/
  transition: all 0.5s ease;
}

.info-tile {
  background-color: #fff;
  padding: 1rem;
  min-height: 170px;
}

.info-tile p {
  font-size: calc(1em + 0.3vw);
  line-height: 140%;
}

.pic-tile {
  grid-column: 1 / span 3;
}

.tile .image-wrapper {
  transition: all 0.5s ease;
}

.work-tile:hover .image-wrapper {
  /*charlie*/
  background: #000;
}

.work-tile:hover img {
  opacity: 0.5;
}

.tile:hover .work-tile-text {
  display: block;
}

.work-tile-text {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  display: none;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-size: large;
}

/* .bio-tile {
  margin: auto;
  text-align: center;
}

.bio-tile:focus {
  outline: none;
}

.bio-tile p {
  margin: 10px 0px;
  text-align: left;
} */

.social {
  position: relative;
  background-color: #000;
  text-align: center;
  /* width: 100%; */
  margin: 0;
  padding-top: 10rem;
}

.social_group {
  position: relative;
  text-align: center;
  height: auto;
  margin: 0 auto;
  width: 20vh;
}

.social ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.social a {
  float: left;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 33.33%;
  /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center;
  /* If you want the text to be centered */
}

.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.95);
}

.modal-content-wrapper {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background-color: transparent;
  margin: 5% auto;
  padding-top: 10px;
  width: 80%;
  position: relative;
  color: #fff;

}

/* modal close button */
.close-modal {
  color: #aaa;
  position: absolute;
  right: -30px;
  top: -25px;
  width: 32px;
  height: 32px;
  opacity: 0.5;
  cursor: pointer;
  transition: all 200ms linear;
}

.close-modal:hover {
  opacity: 1;
  transition: all 200ms linear;
}

.close-modal:before,
.close-modal:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 5px;
  background-color: #fefdfb;
}

.close-modal:before {
  transform: rotate(45deg);
}

.close-modal:after {
  transform: rotate(-45deg);
}

.close-modal-small:before,
.close-modal-small:after {
  height: 24px;
}

.modal ul {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  list-style-type: none;
  font-size: medium;
  font-weight: 300;
  padding: 0;
}

.modal ul li {
  padding-bottom: 0.5rem;
}

.modal span.contributor {
  margin-left: 10px;
}

#work-modal iframe {
  display: none;
  transition: all 0.5s ease;
}

#work-modal .modal-text {
  display: none;
}

/* #bio-modal .modal-content-wrapper {
  background-color: #fff;
  width: 70%;
  padding: 2rem;
  margin-top: 10%;
}

#bio-modal .close-modal {
  position: absolute;
  right: 0;
  top: -35px;
} */

#footer {
  position: relative;
  padding: 0.75rem 1rem;
  /*  background: #2a2a2a;*/
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  background-color: #000;
}

#footer .footer-contact {
  display: inline-block;
}

#footer a {
  text-decoration: none;
  font-size: medium;
}

/* tablets */
/* charlie */
/*magic, don't move */
@media (max-width: 1100px) {
  #header-contact {
    display: block;
  }

  /* .navbar a {
    display: none;
  }

  .subpage-text {
    margin-left: 2em;
    margin-right: 2em;
    padding: 2em;
  }
 */

  /* 
  .rectangle img {
    width: 150px;
    height: 35px;
  }

  .rectangle {
    width: 150px;
    height: 35px;
  }

  .button02 img {
    width: 150px;
    height: 35px;
  }

  .button02 {
    width: 150px;
    height: 35px;
  } */

  /*end charlie*/
  .logo-header img {
    width: 70%;
    height: auto;
    margin: 5px;
  }

  .logo-header-subpage img {
    width: 90%;
    height: auto;
    margin: 5px;
  }

  /* 
  h1 {
    font-size: 70px;
  } */

  .section-image {
    min-height: 250px;
  }

  .container-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .close-modal {
    right: 0;
  }

  .hidden-sm {
    display: none;
  }
}

@media (max-width: 730px) {
  .info-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .rectangle {
    top: 40px;
  }

  .modal-content-wrapper {
    margin: 20% auto;
  }

  #who-we-do {
    margin-left: 3em;
    margin-right: 3em;
  }

  #what-we-do {
    margin-left: 3em;
    margin-right: 3em;
  }

  .item {
    width: 100%;
  }

  .bio-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .container-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .container-grid-bio {
    grid-template-columns: repeat(1, 1fr);
  }

  #bio-modal .modal-content-wrapper {
    margin-top: 30%;
  }
}

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* THIS IS THE BEGINNING FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM */
/* THIS IS THE BEGINNING FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM */
/* THIS IS THE BEGINNING FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM */
/* THIS IS THE BEGINNING FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM */
/* THIS IS THE BEGINNING FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM FORM */

/* #form-right {
  align-items: right;
  text-align: right;
} */

.form .button,
.form .message,
.form .textarea,
.form .text-input,
.form .label {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: large;
  padding: 1em, 1em, 0.75em 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  line-height: normal;
  border-radius: 0;
  border: none;
  background: none;
  display: block;
}

.form .label {
  color: white;
  padding-top: 0;
  padding-left: 0;
  letter-spacing: 0.025em;
  font-size: 1.3rem;
  line-height: 1.25;
  position: relative;
  z-index: 100;
}

.required .form .label:after,
.form .required .label:after {
  content: ' *';
  color: #e8474c;
  font-weight: normal;
  font-size: large;
  vertical-align: top;
}

.form .textarea,
.form .text-input {
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
  background: #333333;
  color: white;
  position: relative;
  padding: 0.5em;
}

.form .textarea:placeholder,
.form .text-input:placeholder {
  color: white;
}

.form .textarea:-webkit-autofill,
.form .text-input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #111111 inset;
  -webkit-text-fill-color: white;
  border-top-color: #111111;
  border-left-color: #111111;
  border-right-color: #111111;
}

.form .textarea:not(:focus):not(:active).error,
.form .text-input:not(:focus):not(:active).error,
.error .form .textarea:not(:focus):not(:active),
.form .error .textarea:not(:focus):not(:active),
.error .form .text-input:not(:focus):not(:active),
.form .error .text-input:not(:focus):not(:active) {
  background-size: 8px 8px;
  background-image: linear-gradient(
    135deg,
    rgba(232, 71, 76, 0.5),
    rgba(232, 71, 76, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(232, 71, 76, 0.5) 50%,
    rgba(232, 71, 76, 0.5) 75%,
    transparent 75%,
    transparent
  );
  background-repeat: repeat;
}

.form:not(.has-magic-focus) .textarea:active,
.form:not(.has-magic-focus) .text-input:active,
.form:not(.has-magic-focus) .textarea:focus,
.form:not(.has-magic-focus) .text-input:focus {
  background: #4e4e4e;
}

.form .message {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 100;
  font-size: large;
  color: white;
}

.form .button {
  position: absolute;
  right: 0;
  bottom: -30px;
  font-family: 'Lato', sans-serif;
  font-size: large;
  line-height: normal;
  cursor: pointer;
  background: #e8474c;
  color: white;
  font-weight: bold;
  width: auto;
  margin-top: 30px;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}

.form .button:hover,
.form .button:focus,
.form .button:active {
  color: white;
  border-color: white;
}

/* .form .button:active {
  position: relative;
  top: 1px;
  left: 1px;
} */

.form {
  /* max-width: 40em; */
  margin: 0;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.form .field {
  width: 100%;
  margin: 0 0 1.5em 0;
}

@media screen and (min-width: 40em) {
  .form .field.half {
    width: calc(50% - 1px);
  }
}

.form .field.last {
  margin-left: auto;
}

.form .textarea {
  max-width: 100%;
}

/* THIS IS THE MENU MENU MENU THIS IS THE MENU
THIS IS THE MENU MENU MENU THIS IS THE MENU
THIS IS THE MENU MENU MENU THIS IS THE MENU
THIS IS THE MENU MENU MENU THIS IS THE MENU
THIS IS THE MENU MENU MENU THIS IS THE MENU */

svg {
  cursor: pointer;
  z-index: 9000;
  right: 30px;
  top: 30px;
  position: fixed;
  opacity: 0.6;
}

#header-contact {
  z-index: 8000;
  position: fixed;
  top: 0;
  right: -250px;
  display: block;
  height: 100%;
}

.menu-bar {
  position: fixed;
  cursor: pointer;
  z-index: 9010;
  position: fixed;
  right: 30px;
  top: 30px;
  height: 100%;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.07s;
  opacity: 0.7;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.contact-content {
  padding-top: 150px;
  display: block;
  background: #fff;
  /* opacity: ; */
  height: 100%;

  text-align: right;
  /* border: 3px solid green; */
}

.contact-content a {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2em;
  display: block;
  margin: 0 2rem;
  padding: 1vh 0 1vh 0;
  /*font-size: calc(1em + .3vw);*/
  line-height: 120%;
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

.contact-content a:hover {
  opacity: 0.5;
}

.menu_image {
  margin: 1em;
}

.quick_contact {
  position: absolute;
  bottom: 25px;
}