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

#debug{display: none;
    position: fixed;
    z-index: 9999;
    background: rgba(94,94,94,0.83);
    color:#ffffff;
    right:0;
    top:0;
    width:20em;
    height:10em;
    overflow-y: scroll;
    pointer-events: none;
    font-size:10px;
}

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

.hope-font{
    font-family: 'sweet-sans-pro' ,sans-serif !important;
    font-weight: 700;
    font-style: normal;
    color:#DBC738;
    font-size:1.3em;
    line-height: 0.6em;
    letter-spacing: -0.1em;
}

html{
    background:#000000;
}


h1,h2{
    font-family: Vios, Impact, 'Arial Condensed', sans-serif;
    font-weight: normal;
}

h3, h4, h5{
    font-family:"acumin-pro", 'Helvetica', sans-serif;
}

*{
	padding:0;
	margin:0;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
}

body{
    z-index:-10;
    overflow-x: hidden;
	background:#000;
	color:#fff;
	font-weight:200;
    font-size: 1.9vh;
}


p{
    font-family: acumin-pro, sans-serif;
    font-size: 1.25em;
    font-weight: 500;
	margin:0.9em 0 1.25em;
}

a{
    font-family: acumin-pro, sans-serif;
	text-decoration:none;
	color:#959595;
}
a:hover{
	color:#991b1e;
}

hr{
	margin:1em auto;

}

#back{
    position: fixed;
    display: block;
    width:100vw;
    height: 100vh;
    top:0;
    left:0;
    background: url("../images/Background_3.jpg") no-repeat center center;
    background-size: cover;
}


:focus{
	outline:0;
	filter: alpha(opacity=100);
		opacity:1;
}

/* style classes */

.focused{
	filter: alpha(opacity=100) !important;
	opacity:1 !important;
 	/*border:#4CCF0B 1px solid;*/
}

.highlight{
	color:#991b1e;
}

.accent{
	font-weight:500;
	font-size:20pt;
}

.no-scroll{
    overflow: hidden;
}.no-scroll.ios{
    height:100vh !important;
}

.centered{
	text-align:center;
}

.center-vert{
    position:absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

.center-horz{
    position: absolute;
    left:50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}

.center-mid{
    position: absolute;
    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%);
}

.clickable{
    pointer-events: auto;
}

.huge{
	font-size:30pt;
}

.tiny{
	font-size: 0.75em;
	color:#666666;
}

.quote{
	padding:0 10%;
	font-style:italic;
}

.footnote{
	font-size:7pt;
	font-style:italic;
}

.headerImg{
	position:relative;
	margin-left:-30%;
	margin-bottom:25px;
	width:100vw;
	height:auto;
	
}

.blink{
    animation: blinking 2s ease 1s infinite alternate;
}
@keyframes blinking{
    from {box-shadow: 0 0 0 0 #ffffff;}
    to {box-shadow: 0 0 10px 1px #ffffff;}
}

/* Styling jquery classes */
.backBlurDark
{
	-webkit-filter:blur(15px) brightness(.8);
		    filter:blur(15px) brightness(.8);
}

.faint{
	opacity:.05 !important;
	filter: alpha(opacity=.05) !important;
}

.displayNone{
	display:none !important;
}

.invisible{
	visibility:hidden;
    pointer-events: none;
}

.ghost{
	opacity: 0.0 !important;
	filter: alpha(opacity=0) !important;
    pointer-events: none !important;
}

.reveal{
    opacity: 1 !important;
    filter: alpha(opacity=1) !important;
    pointer-events: auto;
}

.in{
}

.selected:hover{
	cursor:pointer;
}

.displayOn{
	display:block !important;
}

/*for testing purposes only*/
.test{
	border:#1DD439 1px solid;
}

/* ——————————————————————————————————————————— */
/* ——————————————  Menu Button  —————————————— */
/* ——————————————————————————————————————————— */
    /*   text     */
    /*  display   */
    /*   style    */
    /*   other    */
    /* transforms */


nav{
    /*   text     */
    /*  display   */
    position: fixed;
    display: block;
    bottom:0;
    left:0;
    right:0;
    top:0;
    width:100vw;
    height:100vh;
    /*   style    */
    z-index: 950;
    opacity: 1;
    /*   other    */
    overflow: visible;
    /* transforms */
    -webkit-transform-origin: bottom center;
       -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
         -o-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scale(0.1, 0.1) translateZ(950px);
       -moz-transform: scale(0.1, 0.1) translateZ(950px);
        -ms-transform: scale(0.1, 0.1) translateZ(950px);
         -o-transform: scale(0.1, 0.1) translateZ(950px);
            transform: scale(0.1, 0.1) translateZ(950px);
    -webkit-transition: transform 0.7s;
       -moz-transition: transform 0.7s;
         -o-transition: transform 0.7s;
            transition: transform 0.7s;
}
nav.open{
    -webkit-transform: scale(1,1) translateZ(950px);
       -moz-transform: scale(1,1) translateZ(950px);
        -ms-transform: scale(1,1) translateZ(950px);
         -o-transform: scale(1,1) translateZ(950px);
            transform: scale(1,1) translateZ(950px);
}

#nav-background{
    position: fixed;
    background: rgba(0,0,0,0.7);
    background: radial-gradient(ellipse farthest-side at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    display: block;
    bottom:0;
    left:0;
    right:0;
    width:100vw;
    height:6em;
    pointer-events: none;
                         z-index: 940;
    -webkit-transform: translateZ(940px);
       -moz-transform: translateZ(940px);
        -ms-transform: translateZ(940px);
         -o-transform: translateZ(940px);
            transform: translateZ(940px);
}

/* —— #start-button —— */

nav #start-button{
    /*   text     */
    /*  display   */
    display: block;
    position: absolute;
    height: 100vh;
    width:100vw;
    min-width:187vh;
    bottom: -15%;
    left:50%;
    /*   style    */
    background: none;
    outline: none;
    border:none;
    filter: drop-shadow(0 0 0.5em #000000);
    /*   other    */
    cursor: pointer;
    /* transforms */
    -webkit-transition: background 0.1s 0s;
       -moz-transition: background 0.1s 0s;
         -o-transition: background 0.1s 0s;
            transition: background 0.1s 0s;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}
nav.open #start-button{
    bottom:0%;
    -webkit-transition: background 1s 0.5s;
       -moz-transition: background 1s 0.5s;
         -o-transition: background 1s 0.5s;
            transition: background 1s 0.5s;
    background: rgba(21, 21, 21, 0.75);
}

nav #start-button svg{
    height: 100%;
    width: auto;
    margin-left:5%;
}

