@charset "utf-8";
/* CSS Document */

/******************************************************************
UNIVERSAL
******************************************************************/
p,
.slice h3 {
	font-family: 'Signika', sans-serif;
}

.visible {
	opacity: 1!important;
}

.link {
	color: #DE3A3A!important;
	transition: .3s;
}

.link:hover {
	background-color: #DE3A3A;
    color: #FCF2DD!important;
    text-decoration: none;
}

.jump-button {
	width: 125px;
	margin: 6rem auto 0;
	text-align: center;
}

.jump-button p {
	text-transform: uppercase;
	transition: .3s;
}

.jump-button a:hover i {
	animation: moveup .5s infinite;
	color: #DE3A3A;
}

@keyframes moveup {
	50% {
		transform: translate(0px, -10px);
	}
}

/******************************************************************
BANNER
******************************************************************/
.page-banner {
	background-color: #000;
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.page-banner .left-side,
.page-banner .right-side {
	text-align: left;
}

.page-banner .left-side p {
	color: #FCF2DD;
	margin-bottom: 0;
}

.overlay-bg {
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .6)50%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
}

.page-banner .content-wrap {
	padding: 80px 1rem 0;
    position: relative;
    top: 50%;
    transform: translate(0, -40%);
	z-index: 999;
	opacity: 0;
	animation: fadeIn .5s ease-in .5s forwards;
}

#celebration-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: fadeIn .5s ease-in .5s forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

video {
	width: 100%;
}

.title {
	font-family: 'Ramaraja', serif;
	text-transform: uppercase;
	line-height: 50px;
	padding-bottom: 10px;
	text-align: center;
	position: relative;
	margin-bottom: 0;
	color: #FFF;
	font-size: 3.9rem;
	font-weight: 100;
}

.title span {
	font-size: 2.6rem;
	display: block;
}

.title::after {
	content: '';
	background-color: #DE3A3A;
	height: 4px;
	width: 850px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

/******************************************************************
SLICE
******************************************************************/
#intro,
#links {
	background-color: #1D1D1D;
}

#intro img {
	box-shadow: 25px 25px 0 0 #1D1D1D;
}

#intro .top-content {
	top: 110px;
}

#intro .top-content p {
	color: #FCF2DD;
}

#quiz {
	background-color: #FCF2DD;
}

#quiz img {
	box-shadow: 25px 25px 0 0 #FCF2DD;
	width: 100%;
}

#quiz .top-content {
	top: 180px;
}

#quiz .top-content p {
	color: #1D1D1D;
}

#quiz .top-content .bottom-content:hover p {
	color: #FCF2DD;
}

#links {
	padding: 6rem 1rem 1rem;
}

#links h3 {
	position: relative;
	font-size: 28px;
	color: #FCF2DD;
	text-transform: uppercase;
	text-align: center;
	font-weight: 100;
}

#links h3::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	height: 4px;
	background-color: #DE3A3A;
	width: 400px;
	transform: translate(-50%, 0);
}

#links p {
	color: #FCF2DD;
	font-size: 18px;
	margin-bottom: 0;
	padding: 0 .5rem 1rem;
}

#links a {
	text-align: center;
	color: #FCF2DD;
}

#links a:hover {
	text-decoration: none;
}

#links button:hover {
	background-color: #DE3A3A;
}

.slice {
	position: relative;
	padding: 6rem 1rem 12rem;
}

.slice .image-wrap {
	z-index: 1;
	padding: 0;
}

.slice .top-content {
	border: 2px solid #DE3A3A;
	position: relative;
	left: -35px;
	z-index: 0;
}

.slice .bottom-content {
	border-top: 2px solid #DE3A3A;
	margin-top: 40px;
	text-align: center;
	transition: .3s;
}

.slice .bottom-content p {
	text-transform: uppercase;
	margin-bottom: 0!important;
}

.slice .top-content p {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 10px;
	padding-left: 50px;
}

#intro > div > div.dgov-col-md-5.dgov-col-sm-12.dgov-align-self-center.top-content.smooth-scroll.wow.fadeInLeft > p:nth-child(3) {
	margin-bottom: 0;
}

.slice .top-content a {
	cursor: default;
}

.slice .top-content a:hover {
	text-decoration: none;
}

.slice .top-content .bottom-content:hover {
	background-color: #DE3A3A;
	color: #FCF2DD;
	cursor: pointer;
}

.links-grid {
	padding-top: 20px;
	text-align: center;
}

