.hide{ display:none !important; }

.redborder{ border:.12rem solid red !important; }

.input-group-text{
	border:none !important;
	margin:.05rem 0 .05rem .5rem !important;
}
.divider{
	position: relative;
}
.divider:before{
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	height: .1rem;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}


/* ----------- FOOTER ------------ */
.page-footer{
	background-color: #eeefea;
}
.footer-copyright{
	background-color: rgba(0, 0, 0, 0)
}

/* ----------- NAVBAR ------------ */
nav {
	background-color: rgba(249, 249, 249, 0.9) !important;
}
.navbar-brand{
	border-bottom: 3px solid transparent;
}
.navbar {
	width:100%;
	box-shadow: 0 .2rem 1rem rgba(0,0,0,.1);
}
.navbar .nav-item {
	float: left;
	display: block;
	color: black;
	text-align: center;
	text-decoration: none;
	font-size: 17px;
	border-bottom: 3px solid transparent;
}
.navbar .nav-item:hover {
	border-bottom: 3px solid #5BC0DE;
}
.navbar .nav-item .active {
	border-bottom: 3px solid #5BC0DE;
}
.dropdown {
	min-width:8.7rem;
}
/* -------- INDEX PAGE -------- */
.home #masthead {
	margin-top:3.7rem;
	height: 28rem;
	background: rgba(0, 0, 0, .5) url("../img/volunteer_home.jpg");
	background-blend-mode: darken;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: white;
}
.home .header-background-overlay{
	background-color:rgba(0,0,0,0.1);	
	height: 100%;
}
.home #masthead #text{
	margin-top:1rem;
}
.home .header-wrapper{
	animation: fadeInAnimation ease 3s; 
	animation-iteration-count: 1; 
	animation-fill-mode: forwards; 
}
.home #masthead h1 {
	color: #f4f4f4;
	font-size:3.3rem;
	font-weight:600;
	position:center;
	left:-3.6rem;
}
@keyframes fadeInAnimation { 
	0% { 
		opacity: 0; 
	} 
	100% { 
		opacity: 1; 
	} 
} 
.home #masthead p {
	color: #f4f4f4;
	font-size:1.2rem;
	position:center;
	left:4rem;
	font-style:italic;
	margin:auto;
	width:15rem;
}
.home .section .col-12 {
	padding: 2rem;
	text-align:center;
}
.home .section-odd{
	background-color: #f2f2f2;
}
.home .section-even{
	background-color: white;
}
.home h1{
	font-size: 2.9rem;
	letter-spacing:.05rem;
	font-weight:300;
}
/* --------- ABOUT PAGE --------- */
.about .about-container{
	width:95%;
	margin:auto;
	margin-top:5rem;
}
.about p{
	font-size:1.1rem;
	text-align:justify;
}

/* ------ OPPORTUNITY ------- */
.opportunity #events{
	margin-top:5rem;
}
.opportunity .overlay{
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	z-index:2;
}
.opportunity .overlay-card{
	position:absolute;
	margin:auto;
	width:33%;
	min-width:300px;
	padding:1.1rem;
	top:54%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius:.4rem;
}
@media only screen and (max-width: 1026px) {
.opportunity .time-col {
		display: none;
}
}
.opportunity .overlay-card button{
	margin-top: 2px;
}
.opportunity .row-item {
	vertical-align: middle;
}
.opportunity .blue-btn {
	background-color: #5fd3f6;
	border-color: #5fd3f6;
}
.opportunity .blue-btn:hover {
	background-color: #50b1ce;
	border-color: #50b1ce;
}
.opportunity .overlay .card p {
	margin-bottom:.7rem;
}
.opportunity .overlay .card .opp-desc {
	overflow:auto;
	max-height:7rem;
}
.opportunity footer {
	position: relative;
	bottom: 0;
	width: 100%;
}
.opportunity  #content-wrap {
	min-height: 70vh;
}

/* ------ CONTACT PAGE ------ */

