@charset "UTF-8";

* {
    box-sizing: border-box;
    margin-top: 0px;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #fff;
    color: #333;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    overflow-x: hidden;
}

.hide {
    display: none;
}

/* // ###############
//
// CONTENT WIDTH STYLES
//
// ############### */

.content-width {
    position: relative;
    width: 90%;
    /* max-width: 1400px; */
    margin: 0px auto;
    /* temporary border so you can see the zones in action */
    /* border: 1px dotted rgba(0, 0, 0, .15); */
}

/* // ###############
//
// GENERAL BODY TYPE STYLES
//
// ############### */

h1 {
    font-family: 'GlacialIndifferenceRegular', sans-serif;
    font-weight: bold;
    font-style: normal;
}

p {
    font-family: 'GlacialIndifferenceRegular', sans-serif;
    font-weight: regular;
    font-style: normal;
    color: white;
}

/* // ###############
//
// REPEATING CLASS STYLES
//
// ############### */


/* // ###############
//
// NAVIGATION STYLES
//
// ############### */



nav {
    position: fixed;
    top: 10%;
    left: 2%;
    z-index: 10000;
    height: 80%;
    width: 25%;
}

nav a {
    font-family: 'GlacialIndifferenceRegular', sans-serif;
    font-weight: regular;
    font-style: normal;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    flex-flow: row nowrap;
}

nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    height: 100%;
}

nav li {
    flex-direction: row;
    /* justify-content: space-between; */
    /* padding: 15%; */
}

nav a:hover {
    color: red;
}

.navCircle {
    background-color: white;
    position: absolute;
    width: 8vw;
    height: 8vw;
    border-radius: 100%;
    left: 55vw;
    top: 30.8vh;
    z-index: 1000;

}

.navCirs {
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin: 0;
    padding: 0;
}

.navLine {
    width: .15%;
    background-color: white;
    height: 59%;
    position: fixed;
    left: 2.3%;
    top: 20%;
    z-index: 0;
}

nav a p {
    padding-left: 10px;
    font-size: 16px;
}

/* // ###############################
//
// PAGE CONTENT
//
// ################################## */

/* // ###############
//
// HEADER STYLES
//
// ############### */

header {
    width: 100%;
    height: 100%;
    /* background: linear-gradient(#3b5ccc, #102981); */
    background: #3b5ccc;
    z-index: 1;
    overflow: hidden;
    /* grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4; */
}

header h1 {
    font-size: 10vw;
    color: white;
    /* text-transform: uppercase; */
    padding: 0;
    margin: 0;
    line-height: 15vh;
    /* line-height: 250px; */
    /* font-size: 250px; */
}

.textHead {
    position: absolute;
    left: 65vw;
    top: 15vh;
    z-index: 2;
    /* display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    padding: 0; */
}

.descriptionHead {
    z-index: 10;
    position: absolute;
    left: 73vw;
    top: 60vh;
    width: 20%;
}

.descriptionHead p {
    font-size: 25px;
    color: white;
}

.scrollDownInd {
    z-index: 10;
    position: absolute;
    left: 80vw;
    /*! width: 20%; */
    display: flex;
    flex-flow: column;
    width: 10%;
    bottom: 15vh;
}

.scrollDownInd p {
    color: white;
    font-size: 20px;
    line-height: 30px;
    text-transform: uppercase;
    align-content: center;
    align-self: center;
}