button {
	font-size: 18px;
	font-family: 'Signika', sans-serif;
	text-transform: uppercase;
	border-top: 2px solid #DE3A3A;
	border-right: none;
	border-bottom: 2px solid #DE3A3A;
	border-left: none;
	background-color: #1D1D1D;
	padding: .5rem 1rem;
	transition: .3s;
}


/******************************************************************
TIMELINE
******************************************************************/
.quote {
	display: block;
	padding-top: 25px;
	font-style: italic;
	font-size: 22px;
}

.split-screen {
	display: flex;
	flex-wrap: wrap;
	opacity: 0;
	transition: .3s;
}

.picture {
	background: #FCF2DD;
	width: calc( 50% + 1px);
	height: 100vh;
	margin: 0 auto 10vh 0;
	position: sticky;
	top: 0;
}

.picture:nth-of-type(2n)::after {
	right: 45%;
	left: 5vmin;
}

.section {
	background: #FCF2DD;
	width: calc(50% + 1px);
	height: 100vh;
	margin: 0 0 10vh auto;
	position: sticky;
	top: 0;
}

.picture:nth-of-type(1),
.section:nth-of-type(1) {
	margin: 0 0 10vh 0;
	width: 50%;
}

.picture:nth-of-type(2n) {
	margin: 0 0 10vh auto;
}

.section:nth-of-type(2n) {
	margin: 0 auto 10vh 0;
}

.picture:last-of-type,
.section:last-of-type {
	margin-bottom: 0;
}

.section::before {
	background: inherit;
	z-index: 1;
	content: '';
	position: absolute;
	top: 50%;
	left:0;
	width: 7vmin;
	height: 7vmin;
	transform: translate(calc(-50% + 1px), -50%) rotate(-45deg);
	clip-path: polygon(-15% -15%, 110% 0%, 0% 110%);
	box-shadow: -4px -2px 8px rgba(0,0,0,.4);
	border-radius: 1.5vmin 0 0 0;
}

.section:nth-of-type(2n)::before {
	left:auto;
	right: 0;
	transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1);
}

.section:nth-of-type(2n):after {
	right: 5vmin;
	left: 45%;
}

.picture img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}

.section > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: center;
	padding: 0 3rem;
}

.section h1,
.section h2 {
	margin: 15% 0 auto;
	font-size: calc(5vmin + 3vmax);
	text-align: center;
	font-weight: 700;
	line-height: 1;
	word-spacing: .5rem;
}

.section p {
	width: 100%;
	font-size: 25px;
	margin-bottom: 0;
	padding: 0 1rem;
	color: #1D1D1D;
	line-height: 30px;
}

#dnn_ctr3232_HtmlModule_lblContent > div.split-screen.visible > section:nth-child(8) > div > p:nth-child(2) {
	padding-top: 25px;
}

#dnn_ctr3232_HtmlModule_lblContent > div.split-screen.visible > section:nth-child(4) > div > p:nth-child(1) {
	margin-bottom: 20px;
}

.full-screen {
	background-color: #FCF2DD;
	padding: 4rem 3rem;
}

.full-screen .dgov-grid {
	padding: 1rem 0;
}

.full-screen .top-content {
	border: 2px solid #1D1D1D;
	border-bottom: none;
	margin-bottom: .5rem;
	padding: 1rem 1rem 0;
}

.full-screen .top-content p {
	margin-bottom: 0;
	line-height: 24px;
	font-size: 18px;
}

.full-screen .bottom-image {
	padding: 0;
}

.full-screen .bottom-image img {
	width: 100%;
}


/******************************************************************
IMAGE GALLERY
******************************************************************/
.image-gallery {
	background-color: #1D1D1D;
	position: relative;
	padding: 5rem 0;
}

.image-gallery p {
	color: #FCF2DD;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	margin: 0 auto 2rem;
	width: 700px;
	text-align: center;
}

.image-gallery p::after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: 50%;
	height: 4px;
	background-color: #DE3A3A;
	width: 400px;
	transform: translate(-50%, 0);
}


/******************************************************************
SOCIAL ICONS
******************************************************************/
.social-top {
	display: inline-flex;
}

.social-inner {
	display: flex;
	font-size: 1rem;
}

.social-inner a, .social-inner a:link {
	color: #1D1D1D;
	text-decoration: none;
}

.social-inner a {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FCF2DD;
}

.social-inner a.addthis_button_facebook:hover span {
	color: #fff;
}

.social-inner a.addthis_button_facebook:hover {
	background-color: #3b5998;
	border-color: #3b5998;
}

