Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--<div id="raIntro" style="display: none;">-->
<div id="raIntro" class="canvas-hide">

</div>

  
<!--  <div id="ClearMe2" class="clear-me">   </div>-->
    
</div>  

</div>
  
<div id="ra_canvas" class="canvas-hide">
<div id="ra_square">
<audio id="audio_intro">
  <source src="https://criticalpublichealth.org/team-space/wp-content/uploads/sites/8/2016/05/RiseUpTinyClipLongerFade_01.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
  
<audio id="audio_player" ontimeupdate="audioProgressBar()" preload="auto" controls>
  <source src="https://criticalpublichealth.org/team-space/wp-content/uploads/sites/8/2016/03/001A_GSS-CS-F-07_WhenYouDontHaveMoney.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
<audio id="audio_player2" ontimeupdate="audioProgressBar2()" preload="auto" controls>
  <source src="https://criticalpublichealth.org/team-space/wp-content/uploads/sites/8/2016/03/GSS-CS-F-6_01.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<audio id="audio_player3" ontimeupdate="audioProgressBar3()" preload="auto" controls>
  <source src="https://criticalpublichealth.org/team-space/wp-content/uploads/sites/8/2016/03/GSS-CS-F-5-1_01_HardestWorked.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<audio id="audio_player4" ontimeupdate="audioProgressBar4()" preload="auto" controls>
  <source src="https://criticalpublichealth.org/team-space/wp-content/uploads/sites/8/2016/03/GSS-CS-F-12-3_InTheMedia_01.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<div id="ap1" class="audioprogress audioprogress1 not-clickable">
  <svg id="circle1" class="progressCircle" x="0px" y="0px" width="166px" height="166px" viewBox="0 0 166 166" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="progressbarTrack" stroke-miterlimit="10" cx="83" cy="83" r="80" fill="transparent"></circle>
    <circle id="bar" class="progressbarLoading" stroke-miterlimit="10" cx="83" cy="83" r="80" stroke-dasharray="502" stroke-dashoffset="-502" fill="transparent"></circle>
  </svg>
  <a href="" id="audio_control" class="control">Play/Pause<span>
    <span id="C1L1" class="one"><i></i><em></em></span>
    <span id="C1L2"class="two"><i></i><em></em></span>
  </span></a>
</div>
<div class="dashoffset"><span id="dashoffset"></span></div>
<div  id="ap2" class="audioprogress audioprogress2 not-clickable">
  <svg class="progressCircle" x="0px" y="0px" width="166px" height="166px" viewBox="0 0 166 166" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="progressbarTrack" stroke-miterlimit="10" cx="83" cy="83" r="80" fill="transparent"></circle>
    <circle id="bar2" class="progressbarLoading" stroke-miterlimit="10" cx="83" cy="83" r="80" stroke-dasharray="502" stroke-dashoffset="-502" fill="transparent"></circle>
  </svg>
  <a href="" id="audio_control2" class="control">Play/Pause<span>
    <span id="C2L1" class="one"><i></i><em></em></span>
    <span id="C2L2" class="two"><i></i><em></em></span>
  </span></a>
</div>
<div class="dashoffset"><span id="dashoffset2"></span></div>  

<div  id="ap3" class="audioprogress audioprogress3 not-clickable">
  <svg class="progressCircle" x="0px" y="0px" width="166px" height="166px" viewBox="0 0 166 166" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="progressbarTrack" stroke-miterlimit="10" cx="83" cy="83" r="80" fill="transparent"></circle>
    <circle id="bar3" class="progressbarLoading" stroke-miterlimit="10" cx="83" cy="83" r="80" stroke-dasharray="502" stroke-dashoffset="-502" fill="transparent"></circle>
  </svg>
  <a href="" id="audio_control3" class="control">Play/Pause<span>
    <span id="C3L1" class="one"><i></i><em></em></span>
    <span id="C3L2" class="two"><i></i><em></em></span>
  </span></a>
</div>
<div class="dashoffset"><span id="dashoffset3"></span></div>  

<div  id="ap4" class="audioprogress audioprogress4 not-clickable">
  <svg class="progressCircle" x="0px" y="0px" width="166px" height="166px" viewBox="0 0 166 166" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="progressbarTrack" stroke-miterlimit="10" cx="83" cy="83" r="80" fill="transparent"></circle>
    <circle id="bar4" class="progressbarLoading" stroke-miterlimit="10" cx="83" cy="83" r="80" stroke-dasharray="502" stroke-dashoffset="-502" fill="transparent"></circle>
  </svg>
  <a href="" id="audio_control4" class="control">Play/Pause<span>
    <span id="C4L1" class="one"><i></i><em></em></span>
    <span id="C4L2" class="two"><i></i><em></em></span>
  </span></a>
</div>
<div class="dashoffset"><span id="dashoffset4"></span></div>  

<div id="Navigator" class="nope">
  <div id="arrow1">&#8600</div><div id="arrow1Text" class="arrow-text">Inequity causes stress</div>
<div id="arrow2">&#8601<div id="arrow2Text" class="arrow-text">Smoking is a way to cope with stress</div></div>
<div id="arrow3">&#8598<div id="arrow3Text" class="arrow-text">Smoking triggers stigma</div></div>
<div id="arrow4">&#8599<div id="arrow4Text" class="arrow-text">Smoking stigma reinforces inequity</div></div>
  
  
<div id="blobs1" class="blobs">
  <div id="b1"></div>
  <div id="b2"></div>
  <div id="b3"></div>
  <div id="b4"></div>
  <div id="bSelector" class="blob blob5 hider"></div>
</div>

<div id="txt1">INEQUITY</div>
<div id="txt2">STRESS</div>
<div id="txt3">COPING</div>  
<div id="txt4">STIGMA</div>
  
<div class="blobsA">
<div id="b1a"></div>
<div id="b2a"></div>
<div id="b3a"></div>
<div id="b4a"></div>
<div id="b5a" class="blobA blob5a hider"></div>

</div>
  
<!--<div id="Lb1" class="LbFrame fade-in in4A" onmouseover="showL1()" onmouseout="hideL1()">
</div>-->
<div id="Lb1" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
<div id="hideLb1" class="LbFrameHide" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
  
<!--<div id="Lb2" class="LbFrame fade-in in4A" onmouseover="showL3()" onmouseout="hideL2()">
</div>-->
<div id="Lb2" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
<div id="hideLb2" class="LbFrameHide" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
<!--<div id="Lb3" class="LbFrame fade-in in4A" onmousemove="showL3()" onmouseout="hideL3()">
</div>-->
<div id="Lb3" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
<div id="hideLb3" class="LbFrameHide">
</div>
<!--<div id="Lb4" class="LbFrame fade-in in4A" onmousemove="showL4()" onmouseout="hideL4()">
</div>-->
<div id="Lb4" onmouseover="reshape1()" onmouseout="reshape2()">
</div>
<div id="hideLb4" class="LbFrameHide">
</div>
  
</div> 
</div> 


  
<div id = "ra_right">


<!--<div id="raIntro1" class="scroll-out out1">-->
<div id="raIntro1">
<div id="raBlockBG"></div>  
<div id="raBlock" >  
  <div id="I1" class="hider">Touch the diamond to navigate.</div>
  <div id="I2" class="hider">Click on the circles to learn more.</div>
<!--<div id="I4" class="scroll-sig in4">-<a href="https://www.law.columbia.edu/fac/Kimberl%C3%A9_Crenshaw">Kimberlé Williams Crenshaw</a></div>-->
</div>
</div>  
  
  
<div id = "ra_BGR">

  
<div id="blobs2" class = "blobsTxt">
  <div id="bSelector6" class="blob blob6 hider"></div>
  <div id="b7"></div>
  <div id="b8"></div>
  <div id="b9"></div>
</div>
   
<div id="blobs2a" class="blobsTxtA">
  <div id="b6a"  class="blobA blob6a hider"> </div>
  <div id="b7a"></div>
  <div id="b8a"></div>
  <div id="b9a"></div>
  </div>  
    
 </div>  
  
  
  
  
  
<div id="ra_title" class="nope">
  <h1 id="ra_txt" style="width:100%;">smoking&intersectionality</h1>
</div>  
</div>  

              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,800);
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600);

// Color variables
$blue: #2e7ad1;
$gray-light: #999999;
$gray-dark: #666666;
//$mild: #eeeeee;
$mild: rgba(245,245,220,.8);
$text-default: #565656;
$text-alternate: #989898;
$highlighter: rgba(255, 255, 200, 0.8);
$linkText: #565656;
$linkBG: rgba(151, 78, 110, 0.15);

html {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 2vh;
  color: $text-default;
}
*|*:link {
    color: $linkText;
//    background-color: $linkBG;
}
.hider {
  opacity:0;
} 
.revealer {
  opacity:1;
} 
.nope {
  display:none;
}

.arrow-text {
    font-size: 3vh;
    position: absolute;
    background-color: $mild;
//    padding: 5%;
    padding: 1%;
    border-radius: 1vh;
    color: $text-default;
    text-shadow:none;
    width: 53vh;
    z-index: 1;
}
/*
.arrow-text.arrow {
    font-size: 3vh;
    position: absolute;
    background-color: $mild;
    padding: 5%;
    border-radius: 1vh;
    color: $text-default;
    text-shadow:none;
    width: 53vh;
}
*/
#arrow1Text {
//    left: 150%;
//    top: -60%;
    left: 70%;
    top: 23%;
    width: 23vh;
}
#arrow2Text {
    left: 100%;
    top: 100%;
    width: 29vh;
}
#arrow3Text {
//    left: -410%;
//    top: 10%;
    left: -440%;
    top: 20%;  
    width: 24vh;
}
#arrow4Text {
    left: -400%;
    top: -70%;
    width: 27vh;
}

#raIntro1 {
  position: absolute;
  width: calc(100% - 95vh);
  z-index: 2;  
  overflow: hidden;
  font-family: "Raleway", sans-serif;
  //font-size: calc(50px/100vh);
  //color: #2A2D35; 
  //font-size: 3vw;
