/*!
 * Copyright Présidence du Bénin - 2018
 * https://www.presidence.bj
 * @presidencebenin
 * digital@presidence.bj
 */

:root{
    --banner-slider-title-height: 16.68vw;

    --yellow-alt: #FCCD5D;
    --green-alt: #45B37E;
    --red-alt: #F3706A;
    --blue-alt: #3BCCE4;
    --blue-alt-2: #DDF0F4;
    --black-alt: #586470;
    --gray-alt-2: #DDF3DD;
    --btn-gouv-height: 3.125vw;
    --header-height: 7.81vw;

    --mandate-height: 12vw;
    --mandate-width: 30vw;
    --plus-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAaBJREFUeNrt3LFpAzEYhmFdLlUgG6QyeAd7kQziQTJIMoi9g+GqbGBIJ5TGA9wVlki+56kF9xcvHAj0lwIAAAAAAAAAAAAAAAD8PdPoAXq5/lzf5jof15ytcz3vX/bfo2fu4Xn0AL3MdT620j5Xnn0vpXyNnrmHp9EDMJYAwgkgnADCCSCcAMIJIJwAwgkgnADCCSCcAMIJIJwAwgkgnADCCSCcAMIJIJwAwgkgnADCCSCcAMIJIJwAwgkgnADCCSCcAMJ1ex6+5X3+I7TWDmu3IbTWDsttGTVq1/0E3QLY8j7/IbaswpjKqZU2bNSe+wn8AsIJIJwAwgkgnADCCSCcAMIJIJwAwnW7CaxzPd9vuIa4XwWf1h0uH9M0XUbNWud67vWtbgHc77aHrV9dbktZe707TdNl97qzKpb/TwDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4bo9Dx9ty36Cnu/zAQAAAAAAAAAAAAAAALb7Bb82RBlk6hp4AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTEyLTE3VDA5OjU3OjU3KzAwOjAwMe/6dwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMi0xN1QwOTo1Nzo1NyswMDowMECyQssAAAAodEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL3RtcC9tYWdpY2stRkpDZmtHeWMK1gXnAAAAAElFTkSuQmCC);
}

@media(max-width:768px){
    :root{
        --header-height: 60px;
        --btn-gouv-height: 32px;
        --banner-slider-title-height: 40vw;

        --mandate-height: 180px;
        --mandate-width: calc(50vw - var(--global-margin) - 10px);
    }

    .mmargin-5, .mmargin-5.adapt{margin: 5px}
    .mmargin-10, .mmargin-10.adapt{margin: var(--10px)}
    .mmargin-20, .mmargin-20.adapt{margin: var(--20px)}
    .mmargin-40, .mmargin-40.adapt{margin: calc(var(--20px) * 2)}

    .mpadding-5, .mpadding-5.adapt{padding: 5px}
    .mpadding-10, .mpadding-10.adapt{padding: var(--10px)}
    .mpadding-20, .mpadding-20.adapt{padding: var(--20px)}
    .mpadding-40, .mpadding-40.adapt{padding: calc(var(--20px) * 2)}
}
@media(max-width:768px) and (orientation:landscape){:root{--banner-slider-title-height: 35vw;}}
@media(max-width:768px) and (orientation:portrait){:root{--banner-slider-title-height: 60vw;}}

.transparent{opacity: 0.7366768973214286;}
.transparent-alt{opacity: 0.5;}
.shadow{box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);}
.shadow-alt{box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);}

.green.alt{color: var(--green-alt);}
.yellow.alt{color: var(--yellow-alt);}
.red.alt{color: var(--red-alt);}
.blue.alt{color: var(--blue-alt);}
.blue.alt-2{color: var(--blue-alt-2);}
.black.alt{color: var(--black-alt);}
.gray.alt-2{color: var(--gray-alt-2);}

.bg-green.alt{background-color: var(--green-alt);}
.bg-yellow.alt{background-color: var(--yellow-alt);}
.bg-red.alt{background-color: var(--red-alt);}
.bg-blue.alt{background-color: var(--blue-alt);}
.bg-blue.alt-2{background-color: var(--blue-alt-2);}
.bg-black.alt{background-color: var(--black-alt);}
.bg-gray.alt-2{background-color: var(--gray-alt-2);}

.fill-green.alt{fill: var(--green-alt);}
.fill-yellow.alt{fill: var(--yellow-alt);}
.fill-red.alt{fill: var(--red-alt);}
.fill-blue.alt{fill: var(--blue-alt);}
.fill-blue.alt-2{fill: var(--blue-alt-2);}
.fill-black.alt{fill: var(--black-alt);}
.fill-gray.alt-2{fill: var(--gray-alt-2);}