nav #start-button svg path{
    fill: #ffffff;
    -webkit-transition: fill 0.5s;
       -moz-transition: fill 0.5s;
         -o-transition: fill 0.5s;
            transition: fill 0.5s;
}

nav #start-button:hover svg path, nav.open #start-button:hover svg path{
    fill:#991b1e;
}
nav.open #start-button svg path{
    fill: #400E10;
}

/* —— #menu title —— */

nav #start-button #menu-title{
    /*   text     */
    font-family: 'vios',Impact,sans-serif;
    font-size: 25vh;
    text-align: center;
    color:#ffffff;
    /*  display   */
    display: block;
    position: absolute;
    top:-0.85em;
    width:100%;
    /*   style    */
    /*   other    */
    /* transforms */
    -webkit-transition: color 0.5s;
       -moz-transition: color 0.5s;
         -o-transition: color 0.5s;
            transition: color 0.5s;
}
nav #start-button:hover #menu-title{
    color: #991b1e;
}
nav #start-button #menu-title span{
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
}
nav.open #start-button #menu-title span{
    opacity:0;
}


nav.open #start-button #menu-title::before{
    content:'';
    position: absolute;
    height:0.2em;
    width:3%;
    top:1.7em;
    left:47.03%;
    border-top:#ffffff solid 0.03em;
    -webkit-transform: skew(0, 30deg);
       -moz-transform: skew(0, 30deg);
        -ms-transform: skew(0, 30deg);
         -o-transform: skew(0, 30deg);
            transform: skew(0, 30deg);
}

nav.open #start-button #menu-title::after{
    content:'';
    position: absolute;
    height:0.2em;
    width:3%;
    top:1.7em;
    right:47%;
    border-top:#ffffff solid 0.03em;
    -webkit-transform: skew(0, -30deg);
       -moz-transform: skew(0, -30deg);
        -ms-transform: skew(0, -30deg);
         -o-transform: skew(0, -30deg);
            transform: skew(0, -30deg);
}

/* ——— #menu styling ——— */
#menu{/*border: aqua solid 2px; box-sizing: border-box;*/
    /*    text    */
    font-family: 'vios',Impact,sans-serif;
    text-align: center;
    font-size: 2.2vh;
    /*  display   */
    position:absolute;
    bottom:3vw;
    left:0;
    width:100%;
    opacity:0;
    visibility: hidden;
    /*   style    */
    /*   other    */
    pointer-events: none;
    /* transforms */
    transition: opacity 1s;
}
nav.open #menu{
    visibility: visible;
    opacity:1;
    pointer-events: auto;
}

#menu li.menu-category{/*background: rgba(22,108,222,0.33);border:yellow solid 2px;*/
    /*    text    */
    font-size:3.5em;
    /*  display   */
    margin-bottom: 0.1em;
    display: block;
    min-height:2em;
    /*   style    */
    /*   other    */
    overflow-y: hidden;
    /* transforms */
    -webkit-transition: height 0.3s, opacity 0.5s;
       -moz-transition: height 0.3s, opacity 0.5s;
         -o-transition: height 0.3s, opacity 0.5s;
            transition: height 0.3s, opacity 0.5s;
}

#menu li.menu-category .category-wrap{
    /*background: rgba(230,79,81,0.50);*/
    display: block;
    position: relative;
    height: 1.6em;
    width: auto;
    min-width:50%;
    pointer-events: none;
}

#menu #discover h1{
    letter-spacing:0.1em;
}
#menu #invest h1{
    letter-spacing: 0.2em;
}

#menu li.menu-category:first-child .category-wrap, #menu li.menu-category:nth-of-type(3) .category-wrap{
    text-align: right;
    float: left;
    left:0;
}
#menu li.menu-category:nth-of-type(2) .category-wrap{
    text-align: left;
    float:right;
    right:0;
}

#menu li.menu-category .category-wrap h1{
    /*border: yellow solid 2px; box-sizing: border-box;*/
    padding: 0em 0.1em;
    padding-bottom: 0em !important;
    display: inline-block;
    width: 4.4em;
}

#menu li.menu-category ul{/*background: rgba(24,212,75,0.49);*/
    /*    text    */
    /*  display   */
    margin:0.02em 0 0;
    width: 50%;
    margin-top:0.15em;
    /*   style    */
    /*   other    */
    /* transforms */
}
#menu li.menu-category:first-child ul, #menu li.menu-category:nth-of-type(3) ul{
    float: right;
}
#menu li.menu-category:nth-of-type(2) ul{
    float: left;
}

#menu li ul li{/*background:rgba(12,30,93,0.46);*/
    /*    text    */
    font-size:0.55em;
    /*  display   */
    display: block;

    list-style: none;
    /*   style    */
    padding:0 0.3em;
    /*   other    */
    
    /* transforms */
}
#menu li.menu-category:first-child ul li, #menu li.menu-category:nth-of-type(3) ul li{
    text-align: left;
}
#menu li.menu-category:nth-of-type(2) ul li{
    text-align: right;
}
 /* —— POINTER EVENTS —— */
nav.open #menu li.menu-category .category-wrap h1, nav.open #menu li ul li{
    pointer-events: auto;
}

#menu li ul li a{
    /*    text    */
    font-family: 'vios', Impact, sans-serif !important;
    
    /*  display   */
    /*   style    */
    /*   other    */
    /* transforms */
    -webkit-transition: color 0.8s;
       -moz-transition: color 0.8s;
         -o-transition: color 0.8s;
            transition: color 0.8s;
}

#menu li ul li .menu-announcement{/*background:rgba(215,203,82,0.41);*/
    font-size: 0.8em;
    display: inline-block;
    position: relative;
    width:auto;
    left:3em;
}

/* ——— menu hover highlighting ——— */
#menu:hover li.menu-category{
    opacity: 0.4;
}

#menu li.menu-category:hover{
    opacity: 1;
}
#menu li.menu-category:hover a{
    color:#ffffff;
    
}

#menu li.menu-category:hover a:hover {
    -webkit-transition: color 0.2s;
       -moz-transition: color 0.2s;
         -o-transition: color 0.2s;
            transition: color 0.2s;
    color:#991b1e;
}



#contact .wrap{
    position: relative;
    font-size:0.2em;
    width:95%;
    max-width: 1000px;
    margin:1em auto;
    background: rgba(0,0,0,0.25);border:yellow thin solid;
    height: auto;
    border-radius: 1em;
    overflow: hidden;
}


