.gradient-success, .gradient-warning, .gradient-white, .gradient-black{ background-clip: text; -webkit-background-clip: text; color: transparent;}
.gradient-success, .bg-gradient-success{ background: linear-gradient(180deg, rgba(47, 41, 131, 0.78) 35.94%, rgba(47, 154, 210, 0.78) 100%);}
.gradient-success-alt, .bg-gradient-success-alt{ background: linear-gradient(180deg, rgba(47, 41, 131, 0.55) 0%, rgba(47, 154, 210, 0.55) 100%);}
.gradient-success-alt-2, .bg-gradient-success-alt-2{ background: linear-gradient(90deg, #2F2983 0%, #2F9AD2 100%);}
.gradient-success-alt-3, .bg-gradient-success-alt-3{ background: linear-gradient(264.73deg, #2F2983 -3.57%, #2F9AD2 130.1%);}
.gradient-warning, .bg-gradient-warning{ background-image: linear-gradient(90deg, rgb(255,150,0), rgb(255,210,0) 100%)}
.gradient-white, .bg-gradient-white{ background-color: red; background-image: linear-gradient(90deg, rgb(255,255,255), rgb(235,235,245) 100%)}
.gradient-black, .bg-gradient-black{ background-image: linear-gradient(90deg, rgb(50,50,50), rgb(0,0,0) 100%)}
.gradient-gray, .bg-gradient-gray{ background: linear-gradient(359.37deg, #F1F1F1 29.72%, rgba(196, 196, 196, 0) 100%);}

.transition-alt{transition: all 1s}
.mask{background: rgba(0,0,0,.27)}
.mask-alt{background: rgba(21, 47, 105, 0.81)}

.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);}

.text-shadow{text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);}
.text-shadow-white{text-shadow: 0px 0px 4px rgba(255, 255, 255, .25);}
.title-shadow-success{
	text-shadow: 1px 1px 0 var(--success-color),
				-1px -1px 0 var(--success-color),
				-1px 1px 0 var(--success-color),
				1px -1px 0 var(--success-color)
}

.blur{filter: blur(7px)}
.transparent{opacity: 0.8}
.transparent-alt{opacity: 0.07}

.lh-alt{line-height: .8em}
.icon.document-alt{background-image: url("../icons/document-alt.svg")}
.icon.menu-alt{background-image: url("../icons/menu-alt.svg")}


@keyframes popup{
	from{transform: translateY(-50%); opacity: 0;}
	to{transform: translateY(0%); opacity: 1;}
}
@keyframes opacity{
	from{opacity: 0}
	to{opacity: 1}
}
@keyframes show{
	from{opacity: 0; transform: scale(.5)}
	to{opacity: 1; transform: scale(1)}
}
@keyframes show-alt{
	from{opacity: 0; transform: scale(.95)}
	to{opacity: 1; transform: scale(1)}
}
@keyframes from-top{
	from{opacity: 0; transform: translateY(-5vw)}
	to{opacity: 1; transform: translateY(0vw)}
}
@keyframes from-bottom{
	from{opacity: 0; transform: translateY(5vw)}
	to{opacity: 1; transform: translateY(0vw)}
}
@keyframes from-bottom-alt{
	from{opacity: 0; transform: translateY(1vw)}
	to{opacity: 1; transform: translateY(0vw)}
}
@keyframes from-right{
	from{opacity: 0; transform: translateX(100%)}
	to{opacity: 1; transform: translateX(0vw)}
}
@keyframes from-left{
	from{opacity: 0; transform: translateX(-100%)}
	to{opacity: 1; transform: translateX(0vw)}
}
@keyframes height{
	from{opacity: 0; max-height: 0px;}
	to{opacity: 1; max-height: 9000px}
}
@keyframes slide{
	from{opacity: 0;}
	to{opacity: 1; left: 0;}
}
.popup-alt:not(.opened),.anim-display:not(.opened),.anim-display:not(.active){display: none;}
.popup-alt{animation: popup .5s}
.anim-display.flex.opened{display: flex}
.anim-display:not(.flex).opened,.anim-display:not(.flex).active{display: block}

.anim-display.anim-popup{animation: popup .5s}
.anim-display.anim-opacity{animation: opacity 3s}
.anim-display.anim-show{animation: show .5s}
.anim-display.anim-show-alt{animation: show-alt .5s}
.anim-display.anim-from-left{animation: from-left 3s}
.anim-display.anim-from-right{animation: from-right 3s}
.anim-display.anim-from-top{animation: from-top 3s}
.anim-display.anim-from-bottom{animation: from-bottom 3s}
.anim-display.anim-from-bottom-alt{animation: from-bottom-alt .5s}
.anim-display.anim-height{animation: height .5s}
.anim-display.anim-slide{animation: slide .5s}

.anim-scroll{opacity: 0; transition: all 1.5s}
.anim-scroll.anim-show{transform: scale(.95)}
.anim-scroll.anim-show-alt{transform: scale(.5)}
.anim-scroll.anim-from-top{transform: translateY(-50vh)}
.anim-scroll.anim-from-bottom{transform: translateY(10vw)}
.anim-scroll.anim-from-bottom-alt{transform: translateY(70vh)}
.anim-scroll.anim-from-left{transform: translateX(-50vw)}
.anim-scroll.anim-from-right{transform: translateX(50vw)}
.anim-scroll.visible{opacity: 1; transform: translate(0vw, 0vw) scale(1)}

#btnMenu > span{border-bottom: 1px solid #fff}
#header.opaque{background: var(--success-color)}
.logo {font-size: 3.0729167vw; font-weight: 900;}
#logo {transform: translateX(var(--icon-big-size))}
#header.opaque #logo {transform: translateX(0px)}
#menu{
	max-height: 0px;
	overflow: hidden;
	z-index: -1;
}
#menu.opened{max-height: 2000px}
@media(max-width:768px){
	.logo {font-size: 20px; font-weight: 900}
}

#menu li ul{display: none;}
#menu li:hover ul{display: block; background: rgba(255,255,255,1);}
#menu > ul > li:hover, #menu li ul li:hover{color: var(--warning-color);}

#homeBanner{min-height: 500px; height: 100vh}
#homeArticles{height: 46.6666667vw}
#homeArticles .articles{height: calc(100% + var(--20px))}
#home .bio{height: 39.2708333vw}
article.bio figure{height: 34.375vw}
.doc figure{width: 8.8541667vw; min-width: 8.8541667vw}
.homeSupport{height: 11.0416667vw; min-width: 11.0416667w; width: 11.0416667vw}
.homeDoc figure{height: 21.6145833vw}

.articles figure{
	height: 15.625vw;
	min-height: 15.625vw;
	width: 22.9166667vw;
	min-width: 22.9166667vw;
}
@media(max-width:768px){
	#homeBanner{min-height: 60vw; height: 60vw}
	#homeArticles{height: 125vw}
	.articles article{
		width: 80vw;
		min-width: 80vw;
	}
	.articles figure{
		height: 50vw;
		width: 100%;
		min-width: 100%;
	}
	#home .bio{height: calc(100vw - var(--40px))}
	.homeSupport{height: 25vw; min-width: 25vw; width: 25vw}
	.homeDoc figure{height: calc(100vw - var(--40px))}
	article.bio figure{height: 70vw}
	.doc figure{
		width: 25vw;
		min-width: 25vw;
		margin-left: calc(-1 * var(--20px));
		margin-top: calc(-1 * var(--20px));
	}
}

.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, #article .slide-box{height: 38vw;}
.encart figure, .video figure{height: 15vw}
.encart-alt figure{height: 10vw}
textarea{height: 12vw}

@media(max-width:768px){
	.quote{transform: translateY(-60%)}
	.quote span{font-size: 80px;}
	.yt-preview{width: 80vw; height: 40vw}
	.encart figure{height: 125px}
	.video figure{height: 180px}
	.encart-alt figure{height: 90px}
	.flickr-frame, .youtube-frame, #article .slide-box{height: 220px;}
	textarea{height: 150px}
}


#homeSlider  .slide{
	-webkit-transition: all 1s;
	transition: opacity 2s, transform 2s, z-index .2s 2.8s;
    position: absolute;
    left:0;
    top:0;
    overflow: hidden;
    opacity: 0;
    z-index: 0;
    transform: scale(.95);
}

#homeSlider  .slide.active{
    opacity: 1;
    z-index: 1;
    transform: scale(1);
}