/* -------------Quality of Life Classes ------------*/

/* adds cursor and a click audio to element; click audio located in smartin.js */
.clickable{
	cursor: pointer;
}

/* fullscreen image class */
.img-full-bg{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

/* Cursor disable class */
.noEvents {
    pointer-events: none;
}

/* horizontally centers elements, not recommended for drag elements */
.centered{
    position: absolute!important;
    left: 0%;
    right: 0%;
    margin: 0 auto!important;
}


.reflect{
	transform: rotateY(180deg);
}


/* --------- Project Specific Classes, Change these for each project -------  */

.projectHeader{
	font-size: 1.4rem!important;
	top: 21%;
}

.slideHeader{
	position: absolute;
	text-align: left;
	left: 10%;
	top: 4%;
	font-size: 1.1rem!important;
	width: 80%;
}

.slideSubHeader{
	position: absolute;
	text-align: left;
	left: 10%;
	top: 10%;
	font-size: 0.8rem!important;
	width: 80%;
}


.mainMenu{
	height: 30%;
	width: 22%;
	transition: all .25s ease-in-out;
}

/* .mainMenu > p{
	top: 67%;
	width: 60%;
	font-size: .53rem;
	transition: all .25s ease-in-out;
} */

.menuImage{
	background-image: url(../media/imgs/placeHolders/menu.svg);
}
.menuImageC{
	background-image: url(../media/imgs/placeHolders/menuComplete.svg);
}

.mainMenu:hover, .mainMenu:focus{
	transform: scale(.98);
}
.mainMenu:hover > p, .mainMenu:focus > p{
	color: #5a5a5a;
}

.mainMenu:active{
	transform: scale(.95);
}

/* feedback modal styling */
.FBmodal{
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	position: absolute;
	background: #ffffff;
	border: .2rem solid black!important;
	-webkit-box-shadow: .2rem .2rem .3rem 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: .2rem .2rem .3rem 0px rgba(0, 0, 0, 0.5);
	box-shadow: .2rem .2rem .3rem 0px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

/* ------- Your Styling ---------- */