/* FONT START */
/* Webfont: MightMakesRightBB */
@font-face {
    font-family: 'MightMakesRightBB';
    src: url('fonts/MightMakesRightBB.eot'); /* IE9 Compat Modes */
    src: url('fonts/MightMakesRightBB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/MightMakesRightBB.woff') format('woff'), /* Modern Browsers */
         url('fonts/MightMakesRightBB.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/MightMakesRightBB.svg#MightMakesRightBB') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
/* Webfont: MightMakesRightBB-BoldItalic */
@font-face {
    font-family: 'MightMakesRightBB';
    src: url('fonts/MightMakesRightBB-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/MightMakesRightBB-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/MightMakesRightBB-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/MightMakesRightBB-BoldItalic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/MightMakesRightBB-BoldItalic.svg#MightMakesRightBB-BoldItalic') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
/* Webfont: MightMakesRightBB-Italic */
@font-face {
    font-family: 'MightMakesRightBB';
    src: url('fonts/MightMakesRightBB-Italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/MightMakesRightBB-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/MightMakesRightBB-Italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/MightMakesRightBB-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/MightMakesRightBB-Italic.svg#MightMakesRightBB-Italic') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
/* FONT END */

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }

/* FOR ENTIRE PAGE CONTENT*/
html, body, main {
    width:100vw;
    margin:0;
    padding:0;
    overflow-x:hidden;
    z-index: -2;
    font-family: 'MightMakesRightBB';
}
/* Use this class on the img tag you want as the background img*/
.bgImg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("img/BGWeb.jpg");
    background-repeat: repeat;
}
/* TEXT VIEW CSS */
#displayTextContainer {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    -webkit-box-align: center;
    width:50%;
    height:100%;
}
.mainHeaderText {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2;
    margin: 1% 0;
}
.subHeaderText {
    font-size: 3.5rem;
    font-weight: 300;
    margin: .5% 0;
}
.displayText {
    margin: .5% 0;
    color: #f7941d;
    text-align: center;
}
/* TEXT VIEW CSS */
/* NAVBAR & FOOTER CSS START */
#rowNavbar, #rowFooter {
    display: flex;
    justify-content: center;
    align-content:center;
    width: 99vw;
    height: 12vh;
    padding-top: 1%;
}
#rowNavbar {
    height:14vh;
}
.navbarLogo { 
    height:100%;
    margin:0 1%;
    transform: scale(1.1);
}
.navbarImg {
    height:100%;
    margin:0 1%;
    transform: scale(.8);
}
.navbarImg:hover {
    height:100%;
    margin:0 1%;
    transform: scale(.8);
    opacity: .75;
}
/* */
#leftFooterContainer {
    display:flex;
    justify-content:flex-start;
    width:25%;
}
/* */
#contactContainer {
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
}
.contactImgCtr {
    height: 90%;
    width: 18%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.contactImg:hover {
    height: 90%;
    margin:1% 1%;
    transform: scale(.7);
    opacity: .75;
}
.contactImg {
    height: 90%;
    margin:1% 1%;
    transform: scale(.7);
}
#muteBTN {
    transform: scale(.4);
}
/* */
#copyrightContainer {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    width:25%;
}
#copyright {
    color: #f7941d;
    margin:0 0 5% 0;
    font-size: 1.5vh;
}
/* NAVBAR CSS END */

/* VIEWER CSS START */
#rowMainView {
    display: flex;
    justify-content:center;
    align-items:center;
    width: 99vw;
    height: 135vh;
    padding-top: 1.5%;
}

#mediaContainer {
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    padding:1%;
    
}
#imgContainer {
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,1);
}
#currImg {
    height:100%;
}

#vidContainer {
    height: 100%;
    margin: .2vh 0;
    box-shadow: 0 0 15px rgba(0,0,0,1);
}
#vidContainer:hover {
    cursor:pointer;
}

.pageSelectorContainer {
    display:flex;
    align-items:center;
    height:20%;
    width:10%;
    padding:2%;
    position: fixed;
    top: 50%;
    z-index: 3;
}
.rightSide {
    right: 6%;
}
.leftSide {
    left: 6%;
}
.leftAlign {
    justify-content: flex-start;
}
.rightAlign{
    justify-content: flex-end;
}
.pageSelector {
    height:100%;
    width:50%;
}
#prevPageBTN {
    background-image: url('img/btn_L.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(.30);
}
.pageSelectorContainer:hover #prevPageBTN {
    background-image: url('img/btn_L_2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
#prevPageLabel {
    width: 50%;
    font-size:3vh;
    color: #f7941d;
    text-align: center;
}
.pageSelectorContainer:hover #prevPageLabel {
    width: 50%;
    font-size:3vh;
    color:#5f390b;
    text-align: center;
}
#nextPageBTN {
    background-image: url('img/btn_R.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(.30);
}
.pageSelectorContainer:hover #nextPageBTN {
    background: url('img/btn_R_2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
#nextPageLabel {
    width: 50%;
    font-size:3vh;
    color: #f7941d;
    text-align: center;
}
.pageSelectorContainer:hover #nextPageLabel {
    width: 50%;
    font-size:3vh;
    color:#5f390b;
    text-align: center;
}
/* VIEWER CSS END */

