/*
 *
 * red: #920a20
 * blue: #1e0156
 *
 */

/*** generic styles ***/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-size: 10px;
}

/*** tag-specific styles ***/
dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 80%;
	border-radius: 2rem;

	padding: 2rem;
	border: 4px solid #1e0156;
	background-color: #ffffff;

	color: #1e0156;
}

a {
	text-decoration: none;
	color: inherit;
	font-size: 2rem;
	font-weight: bold;
}

a:hover{
	cursor: pointer;
}

body{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	font-family: sans-serif;
	font-size: 2rem;


	background-image: url(../images/web_background.jpg);
	background-size: 100%;
	background-repeat: repeat-y;
}

main{
	display: flex;
	flex-direction: column;
	align-items: center;
}

article{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-basis: 30%;

	border: none;
	border-radius: 2rem;

	color: white;
	background-color: #1e0156;
}

footer {
	display: flex;
	flex-direction: column;
}

/*** class styles ***/

/** elements at top of page, before main content **/
/* logo */
.logo-container{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.logo {
	display: flex;
	max-width: 80%;
}
/* action buttons */
.action {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;

	color: #1e0156;

	margin: 1rem;
}

.action > a{
	display: flex;
	flex-direction: row;
	background-color: white;
	padding: 1rem;

	border-radius: 2.2rem;
	border: 2px solid #1e0156;
	margin: 1rem 0rem;
	font-weight: bold;

	align-items: center;
	justify-content: center;

	width: 15%;
}

/* contact */
h3 > .fa-star::before{
	color: white;
}

a > .fa-star::before {
	color: #1e0156;
}

.fa-facebook::before {
	padding: 1rem 1.4rem;
	border: 2px solid white;
	border-radius: 1rem;
	background-color: #1e0156;
	color: white;
}

/** main content classes **/
/* outer container for all news and event updates */
.news_section{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	margin: 0 3rem;
	margin-top: 4rem;
	padding: 0 3rem;
	padding-bottom: 2rem;
}

.news_section.endorsements{
	width: 100%;
	padding: 0 3rem;
	margin-bottom: 4rem;
}

/* general styling for all carousel containers */

.carousel{
	display: flex;
	flex-direction: column;
	flex-basis: 30%;
	position: relative;
}

.arrow_left{
	font-size: 3rem;
	position: absolute;
	left: 1rem;
	top: 50%;
	color: white;
	cursor: pointer;
}

.arrow_right{
	font-size: 3rem;
	position: absolute;
	right: 1rem;
	top: 50%;
	color: white;
	cursor: pointer;
}

.carousel_link{
	cursor: pointer;
	text-align: center;
}

.endorsement_carousel{
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

/* specific styling for event carousel */
.event_post{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
	padding: 1rem 4rem;
	width: 100%;
	background-color: #1e0156;
	border-radius: 2rem;
}

.event_post > *{
	color: white;
}

.event_post h3{
	filter: drop-shadow(black 2px 2px);	
}

.event_details{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	text-align: center;
}

.event_details > *{
	margin: 0.5rem;
}

.event_details img{
	object-fit: contain;
	width: 90%;
	height: 65%;
}


.event_dots{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}



.event_dot{
	cursor: pointer;
	height: 1.8rem;
	width: 1.8rem;
	margin: 0 2px;
	background-color: #130156;
	border-radius: 50%;
}

.event_dot:hover{
	background-color: #920a20;
}


/* specific styling for news carousel */
.news_post{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
	padding: 1rem 4rem;
	width: 100%;
	background-color: #1e0156;
	border-radius: 2rem;

}

.news_post > h3{
	color: white;
	filter: drop-shadow(black 2px 2px);	
}

.news_post > img{
	border: 3px solid #1e0156;
	border-radius: 2rem;
	margin-top: 2rem;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.news_post > .caption{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	bottom: 6rem;
	padding: 0 1rem;
	color: white;
}

.news_post > h4{
	position: absolute;
	left: 0;
	filter: drop-shadow(black 2px 2px);	
	margin: 0.5rem 1rem;
	color: white;
}

.news_dots{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}



.news_dot{
	cursor: pointer;
	height: 1.8rem;
	width: 1.8rem;
	margin: 0 2px;
	background-color: #130156;
	border-radius: 50%;
}

.news_dot:hover{
	background-color: #920a20;
}

/* specific styling for events gallery */
.gallery_item{

	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
	background-color: #1e0156;
	border-radius: 2rem;
	padding: 1rem 4rem;

}

.gallery_item > h3{
	color: white;
	filter: drop-shadow(black 2px 2px);	
}

.gallery_item > img{
	border: 3px solid #1e0156;
	border-radius: 2rem;
	margin-top: 2rem;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gallery_item > .caption{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1rem;
	color: white;
	text-align: center;
}

.gallery_item > h4{
	position: absolute;
	left: 0;
	filter: drop-shadow(black 2px 2px);	
	margin: 0.5rem 1rem;
	color: white;
}

.gallery_dots{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

.gallery_dot{
	cursor: pointer;
	height: 1.8rem;
	width: 1.8rem;
	margin: 0 2px;
	background-color: #130156;
	border-radius: 50%;
}

.gallery_dot:hover{
	background-color: #920a20;
}

/* specific styling for endorsement carousel */
.endorsement{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
	padding: 2rem 4rem;
	width: 100%;
	background-color: #1e0156;
	border-radius: 2rem;
	transition-property: display;
	transition-value: 2s;

}

.endorsement > h3{
	color: white;
	filter: drop-shadow(black 2px 2px);	
}

.endorsement > img{
	border: 3px solid #1e0156;
	border-radius: 2rem;
	margin-top: 2rem;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.endorsement > .caption{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	bottom: 6rem;
	padding: 0 1rem;
	color: white;
}

.endorsement > h4{
	position: absolute;
	left: 0;
	filter: drop-shadow(black 2px 2px);	
	margin: 0.5rem 1rem;
	color: white;
}

.endorsement_dots{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}



.endorsement_dot{
	cursor: pointer;
	height: 1.8rem;
	width: 1.8rem;
	margin: 0 2px;
	background-color: #130156;
	border-radius: 50%;
}

.endorsement_dot:hover{
	background-color: #920a20;
}

/** outer section for campaign objectives **/
.campaign_objectives {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: space-between;
	margin: 0 3rem;
	margin-top: 4rem;
}

/* inner section for individual objectives */
.campaign_objectives > article{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem;
}

.cal{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.about {
	display: flex;
	flex-direction: column;

	padding: 2rem;
	border: none;
	border-radius: 2rem;
	background-color: #1e0156;
	color: white;
	margin: 0 3rem;
	margin-bottom: 4rem;
}

.about > p {
	padding: 1rem;
}

.contact {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;

	background-color: #920a20;

	padding: 1rem 0;
	border: 2px solid #1e0156;
	color: white;
}

.vouchers{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	background-color: #920a20;
	width: 100%;

	padding: 3rem 2rem;
	border: 2px solid #1e0156;
	color: white;
}

.vouchers p{
	font-size: 30px;
	font-weight: bold;

}

/* contact bar, both at top and bottom */
.contact > h3, a{
	margin: 0.5rem;
}

.disclaimer {
	display: flex;
	flex-direction: column;
	align-items: center;

	align-self: center;

	padding: 0.5rem;
	border: 2px solid #920a20;
	margin: 1rem;

	color: #920a20;
}

/* must be near the bottom to properly override backgrounds */
.active{
	background-color: #920a20;
}

.fade_in{
	animation-name: fade_in;
	animation-duration: 2s;
}

@keyframes fade_in{
	from{ opacity: 0.2 }
	to: {opacity: 1 }

}