/*Body & Parent*/
body {
  background-color: #2f8efa;
}

.heroHead {
  cursor: pointer;
  touch-action: manipulation;
}

.body {
  overflow-x: hidden;
}

.flexParent {
  display: flex; 
}

.relativeParent {
  position: relative;
}

/*Will Change*/
.sticky-wrapper {
    transform: translateZ(0);
}

.armHolder, .pushHolder {
    transform: translateZ(0);
}

.sticky-wrapper.animating {
    will-change: opacity;
}

.div {
    will-change: transform;
}

.armHolder.show, .pushHolder.show {
    will-change: opacity;
}

.background {
  will-change: background-image;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/*Fonts & Text*/
@font-face {
    font-family: 'Grenze_Gotisch';
    src: url('../fonts/grenzegotisch.woff2') format('woff2'),
         url('../fonts/grenzegotisch.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins-regular.woff2') format('woff2'),
         url('../fonts/poppins-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
  font-family: 'Grenze_Gotisch';
}

h2 {
  font-family: 'Grenze_Gotisch';
}

h3 {
  font-family: 'Grenze_Gotisch';
}

p {
  font-family: 'poppins';
}

a {
  text-decoration: none;
  color: #000;
  display: block;
  font-family: 'Grenze_Gotisch';
}

/*Loading Animation*/
.ballHolder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ball {
  z-index: 5;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.loadHolder {
  z-index: 100;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #2f8efa;
  position: fixed;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

body.loading {
    overflow: hidden;
    height: 100vh;
}

h3 {
  z-index: 3;
  position: absolute;
}

.load2 {
  z-index: 5;
  display: none;
}

.ballHolder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ball {
  z-index: 5;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*Background*/
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;        
  max-width: 100%;     
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.background img {
  display: block;       
  width: 100%;
  height: 100%;
  max-width: 100%;      
  object-fit: cover;
}

/*Header*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#header {
  z-index: 22;
  position: fixed;
  opacity: 0;
  display: flex;
  align-items: center;
}

.heroHead {
  background-size: 100%;
  background-repeat: no-repeat; 
  background-position: center;
  padding: 1vw;
  display: inline-block;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.headerContainer {
  list-style: none;
}

.headerTxt {
  z-index: 22;
  padding: 2.25vw 1vw;
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-200%);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.fadedIn {
  opacity: 1 !important;
  transform: translateX(0) !important; 
  transition-delay: 0s !important;
}

.spinning {
  animation: spin 7s linear infinite !important;
}

/*Hero*/
.hero {
  width: 100vw;
  height: 100vh;
  background-color: #2f8efa;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

#rotaHead {
  width: auto;
  position: absolute;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.headTxt {
  position: absolute;
  background-size: 100%;
  animation: spin 15s linear infinite;
  z-index: 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.homeHeadTxt {
    background-image: url(../images/heads/headWrapTxt.png);
}

.aboutHeadTxt {
    background-image: url(../images/heads/headWrapTxt_2.png);
}

.contactHeadTxt {
    background-image: url(../images/heads/headWrapTxt_3.png);
}

/*Clouds*/
.cloud {
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/*Intro*/
#intro  {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100vw;
  background: linear-gradient(to bottom, #2f8efa, transparent);
  position: relative;
}

#intro p {
  position: relative;
  z-index: 1;
}

#intro h1 {
  position: relative;
  z-index: 1;
}

/*Sections*/
.sec {
  contain: layout style paint;
  position: relative;
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.stopper {
  position: absolute;
  z-index: -1;
}

.stopperTop {
  top: 0;
  left: 0;
}

.stopperBot {
  bottom: 0;
  left: 0;
}

/*Objects*/
.div {
  transform: translateZ(0);
  position: absolute;
  min-width: 10vw;
  min-height: 10vw;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.cover {
  cursor: pointer;
}

/*Table of Context*/
.tblButt {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: relative;
  z-index: 10;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.div.animate .tblButt {
  animation: fadeInOut 1s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.school a {
  transform: rotate(-5deg);
}

/*Section Breaks*/
.secBr {
  position: relative;
}

.secBrIntro {
  width: 100%;
  height: 20vw;
  position: relative;
}

/*Portfolio Piece Popup*/
.hide {
  visibility: hidden;
  position: absolute;
}

.x {
  background-image: url(../images/X.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: absolute;
}

.portHolder {
  z-index: 3;
  position: fixed;
  background-size: 100%;
  overflow: hidden;
}

.port {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2f8efa transparent;
}

.port div {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.flexParent div {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*Buttons*/
.button {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: bgScale 3s ease-in-out infinite;
  cursor: pointer;
  transition: background-size 0.5s ease;
}

.button:hover {
  animation-play-state: paused;
  background-size: 100% !important;
}

@keyframes bgScale {
  0%, 100% {
    background-size: 80%;
  }
  50% {
    background-size: 100%;
  }
}

/*School Break*/
.schoolTxt {
  position: relative;
  z-index: 1;
}

.schlP1 {
  padding-top: 1vw;
}

.schoolBr {
  position: absolute;
  z-index: 1;
  background-size: 100%;
  transform: rotate(20deg);
}

/*Professional Break*/
.profTxt {
  position: relative;
  z-index: 1;
}

.profP1 {
  padding-top: 1vw;
  margin-left: 3vw;
}

.profBr {
  position: absolute;
  z-index: 1;
  background-size: 100%;
}

/*Playground Break*/
.playTxt {
  position: relative;
  z-index: 1;
}

.playP1 {
  padding-top: 1vw;
}

.playBr {
  position: absolute;
  z-index: 1;
}

/*Footer*/
footer {
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  box-sizing: border-box;
}

footer h2 {
  margin-bottom: 2vw;
}

.footHead {
  background-size: 100%;
  background-repeat: no-repeat; 
  background-position: center;
}

.footHead:hover {
  animation: spin 7s linear infinite !important;
}

/*About*/
#intro.abt {
  width: 100vw;
  height: 10vw !important;
}

.abtCloud {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw;
}

/*Contact*/
#intro.cont {
  width: 100vw;
  height: 10vw !important;
}

#contHolder {
  width: 100%;
  margin-bottom: 75vw;
}

.overflow {
  overflow-x: hidden;
  overflow-x: clip;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
  /*Body & Parent*/
  html {
    overflow-x: hidden;
  }

  .sticky-wrapper {
    top: 0;
    height: 100%;
  }

  .mobHide {
    display: none !important;
    visibility: hidden;
    opacity: 0;
  }

  /*Fonts & Text*/
  h1 {
    font-size: 6vw;
  }

  h2 {
    font-size: 8vw;
  }

  p {
    font-size: 3vw;
    line-height: 3.8vw;
    letter-spacing: 0.1vw;
  }

  a {
    font-size: 4vw;
  }

  /*Loading Screen*/
  h3 {
    font-size: 10vw;
    top: calc(50% - 6vw);
  }

  .loadTxt {
    width: 60vw;
  }

  .load1 {
    left: calc(50% - 30vw);
  }

  .load2 {
    left: calc(50% - 30vw);
  }

  .loadCloud {
    background-image: url(../images/clouds/cloudLoad_mob.png);
    width: 170vw;
    height: 79.6vw;
    top: calc(50% - 39.8vw);
    left: calc(50% - 85vw);
  }

  .ball {
    width: 20vw;
    height: 20vw;
  }

  .ball1 {
    background-image: url(../images/heads/Head_1_mob.png);
  }

  .ball2 {
    background-image: url(../images/heads/happyHead_1_mob.png);
  }

  .ball3 {
    background-image: url(../images/heads/questHead_1_mob.png);
  }

  /*Header*/
  #header {
    min-width: 20px;
    height: 17vw;
  }

  .heroHead {
    width: 15vw;
    height: 15vw;
    margin: 0.5vw;
  }

  .heroHead.clicked {
    animation: spin 7s linear infinite;
  }

  .headerContainer {
    padding-top: 42vw;
    margin-left: -15vw;
  }

  .headerTxt {
    font-size: 4vw;
  }

  .headerTxt:nth-of-type(1) {
    transition-delay: 0.2s, 0.2s;
    transform: translateX(-200%);
  }

  .headerTxt:nth-of-type(2) {
    transition-delay: 0.8s, 0.8s;
    transform: translateX(-240%);
  }

  .headerTxt:nth-of-type(3) {
    transition-delay: 1.4s, 1.4s;
    transform: translateX(-280%);
  }

  .heroHead.clicked ~ .headerContainer .headerTxt {
    transform: translateX(0);
    opacity: 1;
  }

  .heroHeadIndex {
    background-image: url(../images/heads/headLogo_mob.png);
  }

  .heroHeadAbout {
    background-image: url(../images/heads/headLogo_2_mob.png);
  }

  .heroHeadCon {
    background-image: url(../images/heads/headLogo_3_mob.png);
  }

  .cloudHeader {
    z-index: -1;
    background-image: url(../images/clouds/cloudHeader_mob.png);
    top: -3vw;
    left: -52vw;
    width: 87vw;
    height: 57.62vw;
    opacity: 0;
    transition: opacity 1s ease;
  }

  .heroHead.clicked ~ .cloudHeader {
    opacity: 1;
    transition-delay: 0.8s; 
  }

  /*Hero*/
  .hero {
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
    clip-path: inset(0 0 -50vw 0);
    position: relative; /* Needed for absolute children */
    width: 100%;
    max-width: 100vw;
    contain: layout;
  }

  #rotaHead {
    max-height: 55vw;
  }

  .headTxt {
    top: calc(50% - 40vw);
    left: calc(50% - 40vw);
    width: 80vw;
    height: 80vw;
  }

  .heroCld2 {
    background-image: url(../images/clouds/cloudHome_2_mob.png);
    width: 70vw;
    height: 69.33vw;
    left: 51vw;
    bottom: 0vw;
  }

  .heroCld1 {
    background-image: url(../images/clouds/cloudHome_1_mob.png);
    width: 120vw;
    height: 57.09vw;
    left: -7vw;
    top: calc(50% - 30vw);
  }

  .heroCld3 {
    background-image: url(../images/clouds/cloudHome_3_mob.png);
    width: 90vw;
    height: 60.34vw;
    left: -30vw;
    top: calc(50% - 86vw);
  }

  /*Intro*/
  #intro {
    height: 220vw;
  }

  #intro p {
    width: 70vw;
  }

  #intro h1 {
    margin-left: 20vw;
    padding-top: 30vw;
  }

  .introP1 {
    padding-top: 39vw;
    padding-left: 10vw;
  }

  .introP2 {
    padding-top: 29vw;
    padding-left: 25vw;
  }

  .inroCld1 {
    background-image: url(../images/clouds/cloudIntro_1.png);
    width: 90vw;
    height: 55.8495vw;
    left: 7vw;
    top: 0vw;
  }

  .inroCld2 {
    background-image: url(../images/clouds/cloudIntro_2.png);
    width: 255vw;
    height: 73.208vw;
    left: -44vw;
    top: 45vw;
  }

  .inroCld3 {
    background-image: url(../images/clouds/cloudIntro_3.png);
    width: 130vw;
    height: 70.2303vw;
    left: -15vw;
    top: 119vw;
  }

  .introBut {
    top: 185vw;
    left: 7vw;
    font-size: 4.5vw;
  }

  /*Arms*/
  .armHolder, .pushHolder {
    display: none;
    width: 0vw;
    height: 0vw;
  }

  /*Fingers*/
  .right {
    transform: translateX(100vw);
  }

  .left {
    transform: translateX(-100vw);
  }

  .animate {
    transform: translateX(0);
  }

  .fingerHolder {
    top: 0;
    left: 0;
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
  }

  .fingerHolder img {
    position: absolute;
    bottom: 0;
    width: 70vw;
  }

  #leftFinger {
    opacity: 0;
    top: 10vh; 
    left: -5vw;
    transform: rotate(45deg); 
  }

  #rightFinger { 
    opacity: 0;
    top: 10vh;
    right: -5vw; 
    transform: rotate(-45deg); 
  } 

  /*Sections*/
  .sec {
    width: 100vw;
    min-height: 60vh !important;
    margin-bottom: 35vw;
  }

  .stopper {
    width: 100vw;
    height: 100vh;
  }

  /*Table of Context*/
  .tblCtxt {
    height: 310vw;
  }

  .school {
    top: 0vw;
    left: 10vw;
    width: 70vw;
    height: 101.395vw;
    background-image: url(../images/school_mob.png);
  }

  .professional {
    top: 110vw;
    left: 15vw;
    width: 70vw;
    height: 91.46vw;
    background-image: url(../images/professional_mob.png);
  }

  .playground {
    top: 214vw;
    left: 20vw;
    width: 70vw;
    height: 90.64vw;
    background-image: url(../images/playground_mob.png);
  }

  .tblButt {
    height: 8vw;
  }

  .tblButt.clicked {
    opacity: 1 !important;
  }

  .schlButt1 {
    width: 45vw;
    margin-left: 15vw;
    margin-top: 46.5vw;
    background-image: url(../images/table/highlight_4.png);
  }

  .schlButt2 {
    width: 30vw;
    margin-left: 16vw;
    margin-top: 2.3vw;
    background-image: url(../images/table/highlight_2.png);
  }

  .schlButt3 {
    width: 40vw;
    margin-left: 16vw;
    margin-top: 0vw;
    background-image: url(../images/table/highlight_6.png);
  }

  .schlButt4 {
    width: 50vw;
    margin-left: 18.5vw;
    margin-top: 1vw;
    background-image: url(../images/table/highlight_5.png);
  }

  .schlButt5 {
    width: 46vw;
    margin-left: 20vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_8.png);
  }

  .profButt1 {
    width: 55vw;
    height: 14.5vw;
    margin-left: 8vw;
    margin-top: 16vw;
    background-image: url(../images/table/highlight_2.png);
  }

  .profButt2 {
    width: 45vw;
    margin-left: 9.2vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_5.png);
  }

  .profButt3 {
    width: 42vw;
    height: 7vw;
    margin-left: 9.7vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_3.png);
  }

  .playButt1 {
    width: 30vw;
    height: 14.2vw;
    margin-left: 38vw;
    margin-top: 0.8vw;
    background-image: url(../images/table/highlight_7.png);
  }

  .playButt2 {
    width: 30vw;
    height: 10.5vw;
    margin-left: 38vw;
    margin-top: 1.8vw;
    background-image: url(../images/table/highlight_4.png);
  }

  .playButt3 {
    width: 30vw;
    height: 11.8vw;
    margin-left: 39vw;
    margin-top: 2.5vw;
    background-image: url(../images/table/highlight_6.png);
  }

  .playButt4 {
    width: 23vw;
    height: 12.4vw;
    margin-left: 37.2vw;
    margin-top: -1vw;
    background-image: url(../images/table/highlight_8.png);
  }

  .div.animate .tblButt:nth-child(1) {
    animation-delay: 3s;
  }
  .div.animate .tblButt:nth-child(2) {
    animation-delay: 4s;
  }
  .div.animate .tblButt:nth-child(3) {
    animation-delay: 5s;
  }
  .div.animate .tblButt:nth-child(4) {
    animation-delay: 6s;
  }
  .div.animate .tblButt:nth-child(5) {
    animation-delay: 7s;
  }

  /*Section Breaks*/
  .secBr {
    width: 100%;
    height: 160vw;
    margin-top: 15vw;
    margin-bottom: 15vw;
  }

  .secBrPar {
    width: 70vw;
  }

  /*Portfolio Piece Popup*/
  .x {
    width: 7vw;
    height: 7vw;
    right: 1.5vw;
    top: 1.5vw;
  }

  .portHolder {
    width: 80vw;
    height: 70vh;
    padding-top: 10vw;
    padding-bottom: 5vw;
    background-image: url(../images/popupBg_mob.jpg);
    top: 10vh;
    left: 10vw;
  }

  .port {
    width: 70vw;
    height: 70vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .port p {
    max-width: 70vw;
  }

  /*Buttons*/
  .butt1 {
    background-image: url(../images/clouds/cloudButton_1_mob.png);
    width: 45vw;
    height: 16.47vw;
  }

  .butt2 {
    background-image: url(../images/clouds/cloudButton_2_mob.png);
    width: 45vw;
    height: 32.69vw;
  }

  .butt3 {
    background-image: url(../images/clouds/cloudButton_3_mob.png);
    width: 45vw;
    height: 25.22vw;
  }

  .butt4 {
    background-image: url(../images/clouds/cloudButton_4_mob.png);
    width: 45vw;
    height: 21.40vw;
  }

  .butt5 {
    background-image: url(../images/clouds/cloudButton_5_mob.png);
    width: 45vw;
    height: 26.71vw;
  }

  /*School Break*/
  .schlCloud {
    background-image: url(../images/clouds/cloudSchool_mob.png);
    width: 137.3vw;
    height: 65.7vw;
    top: -10vw;
    left: -20vw;
  }

  .schoolTxt {
    padding-left: 18vw;
  }

  .schoolBr {
    width: 70vw;
    height: 101.395vw;
    background-image: url(../images/school_mob.png);
    top: 45vw;
    left: 16vw;
  }

  /*Worm Charming*/
  .wormCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 93.34vw;
    background-image: url(../images/worm/wormCover_1.jpg);
  }

  .wormCov1.trans {
    transform: rotate(-15deg) !important;
  }

  .wormCov2 {
    top: 130vw;
    left: 17vw;
    width: 70vw;
    height: 97.5vw;
    background-image: url(../images/worm/wormCover_2.jpg);
  }

  .wormCov2.trans {
    transform: rotate(5deg) !important;
  }

  .schl1 {
    height: 250vw;
  }

  .worm1 h1 {
    margin-top: 5vw;
    margin-bottom: 3vw;
  }

  .worm1 p {
    margin-bottom: 5vw;
    margin-top: 3vw;
  }

  .wormPg1_1 {
    background-image: url(../images/worm/wormPg1_1_mob.jpg);
    width: 70vw;
    height: 52.53vw;
  }

  .wormButtPg1_1 {
    margin-left: 27vw;
  }

  .wormPg1_2 {
    background-image: url(../images/worm/wormPg1_2_mob.png);
    width: 56vw;
    height: 24.11vw;
    margin-left: -23vw;
    margin-top: -10vw;
    background-size: contain !important;
  }

  .wormPg1_3 {
    background-image: url(../images/worm/wormPg1_3_mob.jpg);
    width: 70vw;
    height: 52.53vw;
    margin-top: 5vw;
  }

  .wormPg1_4 {
    background-image: url(../images/worm/wormPg1_4_mob.png);
    width: 49vw;
    height: 52.49vw;
    background-size: contain !important;
    margin-left: 34vw;
    margin-top: -17vw;
  }

  .worm2 p {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .wormPg2_1 {
    background-image: url(../images/worm/wormPg2_1_mob.png);
    width: 49vw;
    height: 67.75vw;
    margin-left: 10.5vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .wormPg2_2 {
    background-image: url(../images/worm/wormPg2_2_mob.jpg);
    width: 49vw;
    height: 68.27vw;
    margin-left: 10.5vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .wormButtPg2_1 {
    margin-left: 0vw;
  }

  .wormButtPg2_2 {
    margin-left: 27vw;
    margin-top: 2vw;
  }

  .wormPg2_3 {
    background-image: url(../images/worm/wormPg2_3_mob.jpg);
    width: 56vw;
    height: 112.01vw;
    margin-left: 7vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .worm2 .next {
    margin-left: 2vw;
  }

  /*Murmur*/
  .murCov1 {
    top: 7vw;
    left: 17vw;
    width: 70vw;
    height: 108.18vw;
    background-image: url(../images/murmur/murmurCover_1_mob.jpg);
  }

  .murCov1.trans {
    transform: rotate(5deg) !important;
  }

  .murCov2 {
    top: 130vw;
    left: 14vw;
    width: 70vw;
    height: 108.91vw;
    background-image: url(../images/murmur/murmurCover_2_mob.jpg);
  }

  .murCov2.trans {
    transform: rotate(-10deg) !important;
  }

  .murCov3 {
    top: 260vw;
    left: 13vw;
    width: 70vw;
    height: 91.323vw;
    background-image: url(../images/murmur/murmurCover_3_mob.png);
  }

  .murCov3.trans {
    transform: rotate(10deg) !important;
  }

  .schl2 {
    height: 370vw;
  }

  .murmur1 h1 {
    margin-bottom: 3vw;
  }

  .murmur1 p {
    margin-top: 3vw;
  }

  .murmurPg1_1 {
    background-image: url(../images/murmur/murmurPg1_1_mob.jpg);
    width: 32.9vw;
    height: 50.85vw;
    margin-right: 4.2vw;
    margin-top: 5vw;
  }

  .murmurPg1_2 {
    background-image: url(../images/murmur/murmurPg1_2_mob.jpg);
    width: 32.9vw;
    height: 50.85vw;
    margin-top: 5vw;
  }

  .murmurP1 {
    width: 56vw;
    margin-top: 5vw !important;
    margin-bottom: 3vw;
  }

  .murmurPg1_3 {
    background-image: url(../images/murmur/murmurPg1_3_mob.jpg);
    width: 32.9vw;
    height: 50.45vw;
    margin-right: 4.2vw;
    margin-top: 4vw;
  }

  .murmurPg1_4 {
    background-image: url(../images/murmur/murmurPg1_4_mob.jpg);
    width: 32.9vw;
    height: 58.46vw;
  }

  .murmurP2 {
    margin-top: 5vw !important;
  }

  .murButtPg1_1 {
    margin-left: 20vw;
    margin-top: 5vw;
  }

  .murButtPg1_2 {
    margin-left: -6vw;
    margin-top: -4vw;
  }

  .murButtPg1_3 {
    margin-left: -6vw;
    margin-top: 2vw;
  }

  .murmurPg1_5 {
    background-image: url(../images/murmur/murmurPg1_5_mob.jpg);
    width: 32.9vw;
    height: 45.24vw;
    margin-left: 37.1vw;
    margin-top: -40.12vw;
  }

  .murmurPg1_6 {
    background-image: url(../images/murmur/murmurPg1_6_mob.jpg);
    width: 70vw;
    height: 46.76vw;
    margin-top: 5vw;
  }

  .murmur1 .next {
    margin-left: 2vw;
    margin-top: 2vw;
  }

  .murmur2 p {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .murmurPg2_1 {
    background-image: url(../images/murmur/murmurPg2_1_mob.jpg);
    width: 70vw;
    height: 45vw;
  }

  .murmurPg2_2 {
    background-image: url(../images/murmur/murmurPg2_2_mob.jpg);
    width: 70vw;
    height: 45vw;
    margin-top: 5vw;
  }

  .murButtPg2_1 {
    margin-left: 4vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  .murmurPg2_3 {
    background-image: url(../images/murmur/murmurPg2_3_mob.jpg);
    width: 23.8vw;
    height: 47.99vw;
    margin-right: 4.2vw;
  }

  .murmurPg2_4 {
    background-image: url(../images/murmur/murmurPg2_4_mob.jpg);
    width: 42vw;
    height: 55.99vw;
  }

  .murmur2 .next {
    margin-left: -2vw;
    margin-top: 0vw;
  }

  .murmur3 h1 {
    margin-bottom: 3vw;
  }

  .murmur3 p {
    margin-bottom: 3vw;
  }

  .murButtPg3_1 {
    margin-bottom: 3vw;
    margin-left: 3vw;
  }

  .murmurPg3_1 {
    background-image: url(../images/murmur/murmurPg3_1_mob.png);
    width: 70vw;
    height: 53.68vw;
    margin-bottom: 5vw;
  }

  .murmurPg3_2 {
    background-image: url(../images/murmur/murmurPg3_2_mob.jpg);
    width: 49vw;
    height: 50.75vw;
    margin-bottom: 5vw;
    margin-left: 19vw;
  }

  .murmurPg3_3 {
    background-image: url(../images/murmur/murmurPg3_3_mob.jpg);
    width: 49vw;
    height: 23.80vw;
    margin-bottom: 5vw;
    margin-left: 3vw;
  }

  .murmurPg3_4 {
    background-image: url(../images/murmur/murmurPg3_4_mob.jpg);
    width: 70vw;
    height: 46.73vw;
  }

  .murmur3 .next {
    margin-top: 2vw;
    margin-left: 3vw;
  }

  /*Speks Rebrand*/
  .speksCov1 {
    top: 8vw;
    left: 14vw;
    width: 70vw;
    height: 124.44vw;
    background-image: url(../images/speks/speksCover_1_mob.jpg);
  }

  .speksCov1.trans {
    transform: rotate(5deg) !important;
  }

  .speksCov2 {
    top: 147vw;
    left: 14vw;
    width: 70vw;
    height: 52.53vw;
    background-image: url(../images/speks/speksCover_2_mob.jpg);
  }

  .speksCov2.trans {
    transform: rotate(2deg) !important;
  }

  .speksCov3 {
    top: 220vw;
    left: 13vw;
    width: 70vw;
    height: 94.8vw;
    background-image: url(../images/speks/speksCover_3_mob.png);
  }

  .speksCov3.trans {
    transform: rotate(-2deg) !important;
  }

  .schl3 {
    height: 330vw;
  }

  .speks1 h1 {
    margin-bottom: 3vw;
  }

  .speks1 p {
    margin-bottom: 4vw;
  }

  .speksPg1_1 {
    width: 70vw;
    height: 39.36vw;
    margin-top: 3vw;
    margin-bottom: 5vw;
    pointer-events: auto
  }

  .speksPg1_1 {
    position: relative;
    z-index: 10;
    pointer-events: auto;
  }


  .speksPg1_2 {
    background-image: url(../images/speks/speksPg1_2_mob.jpg);
    width: 70vw;
    height: 39.36vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  .speksPg1_3 {
    background-image: url(../images/speks/speksPg1_3_mob.png);
    width: 32.9vw;
    height: 31.06vw;
    margin-right: 4.2vw;
  }

  .speksPg1_4 {
    background-image: url(../images/speks/speksPg1_4_mob.jpg);
    width: 32.9vw;
    height: 42.57vw;

  }

  .speksPg1_5 {
    background-image: url(../images/speks/speksPg1_5_mob.jpg);
    width: 70vw;
    height: 45.30vw;
    margin-bottom: 5vw;
    margin-top: 5vw;
  }

  .speksPg1_6 {
    background-image: url(../images/speks/speksPg1_6_mob.jpg);
    width: 70vw;
    height: 45.3vw;
    margin-bottom: 2vw;
  }

  .speks2 h1 {
    margin-bottom: 3vw;
  }

  .speks2 p {
    margin-bottom: 5vw;
  }

  .speksPg2_1 {
    background-image: url(../images/speks/speksPg2_1_mob.jpg);
    width: 63vw;
    height: 47.23vw;
    margin-left: 3.5vw;
    margin-bottom: 5vw;
  }

  .speksPg2_2 {
    background-image: url(../images/speks/speksPg2_2_mob.jpg);
    width: 63vw;
    height: 47.23vw;
    margin-left: 3.5vw;
    margin-bottom: 5vw;
  }

  .speksPg2_3 {
    background-image: url(../images/speks/speksPg2_3_mob.jpg);
    width: 32.9vw;
    height: 42.57vw;
    margin-right: 4.2vw;
  }

  .speksPg2_4 {
    background-image: url(../images/speks/speksPg2_4_mob.jpg);
    width: 32.9vw;
    height: 42.57vw;
  }

  .speksPg2_5 {
    background-image: url(../images/speks/speksPg2_5_mob.png);
    width: 32.9vw;
    height: 47vw;
    margin-top: -5vw;
  }

  .speksPg2_6 {
    background-image: url(../images/speks/speksPg2_6_mob.png);
    width: 32.9vw;
    height: 32.9vw;
    margin-left: -23vw;
    margin-top: 19vw;
  }

  .speks2 .next {
    margin-top: -43vw;
    margin-left: 30vw;
  }

  .speks3 h1 {
    margin-bottom: 3vw;
  }

  .speks3 p {
    margin-bottom: 5vw;
  }

  .speksButtPg3_1 {
    margin-left: 6vw;
    margin-bottom: 4vw;
  }

  .speksPg3_1 {
    background-image: url(../images/speks/speksPg3_1_mob.png);
    width: 70vw;
    height: 49.6vw;
    margin-bottom: 5vw;
  }

  .speksPg3_2 {
    background-image: url(../images/speks/speksPg3_2_mob.png);
    width: 32.9vw;
    height: 46.5vw;
    margin-right: 4.2vw;
  }

  .speksPg3_3 {
    background-image: url(../images/speks/speksPg3_3_mob.png);
    width: 32.9vw;
    height: 46vw;
  }

  .speksPg3_4 {
    background-image: url(../images/speks/speksPg3_4_mob.png);
    width: 32.9vw;
    height: 44.6vw;
    margin-top: 3vw;
  }

  .speksPg3_5 {
    background-image: url(../images/speks/speksPg3_5_mob.png);
    width: 32.9vw;
    height: 30.1vw;
    margin-right: 4.2vw;
    margin-top: 3vw;
  }

  .speksPg3_6 {
    background-image: url(../images/speks/speksPg3_6_mob.png);
    width: 32.9vw;
    height: 44.1vw;
    margin-top: 3vw;
    margin-left: 13vw;
  }

  /*Tunnel Vision Zines*/
  .tunCov1 {
    top: 10vw;
    left: 15vw;
    width: 70vw;
    height: 49.81vw;
    background-image: url(../images/tunnel/tunnelCover_1_mob.png);
  }

  .tunCov1.trans {
    transform: rotate(-7deg) !important;
  }

  .tunCov2 {
    top: 80vw;
    left: 16vw;
    width: 70vw;
    height: 98.29vw;
    background-image: url(../images/tunnel/tunnelCover_2_mob.png);
  }

  .tunCov2.trans {
    transform: rotate(5deg) !important;
  }

  .schl4 {
    height: 200vw;
  }

  .tunnel1 h1 {
    margin-bottom: 3vw;
  }

  .tunnel1 p {
    margin-bottom: 5vw;
  }

  .tunnelPg1_1 {
    background-image: url(../images/tunnel/tunnelPg1_1_mob.png);
    width: 52.9vw;
    height: 33.2vw;
    margin-bottom: -3vw;
    margin-left: 29vw;
  }

  .tunnelPg1_2 {
    background-image: url(../images/tunnel/tunnelPg1_2_mob.png);
    width: 70vw;
    height: 50vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_3 {
    background-image: url(../images/tunnel/tunnelPg1_3_mob.png);
    width: 70vw;
    height: 50.4vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_4 {
    background-image: url(../images/tunnel/tunnelPg1_4_mob.png);
    width: 32.9vw;
    height: 33.1vw;
    margin-left: 0vw;
  }

  .tunButtPg1_1 {
    margin-left: 30vw;
    margin-top: -30vw;
    margin-bottom: 17vw;
  }

  .tunnelPg1_5 {
    background-image: url(../images/tunnel/tunnelPg1_5_mob.png);
    width: 70vw;
    height: 48.4vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_6 {
    background-image: url(../images/tunnel/tunnelPg1_6_mob.png);
    width: 70vw;
    height: 50.2vw;
    margin-bottom: 3vw;
  }

  .tunnel1 .next {
    margin-left: 3vw;
  }

  .tunnel2 h1 {
    margin-bottom: 3vw;
  }

  .tunnel2 p {
    margin-bottom: 5vw;
  }

  .tunnelPg2_1 {
    background-image: url(../images/tunnel/tunnelPg2_1_mob.png);
    width: 32.9vw;
    height: 44.5vw;
    transform: rotate(-100deg);
    margin-left: 26vw;
    margin-bottom: -5vw;
  }

  .tunnelPg2_2 {
    background-image: url(../images/tunnel/tunnelPg2_2_mob.png);
    width: 32.9vw;
    height: 46.2vw;
    margin-right: 4.2vw;
  }

  .tunButtPg2_1 {
    margin-left: 33vw;
    margin-top: -14vw;
    margin-bottom: 3vw;
  }

  .tunnelPg2_3 {
    background-image: url(../images/tunnel/tunnelPg2_3_mob.jpg);
    width: 70vw;
    height: 53.1vw;
  }

  .tunnelPg2_4 {
    background-image: url(../images/tunnel/tunnelPg2_4_mob.png);
    width: 32.9vw;
    height: 31.6vw;
  }

  .tunnelPg2_5 {
    background-image: url(../images/tunnel/tunnelPg2_5_mob.png);
    width: 70vw;
    height: 46.7vw;
  }

  .tunnelPg2_6 {
    background-image: url(../images/tunnel/tunnelPg2_6_mob.png);
    width: 70vw;
    height: 37.1vw;
  }

  .tunnel2 .next {
    margin-top: 2vw;
    margin-left: 11vw;
  }


  /*A Tempting Meditation*/
  .tempCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 95.49vw;
    background-image: url(../images/temp/tempCover_1_mob.jpg);
  }

  .tempCov1.trans {
    transform: rotate(2deg) !important;
  }

  .schl5 {
    height: 120vw;
  }

  .temp h1 {
    margin-bottom: 3vw;
  }

  .temp p {
    margin-bottom: 5vw;
  }

  .temp_1 {
    background-image: url(../images/temp/temp_1_mob.jpg);
    width: 70vw;
    height: 39.6vw;
    margin-bottom: 3vw;
    background-size: contain !important;
  }

  .temp_2 {
    background-image: url(../images/temp/temp_2_mob.jpg);
    width: 70vw;
    height: 39.7vw;
    margin-bottom: 3vw;
    background-size: contain !important;
  }

  .temp_3 {
    background-image: url(../images/temp/temp_3_mob.jpg);
    width: 70vw;
    height: 39.7vw;
    background-size: contain !important; 
  }

  .tempButt_1 {
    margin-left: 8vw;
    margin-top: 3vw;
  }

  .tempButt_2 {
    margin-left: 28vw;
    margin-top: -4vw;
    margin-bottom: 5vw;
  }

  .temp_4 {
    width: 49vw;
    height: 27.6vw; 
    margin-left: 21vw;
    margin-bottom: 3vw;
  }

  .temp_5 {
    width: 49vw;
    height: 27.6vw; 
    margin-bottom: 3vw;
  }

  .temp_6 {
    width: 49vw;
    height: 27.6vw;
    margin-left: 21vw;
    margin-bottom: 4vw; 
  }

  /*Professional Break*/
  .profCloud {
    background-image: url(../images/clouds/cloudProf_mob.png);
    width: 137.3vw;
    height: 66.33vw;
    top: -12vw;
    left: -26vw;
  }

  .profTxt {
    padding-left: 16vw;
  }

  .profBr {
    top: 46vw;
    left: 15vw;
    width: 70vw;
    height: 91.46vw;
    background-image: url(../images/professional_mob.png);
    transform: rotate(-7deg);
  }

  /*Civil Liberty Extravaganza*/
  .extravCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 107.90vw;
    background-image: url(../images/extrav/extravCover_1_mob.jpg);
  }

  .extravCov1.trans {
    transform: rotate(-5deg) !important;
  }

  .extravCov2 {
    top: 140vw;
    left: 17vw;
    width: 70vw;
    height: 47.25vw;
    background-image: url(../images/extrav/extravCover_2_mob.jpg);
  }

  .extravCov2.trans {
    transform: rotate(3deg) !important;
  }

  .prof1 {
    height: 210vw;
  }

  .extrav1 h1 {
    margin-bottom: 3vw;
  }

  .extrav1 p {
    margin-bottom: 5vw;
  }

  .extravPg1_1 {
    background-image: url(../images/extrav/extravPg1_1_mob.jpg);
    width: 56vw;
    height: 86.4vw;
    margin-bottom: 3vw;
    margin-left: 7vw;
  }

  .extravPg1_2 {
    background-image: url(../images/extrav/extravPg1_2_mob.jpg);
    width: 56vw;
    height: 86.4vw;
    margin-bottom: 3vw;
    margin-left: 7vw;
  }

  .extrav1 .next {
    margin-left: 10vw;
  }

  .extrav2 h1 {
    margin-bottom: 3vw;
  }

  .extrav2 p {
    margin-bottom: 3vw;
  }

  .extravPg2_1 {
    background-image: url(../images/extrav/extravPg2_1_mob.jpg);
    width: 70vw;
    height: 47.3vw;
    margin-bottom: 3vw;
  }

  .extravPg2_2 {
    background-image: url(../images/extrav/extravPg2_2_mob.jpg);
    width: 70vw;
    height: 39.3vw;
    margin-bottom: 3vw;
  }

  .extravPg2_3 {
    background-image: url(../images/extrav/extravPg2_3_mob.jpg);
    width: 70vw;
    height: 39.3vw;
    margin-bottom: 3vw;
  }

  .extrav2 .next {
    margin-left: 4vw;
  }

  /*MSCII Banner*/
  .banCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 112.08vw;
    background-image: url(../images/banner/bannerCover_1_mob.png);
  }

  .banCov1.trans {
    transform: rotate(-3deg) !important;
  }

  .prof2 {
    height: 140vw;
  }

  .banner h1 {
    margin-bottom: 3vw;
  }

  .banner p {
    margin-bottom: 5vw;
  }

  .banner_1 {
    background-image: url(../images/banner/banner_1_mob.png);
    width: 49vw;
    height: 86vw;
    margin-bottom: 3vw;
    margin-left: 10.5vw;
  }

  .banner_2 {
    background-image: url(../images/banner/banner_2_mob.png);
    width: 70vw;
    height: 38.6vw;
  }

  /*MSCII Handouts*/
  .handCov1 {
    top: 10vw;
    left: 12vw;
    width: 70vw;
    height: 90.59vw;
    background-image: url(../images/handout/handoutCover_1_mob.jpg);
  }

  .handCov1.trans {
    transform: rotate(2deg) !important;
  }

  .prof3 {
    height: 110vw;
  }

  .handout h1 {
    margin-bottom: 3vw;
  }

  .handout p {
    margin-bottom: 5vw;
  }

  .handout_1 {
    background-image: url(../images/handout/handout_1_mob.jpg);
    width: 49vw;
    height: 63.5vw;
    transform: rotate(5deg);
    margin-bottom: 6vw;
    margin-left: 10.5vw;
  }

  .handout_2 {
    background-image: url(../images/handout/handout_2_mob.jpg);
    width: 49vw;
    height: 63.5vw;
    transform: rotate(10deg);
    margin-bottom: 8vw;
    margin-left: 10.5vw;
  }

  .handout_3 {
    background-image: url(../images/handout/handout_3_mob.jpg);
    width: 49vw;
    height: 63.5vw;
    transform: rotate(-6deg);
    margin-bottom: 6vw;
    margin-left: 10.5vw;
  }

  .handout_4 {
    background-image: url(../images/handout/handout_4_mob.jpg);
    width: 49vw;
    height: 63.5vw;
    transform: rotate(3deg);
    margin-left: 10.5vw;
  }

  /*Playground Break*/
  .playCloud {
    background-image: url(../images/clouds/cloudPlay_mob.png);
    width: 157.3vw;
    height: 67.38vw;
    top: -16vw;
    left: -31vw;
  }

  .playTxt {
    padding-left: 20vw;
  }

  .playBr {
    width: 70vw;
    height: 90.64vw;
    background-image: url(../images/playground_mob.png);
    background-size: 100%;
    transform: rotate(12deg);
    top: 43vw;
    left: 16vw;
  }

  /*Swimming Ring*/
  .swimCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 100.51vw;
    background-image: url(../images/swim/swimCover_1_mob.jpg);
  }

  .swimCov1.trans {
    transform: rotate(3deg) !important;
  }

  .play1 {
    height: 130vw;
  }

  .swim h1 {
    margin-bottom: 3vw;
  }

  .swim p {
    margin-bottom: 5vw;
  }

  .swim_1 {
    background-image: url(../images/swim/swim_1_mob.jpg);
    width: 56vw;
    height: 56.1vw;
    margin-bottom: 3vw;
    margin-left: 7vw;
  }

  .swim_2 {
    background-image: url(../images/swim/swim_2_mob.jpg);
    width: 56vw;
    height: 56vw;
    margin-left: 7vw;
  }

  /*GYAOOB*/
  .gyaCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 43.67vw;
    background-image: url(../images/gyaoob/gyaoobCover_1_mob.png);
  }

  .gyaCov1.trans {
    transform: rotate(-3deg) !important;
  }

  .gyaCov2 {
    top: 70vw;
    left: 12vw;
    width: 70vw;
    height: 98.25vw;
    background-image: url(../images/gyaoob/gyaoobCover_2_mob.png);
  }

  .gyaCov2.trans {
    transform: rotate(5deg) !important;
  }

  .play2 {
    height: 190vw;
  }

  .gyaoob1 h1 {
    margin-bottom: 3vw;
  }

  .gyaoob1 p {
    margin-bottom: 5vw;
  }

  .gyaoobPg1_1 {
    background-image: url(../images/gyaoob/gyaoobPg1_1_mob.jpg);
    width: 70vw;
    height: 43.5vw;
    margin-bottom: 5vw;
  }

  .gyaButtPg1_1 {
    margin-left: 6vw;
    margin-bottom: 2vw;
    margin-top: -4vw;
  }

  .gyaoobPg1_2 {
    background-image: url(../images/gyaoob/gyaoobPg1_2_mob.jpg);
    width: 70vw;
    height: 28.2vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_3 {
    background-image: url(../images/gyaoob/gyaoobPg1_3_mob.jpg);
    width: 70vw;
    height: 28.2vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_4 {
    background-image: url(../images/gyaoob/gyaoobPg1_4_mob.jpg);
    width: 70vw;
    height: 23.1vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_5 {
    background-image: url(../images/gyaoob/gyaoobPg1_5_mob.jpg);
    width: 70vw;
    height: 22.7vw;
    margin-bottom: 3vw;
  }

  .gyaoob1 .next {
    margin-left: 5vw;
  }

  .gyaoob2 h1 {
    margin-bottom: 3vw;
  }

  .gyaoob2 p {
    margin-bottom: 5vw;
  }

  .gyaoobPg2_1 {
    background-image: url(../images/gyaoob/gyaoobPg2_1_mob.jpg);
    width: 56vw;
    height: 35.4vw;
    margin-bottom: 3vw;
    margin-left: 7vw;
  }

  .gyaoobPg2_2 {
    background-image: url(../images/gyaoob/gyaoobPg2_2_mob.png);
    width: 56vw;
    height: 73.4vw;
    margin-bottom: 3vw;
    margin-left: 7vw;
  }

  .gyaoobPg2_3 {
    background-image: url(../images/gyaoob/gyaoobPg2_3_mob.png);
    width: 56vw;
    height: 78.6vw;
    margin-left: 7vw;
  }

  .gyaoob2 .next {
    margin-left: 12vw;
    margin-top: 3vw;
  }

  /*Tooth*/
  .toothCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 94.44vw;
    background-image: url(../images/tooth/toothCover_1_mob.jpg);
  }

  .toothCov1.trans {
    transform: rotate(-5deg) !important;
  }

  .play3 {
    height: 130vw;
  }

  .tooth h1 {
    margin-bottom: 3vw;
  }

  .tooth p {
    margin-bottom: 5vw;
  }

  .tooth_1 {
    background-image: url(../images/tooth/tooth_1_mob.jpg);
    width: 70vw;
    height: 46.7vw;
    margin-bottom: 3vw;
  }

  .tooth_2 {
    background-image: url(../images/tooth/tooth_2_mob.jpg);
    width: 70vw;
    height: 70vw;
  }

  /*Awake*/
  .awakeCov1 {
    top: 10vw;
    left: 14vw;
    width: 70vw;
    height: 54.66vw;
    background-image: url(../images/awake/awakeCover_1_mob.png);
  }

  .awakeCov1.trans {
    transform: rotate(3deg) !important;
  }

  .play4 {
    height: 80vw;
  }

  .awake h1 {
    margin-bottom: 3vw;
  }

  .awake p {
    margin-bottom: 5vw;
  }

  .awake_1 {
    background-image: url(../images/awake/awake_1_mob.png);
    width: 70vw;
    height: 54.67vw;
  }

  /*Footer*/
  footer {
    background-image: url(../images/footerBG_mob.png);
    height: 190vw;
    padding-top: 70vw;
    padding-left: 10vw;
  }

  .footP1 {
    width: 80vw;
  }

  .footButt1 {
    margin-left: -9vw;
    margin-top: 7vw;
  }

  .footButt2 {
    margin-left: 44vw;
    margin-top: -22vw;
  }

  .footButt3 {
    margin-left: 14vw;
    margin-top: -8vw;
  }

  .footHead {
    width: 20vw;
    height: 20vw;
    margin-top: 5vw;
    margin-right: 5vw;
  }

  .footIndex {
    background-image: url(../images/heads/headLogo_mob.png);
  }

  .footAbout {
    background-image: url(../images/heads/headLogo_2_mob.png);
  }

  .footCon {
    background-image: url(../images/heads/headLogo_3_mob.png);
  }

  /*About*/
  .extIntro {
    background: transparent !important;
  }

  .heroAbtCld1 {
    background-image: url(../images/clouds/cloudAboutHero_1_mob.png);
    width: 100vw;
    height: 64.92vw;
    left: 0vw;
    top: calc(50% - 32vw);
  }

  .heroAbtCld2 {
    background-image: url(../images/clouds/cloudAboutHero_2_mob.png);
    width: 90vw;
    height: 55.08vw;
    left: 48vw;
    top: calc(50% - 80vw);
  }

  .heroAbtCld3 {
    background-image: url(../images/clouds/cloudAboutHero_3_mob.png);
    width: 90vw;
    height: 49.88vw;
    left: -40vw;
    top: calc(50% + 25vw);
  }

  .abtHolder {
    height: 210vw;
  }

  .abtP1 {
    width: 80vw;
  }

  .abtCloud1 {
    background-image: url(../images/clouds/cloudAbout_1_mob.png);
    width: 180vw;
    height: 80vw;
    left: -42.5vw;
    top: -12vw;
    padding-top: 10vw;
  }

  .abtCloud2 {
    background-image: url(../images/clouds/cloudAbout_2_mob.png);
    width: 160vw;
    height: 100vw;
    left: -57.5vw;
    top: 59vw;
    padding-bottom: 12vw;
    padding-left: 30vw;
  }

  .abtCloud3 {
    background-image: url(../images/clouds/cloudAbout_3_mob.png);
    width: 140vw;
    height: 88vw;
    left: -22.5vw;
    top: 134vw;
    padding-bottom: 15vw;
    padding-right: 80vw;
  }

  .abtCloud4 {
    background-image: url(../images/clouds/cloudAbout_4_mob.png);
    width: 160vw;
    height: 60vw;
    left: -32.5vw;
    top: 205vw;
    padding-bottom: 20vw;
  }

  .abtCloud5 {
    background-image: url(../images/clouds/cloudAbout_5_mob.png);
    width: 190vw;
    height: 80vw;
    left: -47.5vw;
    top: 247vw;
    padding-bottom: 39vw;
    padding-right: 130vw;
  }

  .abtButt {
    background-image: url(../images/clouds/cloudAbtButt_mob.png);
    width: 45vw;
    height: 32.92vw;
    left: 3vw;
    top: 334vw;
    padding-right: 29vw;
    z-index: 1;
  }

  /*Contact*/
  .heroContCld1 {
    background-image: url(../images/clouds/cloudContactHero_1_mob.png);
    width: 110vw;
    height: 51.41vw;
    left: 8vw;
    top: calc(50% - 79vw);
  }

  .heroContCld2 {
    background-image: url(../images/clouds/cloudContactHero_2_mob.png);
    width: 100vw;
    height: 87.125vw;
    left: 0vw;
    top: calc(50% - 35vw);
  }

  .heroContCld3 {
    background-image: url(../images/clouds/cloudContactHero_3_mob.png);
    width: 90vw;
    height: 52.88vw;
    left: -13vw;
    top: calc(50% + 36vw);
  }

  #contHolder {
    height: 110vw;
  }

  .contP1 {
    width: 70vw;
  }

  .cont1 {
    background-image: url(../images/clouds/cloudContact_1_mob.png);
    width: 93.37vw;
    height: 37.3vw;
    left: -5vw;
    top: 0vw;
    padding-top: 23vw;
    padding-left: 28vw;
  }

  .cont2 {
    background-image: url(../images/clouds/cloudContact_2_mob.png);
    width: 60vw;
    height: 38.31vw;
    left: 33vw;
    top: 84vw;
    padding-bottom: 6vw;
    padding-right: 4vw;
  }

  .cont3 {
    background-image: url(../images/clouds/cloudContact_3_mob.png);
    width: 45vw;
    height: 22.56vw;
    left: 6vw;
    top: 60vw;
    padding-right: 5vw;
  }

  .cont4 {
    background-image: url(../images/clouds/cloudContact_4_mob.png);
    width: 45vw;
    height: 33.24vw;
    left: 3vw;
    top: 120vw;
    padding-left: 4vw;
  }

  .cont5 {
    background-image: url(../images/clouds/cloudContact_5_mob.png);
    width: 45vw;
    height: 23.93vw;
    left: 47vw;
    top: 152vw;
  }

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px){
  /*Body & Parent*/
  .sticky-wrapper {
    overflow-x: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    opacity: 0;
    background-attachment: scroll;
  }

  .deskFlex {
    display: flex; 
  }

  /*Fonts & Text*/
  h1 {
    font-size: 2vw;
  }

  h2 {
    font-size: 5vw;
  }

  p {
    font-size: 1vw;
    line-height: 1.2vw;
  }

  /*Loading Screen*/
  h3 {
    font-size: 5vw;
    top: calc(50% - 3vw);
  }

  .loadTxt {
    width: 60vw;
  }

  .load1 {
    left: calc(50% - 25vw);
  }

  .load2 {
    left: calc(50% - 25vw);
  }

  .loadCloud {
    background-image: url(../images/clouds/cloudLoad.png);
    width: 90vw;
    height: 42.12vw;
    top: calc(50% - 21.06vw);
    left: calc(50% - 45vw);
  }

  .ball {
    width: 10vw;
    height: 10vw;
  }

  .ball1 {
    background-image: url(../images/heads/Head_1.png);
  }

  .ball2 {
    background-image: url(../images/heads/happyHead_1.png);
  }

  .ball3 {
    background-image: url(../images/heads/questHead_1.png);
  }

  /*Header*/
  #header {
    top: 0;
    left: 0;
    min-width: 20px;
    height: 10vw;
  }

  .heroHead {
    width: 5vw;
    height: 5vw;
    margin: 0.5vw;
  }

  .heroHead:hover {
    animation: spin 7s linear infinite;
  }

  .headerContainer {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .headerTxt {
    font-size: 2vw;
  }

  .headerTxt:nth-of-type(1) {
    transition-delay: 0.1s, 0.1s; /* transform delay, opacity delay */
    transform: translateX(-200%);
  }

  .headerTxt:nth-of-type(2) {
    transition-delay: 0.3s, 0.3s;
    transform: translateX(-240%);
  }

  .headerTxt:nth-of-type(3) {
    transition-delay: 0.5s, 0.5s;
    transform: translateX(-280%);
  }

  #header:hover .headerTxt {
    transform: translateX(0);
    opacity: 1;
  }

  .heroHeadIndex {
    background-image: url(../images/heads/headLogo.png);
  }

  .heroHeadAbout {
    background-image: url(../images/heads/headLogo_2.png);
  }

  .heroHeadCon {
    background-image: url(../images/heads/headLogo_3.png);
  }

  .cloudHeader {
    z-index: -1;
    background-image: url(../images/clouds/cloudHeader.png);
    top: -1vw;
    left: -9vw;
    width: 47vw;
    height: 11vw;
    opacity: 0;
    transition: opacity 1s ease;
  }

  #header:hover .cloudHeader {
    opacity: 1;
    transition-delay: 0.8s; /* adjust to come after last text item */
  }

  /*Titles*/
  .mobHide.covTitles {
    position: fixed;
    top: 1vw;
    right: 1vw;
    z-index: 1000;
    width: 20vw;
    height: 5vw;
  }

  .title {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      display: none;
  }

  /*Hero*/
  #rotaHead {
    max-height: 35vw;
  }

  .headTxt {
    top: calc(50% - 25vw);
    left: calc(50% - 25vw);
    width: 50vw;
    height: 50vw;
  }

  .heroCld2 {
    background-image: url(../images/clouds/cloudHome_2.png);
    width: 40vw;
    height: 39.619vw;
    left: 56vw;
    top: calc(50% - 20vw);
  }

  .heroCld1 {
    background-image: url(../images/clouds/cloudHome_1.png);
    width: 50vw;
    height: 23.787vw;
    left: 1vw;
    top: calc(50% - 25vw);
  }

  .heroCld3 {
    background-image: url(../images/clouds/cloudHome_3.png);
    width: 40vw;
    height: 26.819vw;
    left: 20vw;
    top: calc(50% - 2vw);
  }

  /*Intro*/
  #intro {
    height: 100vw;
  }

  #intro p {
    width: 30vw;
    letter-spacing: 0.1vw;
    line-height: 1.3vw;
  }

  #intro h1 {
    margin-left: 37vw;
    padding-top: 15vw;
  }

  .introP1 {
    padding-top: 14vw;
    padding-left: 21vw;
  }

  .introP2 {
    padding-top: 13vw;
    padding-left: 54vw;
  }

  .inroCld1 {
    background-image: url(../images/clouds/cloudIntro_1.png);
    width: 20vw;
    height: 12.411vw;
    left: 37vw;
    top: 9vw;
  }

  .inroCld2 {
    background-image: url(../images/clouds/cloudIntro_2.png);
    width: 90vw;
    height: 26.328vw;
    left: 5vw;
    top: 18vw;
  }

  .inroCld3 {
    background-image: url(../images/clouds/cloudIntro_3.png);
    width: 60vw;
    height: 32.414vw;
    left: 35vw;
    top: 43vw;
  }

  .introBut {
    top: 65vw;
    left: 14vw;
    font-size: 1.5vw;
  }

  /*Arms*/
  .armHolder, .pushHolder {
    transform: translateZ(0);
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .arm {
    transform: translateZ(0);
    position: absolute;
    width: auto;
    height: 90vh;
    top: 10vh;
    z-index: 2;
  }

  #leftArm {
    position: absolute;
    bottom: -3vw;
    left: -3vw;
    transform-origin: bottom left;
    width: auto;
    height: 90vh;
  }

  #rightArm {
    position: absolute;
    bottom: -3vw;
    right: -3vw;
    transform-origin: bottom right;
    width: auto;
    height: 90vh;
  }

  /*Fingers*/
  .fingerHolder {
    display: none;
    width: 0vw;
    height: 0vw;
  }

  /*Sections*/
  .sec {
    width: 100vw;
    height: calc(50vw + 400vh);
    margin-bottom: 50vh;
  }

  .stopper {
    width: 100vw;
    height: 200vh;
    position: absolute;
  }

  .inOut {
    width: 100vw;
    height: 30vh;
    left: 0;
    position: absolute;
  }

  .topIn {
    bottom: 30vh;
  }

  .topOut {
    bottom: 80vh;
  }

  .botIn {
    top: 0;
  }

  .botOut {
    top: 50vh;
  }

  /*Objects*/
  #top-detector {
    position: fixed; /* Changed from sticky */
    top: 0;
    height: 10vh;
    width: 100%;
    z-index: 100;
    pointer-events: none;
    background: transparent;
  }

  #bot-detector {
    position: fixed;
    bottom: 0;
    height: 10vh;
    width: 100%;
    z-index: 100;
    pointer-events: none;
    background: transparent;
  }

  .div {
    top: 100vh;
    left: 37vw;
  }

  .div.reset {
    top: calc(50vh - 10vw);
    left: 100%;
    transition: top 0.5s ease, transform 0.5s ease;
  }

  /*Table of Context*/
  .school {
    width: 26vw;
    height: 37.661vw;
    background-image: url(../images/school.png);
  }

  .professional {
    width: 26vw;
    height: 33.97vw;
    background-image: url(../images/professional.png);
  }

  .playground {
    width: 26vw;
    height: 33.6466vw;
    background-image: url(../images/playground.png);
  }

  .school.animate {
    animation: comeInSch 2s ease-out forwards;
  }

  .professional.animate {
    animation: comeInProf 2s ease-out forwards;
  }

  .playground.animate {
    animation: comeInPlay 2s ease-out forwards;
  }

  @keyframes comeInSch {
    0%   {left:37vw; top:100vh;}
    100% {left:5.5vw; top:calc(50vh - 18.8305vw);}
  }

  @keyframes comeInProf {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 16.985vw);}
  }

  @keyframes comeInPlay {
    0%   {left:37vw; top:100vh;}
    100% {left:68.5vw; top:calc(50vh - 16.8233vw);}
  }

  .tblButt {
    height: 2vw;
  }

  .tblButt:hover {
    opacity: 1 !important;
  }

  .schlButt1 {
    width: 15vw;
    margin-left: 6vw;
    margin-top: 18.5vw;
    background-image: url(../images/table/highlight_4.png);
  }

  .schlButt2 {
    width: 11vw;
    margin-left: 6vw;
    margin-top: 1vw;
    background-image: url(../images/table/highlight_2.png);
  }

  .schlButt3 {
    width: 15vw;
    margin-left: 6vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_6.png);
  }

  .schlButt4 {
    width: 18vw;
    margin-left: 7vw;
    margin-top: 1vw;
    background-image: url(../images/table/highlight_5.png);
  }

  .schlButt5 {
    width: 17vw;
    margin-left: 7vw;
    margin-top: 1vw;
    background-image: url(../images/table/highlight_8.png);
  }

  .profButt1 {
    width: 18vw;
    height: 4.5vw;
    margin-left: 3vw;
    margin-top: 6vw;
    background-image: url(../images/table/highlight_2.png);
  }

  .profButt2 {
    width: 17vw;
    margin-left: 3.2vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_5.png);
  }

  .profButt3 {
    width: 15vw;
    height: 3vw;
    margin-left: 3.7vw;
    margin-top: 1vw;
    background-image: url(../images/table/highlight_3.png);
  }

  .playButt1 {
    width: 10vw;
    height: 4.2vw;
    margin-left: 14vw;
    margin-top: .8vw;
    background-image: url(../images/table/highlight_7.png);
  }

  .playButt2 {
    width: 11vw;
    height: 2.5vw;
    margin-left: 14vw;
    margin-top: 1.8vw;
    background-image: url(../images/table/highlight_4.png);
  }

  .playButt3 {
    width: 11vw;
    height: 2.8vw;
    margin-left: 14vw;
    margin-top: 2.5vw;
    background-image: url(../images/table/highlight_6.png);
  }

  .playButt4 {
    width: 7vw;
    height: 2.4vw;
    margin-left: 14.2vw;
    margin-top: 2vw;
    background-image: url(../images/table/highlight_8.png);
  }

  .div.animate .tblButt:nth-child(1) {
    animation-delay: 2s;
  }
  .div.animate .tblButt:nth-child(2) {
    animation-delay: 3s;
  }
  .div.animate .tblButt:nth-child(3) {
    animation-delay: 4s;
  }
  .div.animate .tblButt:nth-child(4) {
    animation-delay: 5s;
  }
  .div.animate .tblButt:nth-child(5) {
    animation-delay: 6s;
  }

  /*Section Breaks*/
  .secBr {
    width: 100%;
    margin-top: 15vw;
    margin-bottom: 40vw;
  }

  .secBrPar {
    width: 38.09vw;
  }


  /*Portfolio Piece Popup*/
  .hide {
    visibility: hidden;
    position: absolute;
  }

  .x {
    width: 3vw;
    height: 3vw;
    right: 1vw;
    top: 1vw;
  }

  .portHolder {
/*    width: 80vw;
    height: 80vh;
    padding-top: 5vw;
    padding-bottom: 2.5vw;
    background-image: url(../images/popupBg.jpg);
    top: 5vh;
    left: 10vw;*/
    width: 62.7vw;
    height: 70vh;
    padding-top: 5vw;
    padding-bottom: 2.5vw;
    background-image: url(../images/popupBg.jpg);
    top: 10vh;
    left: 18.65vw;
  }

  .port {
/*    width: 75vw;
    height: 80vh;*/
    width: 62.7vw;
    height: 70vh;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
  }

  .port p {
    max-width: 57.7vw;
  }

  /*Buttons*/
  .butt1 {
    background-image: url(../images/clouds/cloudButton_1.png);
    width: 20vw;
    height: 7.32vw;
  }

  .butt2 {
    background-image: url(../images/clouds/cloudButton_2.png);
    width: 20vw;
    height: 14.53vw;
  }

  .butt3 {
    background-image: url(../images/clouds/cloudButton_3.png);
    width: 20vw;
    height: 11.21vw;
  }

  .butt4 {
    background-image: url(../images/clouds/cloudButton_4.png);
    width: 20vw;
    height: 9.51vw;
  }

  .butt5 {
    background-image: url(../images/clouds/cloudButton_5.png);
    width: 20vw;
    height: 11.87vw;
  }

  /*School Break*/
  .schlCloud {
    background-image: url(../images/clouds/cloudSchool.png);
    width: 87.30vw;
    height: 41.7vw;
    top: -10vw;
    left: 5vw;
  }

  .schoolTxt {
    padding-left: 25vw;
  }

  .schoolBr {
    width: 26vw;
    height: 37.661vw;
    background-image: url(../images/school.png);
    top: 3vw;
    left: 60vw;
  }

  /*Worm Charming*/
  .sw1.active {
    background-color: rgba(255, 0, 0, 0.2);
  }

  .wormCov1 {
    width: 26vw;
    height: 34.67vw;
    background-image: url(../images/worm/wormCover_1.jpg);
    transform: rotate(-15deg);
  }

  .wormCov2 {
    width: 26vw;
    height: 36.25vw;
    background-image: url(../images/worm/wormCover_2.jpg);
    transform: rotate(5deg);
  }

  .wormCov1.animate {
    animation: comeInWorm1 2s ease-out forwards;
  }

  .wormCov2.animate {
    animation: comeInWorm2 2s ease-out forwards;
  }

  @keyframes comeInWorm1 {
    0%   {left:37vw; top:100vh;}
    100% {left:21.25vw; top:calc(50vh - 17.335vw);}
  }

  @keyframes comeInWorm2 {
    0%   {left:37vw; top:100vh;}
    100% {left:57.75vw; top:calc(50vh - 18.125vw);}
  }

  .worm1 h1 {
    margin-top: 5vw;
    margin-bottom: 1vw;
  }

  .worm1 p {
    margin-bottom: 5vw;
    margin-top: 2vw;
  }

  .wormPg1_1 {
    background-image: url(../images/worm/wormPg1_1.jpg);
    width: 57.7vw;
    height: 43.28vw;
  }

  .wormButtPg1_1 {
    margin-left: 27vw;
  }

  .wormPg1_2 {
    background-image: url(../images/worm/wormPg1_2.png);
    width: 46.16vw;
    height: 19.87vw;
    margin-left: -21vw;
    margin-top: -10vw;
    background-size: contain !important;
  }

  .wormPg1_3 {
    background-image: url(../images/worm/wormPg1_3.jpg);
    width: 57.7vw;
    height: 43.28vw;
    margin-top: 5vw;
  }

  .wormPg1_4 {
    background-image: url(../images/worm/wormPg1_4.png);
    width: 40.39vw;
    height: 43.27vw;
    background-size: contain !important;
    margin-left: 23vw;
    margin-top: -17vw;
  }

  .worm1 .next {
    margin-left: 6vw;
  }

  .worm2 h1 {
    margin-left: 2.89vw;
  }

  .worm2 p {
    margin-top: 3vw;
    margin-bottom: 5vw;
    width: 51.93vw;
    margin-left: 2.89vw;
  }

  .wormPg2_1 {
    background-image: url(../images/worm/wormPg2_1.png);
    width: 40.39vw;
    height: 55.86vw;
    margin-left: 8.655vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .wormPg2_2 {
    background-image: url(../images/worm/wormPg2_2.jpg);
    width: 40.39vw;
    height: 56.27vw;
    margin-left: 8.655vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .wormButtPg2_1 {
    margin-left: 4vw;
  }

  .wormButtPg2_2 {
    margin-left: 33vw;
    margin-top: -9vw;
  }

  .wormPg2_3 {
    background-image: url(../images/worm/wormPg2_3.jpg);
    width: 46.16vw;
    height: 92.33vw;
    margin-left: 5.77vw;
    margin-bottom: 5vw;
    background-size: contain !important;
  }

  .worm2 .next {
    margin-left: 2vw;
  }

  /*Murmur*/
  .sw2.active {
    background-color: rgba(235, 189, 92, 0.2);
  }

  .murCov1 {
    width: 20.8vw;
    height: 32.144vw;
    background-image: url(../images/murmur/murmurCover_1.jpg);
    transform: rotate(5deg);
  }

  .murCov2 {
    width: 26vw;
    height: 40.45vw;
    background-image: url(../images/murmur/murmurCover_2.jpg);
    transform: rotate(-10deg);
  }

  .murCov3 {
    width: 26vw;
    height: 33.92vw;
    background-image: url(../images/murmur/murmurCover_3.png);
    transform: rotate(10deg);
  }

  .murCov1.animate {
    animation: comeInMur1 2s ease-out forwards;
  }

  .murCov2.animate {
    animation: comeInMur2 2s ease-out forwards;
  }

  .murCov3.animate {
    animation: comeInMur3 2s ease-out forwards;
  }

  @keyframes comeInMur1 {
    0%   {left:39.6vw; top:100vh;}
    100% {left:6.8vw; top:calc(50vh - 16.072vw);}
  }

  @keyframes comeInMur2 {
    0%   {left:37vw; top:100vh;}
    100% {left:34.4vw; top:calc(50vh - 20.225vw);}
  }

  @keyframes comeInMur3 {
    0%   {left:37vw; top:100vh;}
    100% {left:67.2vw; top:calc(50vh - 16.96vw);}
  }

  .murmur1 h1 {
    margin-bottom: 2vw;
  }

  .murmur1 p {
    margin-top: 1vw;
  }

  .murmurPg1_1 {
    background-image: url(../images/murmur/murmurPg1_1.jpg);
    width: 27.12vw;
    height: 41.92vw;
    margin-right: 3.46vw;
    margin-top: 5vw;
  }

  .murmurPg1_2 {
    background-image: url(../images/murmur/murmurPg1_2.jpg);
    width: 27.12vw;
    height: 41.92vw;
    margin-top: 5vw;
  }

  .murmurP1 {
    width: 27.12vw;
    margin-top: 5vw !important;
    margin-bottom: 3vw;
  }

  .murmurPg1_3 {
    background-image: url(../images/murmur/murmurPg1_3.jpg);
    width: 27.12vw;
    height: 41.59vw;
    margin-right: 3.46vw;
  }

  .murmurPg1_4 {
    background-image: url(../images/murmur/murmurPg1_4.jpg);
    width: 27.12vw;
    height: 48.22vw;
    margin-top: -6.5vw;
  }

  .murmurP2 {
    margin-top: 5vw !important;
  }

  .murButtPg1_1 {
    margin-left: 6vw;
    margin-top: 5vw;
  }

  .murButtPg1_2 {
    margin-left: -1vw;
    margin-top: 7vw;
  }

  .murButtPg1_3 {
    margin-left: 7vw;
    margin-top: 2vw;
  }

  .murmurPg1_5 {
    background-image: url(../images/murmur/murmurPg1_5.jpg);
    width: 27.12vw;
    height: 37.30vw;
    margin-left: 30.58vw;
    margin-top: -40.12vw;
  }

  .murmurPg1_6 {
    background-image: url(../images/murmur/murmurPg1_6.jpg);
    width: 57.7vw;
    height: 38.55vw;
    margin-top: 5vw;
  }

  .murmur1 .next {
    margin-left: 2vw;
    margin-top: 2vw;
  }

  .murmur2 p {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .murmurPg2_1 {
    background-image: url(../images/murmur/murmurPg2_1.jpg);
    width: 57.7vw;
    height: 37.09vw;
  }

  .murmurPg2_2 {
    background-image: url(../images/murmur/murmurPg2_2.jpg);
    width: 57.7vw;
    height: 37.09vw;
    margin-top: 5vw;
  }

  .murButtPg2_1 {
    margin-left: 4vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  .murmurPg2_3 {
    background-image: url(../images/murmur/murmurPg2_3.jpg);
    width: 19.62vw;
    height: 39.56vw;
    margin-right: 3.46vw;
  }

  .murmurPg2_4 {
    background-image: url(../images/murmur/murmurPg2_4.JPG);
    width: 34.62vw;
    height: 46.15vw;
  }

  .murmur2 .next {
    margin-left: 2vw;
    margin-top: -3vw;
  }

  .murmur3 h1 {
    margin-bottom: 3vw;
  }

  .murmur3 p {
    margin-bottom: 2vw;
  }

  .murButtPg3_1 {
    margin-bottom: 2vw;
    margin-left: 3vw;
  }

  .murmurPg3_1 {
    background-image: url(../images/murmur/murmurPg3_1.png);
    width: 57.7vw;
    height: 44.23vw;
    margin-bottom: 5vw;
  }

  .murmurPg3_2 {
    background-image: url(../images/murmur/murmurPg3_2.jpg);
    width: 40.39vw;
    height: 41.83vw;
    margin-bottom: 5vw;
    margin-left: 14.31vw;
  }

  .murmurPg3_3 {
    background-image: url(../images/murmur/murmurPg3_3.jpg);
    width: 40.39vw;
    height: 19.61vw;
    margin-bottom: 5vw;
    margin-left: 3vw;
  }

  .murmurPg3_4 {
    background-image: url(../images/murmur/murmurPg3_4.jpg);
    width: 57.7vw;
    height: 38.53vw;
  }

  .murmur3 .next {
    margin-top: 2vw;
    margin-left: 3vw;
  }

  /*Speks Rebrand*/
  .sw3.active {
    background-color: rgba(235, 200, 92, 0.2);
  }

  .speksCov1 {
    width: 20.8vw;
    height: 36.976vw;
    background-image: url(../images/speks/speksCover_1.jpg);
    transform: rotate(5deg);
  }

  .speksCov2 {
    width: 31.2vw;
    height: 23.412vw;
    background-image: url(../images/speks/speksCover_2.jpg);
    transform: rotate(2deg);
  }

  .speksCov3 {
    width: 26vw;
    height: 35.23vw;
    background-image: url(../images/speks/speksCover_3.png);
    transform: rotate(-2deg);
  }

  .speksCov1.animate {
    animation: comeInSpeks1 2s ease-out forwards;
  }

  .speksCov2.animate {
    animation: comeInSpeks2 2s ease-out forwards;
  }

  .speksCov3.animate {
    animation: comeInSpeks3 2s ease-out forwards;
  }

  @keyframes comeInSpeks1 {
    0%   {left:39.6vw; top:100vh;}
    100% {left:5.5vw; top:calc(50vh - 18.488vw);}
  }

  @keyframes comeInSpeks2 {
    0%   {left:34.4vw; top:100vh;}
    100% {left:31.8vw; top:calc(50vh - 11.706vw);}
  }

  @keyframes comeInSpeks3 {
    0%   {left:37vw; top:100vh;}
    100% {left:68.5vw; top:calc(50vh - 17.615vw);}
  }

  .speks1 h1 {
    margin-bottom: 3vw;
  }

  .speks1 p {
    margin-bottom: 2vw;
  }

  .speksPg1_1 {
    width: 57.7vw;
    height: 32.45vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
    pointer-events: auto
  }

  .speksPg1_1 {
    position: relative;
    z-index: 1001; /* above any overlays */
    pointer-events: auto;
  }


  .speksPg1_2 {
    background-image: url(../images/speks/speksPg1_2.jpg);
    width: 57.7vw;
    height: 32.45vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  .speksPg1_3 {
    background-image: url(../images/speks/speksPg1_3.png);
    width: 27.12vw;
    height: 25.62vw;
    margin-right: 3.46vw;
  }

  .speksPg1_4 {
    background-image: url(../images/speks/speksPg1_4.jpg);
    width: 27.12vw;
    height: 35.09vw;

  }

  .speksPg1_5 {
    background-image: url(../images/speks/speksPg1_5.jpg);
    width: 57.7vw;
    height: 37.35vw;
    margin-bottom: 5vw;
    margin-top: 5vw;
  }

  .speksPg1_6 {
    background-image: url(../images/speks/speksPg1_6.jpg);
    width: 57.7vw;
    height: 37.35vw;
    margin-bottom: 2vw;
  }

  .speks2 h1 {
    margin-bottom: 3vw;
  }

  .speks2 p {
    margin-bottom: 5vw;
  }

  .speksPg2_1 {
    background-image: url(../images/speks/speksPg2_1.jpg);
    width: 51.93vw;
    height: 38.94vw;
    margin-left: 2.885vw;
    margin-bottom: 5vw;
  }

  .speksPg2_2 {
    background-image: url(../images/speks/speksPg2_2.jpg);
    width: 51.93vw;
    height: 38.94vw;
    margin-left: 2.885vw;
    margin-bottom: 5vw;
  }

  .speksPg2_3 {
    background-image: url(../images/speks/speksPg2_3.jpg);
    width: 27.12vw;
    height: 35.07vw;
    margin-right: 3.46vw;
  }

  .speksPg2_4 {
    background-image: url(../images/speks/speksPg2_4.jpg);
    width: 27.12vw;
    height: 35.07vw;
  }

  .speksPg2_5 {
    background-image: url(../images/speks/speksPg2_5.png);
    width: 27.12vw;
    height: 38.74vw;
    margin-top: -5vw;
  }

  .speksPg2_6 {
    background-image: url(../images/speks/speksPg2_6.png);
    width: 27.12vw;
    height: 27.12vw;
    margin-left: -21vw;
    margin-top: 19vw;
  }

  .speks2 .next {
    margin-top: -3vw;
    margin-left: 1vw;
  }

  .speks3 h1 {
    margin-bottom: 3vw;
  }

  .speks3 p {
    margin-bottom: 5vw;
  }

  .speksButtPg3_1 {
    margin-left: 6vw;
    margin-bottom: 4vw;
  }

  .speksPg3_1 {
    background-image: url(../images/speks/speksPg3_1.png);
    width: 57.7vw;
    height: 40.88vw;
    margin-bottom: 5vw;
  }

  .speksPg3_2 {
    background-image: url(../images/speks/speksPg3_2.png);
    width: 27.12vw;
    height: 38.34vw;
    margin-right: 3.46vw;
  }

  .speksPg3_3 {
    background-image: url(../images/speks/speksPg3_3.png);
    width: 27.12vw;
    height: 37.94vw;
  }

  .speksPg3_4 {
    background-image: url(../images/speks/speksPg3_4.png);
    width: 27.12vw;
    height: 36.70vw;
    margin-top: 3vw;
  }

  .speksPg3_5 {
    background-image: url(../images/speks/speksPg3_5.png);
    width: 27.12vw;
    height: 24.79vw;
    margin-right: 3.46vw;
    margin-top: 3vw;
  }

  .speksPg3_6 {
    background-image: url(../images/speks/speksPg3_6.png);
    width: 27.12vw;
    height: 36.38vw;
    margin-top: 3vw;
    margin-left: 13vw;
  }

  /*Tunnel Vision Zines*/
  .sw4.active {
    background-color: rgba(173, 216, 230, 0.2);
  }

  .tunCov1 {
    width: 33.8vw;
    height: 24.05vw;
    background-image: url(../images/tunnel/tunnelCover_1.png);
    transform: rotate(-7deg);
  }

  .tunCov2 {
    width: 26vw;
    height: 36.51vw;
    background-image: url(../images/tunnel/tunnelCover_2.png);
    transform: rotate(5deg);
  }

  .tunCov1.animate {
    animation: comeInTun1 2s ease-out forwards;
  }

  .tunCov2.animate {
    animation: comeInTun2 2s ease-out forwards;
  }

  @keyframes comeInTun1 {
    0%   {left:33.1vw; top:100vh;}
    100% {left:15.1vw; top:calc(50vh - 12.025vw);}
  }

  @keyframes comeInTun2 {
    0%   {left:37vw; top:100vh;}
    100% {left:58.9vw; top:calc(50vh - 18.255vw);}
  }

  .tunnel1 h1 {
    margin-bottom: 3vw;
  }

  .tunnel1 p {
    margin-bottom: 5vw;
  }

  .tunnelPg1_1 {
    background-image: url(../images/tunnel/tunnelPg1_1.png);
    width: 27.12vw;
    height: 19.14vw;
    margin-bottom: -3vw;
    margin-left: 29vw;
  }

  .tunnelPg1_2 {
    background-image: url(../images/tunnel/tunnelPg1_2.png);
    width: 57.7vw;
    height: 41.22vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_3 {
    background-image: url(../images/tunnel/tunnelPg1_3.png);
    width: 57.7vw;
    height: 41.56vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_4 {
    background-image: url(../images/tunnel/tunnelPg1_4.png);
    width: 27.12vw;
    height: 27.25vw;
    margin-left: 6vw;
  }

  .tunButtPg1_1 {
    margin-left: 37vw;
    margin-top: -25vw;
    margin-bottom: 17vw;
  }

  .tunnelPg1_5 {
    background-image: url(../images/tunnel/tunnelPg1_5.png);
    width: 57.7vw;
    height: 39.95vw;
    margin-bottom: 5vw;
  }

  .tunnelPg1_6 {
    background-image: url(../images/tunnel/tunnelPg1_6.png);
    width: 57.7vw;
    height: 41.36vw;
    margin-bottom: 3vw;
  }

  .tunnel1 .next {
    margin-left: 3vw;
  }

  .tunnel2 h1 {
    margin-bottom: 3vw;
  }

  .tunnel2 p {
    margin-bottom: 5vw;
  }

  .tunnelPg2_1 {
    background-image: url(../images/tunnel/tunnelPg2_1.png);
    width: 27.12vw;
    height: 36.63vw;
    transform: rotate(-100deg);
    margin-left: 26vw;
    margin-bottom: -5vw;
  }

  .tunnelPg2_2 {
    background-image: url(../images/tunnel/tunnelPg2_2.png);
    width: 27.12vw;
    height: 38.07vw;
    margin-right: 3.46vw;
  }

  .tunButtPg2_1 {
    margin-left: 33vw;
    margin-top: -14vw;
    margin-bottom: 8vw;
  }

  .tunnelPg2_3 {
    background-image: url(../images/tunnel/tunnelPg2_3.jpg);
    width: 57.7vw;
    height: 43.77vw;
  }

  .tunnelPg2_4 {
    background-image: url(../images/tunnel/tunnelPg2_4.png);
    width: 27.12vw;
    height: 26.02vw;
  }

  .tunnelPg2_5 {
    background-image: url(../images/tunnel/tunnelPg2_5.png);
    width: 57.7vw;
    height: 38.48vw;
  }

  .tunnelPg2_6 {
    background-image: url(../images/tunnel/tunnelPg2_6.png);
    width: 57.7vw;
    height: 30.60vw;
  }

  .tunnel2 .next {
    margin-top: 2vw;
    margin-left: 11vw;
  }


  /*A Tempting Meditation*/
  .sw5.active {
    background-color: rgba(144, 238, 144, 0.2);
  }

  .tempCov1 {
    width: 26vw;
    height: 35.47vw;
    background-image: url(../images/temp/tempCover_1.jpg);
    transform: rotate(2deg);
  }

  .tempCov1.animate {
    animation: comeInTemp1 2s ease-out forwards;
  }

  @keyframes comeInTemp1 {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 17.735vw);}
  }

  .temp h1 {
    margin-bottom: 3vw;
  }

  .temp p {
    margin-bottom: 5vw;
  }

  .temp_1 {
    background-image: url(../images/temp/temp_1.jpg);
    width: 57.7vw;
    height: 32.67vw; 
    margin-bottom: 3vw;
    background-size: contain !important;
  }

  .temp_2 {
    background-image: url(../images/temp/temp_2.jpg);
    width: 57.7vw;
    height: 32.69vw; 
    margin-bottom: 3vw;
    background-size: contain !important;
  }

  .temp_3 {
    background-image: url(../images/temp/temp_3.jpg);
    width: 57.7vw;
    height: 32.69vw;
    background-size: contain !important; 
  }

  .tempButt_1 {
    margin-left: 8vw;
    margin-top: 3vw;
  }

  .tempButt_2 {
    margin-left: 28vw;
    margin-top: -12vw;
    margin-bottom: 5vw;
  }

  .temp_4 {
    width: 40.39vw;
    height: 22.78vw; 
    margin-left: 17.31vw;
    margin-bottom: 3vw;
  }

  .temp_5 {
    width: 40.39vw;
    height: 22.78vw; 
    margin-bottom: 3vw;
  }

  .temp_6 {
    width: 40.39vw;
    height: 22.78vw; 
    margin-left: 17.31vw;
    margin-bottom: 4vw; 
  }

  /*Professional Break*/
  .profCloud {
    background-image: url(../images/clouds/cloudProf.png);
    width: 87.30vw;
    height: 45.33vw;
    top: -10vw;
    left: 5vw;
  }

  .profTxt {
    padding-left: 26vw;
  }

  .profBr {
    width: 26vw;
    height: 33.97vw;
    background-image: url(../images/professional.png);
    transform: rotate(20deg);
    top: 13vw;
    left: 60vw;
  }

  /*Civil Liberty Extravaganza*/
  .sw6.active {
    background-color: rgba(255, 182, 193, 0.2);
  }

  .extravCov1 {
    width: 23.4vw;
    height: 36.072vw;
    background-image: url(../images/extrav/extravCover_1.jpg);
    transform: rotate(-5deg);
  }

  .extravCov2 {
    width: 31.2vw;
    height: 21.072vw;
    background-image: url(../images/extrav/extravCover_2.jpg);
    transform: rotate(3deg);
  }

  .extravCov1.animate {
    animation: comeInExtrav1 2s ease-out forwards;
  }

  .extravCov2.animate {
    animation: comeInExtrav2 2s ease-out forwards;
  }

  @keyframes comeInExtrav1 {
    0%   {left:38.3vw; top:100vh;}
    100% {left:17.7vw; top:calc(50vh - 18.036vw);}
  }

  @keyframes comeInExtrav2 {
    0%   {left:34.4vw; top:100vh;}
    100% {left:51.1vw; top:calc(50vh - 10.536vw);}
  }

  .extrav1 h1 {
    margin-bottom: 3vw;
  }

  .extrav1 p {
    margin-bottom: 5vw;
  }

  .extravPg1_1 {
    background-image: url(../images/extrav/extravPg1_1.jpg);
    width: 46.16vw;
    height: 71.23vw;
    margin-bottom: 3vw;
    margin-left: 5.77vw;
  }

  .extravPg1_2 {
    background-image: url(../images/extrav/extravPg1_2.jpg);
    width: 46.16vw;
    height: 71.17vw;
    margin-bottom: 3vw;
    margin-left: 5.77vw;
  }

  .extrav1 .next {
    margin-left: 10vw;
  }

  .extrav2 h1 {
    margin-bottom: 3vw;
  }

  .extrav2 p {
    margin-bottom: 5vw;
  }

  .extravPg2_1 {
    background-image: url(../images/extrav/extravPg2_1.jpg);
    width: 57.7vw;
    height: 38.96vw;
    margin-bottom: 3vw;
  }

  .extravPg2_2 {
    background-image: url(../images/extrav/extravPg2_2.jpg);
    width: 57.7vw;
    height: 32.45vw;
    margin-bottom: 3vw;
  }

  .extravPg2_3 {
    background-image: url(../images/extrav/extravPg2_3.jpg);
    width: 57.7vw;
    height: 32.45vw;
    margin-bottom: 3vw;
  }

  .extrav2 .next {
    margin-left: 4vw;
  }

  /*MSCII Banner*/
  .sw7.active {
    background-color: rgba(221, 160, 221, 0.2);
  }

  .banCov1 {
    width: 26vw;
    height: 41.63vw;
    background-image: url(../images/banner/bannerCover_1.png);
    transform: rotate(-3deg);
  }

  .banCov1.animate {
    animation: comeInBan1 2s ease-out forwards;
  }

  @keyframes comeInBan1 {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 20.815vw);}
  }

  .banner h1 {
    margin-bottom: 3vw;
  }

  .banner p {
    margin-bottom: 5vw;
  }

  .banner_1 {
    background-image: url(../images/banner/banner_1.png);
    width: 40.39vw;
    height: 70.88vw;
    margin-bottom: 3vw;
    margin-left: 8.655vw;
  }

  .banner_2 {
    background-image: url(../images/banner/banner_2.png);
    width: 57.7vw;
    height: 31.90vw;
  }

  /*MSCII Handouts*/
  .sw8.active {
    background-color: rgba(255, 228, 181, 0.2);
  }

  .handCov1 {
    width: 26vw;
    height: 33.65vw;
    background-image: url(../images/handout/handoutCover_1.jpg);
    transform: rotate(2deg);
  }

  .handCov1.animate {
    animation: comeInHand1 2s ease-out forwards;
  }

  @keyframes comeInHand1 {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 16.825vw);}
  }

  .handout h1 {
    margin-bottom: 3vw;
  }

  .handout p {
    margin-bottom: 5vw;
  }

  .handout_1 {
    background-image: url(../images/handout/handout_1.jpg);
    width: 40.39vw;
    height: 52.31vw;
    transform: rotate(5deg);
    margin-bottom: 3vw;
    margin-left: 8.655vw;
  }

  .handout_2 {
    background-image: url(../images/handout/handout_2.jpg);
    width: 40.39vw;
    height: 52.31vw;
    transform: rotate(10deg);
    margin-bottom: 8vw;
    margin-left: 8.655vw;
  }

  .handout_3 {
    background-image: url(../images/handout/handout_3.jpg);
    width: 40.39vw;
    height: 52.27vw;
    transform: rotate(-6deg);
    margin-bottom: 6vw;
    margin-left: 8.655vw;
  }

  .handout_4 {
    background-image: url(../images/handout/handout_4.jpg);
    width: 40.39vw;
    height: 52.29vw;
    transform: rotate(3deg);
    margin-left: 8.655vw;
  }

  /*Playground Break*/
  .playCloud {
    background-image: url(../images/clouds/cloudPlay.png);
    width: 87.30vw;
    height: 37.38vw;
    top: -15vw;
    left: 3vw;
  }

  .playTxt {
    padding-left: 25vw;
  }

  .playBr {
    width: 26vw;
    height: 33.6466vw;
    background-image: url(../images/playground.png);
    background-size: 100%;
    transform: rotate(20deg);
    top: 6vw;
    left: 60vw;
  }

  /*Swimming Ring*/
  .sw9.active {
    background-color: rgba(240, 230, 140, 0.2);
  }

  .swimCov1 {
    width: 26vw;
    height: 37.33vw;
    background-image: url(../images/swim/swimCover_1.jpg);
    transform: rotate(3deg);
  }

  .swimCov1.animate {
    animation: comeInSwim1 2s ease-out forwards;
  }

  @keyframes comeInSwim1 {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 18.665vw);}
  }

  .swim h1 {
    margin-bottom: 3vw;
  }

  .swim p {
    margin-bottom: 5vw;
  }

  .swim_1 {
    background-image: url(../images/swim/swim_1.jpg);
    width: 46.16vw;
    height: 46.19vw;
    margin-bottom: 3vw;
    margin-left: 5.77vw;
  }

  .swim_2 {
    background-image: url(../images/swim/swim_2.jpg);
    width: 46.16vw;
    height: 46.18vw;
    margin-left: 5.77vw;
  }

  /*GYAOOB*/
  .sw10.active {
    background-color: rgba(255, 160, 122, 0.2);
  }

  .gyaCov1 {
    width: 33.8vw;
    height: 21.086vw;
    background-image: url(../images/gyaoob/gyaoobCover_1.png);
    transform: rotate(-3deg);
  }

  .gyaCov2 {
    width: 26vw;
    height: 36.49vw;
    background-image: url(../images/gyaoob/gyaoobCover_2.png);
    transform: rotate(5deg);
  }

  .gyaCov1.animate {
    animation: comeInGya1 2s ease-out forwards;
  }

  .gyaCov2.animate {
    animation: comeInGya2 2s ease-out forwards;
  }

  @keyframes comeInGya1 {
    0%   {left:33.1vw; top:100vh;}
    100% {left:15.1vw; top:calc(50vh - 10.543vw);}
  }

  @keyframes comeInGya2 {
    0%   {left:37vw; top:100vh;}
    100% {left:58.9vw; top:calc(50vh - 18.245vw);}
  }

  .gyaoob1 h1 {
    margin-bottom: 3vw;
  }

  .gyaoob1 p {
    margin-bottom: 5vw;
  }

  .gyaoobPg1_1 {
    background-image: url(../images/gyaoob/gyaoobPg1_1.jpg);
    width: 57.7vw;
    height: 35.92vw;
    margin-bottom: 5vw;
  }

  .gyaButtPg1_1 {
    margin-left: 6vw;
    margin-bottom: 2vw;
    margin-top: -4vw;
  }

  .gyaoobPg1_2 {
    background-image: url(../images/gyaoob/gyaoobPg1_2.jpg);
    width: 57.7vw;
    height: 23.27vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_3 {
    background-image: url(../images/gyaoob/gyaoobPg1_3.jpg);
    width: 57.7vw;
    height: 23.27vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_4 {
    background-image: url(../images/gyaoob/gyaoobPg1_4.jpg);
    width: 57.7vw;
    height: 19.03vw;
    margin-bottom: 3vw;
  }

  .gyaoobPg1_5 {
    background-image: url(../images/gyaoob/gyaoobPg1_5.jpg);
    width: 57.7vw;
    height: 18.67vw;
    margin-bottom: 3vw;
  }

  .gyaoob1 .next {
    margin-left: 5vw;
  }

  .gyaoob2 h1 {
    margin-bottom: 3vw;
  }

  .gyaoob2 p {
    margin-bottom: 5vw;
  }

  .gyaoobPg2_1 {
    background-image: url(../images/gyaoob/gyaoobPg2_1.jpg);
    width: 46.16vw;
    height: 29.17vw;
    margin-bottom: 3vw;
    margin-left: 5.77vw;
  }

  .gyaoobPg2_2 {
    background-image: url(../images/gyaoob/gyaoobPg2_2.png);
    width: 46.16vw;
    height: 60.45vw;
    margin-bottom: 3vw;
    margin-left: 5.77vw;
  }

  .gyaoobPg2_3 {
    background-image: url(../images/gyaoob/gyaoobPg2_3.png);
    width: 46.16vw;
    height: 64.81vw;
    margin-left: 5.77vw;
  }

  .gyaoob2 .next {
    margin-left: 12vw;
    margin-top: 3vw;
  }

  /*Tooth*/
  .sw11.active {
    background-color: rgba(175, 238, 238, 0.2);
  }

  .toothCov1 {
    width: 26vw;
    height: 35.08vw;
    background-image: url(../images/tooth/toothCover_1.jpg);
    transform: rotate(-5deg);
  }

  .toothCov1.animate {
    animation: comeInTooth1 2s ease-out forwards;
  }

  @keyframes comeInTooth1 {
    0%   {left:37vw; top:100vh;}
    100% {left:37vw; top:calc(50vh - 17.54vw);}
  }

  .tooth h1 {
    margin-bottom: 3vw;
  }

  .tooth p {
    margin-bottom: 5vw;
  }

  .tooth_1 {
    background-image: url(../images/tooth/tooth_1.jpg);
    width: 57.7vw;
    height: 38.46vw;
    margin-bottom: 3vw;
  }

  .tooth_2 {
    background-image: url(../images/tooth/tooth_2.jpg);
    width: 57.7vw;
    height: 57.66vw;
  }

  /*Awake*/
  .sw12.active {
    background-color: rgba(175, 238, 238, 0.2);
  }

  .awakeCov1 {
    width: 36.4vw;
    height: 28.434vw;
    background-image: url(../images/awake/awakeCover_1.png);
    transform: rotate(3deg);
  }

  .awakeCov1.animate {
    animation: comeInAwake1 2s ease-out forwards;
  }

  @keyframes comeInAwake1 {
    0%   {left:31.8vw; top:100vh;}
    100% {left:31.8vw; top:calc(50vh - 14.217vw);}
  }

  .awake h1 {
    margin-bottom: 3vw;
  }

  .awake p {
    margin-bottom: 5vw;
  }

  .awake_1 {
    background-image: url(../images/awake/awake_1.png);
    width: 57.7vw;
    height: 45.08vw;
  }

  /*Footer*/
  footer {
    background-image: url(../images/footerBG.png);     
    height: 75vw;
    padding-top: 45vw;
    padding-left: 10.45vw;
  }

  .footP1 {
    width: 38.09vw;
  }

  .footButt1 {
    margin-left: 61vw;
    margin-top: -13vw;
  }

  .footButt2 {
    margin-left: 44vw;
    margin-top: -22vw;
  }

  .footButt3 {
    margin-left: 64vw;
    margin-top: -18vw;
  }

  .footHead {
    width: 10vw;
    height: 10vw;
    margin-top: 3vw;
    margin-right: 5vw;
  }

  .footIndex {
    background-image: url(../images/heads/headLogo.png);
  }

  .footAbout {
    background-image: url(../images/heads/headLogo_2.png);
  }

  .footCon {
    background-image: url(../images/heads/headLogo_3.png);
  }

  /*About*/
  .heroAbtCld1 {
    background-image: url(../images/clouds/cloudAboutHero_1.png);
    width: 50vw;
    height: 31.51vw;
    left: 5vw;
    top: calc(50% - 25vw);
  }

  .heroAbtCld2 {
    background-image: url(../images/clouds/cloudAboutHero_2.png);
    width: 40vw;
    height: 24.48vw;
    left: 48vw;
    top: calc(50% - 19vw);
  }

  .heroAbtCld3 {
    background-image: url(../images/clouds/cloudAboutHero_3.png);
    width: 40vw;
    height: 22.17vw;
    left: 25vw;
    top: calc(50% + 4vw);
  }

  .abtP1 {
    width: 46.29vw;
  }

  .abtCloud1 {
    background-image: url(../images/clouds/cloudAbout_1.png);
    width: 65vw;
    height: 36.35vw;
    left: 2vw;
    top: 0vw;
    padding-top: 11vw;
    padding-left: 9vw;
  }

  .abtCloud2 {
    background-image: url(../images/clouds/cloudAbout_2.png);
    width: 56.29vw;
    height: 38.60vw;
    left: 29vw;
    top: 39vw;
  }

  .abtCloud3 {
    background-image: url(../images/clouds/cloudAbout_3.png);
    width: 56.29vw;
    height: 27.82vw;
    left: 5vw;
    top: 79vw;
    padding-top: 2vw;
    padding-left: 9vw;
  }

  .abtCloud4 {
    background-image: url(../images/clouds/cloudAbout_4.png);
    width: 56.29vw;
    height: 22.88vw;
    left: 31vw;
    top: 104vw;
  }

  .abtCloud5 {
    background-image: url(../images/clouds/cloudAbout_5.png);
    width: 56.29vw;
    height: 29.34vw;
    left: 0vw;
    top: 116vw;
    padding-top: 12vw;
    padding-left: 6vw;
  }

  .abtButt {
    background-image: url(../images/clouds/cloudAbtButt.png);
    width: 21vw;
    height: 18.92vw;
    left: 67vw;
    top: 132vw;
    padding-right: 14vw;
  }

  /*Contact*/
  .heroContCld1 {
    background-image: url(../images/clouds/cloudContactHero_1.png);
    width: 50vw;
    height: 23.37vw;
    left: 8vw;
    top: calc(50% - 26vw);
  }

  .heroContCld2 {
    background-image: url(../images/clouds/cloudContactHero_2.png);
    width: 40vw;
    height: 34.85vw;
    left: 50vw;
    top: calc(50% - 10vw);
  }

  .heroContCld3 {
    background-image: url(../images/clouds/cloudContactHero_3.png);
    width: 40vw;
    height: 23.50vw;
    left: 11vw;
    top: calc(50% + 3vw);
  }

  #contHolder {
    height: 10vw;
  }

  .contP1 {
    width: 30.37vw;
  }

  .cont1 {
    background-image: url(../images/clouds/cloudContact_1.png);
    width: 40.37vw;
    height: 22.30vw;
    left: 42vw;
    top: 0vw;
    padding-top: 19vw;
    padding-left: 13vw;
  }

  .cont2 {
    background-image: url(../images/clouds/cloudContact_2.png);
    width: 32vw;
    height: 20.43vw;
    left: 33vw;
    top: 34vw;
    padding-bottom: 3vw;
    padding-right: 2vw;
  }

  .cont3 {
    background-image: url(../images/clouds/cloudContact_3.png);
    width: 30vw;
    height: 15.04vw;
    left: 6vw;
    top: 23vw;
    padding-right: 5vw;
  }

  .cont4 {
    background-image: url(../images/clouds/cloudContact_4.png);
    width: 30vw;
    height: 22.16vw;
    left: 3vw;
    top: 50vw;
    padding-left: 4vw;
  }

  .cont5 {
    background-image: url(../images/clouds/cloudContact_5.png);
    width: 30vw;
    height: 15.95vw;
    left: 62vw;
    top: 52vw;
  }
}