/* CSS Document */
/* ======================================
Base Style 

h3 = Titles of Sections
h4 = Calendar Months
h5 = Calendar Event Title
h6 = Calendar location
p = body text
Yellow = #ffd800;
Gray = #4e4e4e;
Blue = #184a7e; rgba(24, 74, 126, 1);
=========================================*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');

*{
    font-family:'Open Sans', 'Helvetica Neue', sans-serif;
    color:#4e4e4e;
}
body{
    padding:0;
    margin:0;
    top:0;
}
h3{
    font-size:2em;
    color:#ffd800;
    margin:0;
	font-weight:400;
}
h4{
    font-size:1.875em;
    margin:0;
}
h5{
    font-size:1.50em;
    font-weight:600;
    margin:0;
}
h6{
    font-size:0.78125em;
    font-weight:400;
    margin:0;
}
p{
    font-size:1em;
}

/*=================
Navigation
===================*/
.nav-container{
    padding:20px 10px 10px 10px;
}
#hamburger span{
    display:block;
    background:#ccc;
    width:40px;
    height:6px;
    margin-bottom:5px;
}
.logo{
    height:50px;
}
.navigation a {
    text-decoration: none;
}
#exit{
    height:20px;
}
ul{
    list-style: none;
    padding:0px;
}
.navigation-items div{
    display:inline-block;
    width:0px;
    height:0px;
    padding-bottom:2px;
    border-top:6px solid #4e4e4e;
    border-right:6px solid transparent;
    border-left:6px solid transparent;
}
ul.naigation-items li{
    display:block;
}
ul.navigation-items li ul li{
    display:none;
    transition:1s;
}
ul.navigation-items li:hover ul li{
    display:block;
}
ul.navigation-items li ul li:hover{
   background:#ffd800;
}