//  text-transform: uppercase;
  white-space: nowrap;
}
#raBlock {
  overflow: hidden;
  //width: 99vw;
  //width: calc(100% - 95vh);
  //width: inherit;
  margin-top: 33vh;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.scroll-txt {
  width: 0;
  margin-left: inherit;
  margin-right: inherit;
  overflow: hidden;
}
.scroll-sig {
  width: 0;
  font-size: 2vw;
  margin-left: inherit;
  margin-right: inherit;
  white-space: pre;
  overflow: hidden;
  text-transform: capitalize;  
}
.scroll-sig {
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: scrollTxt;
-webkit-animation-name: scrollTxt;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes scrollTxt {
    from {
        width: 0;
     }

     to {
       //width: 200%;
        width: calc(98vw - 95vh);
       //width: 40vw; 
        //width: calc(100% - 95vh);
       //width: 80vw;
     }
}

@keyframes scrollTxt {
    from {
        width: 0;
     }

     to {
       //width: 200%;
        width: calc(98vw - 95vh);
       //width: 40vw;
        //width: calc(100% - 95vh);
       //width: 80vw;
     }
}

@-webkit-keyframes scrollTxtBeat {
    0% {
        width: 0;
     }
    15% {
        width: 19vw;
     }
    23% {
        width: 19vw;
     }
     100% {
        width: 80vw;
     }
}
@-webkit-keyframes txtBeat2 {
    0% {
        width: 0;
     }
    15% {
        width: 29vw;
     }
    23% {
        width: 29vw;
     }
     100% {
        width: 80vw;
     }
}

@keyframes scrollTxtBeat {
    0% {
        width: 0;
     }
    15% {
        width: 19vw;
     }
    23% {
        width: 19vw;
     }

     100% {
        width: 80vw;
     }
}

@keyframes txtBeat2 {
    0% {
        width: 0;
     }
    15% {
        width: 29vw;
     }
    23% {
        width: 29vw;
     }

     100% {
        width: 80vw;
     }
}


.scroll-txtbeat {
  width: 0;
  margin-left: inherit;
  margin-right: inherit;
  overflow: hidden;
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: scrollTxtBeat;
-webkit-animation-name: scrollTxtBeat;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.txt-beat2 {
  width: 0;
  margin-left: inherit;
  margin-right: inherit;
  overflow: hidden;
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: txtBeat2;
-webkit-animation-name: txtBeat2;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes moveIntro {
    0% {
         transform: scale(1);
     }
     100% {
         transform: scale(0);
    }
}

@keyframes moveIntro {
    0% {
         transform: scale(1);
     }
     100% {
         transform: scale(0);
     }
}

.move-intro {
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: moveIntro;
-webkit-animation-name: moveIntro;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  animation-delay: 25s;
}


.scroll-txt {
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: scrollTxt;
-webkit-animation-name: scrollTxt;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.scroll-txt.in2 {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}
.scroll-txtbeat.in2 {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  animation-delay: 5s;
}
.scroll-txtbeat.in3 {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}
.scroll-txt.in3 {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  animation-delay: 10s;
}
.scroll-txt.in4 {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  animation-delay: 15s;
}
.scroll-sig.in4 {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  animation-delay: 15s;
}


//.green-up {
//padding: 15%;
//  top: 64.5%;
//  left: 34%;
//}
.green-down {
padding: 14%;
  top: 65.5%;
  left: 35%;
}


.scroll-txt.intro1 {
  -webkit-animation-delay: 35s;
  -moz-animation-delay: 35s;
  animation-delay: 35s;
}
.scroll-txt.intro2 {
  -webkit-animation-delay: 40s;
  -moz-animation-delay: 40s;
  animation-delay: 40s;
}
.scroll-txt.in7 {
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  animation-delay: 50s;
}
.scroll-txtbeat.in7 {
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  animation-delay: 50s;
}
.txt-beat2.in7 {
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  animation-delay: 50s;
}
.scroll-txt.in8 {
  -webkit-animation-delay: 55s;
  -moz-animation-delay: 55s;
  animation-delay: 55s;
}

@-webkit-keyframes scrollOut {
    from {
        width: 95vw;
     }

     to {
        width: 0;
     }
}

@keyframes scrollOut {
    from {
        width: 95vw;
     }

     to {
        width: 0;
     }
}
.scroll-out {
  text-align: center;
}
.scroll-out {
  -moz-animation-duration: 5s;
  -webkit-animation-duration: 5s;
  -moz-animation-name: scrollOut;
  -webkit-animation-name: scrollOut;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


.scroll-out.out1 {

  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  animation-delay: 25s;
  
}
.scroll-out.out2 {

  -webkit-animation-delay: 60s;
  -moz-animation-delay: 60s;
  animation-delay: 60s;

}

//*END WORKING

/*****
#raIntro {
  height: 95vh;
  //width: 95%;
  width: 95vw;
  //min-width: 95vh;
  min-height: 400px;
  min-width: 640px;
  position: relative;
//  border: solid;
  display: table-cell;
  vertical-align: middle;
}
*****/
#raIntro {
//  height: 95vh;
  width: 95%;
//  min-height: 400px;
  min-width: 640px;
  position: relative;
//  border: solid;
}


#raColMerge {
 // width: 66%;
//  padding: 5%;
  width: calc(60vw + 30vh);
  //min-width: calc(60vw + 30vh);
  margin-left: 3%;
 // width: 68%;
  margin-bottom: .5%;
  //border: solid;
//  background-color:fuchsia;
  min-height: 400px;
  //min-width: 640px;
  min-width: calc(100vh*1.3);

}

#raCol1 {
  //width: 45%;
  width: 33vw;
  float: left;
  //margin-left: 3%;

//  padding: 5%;
}
#raCol2 {
  //margin-left: 36%;
  //width: 45%;
  //width: calc(60vw + 30vh);  
  //float: right;
  display: table-cell;
  vertical-align: middle;
  padding-left: 3%;
}
//.clear-me {
//  clear: left;
//}

#GirlsBestFriend {
//    height: inherit;
//    border: solid;
    height: 30vh;
    width: 30vh;
    position: relative;
//    display: table-cell;
//    vertical-align: middle;
    float: right;
//    margin-right: 3%;
    margin-top: -14vh;
    //margin-left: 14vh;
 }

/*
#GirlsBestFriend {
  border: solid;
  float: left;
  margin-left: 50%;
  margin-top: -22%;
  position: relative;
  width: 33%;
  height: 25vh;
}
*/
.tech-note {
  padding: 1%;
  text-transform: uppercase;
  //position: absolute;
  background-color:$highlighter;
  border-radius: 1vh;
  //width: 33%;
}


#TechNote1 {
  //margin-top: 2.5%;
  //margin-bottom: 5%;
  //margin-left: 5%;
  //width: auto;
}
#TechNote2 {
  float: left;
////  left: 45%;
////  top: 60%;
////  width: 25%;
  //margin-left: 45%;
  //margin-top: -21%;
  //float: left;
  width: auto;
}

.intro {
  //width: 33%;
  background-color: $mild;
  padding: 1%;
  //padding-top: .5%;
  //padding-bottom: .5%;
  //padding-left: 1%;
  //padding-bottom: 1%;
  border-radius: 1vh;
  //position: absolute;
  //margin-left: 5%;
  margin-top:3%;
}
.i1 {
  left: 5%;
  top: 20%;
}
.i2 {
  left: 5%;
  top: 40%;
}
.i3 {
  left: 5%;
  top: 65%;
}
.i4 {
  left: 45%;
  top: 25%;
}
.i5 {
  left: 45%;
  top: 48%;
}

.canvas-hide {
  height: 0vh;
  min-height: 0px;
}
.canvas-show {
  height: 95vh;
  min-height: 400px;
}
#ra_canvas {
//    height: 95vh;
//    min-height: 400px;
    min-width: 640px;
    position: relative;
    width: 100%;
}

//#Diamond1A:hover {
//  transform: scale(1.5);
//}

#ra_square {
    height: 95vh;
    position: absolute;
    width: 95vh;
    min-width:360px;
    min-height:360px;
    float:left;
}
#ra_title {
  position: absolute;
  width: calc(99% - 100vh);
  text-align: right;
  min-width:280px;
  top: 35%;
}

#ra_BGR {
  position: absolute;
  width: calc(100% - 95vh);
  text-align: right;
  min-width:280px;
  height: 100%;
//  z-index: -1;
}
#ra_textblock {
  height:50vh;
  margin-top:5%;
  margin-left:5%;
  margin-right:5%;
  text-align: center;
  line-height:7em;
}

.TxtSmear {
  font-family: "Raleway",sans-serif;
  font-size: 5vh;
  font-weight: 400;
  color: #565656;
  z-index: 1;
  text-shadow: 1px 1px 9px white;
}
.TxtSmear1 {
  left: 37.5%;
  position: absolute;
  top: 18.5%;
}
.TxtSmear2 {
    left: 71%;
    position: absolute;
    top: 49%;
    color: #333;
}
.TxtSmear3 {
    position: absolute;
    top: 78%;
    left: 39.3%;
}
.TxtSmear4 {
    position: absolute;
    top: 49%;
    left: 9.5%;
}