#contact form{
    pointer-events: auto;border:blue solid thin;
    width:100%;
    height:auto;
    max-height: 100%;
    overflow-y: scroll;
    margin:0 auto;
    font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.5em;
    position: relative;
    padding:2% 2% 4%;
    border-radius: 1em;
}
#contact form .contact-table{
    width:auto;
    height:auto;
    padding-bottom: 0.5em;
    position: relative;
}
#contact form .contact-table .contact-cell{
    display: block;
    float: left;
    position: relative;
    padding: 0.25rem 0;
    margin-right: 0rem;
}
#contact form .contact-table .contact-cell.half-line{
    width:49%;
    min-width: 13.49em;
}
#contact form .contact-table .contact-cell.full-line{
    clear:both;
    width:100%;
}

#contact form .contact-cell:nth-of-type(2), #contact form .contact-cell:nth-of-type(4){
    margin-left:2%;
}
#contact form input[type="text"], #contact form input[type="email"], #contact form textarea{
    font-size:1.1em;
    border-radius: 0.5em;
    background:rgba(0,0,0,0.35);
    border:#AAAAAA solid 2px;
    color:#ffffff;
    width:100%;
    margin-top:1.35rem;
    outline:none;
    padding:0.15em 0.35em;
    -webkit-transition: background 0.5s, border 0.5s;
       -moz-transition: background 0.5s, border 0.5s;
         -o-transition: background 0.5s, border 0.5s;
            transition: background 0.5s, border 0.5s;
}

#contact form textarea{
    font-size:0.8em;
}
#contact form label{
    font-size:1rem;
    margin:0;
    padding:0;
    position: absolute;
    top:0;
    left:0;
    -webkit-transition: font-weight 0.5s, color 0.5s;
       -moz-transition: font-weight 0.5s, color 0.5s;
         -o-transition: font-weight 0.5s, color 0.5s;
            transition: font-weight 0.5s, color 0.5s;
}
@media only screen and (max-width: 499px){
    #contact form label{
        font-size: 1.5rem;
    }
    #contact form .contact-cell:nth-of-type(2), #contact form .contact-cell:nth-of-type(4){
        margin-left:0;
    }
}
#contact form label[for="email-list"]{
    font-size:0.75em;
    position: relative;
}
#contact form input#email-list+label::before{
    content: "⬛︎";
    display: inline-block;
    width:1.92em;
    height:1.92em;
    border:#ffffff solid 0.2em;
    margin-top:0.35em;
    color:rgba(153,27,30,0);
    text-align: center;
    font-size: 0.8em;
    box-sizing: border-box;
    padding:0 0 0.2em;
    -webkit-transition: color 0.5s, border 0.5s;
       -moz-transition: color 0.5s, border 0.5s;
         -o-transition: color 0.5s, border 0.5s;
            transition: color 0.5s, border 0.5s;
}
#contact form input#email-list:focus+label::before,#contact form input#email-list+label:hover::before{
    border-color: #991b1e;
}
#contact form input#email-list:checked+label::before{
    content: "⬛︎";
    color:rgba(153,27,30,1.0);
    border-color: #991b1e;
}
#contact form input#email-list:checked+label{
    color:#FFBDBE;
}

#contact form input[type="text"]:focus, #contact form input[type="email"]:focus, #contact form textarea:focus{
    border-color:#991b1e;
    background-color:rgba(15,2,2,0.75);
}
#contact form input[type="text"]:focus+label, #contact form input[type="email"]:focus+label, #contact form textarea:focus+label{
    color:#FFBDBE;
    font-weight: 700;
}

#contact form #send{
    color:#ffffff;
    width:30%;
    height:1.35em;
    font-size:1em;
    background:rgba(0,0,0,0.35);
    border-radius: 0.5em;
    border:#AAAAAA solid 2px;
    outline:none;
}
#contact form #send:disabled{
    color:#5A5A5A;
    background: rgba(15,15,15,0.50);
    cursor: not-allowed;
    border:#5A5A5A solid thin;
}
#contact form #send:not(:disabled):hover, #contact form #send:not(:disabled):focus{
    color:#991b1e;
}
#contact form #send:not(:disabled):active{
    border-color:#991b1e;
    color:rgba(153,27,30,0.5);
    background:rgba(0,0,0,0.75);
}
#contact form label span.error{
    font-size: 0.7em;
    color: red;
}
#contact form input[type="text"].error, #contact form input[type="email"].error, #contact form textarea.error{
    border:red solid 3px;
    background:rgba(62,11,12,0.45);
}

#contact #contact-overlay{
    position: absolute;
    margin:0 auto;
    padding:2em;
    height:100%;
    width:100%;
    text-align: center;
    background: rgba(25,25,25,0.95);
    border-radius: 1em;
    pointer-events: auto;
    -webkit-transition:opacity 0.5s;
       -moz-transition:opacity 0.5s;
         -o-transition:opacity 0.5s;
            transition:opacity 0.5s;
}

#contact #contact-overlay #new-message-button{
    font-size:1.25em;
    background:rgba(0,0,0,0.25);
    color:#ffffff;
    padding:0.5em 0.5em 0.25em;
    border: white solid 2px;
    border-radius:0.5em;
    pointer-events: auto;
    cursor: pointer;
}

#contact #contact-overlay #new-message-button:hover{
    color:#991b1e;
    border-color:#991b1e;
}

#contact #contact-overlay #new-message-button:active{
    color:#413434;
}

/* ----------
    HOME BUTTON
   ---------- */
    /*   text     */
    /*  display   */
    /*   style    */
    /*   other    */
    /* transforms */

#home{/*box-sizing: border-box;border:green solid 2px;*/
    /*   text     */
    text-align: center;
    
    /*  display   */
    position: fixed;
    display: block;
    top:0;
    left:0vw;
    width:100vw;
    height: 4em;
    z-index: 960;
    -webkit-transform: translateZ(960px);
       -moz-transform: translateZ(960px);
         -o-transform: translateZ(960px);
            transform: translateZ(960px);
    
    /*   style    */
    background: none;
    
    /*   other    */
    pointer-events: none;
    
    /* transforms */
    
}

#home .background{
    position: absolute;
    display: block;
    height: 6em;
    width: 100%;
    background: rgba(0,0,0,0.7);
    background: radial-gradient(ellipse farthest-side at 50% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    /*background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*/
    top:0;
    left:0;
}