.stroke-green.alt{stroke: var(--green-alt);}
.stroke-yellow.alt{stroke: var(--yellow-alt);}
.stroke-red.alt{stroke: var(--red-alt);}
.stroke-blue.alt{stroke: var(--blue-alt);}
.stroke-blue.alt-2{stroke: var(--blue-alt-2);}
.stroke-black.alt{stroke: var(--black-alt);}
.stroke-gray.alt-2{stroke: var(--gray-alt-2);}

.border-blue-alt{border-color: var(--blue-alt);}
.border-blue-alt-2{border-color: var(--blue-alt-2);}
.border-red-alt{border-color: var(--red-alt);}
.border-black-alt{border-color: var(--black-alt);}
.border-green-alt{border-color: var(--green-alt);}


.btn.blue.alt, .btn.alt.blue.trans:hover{background-color: var(--blue-alt); color: #fff;}
.btn.green.alt, .btn.alt.green.trans:hover{background-color: var(--green-alt); color: #fff;}
.btn.blue.alt.trans{color: var(--blue-alt); border: 1px solid var(--blue-alt); background: transparent;}

@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 height{
	from{opacity: 0; max-height: 0px;}
	to{opacity: 1; max-height: 9000px}
}
@keyframes tournee-left{
	from{opacity: 0; transform: scaleX(0) translateX(-50%);}
	to{opacity: 1; transform: scaleX(1) translateX(0%);}
}
@keyframes tournee-right{
	from{opacity: 0; transform: scaleX(0) translateX(50%);}
	to{opacity: 1; transform: scaleX(1) translateX(0%);}
}
.popup-alt:not(.opened), .anim-display:not(.opened){display: none;}
.popup-alt{animation: popup .5s}
.anim-display.flex.opened{display: flex}
.anim-display:not(.flex).opened{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-height{animation: height .5s}

/*
.anim-tournee{animation: tournee .5s}
.anim-tournee:not(.visible){display: none;}
.anim-tournee:not(.flex).visible{display: block}
.anim-tournee.flex.visible{display: flex}
*/

.anim-scroll{opacity: 0; transition: all .85s}
.anim-scroll.visible{opacity: 1}

.anim-scroll.anim-show{transform: scale(.95)}
.anim-scroll.anim-show-alt{transform: scale(.5)}
.anim-scroll.anim-from-bottom{transform: translateY(-50%)}
.anim-show.visible,.anim-show-alt.visible{transform: scale(1)}
.anim-from-bottom.visible{transform: translateY(0vw)}
.anim-tournee-left{transform: scaleX(0) translateX(-100%) translateY(-50%)}
.anim-tournee-right{transform: scaleX(0) translateX(50%) translateY(-50%)}
.anim-tournee-left.visible, .anim-tournee-right.visible{transform: scaleX(1) translateX(0) translateY(0)}


h2.border{
    border-left-width: 1.14vw;
    border-left-style: solid;
    border-right:0;
    border-top:0;
    border-bottom:0;
    padding: var(--10px) var(--20px);
    max-width: 30vw;
    font-size: 2.93vw;
}
@media(max-width:768px){
    h2.border{
        border-left-width: 6px;
        max-width: 100%;
        font-size: 18px;
    }
}

h2.border.border-success{border-left-color: var(--success-color)}
h2.border.border-success-alt{border-left-color: var(--success-color-alt)}
h2.border.border-warning{border-left-color: var(--warning-color)}
h2.border.border-error{border-left-color: var(--error-color)}
h2.border.border-green{border-left-color: var(--green-alt)}
h2.border.border-yellow{border-left-color: var(--yellow-alt)}
h2.border.border-red{border-left-color: var(--red-alt)}

.tag{border-radius: 3px;}
.gouv{position: relative}

.gouv::before{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - var(--btn-gouv-height));
    top: calc(var(--btn-gouv-height) / 2);
    left: 0px;
    border-radius: 6px;
    z-index: 0;
}

.gouv.old::before{height: 100%}

.gouv.row::before{
    height: 100%;
    top: var(--20px);
}

.gouv.half{width: calc(50% - var(--10px))}
.gouv.third{width: calc(33.33% - var(--10px))}

.gouv.ministry::before{background-color: var(--black-alt)}
.gouv.member::before{background-color: var(--gray-alt-2)}
.gouv.member.old::before{background-color: var(--gray-color-alt)}
.gouv.service::before{background-color: var(--black-alt)}
.gouv.article::before{background-color: var(--gray-color)}

.gouv-btn{
    height: var(--btn-gouv-height);
    line-height: calc(var(--btn-gouv-height) - 2px);
    border: 1px solid rgba(72,72,72,.5);
    color:  var(--black-color);
    background: #fff;
    font-size: var(--p-size-adapt);
}
.gouv-btn:hover{
    background: var(--black-color);
    color: #fff;
}

.article figure::before{
    width: auto;
    min-height: 20px;
    line-height: 20px;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}

body{
    position: relative;
    background: #fff;
}

.container{
    width: 100%
}
#header,
.content,
.titlebox,
.newsletter-box,
.footer,
.sharing-box,
.gouv-popup > div{padding: 0 var(--global-margin);}

#header{
    width: 100%;
    height: var(--header-height);
    background: rgba(255,255,255,1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    transition: all .5s;
}
@media(max-width:768px){
    #header{ background: transparent;}
    #header > div{background: #fff; padding: 0 var(--20px)}
}


#header.opaque{background: rgba(255,255,255,1);}

#header.opaque::before{
    content: "";
    position: absolute;
    background: #DDF0F4;
    height: 1px;
    width: 100vw;
    bottom: 0px;
    left: 0px;
}
@media(max-width:768px){
    #header .menu-box{
        position: fixed;
        left: 10px;
        top: -100%;
        background: var(--black-alt);
        z-index: 19;
        height: calc(100% - var(--header-height));
        transition: all .3s;
        z-index: -1;
        padding: 40px 20px 20px;
    }

    #header .menu-box.opened{top: var(--header-height)}
}