/* TEAM CSS START */
.teamContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #f7941d;
}
.teamContainer img {
    width: 60%;
    /*height: 5%;*/
}
.memberContainer {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
.teamMember {
    width:28%;
    margin: 2%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.teamMember:hover {
    width:28%;
    margin: 2%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    opacity: 0.6;
}
.teamIMG {
    width:40%;
}
.memberInfo {
    height:100%;
    margin-left:5%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.memberName {
    font-size: 3rem;
}
.memberPos {
    font-size: 1.5rem;
}
.memberBio {
    font-size: 1rem;
}
.kickstarterHeader {
    font-size: 3rem;
    padding-top: 5%;
    text-align:center;
}
.kickstarterContainer {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.kickstarterBackers {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    margin:1%;
    text-align: center;
}/*
.kickstarterBackers span {
    width: 40%;
}*/
.tier0 {
    font-size: 2.6rem;
}
.tier1 {
    font-size: 2.4rem;
}
.tier2 {
    font-size: 2.2rem;
}
.tier3 {
    font-size: 2.0rem;
}
.tier4 {
    font-size: 1.8rem;
}
.tier5 {
    font-size: 1.6rem;
}
.tier6 {
    font-size: 1.4rem;
}
.tier7 {
    font-size: 1.2rem;
}
.tier8 {
    font-size: 1.0rem;
}
/* TEAM CSS END */

/* MAKING CSS START */
.makingContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #f7941d;
}
.makingContainer img {
    width: 65%
    /*height: 5%;*/
}
.comingSoon {
    padding-top: 20%;
}
/* MAKING CSS END */

/* ARCHIVE CSS START */
.archiveContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #f7941d;
}
.archiveContainer img {
    width: 30%;
}
.pageContainer {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
.archivedPage {
    width: 14%;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 2%;
    opacity: 0.4;
}
.archivedPage:hover {
    width: 14%;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 2%;
    opacity: 1.0;
}
.archivedPage img {
    width:100%;
}
.archivedPage video {
    width:100%;
}
.archivedPage span {
    font-size: 2rem;
}
/* ARCHIVE CSS END */

/*TABLET VIEW CSS */
@media only screen and (max-width: 1024px) {
    .pageSelectorContainer {
        display: flex;
        font-weight: bold;
        font-size: 10em;
    }
    .pageSelectorContainer:hover {
        display: flex;
        font-weight: bold;
    }

    #rowNavbar, #rowFooter {
        width: 99%;
        height: 15%;
    }
    #rowFooter {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

    #rowMainView {
        width: 99%;
        height: 100%;
    }

    .navbarLogo { 
        width:20%;
        transform: scale(1.1);
    }
    .navbarImg {
        width: 18%;
        transform: scale(.6);
    }
    .navbarImg:hover {
        width: 18%;
        transform: scale(.6);
    }

    #leftFooterContainer {
        display: none;
    }
    #contactContainer {
        width:100%;
        height:75%
    }
    #copyrightContainer {
        width: 100%;
        height:25%
    }
    #copyright {
        color: #f7941d;
        margin:0 0 1% 0;
        font-size: 1.5vh;
    }

    #mediaContainer {
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        padding:1%;
        
    }
    #imgContainer {
        width: 100%;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0,0,0,1);
    }
    #currImg {
        width:100%;
    }
    
    #vidContainer {
        height: 100%;
        margin: .2vh 0;
        box-shadow: 0 0 15px rgba(0,0,0,1);
    }

    #displayTextContainer {
        width:100%;
    }

    /*NEWLY ADDED */
    .teamMember {
        width: 100%;
    }
    .teamMember:hover {
        width: 100%;
    }
    .kickstarterHeader {
        font-size: 2.9rem;
    }
    /*NEWLY ADDED */

    .teamContainer > img {
        width: 60%;
    }

    .makingContainer > img {
        width: 65%;
    }    

    .archiveContainer > img {
        width: 30%;
    }
    .archivedPage {
        width: 27%;
        opacity: 0.5;
    }
    .archivedPage:hover {
        width: 27%;
    }
} /* END TEABLET VIEW CSS */


/*MOBILE VIEW CSS */
@media only screen and (max-width: 768px) {
    .pageSelectorContainer {
        display: none;
    }

    #rowNavbar, #rowFooter {
        width: 99%;
        height: 10%;
    }
    #rowFooter {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

    #rowMainView {
        width: 99%;
        /*height: auto;*/
    }
    #rowMainView:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .navbarLogo { 
        width:20%;
        transform: scale(1.1);
    }
    .navbarImg {
        width: 18%;
        transform: scale(.6);
    }
    .navbarImg:hover {
        width: 18%;
        transform: scale(.6);
    }

    #leftFooterContainer {
        display: none;
    }
    #contactContainer {
        width:100%;
        height:75%
    }
    #copyrightContainer {
        width: 100%;
        height:25%
    }
    #copyright {
        color: #f7941d;
        margin:0 0 1% 0;
        font-size: 1.5vh;
    }

    #mediaContainer {
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        padding:1%;
        
    }
    #imgContainer {
        width: 100%;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0,0,0,1);
    }
    #currImg {
        width:100%;
    }
    
    #vidContainer {
        height: 100%;
        margin: .2vh 0;
        box-shadow: 0 0 15px rgba(0,0,0,1);
    }

    #displayTextContainer {
        width:100%;
    }

    /*NEWLY ADDED */
    .teamMember {
        width: 100%;
    }
    .teamMember:hover {
        width: 100%;
    }
    .kickstarterHeader {
        width:100%;
        font-size: 2.9rem;
        text-align:center;
        display:block;
    }
    .kickstarterBackers {
        margin: auto;
    }
    .kickstarterBackers span {
        width: 100%;
    }
    /*NEWLY ADDED */

    
    .teamContainer > img {
        width: 60%;
    }

    .makingContainer > img {
        width: 65%;
    }    

    .archiveContainer > img {
        width: 30%;
    }
    .archivedPage {
        width: 30%;
        opacity: 0.5;
    }
    .archivedPage:hover {
        width: 30%;
    }
} /* END MOBILE VIEW CSS */