#home-button{/*border:cyan solid 2px; box-sizing: border-box;*/
    /*   text     */
    /*  display   */
    display:inline-block;
    position: relative;
    height: 100%;
    width:8em;
    /*   style    */
    
    /*   other    */
    pointer-events: auto;
    /* transforms */
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}

#home-button span{
    position: absolute;
    bottom: 0;
    letter-spacing: 4em;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: letter-spacing 2s ease-out, opacity 0.5s, left 2s ease-out, right 2s ease-out, padding 2s ease-out;
       -moz-transition: letter-spacing 2s ease-out, opacity 0.5s, left 2s ease-out, right 2s ease-out, padding 2s ease-out;
         -o-transition: letter-spacing 2s ease-out, opacity 0.5s, left 2s ease-out, right 2s ease-out, padding 2s ease-out;
            transition: letter-spacing 2s ease-out, opacity 0.5s, left 2s ease-out, right 2s ease-out, padding 2s ease-out;
}

#home-button-THE{
    text-align: right;
    right:85%;  
}
#home-button-PROJECT{
    left:100%;
    padding-left: 3em;
}

#home svg{
    
    /*   text     */
    /*  display   */
    position: absolute;
    height: 100%;
    left:50%;
    /*   style    */
    /*   other    */
    /* transforms */
    -webkit-transform:translateX(-50%);
       -moz-transform:translateX(-50%);
         -o-transform:translateX(-50%);
            transform:translateX(-50%);
}

#home-button ~ svg path{
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    -webkit-transition: fill 0.3s, opacity 0.3s;
       -moz-transition: fill 0.3s, opacity 0.3s;
         -o-transition: fill 0.3s, opacity 0.3s;
            transition: fill 0.3s, opacity 0.3s;
    fill:#C5C5C5;
    opacity:0.8;
}

#home-button ~ svg .v{
    animation-delay: 0.1s;
}

#home-button ~ svg .i.solid{
    animation-delay: 0.15s;
}
#home-button ~ svg .o{
    animation-delay: 0.2s;
}
#home-button ~ svg .s{
    animation-delay: 0.25s;
}


#home-button:hover ~ svg .dot, #home-button:active ~ svg .dot{
    opacity: 1;
    fill:#991b1e;
}

#home-button:hover ~ svg .solid{
    opacity: 1;
    animation-name:flash1;
    fill:#ffffff;
}

#home-button:active ~ svg .solid{
    animation-name: flash2;
    fill:#3B3B3B;
}

#home-button:hover span{
    pointer-events: auto;
    letter-spacing: 0.7em;
    opacity: 1;
}
#home-button:hover #home-button-THE{
    right:94%;
}
#home-button:hover #home-button-PROJECT{
    padding-left:0.6em;
}

@keyframes flash1{
    0% {fill:#ffffff;}
    50% {fill:#991b1e;}
    100% {fill:#ffffff;}
}

@keyframes flash2{
    0% {fill:#3B3B3B;}
    50% {fill:#991b1e;}
    100% {fill:#3B3B3B;}
}


/* ----------
    BACK BUTTON
   ---------- */
#back-button{
    position: fixed;
    display:block;
    bottom:1vh;
    left:1vh;
    height:5vh;
    z-index: 901;
    -webkit-transform: translateZ(901px);
       -moz-transform: translateZ(901px);
        -ms-transform: translateZ(901px);
         -o-transform: translateZ(901px);
            transform: translateZ(901px);
    padding:1px;
    font-size:1em;
}
#back-button a{
    padding:0;
    margin:0;
    position: relative;
    top:0;
    font-weight: 700;
}
#back-button a::before {
    box-sizing: border-box;
    content:"";
    display:inline-block;
    position: relative;
    width:1em;
    height:1em;
    margin-left:0.5em;
    border-bottom:#959595 solid 0.2em;
    border-left:#959595 solid 0.2em;
    -webkit-transform: rotateZ(45deg);
       -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
         -o-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}

#back-button a:hover::before{
    border-bottom-color: #991b1e;
    border-left-color: #991b1e;
}

#back-button a span{
    font-size:1.1em;
    font-family: Vios, Impact, 'Arial Condensed', sans-serif;
    letter-spacing: 0.1em;
}

    /* ---- Alt Nav ---- */
#alt-nav{
    /*    text    */
    /*  display   */
    position: fixed;
    display: block;
    bottom:-1em;
    height:3.5em;
    width:100%;
    /*   style    */
    /*   other    */
    /* transforms */
}

#alt-nav a{
    /*    text    */
    font-size: 0.65em;
    text-align: center;
    font-weight: bold;
    /*  display   */
    position: absolute;
    display: block;
    height:100%;
    width:7em;
    top:0;
    /*   style    */
    opacity:0.75;
    /*   other    */
    /* transforms */
    transition: opacity 0.5s;
}

#alt-nav a span{
    position: absolute;
    left:0;
    width:100%;
    margin-top:0.65em;
    letter-spacing: 0.1em;
    z-index: 2;
}

#alt-nav a:hover{
    color:#ffffff;
    opacity:1;
}

#alt-nav a:active{
    font-weight: bold;
    color:#991b1e;
}
#alt-nav a:active path{
    fill:#cccccc;
}

#alt-nav #listen{
    left:25%;
}

#alt-nav #donate{
    right:25%;
}


#alt-nav svg{
    position: absolute;
    left:50%;
    top:0;
    width:auto;
    filter: drop-shadow(0 0 0.5em #000000);
    transform: translateX(-50%);
    z-index: 0;
}

#alt-tree-01{
    height:120%;
}

#alt-tree-03{
    height:80%;
}

#alt-nav path{
    fill:#991b1e;
}

    /*    text    */
    /*  display   */
    /*   style    */
    /*   other    */
    /* transforms */


/*
————————————————————————————————————————————————————————————————————————————————
    DEFAULT PAGE STYLES
————————————————————————————————————————————————————————————————————————————————
*/

    /* ---- LOADER ---- */
#loading{
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.15);
    z-index: 1000;
    text-align: center;
    -webkit-transition: all 1s;
            transition: all 1s;
    
}

#loading .text-content{
    display: block;
    position: absolute;
    width: 100%;
    top:50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    /*border: yellow thin solid;*/
}
#loading .text-content h1:first-child{
    font-size: 5em;
    letter-spacing: 0.25em;
}




#page-intro{
    padding-top:100vh !important;
}

