/* FOR ENTIRE PAGE CONTENT*/
html, body, main {
    /* FILL ENTIRE VIEWPORT*/
    height:100vh; 
    width:100vw;
    /* ENSURE NO PADDING OR MARGINS */
    margin:0;
    padding:0;
    /* ONLY SHOW WHAT FITS IN VIEWPORT */
    overflow: hidden;
    /* SET Z-Index TO BE BEHIND EVERYTHING */
    z-index: -2;
}
/*******************************************************************/
.centerContents {
    display: flex;
    justify-content: center;
    align-items:center;
}
.leftAlign { justify-content: flex-start; }
.rightAlign{ justify-content: flex-end; }
/*******************************************************************/
/* 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;
}
/*******************************************************************/
/* NAVBAR, MAINVIEW, & FOOTER CSS START */
#rowNav, #rowFoot { height: 10%; width: 100%; background-color: #FFF5C3; }
#rowView { 
    height: 80%; 
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items:center;
    background-color: #FFF5C3;
}
#homeView {
    height:100%;
    width:100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
}
/* NAVBAR, MAINVIEW, & FOOTER CSS END */
/*******************************************************************/
#uhhmmm {
    height:100%;
    width:20%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF7260;
    font-size:5vh;
    font-weight: bold;
}
.navItem {
    height:100%;
    width:10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF7260;
    font-size:5vh;
    font-weight: bold;
}
.navItem:hover {
    height:100%;
    width:10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF7260;
    font-size:8vh;
    font-weight: bold;
    opacity: .6;
}
/* NAVBAR, MAINVIEW, & FOOTER CSS END */
/*******************************************************************/

/*******************************************************************/
/* INDEX CSS START */
#cardContainer {
    height: 100%;
    width:100%;
    background-color: #505050;
    display:flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
.card {
    height: 23%;
    width: 23%;
    color: #FF7260;
    font-size: 10vh;
    font-weight: bold;
    background-color: #129793;
    border: 5px solid #9bd7d5;
}
.card:hover {
    height: 23%;
    width: 23%;
    color: #FF7260;
    font-size: 10vh;
    font-weight: bold;
    background-color: #129793;
    border: 5px solid #9bd7d5;
    opacity:.65;
}
/* INDEX CSS END */
/*******************************************************************/


/*******************************************************************/
/*TEMP CSS FOR MCP2000XL*********************************************/
/*******************************************************************/
#MCPContainer { /* OVERALL CONTAINER */
    height: 100%;
    width: 60%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background-color:#000000;
}
#MCPHeader { /* HEADER CONTAINER */
    height: 10%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
#MCPBody { /* CSS FOR BODY OF PADS */
    height: 80%;
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
#MCPFooter {
    height: 10%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}


.MCPPad { /* CSS FOR EACH PAD */
    height: 23%;
    width: 23%;
    background-color: royalblue;
}




#Logo {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
#LogoTextTop {
    font-size: 4vh;
}
#LogoDivider {
    height: 5%;
    width: 100%;
    background-color: purple;
}
#LogoTextBottom {
    color:orange;
    font-size: 2vh;
}


#footerBTNCTR {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#leftBTNCTR {
    height: 100%;
    width: 40%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#centerBTNCTR {
    height: 100%;
    width: 20%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#rightBTNCTR {
    height:100%;
    width:40%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}


.clipBTN {
    height: 80%;
    width: 45%;
    background-color: purple;
}
.clipBTN:hover {
    height: 80%;
    width: 45%;
    background-color: purple;
    opacity: .6;
}
.centerBTN {
    height:80%;
    width:100%;
    background-color: #B8223F;
}
.centerBTN:hover {
    height:80%;
    width:100%;
    background-color: #B8223F;
    opacity: .6;
}
.centerNavCTR {
    height:100%;
    width: 30%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}
.centerNavBTN {
    height: 40%;
    width: 100%;
    background-color: purple;
}
.centerNavBTN:hover {
    height: 40%;
    width: 100%;
    background-color: purple;
    opacity:.6;
}
.sideNavBTN {
    height: 80%;
    width: 30%;
    background-color: purple;
}
.sideNavBTN:hover {
    height: 80%;
    width: 30%;
    background-color: purple;
    opacity:.6;
}



.padSample { /* CONTAINER FOR EACH SAMPLE TRIGGERS */
    height: 23%;
    width: 23%;
    background-color: royalblue;
}
.sampleTrigger {
    height: 80%;
    width: 100%;
}
.timeIndicator {
    height:100%;
    width:1%;
    background-color: purple;
    opacity: 0;
}
/*
.sampleTrigger:hover .timeIndicator{
    height:100%;
    width:100%;
    transition: width 2s linear;
    background-color: purple;
    opacity:.6;
}
*/
.sampleBtnCtr {
    height:20%;
    width:100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.sampleBtn {
    height:100%;
    width: 20%;
    background-color: lightseagreen;
    border: 1px solid turquoise;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.sampleBtn:hover {
    height:100%;
    width: 20%;
    background-color: lightseagreen;
    border: 1px solid turquoise;
    opacity: .6;
}
.sampleBtnTxt {
    color: purple;
    font-size: 2vh;
    font-weight: bold;
}
/*******************************************************************/
/*TEMP CSS FOR MCP2000XL*********************************************/
/*******************************************************************/