/*=================
Slider Content 
===================*/
.slider-container{
    padding:10px 10px 0px 10px;
}
.carousel-caption{
    bottom:5px;
    text-align: left;
}
.carousel-caption h5, .carousel-caption p{
    color:#fff;
}
.carousel-caption h5{
    font-size:1.2em;
    font-weight:400;
	filter: drop-shadow(0 0 0.70rem #808080);
}
.carousel-caption p{
	line-height:1em;
	font-weight:300;
	filter: drop-shadow(0 0 0.70rem #808080);
}
.carousel-caption button{
	font-size:.8em;
	padding:5px;
	margin-bottom:5px;
}

/*====================================================
Main-Content:
    Upcoming Events, Quick Links and Latest News
======================================================*/
.main-content{
    padding:10px;
}
/*============================
Upcoming-Events Sections
=============================*/
section.upcoming-events{
    position:relative;
    height:400px;
}
.upcoming-events h3{
    margin-top:-41px;
    margin-bottom:14px;
}
.months{
        position:absolute;
        top:40px;
        display:flex;
        flex-wrap:wrap;
    }
.june, .july,.august,.september,.october{
    width:50%;
    margin-right:30px;
    flex-basis:110px;
}
.july,.august,.september,.october{
    opacity:0.7;
}
.first {
    padding-bottom:10px;
}
.hide, .hide-2, .hide-3{
    display:none;
    }

.june, .july,.august,.september,.october{
    width:30%;
    box-sizing:border-box;
    padding:10px;
}
div.rectangle{
    position:relative;
    width:65%;
    left:37.35%;
    height:300px;
    background:#ffd800;
    z-index:-1;
    }
.rectangle span{
    display:block;
}
/*============================
Quick Links
==============================*/
.quick-links ul{
    padding:10px;
    text-align:center;
}
.quick-links li{
    font-weight:600;
    padding:20px;
    border-bottom:1px solid #ccc;
    color:#ccc;
    transition:1s;
}
.quick-links li:hover{
    background:#ffd800;
    color:#000;
}
.quick-links .first-link{
    border-top:1px solid #ccc;
}
.quick-links a{
    color:#ccc;
    text-decoration:none;
}
.quick-links a:hover{
    color:#000;
}

/*============================
Latest News
==============================*/

section.latest-news{
    position:relative;
    height:600px;
}
.latest-news h3{
    z-index:1;
}
.latest-news-content{
    position:absolute;
    display:flex;
    flex-direction:column;
    top:15px;
    z-index:-1;
    padding:10px;
}
.content-2{
    padding-right:10px;
}
.latest-news div.rectangle{
    margin-top:15px;
    height:355px;
    width:80%;
    left:0;
}
.latest-news img{
    width:70%;
}

/*===========================
Footer
=============================*/
div.back-to-top{
	box-sizing: border-box;
    position:relative;
    width:30px;
    height:25px;
    background:#ffd800;
    left:85%;
    padding:5px;
	
}
.back-to-top img{
    height:15px;
	margin-bottom:10px;
	padding-right:6px;
}
footer{
    box-sizing:border-box;
    background:#4e4e4e;
    padding:20px;
    text-align: center;
	font-weight:300;
}
footer .footer-logo{
	padding-bottom:10px;
}
footer p{
    color:rgba(255,255,255,0.5);
}
.address{
	padding-bottom:10px;
}
.address p{
	padding:0;
	margin:0;
} 
footer a{
	color:rgba(255,255,255,0.5);
	text-decoration: none;
}
.newsletter{
	padding:8px;
	border:3px solid #ffd800;
}
a .newsletter {
	color:#fff;
}
a .newsletter:hover {
	background:#ffd800;
}
.footer-group{
	display:flex;
	flex-direction:column;
}
div.newsletter-btn{
	width:278px;
	margin:auto;
}
img.social-media{
    height:40px;
    margin:0;
    padding:4px;
}
.info-links{
	display:flex;
}
.helpfulLinks, .socialMedia{
	width:50%;
}
ul.helpLinks a{
	color:#fff;
	transition:.5s;
}
ul.helpLinks a:hover{
	color:#ffd800;
}
.copyright{
	color:#fff;
}
@media (min-width:440px){
	
/*=================
Slider Content 
===================*/

.carousel-caption{
    bottom:40px;
}

.carousel-caption h5{
    font-size:1.90em;
    font-weight:400;
}
.carousel-caption p{
    line-height:1.3em;
	font-weight:300;
}
.carousel-caption button{
	font-size:1em;
	padding:8px;
	margin-bottom:5px;
}
		.upcoming-events h3{
			font-size:3em;
			margin-top: -54.7px;
		}
		.months{
			top:60px;
		}
        .june, .july,.august,.september,.october{
            width:30%;
            margin-right:4%;
        }
        .hide{
            display:block;
        }
    }

@media (min-width:586px){
/*=================
Slider Content 
===================*/

.carousel-caption h5{
    font-size:2.3em;
    font-weight:400;
}

	/*Upcoming Events*/
		.june, .july,.august,.september,.october{
            width:30%;
            margin-right:3%;
        }
        .hide-2{
            display:block;
        }
	/*Back to Top*/
	
	div.back-to-top{
	width:40px;
	height:30px;	
    left:90%;
}
	.back-to-top img{
		padding-left:3px;
	}
    }
    
@media (max-width: 679px){

    /*Navigation*/
    .brand-bar{
        display:flex;
        padding-bottom:10px;
    }
    #hamburger, .logo{
        flex:1;
    }
    .navigation{
        box-sizing:border-box;
        position:absolute;
        top:0;
        left:-100%;
        width:100%;
        height:100%;
        padding:15px 15px 80px 15px;
        background:#fff;
        z-index:100;
        transition:left 1s;
        overflow-y:scroll;
    }
    .navigation li{
        padding:10px;
        text-align:center;
        font-weight:600;
    }
    .navigation li ul.subMenu li {
        font-weight:300;
    }
    ul.navigation-items li {
        padding:30px;
    }
    ul.navigation-items li ul li{
        padding:10px;
    }
    .donate{
        border-top:1px solid #ccc;
    }
    .donate p{
        padding:10px;
        text-align:center;
        font-weight: 600;
    }
    
    div .sm-logo{
        height:60px;
        padding-bottom:15px;
    }
    .navigation-items{
        text-align:center;
    }
    img#exit{
       margin-left:90%;
    }
}