#audio_control {
  z-index:1;  
}
#C1L1 > i {
  background-color: rgba(121,121,91,.9);
}
#C1L1 > em {
  border-left-color:rgba(121,121,91,.9);
}
#C1L2 > i {
  background-color:rgba(121,121,91,.9);
}
#C1L2 > em {
  border-left-color:rgba(121,121,91,.9);
}
///
#audio_control2 {
  z-index:1;    
}
#C2L1 > i {
  background-color:rgba(138,103,111,.9);
}
#C2L1 > em {
  border-left-color:rgba(138,103,111,.9);
}
#C2L2 > i {
  background-color:rgba(138,103,111,.9);
}
#C2L2 > em {
  border-left-color:rgba(138,103,111,.9);
}
//
#audio_control3 {
  z-index:1;    
}
#C3L1 > i {
    background-color:rgba(85,82,112,.9);
}
#C3L1 > em {
   border-left-color:rgba(85,82,112,.9);
}
#C3L2 > i {
   background-color:rgba(85,82,112,.9);
}
#C3L2 > em {
   border-left-color:rgba(85,82,112,.9);
}
//
#audio_control4 {
  z-index:1;
}
#C4L1 > i {
  background-color:rgba(212,124,20,.9);
}
#C4L1 > em {
  border-left-color:rgba(212,124,20,.9);
}
#C4L2 > i {
  background-color:rgba(212,124,20,.9);
}
#C4L2 > em {
  border-left-color:rgba(212,124,20,.9);
}
////
.not-clickable {
  opacity: 0;
  pointer-events: none;
}
.audioprogress {
  width: 41.5%;
  height: 41.5%;  
  position: absolute;
  left: 49.5%;
  top: 49.4%;
  transform: translate(-50%, -50%);
  z-index:10;
}
.audioprogress1 {
  opacity:0;
}
.audioprogress2 {
  opacity:0;
}
.audioprogress3 {
  opacity:0; 
}
.audioprogress4 {
  opacity:0;
}
//
.progressCircle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  circle {
    transition: stroke-dashoffset 1s linear;
    backface-visibility: hidden;
    stroke: white;
    stroke-width: 5.5px;
    transform-origin: center center;
  }
  .progressbarLoading {
    backface-visibility: hidden;
    stroke: $gray-dark;
    transform: rotate(-90deg);
    transform-origin: center center;
    opacity:.5;
  }
}
.progressbarLoading {
  transition: all 1s linear;
}
.ease-none {
  .progressbarLoading {
    transition: none;
  }
}
.control {
  background-color: rgba(0, 0, 0, 0.25);
  color: #fff;
  margin: 10px;
  border-radius: 50%;
  text-align: center;
  line-height: 145px;
  font-size: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  > span {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 46px;
    width: 24px;
    margin-left: -12px;
    margin-top: -23px;
    line-height: 1;
    transition: 0.5s ease;
    transform: translateX(-8px);
    span {
      position: absolute;
      left: 0;
      top: 0;
      width: 8px;
      height: 100%;
      transition: 0.5s ease;
      transform-style: preserve-3d;
      transform-origin: left top;
      &:first-child {
        transform:  translateX(8px) rotateY(90deg);
        em {
          left: 0px;
          &:after {
            content:'';
            width: 10px;
            height: 46px;
            position: absolute;
            left: -36px;
            top: -22px;
            box-shadow: -3px 0px 3px 0px rgba(0, 0, 0, 0.30);
          }
        }
      }
      &:last-child {
        transform: translateX(-8px) rotateY(90deg);
        left: 16px;
        em {
          left: 6px;
        }
      }
    }
  }
  &.active {
    > span {
      transform: translateX(0px);
      span {
        &:first-child, &:last-child {
          transform: translateX(0px) rotateY(0deg);
        }
      }
    }
  }
  i {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  em {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-left: 36px solid #fff;
    border-bottom: 23px solid transparent;
    position: absolute;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin: left top;
  }
}
.dashoffset {
  position: absolute;
  opacity: 0.1;
  text-align:right;
  top:5%;
  right:5%;
}
audio {
  display:none;
}
////

h1 {
  padding: 0;
  font-family: 'Raleway',sans-serif;
  font-weight: 400;
//  color: $gray-dark;
  color: $text-default;
  filter: blur(0);  
}

.letterDrop {
//  border-top: dotted $gray_light 1px;
  border-top: dotted $text-alternate 1px;
  position: relative;
  margin-top: 2vh;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1.2s ease 1 normal forwards;
}

@keyframes letterDrop {
  10% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.8;
    transform: rotateX(-360deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(360deg);
  }
}

span:nth-child(2n) {
//  color: $gray-light;
  color: $text-alternate;
}
span:nth-child(8) {
  //color: #974094;
  padding-left: .1%;
  padding-right: .1%;
}
span:nth-child(25) {
  //color: #974094;
  letter-spacing: normal;
}


////*******************
@-webkit-keyframes burst {
  0% {
    transform: scale(1) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  10% {
    transform: scale(1.5) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  20% {
    transform: scale(2) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  100% {
    transform: scale(.2) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
}

@keyframes burst {
  0% {
    transform: scale(1) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  10% {
    transform: scale(1.5) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  20% {
    transform: scale(2) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
  100% {
    transform: scale(.2) rotate(-45deg);
    //background: rgba(255, 0, 0, 0.71);  
  }
}

.burst-out {
//    background-color: rgba(255, 0, 0, 0.71);  
//    background: rgba(255, 0, 0, 0.71);  
  -webkit-animation: burst ease-in 1;
  -moz-animation: burst ease-in 1;
  animation: burst ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes burstA {
  0% {
    transform: scale(1) rotate(-45deg);
//    background: rgba(81, 57, 110, 0.6);
  }
  10% {
    transform: scale(1.5) rotate(-45deg);
//    background: rgba(81, 57, 198, 0.6);  
  }
  20% {
    transform: scale(2) rotate(-45deg);
//    background: rgba(81, 57, 198, 0.6);  
  }
  100% {
    transform: scale(.2) rotate(-45deg);
//    background: rgba(81, 57, 198, 0.6);  
  }
}

@keyframes burstA {
  0% {
    transform: scale(1) rotate(-45deg);
 //   background: rgba(81, 57, 110, 0.6);
  }
  10% {
    transform: scale(1.5) rotate(-45deg);
 //   background: rgba(81, 57, 198, 0.6);  
  }
  20% {
    transform: scale(2) rotate(-45deg);
 //   background: rgba(81, 57, 198, 0.6);  
  }
  100% {
    transform: scale(.2) rotate(-45deg);
//    background: rgba(81, 57, 198, 0.6);  
//    background: rgba(255, 0, 0, 0.71);  
  }
}
.burst-outA {
  -webkit-animation: burstA ease-in 1;
  -moz-animation: burstA ease-in 1;
  animation: burstA ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes circlify {
  0% {
    border-radius: 10%;
    padding: 8vh;
  }
  25% {
    border-radius: 20%;
  }
  50% {
    border-radius: 30%;
  }
  75% {
    border-radius: 40%;
  }
  100% {
    border-radius: 50%;
    padding: 9vh;
  }
}

@keyframes circlify {
  0% {
    border-radius: 10%;
    padding: 8vh;
  }
  25% {
    border-radius: 20%;
  }
  50% {
    border-radius: 30%;
  }
  75% {
    border-radius: 40%;
  }
  100% {
    border-radius: 50%;
    padding: 9vh;
  }
}
.circlifier {
  -webkit-animation: circlify ease-in 1;
  -moz-animation: circlify ease-in 1;
  animation: circlify ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes diamondize {
  0% {
    border-radius: 50%;
    padding: 9vh;
  }
  25% {
    border-radius: 40%;
  }
  50% {
    border-radius: 30%;
  }
  75% {
    border-radius: 20%;
  }
  100% {
    border-radius: 10%;
    padding: 8vh;
  }
}

@keyframes diamondize {
  0% {
    border-radius: 50%;
    padding: 9vh;
  }
  25% {
    border-radius: 40%;
  }
  50% {
    border-radius: 30%;
  }
  75% {
    border-radius: 20%;
  }
  100% {
    border-radius: 10%;
    padding: 8vh;
  }
}
.diamondizer {
  -webkit-animation: diamondize ease-in 1;
  -moz-animation: diamondize ease-in 1;
  animation: diamondize ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

////*******************
@-webkit-keyframes greenUp {
  0% {
      padding: 14%;
      top: 65.5%;
      left: 35%;
  }
  25% {
      padding: 14.3%;
      top: 65.2%;
      left: 34.7%;
  }
  50% {
      padding: 14.6%;
      top: 64.9%;
      left: 34.4%;
  }
  75% {
      padding: 14.9%;
      top: 64.6%;
      left: 34.1%;
  }
  100% {
      padding: 15%;
      top: 64.5%;
      left: 34%;
  }
}

@keyframes greenUp {
  0% {
      padding: 14%;
      top: 65.5%;
      left: 35%;
  }
  25% {
      padding: 14.3%;
      top: 65.2%;
      left: 34.7%;
  }
  50% {
      padding: 14.6%;
      top: 64.9%;
      left: 34.4%;
  }
  75% {
      padding: 14.9%;
      top: 64.6%;
      left: 34.1%;
  }
  100% {
      padding: 15%;
      top: 64.5%;
      left: 34%;
  }
}
.green-up {
  -webkit-animation: greenUp ease-in 1;
  -moz-animation: greenUp ease-in 1;
  animation: greenUp ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  animation-duration: .5s;
}

@-webkit-keyframes greenDown {
  0% {
      padding: 15%;
      top: 64.5%;
      left: 34%;
  }
  25% {
      padding: 14.9%;
      top: 64.6%;
      left: 34.1%;
  }
  50% {
      padding: 14.6%;
      top: 64.9%;
      left: 34.4%;
  }
  75% {
      padding: 14.3%;
      top: 65.2%;
      left: 34.7%;
  }
  100% {
      padding: 14%;
      top: 65.5%;
      left: 35%;
  }
}

@keyframes greenDown {
  0% {
      padding: 15%;
      top: 64.5%;
      left: 34%;
  }
  25% {
      padding: 14.9%;
      top: 64.6%;
      left: 34.1%;
  }
  50% {
      padding: 14.6%;
      top: 64.9%;
      left: 34.4%;
  }
  75% {
      padding: 14.3%;
      top: 65.2%;
      left: 34.7%;
  }
  100% {
      padding: 14%;
      top: 65.5%;
      left: 35%;
  }
}
.green-down {
  -webkit-animation: greenDown ease-in 1;
  -moz-animation: greenDown ease-in 1;
  animation: greenDown ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  animation-duration: 10s;
}


////*******************
@-webkit-keyframes moveDown {
  0% {
    top:35vh;
  }
  100% {
    top:75vh;
  }
}

@keyframes moveDown {
  0% {
    top:35vh;
  }
  100% {
    top: 75vh;
  }
}

.move-down {
  -webkit-animation: moveDown ease-in 1;
  -moz-animation: moveDown ease-in 1;
  animation: moveDown ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  animation-duration: 4s;
}

.move-down.delayed {
  -webkit-animation-delay: 4.5s;
  -moz-animation-delay: 4.5s;
  animation-delay: 4.5s;
}


////*******************
@-webkit-keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

.scale-up {
  -webkit-animation: scaleUp ease-in 1;
  -moz-animation: scaleUp ease-in 1;
  animation: scaleUp ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
////*******************
@-webkit-keyframes highlightLabel {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

@keyframes highlightLabel {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

//****move1a
@-webkit-keyframes move1a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
  transform: scale(2) translate(2%,83%);
  }
}

@keyframes move1a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(2%,83%);
  }
}

.move-1a {
  -webkit-animation: move1a ease-in 1;
  -moz-animation: move1a ease-in 1;
  animation: move1a ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}

//****move2a
@-webkit-keyframes move2a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(-85%,-2%);
  }
}

@keyframes move2a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(-85%,-2%);
  }
}

.move-2a {
  -webkit-animation: move2a ease-in 1;
  -moz-animation: move2a ease-in 1;
  animation: move2a ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}

//****move3a
@-webkit-keyframes move3a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(1.5%,-83.5%);
  }
}

@keyframes move3a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(1.5%,-83.5%);
  }
}

.move-3a {
  -webkit-animation: move3a ease-in 1;
  -moz-animation: move3a ease-in 1;
  animation: move3a ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
//****move4a
@-webkit-keyframes move4a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(84.7%,-2.0%);
  }
}

@keyframes move4a {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(2) translate(84.7%,-2.0%);
  }
}

.move-4a {
  -webkit-animation: move4a ease-in 1;
  -moz-animation: move4a ease-in 1;
  animation: move4a ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}


//****move1
@-webkit-keyframes move1 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
  transform: scale(1.6) translate(1%,70%);
  }
}

@keyframes move1 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(1%,70%);
  }
}

.move-1 {
  -webkit-animation: move1 ease-in 1;
  -moz-animation: move1 ease-in 1;
  animation: move1 ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
//****move2
@-webkit-keyframes move2 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
  transform: scale(1.6) translate(-68%,-1.2%);
  }
}

@keyframes move2 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(-68%,-1.2%);
  }
}

.move-2 {
  -webkit-animation: move2 ease-in 1;
  -moz-animation: move2 ease-in 1;
  animation: move2 ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
//****move3
@-webkit-keyframes move3 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(1.2%,-67.2%);
  }
}

@keyframes move3 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(1.2%,-67.2%);
  }
}

.move-3 {
  -webkit-animation: move3 ease-in 1;
  -moz-animation: move3 ease-in 1;
  animation: move3 ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
//****move4
@-webkit-keyframes move4 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(68.3%, -1%);
  }
}

@keyframes move4 {
  0% {
    transform: scale(1) translate(0%,0%);
  }
  100% {
    transform: scale(1.6) translate(68.3%, -1%);
  }
}

.move-4 {
  -webkit-animation: move4 ease-in 1;
  -moz-animation: move4 ease-in 1;
  animation: move4 ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}



////*******************
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: 1;
    visibility: visible;   
  }
}

@-webkit-keyframes fadeInProgress {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .6;
  }
}

@keyframes fadeInProgress {
  0% {
    opacity: 0;
    visibility: hidden;   
  }
  100% {
    opacity: .6;
    visibility: visible;   
  }
}


@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

@-webkit-keyframes fadeOutProgress {
  0% {
    opacity: .6;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutProgress {
  0% {
    opacity: .6;
  }
  100% {
    opacity: 0;
  }
}


@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
     visibility: hidden;   
  }
  40% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
     visibility: hidden;   
  }
  40% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.fade-in {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}

.fade-in-out {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fadeInOut ease-in 1;
  -moz-animation: fadeInOut ease-in 1;
  animation: fadeInOut ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 30s;
  -moz-animation-duration: 30s;
  animation-duration: 30s;
}


.fade-in-fast {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}
.fade-in-progress {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fadeInProgress ease-in 1;
  -moz-animation: fadeInProgress ease-in 1;
  animation: fadeInProgress ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4.5s;
  animation-delay: 4.5s;
}
.fade-out-fast {
  -webkit-animation: fadeOut ease-in 1;
  -moz-animation: fadeOut ease-in 1;
  animation: fadeOut ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}
.fade-out-faster {
  -webkit-animation: fadeOut ease-in 1;
  -moz-animation: fadeOut ease-in 1;
  animation: fadeOut ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}
.fade-out-progress {
  -webkit-animation: fadeOutProgress ease-in 1;
  -moz-animation: fadeOutProgress ease-in 1;
  animation: fadeOutProgress ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}
.fade-out-progress.delayed {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  animation-delay: 30s;
}
.fade-in.in1 {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  animation-delay: 8s;
}
.fade-in-out.in1 {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  animation-delay: 8s;
}

.fade-in.in1A {
  -webkit-animation-delay: 11s;
  -moz-animation-delay: 11s;
  animation-delay: 11s;
}
.fade-in.in1B {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  animation-delay: 13s;
}

.fade-in.in2 {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  animation-delay: 13s;
}

.fade-in.in2A {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  animation-delay: 16s;
}
.fade-in.in2B {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

.fade-in.in3 {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

.fade-in.in3A {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  animation-delay: 20s;
}
.fade-in.in3B {
  -webkit-animation-delay: 22s;
  -moz-animation-delay: 22s;
  animation-delay: 22s;
}

.fade-in.in4 {
  -webkit-animation-delay: 23s;
  -moz-animation-delay: 23s;
  animation-delay: 23s;
}

.fade-in.in4A {
  -webkit-animation-delay: 26s;
  -moz-animation-delay: 26s;
  animation-delay: 26s;
}
.fade-in.in4B {
  -webkit-animation-delay: 28s;
  -moz-animation-delay: 28s;
  animation-delay: 28s;
}

.fade-in.in5 {
  -webkit-animation-delay: 28s;
  -moz-animation-delay: 28s;
  animation-delay: 28s;
}

.fade-in.in5A {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  animation-delay: 32s;
}

.arrow {
  font-size: 36px;
  //color: white;
  //color: beige;
  color: rgb(235, 235, 210);
  position: absolute;
  z-index: 1;
  //text-shadow: 1px 3px 4px #333333;
  //text-shadow: 1px 3px 4px $text-default;
}
#arrow1 {
    left: 62%;
    top: 27%;
}
#arrow2 {
  top: 62%;
  left: 63%;
}
#arrow3 {
  top: 62%;
  left: 30%;
}
#arrow4 {
    left: 30%;
    top: 27%;
}

.LbFrame {
  z-index: 5;
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0%;
  -moz-border-radius: 0%;
  -webkit-border-radius: 0%;
  -khtml-border-radius: 0%;
  text-align: center;
}
.LbFrame:hover {
  cursor: pointer;
}
.LbFrame:hover:before {
    content: "Click to listen";
    background-color: rgba(245,245,220,.55);
    text-align: center;
    margin-top: -5vh;
    position: absolute;
    font-size: 3vh;
    text-align: center;
    margin-left: 10vh;
    padding: 1vh;
    border-radius: 1vh;
    width: 22vh;
}
.LbFrameHide {
  z-index: 6;
  visibility: hidden;
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0%;
  -moz-border-radius: 0%;
  -webkit-border-radius: 0%;
  -khtml-border-radius: 0%;
}

