.hero.wide {
    height: 0;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 47.25%;
    width: 97%;
    margin: 0;
}

html, body {
	background: white;
}

#mainContainer {
	font-family: 'Montserrat', sans-serif;
}

#logo img {
    max-width: 400px;
    max-height: 80px;
    height: auto;
    transition: .3s;
}

.pray-btn, .pray-btn:visited, .pray-btn:active {
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 6%;
    color: var(--primary-color-text);
    background: #f5971d;
    padding: 6px 9px;
}

.navigation > ul > li > a {
    display: block;
    padding: 8px 14px;
    margin: 0;
    color: #1b5c76;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    transition: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: transparent solid 3px;
    font-weight: 600;
}
/* START VALUES SECTION */
.values {
	width: 100%;
	min-height: 460px;
	height: auto;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.values .top h2 {
	text-align: center;
	color: white;
	text-transform: uppercase;
	background: #08b1b8;
	padding: 12px 30px;
	font-size: 23px;
	letter-spacing: 2px;
	font-weight: 600;
	margin-bottom: 80px;
	margin-top: 0;
}

@media (max-width:640px) {
	.values .top h2 {
		margin-bottom: 40px;
	}

.active .menu-bar, .active .menu-bar::before, .active .menu-bar::after {
    background-color: #195c76;
}
}

.values .bottom {
	display: flex;
	width: 80%;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.values .bottom .value {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative
}

@media (max-width:768px) {
	.values .bottom .value {
	    margin: 60px 0;
	}
}

.values .bottom .value:before {
	position: absolute;
	top: 50%;
	left: 50%;
	content: '1';
	font-size: 200px;
	color: #f4f4f4;
	z-index: 1;
	transform: translate(-50%, -50%);
}

.values .bottom h3 {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	position: relative;
	z-index: 3;
}

.value.one h3, .value.five h3 {
	color: #f89832;
}


.value.two h3 {
	color: #a1ce4b;
}

.values .bottom .value.two:before {
	content: '2';
}

.value.three h3 {
	color: #ec5445;
}

.values .bottom .value.three:before {
	content: '3';
}

.value.four h3 {
	color: #08b1b8;
}

.values .bottom .value.four:before {
	content: '4';
}

.values .bottom .value.five:before {
	content: '5';
}

/* END VALUES SECTION */
/* START COVID SECTION */

.covid {
	width: 100%;
	min-height: 675px;
	height: auto;
	background: #f4f4f4;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 40px 20px;	
	position: relative;
}

.covid .left {
	justify-content: center;
	align-items: flex-start;
}

.covid .left h2 {
    color: #ec5445;
    font-size: 40px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    text-transform: uppercase;
    align-items: flex-start;
    margin: 13px;
}

.covid .right {
	padding: 0 30px;
}

@media (max-width:851px) {
	.covid {
		flex-direction: column;	
		padding-bottom: 60px;
	}
	
	.covid .left, .covid .right {
    	width: 100%;
    	position: relative;
    	z-index: 33;
	}

	.covid .left h2 {
	    color: #ec5445;
	    font-size: 40px;
	    text-align: left;
	    display: flex;
	    justify-content: flex-start;
	    text-transform: uppercase;
	    align-items: flex-start;
	    margin: 13px;
	    width: 100%;
	}
}

.covid .right p, .covid .right li {
	line-height: 1.8;
	font-size: 17px;
	color: #1a5c76;
	font-weight: 500;
}

.covid a {
	color: #ec5445;
	text-decoration: underline;
}

.green-triangle {
    content: '';
    background: #a1ce4b;
    position: absolute;
    width: 400px;
    width: clamp(106px, 30%, 156px);
    height: 510px;
    -webkit-clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    left: 0;
    bottom: 0;
     background-blend-mode: multiply;
}

/* END COVID SECTION */
/* START WHAT TO EXPECT SECTION */

.what-to-expect {
	width: 100%;
	min-height: 766px;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
}

.what-to-expect .wrapper {
	background: white;
	position: relative;
	display: flex;
}

.what-to-expect .left {
	width: 35%;
	justify-content: center;
	align-items: flex-start;
	padding: 70px;
}

.what-to-expect .left h2 {
    color: #1a5c76;
    font-size: 28px;
    text-align: left;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    align-items: center;
    margin: 13px;
}

.what-to-expect .left p {
    font-size: 21px;
    font-weight: 600;
    color: #08b1b8;
    padding-left: 12px;
    line-height: 1.8;
}

.what-to-expect .right {
	width: 65%;
	padding: 0 0px;
	z-index: 3;
}

.what-to-expect .right .image {
	width: 100%;
	height: auto;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 500px;
	position: relative;
	top: -60px;
	z-index: 12;
}

.what-to-expect .right .image:before {
	position: absolute;
	left: 0;
	top: 0;
	background: black;
	content: '';
	width: 100%;
	height: 100%;
	opacity: .3;
}

.what-to-expect .image-text {
	color: white;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 32px;
	z-index: 33;
}

.what-to-expect .bottom {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	z-index: 33;
	margin-top: 30px;
}

.what-to-expect .bottom h2 {
    color: white;
    text-transform: uppercase;
    font-size: 37px;
    max-width: 240px;
    text-align: right;
    padding: 0;
    margin: 0 30px;
}

.what-to-expect .bottom p {
    color: white;
    font-size: 18px;
    max-width: 480px;
    line-height: 1.4;
    margin: 0 30px;
}

.what-to-expect .image-text {
	position: absolute
}

.orange-triangle {
    content: '';
    background: #f89832;
    position: absolute;
    width: 100vw;
    height: 746px;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    left: 0;
    bottom: 0;
     z-index: 1;
}

@media (max-width:640px) {
	.orange-triangle {
	    -webkit-clip-path: polygon(100% 0,0% 100%,100% 100%);
	    clip-path: polygon(100% 0,-50% 100%,100% 100%);
	}
}

.what-to-expect .right img {
    transform: translate(0px, -50px);
    padding-left: 70px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1162px) {
	.what-to-expect .wrapper {
	    flex-direction: column;
	}
	
	.what-to-expect .left {
	    width: 100%;
	}

	.what-to-expect .right {
	    width: 100%;
	}

	.what-to-expect .bottom {
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	    position: relative;
	    z-index: 33;
	    margin-top: 30px;
	    height: 190px;
	}
	
	@media (max-width:768px) {
		.what-to-expect .bottom {
		    flex-direction: column;
		    padding-bottom: 40px;
		}
	}

		.what-to-expect .bottom h2 {
		    text-align: center;
		}
}
@media (max-width:768px) {
.what-to-expect .bottom {
		height: auto;;
}
.what-to-expect .bottom h2 {
    text-align: center;
    width: 100%;
    max-width: 84%;
}
}

/* END WHAT TO EXPECT SECTION */
/* START REGISTER SECTION */

.pre-register {
	width: 100%;
	min-height: 970px;
	/* min-height: 1200px; */
	height: auto;
	background: white;
}

.pre-register .top {
	max-width: 80%;
	margin: 0 auto;
}

.pre-register .top h2 {
    color: #08b1b8;
    font-size: 40px;
    text-transform: uppercase;
}

.pre-register .top p {
    line-height: 1.8;
    font-size: 17px;
    color: #1a5c76;
    font-weight: 500;
}

div.kids-age {
	width: 27.33%;
}

div.kids-age img {
	max-width: 100%;
	height: auto;
}

@media (max-width:768px) {
	div.kids-age {
		width: 100%;
		margin-bottom: 40px;
	}

.pre-register .bottom h3 {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 0;
}
}

.pre-register .bottom {
	justify-content: space-between;
}

.pre-register .bottom p {
    line-height: 1.8;
    font-size: 15px;
    color: #1a5c76;
    font-weight: 500;
}


.pre-register .bottom h3 {
    font-size: 20px;
    text-transform: uppercase;
}

/* END REGISTER SECTION */
/* START EVENTS SECTION */


.events-section {
	width: 100%;
	min-height: 700px;
	height: auto;
	background: white;	
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 0;
}

.events-section h2, h2.events-h2 {
	font-size: 40px;
    text-transform: uppercase;
    text-align: center;
    color: #f89832;
    position: relative;
    z-index: 33;
}
 h2.events-h2 {
	font-size: 40px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 33; 
 }
 
 .events-section .blue-triangle {
	bottom: 0;
	transform: none;
 }

/*
.blue-triangle {
    content: '';
    background: #08b1b8;
    position: absolute;
    width: 100vw;
    height: 700px;
    -webkit-clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    left: 0;
    bottom: 0;
     background-blend-mode: multiply;
     z-index: 1;
}
*/
    /* content: ''; */
.blue-triangle {
    /* content: ''; */
    background: #08b1b8;
    position: absolute;
    width: 100vw;
    height: 700px;
    /* height: -webkit-fill-available; */
    -webkit-clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    /* left: 0; */
    /* top: 0; */
    background-blend-mode: multiply;
    z-index: 0;
    transform: translate(0px, -31%);
    }

.pre-register .container{
	z-index: 1;
}
.event-graphic {
    width: 100%;
    max-width: 747px;
    height: auto;
    z-index: 33;
    position: relative;
    margin-bottom: 40px;
}

.events-section a {
	margin-bottom: 45px;
}


.images {
	width: 100%;
	height: auto;
	background: white;
	display: flex;
}

.images .grid-33 {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 0;
	padding-top: 22.25%;
	z-index: 1;
}

@media (max-width: 768px) {
	.images {
		flex-direction: column;
	}

	.images .grid-33 {
		padding-top: 52.25%;
	}
}

.kids-info {
    width: 100%;
    min-height: 706px;
    height: auto;
    background: #fff;
    padding-bottom: 60px;
}


.kids-info h2 {
    color: #f89832;
    font-size: 40px;
    text-transform: uppercase;
}

.kids-info p {
    line-height: 1.8;
    font-size: 17px;
    color: #1a5c76;
    font-weight: 500;
}

.navigation>ul>li:hover>a {
    border-bottom: #f5971d solid 3px;
}
   @media (min-width: 1216px) {
	   .blue-triangle {
    /* content: ''; */
    background: #08b1b8;
    position: absolute;
    width: 100vw;
    height: 700px;
    /* height: -webkit-fill-available; */
    -webkit-clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    clip-path: polygon(0% 0, 0% 100%, 100% 100%);
    /* left: 0; */
    /* top: 0; */
    background-blend-mode: multiply;
    z-index: 0;
    transform: translate(0px, -7%);
    }
	.pre-register .blue-triangle {
		clip-path: polygon(0% 0, 0% 60%, 80% 60%);
	}
   }
@media (max-width: 768px){
	.menu-bar, .menu-bar::before, .menu-bar::after {
	    background-color: #195c76;
	}

		#menu {
		    top: 15px;
		}

		.navigation.active {
		    background: #0bb0b8;
		}
		
		.navigation.active li a,
		.navigation > ul > li:hover > a, .navigation > ul > li > a.active{
			color: white;
		}

		.navigation>ul>li:hover>a {
		    border-bottom: transparent solid 3px;
		}
		h2.events-h2 {
	color: #f89832;
}
}