/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .menuspan {
    top: 5%;
    right: 25px;
  }
}

/* NOTE: END OF JAVASCRIPT CSS */




/* NOTE: FONTS

font-family: 'Nunito', sans-serif;
font-family: 'Nunito Sans', sans-serif;
*/



/* NOTE: UNIVERSAL */

body {
  /* background-color: #2C393F; */
  background-color: #1F252C;
  color: white;
  font-family: 'Nunito', sans-serif;
}
html {
  scroll-behavior: smooth;
}

i {
  color: #36D1DC;
  font-size: 2.5EM;
}

#smalllogo {
  width: 30%;
  margin-top: 5%;
}

.icon:hover {
  animation: iconcolor 30s infinite;
}
@keyframes iconcolor {
0% {
    color: red;
}
16% {
    color: #999900;
}
32% {
    color: green;
}
48% {
    color: cyan;
}
64% {
    color: blue;
}
80% {
    color: magenta;
}
}

header {
  max-width: 1088px;
  margin: 0 auto;
}
@keyframes barcolor {
0% {
    background-color: red;
}
16% {
    background-color: #999900;
}
32% {
    background-color: green;
}
48% {
    background-color: cyan;
}
64% {
    background-color: blue;
}
80% {
    background-color: magenta;
}
}
.greenbar {
  background-color: #36D1DC;
  color: #fff;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-animation: barcolor 20s infinite;
animation: barcolor 20s infinite;
animation-direction: alternate;
}

::selection {
  background: #36D1DC; /* WebKit/Blink Browsers */
  color: black;
}
::-moz-selection {
  background: #36D1DC; /* Gecko Browsers */
  color: black;
}

.menubtn {
  margin-top: 5%;
}
.menuspan {
  position: absolute;
  top: 3%;
  right: 45px;
  z-index: 9;
  font-size: 1.5vw;
}
.menuspan i {
  color: white;
  transform: scale(1);
  transition-duration: 0.5s;
}
.menuspan i:hover {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/* NOTE: Site introduction */
.site-brief h2 {
  font-size: 1.8em;
}
.site-intro {
  padding-top:  10%;
}
.about-intro h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 8em;
  line-height: .8;
  padding-top: 10px;
}
  .austin {
      display: none;
}
.uid {
    display: none;
}
.mwv {
  display: none;
}
.me {
    left: 0px;
    width: 91%;
    height: 87%;
    top: 38px;
}
.menuspan {
  font-size: 12px;
}

@media screen and (min-width: 300px) {
  .logo-brief h2 {
    font-size: 1.8em;
  }
  .site-logo {
    margin-top: 55px;
  }

  .about-intro h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 4.6em;
    line-height: .8;
    padding-top: 10px;
  }
  .me {
    left: 0px;
    width: 91%;
    height: 87%;
    top: 28px;
  }
  .menuspan {
  font-size: 14px;
  }
  .connect {
    font-size: 1.2em;
  }
}

