/*---------SITE GENERAL-------------*/

html {
	scroll-behavior: smooth;
}

@font-face {
    font-family: 'Hanzel';
    src: url('../fonts/Hanzel-Normal.woff2') format('woff2'),
        url('../fonts/Hanzel-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.flcy-text-main{
	font-samily: 'Arial', sans-serif;
	font-size: 1rem;
}

.text-white{
	color: #fff;

}

.text-blue{
	color: rgb(12,37,59);
}

@media only screen and (min-width: 768px){
	.flcy-text-main{
		font-size: 1.2rem;
	}
}

@media only screen and (min-width: 1025px){
	.flcy-text-main{
		font-size: 1.5rem;
	}
}

.flcy-text-main a{
	color: #f9a01b;
}

.flcy-text-main a:hover{
	color: #C1790F;
	text-decoration-color: #c1790f;
}

.highlight{
	color: #f9a01b;
}

.highlight-2{
	color: #00aeef;
}

.highlight-3{
	color: #00dd11;
}

.flcy-h2{
	color: #fff;
	font-family: 'Hanzel', sans-serif;
	font-size: 2rem;
}

@media only screen and (min-width: 768px){
	.flcy-h2{
		font-size: 3rem;
	}
}

@media only screen and (min-width: 1920px){
	.flcy-h2{
		font-size: 4rem;
	}
}

.flcy-h3{
	color:#fff;
}

/*--------STICKY NAV-------*/

.flcys-sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 999;
}


@media only screen and (min-width:992px){
.flcys-sticky-header.visible {
    -webkit-animation-name: stickyHeaderDescend;
    animation-name: stickyHeaderDescend;
    -webkit-animation-duration: 150ms;
    animation-duration: 150ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
}

.flcys-sticky-header {
    position: fixed;
    top: -90px;
    left: 0;
    width: 100%;
    z-index: 999;
}
}

@-webkit-keyframes stickyHeaderDescend{
	0%{top:-90px}100%{top:0}
}
@keyframes stickyHeaderDescend{
	0%{top:-90px}100%{top:0}
}

.flcy-navbar{
	padding: 0px 60px;
}

.flcy-navbar-text a{
	font-family: Arial, sans-serif;
	color: rgba(12,37,59,1.00) !important;
}

.flcy-navbar-text a:hover{
	color: #F9A01B !important;
	text-decoration: none;
}

.flcy-fb-icon{
	color: #00aeff;
	line-height: inherit!important;
	vertical-align: middle;
}

.flcy-fb-icon:hover{
	color: #f9a01b;
}

/*--------HERO SECTION-----------*/

.flcy-hero{
	background-image: url('../img/Youth/youth_header_bg.png');
	background-size: cover;
	background-attachment: center center;
	width: 100vw;
	height: 100vh;
}

.flcy-logo{
	width: auto;
	height: auto;
	max-width: 100%;
}

.flcy-logo-land{
	display: none;
}

@media only screen and (orientation: landscape) and (max-width: 992px){
	.flcy-logo{
		display: none;
	}
	
	.flcy-logo-land{
		display: block;
		height: 100%;
		max-width: 70%;
	}
}

.flcy-logo-row{
	margin-left: 0px;
	margin-right: 0px;
}

.flcy-nav a{
	font-family: 'Hanzel', sans-serif;
	font-size: 1.75rem;
	color: #fff;
}

.flcy-nav a:hover{
	text-decoration-color: #F9A01B;
}

@media only screen and (min-width:1200px){
	.flcy-nav a{
		font-size: 2rem;
	}
}

@media only screen and (min-width:1400px){
	.flcy-nav a{
		font-size: 2.5rem;
	}
}

/*-------------ABOUT SECTION--------------*/

.flcy-about-con{
	padding: 80px 0px;
	background: linear-gradient(rgba(12,37,59,0.9),rgba(12,37,59,0.9)), url("../img/Youth/atom-bg-left-04.png") rgb(12,37,59);
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}

.flcy-about-con::before{
	content:"";
	background-color: rgba(12,37,59,.25);
}

