@charset "utf-8";
/* CSS Document */
:root{
	/*Colors*/
	--MainColorBG:white;
	--MainColorBG2:#181818;
	--MainTextColor:#6C6F73;
	--SecondTextColor:#E9E8E8;
	--GreyTextColor:#363636;
	--DarkTextColor:#37383C;
	--MidColor:#0372B9;
	--DarkColor:#035A90;
	--LightColor:#F1E5E5;
	--LightColor2:#D3915F;
	--LightColor3:#D2A590;
	--HLColor1:#90B5D1;
	--HLColor2:#90D1CA;
	--HLColor3:#FECC43;
	--HLColor4:#FFDF86;
	--ErrorColor:#DD4C4A;
}
::selection{
	background:var(--SecondTextColor);
	color:var(--MainColorBG)
}
::-moz-selection{
	background:var(--SecondTextColor);
	color:var(--MainColorBG)
}
/*Tweak for overlay menu: BG:z-index:0;header:z-index:2;main:z-index:1;relative all. Then nav ul absolute*/
body{
    background-color:var(--MainColorBG);
	position:relative;
	z-index:0;
	overflow-x:hidden;
	color:#181818;
}
header{
    position:relative;
    z-index:2;
	background-color:var(--MainColorBG);
}
.photobgCover{
	background: rgb(31,32,36);
background: linear-gradient(180deg, rgba(31,32,36,0.7567401960784313) 6%, rgba(31,32,36,0.47102591036414565) 48%, rgba(31,32,36,1) 100%);
}
main{
    position:relative;
    z-index:1;
	padding:0;
	background-color:var(--MainColorBG);
	margin:75px 0 90px 0;
}
footer{
	padding:0;
	overflow:hidden;
	color:white;
	background-color:var(--MainColorBG2);
	& .Footer2{
		min-height:200px;
		padding:30px 0;
	}
}
#FooterNetworks{
	width:100%;
	margin:10px 0 0;
	display:flex;
	justify-content:center;
	gap:30px;
	& li{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	& li a{
		color:var(--LightColor2);
		transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
	}
	& li a:hover{
		color:var(--LightColor3)
	}
	& li a i{
		font-size:1.9rem;
	}
}
#FooterTerms{
	margin:20px auto;
	& p{
		text-align:center;
		line-height:2.5rem;
		& a{
			color:white;
			display:block;
			margin-bottom:20px;
			transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
		}
		& a:hover{
			color:var(--LightColor2)
		}
		& span{
			display:none;
		}
	}
}
#FooterCompany{
	& p{
		text-align:center;
		line-height:2.5rem;
	}
}
#FooterCopyright{
	& p{
		text-align:center;
		line-height:2.5rem;
		& a{
			color:white;
			transition: color 0.6s cubic-bezier(0.25,1,0.5,1);
		}
		& a:hover{
			color:var(--LightColor2)
		}
	}
}
#FooterColletions{
	display:inline-flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:20px;
	margin:22px auto;
	& a img{
		width:60px;
	}
}
#PaymentsType{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	margin:30px auto;
	& a img{
		width:40px;
	}
}
#ManteinanceMode{
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
#ManteinanceMode > .BlockHalf img{
	margin:30px 0
}
#ManteinanceMode > .BlockHalf h3{
	font-family:MainFont;
	color:white
}
#MainLogo{
	width:90%;
	margin:30px auto;
}
#ErrorPage{
	min-height:calc(100vh - 50vh);
	padding:30px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#ErrorPage > .BlockHalf > img{
	width:70%;
}
#ErrorTitle{
	font-size:3rem;
}
#ErrorMessage{
	font-size:1.2rem
}
.ModalNotification{
    width:400px;
    min-height:200px;
    position: fixed;
    top: 50%;
    left: 50%;
	padding:15px;
	margin-top: -100px;
    margin-left: -200px;
    background-color:white;
    border-radius:6px;
    text-align:center;
    z-index: 11;
}
.ModalNotification > i{
	animation:bounceIn .3s;
	animation-delay:.2s;
	font-size:65px;
	color:var(--HLColor1);
	margin:-24px auto 0
}
.NotificationInfo{
	margin-top:20px;
	padding-top:20px;
	border-top:1px solid #BBBBBB;
	font-size:17px;
	font-weight:bold;
	color:#4C4C4C;
	line-height:20pt
}
.active{
	font-weight:bolder;
}
#TopBar{
	height:50px;
	padding:10px 0;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	& > a{
		font-size:1.2rem;
		color:white
	}
	& > a:hover{
		color:var(--HLColor2)
	}
}
#MobileBars{
	width:50px;
	height:50px;
	font-size:32px;
	display:flex;
	justify-content:center;
	align-items:center;
	color:white;
	position: relative;
}
#CloseMobile{
	width:50px;
	height:50px;
	color:var(--LightColor)
}
.HeadLogo{
	margin:-50px auto 20px;
	width:250px;
	& p{
		font-family: MainFontBold;
		Color:white;
		text-align:center;
	}
}
#HeaderContent{
	padding-bottom:20px;
	border-bottom:1px solid var(--SecondTextColor);
}
#HeadLogoHome{
	height:250px;
	width:250px;
}
nav{
	position:absolute;
	width:0;
	height:100vh;
	top:0;
	left:0;
	z-index:3;
	overflow-x: hidden;
	transition: 0.5s;
	background-color:var(--MainColorBG);
	& #WebMenu{
		opacity:0;
	}
	& #WebMenu{
		list-style:none;
		padding:20% 20px 0 20px;
	}
	& #WebMenu li:first-child{
		height:35px;
	}
	& #WebMenu li{
		position: relative;
        height: auto;
        margin: 10px 0;
        text-align: left;
		& a{
			display: block;
			color: var(--LightColor);
			font-size: 20px;
			text-decoration: none;
			padding: 10px 0;
			transition: all 0.3s;
		}
		& a:hover{
			color: var(--GreyTextColor);
		}
		& .Active {
			font-weight: bolder;
		}
		& .SubMenu {
			list-style: none;
			padding-left: 30px;
			margin: 0;
			& li:first-child{
				height: auto;
				font-size: 20px;
				text-align: left;
			}
			& li:last-child a{
				display:block !important;
				margin: 10px 0;
				background-color:transparent;
				font-weight:normal;
			}
		}
	}
	& #WebMenu li:first-child {
        font-size: 40px;
        text-align: right;
    }
	& #HeaderNetworks{
		opacity:0;
		width:80%;
		list-style:none;
		margin:30px auto 0;
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content:space-around;
		& li:last-child a{
			margin:0;
			padding:0;
			background-color:transparent;
		}
		& li a i{
			font-size:1.7rem;
			color:var(--LightColor);
		}
	}
}