#header menu > li{
    flex: 1;
    font-size: var(--p-size-adapt);
    font-weight: 400;
    color: #484848;
    height: 100%;
    position: relative;
}
@media(max-width:768px){
    #header menu > li{height: auto; text-align: left; color: var(--blue-alt-2); padding-left: 20px; padding-right: 20px;}
    #header menu > li > a, #header menu > li > span{padding-top: 15px; padding-bottom: 15px}
}

#header menu > li::before{
    content: "";
    position: absolute;
    height: 1px;
    background: #dedede;
    left: 0px;
    width: 100%;
    bottom: 0;
    opacity: .35;
}

@media(min-width:768px){
    li > span.forcepadding{padding-left: 15px; padding-right: 15px;}
    #header menu > li::before{display: none;}
    #header menu > li > a, #header menu > li > span{padding: 15px;}
}

#header menu li:hover{
    background: var(--gray-color-alt);
    color: var(--blue-alt-2)
}

#header ul{
    width: 27.3vw;
    top: 100%;
    height: 0;
    background: var(--gray-color-alt);
    color: var(--blue-alt-2);
    overflow: hidden;
    position: absolute;
    text-align: left;
    border-radius: 0 0 6px 6px
}

#header menu li:last-child ul{
    right: 0;
}
@media(max-width:768px){
    #header ul{
        position: static;
        transition: all .5s;
        height: auto;
        max-height: 0px;
        background-color: rgba(255,255,255,.15);
        border-radius: 0;
        width: 100%
    }

    #header ul::after{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        top: 17px;
        right: 15px;
        border-top: 2px solid var(--blue-alt-2);
        border-right: 2px solid var(--blue-alt-2);
        transform: rotate(45deg);
        transition: all .3s;
    }
    #header li.opened ul::after{transform: rotate(135deg);}
}

#header li:hover ul{height: auto;}
@media(max-width:768px){#header li.opened ul{max-height: 1000px;}}

#header ul li a{
    padding: var(--10px) var(--20px);
    padding-left: calc(var(--20px) * 2);
    position: relative;
}

#header ul li a::before{
    position: absolute;
    top: 0px;
    left: var(--20px);
    display: inline-block;
    content: "";
    height: 100%;
    width: var(--20px);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAIlJREFUaN7t0TEWgjAUBVF0R8ja9NCR0s1CSzk2WhkKFEg+Z26ZhjefppEkSdImgAQ8S+/4Z/xHrAig51sqvWtNQAuMmYg4f8KIWgA3I2pgRC3OFDHtEXE9qOGy8D4f9P3fAd3C9YfS2xxfLcc73vGBxr8D7pnxqfSutRGPcJfPRAzhLi9JkhTYC1NPHephWxbFAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTEyLTExVDE5OjQxOjAzKzAwOjAwj073FQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMi0xMVQxOTo0MTowMyswMDowMP4TT6kAAAAodEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL3RtcC9tYWdpY2std3RLVGZtS0l9JGfMAAAAAElFTkSuQmCC);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
}
#header ul li a:hover{background-color: rgba(255,255,255,.15);}