#page-title{/*box-sizing: border-box; border: orange solid 2px;*/
    font-size: 8em;
    /*text-align: center;*/
    position: fixed;
    display: block;
    width:100%;
    height:1.5em;
    top:102%;
    left:0;
    opacity:0.4;
    pointer-events: none;
    z-index:10;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateY(-10%) translateX(0%);
       -moz-transform: rotate(-90deg) translateY(-10%) translateX(0%);
        -ms-transform: rotate(-90deg) translateY(-10%) translateX(0%);
         -o-transform: rotate(-90deg) translateY(-10%) translateX(0%);
            transform: rotate(-90deg) translateY(-10%) translateX(0%);
}

#page-title h1{/*box-sizing: border-box; border: cyan solid 2px;*/
    display: block;
    width:auto;
    position: absolute;
    white-space: nowrap;
                              left:0%;
    -webkit-transform: translateX(-0%);
       -moz-transform: translateX(-0%);
        -ms-transform: translateX(-0%);
         -o-transform: translateX(-0%);
            transform: translateX(-0%);
}


/*#page-title .background.plain{
    position: fixed;
    display: block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}*/

main{
    position: relative;
    /*position: absolute;border:blue solid thin;
    width: 95%;
    top:0;*/
    -webkit-transition: 1s -webkit-filter linear;
            transition: 1s filter linear;
}

.main-content{
    width:100%;
}



.main-content section{
    position: relative;
    width:100%;
    margin: 0 auto;
}

.main-content section h2{
    font-size: 4em;
}


.main-content .text-content{
    position: relative;
    width:95%;
    max-width: 800px;
    padding: 10% 4em 20%;
    text-align: center;
    margin:0 auto;
    z-index: 11;
    text-shadow:  0 0 0.5em #000000;
}


.main-content .align-right .text-content{
    margin:0 0 0 auto;
    text-align: right;
    /*background: linear-gradient(to left, black, black 15%, rgba(0,0,0,0));*/
}

.main-content .align-left .text-content{
    margin:0 auto 0 0;
    text-align: left;
    /*background: linear-gradient(to right, black, black 15%, rgba(0,0,0,0));*/
}

.parallax-panel .text-content{
    z-index: 150;
    -webkit-transform: translateZ(150px);
       -moz-transform: translateZ(150px);
         -o-transform: translateZ(150px);
            transform: translateZ(150px);
}

.main-content .simple-panel .text-content{
    max-width: 85% !important;
    font-size: 1.4em;
}

/*
————————————————————————————————————————————————————————————————————————————————
    PARALLAX PANELS
————————————————————————————————————————————————————————————————————————————————
*/
.parallax-panel .background{
    position:fixed;
    width:110vw;
    height:120vh;
    min-height: 85vw;
    top:-5vh;
    left:-2vw;
    z-index: 0;
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;
    -webkit-perspective-origin: 50% 0%;
       -moz-perspective-origin: 50% 0%;
            perspective-origin: 50% 0%;
    -webkkt-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: translateZ(50px);
       -moz-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
    opacity: 0.0;
	filter: alpha(opacity=0);
    pointer-events: none;
}

.parallax-background{
    position:fixed;
    width:110vw;
    height:120vh;
    min-height: 85vw;
    top:-5vh;
    left:-2vw;
    z-index: 0;
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;
    -webkit-perspective-origin: 50% 20%;
       -moz-perspective-origin: 50% 20%;
            perspective-origin: 50% 20%;
    -webkkt-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: translateZ(50px);
       -moz-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
    opacity: 0.0;
	filter: alpha(opacity=0);
    pointer-events: none;
}



.parallax-layer{
    position: absolute;
    top:0;
    width: 100%;
    height:100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    -webkit-transform-origin: center bottom;
       -moz-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
         -o-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-transtion: translate3d(0, 0, 0);
       -moz-transtion: translate3d(0, 0, 0);
         -o-transtion: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
section.align-left .parallax-layer{
    background-position: right center;
}

section.align-right .parallax-layer{
    background-position: left center;
}

.parallax-overlay{
    position: fixed;
    top:0;
    width:100%;
    height:100%;
    z-index: 90;
    -webkit-transform: translateZ(90px);
       -moz-transform: translateZ(90px);
         -o-transform: translateZ(90px);
            transform: translateZ(90px);
}

section.align-left .parallax-overlay{
    background: linear-gradient(to right,black, black 7%, rgba(0,0,0,0) 60%)
}

section.align-right .parallax-overlay{
    background: linear-gradient(to left,black, black 7%, rgba(0,0,0,0) 60%)
}

/*
————————————————————————————————————————————————————————————————————————————————
    SLIDE SHOW
————————————————————————————————————————————————————————————————————————————————
*/
.slide-show{
    position: fixed;
    display: block;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.slide-show .slide{
    position: absolute;
    display: block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
    -webkit-transition: all 2s;
       -moz-transition: all 2s;
         -o-transition: all 2s;
            transition: all 2s;
}

/*
————————————————————————————————————————————————————————————————————————————————
    SIMPLE PANELS
————————————————————————————————————————————————————————————————————————————————
*/
section.simple-panel{
    clear: both;
}

section.simple-panel .background{
    position: fixed;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    opacity: 0.01;
	filter: alpha(opacity=0.01);
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
}

section.simple-panel .subtitle{
    text-align: center;
    position: fixed;
    width:100vw;
    top:35%;
    left:50%;
    z-index: 152;
    -webkit-transform: translate3d(-50%, 0, 152px);
       -moz-transform: translate3d(-50%, 0, 152px);
         -o-transform: translate3d(-50%, 0, 152px);
            transform: translate3d(-50%, 0, 152px);
}
section.simple-panel .subtitle h2{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: 700;
    font-size:5.5em;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

section.simple-panel .subtitle+div::before{
    content:"";
    width:100%;
    height:750px;
    display: block;
    position: relative;
}

/*
————————————————————————————————————————————————————————————————————————————————
    THUMBNAIL GRID
————————————————————————————————————————————————————————————————————————————————
*/
.thumbnail-grid{
    width:80%;
    height:auto;
    padding:10% 0 10%;
    position: relative;
    display: block;
    margin:auto;
    font-size: 0.8em;
}

.thumbnail{
    width: 49.8%;
    position: relative;
    display: inline-block;
    margin:0;
    /*float: left;*/
    height:22em;
    overflow: hidden;
}

.thumbnail:hover .thumbnail-background{
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0.6;
    -webkit-filter: blur(0);
            filter: blur(0);
}

.thumbnail.small{
    width:  19.5vw;
    height: 19.5vw;
}


.thumbnail-background{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding:0;
    margin:0;
    z-index: 0;
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
    opacity:0.4;
    -webkit-filter: blur(2px);
            filter: blur(2px);
}

.photo .thumbnail-background{
    -webkit-filter: blur(0);
            filter: blur(0);
}

.thumbnail a{
    display: block;
    position: relative;
    color:#B4AAAA;
    width:100%;
    height: 100%;
    padding:4%;
    
    box-shadow: inset 0 0 2em 0.5em rgba(0,0,0,1);
    z-index: 150;
    -webkit-transform: translateZ(150px);
       -moz-transform: translateZ(150px);
            transform: translateZ(150px);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}

.thumbnail a:hover{
    color:#ffffff;
    box-shadow: inset 0 0 2em 0.5em rgba(0,0,0,0.5);
    text-shadow: 0px 0px 1em #000000;
}

/*.thumbnail .photo div{
    pointer-events: none;
}*/

.photo .caption{
    position: absolute;
    display: block;
    bottom:0;
    left:0;
    right:0;
    height:auto;
    padding:0.5em;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
    opacity:0.0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
    line-height: 1em;
    z-index: 100;
}

.thumbnail .photo .caption .date{
    font-size: 0.85em;
    color:#C2171B;
    letter-spacing: 0.05em;
}

.thumbnail .photo .caption .date::before{
    content: " — ";
}

.photo:hover .caption{
    opacity:1;
    pointer-events: auto;
}

/*
————————————————————————————————————————————————————————————————————————————————
    PHOTO GALLERY
————————————————————————————————————————————————————————————————————————————————
*/

#photo-gallery{
    position: fixed;
    display: block;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;
    z-index: 850;
    opacity:0;
    pointer-events: none;
    font-family: acumin-pro, sans-serif;
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
        -ms-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
    -webkit-transform: translateZ(850px);
       -moz-transform: translateZ(850px);
        -ms-transform: translateZ(850px);
         -o-transform: translateZ(850px);
            transform: translateZ(850px);
}

#photo-gallery.open{
    opacity: 1;
    pointer-events: auto;
}

#photo-gallery #photo-close{
    position: absolute;
    display: block;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 35%);
    border:none;
    
}