#Lb1 {
  position: absolute;
  padding:14%;
  left: 33.5%;
  top: 4.5%;
}
#hideLb1 {
  position: absolute;
  padding:14%;
  left: 33.5%;
  top: 4.5%;
}

#Lb2 {
  position: absolute;
  padding:14%;  
  left:63.5%;
  top: 35.5%;  
}

#hideLb2 {
  position: absolute;
  padding:14%;  
  left:63.5%;
  top: 35.5%;  
}

#Lb3 {
  position: absolute;
  padding:14%;  
  left:33.5%;
  top:64.7%;  
}
#hideLb3 {
  position: absolute;
  padding:14%;  
  left:33.5%;
  top:64.7%;  
}

#Lb4 {
  position: absolute;
  padding:14%;
  left: 7.5%;
  top: 35.5%;
}
#hideLb4 {
  position: absolute;
  padding:14%;
  left: 7.5%;
  top: 35.5%;
}

.Lb {
  position: absolute;
}
///
.blobs {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  width: 95vh;
  height: 95vh;
  min-width:360px;
  min-height:360px;
  margin: auto;
  filter: blur(20px) contrast(30);
}
.blobsTxt {
  overflow: hidden;
  background-color: white;
  height: 100%;
  width: 100%;
  margin: auto;
  filter: blur(20px) contrast(30);
}
.blobsTxtA {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

.blobsA {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 95vh;
  height: 95vh;
  min-width:360px;
  min-height:360px;
  margin: auto;
}

///
.blobA {
  background: hsla(120, 100%, 50%, 0.71);
  position: absolute;
  padding: 9%;
  width: auto;
  height: auto;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  text-align: center;
}
.blobDiamondA {
  //background: hsla(250, 55%, 50%, .6);
//  background: rgba(81, 57, 110, 0.6);
  position: absolute;
  padding: 8vh;
//  left: calc((99vw - 8vh)/2);  
//  left: 73.5%;  
  //left: 75%;
  //top: calc((99vh - 8vh)/2);
  //top: 56%;
  z-index: 1;
  border-radius: 10%;
  transform: rotate(-45deg);
  margin-left: 6.5vh;
  margin-top: 6.5vh;  
}
.blob1a {
  background: hsla(62, 22.8%, 57.8%, .5);
  top: 10.5%;
  left: 39.8%;
  position: absolute;
}
.blob2a {
  background: rgba(100, 220, 220, 0.5);
  top: 41%;
  left: 71%;
  position: absolute;
}
.blob2b {
  background: rgba(100, 220, 220, 0.5);
  top: 41%;
  left: 71%;
  position: absolute;
  visibility:hidden;
}
.blob3a {
//  background: hsla(245, 27%, 44%, .5);
  background: rgba(87, 82, 142, 0.5);  
  top: 70.5%;
  left: 39.8%;
  position: absolute;
}
.blob4a {
  background: hsla(347, 25%, 66%, .5);
  top: 41%;
  left: 10%;
  position: absolute;
}
.blob5a {
  background: hsla(250, 55%, 50%, .6);
  position: absolute;
  padding: 8vh;
  margin-left: -8vh;
//  margin-top: -8vh;
  margin-top: -12vh;
  z-index: 1;
//  border-radius: 30%;
//  border-radius: 10%;
  transform: rotate(-45deg);
}
//.diamondizer {
//  border-radius: 10%;
//}
.blob6a {
  background: hsla(250, 55%, 50%, .6);
  position: absolute;
  padding: 8vh;  
  margin-left: -8vh;
//  margin-top: -8vh;  
  margin-top: -12vh;  
  z-index: 1;
//  border-radius: 30%;
  border-radius: 10%;
  transform: rotate(-45deg);
}
.blob7a {
  background-color: rgba(225,200,200,.7);
  position: absolute;
  z-index: 1;
  border-radius: 50%;
//  padding: 7vh;
  padding: 4vh;
//  right: 6.7vh;
//  top: 6.7vh; 
  right: 55vh;
  bottom: 0vh;
}
.blob8a {
  background-color: rgba(200,225,225,.7);
  position: absolute;
  z-index: 1;
//  padding: 7vh;
  padding: 4vh;
  border-radius: 50%;
//  right: 6.7vh;
//  top: 30vh; 
    right: 33vh;
    bottom: 0vh;
}
.blob9a {
  background-color: rgba(200,200,225,.7);
  position: absolute;
  z-index: 1;
//  padding: 7vh;
  padding: 4vh;
  border-radius: 50%;
//  right: 6.7vh;
//  top: 53vh; 
    right: 11vh;
    bottom: 0vh;  
}
/////
.blob {
  background: hsla(20, 100%, 50%, 0.71);
//  background: green;
  position: absolute;
  padding: 14%;
  width: auto;
  height: auto;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  text-align: center;
}
.blobDiamond {
//  background: rgba(255, 0, 0, 0.71);  
//  background: rgba(255, 50, 50, 0.71);  
//  padding: 11vh;
  //margin-left: -1.5vh;
  //margin-top: -1.55vh;

  margin-left: 5vh;
  margin-top: 5vh;
  
  padding: 9.5vh;
  border-radius: 30%;
  transform: rotate(-45deg);
//  left: calc((99vw - 11.3vh)/2);  
//  left: 73.5%;  
  //left: 75%;
  //top: calc((99vh - 11.3vh)/2);  
  //top: 56%;
  z-index: 1;
}
.diamondColor1 {
  //background: rgba(255, 50, 50, 0.71);
  background: rgba(255,0,0,.71);
 }
.diamondColor2 {
  //background: rgba(255, 0, 0, 0.71);
  //background: red;
  background: rgba(255,0,0,.81);
 }
.diamondColorA1 {
//  background: rgba(255, 50, 50, 0.71);  
//  background: rgba(81, 57, 110, 0.6);
  background: hsla(250, 55%, 50%, .5);
 }
.diamondColorA2 {
  //background: rgba(255, 0, 0, 0.71);
  //background: red;
  //background: rgb(81, 57, 198);
  //background: purple;
  background: hsla(250, 55%, 50%, .6);
 }

.diamondClicker {
//  background-color: gray;
  padding: 11vh;
  border-radius: 10%;
  transform: rotate(-45deg);
//  left: calc((99vw - 11vh)/2);  
//  left: calc((99vw - 11vh)/1.5);  
//  top: calc((99vh - 11vh)/2);  
//  left: 72%;
//  top: 52.7%;
  //border: solid;
  position: absolute;
  width: auto;
  height: auto;
  z-index: 3;
  //border: solid gray;
  margin-left: 3.6vh;
  margin-top: 3.6vh;
}
#DiamondGo:hover {
  cursor: pointer;
}

.blob1 {
  background: hsla(20, 100%, 50%, 0.71);
  left: 35%;
  top: 5.4%;
  //padding: 14%;
  z-index: 1;
}
.blob2 {
  background: hsla(240, 100%, 50%, 0.71);
  top: 36%;
  left: 66%;
  //padding: 14%;
  z-index: 1;
}
.blob3 {
//  background: hsla(140, 100%, 50%, 0.71);
  background: rgba(0, 255, 85, 0.71);
  top: 65.5%;
  left: 35%;
  z-index: 1;
}
.blob4 {
  background: hsla(0, 100%, 50%, 0.71);
  top: 36%;
  left: 5%;
  //padding: 14%;
  z-index: 1;
}
.blob5 {
  background: hsla(0, 100%, 50%, 0.71);
  padding: 13vh;
  margin-left: -13vh;
  margin-top: -17vh;
  border-radius: 30%;
  transform: rotate(-45deg);
}
.blob6 {
  background: hsla(0, 100%, 50%, 0.71);
  z-index: 1;
  padding: 13vh;
  //padding: 11vh;
  margin-left: -13vh;
//  margin-top: -11vh;
//  margin-top: -16.5vh;
  margin-top: -17vh;
  border-radius: 30%;  
  transform: rotate(-45deg);
}
.blob7 {
  background-color: rgba(255,0,0,.5);  
//  padding: 10vh;
//  padding-left: 7vh;
//  padding-right: 7vh;
//  padding-top: 6vh;
//  padding-bottom: 5vh;
  padding: 5vh;
  right: 55vh;
  bottom: 1.5vh;
  margin-right: -3vh;
  margin-bottom: -1.4vh;
  border-radius: 50%;
  //  right: 4vh;
  //  top: 4vh;
}

.blob8 {
  background-color: rgba(255,255,0,.5);
//    padding: 10vh;
//  padding-left: 7vh;
//  padding-right: 7vh;
//  padding-top: 6vh;
//  padding-bottom: 5vh;
    padding: 5vh;
    border-radius: 50%;
    right: 33vh;
    bottom: 1.5vh;
    margin-right: -1.5vh;
    margin-bottom: -1.5vh;
//    right: 4vh;
//    top: 27vh;
}
.blob9 {
  background-color: rgba(0,0,255,.5);
//    padding: 10vh;
//  padding-left: 7vh;
//  padding-right: 7vh;
//  padding-top: 6vh;
//  padding-bottom: 5vh;
    padding: 5vh;
    border-radius: 50%;
    right: 11vh;
    bottom: 1.5vh;
    margin-right: -1.5vh;
    margin-bottom: -1.5vh;
//    right: 4vh;
//    top: 50vh;
}


.blob7b {
  background: transparent;
  padding: 0;
  z-index: 0;
  border-radius: 50%;
  border:solid 2vw white;  
}
              
            
!

JS

              
                $(document).ready(function() {
});



fontsize = function () {
var fontSize = $("#ra_title").width() * 0.035;
var fontSize2 = $("#ra_square").width() * 0.05;
var fontSize3 = $("#raIntro").width() * 0.0145;  
//var fontSize3 = $("#raIntro").width() * 0.015;  
var fontSize4 = $("#raIntro1").width() * 0.04;  
$("#ra_txt").css('font-size', fontSize);
$(".TxtSmear").css('font-size', fontSize2);
$("#raIntro").css('font-size', fontSize3);
$("#raIntro1").css('font-size', fontSize4);
//$(".blob7").css('padding', wtf);
};

$(window).resize(fontsize);
$(document).ready(fontsize);

//  var ziz = $("#raColMerge").width(); 
//  alert(ziz);

leftbump = function () {
  var leftBump = $("#ra_square").width(); 
  var colHeight = $("#raCol1").height();
  //alert(colHeight);
$("#ra_title").css('left', leftBump);
    $("#ra_BGR").css('left', leftBump);
  $("#raIntro1").css('left', leftBump);
  $("#raCol2").css('height', colHeight);
//    var blockR = $("#raIntro1").width();

};
$(window).resize(leftbump);
$(document).ready(leftbump);

var audioIntro = document.getElementById('audio_intro');
var audioId = document.getElementById('audio_player');
var audioId2 = document.getElementById('audio_player2');
var audioId3 = document.getElementById('audio_player3');
var audioId4 = document.getElementById('audio_player4');

var audioRfIntro = $('#audio_intro');
var audioRf = $('#audio_player');
var audioRf2 = $('#audio_player2');
var audioRf3 = $('#audio_player3');
var audioRf4 = $('#audio_player4');

