/*!
 * Copyright OlaSoft Bénin - 2020
 * https://www.olasoft.net
 * @OlaSoftBenin
 * contact@olasoft.net
 */
 
 .bg-gray-2{background-color: rgb(247,247,247)}

.mask{background: linear-gradient(0deg, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64))}
.mask-alt{background: rgba(0,0,0,.3);}

.mask-alt-2{background-image: linear-gradient(145deg, rgba(0, 0, 20, 0.5), rgba(0, 0, 0, 0) 100%);}
.mask-alt-3{background-image: linear-gradient(145deg, rgba(0, 0, 20, 0), rgba(0, 0, 20, 0.5) 100%);}

.shadow{box-shadow: 14px 21px 36px 12px rgba(182, 196, 216, 0.28)}
.shadow-alt{box-shadow: 1px 0px 1px 0px rgba(49, 63, 65, .25);}
.shadow-alt-2{box-shadow: 0px 1px 1px 0px rgba(49, 63, 65, .25);}
.shadow-alt-3{box-shadow: 0px 0px 20px 10px rgba(182, 196, 216, 0.2)}
.title-shadow{text-shadow: 0 0 3px rgb(49, 63, 65)}
.blur{filter: blur(7px)}
.transparent{opacity: 0.8}
.transparent-alt{opacity: 0.49;}

.white.disable{color: #ccc;}
.fadein{transition: all 1s; opacity: 0;}
.fadein.animate{opacity: 1}
.letter-spacing{letter-spacing: .39vw;}
.separator {height: .14vw; width: 6.25vw; background-color: #FFFFFF;}


@keyframes popup{
	from{transform: translateY(-50%); opacity: 0;}
	to{transform: translateY(0%); 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-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(5vw)}
	to{opacity: 1; transform: translateX(0vw)}
}
@keyframes from-left{
	from{opacity: 0; transform: translateX(-5vw)}
	to{opacity: 1; transform: translateX(0vw)}
}
@keyframes height{
	from{opacity: 0; max-height: 0px;}
	to{opacity: 1; max-height: 9000px}
}
.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-show{animation: show .5s}
.anim-display.anim-show-alt{animation: show-alt .5s}
.anim-display.anim-from-bottom{animation: from-bottom .5s}
.anim-display.anim-from-bottom-alt{animation: from-bottom-alt .5s}
.anim-display.anim-height{animation: height .5s}

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

#header{z-index: 5}
#header.opaque, #header.opened{background: var(--success-color); box-shadow: 0px 3px 3px 0px rgba(49, 63, 65, .25)}

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

#menu li::after{
	content: "";
	width: 0%;
	height: 1px;
	bottom: 0px;
	position: absolute;
	background: #fff;
	left: 0; right: 0;
	margin: auto;
	transition: all .35s;
}
#menu li:hover::after{width: 50%;}

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

#banner{height: 25.89vw; min-height: 350px;}
#bannerAlt{min-height: 350px;}
@media(max-width:768px){
#banner{min-height: 220px;}
}

#home::after{
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: -6.42vw;
	height: 10.42vw;
	width: 1px;
	background: #fff;
	margin: auto;
}

.slide .count{font-size: 8.33vw; line-height: 1.265}
#article .flickr-frame, #article .youtube-frame {height: 38vw;}

#search .os-tab-head.active{
	border: 1px solid rgb(245,245,245);
	border-bottom: none;
	font-weight: 600;
}

#search .tabs{
	border: 1px solid rgb(245,245,245);
	border-top: none;
}