#header #btn-search{background-image: var(--icon-search); cursor: pointer;}
#header #btn-menu{display: none; opacity: .4}
@media(max-width:768px){#header #btn-menu{display: block;}}

.banner{
    width: calc(100%);
    position: relative;
    margin-top: var(--header-height);
    padding: 0px;
    height: calc(27.29vw - var(--header-height));
    margin-bottom: calc(var(--banner-slider-title-height) / 2);
    min-height: 120px;
}
.banner.full{height: calc(100vh - var(--header-height)); min-height: 320px;}

@media(max-width:768px){
    .banner{margin-top: var(--header-height); margin-bottom: 0;}
    .banner.full{min-height: unset; height: 60vw; margin-bottom: calc((var(--banner-slider-title-height) / 4) * 3)}
    .banner .slide-container .titlebox{top: calc(100% - (var(--banner-slider-title-height) / 4));}
}

.banner.article{margin-bottom: 0;}

.blur{overflow: hidden;}
.blur img{filter: blur(4px);}

.titlebox{
    position: absolute;
    height: var(--banner-slider-title-height);
    bottom: calc(0px - (var(--banner-slider-title-height) / 2));
}
@media(max-width:768px){.banner:not(.full) .titlebox{height: calc(100% - 10px); bottom: 0;}}

.titlebox > div{
    width: 100%;
    overflow: hidden;
}

#homeSlider .dots-box{
    position: absolute;
    top: calc(-1 * (var(--slide-dot-size) + var(--10px)));
}