//Diamond alternative
//  e.preventDefault();
$('#raIntro').addClass('fade-out-faster'); 
//  $('#Diamond1').removeClass('fade-in-fast diamondColor1'); 
//  $('#Diamond1').addClass('burst-out diamondColor2'); 
//  $('#Diamond1A').removeClass('fade-in-fast diamondColorA1'); 
//  $('#Diamond1A').addClass('burst-outA diamondColorA2'); 
//  $('#DiamondGo').removeClass('fade-in-fast'); 
//  $('#DiamondGo').addClass('nope'); 

  setTimeout(function() {
$('#raIntro').addClass('nope'); 
$('#ra_canvas').removeClass('canvas-hide'); 
$('#ra_canvas').addClass('canvas-show'); 
    },2000);

  
  setTimeout(function() {
    $( 'h1' ).letterDrop();
    $('#ra_title').removeClass('nope');        $('#ra_title').addClass('move-down delayed');
    },2200);

  setTimeout(function() {audioRfIntro.get(0).play();},4500);


  setTimeout(function() {
  $('#Navigator').removeClass('nope'); 

  $('#arrow1').addClass('arrow fade-in in1B'); 
  $('#arrow2').addClass('arrow fade-in in2B'); 
  $('#arrow3').addClass('arrow fade-in in3B'); 
  $('#arrow4').addClass('arrow fade-in in4B'); 
  
  $('#arrow1Text').addClass('fade-in in1B'); 
    
  $('#b1').addClass('blob blob1 fade-in in1'); 
  $('#b2').addClass('blob blob2 fade-in in2'); 
  $('#b3').addClass('blob blob3 fade-in in3'); 
  $('#b4').addClass('blob blob4 fade-in in4'); 
  $('#bSelector').removeClass('hider');   $('#bSelector').addClass('fade-in in5'); 
    $('#txt1').addClass('TxtSmear TxtSmear1 fade-in in1A'); 
  $('#txt2').addClass('TxtSmear TxtSmear2 fade-in in2A'); 
  $('#txt3').addClass('TxtSmear TxtSmear3 fade-in in3A'); 
  $('#txt4').addClass('TxtSmear TxtSmear4 fade-in in4A'); 

  $('#b1a').addClass('blobA blob1a fade-in in1A'); 
  $('#b2a').addClass('blobA blob2a fade-in in2A'); 
  $('#b3a').addClass('blobA blob3a fade-in in3A'); 
  $('#b4a').addClass('blobA blob4a fade-in in4A'); 
  $('#b5a').removeClass('hider'); 
  $('#b5a').addClass('fade-in in5A'); 

  $('#Lb1').addClass('LbFrame fade-in in5A'); 
  $('#Lb2').addClass('LbFrame fade-in in5A'); 
  $('#Lb3').addClass('LbFrame fade-in in5A'); 
  $('#Lb4').addClass('LbFrame fade-in in5A'); 

  $('#bSelector6').removeClass('hider'); 
$('#bSelector6').addClass('fade-in in5'); 
  
  $('#b7').addClass('blob blob7 fade-in'); 
  $('#b8').addClass('blob blob8 fade-in'); 
  $('#b9').addClass('blob blob9 fade-in'); 
  
  $('#b6a').removeClass('hider');  $('#b6a').addClass('fade-in in5A');
  
  $('#b7a').addClass('blobA blob7a fade-in in5A'); 
  $('#b8a').addClass('blobA blob8a fade-in in5A'); 
  $('#b9a').addClass('blobA blob9a fade-in in5A');

$('#I1').removeClass('hider');  $('#I1').addClass('scroll-txt intro1');
$('#I2').removeClass('hider');  $('#I2').addClass('scroll-txt intro2');
    
    
  },600);
  
//End diamond alternative


//*EndAudio1
audioId.onended = function() {
//    alert("The audio has ended");
//**SHOW NAV BLOBS (REMOVE FADE-OUTS)  
$('#b1').removeClass('fade-out-fast'); 
$('#b2').removeClass('fade-out-fast'); 
$('#b3').removeClass('fade-out-fast'); 
$('#b4').removeClass('fade-out-fast'); 
$('#b1a').removeClass('fade-out-fast'); 
$('#b2a').removeClass('fade-out-fast'); 
$('#b3a').removeClass('fade-out-fast'); 
$('#b4a').removeClass('fade-out-fast'); 

//**SHOW NAV SCALE (REMOVE SCALE-UP )  
$('#b1').removeClass('move-1');
$('#b1a').removeClass('move-1a');
$('#b2').removeClass('move-2');
$('#b2a').removeClass('move-2a');
$('#b3').removeClass('move-3');
$('#b3a').removeClass('move-3a');
$('#b4').removeClass('move-4');
$('#b4a').removeClass('move-4a');

//**HIDE AUDIO PROGRESS (REMOVE FADE-INS)  
$('#ap1').removeClass('fade-in-fast');
$('#ap2').removeClass('fade-in-fast');
$('#ap3').removeClass('fade-in-fast');
$('#ap4').removeClass('fade-in-fast');
$('#ap1').removeClass('fade-in');
$('#ap2').removeClass('fade-in');
$('#ap3').removeClass('fade-in');
$('#ap4').removeClass('fade-in');
  
//**HIDE AUDIO PROGRESS (ADD FADE OUTS)  
$('#ap1').removeClass('fade-in-progress');
$('#ap1').addClass('fade-out-progress');
$('#ap1').addClass('not-clickable');  
$('#ap2').addClass('not-clickable');
$('#ap3').addClass('not-clickable');
$('#ap4').addClass('not-clickable');
  
//**SHOW NAV BLOBS (ADD FADE IN FAST)  
$('#b1').addClass('fade-in-fast'); 
$('#b2').addClass('fade-in-fast'); 
$('#b3').addClass('fade-in-fast'); 
$('#b4').addClass('fade-in-fast'); 
$('#b1a').addClass('fade-in-fast'); 
$('#b2a').addClass('fade-in-fast'); 
$('#b3a').addClass('fade-in-fast'); 
$('#b4a').addClass('fade-in-fast'); 

//*RESTORE LABELS
$('.TxtSmear1').removeClass('highlight-label'); 
$('.TxtSmear1').addClass('fade-in-fast'); 
  
$('#Lb1').removeClass('fade-out-fast'); 
$('#Lb2').removeClass('fade-out-fast'); 
$('#Lb3').removeClass('fade-out-fast'); 
$('#Lb4').removeClass('fade-out-fast'); 
  
//**SHOW LBS (ADD FADE IN FAST)  
$('#Lb1').addClass('fade-in-fast'); 
$('#Lb2').addClass('fade-in-fast'); 
$('#Lb3').addClass('fade-in-fast'); 
$('#Lb4').addClass('fade-in-fast'); 

document.getElementById("hideLb1").style.visibility = "hidden";  
document.getElementById("hideLb2").style.visibility = "hidden";  
document.getElementById("hideLb3").style.visibility = "hidden";  
document.getElementById("hideLb4").style.visibility = "hidden";  

//*Show selector blobs
$('#bSelector').addClass('fade-in-fast'); 
$('#b5a').addClass('fade-in-fast'); 
$('#bSelector6').addClass('fade-in-fast'); 
$('#b6a').addClass('fade-in-fast'); 
$('#bSelector').removeClass('fade-out-fast'); 
$('#b5a').removeClass('fade-out-fast'); 
$('#bSelector6').removeClass('fade-out-fast'); 
$('#b6a').removeClass('fade-out-fast'); 
//*Show arrows
$('.arrow').removeClass('fade-out-fast'); 
$('.arrow').addClass('fade-in-fast'); 
};

//*EndAudio2
audioId2.onended = function() {
//    alert("The audio has ended");
//**SHOW NAV BLOBS (REMOVE FADE-OUTS)  
$('#b1').removeClass('fade-out-fast'); 
$('#b2').removeClass('fade-out-fast'); 
$('#b3').removeClass('fade-out-fast'); 
$('#b4').removeClass('fade-out-fast'); 
$('#b1a').removeClass('fade-out-fast'); 
$('#b2a').removeClass('fade-out-fast'); 
$('#b3a').removeClass('fade-out-fast'); 
$('#b4a').removeClass('fade-out-fast'); 

//**SHOW NAV SCALE (REMOVE SCALE-UP )  
$('#b1').removeClass('move-1');
$('#b1a').removeClass('move-1a');
$('#b2').removeClass('move-2');
$('#b2a').removeClass('move-2a');
$('#b3').removeClass('move-3');
$('#b3a').removeClass('move-3a');
$('#b4').removeClass('move-4');
$('#b4a').removeClass('move-4a');

//**HIDE AUDIO PROGRESS (REMOVE FADE-INS)  
$('#ap1').removeClass('fade-in-fast');
$('#ap2').removeClass('fade-in-fast');
$('#ap3').removeClass('fade-in-fast');
$('#ap4').removeClass('fade-in-fast');
$('#ap1').removeClass('fade-in');
$('#ap2').removeClass('fade-in');
$('#ap3').removeClass('fade-in');
$('#ap4').removeClass('fade-in');
  
//**HIDE AUDIO PROGRESS (ADD FADE OUTS)  
$('#ap2').removeClass('fade-in-progress');
$('#ap2').addClass('fade-out-progress');
$('#ap2').addClass('not-clickable');  
$('#ap1').addClass('not-clickable');
$('#ap3').addClass('not-clickable');
$('#ap4').addClass('not-clickable');
  
//**SHOW NAV BLOBS (ADD FADE IN FAST)  
$('#b1').addClass('fade-in-fast'); 
$('#b2').addClass('fade-in-fast'); 
$('#b3').addClass('fade-in-fast'); 
$('#b4').addClass('fade-in-fast'); 
$('#b1a').addClass('fade-in-fast'); 
$('#b2a').addClass('fade-in-fast'); 
$('#b3a').addClass('fade-in-fast'); 
$('#b4a').addClass('fade-in-fast'); 

//*RESTORE LABELS
$('.TxtSmear2').removeClass('highlight-label'); 
$('.TxtSmear2').removeClass('highlight-z2'); 
$('.TxtSmear2').addClass('fade-in-fast'); 
  
$('#Lb1').removeClass('fade-out-fast'); 
$('#Lb2').removeClass('fade-out-fast'); 
$('#Lb3').removeClass('fade-out-fast'); 
$('#Lb4').removeClass('fade-out-fast'); 
  
//**SHOW LBS (ADD FADE IN FAST)  
$('#Lb1').addClass('fade-in-fast'); 
$('#Lb2').addClass('fade-in-fast'); 
$('#Lb3').addClass('fade-in-fast'); 
$('#Lb4').addClass('fade-in-fast'); 

document.getElementById("hideLb1").style.visibility = "hidden";  
document.getElementById("hideLb2").style.visibility = "hidden";  
document.getElementById("hideLb3").style.visibility = "hidden";  
document.getElementById("hideLb4").style.visibility = "hidden";  
  
//*Show selector blobs
$('#bSelector').addClass('fade-in-fast'); 
$('#b5a').addClass('fade-in-fast'); 
$('#bSelector6').addClass('fade-in-fast'); 
$('#b6a').addClass('fade-in-fast'); 
$('#bSelector').removeClass('fade-out-fast'); 
$('#b5a').removeClass('fade-out-fast'); 
$('#bSelector6').removeClass('fade-out-fast'); 
$('#b6a').removeClass('fade-out-fast'); 
//*Show arrows
$('.arrow').removeClass('fade-out-fast'); 
$('.arrow').addClass('fade-in-fast'); 
};

//*EndAudio3
audioId3.onended = function() {
//    alert("The audio has ended");
//**SHOW NAV BLOBS (REMOVE FADE-OUTS)  
$('#b1').removeClass('fade-out-fast'); 
$('#b2').removeClass('fade-out-fast'); 
$('#b3').removeClass('fade-out-fast'); 
$('#b4').removeClass('fade-out-fast'); 
$('#b1a').removeClass('fade-out-fast'); 
$('#b2a').removeClass('fade-out-fast'); 
$('#b3a').removeClass('fade-out-fast'); 
$('#b4a').removeClass('fade-out-fast'); 

//**SHOW NAV SCALE (REMOVE SCALE-UP )  
$('#b1').removeClass('move-1');
$('#b1a').removeClass('move-1a');
$('#b2').removeClass('move-2');
$('#b2a').removeClass('move-2a');
$('#b3').removeClass('move-3');
$('#b3a').removeClass('move-3a');
$('#b4').removeClass('move-4');
$('#b4a').removeClass('move-4a');
  
//**HIDE AUDIO PROGRESS (REMOVE FADE-INS)  
$('#ap1').removeClass('fade-in-fast');
$('#ap2').removeClass('fade-in-fast');
$('#ap3').removeClass('fade-in-fast');
$('#ap4').removeClass('fade-in-fast');
$('#ap1').removeClass('fade-in');
$('#ap2').removeClass('fade-in');
$('#ap3').removeClass('fade-in');
$('#ap4').removeClass('fade-in');
  
//**HIDE AUDIO PROGRESS (ADD FADE OUTS)  
$('#ap3').removeClass('fade-in-progress');
$('#ap3').addClass('fade-out-progress');
$('#ap3').addClass('not-clickable');  
$('#ap1').addClass('not-clickable');
$('#ap2').addClass('not-clickable');
$('#ap4').addClass('not-clickable');
  
//**SHOW NAV BLOBS (ADD FADE IN FAST)  
$('#b1').addClass('fade-in-fast'); 
$('#b2').addClass('fade-in-fast'); 
$('#b3').addClass('fade-in-fast'); 
$('#b4').addClass('fade-in-fast'); 
$('#b1a').addClass('fade-in-fast'); 
$('#b2a').addClass('fade-in-fast'); 
$('#b3a').addClass('fade-in-fast'); 
$('#b4a').addClass('fade-in-fast'); 

//*RESTORE LABELS
$('.TxtSmear3').removeClass('highlight-label'); 
$('.TxtSmear3').addClass('fade-in-fast'); 
  
$('#Lb1').removeClass('fade-out-fast'); 
$('#Lb2').removeClass('fade-out-fast'); 
$('#Lb3').removeClass('fade-out-fast'); 
$('#Lb4').removeClass('fade-out-fast'); 
  
//**SHOW LBS (ADD FADE IN FAST)  
$('#Lb1').addClass('fade-in-fast'); 
$('#Lb2').addClass('fade-in-fast'); 
$('#Lb3').addClass('fade-in-fast'); 
$('#Lb4').addClass('fade-in-fast'); 

document.getElementById("hideLb1").style.visibility = "hidden";  
document.getElementById("hideLb2").style.visibility = "hidden";  
document.getElementById("hideLb3").style.visibility = "hidden";  
document.getElementById("hideLb4").style.visibility = "hidden";  
  
//*Show selector blobs
$('#bSelector').addClass('fade-in-fast'); 
$('#b5a').addClass('fade-in-fast'); 
$('#bSelector6').addClass('fade-in-fast'); 
$('#b6a').addClass('fade-in-fast'); 
$('#bSelector').removeClass('fade-out-fast'); 
$('#b5a').removeClass('fade-out-fast'); 
$('#bSelector6').removeClass('fade-out-fast'); 
$('#b6a').removeClass('fade-out-fast'); 
//*Show arrows
$('.arrow').removeClass('fade-out-fast'); 
$('.arrow').addClass('fade-in-fast'); 
};

