@charset "UTF-8";
/* CSS Document */

@font-face{
	font-family:vios;
	src:url("/Admin_Files/Webfonts/ViOS-Bold.otf");
}
.vios-font{
    font-family: Vios, Impact, 'Arial Condensed', sans-serif;
}


body, html{
    background:#000000;
	padding:0;
	margin:0;
    color:#ffffff;
    font-family: acumin-pro, Arial, sans-serif;
    font-weight:200;
    font-size: 1.2vw;
}
@media only screen and (orientation:portrait){
    body{
        font-size: 1.9vh;
    }
}
main{
	position: absolute;
	top:0;
	width: 100vw;
	height: 100vh;
    min-height: 50vw;
	text-align: center;
	background:url("Admin_Files/images/BackgroundGrunge.jpg") no-repeat center center;
    background-size:cover;
    overflow: hidden;
}

a{
    color:#ffffff;
    text-decoration: none;
}
a:hover{
    color: #991b1e;
    opacity:1 !important;
}
a:active{
    color:rgba(72,72,72,0.6);
    opacity:0.35 !important;
}

.displayNone{
    display: none !important;
}

#curtain{
    position: absolute;
    display: block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url("Admin_Files/images/BackgroundGrunge_border.png") no-repeat center center;
    background-size: cover;
                /*linear-gradient(to bottom, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 90%);*/
    pointer-events: none;
}

#tree-wrapper{
    position: absolute;
    display: block;
    width:50%;
    height:auto;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media only screen and (orientation: portrait){
    #tree-wrapper{
        width:95%;
    }   
}
#tree{
    position: relative;
    width:100%;
    height:auto;
    top:0;
    left:0;
}


#tree #vios-tree{
    fill:#991b1e;
}

#short-mission-statement{
    position: absolute;
    width:300%;
    top:46%;
    left:-100vw;
    text-align: center;
    font-size: 1.75em;
}
@media only screen and (orientation: portrait){
    #short-mission-statement{
        font-size:1.2em;
    }
}

#vios-tag-wrap{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transform: translateY(33%);
       -moz-transform: translateY(33%);
        -ms-transform: translateY(33%);
         -o-transform: translateY(33%);
            transform: translateY(33%);
    pointer-events: none;
}

#vios-tag-box{
    position: absolute;
    display: block;
    height: 30%;
    width: auto;
    top:0;
    left:50%;
    -webkit-transform-origin: center top;
       -moz-transform-origin: center top;
        -ms-transform-origin: center top;
         -o-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: translate(-55%, 0);
       -moz-transform: translate(-55%, 0);
        -ms-transform: translate(-55%, 0);
         -o-transform: translate(-55%, 0);
            transform: translate(-55%, 0);
    pointer-events: auto;
}
@media only screen and (orientation: portrait){
    #vios-tag-box{
        width:80%;
        height:auto;
    }
}

#viosTag{
    position: relative;
    top:0;
    left:0;
    width:auto;
    height:100%;
}
@media only screen and (orientation: portrait){
    #viosTag{
        width:100%;
        height: auto;
    }
}
#viosTag .solid{
    fill:#ffffff;
}
#viosTag .dot{
    fill:#991b1e;
}

#vios-tag-box .vios-sub-header{
    position: absolute;
    width:200%;
    font-size: 2.5em;
    color:#991b1e;
}

#vios-tag-box #the{
    top:-1.15em;
    left:0;
    text-align: left;
}

#vios-tag-box #project{
    bottom:-1em;
    right:0;
    text-align: right;
}

#quick-links{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events: none;
}

#quick-links a{
    display: block;
    position: absolute;
    font-size: 2em;
    opacity:0;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}


#click-tag{
    font-size: 1.5em;
    position: absolute;
    top:50%;
    left:47%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity:0.75;
    pointer-events: none;
}

#text-content{
    font-size:1.25em;
    position: relative;
    width:40%;
    height:auto;
    top:0;
    
    line-height: 2.5em;
    letter-spacing: 0.15em;
    margin-right:auto;
    margin-left: auto;
    pointer-events: none;
}
@media only screen and (orientation: portrait){
    #text-content{
        width: 85%;
    }
}

#text-content p{
    margin-bottom: 3em;
}
#text-content::before{
    content:"";
    display: block;
    width:100%;
    height:120vh;
}

/* -----
    READY STYLING
----- */

#quick-links.ready a{
    top: auto;
    left: auto;
    opacity:0.5;
    pointer-events: auto;
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}

#quick-links.ready a[href="donate/"]{
    top: 3em;
    left:3em;
}

#quick-links.ready a[href="concerts/"]{
    top:  3em;
    right:3em;
}

#quick-links.ready a[href="basics/"]{
    bottom: 3em;
    left:   3em;
}

#quick-links.ready a[href="https://theviosproject.bandcamp.com"]{
    bottom: 3em;
    right:   3em;
}

