/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Damien Drouat (damiendrouat@me.com)
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */

html, body {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

a, a:hover{
    text-decoration: none;
}

/*navbar*/
.navbar .navbar-nav .nav-link {
    position: relative;
}
.navbar .navbar-nav .nav-link::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: black;
    color: transparent;
    width: 0%;
    content: '';
    /*height: 3px;*/
    transition: all .2s;
}
.navbar .navbar-nav .nav-link:hover::after {
    width: 100%;
}
.dropdown-toggle::after{
    border-right: 0px;
    border-left: 0px;
    border-top: 0.2em solid;
}
.nav-link{
    color: #000 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}
.nav-link:hover{
    color: #000;
}
.bi-chevron-down{
    margin-left: 7px;
    font-weight: 700;
}
.navbar{
    border-top: lightgray 1px solid;
    border-bottom: lightgray 3px solid;
    background-color: #ffffff;
}
.dropdown-menu{
    border-radius: 0px;
    box-shadow: 1px 1px 4px rgb(0 0 0/15%);
    font-size: 11px;
    margin-top: 8px;
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: transparent;
}

.dropdown-menu li:focus, .dropdown-menu li:hover {
    background-color: lightgrey;
}

.dropdown-menu li{
    padding-top: 5px;
    padding-bottom: 5px;
}

.dropdown-menu {
    /*margin-top:0;*/
    margin-bottom:0;
    padding-bottom:0;
    padding-top:0;
}

/**
PICTO Social network
 */
.linkedin-logo, .twitter-logo{
    background-color: #FD219E;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    padding: 13px;
    -webkit-font-smoothing: antialiased;
    border: none;
}
.linkedin-logo path, .twitter-logo path{
    fill: #f6f6f6;
}
.linkedin-link a, .twitter-link a{
    color: #ffffff;
    text-decoration: none;
}

.linkedin_footer, .twitter_footer{
    height: 40px;
    width: 40px;
    padding:9px;
    margin-top:30px;
    margin-right:20px;
}


/*footer*/
.footer_top{
    background-color: #181651;
}
.footer_bottom{
    background-color: #060419;
}
.copyright_txt{
    margin-top: 10px;
}

.logo_parite_footer img{
    padding-top: 15px;
    padding-bottom: 15px;
}



/**
BANNER
 */

.banner_creation{
    width: 100%;
}

.banner_creation img{
    width: 80%;
}

.banner-style{
    background-color: #191758;
}

.border_left{
    border-left: #f9209d solid 4px;
}
.title_assoc{
    transform: translate(0px, 40px);
    font-size: 29px;
}
.title_parite h2{
    font-size: 42px;
}
.title_parite{
    margin-top: 15%;
}
.social_link{
    font-size: 23px;
    letter-spacing: .2rem;
    margin-left: 5%;
}


/**
Main Soutien
 */

.up-carousel p{
    font-size: 1.8rem;
    letter-spacing: 3px;
    font-weight: 400;
    color: #191550;
    margin-top: 2rem;
    margin-bottom: 1.3rem;
}

.soutiensection{
    background-color: #f6f6f6;
}

.listsoutien{
    padding-bottom: 15px;
}

.listsoutien .col > img{
    padding:20px 35px 35px 20px;
}


/**
Main Actualités
 */

.listActualites{
    padding-right: 40px;
}

.actualites img{
    filter:brightness(.95);
    -moz-filter:brightness(.95);
    -webkit-filter:brightness(.95);
    -o-filter:brightness(.95);
}
.actualites img:hover, .actualites:hover img{
    cursor: pointer;
    filter:brightness(1);
    -moz-filter:brightness(1);
    -webkit-filter:brightness(1);
    -o-filter:brightness(1);
}
.actualites{
    transition: .2s;
}
.actus-button{
    padding-right: 6%;
    padding-left: 6%;
    padding-top: 2%;
    padding-bottom: 2%;
    border: #FD219E solid 1px;
    background-color: transparent;
    color: #1a1a56;
    transition: .3s;
}
.actus-button:hover{
    background-color: #FD219E;
    color: white;
}

.title_actualites h2{
    letter-spacing: 3px;
    color:#18195A;
}


.actualites h5{
    color: #000048;
    font-weight: normal;
}
.actualites h6{
    color:#f9209d;

}

.description_parite p {
    text-align: justify !important;
}


@media all and (min-width: 1024px) and (max-width: 1280px) {
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    .logo_parite_footer, .copyright_txt{
        text-align: center;
    }

    .footer_top{
        padding-bottom: 20px;
    }
    .desc_logo_container{
        text-align: center;
    }
    .listActualites{
        padding-right: 20px;
    }


    .listsoutien img{
        width: 250px;
    }
    .listsoutien .col > img{
        padding:0 0 25px 0;
    }
    .banner_creation img {
        width: 100%;
        text-align: center;
        margin-left: 2%;
    }
}

@media all and (min-width: 480px) and (max-width: 768px) {
    .logo_parite_footer, .copyright_txt{
        text-align: center;
    }

    .footer_top{
        padding-bottom: 20px;
    }
    .listActualites{
        padding-right: initial;
    }
    .title_actualites h2{
        text-align: center;
    }
    .desc_logo_container{
        text-align: center;
    }
    .nav-link{
        padding-top: 20px;
        padding-bottom: 0;
    }
    .description_parite{
        padding-bottom: 30px;
    }
    .listsoutien img{
        width: 250px;
    }
    .listsoutien .col > img{
        padding:0 0 25px 0;
    }
    .banner_creation img {
        width: 100%;
        text-align: center;
        margin-left: 2%;
    }

}

@media all and (max-width: 480px) {
    .logo_parite_footer, .copyright_txt{
        text-align: center;
    }

    .footer_top{
        padding-bottom: 20px;
    }

    .listActualites{
        padding-right: initial;
    }
    .title_actualites h2{
        text-align: center;
    }

    .nav-link{
        padding-top: 2%;
        padding-bottom: 0;
    }

    .description_parite{
        padding-bottom: 30px;
    }
    .listsoutien img{
        width: 250px;
    }
    .listsoutien .col > img{
        padding:0 0 25px 0;
    }
    .banner_creation img {
        width: 100%;
        text-align: center;
        margin-left: 2%;
    }
}


/* Portrait */
@media screen and (orientation: portrait) {
    /* Portrait styles here */
}

/* Landscape */
@media screen and (orientation: landscape) {
    /* Landscape styles here */
}


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
}

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation: landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation: portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation: landscape) {
}