//*EndAudio4
audioId4.onended = function() {
//    alert("The audio has ended");
//**SHOW NAV BLOBS (REMOVE FADE-OUTS)  
$('#b1').removeClass('fade-out-fast'); 
$('#b2').removeClass('fade-out-fast'); 
$('#b3').removeClass('fade-out-fast'); 
$('#b4').removeClass('fade-out-fast'); 
$('#b1a').removeClass('fade-out-fast'); 
$('#b2a').removeClass('fade-out-fast'); 
$('#b3a').removeClass('fade-out-fast'); 
$('#b4a').removeClass('fade-out-fast'); 

//**SHOW NAV SCALE (REMOVE SCALE-UP )  
$('#b1').removeClass('move-1');
$('#b1a').removeClass('move-1a');
$('#b2').removeClass('move-2');
$('#b2a').removeClass('move-2a');
$('#b3').removeClass('move-3');
$('#b3a').removeClass('move-3a');
$('#b4').removeClass('move-4');
$('#b4a').removeClass('move-4a');
  
//**HIDE AUDIO PROGRESS (REMOVE FADE-INS)  
$('#ap1').removeClass('fade-in-fast');
$('#ap2').removeClass('fade-in-fast');
$('#ap3').removeClass('fade-in-fast');
$('#ap4').removeClass('fade-in-fast');
$('#ap1').removeClass('fade-in');
$('#ap2').removeClass('fade-in');
$('#ap3').removeClass('fade-in');
$('#ap4').removeClass('fade-in');
  
//**HIDE AUDIO PROGRESS (ADD FADE OUTS)  
$('#ap4').removeClass('fade-in-progress');
$('#ap4').addClass('fade-out-progress');
$('#ap4').addClass('not-clickable');  
$('#ap1').addClass('not-clickable');
$('#ap2').addClass('not-clickable');
$('#ap3').addClass('not-clickable');
  
//**SHOW NAV BLOBS (ADD FADE IN FAST)  
$('#b1').addClass('fade-in-fast'); 
$('#b2').addClass('fade-in-fast'); 
$('#b3').addClass('fade-in-fast'); 
$('#b4').addClass('fade-in-fast'); 
$('#b1a').addClass('fade-in-fast'); 
$('#b2a').addClass('fade-in-fast'); 
$('#b3a').addClass('fade-in-fast'); 
$('#b4a').addClass('fade-in-fast'); 

//*RESTORE LABELS
$('.TxtSmear4').removeClass('highlight-label'); 
$('.TxtSmear4').removeClass('highlight-z4'); 
$('.TxtSmear4').addClass('fade-in-fast'); 
  
$('#Lb1').removeClass('fade-out-fast'); 
$('#Lb2').removeClass('fade-out-fast'); 
$('#Lb3').removeClass('fade-out-fast'); 
$('#Lb4').removeClass('fade-out-fast'); 
  
//**SHOW LBS (ADD FADE IN FAST)  
$('#Lb1').addClass('fade-in-fast'); 
$('#Lb2').addClass('fade-in-fast'); 
$('#Lb3').addClass('fade-in-fast'); 
$('#Lb4').addClass('fade-in-fast'); 

document.getElementById("hideLb1").style.visibility = "hidden";  
document.getElementById("hideLb2").style.visibility = "hidden";  
document.getElementById("hideLb3").style.visibility = "hidden";  
document.getElementById("hideLb4").style.visibility = "hidden";  
  
//*Show selector blobs
$('#bSelector').addClass('fade-in-fast'); 
$('#b5a').addClass('fade-in-fast'); 
$('#bSelector6').addClass('fade-in-fast'); 
$('#b6a').addClass('fade-in-fast'); 
$('#bSelector').removeClass('fade-out-fast'); 
$('#b5a').removeClass('fade-out-fast'); 
$('#bSelector6').removeClass('fade-out-fast'); 
$('#b6a').removeClass('fade-out-fast'); 
//*Show arrows
$('.arrow').removeClass('fade-out-fast'); 
$('.arrow').addClass('fade-in-fast'); 
};


//*Click diamond
$('#DiamondGo').click(function(e)
{
  e.preventDefault();
$('#raIntro').addClass('fade-out-faster'); 
  $('#Diamond1').removeClass('fade-in-fast diamondColor1'); 
  $('#Diamond1').addClass('burst-out diamondColor2'); 
  $('#Diamond1A').removeClass('fade-in-fast diamondColorA1'); 
  $('#Diamond1A').addClass('burst-outA diamondColorA2'); 
  $('#DiamondGo').removeClass('fade-in-fast'); 
  $('#DiamondGo').addClass('nope'); 

  setTimeout(function() {
$('#raIntro').addClass('nope'); 
$('#ra_canvas').removeClass('canvas-hide'); 
$('#ra_canvas').addClass('canvas-show'); 
    },2000);

  
  setTimeout(function() {
    $( 'h1' ).letterDrop();
    $('#ra_title').removeClass('nope');        $('#ra_title').addClass('move-down delayed');
    },2200);

  setTimeout(function() {audioRfIntro.get(0).play();},4500);


  setTimeout(function() {
  $('#Navigator').removeClass('nope'); 

  $('#arrow1').addClass('arrow fade-in in1B'); 
  $('#arrow2').addClass('arrow fade-in in2B'); 
  $('#arrow3').addClass('arrow fade-in in3B'); 
  $('#arrow4').addClass('arrow fade-in in4B'); 
  
  $('#arrow1Text').addClass('fade-in in1B'); 
    
  $('#b1').addClass('blob blob1 fade-in in1'); 
  $('#b2').addClass('blob blob2 fade-in in2'); 
  $('#b3').addClass('blob blob3 fade-in in3'); 
  $('#b4').addClass('blob blob4 fade-in in4'); 
  $('#bSelector').removeClass('hider');   $('#bSelector').addClass('fade-in in5'); 
    $('#txt1').addClass('TxtSmear TxtSmear1 fade-in in1A'); 
  $('#txt2').addClass('TxtSmear TxtSmear2 fade-in in2A'); 
  $('#txt3').addClass('TxtSmear TxtSmear3 fade-in in3A'); 
  $('#txt4').addClass('TxtSmear TxtSmear4 fade-in in4A'); 

  $('#b1a').addClass('blobA blob1a fade-in in1A'); 
  $('#b2a').addClass('blobA blob2a fade-in in2A'); 
  $('#b3a').addClass('blobA blob3a fade-in in3A'); 
  $('#b4a').addClass('blobA blob4a fade-in in4A'); 
  $('#b5a').removeClass('hider'); 
  $('#b5a').addClass('fade-in in5A'); 

  $('#Lb1').addClass('LbFrame fade-in in5A'); 
  $('#Lb2').addClass('LbFrame fade-in in5A'); 
  $('#Lb3').addClass('LbFrame fade-in in5A'); 
  $('#Lb4').addClass('LbFrame fade-in in5A'); 

  $('#bSelector6').removeClass('hider'); 
$('#bSelector6').addClass('fade-in in5'); 
  
  $('#b7').addClass('blob blob7 fade-in'); 
  $('#b8').addClass('blob blob8 fade-in'); 
  $('#b9').addClass('blob blob9 fade-in'); 
  
  $('#b6a').removeClass('hider');  $('#b6a').addClass('fade-in in5A');
  
  $('#b7a').addClass('blobA blob7a fade-in in5A'); 
  $('#b8a').addClass('blobA blob8a fade-in in5A'); 
  $('#b9a').addClass('blobA blob9a fade-in in5A');

$('#I1').removeClass('hider');  $('#I1').addClass('scroll-txt intro1');
$('#I2').removeClass('hider');  $('#I2').addClass('scroll-txt intro2');
    
    
  },600);
  
}
);

  setTimeout(function() {
     //alert('go');
    //$('#arrow1Text').addClass('nope');     
    $('.arrow-text').removeClass('fade-in in1B');     
    $('.arrow-text').addClass('fade-out-fast');     
  },40000);





//*Click1
$('#Lb1').click(function(e) {
  e.preventDefault();
//*Hide arrows
$('.arrow').addClass('fade-out-fast'); 
$('.arrow').removeClass('fade-in in1A'); 
$('.arrow').removeClass('fade-in in2A'); 
$('.arrow').removeClass('fade-in in3A'); 
$('.arrow').removeClass('fade-in in4A'); 
  
  
//**HIDE NAV2,3,4 BLOBS (REMOVE FADE-INS)  
$('#b1').removeClass('fade-in-fast'); 
$('#b1a').removeClass('fade-in-fast'); 
$('#bSelector').removeClass('fade-in-fast'); 
$('#b5a').removeClass('fade-in-fast'); 
////
$('#bSelector6').removeClass('fade-in-fast'); 
$('#b6a').removeClass('fade-in-fast'); 
////  
$('#b1').removeClass('fade-in'); 
$('#b1a').removeClass('fade-in'); 
$('#bSelector').removeClass('fade-in'); 
$('#b5a').removeClass('fade-in'); 
$('#bSelector').addClass('fade-out-fast'); 
$('#b5a').addClass('fade-out-fast'); 
////
$('#bSelector6').removeClass('fade-in'); 
$('#b6a').removeClass('fade-in'); 
$('#bSelector6').addClass('fade-out-fast'); 
$('#b6a').addClass('fade-out-fast'); 
////  
//**NORMALIZE NAV LBS 2,3,4 (REMOVE FADE INS, REMOVE HIGHLIGHTS)
$('.TxtSmear2').removeClass('highlight-label');
$('.TxtSmear2').removeClass('highlight-z2');
$('.TxtSmear3').removeClass('highlight-label');
$('.TxtSmear4').removeClass('highlight-label');
$('.TxtSmear4').removeClass('highlight-z4');
$('.TxtSmear1').removeClass('fade-in');
  
$('#Lb1').removeClass('fade-in-fast'); 
$('#Lb2').removeClass('fade-in-fast'); 
$('#Lb3').removeClass('fade-in-fast'); 
$('#Lb4').removeClass('fade-in-fast'); 
$('#Lb1').removeClass('fade-in'); 
$('#Lb2').removeClass('fade-in'); 
$('#Lb3').removeClass('fade-in'); 
$('#Lb4').removeClass('fade-in'); 

//**HIGHLIGHT NAV LBS 1 (ADD FADE OUT FAST, ADD HIGHLIGHT)
$('.TxtSmear1').addClass('highlight-label'); 
$('#Lb1').addClass('fade-out-fast'); 
$('#Lb2').addClass('fade-out-fast'); 
$('#Lb3').addClass('fade-out-fast'); 
$('#Lb4').addClass('fade-out-fast'); 

document.getElementById("hideLb1").style.visibility = "visible";  
document.getElementById("hideLb2").style.visibility = "visible";  
document.getElementById("hideLb3").style.visibility = "visible";  
document.getElementById("hideLb4").style.visibility = "visible";  
  
//**HIDE AUDIO PROGRESS 2, 3, 4 (REMOVE FADE INS)  
$('.audioprogress2').removeClass('fade-in-fast');
$('.audioprogress3').removeClass('fade-in-fast');
$('.audioprogress4').removeClass('fade-in-fast');
$('.audioprogress2').removeClass('fade-in');
$('.audioprogress3').removeClass('fade-in');
$('.audioprogress4').removeClass('fade-in');

//**HIDE AUDIO PROGRESS 2, 3, 4 (ADD FADE OUT FAST)  
$('.audioprogress2').addClass('not-clickable');
$('.audioprogress3').addClass('not-clickable');
$('.audioprogress4').addClass('not-clickable');

//**SHOW AUDIO PROGRESS 1 (REMOVE FADE OUT)  
$('.audioprogress1').addClass('fade-in-progress');
$('.audioprogress1').removeClass('not-clickable');
$('.audioprogress1').removeClass('fade-out-fast');
$('.audioprogress1').removeClass('fade-out-progress');

//**SHOW SELECTION 1 (ADD SCALE UPS) 
$('#b1').addClass('move-1');
$('#b1a').addClass('move-1a');

    audioRf2.get(0).pause();
    audioRf3.get(0).pause();
    audioRf4.get(0).pause();
  $('#audio_control').toggleClass('active');
  if (audioRf.prop('paused') == false) {
    audioRf.get(0).pause();
    $('#audio_control').addClass('pause').removeClass('play');
  } else {
    //audioRf.get(0).play();
    setTimeout(function() {
    audioRf.get(0).play();   $('#audio_control').addClass('play').removeClass('pause');
    }
               ,5000);    
    //$('#audio_control').addClass('play').removeClass('pause');
       $('.audioprogress1').removeClass('ease-none');
  }
});