#photo-gallery .photo .nav-button{
    position: absolute;
    display: block;
    top:0;
    height: 100%;
    width:5em;
    background:none;
    border:none;
    outline:none;
    cursor: pointer;
}


#photo-gallery .photo .nav-button .overlay{
    position: absolute;
    display: block;
    top:0;
    left: 0;
    height:100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
}

#photo-gallery .photo .nav-button span{
    position: absolute;
    display: block;
    color:#ffffff;
    font-family: Vios, Impact, 'Arial Condensed', sans-serif;
    font-size:2em;
    letter-spacing: 0.25em;
    top:50%;
    opacity:0;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

#photo-gallery .photo:hover .nav-button span{
    opacity:0.25;
}

#photo-gallery .photo .nav-button:hover span{
    opacity:1;
}


#photo-gallery .photo .nav-button.prev{
    left:0;
}
#photo-gallery .photo .nav-button.prev .overlay{
    background:linear-gradient(to right, rgba(200,200,200,1), rgba(200,200,200,0));
}
#photo-gallery .photo .nav-button.prev:hover .overlay{
    opacity: 0.15;
}
#photo-gallery .photo .nav-button.prev:active .overlay{
    opacity: 1;
}
#photo-gallery .photo .nav-button.prev span{
    left:-1.25em;
    transform: rotate(-90deg);
}



#photo-gallery .photo .nav-button.next{
    right:0;
}
#photo-gallery .photo .nav-button.next .overlay{
    background:linear-gradient(to left, rgba(200,200,200,1), rgba(200,200,200,0));
}
#photo-gallery .photo .nav-button.next:hover .overlay{
    opacity: 0.15;
}
#photo-gallery .photo .nav-button.next:active .overlay{
    opacity: 1;
}
#photo-gallery .photo .nav-button.next span{
    right:-0.15em;
    transform: rotate(90deg);
}


#photo-gallery .photo-point{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:0;
    height:0;
    overflow: visible;
    opacity:0;
}

.photo-point.transition{
    -webkit-transition: transform 0.5s, opacity 0.5s;
       -moz-transition: transform 0.5s, opacity 0.5s;
         -o-transition: transform 0.5s, opacity 0.5s;
            transition: transform 0.5s, opacity 0.5s;
}

.photo-point.open{
    opacity:1.0 !important;
    -webkit-transform: translate(50vw, 50vh) scale(1.0) !important;
       -moz-transform: translate(50vw, 50vh) scale(1.0) !important;
        -ms-transform: translate(50vw, 50vh) scale(1.0) !important;
         -o-transform: translate(50vw, 50vh) scale(1.0) !important;
            transform: translate(50vw, 50vh) scale(1.0) !important;
}

#photo-gallery .photo{
    position: absolute;
    display: block;
    /*max-height: 90vh;*/
    top:0;
    left:0;
    overflow: hidden;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#photo-gallery .photo, #photo-gallery .photo img{
    height:auto;
    width: auto;
    max-height: 90vh;
    max-width: 100vw;
}

#photo-gallery .photo .caption{
    opacity:1;
    padding:0 3em;
    -webkit-transition: transform 0.5s;
       -moz-transition: transform 0.5s;
         -o-transition: transform 0.5s;
            transition: transform 0.5s;
    -webkit-transform: translate3d(0, 100%, 100px);
       -moz-transform: translate3d(0, 100%, 100px);
        -ms-transform: translate3d(0, 100%, 100px);
         -o-transform: translate3d(0, 100%, 100px);
            transform: translate3d(0, 100%, 100px);
}
#photo-gallery .photo .caption.open{
    -webkit-transform: translate3d(0, 0, 100px);
       -moz-transform: translate3d(0, 0, 100px);
        -ms-transform: translate3d(0, 0, 100px);
         -o-transform: translate3d(0, 0, 100px);
            transform: translate3d(0, 0, 100px);
}

#photo-gallery .photo .caption .info{
    clear:both;
    display: block;
    width:100%;
    font-size:0.5em;
    font-weight: 200;
    margin-top:1em;
}

#photo-gallery .photo .caption .info div{
    display: inline-block;
    width:30em;
}

#photo-gallery .photo .caption .info div .header{
    font-weight: 500;
}

/*#photo-gallery #photo-viewer .photo img{
    position: relative;
}*/