@media screen and (min-width: 576px)  {
  .logo-brief h2 {
    font-size: 1.8em;
  }
  .site-logo {
    margin-top: 55px;
  }

  .about-intro h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 8em;
    line-height: .8;
    padding-top: 10px;
}
.connect {
  font-size: 1.8em;
}
  .austin {
    width: 22%;
    height: 65%;
    right: 310px;
    top: 15px;
    display: block;
}
.uid {
  width: 64%;
  height: 65%;
  right: 117px;
  top: 15px;
  display: block;
}
.mwv {
    width: 75%;
    height: 65%;
    right: 10px;
    top: 15px;
    display: block;
}
.me {
    left: 0px;
    width: 91%;
    height: 87%;
    top: 38px;
}
.menuspan {
  font-size: 14px;
}
}
@media screen and (min-width: 768px) {
  .logo-brief h2 {
    font-size: 1.2em;
  }
  .about-intro h2 {
    font-size: 8vw;
  }
  .austin {
    width: 20%;
    height: 55%;
    right: 201px;
    top: 10px;
}
.uid {
    width: 66%;
    height: 55%;
    right: 61px;
    top: 10px;
}
.mwv {
    width: 74%;
    height: 55%;
    right: 1px;
    top: 10px;
}
.me {
    left: 0px;
    width: 61%;
    height: 67%;
    top: 29px;
}
.menuspan {
  font-size: 14px;
}
}
@media screen and (min-width: 992px) {
  .logo-brief h2 {
    font-size: 1.6em;
  }
  .about-intro h2 {
    font-size: 8vw;
  }
  .austin {
      width: 22%;
      height: 65%;
      right: 277px;
      top: 15px;
  }
  .uid {
      width: 65%;
      height: 65%;
      right: 97px;
      top: 15px;
  }
.mwv {
    width: 75%;
    height: 65%;
    right: 10px;
    top: 15px;
}
.me {
    left: 0px;
    width: 60%;
    height: 67%;
    top: 38px;
}
.menuspan {
  font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
  .logo-brief h2 {
    font-size: 1.6em;
  }
  .about-intro h2 {
    font-size: 8vw;
  }
  .austin {
    width: 18%;
    height: 65%;
    right: 333px;
    top: 14px;
}
.uid {
  width: 56%;
  height: 65%;
  right: 156px;
  top: 14px;
}
.mwv {
    width: 64%;
    height: 65%;
    right: 70px;
    top: 14px;
}
.me {
    left: 0px;
    width: 80%;
    height: 67%;
    top: 68px;
}
.menuspan {
  font-size: 18px;
}
}

.logo-brief {
  margin-top: 5%;
  margin-bottom: 5%;
}



.site-intro {
 margin-top:  auto;
 margin-bottom:  auto;
}



/* NOTE: HOME PAGE */

.headic {
  padding: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.headic i {
  color: white;
  transform: scale(1);
  transition-duration: 0.5s;
}
.headic i:hover {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.homegrid {
  padding: 0;
}


.desc p {
  position:relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.desc h4 {
  position:relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.desc hr {
  position: relative;
  color: #36D1DC;
  background-color: #36D1DC;
  width: 50%;
  height: 0.5%;
  top: 44%;
}
.mixtframe hr {
  background-color: #0595CB;
}
.mfmframe hr {
  background-color: #F7F6E7;
}
.smartframe hr {
  background-color: #282826;
}
.futframe hr {
  background-color: #292929;
}
.bookframe hr {
  background-color: #FFD105;
}
.offframe hr {
  background-color: white;
}
.gdframe hr{
  background-color: #231F20;
}
.blackframe hr {
  background-color: white;
}
.mixtframe {
  text-align: center;
  position: relative;
}
.mixtframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: #1C1C1A;
  opacity: 0;
  transition: opacity 0.3s;
}
.mixtframe:hover .desc {
  opacity: 1;
}
.mixtframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: #0595CB;
}
.mixtframe a {
  display: block;
  text-align: center;
}
.mixtframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}

.mfmframe {
  text-align: center;
  position: relative;
}
.mfmframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: #475650;
  opacity: 0;
  transition: opacity 0.3s;
}
.mfmframe:hover .desc {
  opacity: 1;
}
.mfmframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: #F7F6E7;
}
.mfmframe a {
  display: block;
  text-align: center;
}
.mfmframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}

.mfm {
  background-color: #1F252C;
}



.futframe {
  text-align: center;
  position: relative;
}
.futframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: #F8EB5D;
  opacity: 0;
  transition: opacity 0.3s;
}
.futframe:hover .desc {
  opacity: 1;
}
.futframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: #292929;
}
.futframe a {
  display: block;
  text-align: center;
}
.futframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}


.smartframe {
  text-align: center;
  position: relative;
}
.smartframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: white;
  opacity: 0;
  transition: opacity 0.3s;
}
.smartframe:hover .desc {
  opacity: 1;
}
.smartframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: #443C2C;
}
.smartframe a {
  display: block;
  text-align: center;
}
.smartframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: #BDBDBD;
}


.bookframe {
  text-align: center;
  position: relative;
}
.bookframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: #B71F28;
  opacity: 0;
  transition: opacity 0.3s;
}
.bookframe:hover .desc {
  opacity: 1;
}
.bookframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 3.8vw;
  color: #FFD105;
}
.bookframe a {
  display: block;
  text-align: center;
}
.bookframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}


.gdframe {
  text-align: center;
  position: relative;
}
.gdframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: #5AC8E8;
  opacity: 0;
  transition: opacity 0.3s;
}
.gdframe:hover .desc {
  opacity: 1;
}
.gdframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: #231F20;
}
.gdframe a {
  display: block;
  text-align: center;
}
.gdframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}