//*Click2
$('#Lb2').click(function(e) {
  e.preventDefault();
//*Hide arrows
$('.arrow').addClass('fade-out-fast'); 
$('.arrow').removeClass('fade-in in1A'); 
$('.arrow').removeClass('fade-in in2A'); 
$('.arrow').removeClass('fade-in in3A'); 
$('.arrow').removeClass('fade-in in4A'); 
  
//**HIDE SMALL NAV BLOBS (REMOVE FADE-INS)  
$('#b2').removeClass('fade-in-fast'); 
$('#b2a').removeClass('fade-in-fast'); 

$('#bSelector').removeClass('fade-in-fast'); 
$('#b5a').removeClass('fade-in-fast'); 
$('#bSelector6').removeClass('fade-in-fast'); 
$('#b6a').removeClass('fade-in-fast'); 
  
$('#b2').removeClass('fade-in'); 
$('#b2a').removeClass('fade-in'); 

$('#bSelector').removeClass('fade-in'); 
$('#b5a').removeClass('fade-in'); 
$('#bSelector6').removeClass('fade-in'); 
$('#b6a').removeClass('fade-in'); 

$('#bSelector').addClass('fade-out-fast'); 
$('#b5a').addClass('fade-out-fast'); 
$('#bSelector6').addClass('fade-out-fast'); 
$('#b6a').addClass('fade-out-fast'); 

//**NORMALIZE NAV LBS (REMOVE FADE INS, REMOVE HIGHLIGHTS)
$('.TxtSmear1').removeClass('highlight-label');
$('.TxtSmear3').removeClass('highlight-label');
$('.TxtSmear4').removeClass('highlight-label');
$('.TxtSmear4').removeClass('highlight-z4');
$('.TxtSmear2').removeClass('fade-in');
  
$('#Lb1').removeClass('fade-in-fast'); 
$('#Lb2').removeClass('fade-in-fast'); 
$('#Lb3').removeClass('fade-in-fast'); 
$('#Lb4').removeClass('fade-in-fast'); 
$('#Lb1').removeClass('fade-in'); 
$('#Lb2').removeClass('fade-in'); 
$('#Lb3').removeClass('fade-in'); 
$('#Lb4').removeClass('fade-in'); 

//**HIGHLIGHT NAV LB (ADD FADE OUT FAST, ADD HIGHLIGHT)
$('.TxtSmear2').addClass('highlight-label'); 
$('.TxtSmear2').addClass('highlight-z2'); 
$('#Lb1').addClass('fade-out-fast'); 
$('#Lb2').addClass('fade-out-fast'); 
$('#Lb3').addClass('fade-out-fast'); 
$('#Lb4').addClass('fade-out-fast'); 

document.getElementById("hideLb1").style.visibility = "visible";  
document.getElementById("hideLb2").style.visibility = "visible";  
document.getElementById("hideLb3").style.visibility = "visible";  
document.getElementById("hideLb4").style.visibility = "visible";  
  
//**HIDE AUDIO PROGRESS (REMOVE FADE INS)  
$('.audioprogress1').removeClass('fade-in-fast');
$('.audioprogress3').removeClass('fade-in-fast');
$('.audioprogress4').removeClass('fade-in-fast');
$('.audioprogress1').removeClass('fade-in');
$('.audioprogress3').removeClass('fade-in');
$('.audioprogress4').removeClass('fade-in');

$('.audioprogress1').addClass('not-clickable');
$('.audioprogress3').addClass('not-clickable');
$('.audioprogress4').addClass('not-clickable');

//**SHOW AUDIO PROGRESS (REMOVE FADE OUT)  
$('.audioprogress2').addClass('fade-in-progress');
$('.audioprogress2').removeClass('not-clickable');
$('.audioprogress2').removeClass('fade-out-fast');
$('.audioprogress2').removeClass('fade-out-progress');
  
//**SHOW SELECTION (ADD SCALE UPS) 
$('#b2').addClass('move-2');
$('#b2a').addClass('move-2a');

    audioRf.get(0).pause();
    audioRf3.get(0).pause();
    audioRf4.get(0).pause();
  $('#audio_control2').toggleClass('active');
  if (audioRf2.prop('paused') == false) {
    audioRf2.get(0).pause();
    $('#audio_control2').addClass('pause').removeClass('play');
  } else {
    //audioRf.get(0).play();
    setTimeout(function() {
    audioRf2.get(0).play();   $('#audio_control2').addClass('play').removeClass('pause');
    }
               ,5000);    
           $('.audioprogress2').removeClass('ease-none');
  }
});

//*Click3
$('#Lb3').click(function(e) {
  e.preventDefault();
 //*Hide arrows
$('.arrow').addClass('fade-out-fast'); 
$('.arrow').removeClass('fade-in in1A'); 
$('.arrow').removeClass('fade-in in2A'); 
$('.arrow').removeClass('fade-in in3A'); 
$('.arrow').removeClass('fade-in in4A'); 
 
//**HIDE SMALL NAV BLOBS (REMOVE FADE-INS)  
$('#b3').removeClass('fade-in-fast'); 
$('#b3a').removeClass('fade-in-fast'); 

$('#bSelector').removeClass('fade-in-fast'); 
$('#b5a').removeClass('fade-in-fast'); 
$('#bSelector6').removeClass('fade-in-fast'); 
$('#b6a').removeClass('fade-in-fast'); 
  
$('#b3').removeClass('fade-in'); 
$('#b3a').removeClass('fade-in'); 

$('#bSelector').removeClass('fade-in'); 
$('#b5a').removeClass('fade-in'); 
$('#bSelector6').removeClass('fade-in'); 
$('#b6a').removeClass('fade-in'); 

$('#bSelector').addClass('fade-out-fast'); 
$('#b5a').addClass('fade-out-fast'); 
$('#bSelector6').addClass('fade-out-fast'); 
$('#b6a').addClass('fade-out-fast'); 

//**NORMALIZE NAV LBS (REMOVE FADE INS, REMOVE HIGHLIGHTS)
$('.TxtSmear1').removeClass('highlight-label');
$('.TxtSmear2').removeClass('highlight-label');
$('.TxtSmear4').removeClass('highlight-label');
$('.TxtSmear2').removeClass('highlight-z2');
$('.TxtSmear4').removeClass('highlight-z4');
$('.TxtSmear3').removeClass('fade-in');
  
$('#Lb1').removeClass('fade-in-fast'); 
$('#Lb2').removeClass('fade-in-fast'); 
$('#Lb3').removeClass('fade-in-fast'); 
$('#Lb4').removeClass('fade-in-fast'); 
$('#Lb1').removeClass('fade-in'); 
$('#Lb2').removeClass('fade-in'); 
$('#Lb3').removeClass('fade-in'); 
$('#Lb4').removeClass('fade-in'); 

//**HIGHLIGHT NAV LB (ADD FADE OUT FAST, ADD HIGHLIGHT)
$('.TxtSmear3').addClass('highlight-label'); 
$('#Lb1').addClass('fade-out-fast'); 
$('#Lb2').addClass('fade-out-fast'); 
$('#Lb3').addClass('fade-out-fast'); 
$('#Lb4').addClass('fade-out-fast'); 

document.getElementById("hideLb1").style.visibility = "visible";  
document.getElementById("hideLb2").style.visibility = "visible";  
document.getElementById("hideLb3").style.visibility = "visible";  
document.getElementById("hideLb4").style.visibility = "visible";  
  
//**HIDE AUDIO PROGRESS (REMOVE FADE INS)  
$('.audioprogress1').removeClass('fade-in-fast');
$('.audioprogress2').removeClass('fade-in-fast');
$('.audioprogress4').removeClass('fade-in-fast');
$('.audioprogress1').removeClass('fade-in');
$('.audioprogress2').removeClass('fade-in');
$('.audioprogress4').removeClass('fade-in');

$('.audioprogress1').addClass('not-clickable');
$('.audioprogress2').addClass('not-clickable');
$('.audioprogress4').addClass('not-clickable');

//**SHOW AUDIO PROGRESS (REMOVE FADE OUT)  
$('.audioprogress3').addClass('fade-in-progress');
$('.audioprogress3').removeClass('not-clickable');
$('.audioprogress3').removeClass('fade-out-fast');
$('.audioprogress3').removeClass('fade-out-progress');
  
//**SHOW SELECTION (ADD SCALE UPS) 
$('#b3').addClass('move-3');
$('#b3a').addClass('move-3a');

    audioRf.get(0).pause();
    audioRf2.get(0).pause();
    audioRf4.get(0).pause();
  $('#audio_control3').toggleClass('active');
  if (audioRf3.prop('paused') == false) {
    audioRf3.get(0).pause();
    $('#audio_control3').addClass('pause').removeClass('play');
  } else {
    setTimeout(function() {
    audioRf3.get(0).play();   $('#audio_control3').addClass('play').removeClass('pause');
    }
               ,5000);    
           $('.audioprogress3').removeClass('ease-none');
  }
});

