.home_intro {
  background-color: #000;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  transform: translate(0%, 0%) translate3d(0px, 0px, 0px);
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out; }
  .home_intro_logo {
    margin: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px; }
  .home_intro .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; }

.home_intro2 {
  background-color: #000;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  transform: translate(0%, 0%) translate3d(0px, 0px, 0px);
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out; }
  .home_intro2_logo {
    margin: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px; }
  .home_intro2 .overlay2 {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; }

.logo-animate {
  display: none; }

.animate_intro {
  transform: translate(100%, 0%) translate3d(0px, 0px, 0px); }

.animate_overlay {
  transform: translate(0%, 0%) translate3d(0px, 0px, 0px) !important; }

nav {
  position: fixed;
  height: 64px;
  width: calc(100% - 128px);
  padding: 24px 64px 0px 64px;
  z-index: 5; }

.size {
  width: 125px; }

.menu_overlay {
  transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
  position: fixed;
  width: 100%;
  background-color: #1b1b1b;
  height: 100vh;
  z-index: 0;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3; }

.logo {
  float: left;
  position: static;
  display: block;
  padding-top: 20px;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out; }

.logo2 {
  float: left;
  position: static;
  display: block;
  padding-top: 20px;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out; }

.logo_animate {
  opacity: 0; }

#menuToggle {
  display: block;
  position: relative;
  float: right;
  z-index: 1;
  margin-top: 26px;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out; }

@media screen and (max-width: 992px) {
  .menu_overlay {
    transform: translate(-992px, 0%) translate3d(0px, 0px, 0px); } }

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  nav {
    position: fixed;
    height: 64px;
    width: calc(100% - 62px);
    padding: 24px 13px 0px 25px;
    z-index: 5; }
  .menu-ul {
    display: none !important; } }

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none; }

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 25px;
  height: 1px;
  margin-bottom: 5px;
  position: relative;
  background: #000;
  z-index: 1;
  transform-origin: 9px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }

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

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

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(0px, 2px);
  background: #fff; }

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2); }

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, 1px); }

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
  height: 100vh;
  position: absolute;
  width: 430px;
  margin: -108px 0 0 -300px;
  padding: 125px 50px 50px 0px;
  padding-top: 180px !important;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(118%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }

#menu li {
  border-bottom: 2px solid #2d2d2d;
  font-size: 22px;
  text-align: center;
  color: #fff;
  display: none; }
  #menu li:first-of-type {
    border-top: 2px solid #2d2d2d; }

.menulay {
  padding: 25px 0; }

.hoverchange {
  background-color: #fff;
  color: #000;
  transition: color,background-color .5s ease-in-out;
  -moz-transition: color,background-color .5s ease-in-out;
  -webkit-transition: color, background-color .5s ease-in-out; }

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: none; }

.socialmedia {
  display: inline-flex;
  list-style-type: none; }

.menu-ul {
  display: inline-flex;
  list-style-type: none;
  float: right;
  padding-top: 23px;
  padding-right: 20px; }

.menu-list {
  padding-left: 20px;
  text-decoration: none; }