.offframe {
  text-align: center;
  position: relative;
}
.offframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 0.3s;
}
.offframe:hover .desc {
  opacity: 1;
}
.offframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: white;
}
.offframe a {
  display: block;
  text-align: center;
}
.offframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}


.manframe {
  text-align: center;
  position: relative;
}
.manframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 0.3s;
}
.manframe:hover .desc {
  opacity: 1;
}
.manframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: white;
}
.manframe a {
  display: block;
  text-align: center;
}
.manframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: #36D1DC;
}

.blackframe {
  text-align: center;
  position: relative;
}
.blackframe .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 0.3s;
}
.blackframe:hover .desc {
  opacity: 1;
}
.blackframe h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4vw;
  color: white;
}
.blackframe a {
  display: block;
  text-align: center;
}
.blackframe p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  color: white;
}

/* NOTE: Home Page Mobile Spot */
.mobile-contact {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color: white;
  font-size: 1.4em;

}
.mobile-contact:hover {
  background-color: black;
}
.mobile-contact p {
line-height: 0.9;
padding-left: 5%;

}
.line {
  padding-top: 45%;
}
.mobile-contact a {
  text-decoration: none;
  color: white;
}
.connect {
  color: #36D1DC;
  font-size: 1.8em;
  animation: iconcolor 20s infinite;
  animation-direction: alternate;
}


/* NOTE: About Introduction */

.about-intro {
  margin-top: auto;
    margin-bottom: auto;
}
.about-intro h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
}
.about-img {
  width: 100%;
}
 /* NOTE: about main section */
 .blips {
   text-align: center;
   margin-bottom: 2%;
 }
.blips h3 {
  color: #36D1DC;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding-top: 5%;
}
.blips p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.3em;
  padding-bottom: 5%;
}


/* NOTE: PROJECT PAGES */
.project-intro {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  margin-top: 10%;
}
.project-intro h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #36D1DC;
}
.project-intro p {
  line-height: 1.5em;
}
.project-logo {
  padding-bottom: 5%;
}
.project-showcase {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  /* background-color: white; */
  color: black;
  margin-top: 4.5em;
  margin-bottom: 4.5em;
}
.project-showcase h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding-top: 15px;
}
.project-showcase p {
  line-height: 1.5em;
  padding-bottom: 15px;
  font-family: 'Nunito Sans', sans-serif;
}
.project-showcase img {
  margin-top: 15px;
  margin-bottom: 15px;
}
.offwhite {
  background-color: #ededed;
  width: 100%;
  color: black;
}
.text-block {
  padding-top: 1.5em;
  padding-bottom:1.5em;
}
.projectnav {
  font-family: 'Nunito Sans', sans-serif;
  color: #1F252C;
  text-decoration: none;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 1.5em;
}
.projectnav a {
  color: #1F252C;
  text-decoration: none;

}
.projectnav h4 {
  transform: scale(1);
  transition-duration: 0.5s;
}
.projectnav i {
  font-size: 16px;
  padding: 10px;
  color: #1F252C;
  transform: scale(1);
  transition-duration: 0.5s;
}
.next:hover h4, .previous:hover h4, .projecthome:hover h4 {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.next:hover i, .previous:hover i, .projecthome:hover i {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.next i, .previous i, .projecthome i{
  font-size: 1.8em;
}

/* NOTE: For the Offset page */

.offprojectnav {
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 1.5em;
}
.offprojectnav a {
  color: white;
  text-decoration: none;

}
.offprojectnav h4 {
  transform: scale(1);
  transition-duration: 0.5s;
}
.offprojectnav i {
  font-size: 16px;
  padding: 10px;
  color: white;
  transform: scale(1);
  transition-duration: 0.5s;
}
.offnext:hover h4, .offprevious:hover h4, .offprojecthome:hover h4 {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.offnext:hover i, .offprevious:hover i, .offprojecthome:hover i {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.offnext i, .offprevious i, .offprojecthome i{
  font-size: 1.8em;
}

.image-description h4 {
  font-size: 1.5em;
  text-align: center;
}
.image-description h6 {
  text-align: center;
}
.image-description p {
  color: white;
  line-height: 1.8em;
}

.google-slides-container{
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
}
.google-slides-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.blackhole-slides-container{
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
}
.blackhole-slides-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#mixtpage {
  background-color: white;
}
#mixt-header {
  background-color: #1F252C;
}
#mixt-header h2 {
  color: #0595CB;
}
#mixt-header i {
  color: #0595CB!important;;
  animation: none;
}
#mixt-header i:hover {
   color: #36D1DC!important;
}
#mfm-header {
  background-color: #475650;
}
#mfm-header h2 {
  color: #F7F6E6;
}
.mfmbtn {
  border: 2px solid #36D1DC;
}
.mfmbtn:hover {
  background-color: #36D1DC;
}
#fut-header {
  background-color: #282828;
}
#fut-header h2 {
  color: #F8EB5D;
}
#fut-header i {
color: #F8EB5D;
}
#fut-header i:hover {
   color: #36D1DC!important;
}
#smart-header {
background-color: #2C2C2C;
}
#smart-header h2 {
color: #D5B482;
}
#smart-header i {
  color: #D5B482;
}
#smart-header i:hover {
  color: #36D1DC;
}
#aae-header {
  background-color: #B71F28;
}
#aae-header h2 {
  color: #FFD204;
}
#aae-header i {
  color: white;
}
#aae-header i:hover {
  color:  #36D1DC;
}
#offpage {
  background-color: black;
}
#off-header {
  background-color: black;
  /* border-bottom: 1px solid white; */
}
#off-header h2 {
  color: white;
}
#off-header i {
  color: white;
}
#off-header i:hover {
  color:  #36D1DC;
}
 #offset {
   border: 1px solid white;
   width: 50%;
 }
