/* ON WELCOME CLOSE */

.promo.animation-after-welcome{
    position:relative;
    opacity: 1;
    top: 0;
}

h1.animation-after-welcome { position:relative; opacity: 1; top: 0; }
h1.start { opacity: 0; top: 30px; }
h1.stop { transition: opacity 0.4s ease-out, top 0.4s ease-out;}

#promo1.start { opacity: 0; top: 30px; }
#promo1.stop{ transition: opacity 0.6s ease-out 0.2s, top 0.6s ease-out 0.2s;}

h2.animation-after-welcome{ position:relative; opacity: 1; top: 0; }
h2.start{ opacity: 0; top: 30px; }
h2.stop{ transition: opacity 0.8s ease-out 0.4s, top 0.8s ease-out 0.4s; }

.square.animation-after-welcome, .square.scroll-animation { position: relative; top: 0; left: 0;, opacity: 1; }
.square:nth-of-type(8n+2).stop { transition: opacity 0.6s ease-out 0.00s, top 0.4s ease-out 0.00s, left 0.4s ease-out 0.00s, box-shadow 0.3s;}
.square:nth-of-type(8n+3).stop { transition: opacity 0.6s ease-out 0.05s, top 0.4s ease-out 0.05s, left 0.4s ease-out 0.05s, box-shadow 0.3s;}
.square:nth-of-type(8n+4).stop { transition: opacity 0.6s ease-out 0.10s, top 0.4s ease-out 0.10s, left 0.4s ease-out 0.10s, box-shadow 0.3s;}
.square:nth-of-type(8n+5).stop { transition: opacity 0.6s ease-out 0.15s, top 0.4s ease-out 0.15s, left 0.4s ease-out 0.15s, box-shadow 0.3s;}
.square:nth-of-type(8n+6).stop { transition: opacity 0.6s ease-out 0.35s, top 0.4s ease-out 0.35s, left 0.4s ease-out 0.35s, box-shadow 0.3s;}
.square:nth-of-type(8n+7).stop { transition: opacity 0.6s ease-out 0.30s, top 0.4s ease-out 0.30s, left 0.4s ease-out 0.30s, box-shadow 0.3s;}
.square:nth-of-type(8n+0).stop { transition: opacity 0.6s ease-out 0.25s, top 0.4s ease-out 0.25s, left 0.4s ease-out 0.25s, box-shadow 0.3s;}
.square:nth-of-type(8n+1).stop { transition: opacity 0.6s ease-out 0.20s, top 0.4s ease-out 0.20s, left 0.4s ease-out 0.20s, box-shadow 0.3s;}


.square:nth-of-type(8n+2).start { top: -30px; left: -30px; opacity: 0;}
.square:nth-of-type(8n+3).start { top: 30px; left: 0; opacity: 0;}
.square:nth-of-type(8n+4).start { top: -30px; left: 30px; opacity: 0;}
.square:nth-of-type(8n+5).start { top: -30px; left: 30px; opacity: 0;}
.square:nth-of-type(8n+6).start { top: 0; left: -30px; opacity: 0;}
.square:nth-of-type(8n+7).start { top: 30px; left: -30px; opacity: 0;}
.square:nth-of-type(8n+0).start { top: 30px; left: 30px; opacity: 0;}
.square:nth-of-type(8n+1).start { top: 0; left: 30px; opacity: 0;}

/* ON SCROLL ANIMATIONS */

.scroll-animation { position: relative; }

sidebar img.start { opacity: 0; top: 30px; }
sidebar img.stop{ top:0; transition: opacity 0.6s ease-out, top 0.6s ease-out;}

.flowUp.start { opacity: 0; top: 30px; }
.flowUp.stop { top:0; transition: opacity 0.6s ease-out, top 0.6s ease-out;}

.flowDown.start { opacity: 0; top: -30px; }
.flowDown.stop { top:0; transition: opacity 0.6s ease-out, top 0.6s ease-out;}


.fromFade.start { opacity: 0;}
.fromFade.stop { transition: opacity 0.6s ease-out; }

/* EVENT ANIMATIONS */

.modal-page.start { opacity: 0; transform: rotateY( -20deg ); top:100px; transition: transform 0.1s ease-out, opacity 0.1s ease-out; }
.modal-page.stop { opacity: 1; top: 0; transition: transform 0.6s ease-out 0.2s, opacity 0.4s ease-out 0.2s; }
.modal-page.gone { opacity: 0; transform: rotateY( 20deg ); transition: transform 0.6s ease-out, opacity 0.4s ease-out; }

#menu-cover.start {  opacity: 0; transition: opacity 0.6s ease-out 0.4s;}
#menu-cover.stop {  opacity: 1; transition: opacity 0.6s ease-out;}

#banner-cover.start {  opacity: 0; transition: opacity 0.6s ease-out 0.4s;}
#banner-cover.stop {  opacity: 1; transition: opacity 0.6s ease-out;}