@media only screen and (orientation: portrait){
    #quick-links.ready a[href="donate/"]{
        top: auto;
        bottom: 3em;
        left:   2em;
    }

    #quick-links.ready a[href="concerts/"]{
        top:auto;
        left:auto;
        bottom:  3em;
        right:   2em;
    }

    #quick-links.ready a[href="basics/"]{
        bottom: 1em;
        left:   2em;
    }

    #quick-links.ready a[href="https://theviosproject.bandcamp.com"]{
        bottom: 1em;
        right:  2em;
    }    
}

#tree-wrapper.ready{
    -webkit-transition: width 0.4s, height 0.4s;
       -moz-transition: width 0.4s, height 0.4s;
         -o-transition: width 0.4s, height 0.4s;
            transition: width 0.4s, height 0.4s;
}

#tree-wrapper.ready:hover{
    width:55% !important;
}
@media only screen and (orientation: portrait){
    #tree-wrapper.ready:hover{
        width:105% !important;
    }
}

-webkit-@keyframes cyclerainbow{
    0%   {fill:#991b1e;}
    20%  {fill:#121C71;}
    40%  {fill:#03BC9C;}
    60%  {fill:#E3CF00;}
    80%  {fill:#ECECEC;}
    100% {fill:#991b1e;}
}
-moz-@keyframes cyclerainbow{
    0%   {fill:#991b1e;}
    20%  {fill:#121C71;}
    40%  {fill:#03BC9C;}
    60%  {fill:#E3CF00;}
    80%  {fill:#ECECEC;}
    100% {fill:#991b1e;}
}
@keyframes cyclerainbow{
    0%   {fill:#991b1e;}
    20%  {fill:#121C71;}
    40%  {fill:#03BC9C;}
    60%  {fill:#E3CF00;}
    80%  {fill:#ECECEC;}
    100% {fill:#991b1e;}
}
#tree-wrapper.ready:hover #vios-tree{
    -webkit-animation: cyclerainbow 10s linear 0s infinite;
       -moz-animation: cyclerainbow 10s linear 0s infinite;
            animation: cyclerainbow 10s linear 0s infinite;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}


-webkit-@keyframes changetored{
    from {fill:#ffffff;}
    to   {fill:#991b1e;}
}
-moz-@keyframes changetored{
    from {fill:#ffffff;}
    to   {fill:#991b1e;}
}
@keyframes changetored{
    from {fill:#ffffff;}
    to   {fill:#991b1e;}
}
-webkit-@keyframes changetowhite{
    from {fill:#991b1e;}
    to   {fill:#ffffff;}
}
-moz-@keyframes changetowhite{
    from {fill:#991b1e;}
    to   {fill:#ffffff;}
}
@keyframes changetowhite{
    from {fill:#991b1e;}
    to   {fill:#ffffff;}
}

#vios-tag-box.ready{
}
#vios-tag-box.ready .vios-sub-header{
    top: auto !important;
    bottom:0 !important;
    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}
#vios-tag-box.ready .vios-sub-header div{
    margin:0 !important;
    -webkit-transition: margin 3s;
       -moz-transition: margin 3s;
         -o-transition: margin 3s;
            transition: margin 3s;
}

#vios-tag-box.ready #the{
    left: -200%;
    text-align: right;
}

#vios-tag-box.ready #project{
    right: -205%;
    text-align: left;
}

#vios-tag-box.ready:hover path{
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

#vios-tag-box.ready:hover #v{
    -webkit-animation: changetored 0.5s linear 0s 1;
       -moz-animation: changetored 0.5s linear 0s 1;
            animation: changetored 0.5s linear 0s 1;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
#vios-tag-box.ready:hover #i{
    -webkit-animation: changetored 0.4s linear 0.1s 1;
       -moz-animation: changetored 0.4s linear 0.1s 1;
            animation: changetored 0.4s linear 0.1s 1;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
#vios-tag-box.ready:hover #o{
    -webkit-animation: changetored 0.4s linear 0.2s 1;
       -moz-animation: changetored 0.4s linear 0.2s 1;
            animation: changetored 0.4s linear 0.2s 1;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
#vios-tag-box.ready:hover #s{
    -webkit-animation: changetored 0.4s linear 0.3s 1;
       -moz-animation: changetored 0.4s linear 0.3s 1;
            animation: changetored 0.4s linear 0.3s 1;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
#vios-tag-box.ready:hover #dot{
    -webkit-animation: changetowhite 0.4s linear 0.4s 1;
       -moz-animation: changetowhite 0.4s linear 0.4s 1;
            animation: changetowhite 0.4s linear 0.4s 1;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

#vios-tag-box.ready:hover .vios-sub-header{
    opacity: 1 !important;
}

#vios-tag-box.ready:hover #the div{
    margin-left: 0.5em !important;
}

#vios-tag-box.ready:hover #project div{
    margin-right: 0.5em !important;
}