/*#photo-gallery .photo.portrait, #photo-gallery .photo.portrait img{
    height:90vh;
    width:auto;
}

#photo-gallery .photo.landscape, #photo-gallery .photo.landscape img{
    height:auto;
    width:100vw;
}*/




/*
————————————————————————————————————————————————————————————————————————————————
    POST-LIKE sections
————————————————————————————————————————————————————————————————————————————————
*/

section .post{
    font-size: 0.75em;
    margin: 4em -5.75em 4em 0;
    text-align: right;
    position: relative;
    height: 8em;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0.75em 0 0 0.75em;
    -webkit-transition: all 0.25s;
       -moz-transition: all 0.25s;
         -o-transition: all 0.25s;
            transition: all 0.25s;
}


section .post button{
    font-size:1em;
    text-align: right;
    display: block;
    width:100%;
    height:100%;
    position: relative;
    top:0;
    absolute:0;
    padding:2% 4% 2% 0;
    color:#ffffff;
    border-radius: 0.75em 0 0 0.75em;
    background: rgba(0,0,0,0.75);
    border-top:#ffffff solid 0.2em;
    border-left:#ffffff solid 0.2em;
    border-bottom:#ffffff solid 0.2em;
    cursor: pointer;
    -webkit-transition: all 0.25s;
       -moz-transition: all 0.25s;
         -o-transition: all 0.25s;
            transition: all 0.25s;
}

section .post h3{
    -webkit-transition: color 0.25s;
       -moz-transition: color 0.25s;
         -o-transition: color 0.25s;
            transition: color 0.25s;
}

section .post button::before{
    content: "";
    position: absolute;
    box-sizing: content-box;
    bottom:-0.4em;
    left:50%;
    transform: translateX(-50%);
    width:0;
    height:0;
    border-style: solid;
    border-width: 0.5em 3em;
    border-color: #ffffff transparent transparent;
    -webkit-transition: border 0.25s;
       -moz-transition: border 0.25s;
         -o-transition: border 0.25s;
            transition: border 0.25s;
}

section .post button:hover{
    background: rgba(0,0,0,0.5);
    /*border-color: #991b1e;*/
}

section .post button:hover h3{
   /* color:#991b1e;*/
}

section .post button:hover::before{
    border-color:#991b1e transparent transparent;
}

section .post button:hover span.date{
    color:#90EEFF;
}

section .post span.date{
    color:#00BBC0;
    font-weight:700;
    font-size:2em;
}

section .post h3{
    font-size:2em;
    margin-top:1em;
    margin-bottom:2em;
    line-height: 1em;
}

section .post span.date+h3{
    margin-top:0;
}

section .post p{
    font-size: 1em;
}

/* open state */
section .post.open{
    height:auto !important;
}

section .post.open button{
   
    padding:7% 6% 5% 10%;
    background:linear-gradient(-20deg, rgba(0,0,0,1), rgba(0,0,0,1) 10%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 90%);
}

section .post.open button:hover{
    color:#ffffff;
}

section .post.open button:hover h3{
    color:#ffffff;
}

section .post.open button::before{
    bottom:0.25em;
    border-color:transparent transparent #ffffff transparent;
}

section .post.open button:hover::before{
    border-color:transparent transparent #991b1e transparent;
}

section .post-new{
    font-size: 0.75em;
    margin: 4em -5.75em 4em 0;
	padding: 0 7em 2em 0;
    text-align: right;
    position: relative;
    height: auto;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0.75em 0 0 0.75em;
    -webkit-transition: all 0.25s;
       -moz-transition: all 0.25s;
         -o-transition: all 0.25s;
            transition: all 0.25s;
}

section .post-new h3{
	font-family: ViOS, Impact;
}

/*
—font-size: 0.75em;
    margin: 4em -5.75em 4em 0;
    text-align: right;
    position: relative;———————————————————————————————————————————————————————————————————————————————
    SUB-MENU
————————————————————————————————————————————————————————————————————————————————
*/

#sub-nav{/*box-sizing: border-box;border:green solid 3px;*/
    /*    text    */
    font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: 400;
    text-align: right;
    
    /*  display   */
    position: fixed;
    top:0;
    right:0;
    height:100vh;
    width:15em;
    min-height: 16em;
    
    /*   style    */
    z-index:910;
    
    /*   other    */
    pointer-events: none;
    /* transforms */
    -webkit-transform: translateZ(910px);
       -moz-transform: translateZ(910px);
         -o-transform: translateZ(910px);
            transform: translateZ(910px);
    
}

#sub-nav h3{
    font-size: 1em;
    margin-bottom: 1em;
    padding-right: 0.5em;
    letter-spacing: 0.1em;
}

#sub-nav ul{/*box-sizing: border-box;border:yellow solid thin;*/
    /*    text    */
    text-align: right;
    /*  display   */
    /*   style    */
    padding-top:0.7em;
    background: radial-gradient(circle farthest-side at 100% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    text-shadow: 0 0 0.5em #000000;
    /*   other    */
    /* transforms */
    
    position: absolute;
    left:0;
    top:50%;
    width:100%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

#sub-nav ul li{
    /*    text    */
    list-style: none;
    /*  display   */
    position: relative;
    
    /*   style    */
    padding: 0;
    padding-right:0.5em;
    margin-bottom: 1em;
    
    /*   other    */
    /* transforms */
}

#sub-nav ul li a{
    /*    text    */
    font-size: 1.15em;
    color:#ffffff;
    /*  display   */
    display: block;
    padding-bottom: 0.25em;
    padding-right: 0.15em;
    
    /*   style    */
    border: 0em solid rgba(0,0,0,0);
    /*   other    */
    pointer-events: auto;
    /* transforms */
    opacity: 0.5;
    filter: alpha(opacity=0.5);
    text-shadow: 0 0 0.15em #000000;
    -webkit-transition: opacity 0.1s, border 0.1s;
       -moz-transition: opacity 0.1s, border 0.1s;
         -o-transition: opacity 0.1s, border 0.1s;
            transition: opacity 0.1s, border 0.1s;
}

#sub-nav ul li a:hover{
    opacity:0.8;
    filter: alpha(opacity=0.8);
}

#sub-nav ul li a:active{
    opacity:0.25;
    filter: alpha(opacity=0.25);
}

#sub-nav ul li a.current{
    font-weight: 800;
    letter-spacing: 0.1em;
    /*border-top: 0.15em solid #991b1e;*/
    border-right: 0.35em solid #991b1e;
    opacity: 1;
    filter: alpha(opacity=1);
}


