*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Needed for mobile WebKit */
    -moz-box-sizing: border-box; /* Needed for Firefox */
    box-sizing: border-box;
    font-family: "proxima-nova", "Helvetica Neue", sans-serif;
}

body{
    background-color:#DBD8C5;
    height:100%;
    width: 100%;
    margin:0px;
    padding:0px;
}

.title{
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 3em;
    font-weight: 500;
    margin-bottom: .2em;
    color: white;
}

.nav{
    display: flex;
    width: 100%;
}

.sub-text{
    letter-spacing: .3em;
    padding-left:.3em;
    font-size: 1.0em;
    color:#DBD8C5;
    margin-top: 0;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-top:10px;
    padding-bottom: 10px;
    text-align: center;
    transition-duration:0.3s;
    transition-property:background-color;
    border-radius: 1px;
    cursor:pointer;
}

.r-border{
    border-right:1px solid #DBD8C5;
}


.sub-text:hover{
    background-color: #2b2c85;/*#A7637A;*/
}

.content-container{
    width: 50vw;
    height:100vh;
    padding:10px;
    display: flex;
    flex-flow:column;
    background-color:#4a213a;
}

.header{
    width:100%;
    margin-right:51vw;
    flex:0 1 auto;
}

.content{
    width:100%;
    flex:1 1 auto;
    padding: 0px 30px 0px 30px;
    overflow-y:scroll;
    overflow-x:hidden;
    color:white;
}

.content h1{
    color: white;
    margin-bottom: 10px;
}

.content h2{
    color: white;
    text-transform: uppercase;
    font-size: 1.3em;
    letter-spacing: .15em;
    margin-top:10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.content p{
    letter-spacing: .05em;
}
.content::-webkit-scrollbar-thumb {
    background: #DBD8C5;
    border: solid #4a213a;/*2f266a;/*333F4D;*/
    border-width: .375rem .375rem .375rem 0;
    border-radius: 0 .375rem .375rem 0;
}

.content::-webkit-scrollbar {
    width: .9375rem;
}


a{
    color:#DBD8C5;
}

@media (min-width: 961px){
    .content p{
        margin-left: 40px;
    }

    @keyframes l-purp-slide{
        from {    margin-left:0%;}
        to {      margin-left:5%;}
    }

    @keyframes m-purp-slide{
        from {    margin-left:0%;}
        to {      margin-left:10%;}
    }

    @keyframes d-purp-slide{
        from {    margin-left:0%;}
        to {      margin-left:15%;}
    }

    @keyframes l-pink-slide{
        from {    margin-left:0%;}
        to {      margin-left:20%;}
    }

    @keyframes d-oran-slide{
        from {    margin-left:0%;}
        to {      margin-left:25%;}
    }

    @keyframes l-oran-slide{
        from {    margin-left:0%;}
        to {      margin-left:30%;}
    }

    #social-sm{
        display: none
    }

    .triangle{
        position:absolute;
        width:0;
        height:0;
        border-left: 50vw solid transparent;
        border-right:20vw solid transparent;
        border-bottom: 100vh solid;
        margin-top:auto;
        margin-bottom:auto;
        top:0;
        bottom:0;
        left:0%;
        z-index:-1;
    }

    .d-blue{
        border-bottom-color: #4a213a;/*2f266a;/*333F4D;*/
        border-left-color: #4a213a;/*2f266a;/*333F4D;*/
    }

    .l-purp{
        margin-left:5%;
        animation-name: l-purp-slide;
        animation-duration: .5s;
    }

    .m-purp{
        margin-left:10%;
        animation-name: m-purp-slide;
        animation-duration: 1s;
    }

    .d-purp{
        margin-left:15%;
        animation-name: d-purp-slide;
        animation-duration: 1.5s;
    }

    .l-pink{
        margin-left:20%;
        animation-name: l-pink-slide;
        animation-duration: 2s;
    }

    .d-oran{
        margin-left:25%;
        animation-name: d-oran-slide;
        animation-duration: 2.5s;
    }

    .l-oran{
        margin-left:30%;
        animation-name: l-oran-slide;
        animation-duration: 3s;
    }

}

@media (max-width: 960px){
    .body{
        overflow: hidden;
    }

    .title{
        font-size: 1.5em
    }

    .sub-text{
        font-size: 0.8em;
    }

    .link-list{
        padding-left: 0px;
    }

    #social-lg{
        display: none;
    }

    .triangle{
        width:10vw;
        height:16.7vh;
        margin-left:90vw;
        position: absolute;
        border-left: 10vw solid transparent;
    }

    .l-purp{
        animation-name: l-purp-slide;
        animation-duration: .5s;
    }

    .m-purp{
        animation-name: m-purp-slide;
        animation-duration: 1s;
        margin-top: 16.7vh;
    }

    .d-purp{
        animation-name: d-purp-slide;
        animation-duration: 1.5s;
        margin-top: 33.4vh;
    }

    .l-pink{
        animation-name: l-pink-slide;
        animation-duration: 2s;
        margin-top: 50.1vh;
    }

    .d-oran{
        animation-name: d-oran-slide;
        animation-duration: 2.5s;
        margin-top: 66.8vh;
    }

    .l-oran{
        animation-name: l-oran-slide;
        animation-duration: 3s;
        height:16.5vh;
        margin-top: 83.5vh;
    }

    .content-container{
        width: 90vw;
    }
}

.l-purp{
        border-bottom-color: #582545;/*41266e;/*746F86;*/
        border-left-color: #582545;/*41266e;/*746F86;*/
}

.m-purp{
        border-bottom-color: #68284f;/*562772;/*9D6E8E;*/
        border-left-color: #68284f;/*562772;/*9D6E8E;*/
}

.d-purp{
        border-bottom-color: #2b627e;/*6c2776;/*A7637A;*/
        border-left-color: #2b627e;/*6c2776;/*A7637A;*/
}

.l-pink{
        border-bottom-color: #2b4882;/*7a286f;/*CF7382;*/
        border-left-color: #2b4882;/*7a286f;/*CF7382;*/
}

.d-oran{
        border-bottom-color: #2b2c85;/*7b286a;/*B3695C;*/
        border-left-color: #2b2c85;/*7b286a;/*B3695C;*/
}

.l-oran{
        border-bottom-color: #482b89;/*7e285b;/*D07862;*/
        border-left-color: #482b89;/*7e285b;/*D07862;*/
}

.link-list {
    letter-spacing: .05em;
    list-style-type: none;
}

.link-list li{
    margin-bottom: 10px;
}

a{
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}