/*!
 * Copyright OlaSoft Bénin - 2019
 * https://www.olasoft.net
 * @OlaSoftBenin
 * contact@olasoft.net
 */

*{color: var(--black-color-alt)}
*::selection{
	background: var(--success-color);
	color: #fff;
}

.mask{
    background-image: linear-gradient(91.18deg, #023E79 0%, #0E6258 100%);
    opacity: 0.8667689732142857;
}
.mask-alt {
  background-image: linear-gradient(181.18deg, #023E79 0%, #0E6258 100%);
  opacity: 0.8667689732142857;
}
.mask-alt-2{background-color: rgba(49, 49, 49, 0.54);}
.mask-alt-3 {
  background-image: linear-gradient(0deg, #000000 0%, rgba(76, 76, 76, 0.56) 100%);
  opacity: 0.8667689732142857;
}

.shadow{box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);}
.blur{filter: blur(7px);}
.transparent{opacity: 0.7366768973214286;}

#title{
    width: auto;
    max-width: unset;
}

#title::before, .hasLine::before{
    content: "";
    width: 4.3vw;
    height: .47vw;
    background: #fff;
    position: absolute;
    bottom: 0px;
    transition: all .5s;
}
#banner:hover #title > span:hover::before{
    width: 100%;
}

.white.disable{color: #ccc;}
.trans{opacity: .45}
.fadein{transition: all 1s; opacity: 0;}
.fadein.animate{opacity: 1}
.letter-spacing{letter-spacing: .39vw;}
.separator {height: .14vw; width: 6.25vw; background-color: #FFFFFF;}
.success.alt-2{color: rgb(0,38,26)}

@media(min-width:768px){#header{top: calc(var(--20px) * 2); transition: all .2s;}}
@media(max-width:768px){#header{top: 0}}
#header.opaque{top: 0px;}
#header.opaque::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../images/background.jpg");
    background-position: 0px -60px;
    background-size: 100% auto;
    z-index: -1;
}
#header.opaque::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(91.18deg, #023E79 0%, #0E6258 100%);
    opacity: 0.8667689732142857;
    z-index: -1;
}

@media(min-width:768px){
#menu > ul > li.active > span > span::after{
    content: "";
    background: #fff;
    height: var(--5px);
    width: calc(100%);
    position: absolute;
    left: 0; bottom: var(--5px);
    bottom: calc(-1.5 * var(--10px));
    
}
#menu > ul > li div{top: 100%; max-height: 0px; min-width: 100%; overflow-y: hidden}
#menu > ul > li:hover div{max-height: 1000px}
#menu > ul > li li:hover a{color: var(--success-color); text-decoration: underline;}
}

#banner{height: 27vw; min-height: 200px}
@media(min-width:768px){#home{margin-top: -15vw}}
@media(max-width:768px){#home{margin-top: -100px}}

.une, .une .slide, #article #une{height: 42vw; min-height: 300px;}
@media(max-width:768px){.une .slide.hbottom-in{padding-bottom: calc(var(--header-height) * 1.5);}}
.une .slide-prev{right: 100%;}
.une .slide-next{left: 100%;}
@media(max-width:768px){
.une .slide-prev{right: unset; left: calc(-1 * var(--20px));}
.une .slide-next{left: unset; right: calc(-1 * var(--20px));}
}

#last-tweets{ background: #50ABF1; height: 12.9vw;}

.shortcut{height: 23.05vw;} 
.shortcut:hover .mask-alt-2{background-color: rgba(49, 49, 49, 0.35);} 
.shortcut:hover .blur{filter: blur(2px);}
.block-quote, .article{height: 30.07vw; min-height: 260px}

@media(min-width:768px){#article{margin-top: calc(-6 * var(--10px))}}
@media(max-width:768px){#article{margin-top: calc(2 * var(--10px))}}
@media(min-width:768px){#article .doc{height: 14.06vw}}
@media(max-width:768px){#article .doc{height: 40vw}}

.sidebar > div > ul > li:not(:last-child){border-bottom: var(--1px) solid var(--gray-color-alt)}

.president-block > i{opacity: 0}
.president-block.visible > i{opacity: 1}
.president-block .president{transform: translateX(100%)}
.president-block.visible .president{transform: translateX(0%)}

article img{border-radius: var(--radius-min)}
article p{line-height: 1.65}
#article .flickr-frame, #article .youtube-frame {height: 38vw;}

#searchBox{top: 100%}
#searchBox.opened{top: 0%}

.btn-hover::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all .5s;
    background: rgba(0,0,0,0);
    z-index: 0;
}

.btn-hover:hover::before{
    background: rgba(0,0,0,.25);
}