.slide-titles{
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.slide-titles > div{
    padding-left: var(--20px);
    padding-right: var(--20px);
}

.title{position: relative;}
.title:not(.reset)::after{
    content: "";
    display: block;
    height: 1.3vw;
    width: 8.4vw;
    margin-top: 1.6vw;
    background: var(--black-color);
    margin-left: auto;
    margin-right: auto;
    transition: all .5s;
}
.title.white::after{background: #fff}
@media(max-width:768px){.title::after{height: 6px}}
.title:hover::after{width: 100%;}
.content{padding-bottom: var(--20px);}
.previews div.articles{width: calc(67% - var(--10px));}
.previews div.articles + div{width: calc(33% - var(--10px));}

.article-pre{
    width: calc(50% - var(--10px));
    border-bottom: 1px solid rgba(221,221,221,1);
}

.article-pre > div:first-child{
    width: 100%;
    height: 16vw;
}
@media(max-width:768px){.article-pre > div:first-child{height: 50vw;}}

.cm-box > img{filter: blur(5px);}
.cm{padding: calc(var(--20px) * 2); background: rgba(72,72,72,.53)}
.cm p{margin: 1vw 0;}

.cta-law{min-height: 24vw;}
@media(max-width:768px){.cta-law{min-height: 60vw}}
.cta-law > div{background-color: rgba(108,121,108,.78);}

.event.row{min-height: 220px; height: 20vw;}
@media(max-width:768px){.event.row{height: auto}}
.event.row > figure{width: 40%;}
.event.row > figure + div{ width: 60%}
@media(max-width:768px){.event.row figure + div{height: auto}}
.event.col > figure{min-height: 200px;}
@media(max-width:768px){.event.row figure, .event.col figure{min-height:  unset; height: 50vw}}
.event.half{width: calc(50% - var(--10px))}
.event.third{width: calc(33.33% - var(--10px))}
.event i{font-size: 16px;}
.event .tag{font-size: 13px;}
@media(max-width:768px){.event.third{width: calc(50% - var(--10px))}}
@media(max-width:768px){.event.third{width: 100%}}

.cta{position: relative;}
.cta > *{position: relative; z-index: 1}
.cta h3 br{margin-bottom: 10px;}
.cta i{font-size: var(--h1-size);}

.newsletter-box input{width: calc(100% - 4.55vw);}
.newsletter-box input + button{width: 4.55vw; background-image: var(--icon-send);}
@media(max-width:768px){
    .newsletter-box input{height: 40px; line-height: 40px; width: calc(100% - 40px);}
    .newsletter-box input + input{width: 40px;}
}

.gouv.row figure + div{z-index: 1; width: 63%;}

.ministry, .service{min-height: 27vw;}
.ministry figure, .service figure{height: 13.67vw;}
@media(max-width:768px){.ministry figure, .service figure{height: 40vw;}}
.ministry.row, .service.row{min-height: calc((100vw - (var(--global-margin) *2) - var(--20px)) * .37);}
.ministry.row figure{height: calc((100vw - (var(--global-margin) *2) - var(--20px)) * .37); width: calc((100vw - (var(--global-margin) *2) - var(--20px)) * .37);}
@media(max-width:768px){.ministry.row, .service.row{min-height: unset; height: auto}}

.member{min-height: 27vw;}
.member.row{min-height: 21.45vw;}
.member figure{height: 21.45vw; width: 21.45vw;}
.member figure + div{ z-index: 1;}
.gouv.member.president.old {width: calc(21.45vw + (var(--20px) * 2));}
.gouv.member.president figure {width: 21.45vw; height: 30vw;}
.gouv.member.president figure + div{width: calc(100% - 21.45vw);}
.gouv.member.president.old figure + div{width: 100%;}
@media(max-width:768px){
    .member figure, .member.row figure{height: calc(100vw - (var(--20px) * 4));}
    .gouv.member.president figure{height: 130vw;}
    .gouv.member.president figure + div{text-align: center; padding-left: 0px;}
}

.gouv.article.row{min-height: 10vw}
.gouv.article.row figure{width: 30%; min-height: 10vw; position: relative}
.gouv.article.row figure + div{width: 70%;}
.gouv.article h2{border-bottom: 1px solid #ddd}
.gouv.article .sep{height: 7px; width: 7px;}
.gouv.article figure::before{
    content: attr(data-category);
    position: absolute;
    left: var(--10px);
    bottom: var(--10px);
    background: #fff;
    color: var(--black-color);
    z-index: 1;
    font-size: 13px;
}
@media(max-width:768px){.gouv.article figure {height: 45vw;}}

.gouv-popup{
    position: fixed;
    z-index: 10;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    transition: all .5s;
}
.gouv-popup.show{height: 100%;}

.gouv-popup > div{
    overflow: auto;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    overflow: auto;
    padding-top: var(--header-height);
    width: 100vw;
}
#search-box > div{background-color: rgba(72,72,72,.97);}
@media(max-width:768px){.gouv-popup > div{padding-left: 0px; padding-right: 0px;}}

.gouv-box{
    background: rgba(255,255,255,.94);
    height: auto;
}

.gouv-popup .close-box{position: relative; z-index: 12;}
@media(max-width:768px){
    .gouv-popup .close-box{
        position: absolute;
        right: var(--20px);
        top: 0px;
    }
}

.gouv-box .close{
    display: inline-block;
    background-image: var(--icon-close);
}

#article, #event{margin-top: -7.6vw;}
#article header div{border-top: 1px solid #DDDDDD;}

#event header{height: 33.20vw;}
#event header > div{background-color: rgba(88,100,112,.79);}
#event header div > span, #event header div > time{padding-left: calc(var(--20px) + 5px); line-height: 1}
#event header i{position: absolute; top: 0px; left: 0px; width: var(--20px); height: var(--20px); line-height: var(--20px)}
@media(max-width:768px){
    #event header > div{padding: var(--20px)}
    #event header p{position: static; top: unset; bottom: unset;}
}
#event .person{position: relative; vertical-align: middle; padding-left: 1vw;}
#event .person::before{
    content:"";
    position: absolute;
    top: calc((var(--p-size) / 2) + .25vw);
    left: 0px;
    display: inline-block;
    width: .5vw;
    height: .5vw;
    border-radius: 50%;
    background: var(--green-alt);
}
@media(max-width:768px){
    #event{margin-top: calc(-27.29vw);}
    #event .person{padding-left: 8px}
    #event .person::before{width: 6px; height: 6px}
}

#contact{width: 50vw;}
@media(max-width:768px){#contact{width: 100%;}}
#contact input[type='text'],
#contact input[type='tel'],
#contact input[type='email'],
#contact select,
#contact textarea{
    background: #efefef;
    border: 1px solid var(--green-alt);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
    padding: calc(var(--10px) + var(--5px)) var(--20px);
    font-size: var(--p-size-adapt);
    border-radius: 3px;
    width: 100%;
}
#contact textarea{height: 24vw; min-height: 180px;}
#contact label{display: block; margin-bottom: var(--10px)}

.search-box input[type='search']{width: calc(100% - 8.8vw); height: 5.86vw; line-height: 1;}
.search-box input + div{width: 8.8vw; height: 5.86vw;}
@media(max-width:768px){
    .search-box input[type='search'], .search-box input + div{height: 40px; width: calc(100% - 60px);}
    .search-box input + div{width: 60px;}
}

.mandates-container{width: calc(60vw + var(--20px) + var(--20px) + 2px)}
.mandates-container::after{
    content: "";
    height: calc(100% - (var(--mandate-height) * 2) - (var(--20px) * 2));
    width: 4px;
    left: calc(50% - 2px);
    top: var(--mandate-height);
    position: absolute;
    background: #fff;
    z-index: 0;
}
@media(max-width:768px){
    .mandates-container{width: 100%}
    .mandates-container::after{height: calc(100% - (var(--mandate-height) * 2) - 40px); width: 2px; left: calc(50% - 1px);}
}

.mandate-box{
    margin-bottom: calc(var(--mandate-height) + (var(--20px) * 2));
    width: 100%;
    left: 0%;
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 1s;
    transition: all 1s;
}
.mandate-box:first-child{background: var(--gray-alt-2);}
.mandate-box.visible{opacity: 1; left: 0%; transform: scaleX(1); z-index: 1}
.mandate-box::after{
    content: "";
    font-size: var(--h1-size);
    color: #fff;
    position: absolute;
    height: 2.44vw;
    width: 2.44vw;
    left: calc(50% - 1.22vw);
    bottom: calc(-2.44vw / 2);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    background-color: var(--green-alt);
    background-image: var(--plus-icon);
    background-size: 2.44vw;
    background-repeat: no-repeat;
}
@media(max-width:768px){
    .mandate-box{margin-bottom: calc(var(--mandate-height) + 40px);}
    .mandate-box::after{height: 15px; width: 15px; left: calc(50% - 7.5px); bottom: -7.5px; background-size: 15px}
}

.mandate{
    min-height: var(--mandate-height);
    overflow: hidden;
    border-radius: 6px 6px 6px 0;
}
.mandate.right{border-radius: 6px 6px 0 6px;}
.crop.right::before{
    left: unset;
    right: calc((2vw * -2) - (2vw / 5));
/*
    bottom: 0px;
*/
}
.crop::before{
    content: "";
    position: absolute;
    height: calc(2vw * 3);
    width: calc(2vw * 3);
    left: calc((2vw * -2) - (2vw / 5));
    bottom: calc((2vw * -2) + (2vw / 3));
    background: var(--gray-alt-2);
    border-radius: 50%;
    z-index: 1;
    top: unset;
}
.mandate.visible::before{ border-radius: 50%;}
.mandate > div{padding: calc(var(--20px) + var(--5px)); width: var(--mandate-width); z-index: 1}
@media(max-width:768px){
    .crop::before{width: 30px; height: 30px; left: -20px; bottom: -12.5px;}
    .right.crop::before{left: unset; right: -20px;}
}

.mandate i, .gov i{
    height: 4px;
    width: 30px;
    background: #fff;
    opacity: .34;
    margin-bottom: 12px;
}
.mandate i::after, .gov i::after{
    content: "";
    position: absolute;
    right: 2px;
    top: -10px;
    width: 20px;
    height: 20px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    transform: rotate(45deg);
}
@media(max-width:768px){
    .mandate i, .gov i{height: 2px; width: 20px;}
    .mandate i::after, .gov i::after{border-width: 2px; right: 1px; top: -7.5px; width: 15px; height: 15px;}
}

.mandate-details{top: 100%; height: var(--mandate-height);transform: scale(0,0);}
.mandate-details.visible{transform: scale(1,1);}
@media(max-width:768px){.mandate-details{margin-top: 15px;}}

.governments{left: 100%;}
.governments.active{left: 0%;}
.governments.to-left{left: -100%;}

.gov{height: 15.33vw; line-height: 1;}
.gov label{font-size: 4.5vw;opacity: .27;}
@media(max-width:768px){.gov label{font-size: 26px;}}

article .flickr-frame{
    width: 100%;
    height: 40vw;
}

article .youtube-frame{
    width: 100%;
    height: 40vw;
}
.article-pdf-icon{
    height: 7.2vw;
}
@media(max-width:768px){.article-pdf-icon{height: 45px;}}

.project > a{height: 22vw;}
.project .resume{background: rgba(0,0,0,.5);}
.project h2{font-size: 2.58vw;}
.project .firstcolor{background: rgba(96, 70, 111, 0.6)}
.project .secondcolor{background: rgba(231, 63, 26, 0.6)}
.project .thirdcolor{background: rgba(222, 146, 0, 0.6)}
.project .quartcolor{background: rgba(13, 110, 119, 0.6)}

@media(max-width:768px){
/*
	.project{bottom-}
*/
	.project > a{height: auto;}
	.project h2{font-size: 18px;}
	.project h2 + h3{font-size: 14px; font-weight: semibold}
}

.project .progress i{
	height: .73vw;
	width: 0%;
	transition: all 2.5s;
}
@media(max-width:768px){
	.project .progress{border-radius: 5px;}
	.project .progress i{height: 10px; border-radius: 5px;}
}

.project .btn-box{bottom: var(--10px);}
.project .btn-box.only-mobile{display: hide}
.project span{
	transform: rotate(135deg);
	cursor: pointer;
	border-top: 2px solid var(--gray-color);
	border-right: 2px solid var(--gray-color);
	height: var(--10px);
	width: var(--10px);
}
@media(max-width:768px){
	.project .btn-box.only-mobile{display: block}
	.project span{border-color: var(--black-color)}
}

.project > div{
	margin-top: calc(-1 * var(--5px));
	max-height: 0px;
}

.project.visible > div{max-height: 2000px;}




#source,#badges_source,#badge{
    display: none;
}


.badge{
    width: 400px;
    height: 400px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vw - 40px);
    background-size: cover;
    border: 1px solid #EDEDED;
}