.menu-a {
  font-size: 1.35em;
  text-decoration: none;
  color: #2d2d2d; }

.Rectanglel {
  float: left;
  width: 350px;
  height: 390px;
  background-image: linear-gradient(to bottom, #21bdb0, #39b9e9);
  text-align: left !important;
  background-color: #fff;
  border-color: #fff;
  transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out; }
  .Rectanglel:hover {
    position: relative;
    margin-top: -20px;
    margin-left: -20px;
    border: 10px solid #fff;
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out; }

.Rectangler {
  float: left;
  width: 184px;
  height: 390px;
  background-image: linear-gradient(to left, #fd746c, #ff9068);
  margin-top: 80px;
  border-color: #fff;
  transition: .25s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out; }
  .Rectangler:hover {
    position: relative;
    margin-bottom: -20px;
    margin-right: -20px;
    border: 10px solid #fff;
    transition: .25s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out; }

.home-container {
  height: 96vh; }

.text_l {
  font-size: 58pt;
  text-align: right;
  top: calc(50% - 138px);
  position: relative;
  left: -194px; }

.text_r {
  line-height: 100px;
  font-size: 58pt;
  text-align: left;
  top: calc(50% - 155px);
  position: relative;
  left: 100px; }

.Rect_container {
  width: 100vw;
  position: relative;
  top: calc(50% - 50px);
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
  transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
  -webkit-transition: .75s ease;
  -moz-transition: .75s ease;
  -o-transition: .75s ease;
  transition: .75	s ease; }

.centerd {
  opacity: 1;
  margin: 0 65px !important;
  transform: none; }

.colored {
  color: #2196F3; }

@media screen and (max-width: 992px) {
  .Rect_container {
    top: calc(50% - 110px); } }

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
footer {
  top: 200px;
  position: relative; }

.socialfooter {
  height: 50px;
  float: right;
  width: 140px;
  position: relative; }

.socialspacing {
  font-size: 20px; }

.socialbutton {
  list-style: none;
  padding: 10px;
  width: 22px; }

.fa {
  color: #000; }

.white-color {
  color: #fff; }

.socialbottom {
  opacity: 0;
  z-index: 8;
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: -265px;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out; }

.fadein {
  opacity: 1; }

.svgfill {
  fill: #fff; }

.copyright {
  width: 124px;
  margin: 0 auto;
  font-size: 14px;
  color: #656464; }

.socialfooter {
  font-size: 1.45rem;
  float: left;
  text-align: center;
  display: inline-flex;
  text-decoration: none;
  list-style-type: none;
  opacity: .65;
  width: 118px;
  left: 56px; }

.socialspace {
  padding-left: 10px;
  color: #656464; }

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .copyright {
    margin-right: 60px;
    float: right;
    width: 124px;
    /* margin: 0 auto; */
    font-size: 14px;
    color: #656464; }
  .copyright {
    margin-right: 60px;
    float: right;
    width: 124px;
    /* margin: 0 auto; */
    font-size: 14px;
    color: #656464; } }

.slidingVertical {
  display: inline;
  text-indent: 8px; }

.slidingVertical span {
  animation: topToBottom 15s linear infinite 0s;
  -ms-animation: topToBottom 15s linear infinite 0s;
  -webkit-animation: topToBottom 15s linear infinite 0s;
  color: #00abe9;
  opacity: 0;
  overflow: hidden;
  position: absolute; }

.slidingVertical span:nth-child(2) {
  animation-delay: 3,75s;
  -ms-animation-delay: 3,75s;
  -webkit-animation-delay: 3.75s; }

.slidingVertical span:nth-child(3) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s; }

.slidingVertical span:nth-child(4) {
  animation-delay: 11.25s;
  -ms-animation-delay: 11.25s;
  -webkit-animation-delay: 11.25s; }

/*topToBottom Animation*/
@-moz-keyframes topToBottom {
  0% {
    opacity: 0; }
  5% {
    opacity: 0;
    -moz-transform: translateY(15px); }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px); }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px); }
  30% {
    opacity: 0;
    -moz-transform: translateY(-15px); }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes topToBottom {
  0% {
    opacity: 0; }
  5% {
    opacity: 0;
    -webkit-transform: translateY(15px); }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px); }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px); }
  30% {
    opacity: 0;
    -webkit-transform: translateY(-15px); }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-ms-keyframes topToBottom {
  0% {
    opacity: 0; }
  5% {
    opacity: 0;
    -ms-transform: translateY(15px); }
  10% {
    opacity: 1;
    -ms-transform: translateY(0px); }
  25% {
    opacity: 1;
    -ms-transform: translateY(0px); }
  30% {
    opacity: 0;
    -ms-transform: translateY(-15px); }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

#container {
  position: relative;
  top: calc(50% - 280px);
  height: 72vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  overflow-x: scroll; }

#thumbs {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 600px;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 100px; }

#thumbs div {
  height: 600px;
  width: 400px;
  background-color: #2E94B4;
  margin: 0 40px;
  display: inline-block;
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  color: #FFF; }

.section-height {
  padding-top: 2vh;
  height: 94vh; }

.footer-p {
  top: -25px;
  position: relative; }

@font-face {
  font-family: Wavehaus;
  font-family: 'Wavehaus';
  src: url("../font/Wavehaus-128Bold.otf") format("truetype"); }

@font-face {
  font-family: Wavehaus-semi;
  font-family: 'Wavehaus-semi';
  src: url("../font/Wavehaus-95SemiBold.otf") format("truetype"); }

@font-face {
  font-family: Wavehaus-bold;
  font-family: 'Wavehaus-bold';
  src: url("../font/Wavehaus-128Bold.otf") format("truetype"); }

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  cursor: none !important;
  font-family: 'Wavehaus', Fallback, sans-serif; }

html {
  font-size: 62.5%;
  position: fixed;
  background: -moz-linear-gradient(-45deg, #21bdb0 0%, #39b9e9 100%);
  background: -webkit-linear-gradient(-45deg, #21bdb0 0%, #39b9e9 100%);
  background: linear-gradient(135deg, #21bdb0 0%, #39b9e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21bdb0', endColorstr='#39b9e9',GradientType=1 ); }

body {
  bottom: 0;
  height: 100vh;
  width: 100vw;
  background: #fff; }

h1 {
  font-family: Wavehaus;
  font-size: 5.2rem; }

h6 {
  font-family: Wavehaus-semi;
  font-size: 1.4rem; }

video#bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%); }

.cursor-div {
  z-index: 9999;
  position: fixed;
  width: 15px;
  height: 15px;
  background-color: #DEC080;
  pointer-events: none !important;
  border-radius: 50%;
  display: none;
  -webkit-transition: transform .15s ease-in-out;
  -moz-transition: transform .15s ease-in-out;
  -o-transition: transform .15s ease-in-out;
  transition: transform .15s ease-in-out; }

.large-cursor {
  transform: scale(2);
  -webkit-transition: scale(2);
  -moz-transition: scale(2);
  -o-transition: scale(2);
  opacity: .9;
  -webkit-transition: transform .15s ease-in-out;
  -moz-transition: transform .15s ease-in-out;
  -o-transition: transform .15s ease-in-out;
  transition: transform .15s ease-in-out; }

.clicked {
  transform: scale(0.6);
  -webkit-transition: scale(0.6);
  -moz-transition: scale(0.6);
  -o-transition: scale(0.6);
  opacity: 1;
  -webkit-transition: scale, opacity .15s ease-in-out;
  -moz-transition: scale, opacity .15s ease-in-out;
  -o-transition: scale, opacity .15s ease-in-out;
  transition: scale, opacity .15s ease-in-out; }

.mockup {
  position: absolute;
  right: -100px;
  bottom: 50px;
  opacity: 0; }

.macbook {
  width: 900px; }

@media screen and (max-width: 992px) {
  * {
    cursor: default !important; }
  .cursor-div {
    display: none !important; }
  .macbook {
    width: 490px; }
  .mockup {
    bottom: 54px;
    right: -55px; } }

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  * {
    cursor: default !important; }
  .cursor-div {
    display: none !important; }
  .mockup {
    bottom: 66px; }
  h1 {
    font-size: 2.2rem; }
  h6 {
    font-size: 1rem; } }