//*Click4
$('#Lb4').click(function(e) {
  e.preventDefault();
//*Hide arrows
$('.arrow').addClass('fade-out-fast'); 
$('.arrow').removeClass('fade-in in1A'); 
$('.arrow').removeClass('fade-in in2A'); 
$('.arrow').removeClass('fade-in in3A'); 
$('.arrow').removeClass('fade-in in4A'); 
  
//**HIDE SMALL NAV BLOBS (REMOVE FADE-INS)  
$('#b4').removeClass('fade-in-fast'); 
$('#b4a').removeClass('fade-in-fast'); 

$('#bSelector').removeClass('fade-in-fast'); 
$('#b5a').removeClass('fade-in-fast'); 
$('#bSelector6').removeClass('fade-in-fast'); 
$('#b6a').removeClass('fade-in-fast'); 
  
$('#b4').removeClass('fade-in'); 
$('#b4a').removeClass('fade-in'); 

$('#bSelector').removeClass('fade-in'); 
$('#b5a').removeClass('fade-in'); 
$('#bSelector6').removeClass('fade-in'); 
$('#b6a').removeClass('fade-in'); 

$('#bSelector').addClass('fade-out-fast'); 
$('#b5a').addClass('fade-out-fast'); 
$('#bSelector6').addClass('fade-out-fast'); 
$('#b6a').addClass('fade-out-fast'); 

//**NORMALIZE NAV LBS (REMOVE FADE INS, REMOVE HIGHLIGHTS)
$('.TxtSmear1').removeClass('highlight-label');
$('.TxtSmear2').removeClass('highlight-label');
$('.TxtSmear3').removeClass('highlight-label');
$('.TxtSmear2').removeClass('highlight-z2');
$('.TxtSmear4').removeClass('fade-in');
  
$('#Lb1').removeClass('fade-in-fast'); 
$('#Lb2').removeClass('fade-in-fast'); 
$('#Lb3').removeClass('fade-in-fast'); 
$('#Lb4').removeClass('fade-in-fast'); 
$('#Lb1').removeClass('fade-in'); 
$('#Lb2').removeClass('fade-in'); 
$('#Lb3').removeClass('fade-in'); 
$('#Lb4').removeClass('fade-in'); 

//**HIGHLIGHT NAV LB (ADD FADE OUT FAST, ADD HIGHLIGHT)
$('.TxtSmear4').addClass('highlight-label'); 
$('.TxtSmear4').addClass('highlight-z4'); 
$('#Lb1').addClass('fade-out-fast'); 
$('#Lb2').addClass('fade-out-fast'); 
$('#Lb3').addClass('fade-out-fast'); 
$('#Lb4').addClass('fade-out-fast'); 

document.getElementById("hideLb1").style.visibility = "visible";  
document.getElementById("hideLb2").style.visibility = "visible";  
document.getElementById("hideLb3").style.visibility = "visible";  
document.getElementById("hideLb4").style.visibility = "visible";  
  
//**HIDE AUDIO PROGRESS (REMOVE FADE INS)  
$('.audioprogress1').removeClass('fade-in-fast');
$('.audioprogress2').removeClass('fade-in-fast');
$('.audioprogress3').removeClass('fade-in-fast');
$('.audioprogress1').removeClass('fade-in');
$('.audioprogress2').removeClass('fade-in');
$('.audioprogress3').removeClass('fade-in');

$('.audioprogress1').addClass('not-clickable');
$('.audioprogress2').addClass('not-clickable');
$('.audioprogress3').addClass('not-clickable');

//**SHOW AUDIO PROGRESS (REMOVE FADE OUT)  
$('.audioprogress4').addClass('fade-in-progress');
$('.audioprogress4').removeClass('not-clickable');
$('.audioprogress4').removeClass('fade-out-fast');
$('.audioprogress4').removeClass('fade-out-progress');
  
//**SHOW SELECTION (ADD SCALE UPS) 
$('#b4').addClass('move-4');
$('#b4a').addClass('move-4a');

    audioRf.get(0).pause();
    audioRf2.get(0).pause();
    audioRf3.get(0).pause();
  $('#audio_control4').toggleClass('active');
  if (audioRf4.prop('paused') == false) {
    audioRf4.get(0).pause();
    $('#audio_control4').addClass('pause').removeClass('play');
  } else {
    setTimeout(function() {
    audioRf4.get(0).play();   $('#audio_control4').addClass('play').removeClass('pause');
    }
               ,5000);    
           $('.audioprogress4').removeClass('ease-none');
  }
});


$('#audio_control').click(function(e) {
  e.preventDefault();
$('#audio_control').toggleClass('active');
  if (audioRf.prop('paused') == false) {
    audioRf.get(0).pause();
    $('#audio_control').addClass('pause').removeClass('play');
  } else {
    audioRf.get(0).play();
    //audioRf2.get(0).pause();
    $('#audio_control').addClass('play').removeClass('pause');
    $('.audioprogress').removeClass('ease-none');
  }
});

$('#audio_control2').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  if (audioRf2.prop('paused') == false) {
    audioRf2.get(0).pause();
    $(this).addClass('pause').removeClass('play');
  } else {
    audioRf2.get(0).play();
    //audioRf.get(0).pause();
    $(this).addClass('play').removeClass('pause');
    $('.audioprogress2').removeClass('ease-none');
  }
});

$('#audio_control3').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  if (audioRf3.prop('paused') == false) {
    audioRf3.get(0).pause();
    $(this).addClass('pause').removeClass('play');
  } else {
    audioRf3.get(0).play();
    //audioRf.get(0).pause();
    $(this).addClass('play').removeClass('pause');
    $('.audioprogress3').removeClass('ease-none');
  }
});

$('#audio_control4').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  if (audioRf4.prop('paused') == false) {
    audioRf4.get(0).pause();
    $(this).addClass('pause').removeClass('play');
  } else {
    audioRf4.get(0).play();
    //audioRf.get(0).pause();
    $(this).addClass('play').removeClass('pause');
    $('.audioprogress4').removeClass('ease-none');
  }
});



function audioProgressBar() {

  var duration = audioId.duration,
    preTime = audioId.currentTime,
    audioTimer, percent,
    bar_offset = -502,
    percent = (preTime / duration) * 100,
    dashoffset = percent * (bar_offset / 100),
    finalofst = bar_offset + dashoffset;

  $('#bar').css({
    'stroke-dashoffset': finalofst + 'px'
  });

  if (duration == preTime) {
    $('#audio_control').removeClass('active');
    $('#bar').removeAttr('style');
    $('.audioprogress').addClass('ease-none');
  }

  $('#dashoffset').html('Duration: ' + duration + '<br>Current Time: ' + preTime);

}

function audioProgressBar2() {

  var duration = audioId2.duration,
    preTime = audioId2.currentTime,
    audioTimer, percent,
    bar2_offset = -502,
    percent = (preTime / duration) * 100,
    dashoffset2 = percent * (bar2_offset / 100),
    finalofst = bar2_offset + dashoffset2;

  $('#bar2').css({
    'stroke-dashoffset': finalofst + 'px'
  });

  if (duration == preTime) {
    $('#audio_control2').removeClass('active');
    $('#bar2').removeAttr('style');
    $('.audioprogress2').addClass('ease-none');
  }

  $('#dashoffset2').html('Duration: ' + duration + '<br>Current Time: ' + preTime);

}

function audioProgressBar3() {

  var duration = audioId3.duration,
    preTime = audioId3.currentTime,
    audioTimer, percent,
    bar3_offset = -502,
    percent = (preTime / duration) * 100,
    dashoffset3 = percent * (bar3_offset / 100),
    finalofst = bar3_offset + dashoffset3;

  $('#bar3').css({
    'stroke-dashoffset': finalofst + 'px'
  });

  if (duration == preTime) {
    $('#audio_control3').removeClass('active');
    $('#bar3').removeAttr('style');
    $('.audioprogress3').addClass('ease-none');
  }

  $('#dashoffset3').html('Duration: ' + duration + '<br>Current Time: ' + preTime);

}

function audioProgressBar4() {

  var duration = audioId4.duration,
    preTime = audioId4.currentTime,
    audioTimer, percent,
    bar4_offset = -502,
    percent = (preTime / duration) * 100,
    dashoffset4 = percent * (bar4_offset / 100),
    finalofst = bar4_offset + dashoffset4;

  $('#bar4').css({
    'stroke-dashoffset': finalofst + 'px'
  });

  if (duration == preTime) {
    $('#audio_control4').removeClass('active');
    $('#bar4').removeAttr('style');
    $('.audioprogress4').addClass('ease-none');
  }

  $('#dashoffset4').html('Duration: ' + duration + '<br>Current Time: ' + preTime);

}


;(function($) {

$.fn.letterDrop = function() {
  // Chainability
  return this.each( function() { 
  
  var obj = $( this );
  
  var drop = {
    arr : obj.text().split( '' ),
    
    range : {
      min : 1,
      max : 9
    },
    
    styles : function() {
      var dropDelays = '\n', addCSS;
      
       for ( i = this.range.min; i <= this.range.max; i++ ) {
         dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }\n';  
       }
      
        addCSS = $( '<style>' + dropDelays + '</style>' );
        $( 'head' ).append( addCSS );
    },
    
    main : function() {
      var dp = 0;
      obj.text( '' );
      
      $.each( this.arr, function( index, value ) {

        dp = dp.randomInt( drop.range.min, drop.range.max );
        
        if ( value === ' ' )
          value = '&nbsp';
        
          obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );
        
      });
          
    }
  };
   
  Number.prototype.randomInt = function ( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
  };
  
  
  // Create styles
  drop.styles();


    // Initialise
    drop.main();
  });

};

}(jQuery));


// USAGE
//$( 'h1' ).letterDrop();
//setTimeout(function() {audioRfIntro.get(0).play();},2600);
function showL1() {
    var y = document.getElementById("Lb1");
    y.style.cursor = "pointer";  
    var z = document.getElementById("imgTS1");
$('#imgTS1').css({
    '-webkit-filter': 'grayscale('+5+'%)'
  });  
}

function showL2() {
    var y = document.getElementById("Lb2");
    y.style.cursor = "pointer";  
    var z = document.getElementById("imgTS2");
        z.setAttribute('style', 'filter:contrast(' + 100 + '); -webkit-filter:contrast(' + 100 + '); -moz-filter:contrast(' + 100 + ')');  
}

function reshape1() {
$('#b5a').removeClass('diamondizer'); 
$('#b5a').removeClass('fade-in'); 
$('#b5a').addClass('circlifier'); 
}
function reshape2() {
$('#b5a').removeClass('circlifier'); 
$('#b5a').addClass('diamondizer'); 
}

function reshape1g() {
$('#b5a').removeClass('diamondizer'); 
$('#b5a').removeClass('fade-in'); 
$('#b5a').addClass('circlifier'); 
$('#b3').removeClass('green-down fade-in in3'); 
$('#b3').addClass('green-up'); 
}
function reshape2g() {
$('#b5a').removeClass('circlifier'); 
$('#b5a').addClass('diamondizer'); 
$('#b3').removeClass('green-up');
$('#b3').addClass('green-down');
}


function showL3() {
    var y = document.getElementById("Lb3");
    y.style.cursor = "pointer";  
    var z = document.getElementById("imgTS3");
        z.setAttribute('style', 'filter:contrast(' + 100 + '); -webkit-filter:contrast(' + 100 + '); -moz-filter:contrast(' + 100 + ')');  
}
function showL4() {
    var y = document.getElementById("Lb4");
    y.style.cursor = "pointer";  
    var z = document.getElementById("imgTS4");
        z.setAttribute('style', 'filter:contrast(' + 100 + '); -webkit-filter:contrast(' + 100 + '); -moz-filter:contrast(' + 100 + ')');  
}
function hideL1() {
    var z = document.getElementById("imgTS1");
        z.setAttribute('style', 'filter:invert(' + 'none' + '); -webkit-filter:invert(' + 'none' + '); -moz-filter:invert(' + 'none' + ')');  
}

function hideL2() {
    var z = document.getElementById("imgTS2");
        z.setAttribute('style', 'filter:contrast(' + 'none' + '); -webkit-filter:contrast(' + 'none' + '); -moz-filter:contrast(' + 'none' + ')');  
}

function hideL3() {
    var z = document.getElementById("imgTS3");
        z.setAttribute('style', 'filter:contrast(' + 'none' + '); -webkit-filter:contrast(' + 'none' + '); -moz-filter:contrast(' + 'none' + ')');  
}

function hideL4() {
    var z = document.getElementById("imgTS4");
        z.setAttribute('style', 'filter:contrast(' + 'none' + '); -webkit-filter:contrast(' + 'none' + '); -moz-filter:contrast(' + 'none' + ')');  
}

//var bheight = $("#bSelector").height() * 100;
//var bheight = $("#bSelector").height();
//var bheight = $("#b5a").height();

var blobs1height = $("#blobs1").height() * 100;
// alert(bheight);
var mouseX = $(window).width(),
    mouseY = $(window).height();
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});


var follower = $('#bSelector');
var followerA = $('.blob5a');
var follower6 = $('.blob6');
var follower6A = $('.blob6a');
var xp = 0,
    yp = 0;
var loop = setInterval(function() {
  //xp = mouseX;
  //yp = mouseY;
  xp += (mouseX - xp) / 10;
  yp += (mouseY - yp) / 10;
  
var selBump = $("#ra_square").width();  
  //if ((yp < 110||yp > 210)==true||((xp < 190||xp > 291)==true))  {
  follower.css({
    left: xp,
    top: yp
  });
  followerA.css({
    left: xp,
    top: yp
  });
  follower6.css({
    left: xp - selBump,
    top: yp
  });
  follower6A.css({
    left: xp - selBump,
    top: yp
  });

}, 30);

              
            
!
999px

Console