.badge span{
    z-index: 10;
}

.badge.loading::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,.45) url('images/ball.html') center center no-repeat;
    z-index: 11;
}

.badge-form{
    width: 400px;
    height: 400px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vw - 40px);
    margin-top: 10px;
}

.badge-form .btn{
    max-width: calc(100vw - 60px);
    width: 310px;
    margin: 5px auto;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
}

#download, #generate{
    display: none;
}

article p > a{
    background: var(--blue-alt);
    color: #fff;
    border-radius: var(--5px);
    padding-left: var(--5px);
    padding-right: var(--5px);
    display: inline-block;
}
article p > a:hover{text-decoration: underline;}

#covid19, .banner.covid19 .titlebox{padding: 0 calc(var(--20px) * 2); bottom:0;}
.banner.covid19{margin-bottom: 0;}
@media(max-width:768px){#covid19, .banner.covid19 .titlebox{padding: 0 20px}}
.covid19-subbanner figure::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: var(--black-color);
    opacity: .73;
}

#covid19 nav, #covid19 nav + div{position: relative; width: 23vw; min-width: 23vw }
#covid19 nav.fixed{position: fixed; top: calc(var(--header-height) + 20px); left: calc(2 *  var(--20px))}
#covid19 nav.bottom{position: absolute; top: unset; bottom: 0; left: 0}