.contact .overlay{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	z-index:2;
}
.contact .overlay-card{
	position:absolute;
	margin:auto;
	width:33%;
	padding:1.1rem;
	top:54%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius:.4rem;
}
.contact .overlay-card p{
	margin:auto;
	font-size:1.4rem;
	text-align:center;
}
.contact .contact-card{
	margin:8rem auto 1.5rem auto;
	width: 70%;
	padding: 2rem;
	padding-bottom: 1rem;
}
.contact #send-btn{
	background-color:#000;
	color:#fff;
	border-radius:0;
	float:right;
	width:7rem;
}
.contact .contact-info{
	font-size:1.2rem;
}
.contact .contact-info i{
	margin-bottom:1rem;
}
.contact #content-wrap{
	min-height: 65vh;
}
/* ------ LOGIN & SIGN-UP PAGES ------ */
.login-signup{
	background-image: url("../img/volunteer_login.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}
.login-signup .login-container{
	height: 100%;
	align-content: center;
}
.login-signup .card{
	background-color: rgba(249, 249, 249, 0.75) !important;
	margin:auto;
	width: 30%;
	min-width: 300px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius:.5rem !important;
}
.login-signup .card .row{
	margin: auto;
	margin-top: 0;
	margin-bottom: 0;
}
.login-signup .card form{
	padding: 10px 14px 0 14px;
}
.login-signup .form-control{
	border-radius:0 .3rem .3rem 0 !important;
}
.login-signup .input-group-prepend span{
	background-color: #5BC0DE;
}
.login-signup .btn-container{
	margin-bottom: 10px;
}
.login-signup .submit-btn{
	background-color: #5BC0DE !important;
}
.login-signup .submit-btn:hover{
	background-color: #48A7C3 !important;
}
.login-signup .overlay{
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	z-index:2;
}
.login-signup .overlay-card{
	position:absolute;
	margin:auto;
	width:33%;
	padding:1.1rem;
	top:54%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius:.4rem;
}
.login-signup .overlay-card p{
	margin:auto;
	font-size:1.4rem;
	text-align:center;
}

/* ---------- ACCOUNT INFO ----------- */
@media only screen and (max-width: 1026px) {
	.account-info .time-col {
			display: none;
	}
}
.account-info .overlay{
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	z-index:2;
}
.account-info .overlay-card{
	position:absolute;
	margin:auto;
	width:33%;
	min-width:300px;
	padding:1.1rem;
	top:54%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius:.4rem;
}
.account-info #loading-overlay .overlay-card{
	width:25%;
}
.account-info #loading-overlay .checkmark{
	color:green;
	margin-top:4px;
	font-size:1.18rem;
}
.account-info #loading-overlay .exclamation{
	color:red;
	margin-top:4px;
	font-size:1.18rem;
}
.account-info .overlay-card button{
	margin-top: 2px;
}
.account-info .divider {
	margin-bottom: 2rem;
}
.account-info h1 {
	margin: 5rem 0 1rem 4rem;
}
.account-info .title {
	display:inline-block;
	margin-top: 6rem;
	margin-bottom: 2rem;
	padding-left: 4rem;
}
.account-info .subtitle {
	display:inline;
	font-style:italic;
}
.account-info .details-btn{
	background-color: #5fd3f6;
	border-color: #5fd3f6;
}
.account-info #view-volunteer-info {
	display:none;
}
.account-info .blue-btn {
	background-color: #5fd3f6;
	border-color: #5fd3f6;
}
.account-info .blue-btn:hover {
	background-color: #50b1ce;
	border-color: #50b1ce;
}
.account-info .overlay-card button{
	margin-top: 2px;
}
.account-info .page-btn {
	width:100%;
	color:#000 !important;
	background-color: #fff;
	border-color: #5fd3f6;
}
.account-info .active {
	background-color: #5fd3f6 !important;
	border-color: #5fd3f6 !important;
}
.account-info .page-btn:hover {
	background-color: #5fd3f6;
	border-color: #5fd3f6;
}
.account-info .active:hover {
	background-color: #50b1ce !important;
	border-color: #50b1ce !important;
}
.account-info .table-wrapper td {
	vertical-align:middle;
}
.account-info .user-attributes {
	padding:4rem;
	padding-top:2rem;
}
.account-info .user-attributes table td, th {
	text-align: left;
  padding: 8px;
	font-size:1.2rem;
}
.account-info .user-attributes .change-btn {
	color:#878585;
	background:none;
	margin:0;
	padding:0;
	border:none;
	font-size:1rem;
	cursor: pointer;
}
.account-info .user-attributes .change-btn:hover {
	color:#bababa;
	text-decoration:underline;
}
.account-info #stats {
	margin:4rem;
}
.account-info .overlay{
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	z-index:2;
}
.account-info .overlay-card{
	position:absolute;
	margin:auto;
	width:33%;
	min-width:300px;
	padding:1.1rem;
	top:54%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius:.4rem;
}
/* ---------- FORGOT PASSWORD ----------- */
.forgotpass .forgotpass-container .row{ text-align:center; }

.forgotpass .forgotpass-container .row h4{
	margin:auto;
	margin-top:.3rem;
}
.forgotpass .forgotpass-container .row p{
	font-family:sans-serif;
	margin:.7rem 2rem .9rem 2rem;
	line-height:1.2rem;
}
.forgotpass .submit-btn {
	margin-top:1.7rem;
}