#DevelopedBy{
	text-align:center;
}
.ScrolltoTop{
	color:var(--LightColor)
}
/*ANIMATIONS*/
.FromRight[data-scroll]{
	transition: all ease 2s
}
.FromRight[data-scroll="in"]{
	opacity: 1;
	transform:translateX(0px)
}
.FromRight[data-scroll="out"]{
	opacity: 0;
	transform:translateX(90px)
}
.FromLeft[data-scroll]{
	transition: all 2s
}
.FromLeft[data-scroll="in"]{
	opacity: 1;
	transform:translateX(0px)
}
.FromLeft[data-scroll="out"]{
	opacity: 0;
	transform:translateX(-90px)
}
.FromDown[data-scroll]{
	transition: all 2s
}
.FromDown[data-scroll="out"]{
	opacity: 0;
	transform:translateY(90px)
}
.FromDown[data-scroll="in"]{
	opacity: 1;
	transform:translateY(0px)
}
.FromUp[data-scroll] {
    transition: all 2s;
}
.FromUp[data-scroll="out"] {
    opacity: 0;
    transform: translateY(-90px);
}
.Fade[data-scroll]{
	transition: all 2s
}
.Fade[data-scroll="in"]{
	opacity: 1;
}
.Fade[data-scroll="out"]{
	opacity: 0;
}
.SlideUp[data-scroll] {
    transition: all 2s;
}
.SlideUp[data-scroll="out"] {
    opacity: 0;
    transform: translateY(90px);
}
.SlideDown[data-scroll] {
    transition: all 2s;
}
.SlideDown[data-scroll="out"] {
    opacity: 0;
    transform: translateY(-90px);
}
@keyframes scrollY {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
.ZoomInImg[data-scroll]{
	transition: all 1s
}
.ZoomInImg[data-scroll="in"]{
	transform: scale(1);
	opacity: 1;
}
.ZoomInImg[data-scroll="out"]{
	transform: scale(0.5);
	opacity: 0;
}
/*STARTS CUSTOM*/
div[id$='DefSection']{
	padding:20px 0 50px
}
div[id$='DefSection'] .BlockHalf{
	vertical-align:top;
}
div[id$='DefSection'] h1{
	font-size:2rem;
}
div[id$='DefSection'] h1{
	display:inline-block;
	color:white;
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
}
.SectionTitle h2{
	font-size:3rem;
	letter-spacing:3px;
	display:inline-block;
	color:white;
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
}
#YouTubeVideo{
    width:100%;
    height:190px;
    margin:10px auto
}
/*BUTTONS*/
.Button1,.Button2,.Button3{
	min-width:250px;
	border: none;
	padding: 10px 40px;
	margin:10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-family:MainFont;
	font-weight:bolder;
	letter-spacing:2px;
}
/*BUTTON COLORS*/
.Button1{
	background-color:transparent;
	color:var(--LightColor) !important;
	border:1px solid var(--LightColor)
}
.Button1:hover{
	background-color:var(--MainTextColor);
}
.Button2{
	background-color:var(--LightColor2);
	color:var(--LightColor) !important;
}
.Button2:hover{
	background-color:#dfb494;
}
.Button3{
	background-color:var(--LightColor);
	color: var(--MainColorBG) !important;
}
.Button3:hover{
	background-color:white;
}
/*BLOG TEXT & SECTION Formats*/
.BlogTitle{
	display:inline-block;
	color:var(--MainTextColor);
	font-size:2rem;
	letter-spacing:3px;
	position: relative;
	text-align: left;
	margin:10px 5px 30px;
}
#ArticleText a,div[id$='DefSection'] a{
	color:var(--LightColor);
}
#ArticleText a:hover,div[id$='DefSection'] a:hover{
	color:var(--LightColor2);
}
div[id$='DefSection'] > img{
    min-width:290px;
    max-width:290px;
    margin:5px;
    border-radius:6px
}
#ArticleText > img,#ArticleText > p > img{
	min-width:80%;
	max-width:90%;
	margin:10px auto;
}
#ArticleText > h1,#ArticleText > h2,#ArticleText > h3,#ArticleText > h4,#ArticleText > h5,#ArticleText > h6,div[id$='DefSection'] > h2,div[id$='DefSection'] > h3,div[id$='DefSection'] > h4,div[id$='DefSection'] > h5,div[id$='DefSection'] > h6{
    margin:10px 0;
    font-weight:bold;
	text-align:left;
}
#ArticleText > h3,div[id$='DefSection'] > h2,div[id$='DefSection'] > h3{
    color:var(--MainColor)
}
#ArticleText > h3,#ArticleText > h4,#ArticleText > h5,#ArticleText > h6,div[id$='DefSection'] > h3,div[id$='DefSection'] > h4,div[id$='DefSection'] > h5,div[id$='DefSection'] > h6{
	color:var(--SecondTextColor);
	letter-spacing:3px;
}
#ArticleText > p,div[id$='DefSection'] > p{
    line-height:1.7;
	font-size:1rem;
}
#ArticleText > ul,div[id$='DefSection'] > ul{
    display:table;
	padding-left:25px;
}
#ArticleText > ul li,div[id$='DefSection'] > ul li{
    display:table-row;
    line-height:1.7;
    margin-bottom:10px;;
    text-align:left
}
#ArticleText > ul li::before,div[id$='DefSection'] > ul li::before{
    display:table-cell;
    content:"\2022";
    color:var(--LightColor3);
    font-weight: bold;
    width: 1em;
    text-align:left
}
#ArticleText > ol,div[id$='DefSection'] > ol{
    display:table;
    counter-reset:item
}
#ArticleText > ol li,div[id$='DefSection'] > ol li{
    display:table-row;
    line-height:1.7;
    margin-bottom:10px;;
    text-align:left
}
#ArticleText > ol li::before,div[id$='DefSection'] > ol li::before{
    display:table-cell;
    content:counter(item) ". ";
    counter-increment: item;
    color:var(--LightColor2);
    font-weight: bold;
    width: 1em;
    text-align:left
}
/*FORM INPUTS*/
.FormInputEmail{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 45px;
	padding: 5px;
	margin: 10px auto;
	border:2px solid var(--MainColor);
	border-radius:4px;
	background-color:transparent;
	font-family:Aller;
	transition:ease all 0.3s;
	font-size:18pt;
}
.FormInputEmail:focus{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:1px solid var(--MidColor);
	background-color:var(--MainColor);
}
.FormInputEmail:invalid{
	background-color:var(--HLColor2);
}
.FormInputEmail:before{
	color:white;
	content: "*";
}
.SectionGalleryImage{
	width:100%;
}
.FormField{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	border:none;
	border:none;
	background-color:var(--MainColorBG);
	font-size:1.9rem;
	color:var(--DarkTextColor)
}
.FormField::placeholder{
	transition:ease-in-out 0.3s;
}
.FormField:focus::placeholder{
	color:var(--MainColorBG)
}
.FormField input:-internal-autofill-selected{
	background-color:var(--HLColor3);
}
.FormField[type=password]{
	width:85%
}
.FormFieldSelect{
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	border:none;
	outline:none;
	background-color:var(--MainColorBG);
	font-family:MainFont;
	font-size:1.1rem;
	color:var(--DarkTextColor)
}
.FormFieldSelect option{
	color:var(--GreyTextColor)
}
#ShowPassw{
	color:var(--MainColor);
	cursor: pointer;
}
.pass-wrapper{
	display:block;
}
.FormField:focus{
	outline:none;
}
.FormField:required{
	outline:none;
}
.FormTextArea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:90%;
	height: 40px;
	padding: 5px;
	margin: 10px auto;
	font-family:MainFont;
	font-size:1.1rem;
	border:none;
	background-color:var(--MainColorBG);
	font-size:1.9rem;
	color:var(--DarkTextColor)
}
.FormTextArea:disabled{
	background-color:#f3f3f3;
	cursor:not-allowed
}
.FormField::placeholder,.FormTextArea::placeholder,.FormFieldSelect::-webkit-datetime-edit-day-field,.FormFieldSelect::-webkit-datetime-edit-month-field,.FormFieldSelect::-webkit-datetime-edit-year-field,.FormFieldSelect::-webkit-datetime-edit-text{
	color: #a5a5a5;
	font-family:MainFont !important;
	font-size:1.1rem;
	transition:ease-in-out 0.3s;
}
.FormTextArea:focus::placeholder{
	color:#ffffff
}
#FormPassw{
	padding-left:15px;
}
.SendButton{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 65px;
	margin: 10px auto;
	background-color:var(--HLColor3);
	color:var(--DarkTextColor);
	border:none;
	outline:none;
	letter-spacing:0.2rem;
	transition:ease all 0.3s;
	cursor:pointer;
	font-weight:bold;
	font-family:MainFont;
	font-size:1.2rem;
	&:hover{
		background-color:var(--HLColor4);
	}
	&:disabled{
		background-color:#b3b3b3;
		cursor:not-allowed
	}
}
.DonateButton{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 65px;
	margin: 10px auto;
	background-color:var(--HLColor3);
	color:var(--DarkTextColor);
	border:none;
	outline:none;
	letter-spacing:0.2rem;
	transition:ease all 0.3s;
	cursor:pointer;
	font-weight:bold;
	font-family:MainFont;
	font-size:1.2rem;
	&:hover{
		background-color:var(--HLColor4);
	}
	&:disabled{
		background-color:#b3b3b3;
		cursor:not-allowed
	}
}
#HeadTitle{
	display:none;
}
/*BLOG*/
.ArticlesBlock{
	width:290px;
	min-height:288px;
	margin:20px auto;
	padding-bottom:10px;
	background-color:#F3F3F3;
	vertical-align:top;
}
.BlogReadMore{
	transition:ease all 0.3s;
}
.ArticlesBlock:hover .BlogReadMore{
	margin-right:5px;
}
.BlogImage{
	width:inherit;
	height:165px;
	overflow:hidden;
}
.BlogImage > img{
	width:100%;
	object-fit:cover;
}
.BlogInfo{
	text-align:left;
	padding:5px 10px;
}
.BlogName{
	height:76px;
	font-size:1.2rem;
	color:var(--MainColor);
	overflow: hidden;
	white-space: wrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-align:left;
}
.BlogData{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	font-size:0.7rem;
	color:var(--MainTextColor)
}
#BlogTitle{
	text-align:left;
	font-size:1.9rem;
}
#BlogData{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	padding:10px 5px;
	text-align:left;
	font-size:0.9rem;
}
#BlogDate{
	text-align:left;
}
#BlogCoverImage{
	width:95%;
	margin:5px auto;
}
#Authors > h2{
	color:var(--MainColor)
}
#BlogSlider > h2{
	color:var(--MainColor);
	font-size:1.5rem;
}
#BlogSliderFeatured > .slick-dots li button::before{
	font-size:20px;
	color:rgba(116, 116, 116, 0.61)
}
#BlogSliderFeatured .slick-prev{
	left:3px;
	z-index:5
}
#BlogSliderFeatured .slick-next{
	right:3px;
	z-index:5
}
#NewsGrid{
	padding:30px 0;
}
/*REWC*/
div[id^='BlockCategory']{
	width:95%;
	min-height:420px;
	margin:10px auto;
	padding:10px 5px;
	align-items:center;
	background-color:var(--LightColor);
	vertical-align:top;
}
div[id^='BlockCategory'] > h2{
	text-transform: uppercase;
	margin:10px auto;
}
div[id^='BlockCategory'] > p{
	min-height:90px;
}
.VideoContainer{
	position: relative;
	padding-bottom: 56.25%;
}
.VideoContainer iframe {
	position: absolute;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.CatVideo{
	aspect-ratio: 16 / 9;
	width: 100%;
}
/*COMPLETELY CUSTOM*/
/* Program Slider */
#ProgramSlider .slick-dots li button::before{
	font-size:20px;
	color:rgba(116, 116, 116, 0.61);
}
#ProgramSlider{
	.ProgramPrev{
		left: -32px;
	}
	.ProgramNext{
		right: -25px;
	}
	& .ProgramPrev,.ProgramNext{
		font-size: 48px;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		border: none;
		outline: none;
		background: transparent;
		color:rgba(185, 185, 185, 0.8);
	}
}
.BlockNewsMini{
	width:290px;
	height:490px;
	margin:15px 5px;
	display:inline-flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	vertical-align:top;
	background-color:var(--MainColorBG);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	& img{
		width:100%;
		height:230px;
		object-fit:cover;
	}
	& h3{
		color:var(--MidColor);
		text-align:left;
		margin:10px;
		& a{
			color:var(--MidColor)
		}
		& a:hover{
			color:var(--HLColor1)
		}
	}
	& p{
		margin:0 15px;
		line-height:1.5rem;
		height:calc(5 * 1.5rem);
		overflow:hidden;
		position:relative
	}
	& p::after{
		content:'';
		position:absolute;
		bottom:0;
		right:0;
		height:1.5rem;
		width: 75%;
		background: linear-gradient(to right, transparent, var(--MainColorBG));
	}
}
#MainAllies{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-evenly;
	align-items:center;
	gap:10px;
	padding-bottom:40px;
	margin:0 10px;
	border-bottom:1px solid var(--MidColor);
	& img{
		width:120px;
	}
}
#SecondAllies{
	margin:30px 0;
	& .BlockSingle h2{
		color:var(--MidColor);
		font-size:1.9rem;
		margin:0 5px;
	}
	& .BlockDouble{
		display:inline-flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content:space-between;
		align-items:center;
		gap:10px;
		& #AllieSlider{
			width:100%;
			margin:40px 0;
			& a{
				width:100px;
				height:100px;
			}
			& span{
				width:100px;
				height:100px;
			}
			& img{
				width:100px;
				height:100px;
			}
			.SponsorPrev{
				left: -25px;
			}
			.SponsorNext{
				right: -5px;
			}
			& .SponsorPrev,.SponsorNext{
				font-size: 48px;
				line-height: 0;
				position: absolute;
				top: 50%;
				display: block;
				padding: 0;
				-webkit-transform: translate(0, -50%);
				-ms-transform: translate(0, -50%);
				transform: translate(0, -50%);
				cursor: pointer;
				border: none;
				outline: none;
				background: transparent;
				color:rgba(185, 185, 185, 0.8);
			}
		}
	}
}
#AllieSlider2,#AllieSlider3{
	width:100%;
	margin:40px 0;
	& a{
		width:100px;
		height:100px;
	}
	& span{
		width:100px;
		height:100px;
	}
	& img{
		width:100px;
		height:100px;
	}
	.SponsorPrev{
		left: -25px;
	}
	.SponsorNext{
		right: -5px;
	}
	& .SponsorPrev,.SponsorNext{
		font-size: 48px;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		border: none;
		outline: none;
		background: transparent;
		color:rgba(185, 185, 185, 0.8);
	}
}
#VolunteerForm{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	& .iti{
		width:100%;
		margin:10px 0
	}
	& .iti--separate-dial-code .iti__selected-flag{
		margin-left:14px;
	}
	& label{
		color:white;
		margin-left:18px;
	}
}
#ContactHome{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	& .iti{
		width:100%;
		margin:10px 0
	}
	& .iti--separate-dial-code .iti__selected-flag{
		margin-left:14px;
	}
	label{
		font-weight:bold;
		margin-left:18px;
	}
}
#HowWeDefSection{
	& p{
		color:white;
	}
}
#ProjectDefSection > .BlockHalf img{
	width:100%;
}
#ContactData{
	width:90%;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	margin:20px 0;
	padding-left:40px;
	& li{
		text-align:left;
		margin-bottom:10px;
		& a{
			color:var(--DarkTextColor);
			transition:color 0.6s cubic-bezier(0.25, 1, 0.5, 1);
		}
		& a:hover{
			color:var(--LightColor2)
		}
	}
	& li:last-child{
		display:flex;
		flex-direction:row;
		gap:10px;
		justify-content:flex-start;
		align-items:center;
		& a i{
			font-size:1.8rem;
		}
	}
}
.SectionVideo{
	position: relative; /* Necesario para posicionar el ícono absolutamente */
	& a img {
		width: 100%;
	}
	& a i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* Centrar el ícono */
		font-size: 5rem; /* Tamaño del ícono */
		color: white; /* Color del ícono */
		opacity: 0.5; /* Hacer el ícono un poco transparente */
		transition: opacity 0.3s ease; /* Efecto de transición */
	}
	& a:hover i {
		opacity: 0.9; /* Opacidad total al pasar el mouse */
	}
	& a img{
		width:100%;
	}
}
.MainTitle{
	width:100%;
	font-size:4rem !important;
	margin:10px 5px !important;
	letter-spacing:3px;
}
#BriefImage{
	position:relative;
	top:0;
	left:-240%;
	min-width:900px;
}
#Collections{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:35px;
	flex-wrap: wrap;
	margin:30px auto;
	& a img{
		width:80px;
		height:80px;
	}
}
.CategoryBlock{
	display:inline-block;
	width:260px;
	height:500px;
	position:relative;
	overflow:hidden;
	margin:20px 5px;
	padding:20px 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	& a{
		width:100%;
		height:100%;
		& .ProductBG{
			position:absolute;
			top:0;
			left:0;
			z-index:1;
		}
		& .ProductCover{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			z-index:2;
			background: rgb(31,32,36);
			background: linear-gradient(180deg, rgba(31,32,36,0.6895133053221288) 6%, rgba(31,32,36,1) 92%);
			opacity: 0.8;
			transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
		}
		& h3{
			position:absolute;
			left:2%;
			bottom:49%;
			z-index:3;
			margin-left:15px;
			font-size:2rem;
			letter-spacing:3px;
			transition: color 0.9s cubic-bezier(0.25, 1, 0.5, 1);;
			color:white
		}
		& p{
			position:absolute;
			left:0;
			bottom:5%;
			z-index:4;
			font-size:0.8rem;
			line-height:1.9;
			min-height:150px;
			margin-left:15px;
			color:white
		}
	}
}
.CategoryBlock:hover{
	& .ProductCover{
		opacity: 1;
	}
	& h3{
		color:var(--LightColor2)
	}
}
.SubCategoryBlock{
	display:inline-block;
	width:260px;
	height:500px;
	position:relative;
	overflow:hidden;
	margin:20px 5px;
	padding:20px 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	& a{
		width:100%;
		height:100%;
		& .ProductLogo{
			position:absolute;
			top:30%;
			left:50%;
			transform:translate(-50%,-50%);
			z-index:3;
			width:150px;
			height:150px;
		}
		& .ProductBG{
			position:absolute;
			top:0;
			left:0;
			z-index:1;
		}
		& .ProductCover{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			z-index:2;
			background: rgb(31,32,36);
			background: linear-gradient(180deg, rgba(31,32,36,0.6895133053221288) 6%, rgba(31,32,36,1) 92%);
			opacity: 0.8;
			transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
		}
		& h2{
			position:absolute;
			left:2%;
			bottom:47%;
			z-index:3;
			margin-left:15px;
			font-size:1.3rem;
			letter-spacing:3px;
			transition: color 0.9s cubic-bezier(0.25, 1, 0.5, 1);;
			color:white
		}
		& p{
			position:absolute;
			left:0;
			bottom:5%;
			z-index:4;
			font-size:0.8rem;
			line-height:1.9;
			min-height:150px;
			margin-left:15px;
			color:white
		}
	}
}
.SubCategoryBlock:hover{
	& .ProductCover{
		opacity: 1;
	}
	& h2{
		color:var(--LightColor2)
	}
}
.ProductBlock{
	display:inline-block;
	width:260px;
	height:500px;
	position:relative;
	overflow:hidden;
	margin:20px 5px;
	padding:20px 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-color:var(--DarkTextColor);
	& a{
		width:100%;
		height:100%;
		& .ProductLogo{
			position:absolute;
			top:2%;
			right:0;
			z-index:3;
			width:150px;
			height:150px;
		}
		& .ProductBG{
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			z-index:1;
			width:260px;
		}
		& .ProductCover{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			z-index:2;
			background: #131314;
			opacity: 0.4;
			transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
		}
		& h2{
			position:absolute;
			left:0;
			top:65%;
			text-align:left;
			z-index:3;
			margin-left:15px;
			font-size:1.4rem;
			letter-spacing:3px;
			transition: color 0.9s cubic-bezier(0.25, 1, 0.5, 1);;
			color:white
		}
		& p{
			position:absolute;
			left:0;
			bottom:7%;
			z-index:4;
			font-size:0.8rem;
			line-height:1.9;
			margin-left:15px;
			color:var(--LightColor)
		}
	}
}
.ProductBlock:hover{
	& h2{
		color:var(--LightColor2)
	}
}
.Breadcrumb{
	display:flex;
	align-items:center;
	gap:10px;
	margin-left:10px;
}
#ProductDetailDefSection{
	padding-top:20px;
	& h1{
		width:100%;
		margin-top:20px;
		letter-spacing:3px;
	}
	& #ProductPict{
		width:90%;
		margin:10px auto;
	}
	& #ProductInfo{
		& p{
			color:var(--MainTextColor);
		}
		& ul{
			display:table;
			padding-left:25px;
		}
		& ul li{
			display:table-row;
			line-height:1.7;
			margin-bottom:10px;;
			text-align:left;
			color:var(--MainTextColor);
		}
		& ul li::before{
			display:table-cell;
			content:"\2022";
			font-weight: bold;
			width: 1em;
			text-align:left
		}
		& ol{
			display:table;
			counter-reset:item
		}
		& ol li{
			display:table-row;
			line-height:1.7;
			margin-bottom:10px;;
			text-align:left;
			color:var(--MainTextColor);
		}
		& ol li::before{
			display:table-cell;
			content:counter(item) ". ";
			counter-increment: item;
			font-weight: bold;
			width: 1em;
			text-align:left
		}
	}
	& h2{
		letter-spacing:2px;
		margin:20px 5px 10px;
	}
	& #ProductAttributes{
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:flex-start;
		flex-wrap: wrap;
		gap:20px;
		padding:20px 0;
		& .ProductAtt{
			width:280px;
			min-height:250px;
			padding:15px 13px;
			background-color:#222;
			color:var(--SecondTextColor);
			transition:background 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
			& h3{
				font-family:MainFont;
				text-align:left;
				font-size:0.9rem;
				margin:0 0 15px 0;
			}
			& p{
				font-size:0.9rem;
				line-height:1.7;
			}
		}
		& .ProductAtt:hover{
			background-color:var(--DarkTextColor);
		}
	}
	& h3{
		letter-spacing:3px;
		margin:20px 10px;
	}
}
/*FINISH CUSTOMS*/
/*Tablet*/
@media (min-width: 600px){
	header{
		& #HeaderStatic{
			& #HeaderTitles{
				& h2{
					text-align:center;
				}
			}
		}
		& #HeaderProduct{
			& #HeaderTitles{
				& h1{
					text-align:center;
				}
			}
		}
	}
	#SliderTitles{
		margin:9% 0 0 10%;
		& h2{
			margin-right:22%;
		}
	}
	footer{
		& .Footer2 .BlockHalf{
			vertical-align:top;
		}
		#FooterNetworks{
			margin:10px auto;
		}
		#FooterLinks{
			list-style:none;
		}
		#FooterLinks > li{
			margin-top:15px;
			text-align:center;
		}
	}
	#HeaderNetworks{
		width:70%;
	}
	#YouTubeVideo{
        width:560px;
        height:315px;
        margin:20px auto
    }
	#YouTubeVideoMain{
        width:560px;
        height:315px;
        margin:20px auto
    }
	#Terms{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;
	}
	#Terms li{
		margin:10px 15px;
	}
	#Copyright{
		text-align:left;
	}
	#DevelopedBy{
		text-align:right;
	}
	.BlogName{
		font-size: 1.4rem;
	}
	.Button1,.Button2,.Button3{
		max-width:70%;
	}
	#ManteinanceMode{
		flex-direction:row;
		height:100vh;
	}
	#ManteinanceMode .BlockHalf:last-child{
		text-align:left;
	}
	#ErrorPage{
		flex-direction:row;
		align-items:center;
	}
	#ErrorTitle{
		font-size:2rem;
	}
	/*CUSTOMS*/
	.BlockPilars{
		width:140px;
		& img{
			width:70%;
		}
	}
	.PilarsMod{
		width:230px;
		margin:15px 10px;
		& img{
			width:150px;
		}
	}
	.BlockPrograms{
		width:280px;
		margin:15px 5px;
	}
	.BlockNewsMini{
		width:280px;
	}
	.BlockTeam{
		margin:15px 5px;
	}
	#ContactHome{
		label{
			margin-left:19px;
		}
	}
	#VolunteerForm{
		label{
			margin-left:19px;
		}
	}
	.BlockProgram{
		margin:15px 2px;
	}
	.BlockOther{
		width:290px;
		height:650px;
		margin:15px 2px;
	}
	.BlockNews{
		width:280px;
		margin:15px 2px;
	}
	.BlockDonation{
		margin:15px 2px;
	}
	#BriefImage{
		top:0;
		left:-900%;
	}
}
/*PC*/
@media (min-width: 900px){
	body{
		font-size:1rem;
		overflow-x:visible;
	}
	header{
		& #HeaderStatic{
			& #HeaderTitles{
				display:flex;
				flex-direction:column;
				justify-content:flex-end;
				width:50%;
				padding-bottom:75px;
				& h2{
					text-align:left;
					min-height:auto;
					letter-spacing:5px;
				}
				& p{
					min-height:auto;
					color:white;
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
		& #HeaderProduct{
			& #ProductTitles{
				display:flex;
				flex-direction:column;
				justify-content:flex-end;
				& h1{
					text-align:left;
					min-height:auto;
					letter-spacing:5px;
				}
				& p{
					min-height:auto;
					color:white;
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
		& #HeaderMain{
			flex-direction:row;
			align-items:flex-end;
			& #HeaderAction{
				width:50%;
				order:1;
				&  a{
					margin:30px auto;
				}
			}
			& #HeaderInfo{
				display:flex;
				flex-direction:column;
				justify-content:flex-end;
				width:50%;
				order:2;
				& h2{
					min-height:auto;
					letter-spacing:5px;
				}
				& p{
					min-height:auto;
					color:white;
					font-size:0.9rem;
					line-height:1.9;
				}
			}
		}
	}
	main{
		margin:0;
		overflow:visible;
	}
	footer{
		padding:0;
		overflow:hidden;
		color:white;
		& .Footer2{
			min-height:200px;
			padding:30px 0;
		}
		#FooterNetworks{
			width:100%;
			margin:32px 0 0;
			justify-content:flex-end;
			gap:14px;
			& li{
				display:flex;
				justify-content:center;
				align-items:center;
			}
			& li a i{
				font-size:1.9rem;
			}
		}
	}
	#FooterTerms{
		margin:0;
		& p{
			text-align:left;
			& a{
				display:inline-block;
			}
			& span{
				display:inline-block;
				margin:0 5px;
			}
		}
	}
	#FooterCopyright{
		& p{
			text-align:right;
		}
	}
	#FooterColletions{
		display:inline-flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
		gap:20px;
		& a img{
			width:60px;
		}
	}
	#PaymentsType{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		& a img{
			width:40px;
		}
	}
	.active{
		font-weight:bolder;
	}
	#TopBar{
		padding:0;
		height:38px;
		display: flex;
		flex-direction:row;
		justify-content:flex-end;
		align-items: center;
		& > a{
			font-size:1rem;
			padding:5px 10px;
		}
	}
	#HeaderContent{
		min-height:120px;
		padding:10px 0;
		position:relative;
		z-index:2;
		& #MobileBars{
			display:none;
		}
		#HeaderStructure{
			display:flex;
			flex-direction:row;
			justify-content:space-between;
			align-items:center;
			#MobileBars{
				display:none;
			}
			.HeadLogo{
				margin:0;
				width:250px;
				overflow:hidden;
			}
			#HeadLogoHome{
				width:120px;
				height:120px;
			}
			nav{
				display:inline-block;
				position:relative;
				right:0;
				top:0;
				height:71px;
				z-index:3;
				overflow-x:visible;
				transition: 0.5s;
				grid-column:2;
				grid-row: 2;
				background-color:transparent;
			}
			#WebMenu{
				opacity:100%;
				list-style:none;
				padding:20px 0 0 0;
				display:flex;
				align-items:center;
				justify-content:flex-end;
				& li{
					position: relative;
					height:30px;
					white-space: nowrap;
					margin:10px auto;
					text-align:center;
					border-bottom:none
				}
				& li a{
					padding:5px 15px;
					display:flex;
					align-items:center;
					justify-content:center;
					color:white;
					font-size:1em
				}
				& li:first-child{
					display: none;
				}
				& .SubMenu{
					display: none;
					position: absolute;
					left: 0;
					top: 100%;
					list-style: none;
					padding: 0;
					margin: 0;
					background-color: var(--DarkColor); /* Cambia esto según tu esquema de colores */
					box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
					& li:first-child {
						font-size:1em;
						width:100%;
					}
					& li {
						display: block;
						height:40px;
					}
					& li a {
						display: block;
						padding:5px 15px;
						font-weight:normal;
						color:var(--MainColorBG) !important;
						background-color:var(--DarkColor);
						font-size:1em !important;
						border-radius:0;
					}
					& li a:hover {
						background-color:var(--MidColor);
						color:var(--MainColorBG2);
					}
				}
				/* Mostrar el submenú al pasar el ratón por encima del elemento padre */
				& .dropdown:hover .SubMenu {
					display: block;
				}
			}
			.menu-icon{
				display:none;
			}
			#HeaderNetworks{
				display:none;
			}
		}
	}
	div[id$='DefSection']{
		padding:60px 0;
	}
	div[id$='DefSection'] h1{
		font-size:2.3rem;
		margin:30px 0 30px;
	}
	.SectionTitle{
		text-align: left;
	}
	.SectionTitle h2{
		font-size:2.9rem;
	}
	/*BUTTONS*/
    .Button1,.Button2,.Button3{
        max-width:290px;
    }
	#NoOpinionInfo > .Button1{
		width:220px;
		max-width:220px;
	}
	.BlogName{
		font-size: 1.8rem;
	}
	#Authors{
		text-align:left;
	}
	#ErrorPage > .BlockHalf > img{
		width:50%;
	}
	#ErrorTitle{
		font-size:3.5rem;
		text-align:left;
	}
	#SearchFormIndex > h1{
		font-size:4rem;
	}
	#SearchFormIndex > p{
		width:70%;
		margin:0 auto;
	}
	#SearchFormIndex > #SearchBar{
		width:70%;
	}
	#HeadTitle{
		display:inline-block;
		color:var(--MainColor);
		font-size:1.9rem;
		text-align:left;
	}
	/*BLOG*/
	.ArticlesBlock{
		margin:20px 15px;
	}
	.BlogName{
		font-size:1.2rem;
	}
	#BlogTitle{
		font-size:2.5rem;
	}
	#BlogData{
		flex-direction:row;
		justify-content:flex-start;
	}
	#BlogData > div{
		margin:10px 15px;
	}
	/*CUSTOMS*/
	.BlockPilars{
		width:40%;
		margin:15px 10px;
		& img{
			width:100px;
		}
	}
	.PilarsMod{
		width:200px;
		margin:15px 40px;
		& img{
			width:150px;
		}
	}
	#MarketingDefSection{
		padding:80px 0;
	}
	#ProgramVideo{
		padding-top:15px;
	}
	#ProgramSlider{
		width:100%;
		margin:0 auto;
	}
	.BlockPrograms{
		width:400px !important;
		height:330px !important;
		margin:15px 5px;
		color:white;
		vertical-align:top;
		position: relative;
		& .ProgramName{
			width:100%;
			height:330px;
			position:absolute;
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			z-index:1;
			& img{
				width:75px;
			}
			& h3{
				text-align:left;
				font-size:1.8rem;
			}
		}
		& .ProgramInfo{
			height:205px;
			min-height:330px;
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			align-items:center;
			position:absolute;
			z-index:2;
			opacity:0;
			transition:ease all .3s;
			background-color:var(--MainColorBG);
		}
		& .ProgramInfo p{
			color:var(--MidColor);
			margin:15px 15px 10px 15px;
		}
	}
	.BlockPrograms:hover .ProgramInfo {
		opacity: 1;
	}
	#SecondAllies{
		& .BlockSingle h2{
			text-align:left;
		}
	}
	#VolunteerDefSection{
		& .container p{
			font-size:1.9rem;
		}
	}
	.BlockTeam{
		margin:15px 10px;
		& p{
			font-size:1rem;
		}
	}
	#AmorEcosDefSection{
		& p{
			margin-left:20px;
		}
		& h3{
			margin-top:30%;
			font-size:3.1rem;
		}
	}
	#HowWeDefSection{
		& p{
			margin-left:20px;
		}
	}
	#ContactHome{
		& .iti{
			width:100%;
			margin:10px 0
		}
		& .iti--separate-dial-code .iti__selected-flag{
			margin-left:31px;
		}
		label{
			margin-left:31px;
		}
	}
	#VolunteerForm{
		& .iti{
			width:100%;
		}
		& .iti--separate-dial-code .iti__selected-flag{
			margin-left:31px;
		}
		label{
			margin-left:31px;
		}
	}
	.BlockProgram{
		width:450px;
		height:535px;
		margin:15px 10px;
		& h3{
			& a{
				padding-left:15px;
				justify-content:flex-start;
				font-size:1.8rem;
			}
		}
		& p{
			padding:0 20px 10px;
		}
	}
	.BlockOther{
		width:990px;
		height:255px;
		margin:15px 5px;
		display:inline-flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:flex-start;
		background-color:var(--MainColorBG);
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		& .Video {
			width:35%;
			position: relative; /* Necesario para posicionar el ícono absolutamente */
		}
		& .Video a img {
			width: 100%;
		}
		& .Video a i {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); /* Centrar el ícono */
			font-size: 5rem; /* Tamaño del ícono */
			color: white; /* Color del ícono */
			opacity: 0.5; /* Hacer el ícono un poco transparente */
			transition: opacity 0.3s ease; /* Efecto de transición */
		}
		& .Video a:hover i {
			opacity: 0.9; /* Opacidad total al pasar el mouse */
		}
		& .Video a img{
			width:100%;
		}
		& .VideoInfo{
			width:65%;
			padding:5px 0 0 10px;
			& h3{
				padding-left:15px;
				text-align:left;
				color:var(--MidColor)
			}
			& p{
				padding:0 15px;
			}
		}
	}
	#ContactData{
		margin:30px 0;
	}
	.BlockDonation{
		margin:15px 10px;
	}
	.PaymentData{
			& li span:last-child{
				display:inline-block;
			}
	}
	#BriefImage{
		top:0;
		left:-105%;
	}
	#ProductAttributes{
		justify-content:flex-start !important;
	}
	.ProductBlock{
		& a{
			& .ProductCover{
				opacity: 0.8;
				transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
			}
		}
	}
	.ProductBlock:hover{
		& .ProductCover{
			opacity: 0.4;
		}
		& h2{
			color:var(--LightColor2)
		}
	}
}