.social-inner a.addthis_button_facebook {
	transition: all .2s ease-in;
	margin-right: 10px;
}

.social-inner a.addthis_button_twitter:hover span {
	color: #fff;
}

.social-inner a.addthis_button_twitter:hover {
	background-color: #00aced;
	border-color: #00aced;
}

.social-inner a.addthis_button_twitter {
	padding-top: 2px;
	transition: all .2s ease-in;
	margin-right: 10px;
}

.social-inner a.addthis_button_email:hover span {
	color: #fff;
	transition: all .2s ease-in;
}

.social-inner a.addthis_button_email:hover {
	background-color: #DD4B39;
	border-color: #DD4B39;
}

.social-inner a.addthis_button_email {
	font-size: .9em;
	transition: all .2s ease-in;
}

/******************************************************************
IE ONLY
******************************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.split-screen {
		display: none;
	}
	.full-screen {
		display: block!important;
	}
	.full-screen .dgov-justify-center ,
	.full-screen .dgov-justify-end {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.full-screen .dgov-col-11 {
		width: 55%!important;
	}
} 


/******************************************************************
RESPONSIVE
******************************************************************/
@media screen and (min-width: 1025px) {
	.full-screen {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.title::after {
		width: 95%;
	}
	.split-screen {
		display: none;
	}
	#dnn_ctr3232_HtmlModule_lblContent > div.full-screen > div:nth-child(5) > div.dgov-col-11.bottom-image > img:nth-child(1),
	#dnn_ctr3232_HtmlModule_lblContent > div.full-screen > div:nth-child(5) > div.dgov-col-11.bottom-image > img:nth-child(2),
	#dnn_ctr3232_HtmlModule_lblContent > div.full-screen > div:nth-child(5) > div.dgov-col-11.bottom-image > img:nth-child(3),
	#dnn_ctr3232_HtmlModule_lblContent > div.full-screen > div:nth-child(5) > div.dgov-col-11.bottom-image > img:nth-child(4) {
		margin-bottom: 20px;
	}
	.quote {
		font-size: 18px;
		padding-bottom: 10px;
	}
}

@media screen and (max-width: 991px) {
	.title::after {
		width: 85%;
	}
	.image-gallery p::after,
	#links h3::after {
		width: 80%;
	}
	.slice {
		padding: 6rem 3rem;
	}
	#links {
		padding: 6rem 3rem 1rem;
	}
	.slice .image-wrap {
		padding: 0 0 20px;
	}
	#intro .top-content,
	#quiz .top-content {
		top: 0;
		left: unset;
	}
	.slice .top-content p {
		padding: 0 .5rem;
	}
	#quiz .top-content p {
		text-align: center;
	}
	#intro img,
	#quiz img {
		box-shadow: none;
	}
}

@media screen and (max-width: 800px) {
	.title {
		font-size: 3.5rem;
		line-height: 40px;
	}
	.title span {
		font-size: 2.25rem;
	}
}
@media screen and (min-width: 768px) {
	.full-screen .dgov-justify-center {
		-ms-flex-pack: unset;
		-webkit-justify-content: unset;
		justify-content: unset;
	}
	#dnn_ctr3232_HtmlModule_lblContent > div.full-screen > div:nth-child(5) {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
}

@media screen and (max-width: 767px) {
	.page-banner .right-side {
		text-align: center;
	}
	.full-screen {
		padding: 6rem 1rem;
	}
	.full-screen .dgov-justify-end {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.image-gallery p {
		width: 100%;
		padding: 0 2rem;
		text-align: left;
	}
	#links .links-grid p {
		text-align: left;
	}
	#quiz .top-center p {
		text-align: left;
	}
}

@media screen and (max-width: 645px) {
	.title {
		font-size: 3rem;
		line-height: 35px;
	}
	.title span {
		font-size: 2rem;
	}
}

@media screen and (max-width: 568px) {
	.slice {
		padding: 6rem 2.5rem;
	}
}

@media screen and (max-width: 543px) {
	.title {
		font-size: 2.25rem;
		line-height: 30px;
	}
	.title span {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 414px) {
	.slice {
		padding: 6rem 2.25rem;
	}
	.title::after {
		width: 90%;
	}
}

@media screen and (max-width: 375px) {
	.slice {
		padding: 6rem 2rem;
	}
	.title {
		font-size: 2rem;
	}
}
@media screen and (max-width: 341px) {
    .title span {
        font-size: 18px;
    }
}