.scrollDownInd svg {
    align-content: center;
    align-self: center;
    animation-name: svgblink;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes svgblink {
    50% {
        opacity: .1;
        margin-top: 5px
    }

    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

header img {
    /* width: 100%; */
    /* height: 100%; */
    /* max-width: 1920px; */
    position: absolute;
    left: -8%;
    height: 100%;
    z-index: 10;
}

.blueColors {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row-reverse;
    z-index: 0;
}

.rgtBlue {
    width: 60%;
    background-color: #071957;
}

.mdlblue {
    width: 25%;
    background-color: #223D81;
}

.lftBlue {
    width: 15%;
    background-color: #3B5CCC;
}

/* // ###############
//
// MAIN SECTIONS
//
// ############### */

section {
    width: 100%;
    height: 100%;
    background: #3b5ccc;
    z-index: 1;
    overflow: hidden;
    /* display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%; */
}

/* // ###############
//
// S_01 1: RELIGIOUS ERA
//
// ############### */

.s_01bluebar {
    width: 100%;
    height: 10%;
    background-color: #071957;
}

.s_01wrapper {
    margin-left: 25%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    flex-grow: 1;
}

#s_01 .s_01header {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#s_01 .s_01header .s_01img1 {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    margin: 0;
    padding: 0;
}

#s_01 .s_01header .s_01img2 {
    position: absolute;
    right: 0;
    top: 20%;
    z-index: 100;
}

.s_01header h1 {
    font-size: 6vw;
    color: white;
    text-transform: uppercase;
    position: absolute;
    right: 6%;
    top: 20%;
    width: 25%;
}

.s_01txtblk {
    display: flex;
    flex-flow: column;
    position: absolute;
    left: 15%;
    height: 60%;
    width: 20%;
    justify-content: space-between;
    top: 15%;
    bottom: 15%;

}

.s_01txtblk p {
    font-size: 1vw;
    text-shadow: #333 1px 1px 1px;
    z-index: 1000;
    padding: 5%;
    background-color: #071957;
}

/* // ###############
//
// S_02 2: VAUDEVILLE *INCOMPLETE*
//
// ############### */
#s_02 {
    background-image: url("../images/3prohibition/texture.png");
    background-repeat: repeat;
}

.s_02wrapper video {
    position: absolute;
    /*! top: 10; */
    right: 0;
    min-width: 100%;
    min-height: 100%;
    /* width: auto;
    height: auto; */
    width: 100%;
    height: 100%;
    z-index: 1;
}

.s_02wrapper {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    z-index: 100;
    margin-left: 25%;
}

.s_02txtline {
    font-size: 3vw;
    text-shadow: #333 1px 1px 1px;
    z-index: 1000;
    /* width: 400%; */
    /* margin-right: 45%; */
    /* display: flex; */
    /* flex-flow: row; */
}

.s_02txtline ul {
    list-style-type: none;
}

.s_02txtline01 {
    position: absolute;
    left: 15%;
    margin-top: auto;
    margin-bottom: auto;
}
.s_02txtline02 {
    position: absolute;
    left: 15%;
    margin-top: auto;
    margin-bottom: auto;
}
.s_02txtline03 {
    position: absolute;
    left: 15%;
    margin-top: auto;
    margin-bottom: auto;
}



.s_02imgs {
    width: 100%;
    height: 100%;
}

.s_02imgs .s_02img1 {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 10;
}

/* // ###############
//
// S_03 3: PROHIBITION
//
// ############### */

#s_03 .s_03wrapper {
    background-image: url("../images/3prohibition/texture.png");
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    /* margin-left: 25%; */
}

#s_03 .s_03header {
    position: absolute;
    right: 10%;
}

#s_03 .s_03header h1 {
    font-family: timberline, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4vw;
}

#s_03 p {
    font-family: itc-american-typewriter-cond, serif;
    font-weight: 700;
    font-style: normal;
}

.s_03scene01 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

#s_03 .s_03wrapper .s_03scene01 .s_03scene01img01 {
    z-index: 10;
    position: absolute;
    left: 25%;
    transform: rotate(-30deg);
}

#s_03 .s_03wrapper .s_03scene01 .s_03scene01img02 {
    z-index: 10;
    position: absolute;
    left: 25%;
    /* top: 30%; */
    margin-top: 15%;
    transform: rotate(10deg);
    z-index: 9;
}