.about-h2{
	color: #fff;
	font-family: 'Hanzel', sans-serif;
}

@media only screen and (max-width: 768px){
	.about-h2{
		font-size: 2rem;
	}
}

@media only screen and (max-width: 1919px){
	.about-h2{
		font-size: 3rem;
	}
}

@media only screen and (min-width: 1920px){
	.about-h2{
		font-size: 4rem;
	}
}

.about-img-1{
	width: 100%;
	padding: 10px;
}

.about-img-2{
	width: 100%;
	padding: 10px;
}

@media only screen and (min-width: 768px) and (max-width:992px){
	.about-img-1{
		width: 45%;
	}

.about-img-2{
		width: 45%;
	}
}

@media only screen and (min-width: 1920px){
	.about-img-1{
	min-width: 400px;
	max-width: 70%;
	position: relative;
	top: 0px;
	left: 0px;	
}

.about-img-2{
	min-width: 400px;
	max-width: 70%;
	position: relative;
	top: -10%;
	left: 20%;
}
}

.about-bold{
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
}

@media only screen and (min-width:1025px){
	.about-bold{
		font-size: 2rem;
		text-align: left;
	}
}

.about-add{
	font-size: 1.1rem;
	line-height: 1;
}

/*-------------INFO SECTION------------*/
.flcy-more-info-con{
	background-image: url('../img/Youth/youth-info-bg.png');
	background-size: cover;
}

.info-left-col{
	margin-top: 150px;
	margin-bottom: 150px;
}

.info-col{
	padding: 0px;
	margin: 0px;
	border: 0px;
	position: relative;
	top: 0px;
	right: 0px;
}

.info-img{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-image: url('../img/Youth/youth-info-side-pics.png');
	background-size: cover;
	background-position: top left;
}

.info-row{
	padding: 0px;
}

/*---------MAP SECTION----------*/
.flcy-map-con{
	background-color: rgb(12,37,59);
	padding: 100px 0px;
}

.flcy-map-con img{
	border: solid 3px #f9a01b;
	width: 100%;
	height: auto;
}

/*----------MEET YOU LEADERS SECTION-----*/
.leaders-hr{
	border-top: solid 3px #00aeef;
	border-radius: 50px;
	width: 50%;
	margin: 0px auto;
}

.leaders-hr-con{
	background-color: rgb(12,37,59);
}

.flcy-leaders{
	background-color: rgb(12,37,59);
	padding-top: 50px;
}

.flcy-leader-img{
	border: solid 4px #00aeef;
}

@media only screen and (min-width: 1024px){
	.flcy-leader-img{
		border: solid 8px #00aeef;
	}
}

.leader-fb-logo{
	vertical-align: baseline;
}

.fb-head{
	font-family: "Hanzel", sans-serif;
	color: #fff;
	font-size: 1.2rem;
	padding-top: 20px;
	margin-bottom: 0px;
}

@media only screen and (min-width: 1024px){
	.fb-head{
		font-size: 1.6rem;
	}
}

/*----------MUSIC VIDEO SECTION--------*/
.flcy-music-vid-con{
	background-image: url('../img/Youth/WordReactionYouth_atom_bg.png');
	background-size: cover;
	background-position: center center;
	border: 8px #f9a01b;
	padding: 50px;
	border-style: double none;
}

@media only screen and (min-width: 1200px){
	.flcy-music-vid-con{		
		padding: 100px 200px;
	}
}

/*-----------PHOTO GALLERY SECTION-----------*/
.flcy-photo-gallery{
	padding: 100px 10px;
	background-color: rgb(12,37,59);
}

@media only screen and (min-width:1025px){
	.flcy-photo-gallery{
		padding: 100px 100px;
		background-color: rgb(12,37,59);
	}
}

.grid-item{
	max-width: 100%;
	padding: 2px;
}

@media only screen and (min-width: 768px){
	.grid-item{
		max-width: 33%;
	}
}

@media only screen and (min-width: 1024px){
	.grid-item{
		max-width: 25%;
	}
}