#covid19 li{background: rgba(0,0,0,0);}
#covid19 li:hover{background: rgba(0,0,0,0.08);}
#covid19 li.active{background: rgba(0,0,0,0.12);}

.covid19-article figure{height: 15vw;}

.covid19-yt{height: 15vw;}
.covid19-yt .transparent{background: rgba(0,0,0,.75);}

.covid19-img > div{background: rgba(0,0,0,.75); opacity: 0}
.covid19-img:hover > div{opacity: 1;}

.covid19-visuel{
    height: 30vw;
    min-height: 200px;
}
@media(max-width:768px){
.covid19-visuel{min-height: 350px;}
}

.covid19-doc .pdf{
    width: 5vw;
    min-width: 32px;
    background-image: url('icons/pdf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.covid19-slides.slides{height: 7vw; min-height: 120px;}
@media(max-width:768px){.covid19-slides.slides{height: 6vw; min-height: 150px;}}
.covid19-dot{height: 1.5vw; width: 1.5vw; border-radius: 50%; background: var(--gray-color)}

@media(max-width:768px){.covid19-stat h2.h1{font-size: 28px;}}

.covid19-tabs{margin-bottom: -5px; z-index: 2}
.covid19.os-tab-head, .covid19.tab-plus{
    width: 3vw;
    height: 3vw;
    line-height: 3vw;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}
@media(max-width:768px){
.covid19.os-tab-head, .covid19.tab-plus{
    width: 32px;
    height: 32px;
    line-height: 32px;
}
}
.covid19.os-tab-head.active{
    background: #fff;
    color: var(--blue-alt);
}

.banner.covid19.covid19-projects-banner{min-height: 300px}
@media(max-width:768px){
.banner.covid19.covid19-donations-banner{min-height: 180px}
}
.banner.covid19 .titlebox.covid19projects{padding: 0 calc(var(--global-margin)); bottom:0;}
.banner.covid19 .titlebox.covid19projects > div{overflow: visible;}
.covid19-project{
    border-radius: 2px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
}
.covid19-project figure{height: 17vw;}
.covid19-project.large figure{height: 23vw;}
.covid19-project header{background: rgba(0,0,0,.283)}
.covid19-project h3{line-height: 1}
.covid19-project .thumb{height: 4vw; min-width: 4vw; border-radius: 3px}
.covid19-project .thumb.large{height: 6vw; min-width: 6vw;}
.covid19-project .type{font-size: 1vw;}

@media(max-width:768px){
.covid19-project figure{height: 140px;}
.covid19-project .thumb{height: 40px; min-width: 40px}
}

.covid19form .sub{
    background: #fafafa;
}
.covid19form label{
    margin-left: var(--5px);
    font-size: var(--p-size-adapt);
    width: 100%;
}
.covid19form label i{
    height: 24px;
    width: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    color: #fff;
    background: var(--blue-alt);
    cursor: pointer;
}
.covid19form label p{
    border-radius: 2px;
    padding: 0vw var(--10px);
    background: rgba(0,0,0,.82);
    position: absolute;
    bottom: 100%;
    right: 0px;
    color: #fff;
    font-weight: 200;
    transition: all .175s;
    max-height: 0px;
    overflow: hidden;
}
.covid19form label p.opened{
    max-height: 1000px;
    padding: var(--10px);
}

.covid19form input[type="text"],
.covid19form input[type="email"],
.covid19form input[type="tel"],
.covid19form input[type="number"],
.covid19form input[type="date"],
.covid19form textarea,
.covid19form select
{
    border: 0;
    border-radius: .25vw;
    height: 3.5vw;
    display: block;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
    width: 100%;
    margin-top: var(--5px);
    padding-left: var(--20px);
    padding-right: var(--20px);
    font-size: var(--p-size-adapt);
    min-height: 40px;
    background: #fff;
}

.covid19form select.nopadding
{
    padding-left: var(--5px);
    padding-right: var(--5px);
}

.covid19form textarea
{
    min-height: 120px;
    height: 15vw;
    padding-top: var(--20px);
    padding-bottom: var(--20px);
}

.covid19form .select{
    position: relative;
}

.covid19form .select i{
    position: absolute;
    right: 7px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    display : inline-block;
    height : 0;
    width : 0;
    border-top : 12px solid var(--black-color);
    border-right : 9px solid transparent;
    border-left : 9px solid transparent;
    cursor: pointer;
}

.covid19form .select div{
    position: absolute;
    top: 100%;
    width: auto;
    min-width: 100%;
    right: 0;
    max-height: 0px;
    background: #fff;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
    overflow: hidden;
    transition: all .25s;
    text-align: left;
}

.covid19form .select div.opened{
    max-height: 5000px;
}

.covid19form .select div ul{
    list-style-type: none;
    padding: var(--10px) 0;
}

.covid19form .select div li{
    padding: var(--5px) var(--10px);
    font-size: var(--p-size-adapt);
    border-bottom: 1px solid var(--gray-color);
    cursor: pointer;
}

.covid19qrbox, .covid19qr{
    max-height: 0;
    transition: all 0.25s;
    overflow: hidden;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0), 0 2px 2px 0 rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,0);
}
.covid19qr.opened, .covid19qrbox.opened{max-height: 5000px;}
.covid19qrbox.opened{box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);}