/*#sub-nav ul li a.current::before{
    content:"";
    position: absolute;
    box-sizing:content-box;
    width:0;
    height:0;
    border: rgba(0,0,0,0) 0.5em solid;
    border-left:#991b1e 0.5em solid;
    left:0.5em;
    top:0.4em;
}*/

/*#sub-nav ul li a[title="Donate"]{
    font-variant-caps: small-caps;
    font-weight: 700 !important;
    color:#6BA797;
}*/

#sub-nav ul li a[title="Donate"]:hover{
    color:#991b1e;
}

/*
————————————————————————————————————————————————————————————————————————————————
    FOOTER
————————————————————————————————————————————————————————————————————————————————
*/

footer{
    display: block;
    height: auto;
    width: 100vw;
    padding: 5%;
    position: relative;
    clear: both;
    z-index: 12;
}

footer section{
    height: 35vh;
    min-height: 150px;
    max-height: 450px;
    width: 33% !important;
    float: left;
    position: relative;
    display: block;
    bottom: 0;
    padding: 2%;
}

footer section:last-child{border-color:red;
    margin-bottom: 10%;
}

#footer-home-btn a{
    /*display: block;*/
    width: 90%;
    height: auto;
    margin:0 auto;
}


#footer-home-btn img{
    height:auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    /*max-height: 100%;
    max-width: 100%;*/
    /*position: relative;*/
}

#footer-info div{
}

#footer-info div p{
    margin:3% 0 3%;
    font-size: 1em;
}

#social-media div{
    display: block;
}

a.social{
    position: relative;
    display: inline-block;
    margin: 0 5% 5% 0;
    height: 2.5em;
    max-height: 45px;
    width: auto;
    overflow: hidden;
    -webkit-transition: color 1s;
            transition: color 1s;
}

a.social svg{
    height:100%;
    width: auto;
    -webkit-transition: opacity 0.25s;
            transition: opacity 0.25s;
    opacity: 0.25;
    filter: alpha(opacity=0.25);
    position: relative;
}

#social-media a.social{
    height: 4em;
    max-height: 75px;
    float: left;
    display: block;
}

#social-media svg.brand-logo{
    max-height: 75px;
}

a.social:hover svg{
    opacity: 0.85;
    filter: alpha(opacity=0.85);
}
a.social:active svg{
    opacity: 0.15;
    filter: alpha(opacity=0.15);
}

a.social svg path{
    fill:#E6E6E6;
    -webkit-transition: fill 1s;
            transition: fill 1s;
}

a.social:hover svg path{
    fill:#991b1e;
}



/*
————————————————————————————————————————————————————————————————————————————————
    TEXT STYLING
————————————————————————————————————————————————————————————————————————————————
*/

#page-intro .text-content{
    text-shadow: 0px 0px 8px black;
}

#page-intro .text-content p{
    font-weight: 700 !important;
    font-size: 1.7em;
    
}

#page-intro .text-content.artist p{
    font-weight: 300 !important;
}

.text-content h3{
    font-size: 2.5em;
    margin:2em 0 0.25em;
}

.verse{
    font-size: 1.15em;
    background:rgba(11,11,11,0.65);
    padding: 0.5em 0.5em 1.25em;
    border-radius: 0.75em;
    box-shadow: 0 0 1em 0.5em rgba(11,11,11,0.65);
}

.verse .verse-text{
    font-style: italic;
}

sup{
    font-size: 0.4em;
    font-weight: 300;
}

.verse .verse-reference{
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.2em;
    float:right;
    color: rgba(255,255,255,0.5);
}

.verse .jesus-text{
    color:#F9ACAD;
}

.vios-tag{
    font-variant-caps:small-caps;
    font-size:0.85em;
    /*letter-spacing: 0.1em;*/
    color:#991b1e;
}

.vios-tag span{
    font-family: Vios, Impact, 'Arial Condensed', sans-serif;
    font-variant: normal;
    font-size:1.15em;
    color:#ffffff;
}

iframe{
    margin-top:5em;
    box-shadow: 0 0 5em 2em #000000;
}


/*
————————————————————————————————————————————————————————————————————————————————
    ALL @media
————————————————————————————————————————————————————————————————————————————————
*/

@media only screen and (orientation:portrait){
    
    
    .main-content .text-content{
        padding: 10% 1em 20%;
    }
    #alt-nav #listen{
        left:15%;
    }

    #alt-nav #donate{
        right:15%;
    }
    .thumbnail{
        width:100%;
    }
    #photo-gallery .photo .nav-button{
        width:6em;
    }
    #photo-gallery .photo .nav-button span{
        opacity: 0.5;
    }
    section .post{
        margin-right:-1.5em;
    }
    footer section{
        width:100% !important;
        height:30vh;
    }
    #footer-home-btn a{
        height: 94%;
        width:auto;
    }
}

@media (max-aspect-ratio: 10/1) and (min-aspect-ratio: 2/1){/* very widescreen */
    body{
        font-size:1vw;
    }
}

@media (max-aspect-ratio: 4/3) and (min-aspect-ratio: 12/13){/* 4:3 widescreen to just under square */
    body{
        font-size: 1.6vw;
    }
    #menu{
        font-size:1.98vh;
    }
}

@media only screen and (max-aspect-ratio: 12/13) and (min-aspect-ratio: 3/4){
    body{
        font-size: 1.8vh;
    }
    #menu{
        font-size: 2vh;
    }
    #menu li ul li .menu-announcement{
        text-align: right;
        left:-13em;
    }
}

@media (max-aspect-ratio: 3/4){
    body{
        font-size: 1.9vh;
    }
    #menu{
        font-size:1.9vh;
    }
    #menu li.menu-category:first-child .category-wrap, #menu li.menu-category:nth-of-type(3) .category-wrap{
        text-align: left;
    }
    #menu li.menu-category:nth-of-type(2) .category-wrap{
        text-align: right;
    }#menu li ul li .menu-announcement{
        text-align: right;
        left:-12em;
    }
    #sub-nav{
        display: none;
    }
    #sub-nav ul{
        padding-top:1em;
        background: radial-gradient(circle farthest-side at 100% -5%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        top:0%;
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }  
}

@media only screen and (min-width: 600px) and (max-width: 999px){
    .thumbnail.small{
        width:  26.2vw;
        height: 26.2vw;
    }
}
@media only screen and (max-width: 599px){
    .thumbnail.small{
        width:  39.3vw;
        height: 39.3vw;
    }
}