.icon-item{
    clear: left;
    float: left;
    width: 5%;
    /*margin-top: -5px;*/
    margin-right: 20px;
    font-size: 24px;
    font-family: fontello;
}

.title-item{
    float: left;
    width: 75%;
}

.icon-open{
    cursor: pointer;
    float: right;
    width: 5%;
    /*margin-top: -5px;*/
    margin-right: 10px;
    font-size: 24px;
    font-family: fontello;
}


.btlink {
    width: 200px;     /*width: 30%;*/
    margin: 25px auto;
    padding: 12px 0;
    border-radius: 30px;
    background-color: #5a6eb4;
    color: white;
    text-align: center;
}

.btlink a{   
    font-family:firasans; 
    font-size: 16px;
    font-weight:bold; 
    color: white;
    text-decoration: none;
}

.btlink .icon-arrow{
    float: right;
    margin-top: -5px;
    margin-right: 10%;
    font-size: 24px;
    font-family: fontello;
}
.btlink:hover .icon-arrow{
    margin-right: 5%;
    transition: 100ms;
}




/* VERTICAL MENU (COLLAPSE) */
/* ************************ */
.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
}

.zone-dossier-pays{
    display: inline-block;
    padding: 3%;
    background-color: white;
    box-shadow: 6px 6px 6px #d6d6d6;
}

#sidebar { 
    float:left;
    width: 30%;                 /*MODPAT*/
    /*min-width: 250px;*/       /*MODPAT*/
    /*max-width: 250px*/        /*MODPAT*/
    /*background: #7386D5;*/    /*MODPAT*/
    color: #000;                /*MODPAT*/
    font-family: firasans;      /*MODPAT*/
    font-weight: bold;          /*MODPAT*/
}


#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;

    border-bottom: gray solid 1px;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #5569af;             /*color: #fff;*/
    background: #f5f5fa;        /*background: #6d7fcc;*/ 
}   



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    float:right;
    width: 70%;
    /*padding: 20px;*/
    /*min-height: 100vh;*/

    transition: all 0.3s;
}

#content article{
    display: none;
}
.show{
    display: block;
    animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

article .head-section{
    display:none;
}

article .desc {
    margin: 1% 10%;
    font-weight: 400;
}
article .desc img{
    width: 60%;
    margin: 2% 20%;
}




/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        /*display:none;*/
        max-height: 0;      /*height: 0;*/
        width: 80%;       
        margin: 0 10%;
        overflow: hidden;
        transition: max-height .6s ease-in;
        /*transition: height 1s ease;*/
        /*transform: scaleY(0);*/
        /*transition:transform 1s ease;*/
    }
    
    #content {
        width: 100%;
    }
    article .head-section{
        display:inline-block;
        width: 100%;
        margin: 0;
        padding: 10px 20px;
        background: #f5f5fa;
        font-family: firasans;
        font-size: 20px;
        font-weight: bold;
        color: #5569af;
        border-radius: 30px;
        text-align: center;
        overflow: hidden;
        transition: all .6s ease-in;
    }

    article .head-section .title-item{
        font-size:16px;
    }
}