#s_03 .s_03wrapper .s_03scene01 .s_03scene01img03 {
    z-index: 10;
    position: absolute;
    left: 30%;
    /* top: 30%; */
    transform: rotate(15deg);
    z-index: 9;
    margin-top: 2%;
}

#s_03 .s_03wrapper .s_03scene01 .s_03scene01txt {
    position: absolute;
    background-color: black;
    left: 50%;
    margin-top: 23%;
    width: 30%;
    padding: 1%;
    transform: rotate(10deg);
    font-size: 1.5vw;
}

#s_03 .s_03wrapper .s_03scene02 .s_03scene02img02 {
    z-index: 10;
    position: absolute;
    right: 25%;
    /* top: 30%; */
    margin-top: 15%;
    transform: rotate(10deg);
    z-index: 9;
}

#s_03 .s_03wrapper .s_03scene02 .s_03scene02txt {
    position: absolute;
    background-color: black;
    left: 60%;
    margin-top: 35%;
    width: 30%;
    padding: 1%;
    font-size: 1.5vw;
}

#s_03 .s_03wrapper .s_03scene03 .s_03scene03img01 {
    z-index: 10;
    position: absolute;
    height: 60%;
    transform: rotate(10deg);
    z-index: 9;
    margin-top: 10%;
}

#s_03 .s_03wrapper .s_03scene03 .s_03scene03txt {
    position: absolute;
    background-color: black;
    left: 60%;
    margin-top: 35%;
    width: 30%;
    padding: 1%;
    font-size: 1.5vw;
    z-index: 12;
}

#s_03 .s_03wrapper .s_03scene04 .s_03scene04img01 {
    z-index: 10;
    position: absolute;
    height: 40%;
    transform: rotate(-15deg);
    z-index: 9;
    left: 35%;
    margin-top: 25%;
}

#s_03 .s_03wrapper .s_03scene04 .s_03scene04txt {
    position: absolute;
    background-color: black;
    left: 40%;
    margin-top: 20%;
    width: 30%;
    padding: 1%;
    font-size: 1.5vw;
    z-index: 12;
}

#s_03 .s_03wrapper .s_03scene05 .s_03scene05img01 {
    z-index: 10;
    position: absolute;
    /* height: 40%; */
    transform: rotate(10deg);
    z-index: 9;
    left: 15%;
    margin-top: 15%;
}

#s_03 .s_03wrapper .s_03scene05 .s_03scene05img02 {
    z-index: 10;
    position: absolute;
    /* height: 40%; */
    transform: rotate(-20deg);
    z-index: 9;
    left: 55%;
    margin-top: 10%;
}

#s_03 .s_03wrapper .s_03scene05 .s_03scene05txt {
    position: absolute;
    background-color: black;
    left: 20%;
    margin-top: 40%;
    width: 30%;
    padding: 1%;
    font-size: 1.5vw;
    z-index: 12;
}
/* // ###############
//
// S_04 4: 1960s AND MAFIA
//
// ############### */
#s_04 {
    background-image: url("../images/4stonewall/bg.jpg");
    background-size: cover;
}

.s_04wrapper {
    width: 100%;
    height: 100%;
}