#bfa-header h2 {
color: #59C8E8;
}
#bfa-header {
  background-color: #1F252C;
}
#blakhole {
  border: none;
}

/* NOTE: FOOTER */

footer {
  color: #1F252C;
  background-color: #ededed;
  text-align: center;
}
footer h3 {
  padding-top: 20px;
  padding-bottom: 20px;
  transform: scale(1);
  transition-duration: 0.5s;
}

footer h3 a {
  color: #36D1DC;
  animation: iconcolor 20s infinite;
  animation-direction: alternate;
  transform: scale(1);
  transition-duration: 0.5s;
}
footer h3 a:hover {
  text-decoration: none;
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.footernav {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  transform: scale(1);
  transition-duration: 0.5s;
}

.footernav a {
  text-align: center;
  margin: 20px;
  font-size: 1.5em;
  color: #1F252C;
  transform: scale(1);
  transition-duration: 0.5s;
}
.footernav a:hover {
  color: #36D1DC;
  text-decoration: none;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.icon {
  padding: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.icon i {
  color: #1F252C;
  transform: scale(1);
  transition-duration: 0.5s;
}
.icon i:hover {
  color: #36D1DC;
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.copyright {
  padding-top: 20px;
  padding-bottom: 20px;
}
/* NOTE: Custom home footer */
.homefooter {
  padding: 0;
}
.box img{
  width: 80%;
}
.box {
  width: 100%;
}

.linkedin {
  background-color: #007bb6;
    padding: 0;
}

.instagram {
  background-color: #3f729b;
    padding: 0;
}

.email {
  background-color: pink;
    padding: 0;
}

.behance {
  background-color: #1769ff;
    padding: 0;
}

.lin {
  padding: 2.5em;
  position:relative;
  -webkit-transform: scale(1);
  transform: scaleX(1);
  transition-duration: 1.2s;
}
.box img:hover {
  -webkit-transform: scale(-1);
  transform: scaleX(-1);
  transition-duration: 1.2s;
}

.flip {
 background-color: red;
}

.ins {
  padding: 2.5em;
  position:relative;
  -webkit-transform: scale(1);
  transform: scaleX(1);
  transition-duration: 1.2s;
}
.ema {
  padding: 2.5em;
  position:relative;
}

.email .desc {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  background-color: pink;
  opacity: 0;
  transition: opacity 0.3s;
}
.email:hover .desc {
  opacity: 1;
}
.email a {
  display: block;
  text-align: center;
}
.email p {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 2vw;
  color: white;
}
.beh {
  padding: 3em;
  position:relative;
  -webkit-transform: scale(1);
  transform: scaleX(1);
  transition-duration: 1.2s;
}



/* NOTE: last minute padding  */