.record-box{border-radius: 5px;	padding: 20px 20px 0px 20px;}
.record-box:not(.noshadow){box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084)}
.record tr:not(:last-child) > *{border-bottom: 1px solid #ccc;}
.record tr > *{padding: 15px;}
.record th{width: 300px;}
.record td{font-weight: 300;}

@media(max-width:768px){
.record-box{padding: 10px 10px 0px 10px;}
.record tr > *{padding: 10px;}
.record th{width: 100%;}
}

.covid19-dons{
    border: 0;
    border-collapse: separate;
    border-spacing: 0px 15px;
}

.covid19-dons tbody tr:not(.noshadow) {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
    background: #fff;
    transition: all .15s;
    cursor: pointer
}

.covid19-dons tr input[type="search"]{box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);}

.covid19-dons tbody tr:hover:not(.noshadow) {
    background: #fafafa;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.24), 0 2px 2px 0 rgba(0,0,0,.198), 0 1px 5px 0 rgba(0,0,0,.184);
}
.covid19-dons tr > *{padding: 10px 15px;}
.covid19-dons tbody tr td.lighted{border-bottom: 2px solid var(--blue-alt);}

@media(max-width:768px){.covid19-dons tr > *{padding: 8px 10px;}}

.covid19-don.os-tab-head{
    height: auto;
    border-radius: var(--5px) var(--5px) 0 0;
    background: var(--blue-alt);
    color: #fff;
    transform: translateY(5px);
    transition: all .15s;
}
.covid19-don.os-tab-head.active{
    transform: translateY(0px);
    background: var(--white-color);
    color: var(--black-color-alt);
}

.covid19-social-btn:first-child a{border-top: 1px solid var(--black-color);}
.covid19-social-btn a{border-bottom: 1px solid var(--black-color);}
.covid19-social-btn a:hover{
    background: var(--gray-color);
}