/*!
 * Copyright OlaSoft Bénin - 2020
 * https://www.olasoft.net
 * @OlaSoftBenin
 * contact@olasoft.net
 */
 
 font{font: inherit}
 
.text-gradient-success{ background: linear-gradient(89.98deg, #173761 28.6%, #000000 100%); background-clip: text; -webkit-background-clip: text; color: transparent!important;}
.text-gradient-warning{ background: linear-gradient(89.98deg, rgb(255, 165, 10) 0.6%, #ffffff 100%); background-clip: text; -webkit-background-clip: text; color: transparent!important;}
.text-gradient-warning-alt{ background: linear-gradient(89.98deg, rgb(255, 165, 10) 0.6%, #000000 100%); background-clip: text; -webkit-background-clip: text; color: transparent!important;}
.banner-gradient{ background: linear-gradient(89.98deg, #173761 28.6%, rgba(255, 255, 255, 0) 162.16%);}
.banner-gradient-alt{ background: linear-gradient(45deg, #173761 24%, rgb(34,88,165) 100%)}
.banner-gradient-alt-2{ background: linear-gradient(89.98deg, rgb(34,88,165) 28.6%, rgba(255, 255, 255, 0) 162.16%)}
.gradient-success{ background: linear-gradient(90deg, #173761 0%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-success-alt{ background: linear-gradient(90deg, #316D75 39.44%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-success-alt-2{ background: linear-gradient(90deg, rgb(34,88,165) 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-success-alt-3{ background: linear-gradient(90deg, rgba(49,109,117,.85) 39.44%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-warning{ background: linear-gradient(90deg, rgb(255, 212, 0) 40.13%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-warning-alt{ background: linear-gradient(90deg, rgb(255, 165, 10) 40.13%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-warning-alt-2{ background: linear-gradient(89.98deg, rgba(255, 165, 10, 0.72) 28.6%, rgba(255, 255, 255, 0) 162.16%)}
.gradient-black{ background: linear-gradient(90deg, #4C3E39 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-white{ background: linear-gradient(90deg, #ffffff 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-white-alt{ background: linear-gradient(45deg, rgb(252,252,255) 24%, rgb(241,241,250) 100%)}
.gradient-gray{ background: linear-gradient(90deg, #E5E5E5 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-gray-alt{ background: linear-gradient(90deg, rgb(196,196,196) 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-error{ background: linear-gradient(90deg, rgb(229, 48, 9) 40.83%, rgba(255, 255, 255, 0) 132.86%)}
.gradient-error-alt{ background: linear-gradient(90deg, rgb(13,110,119) 40.83%, rgba(255, 255, 255, 0) 132.86%)}

.mask{background: rgba(38, 38, 38, 0.87)}
.mask-alt{background: rgba(0,0,0,.3);}

.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);}
.shadow-alt-2{box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .5);}
.transparent{opacity: 0.8}
.transparent-alt{opacity: 0.49;}
.blur{filter: blur(5px)}

.icon.english{background-image: url("../icons-alt/english.svg");}
.icon.french{background-image: url("../icons-alt/french.svg");}

.white.disable{color: #ccc;}

@keyframes show{
	from{opacity: 0; transform: scale(.5)}
	to{opacity: 1; transform: scale(1)}
}
@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-show{animation: show .5s}
.anim-display.anim-slide{animation: slide .5s}

.anim-scroll{opacity: 0; transition: all .85s}
.anim-scroll.anim-show{transform: scale(.95)}
.anim-scroll.anim-from-bottom{transform: translateY(5vw)}
.anim-scroll.visible{opacity: 1; transform: translate(0vw, 0vw) scale(1)}

#header.opaque, #header.opened{background: linear-gradient(45deg, #173761 24%, rgb(34,88,165) 100%)}

@media(max-width:768px){
	#menu{
		max-height: 0px;
		overflow: hidden;
		z-index: -1;
	}
	#menu.opened{max-height: 2000px}
}

#menu > ul > li::after{
	content: "";
	width: 0%;
	height: calc(var(--10px) * 0.8);
	top: 0px;
	position: absolute;
	background: var(--success-color);
	border-radius: 0 0 var(--10px) var(--10px);
	left: 0; right: 0;
	margin: auto;
	transition: all .35s;
}
#menu > ul > li:hover::after{width: 70%;}

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

#banner{min-height: 350px; height: 12vw}
#banner.banner-home{min-height: 500px; height: calc(100vh - (var(--20px) * 4))}
#banner.banner-article{min-height: 300px; height: 30vw}
@media(max-width:768px){
	#banner{min-height: unset; height: unset}
	#banner.banner-home, #banner.banner-home > div {min-height: 400px; height: 80vw}
	#banner.banner-article{min-height: unset; height: unset}
}

body:not(.alt) #banner .slide:not(.slide-dot){opacity: 0; z-index: -1}
body:not(.alt) #banner .slide.active{left: 0%; opacity: 1; z-index: 0}
#banner .slide-dot{background: rgb(7,36,77)}
#banner .slide-dot.active{background: rgb(34,88,165)}
#banner .icon.big{min-width: 8vw; width: 8vw; height: 8vw}

a > figure, .project figure{height: 16vw}
.slide .count{font-size: 8.33vw; line-height: 1.265}
#article .flickr-frame, #article .youtube-frame, #article .slide-box , .article .slide-box{height: 38vw;}
.article table{border-collapse: collapse;}
.article table *{border-color: var(--gray-color)}
.article table td{padding: var(--10px) calc(2 * var(--10px))!important; text-align: left!important}
#detailsBox .article h1, #detailsBox .article h2, #detailsBox .article h3, 
#detailsBox .article h4, #detailsBox .article a{
	color: var(--warning-color);
}

@media(max-width:768px){
	.structure ul:not(.opened){display: none!important}
}
.tab{transform: scale(1)}
.tab.active{background: var(--gray-color); transform: scale(1.09); z-index: 1; box-shadow: none;}
.tabs-gray-alt .tab.active{background: var(--gray-color-alt); color: white}


.title-h2{margin-top: var(--10pxms); font-weight: 600; color: var(--success-color); text-transform: uppercase}
.title-h3{padding-left: calc(3 * var(--10px)); margin-top: var(--5px)}
.title-h4{padding-left: calc(3 * var(--20px)); margin-top: var(--5px)}
.title-h2{
	padding-top: var(--5px);
	padding-bottom: var(--5px);
	border-bottom: 1px solid #bfbfbf;
}