@media (min-width:680px){
    /*main body margin and padding*/
	body{
		padding:0;
		margin:0;
		top:0;
	}
    /*Logo*/
    svg .st0-1{
        fill:#fff;
    }
    .logo{
        height:60px;
    }
    /*Navigation container*/
    
    .nav-container{
        position:absolute;
        width:100%;
        margin:auto;
        padding:0;
        z-index:1000;
    }
    #hamburger, #exit, .sm-logo{
        display:none;
    }
    .navigation {
        display:flex;
        justify-content: center;
		color:#fff;
    }

    .navigation-items div{
    border-top:6px solid #fff;
    
}    
    .navigation-items{
        width:80%;
		color:white;
    }
    ul.navigation-items li{
        float:left;
        padding:10px;
        position:relative;
    }
    ul.navigation-items li ul{
        display:block;
        position:absolute;
        padding:10px;
    }
    ul.navigation-items li ul:hover{
        background:rgba(24,74,126, 0.9);
    }
    ul.navigation-items li ul li{
        width: 200px;
        color:#fff;
    }
   
	.navigation-items a{
		color:#fff;
	}
	ion-icon {
		color:white;
	}
	.brand-bar{
		display:flex;
		justify-content: center;
		padding-top:20px;
	}
     .donate{
       padding-top:10px;
       width:80px;
       color:#fff;
    }
	.donate a{
		color:white;
	}

	.donate p{
		padding-left: 10px;
		padding-right:10px;
		border:3px solid white;
        color:#fff;
	}
    .donate p:hover{
        background:#ffd800;
    }
    
/*=================
Slider Content 
===================*/
.slider-container{
    padding:0;
}
.carousel-caption{
    bottom:60px;
}

.carousel-caption h5{
    font-size:3em;
    font-weight:400;
}
	.carousel-caption p{
		font-size:1.2em;
	}
	
	/*Content container*/
	.main-content{
		position:relative;
		width:86%;
        margin:auto;
	}
        /*Upcoming-Events*/
	section.upcoming-events h3{
		font-size:3.8em;
		margin-top:-65px;
		font-weight:400;
	}
    .months{
		top:72px;
        display:flex;
    }
    .june, .july,.august,.september,.october{
        margin-right:4%;
        }
	/*Quick Links*/
	section.quick-links {
		padding-top:15px;
		padding-bottom:15px;
	}
	.quick-links ul{
		display:flex;
		justify-content: space-between;
	}
	.quick-links li{
		flex:1;
		padding:8px 25px;
		border:3px solid #ffd800;
	}
	.quick-links .first-link{
		border-top:3px solid #ffd800;
	}
	/*Latest News*/
	section.latest-news h3{
		font-size:3em;
		font-weight:400;
	}
	.latest-news-content{
		top:28px;
	}
}
@media (min-width:850px){
	/*Navigation*/
    .logo{
        height:70px;
    }
    .navigation-items{
        width:70%;
    }
	/*Slider Container*/
	.carousel-caption{
    bottom:80px;
	}

	.carousel-caption h5{
    font-size:3.2em;
	}
	.carousel-caption p{
		font-size:1.5em;
	}
    /*Upcoming-Events*/
    .june, .july,.august,.september,.october{
        margin-right:8%;
    }
	/*Footer*/
	.footer-group{
	flex-direction:row;
}
	.helpfulLinks{
		width:35%
	}
	.socialMedia{
		width:65%;
	}
	.info-links{
		width:60%;
	}
	.newsletter-btn{
		order:2;
		width:20%;
	}
}
@media (min-width: 992px) { 
	/*Navigation*/
    .navigation-items{
        width:60%;
    }
	/*Slider Container*/
	.carousel-caption{
    bottom:170px;
	}

	.carousel-caption h5{
    font-size:3.8em;
	}
	.carousel-caption p{
		font-size:1.8em;
	}
	/*Upcoming Events*/
	.june, .july,.august,.september,.october{
        margin-right:5%;
        }
	.hide-3{
		display:block;
	}
	/*Quick Links*/
	.quick-links ul{
		justify-content:center;
	}
	.quick-links li{
		margin:50px;
	}
	/*Latest News*/
	.latest-news img{
		width:100%;
	}
	.latest-news-content{
    flex-direction:row;
	}
	.content-1, .content-2{
		width:50%;
	}
	.content-2{
		padding-left:20px;
	}
}
@media (min-width: 1200px) { 
	/*Navigation*/
        .navigation-items{
        width:50%;
    }
	
	/*Slider Container*/
	.carousel-caption{
    bottom:200px;
	}

	.carousel-caption h5{
    font-size:4.2em;
	}
	.carousel-caption p{
		font-size:2em;
	}
	/*Upcoming Events*/
.june, .july,.august,.september,.october{
        margin-right:8%;
        }
}
@media (min-width: 1500px){
	/*Slider Container*/
	.carousel-caption{
    bottom:400px;
	}

}
@media (min-width: 1850px){
	/*Slider Container*/
	.carousel-caption{
    bottom:500px;
	}
	.carousel-caption h5{
    font-size:5em;
	}
	.carousel-caption p{
		font-size:3em;
	}
}