.s_04imagecover {
    position: absolute;
    left: 0;
    background-color: black;
    opacity: .8;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.s_04header h1 {
    position: absolute;
    right: 0;
    margin-top: 10%;
    z-index: 1;
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-size: 4vw;
    width: 25%;
    padding: 2%;
}

.s_04txtblk01 {
    position: absolute;
    left: 25%;
    margin-top: 10%;
}

.s_04txtblk02 {
    position: absolute;
    left: 35%;
    margin-top: 20%;
}

.s_04txtblk03 {
    position: absolute;
    left: 20%;
    margin-top: 30%;
}

.s_04wrapper p{
    font-family: itc-american-typewriter-cond, serif;
    font-weight: 700;
    font-style: normal;
     background-color: white;
    color: black;
    font-size: 1vw;
    padding: 1%;
}

.s_04txtblk04 {
    position: absolute;
    left: 25%;
    margin-top: 10%;
}

.s_04txtblk05 {
    position: absolute;
    left: 15%;
    margin-top: 22%;
}

.s_04txtblk06 {
    position: absolute;
    left: 20%;
    margin-top: 35%;
}

.s_04txtblk07 {
    position: absolute;
    left: 25%;
    margin-top: 10%;
}

.s_04txtblk08 {
    position: absolute;
    left: 15%;
    margin-top: 22%;
}

/* // ###############
//
// S_05 5: MOVIE MAINSTREAM
//
// ############### */

.s_05wrapper {
    width: 100%;
    height: 100%;
    background-color: #130F0E;
}
.s_05header {
    position: absolute;
    right: 10%;
    margin-top: 2%;
    font-family: league-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #EE1C25;
    font-size: 3vw;
    text-transform: uppercase;
    z-index: 12;
    text-decoration: underline;
}
.s_05parisbg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
}

.s_05txtblk01 {
    position: absolute;
    left: 41.57%;
    z-index: 12;
    margin-top: 26%;
    display: flex;
    flex-flow: row nowrap;
}

.s_05txtblk02 {
    position: absolute;
    left: 41.57%;
    z-index: 12;
    margin-top: 26%;
    display: flex;
    flex-flow: row nowrap;
}

.s_05txtblk03 {
    position: absolute;
    left: 41.57%;
    z-index: 12;
    margin-top: 26%;
    display: flex;
    flex-flow: row nowrap;
}

.s_05paristxt p {
    font-family: league-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #EE1C25;
    font-size: 1.8vw;
    text-transform: uppercase;
    width: 46%;
    padding: 1%;
}

.s_05rockybg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
}

.s_05rockytxt {
    position: absolute;
    left: 10%;
    z-index: 12;
    margin-top: 10%;
    display: flex;
    flex-flow: column nowrap;
}
.s_05rockytxt p {
    font-family: league-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #EE1C25;
    font-size: 1.5vw;
    text-transform: uppercase;
    width: 26%;
    padding: 1%;
}

/* // ###############
//
// S_06 6: RUPAUL
//
// ############### */
.s_06wrapper {
    width: 100%;
    height: 100%;
}
.s_06rupaulbg1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
}

/* .s_06header {
    width: 100%;
    height: 100%;
    z-index: 10;
} */

.s_06rupaulimg {
    position: absolute;
    left: 15%;
    height: 20%;
    margin-top: 3%;
}

.s_06wrapper .s_06txt {
    position: absolute;
    left: 15%;
    margin-top: 14%;
    z-index: 11;
    width: 30%;
    /* height: 100%; */
}

.s_06txt p {
    color: #BF2323;
    font-size: 1.2vw;
    font-family: league-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.s_06videobg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    left: 0;
}

.ruVid {
    position: absolute;
    /*! top: 10; */
    right: 0;
    min-width: 100%;
    min-height: 100%;
    /* width: auto;
    height: auto; */
    width: 100%;
    height: 100%;
    z-index: 3;
}

.s_06theater {
    position: absolute;
    left: 0;
    z-index: 2;
    background-color: black;
    opacity: .8;
    width: 100%;
    height: 100%;
}

.s_06theatertxt {
    position: absolute;
    right: 10%;
    width: 25%;
    z-index: 3;
    background-color:#BF2323;
    margin-top: 5%;
    padding: 1%;
    opacity: 0;
}

.s_06theatertxt p {
    font-size: 1.5vw;
    padding: 1%;
    text-transform: uppercase;
    font-weight: bold;
}

#s_07 {
    background-color: #BF2323;
    display: flex;
    flex-flow: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
}

#s_07 h1{
font-family: voltage, sans-serif;
font-weight: 700;
font-style: normal;
color: white;
font-size: 5vw;
}

#s_07 a p {
    font-size: 2vw;
    text-decoration: none;
}
/* ========== footer */

footer {}