/*
    Author: Johan HAUDIQUET
    Version: 1.0
*/
 

/*============================
    TABLE DES MATIERES
==============================
 :: DESIGN 2IOPENSERVICE
     - Général
     - Barre réseau
     - Menu
     - Prochains évènements
     - Partenaires
     - Pied de page
     - Modals en général
     - Modal de connexion
     - Modal CMF
     - Modal Opentalent
     - Blog
     - Contact
 :: CORRECTIFS
     - Menu
     - Pied de page
============================*/


/*============================
    DESIGN 2IOPENSERVICE
==============================
    Charte spécifique
    au réseau Opentalent
============================*/

    /*------------------------
        Général
    ------------------------*/

    a {
        font-weight: bold;
    }
    select {
        padding: 0 !important;
    }
    .button.black:hover, .button.black.active, .button.black:focus {
        background: #555555;
        background-color: #555555;
        border-color: #555555;
    }
    .page-section-ptb {
        padding: 40px 0;
    }
    .page-title-name p {
        color: #FFFFFF !important;
        padding: 0 !important;
        margin: 0 !important;
        font-weight: bold;
        line-height: 2.5em;
    }
    .no-border {
        border: none !important;
    }
    .table thead {
        background-color: #666666;
        color: #FFFFFF;
    }

    .login-errormsg {
        text-align: center;
        color: #cc0000;
        font-weight: 600;
    }

    /*------------------------
        Barre réseau
    ------------------------*/

    .topbar {
        background-color: #FFFFFF;
        padding: 8px 0;
    }

    .topbar ul li,
    .topbar ul li p,
    .topbar ul li i,
    .topbar ul li a {
        color: #888888;
    }

    .topbar img {
        max-height: 20px;
    }

    .topbar-call ul li a {
        margin: 0;
    }

    .topbar-call img {
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }

    .topbar-call img:hover {
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }

    .reseau-opentalent img {
        margin-top: 3px;
    }

    .reseau img {
        margin-top: -4px;
    }

    #notice-cmf {
        display: none;
    }



    /*------------------------
        Menu
    ------------------------*/

    #logo_cmf {
        display: none;
    }
    .mega-menu .menu-links > li > a:hover,
    .hoverTrigger > a,
    .mega-menu .menu-links > li.active > a {
        color: #FFFFFF !important;
    }
    @media(max-width:991px) {
        .mega-menu .menu-links > li > a:hover,
        .hoverTrigger > a,
        .mega-menu .menu-links > li.active > a {
            color: #323232 !important;
        }
    }
    .active > a {
        font-weight: bold !important;
    }
    .hoverTrigger > ul > .hoverTrigger > a {
        color: #323232 !important;
    }

    .mega-menu .drop-down-multilevel {
        border: solid 1px rgba(75, 75, 75, .2);
        box-shadow: 4px 4px 2px 1px rgba(75, 75, 75, .2);
    }

    /* **** Fix mega menu issues ***** */

    /* Fix bug with long menus */
    .mega-menu .menu-bar {
        width: 90%;
    }

    .mega-menu > section.menu-list-items .menu-bar {
        min-height: 90px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .mega-menu .menu-bar a {
        text-align: center;
    }

    .mega-menu > section.menu-list-items .menu-bar > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    @media(min-width:991px) {
        .mega-menu > section.menu-list-items .menu-bar > ul {
            display: flex !important;
        }
    }

    .mega-menu > section.menu-list-items .menu-bar > ul > li {
        position: relative;
        min-height: 45px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mega-menu .drop-down-multilevel {
        width: auto;
        min-width: 240px;
    }

    .menu-list-items {
        height: auto !important;
        min-height: 90px;
    }

    /* Prevent hidden submenus to overflow from the screen */
    body {
        overflow-x: hidden;
    }
    /* Force 1st-level dropdown to align
    on the left if they are too close to the
    screen right edge */
    .mega-menu .dropdown-align-left {
        right: 0 !important;
    }
    /* Force 2nd-level dropdown to be displayed
    on the left if they are too close to the
    screen right edge */
    .mega-menu .dropdown-left {
        top: 0 !important;
        right: 100% !important;
        left: auto !important;
    }

    /*------------------------
        Prochains évènements
    ------------------------*/

    .events .card img {
        border: 1px solid;
        width: 100%;
    }

    .more-events {
        text-align: center;
    }

    .more-events .fa {
        padding: 0.5em 0;
    }

    .more-events h3 {
        padding-bottom: 1em;
    }

    .cmf-events img {
        width: 90px !important;
        margin: 1.5em;
        border: 0px !important;
    }

    /*------------------------
        Partenaires
    ------------------------*/

    .partners-list img {
        max-height: 80px;
    }

    /*------------------------
        Pied de page
    ------------------------*/

    .footer .footer-text p {
        color: #FFFFFF !important;
    }
    .footer .footer-text a {
        color: #FFFFFF !important;
    }
    .footer .footer-social ul li a:hover {
        color: #FFFFFF !important;
    }
    .footer .copyright {
        padding: 30px 0 10px !important;
    }

    /*------------------------
        Modals en général
    ------------------------*/

    .modal-footer {
        justify-content: center;
    }

    .modal-footer-network {
        padding: 0;
    }

    .modal-footer-network img {
        margin: 0 1em;
    }

    /*------------------------
        Modal de connexion
    ------------------------*/

    .loginModal{
        max-width: 450px;
    }

    .loginModal-title p {
        width: 100%;
        padding: 0 0 0.5em 0;
        text-align: center;
        font-size: 2.5em;
    }

    .loginModal-content {
        padding: 3em 2em 0 2em;
    }

    .login-form {
        padding-bottom: 0 !important;
    }

    .login-footer {
        padding: 1em 0;
    }

    .login-footer img {
        padding: 0 2em;
    }

    /*------------------------
        Modal CMF
    ------------------------*/

    .cmfModal-title p {
        width: 100%;
        padding: 0 1em 1em 1em;
        text-align: center;
    }

    .cmfModal-content {
        padding: 3em 2em 0 2em;
    }

    .cmfModal-content p {
        font-weight: bold;
    }

    .cmf-bg {
        /*background-color: #c50538;*/
    }

    /*------------------------
        Modal Opentalent
    ------------------------*/

    .opentalentModal-title p {
        width: 100%;
        padding: 0 1em 1em 1em;
        text-align: center;
    }

    .opentalentModal-content {
        padding: 3em 2em 0 2em;
    }

    .opentalentModal-content p,
    .opentalentModal-content ul li {
        font-weight: bold;
    }

    .opentalent-bg {
        background-color: #323232;    }


    /*------------------------
        Blog
    ------------------------*/

    .blog-entry .entry-image img {
        padding: 2em 2em 0 2em;
    }
    .blog-share i {
        padding: 0 0.4em;
    }


    /*------------------------
        Contact
    ------------------------*/

    .contact-form .section-field {
        width: 100%;
    }


/*============================
    CORRECTIFS
==============================
    Permet de résoudre des
    problèmes d'affichage
============================*/

    /*------------------------
        Menu
    ------------------------*/

    .default {
    /*  Corrige le menu pour qu'il ne masque plus le haut du slider
        sur les écrans dont la résolution est supérieure à 992px. */
        position: relative !important;
    }

    .mega-menu .drop-down-multilevel a {
    /*  Annule l'auto-capitalisation définie par le template d'origine. */
        text-transform: initial !important;
    }

    /*------------------------
        Pied de page
    ------------------------*/

    .footer .footer-text p {
    /*  Retire la marge originale qui permettait d'avoir un footer
        sur deux lignes au lieu d'une seule. */
        padding-top: 0 !important;
    }


/*============================
Slick carousels
============================*/
    /* centered */
    .carousel {
       margin: 0 auto;
    }

    .carousel-img {
        height: auto;
    }

    .slick-track {
        overflow: hidden;
    }

    .slick-slide img {
        max-width: initial;
    }

    /*Default CSS, in case slick is not loaded or activated*/
    .carousel div:not(.slick-slide) > div > div > .carousel-img {
           width: 100%;
           display: none;
       }

    .carousel div:not(.slick-slide):first-child > div > div > .carousel-img {
        display: inline;
    }

    /* vertically center*/
    .slick-slide div {
       background-color: #f2f2f2;
       display: flex !important;
       align-items:center;
    }

    /*arrows color*/
    .slick-prev:before, .slick-next:before {
       color: #2b2b2b;
    }

    /* Special: Carousel content preview on backend*/
    .be-carousel-preview {
       word-wrap: break-word;
    }

    .be-carousel-img-preview {
        margin-right: 4px;
        margin-bottom: 4px;
    }

/*============================
Members and Ca Members pages
============================*/



/*============================
Next events (homepage)
============================*/

.events .card-container {
    margin-bottom: 24px;
}

/*============================
Events pages
============================*/

/* All events page from ot_widget*/
.ot-all-events {
   display: flex;
   flex-direction: row;
}

.ot-all-events .events-controls {
    order: 1;
    flex: 1;
}

.ot-all-events .events-results {
    order: 0;
    flex: 1;
}

.ot-all-events .events-controls, .events-results {
    display: flex;
    flex-direction: column;
    margin: 0 1.5em;
}

.ot-all-events .event-search {
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}

.ot-all-events h3 {
    font-size: 1.2em;
    font-weight: bold;
}

.ot-all-events .event-search form {
    display: flex;
    flex-direction: column;
}

.ot-all-events .event-search form input,
.ot-all-events .event-search form button {
    margin-bottom: 1em;
    line-height: 1.4em;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
}

.ot-all-events .event-search form button {
    border: solid 2px #cccccc;
}

.ot-all-events .event-search form button:hover {
    background-color: #d8edf3;
    cursor: pointer;
}

.ot-all-events #event-map {
    height: 400px;
    width: 100%;
    align-self: flex-end;
}

.ot-all-events .event {
    display: flex;
    flex-direction: column;
    border-bottom: solid 2px #cccccc;
    border-radius: 4px;
    padding: 1em;
    justify-content: space-around;
}

.ot-all-events .event-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ot-all-events .event-preview .event-poster {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ot-all-events .event-preview .event-poster img {
    width: auto;
    max-width: 100%;
    min-width: 40%;
    height: auto;
    margin-right: 4em;
}

.ot-all-events .event-preview .event-summary {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.ot-all-events .event-preview .event-summary > span {
    margin-bottom: 0.5em;
}

.ot-all-events .event-preview .event-name {
    font-size: 1.4em;
    color: #333333;
    font-weight: bold;
}

.ot-all-events .event-preview .event-loc-date {
    font-size: 1.1em;
    color: #4d4d4d;
    font-weight: bold;
}

.ot-all-events .event-preview .event-description {
    color: #4d4d4d;
}

.ot-all-events .event-see {
    align-self: stretch;
    padding: 0.4em 0.8em;
    font-size: 1.1em;
    margin-top: 0.4em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ot-all-events .event-see:hover {
    text-decoration: none;
    font-weight: bold;
}

/*============================
Event's details pages
============================*/

.ot-show-event {
    display: flex;
    flex-direction: column;
}

.ot-show-event header {
    display: flex;
    flex-direction: row;
    padding: 0.5em;
    margin-bottom: 2em;
    align-items: center;
}

.ot-show-event .event-name {
    font-size: 1.8em;
    font-weight: bold;
    flex: 1;
}

.ot-show-event .go-back {
    font-weight: bold;
    padding: 0.5em 0.7em;
    border: solid 2px #cccccc;
    border-radius: 6px;
    margin: auto;
}

.ot-show-event .go-back:hover {
    background-color: #d8edf3;
    text-decoration: none;
}

.ot-show-event .event-content {
    display: flex;
    flex-direction: row;
    margin-bottom: 2em;
}

.ot-show-event .event-content .event-poster {
    flex: 1;
}

.ot-show-event .event-poster img {
    width: auto;
    max-width: 100%;
    min-width: 40%;
    height: auto;
}

.ot-show-event .event-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ot-show-event .event-description {
    margin-bottom: 1em;
    padding: 1em 0.5em;
}

.ot-show-event .event-infos {
    border: 1px solid #cccccc;
    width: 94%;
    margin: 0 3%;
    padding-top: 1em;
}

.ot-show-event .event-infos tr {
    background-color: #e6e6e6;
}

.ot-show-event .event-infos tr:nth-child(odd) {
    background-color: #ffffff;
}

.ot-show-event .event-content .event-infos td {
    padding: 0.8em 1.6em;
}

.ot-show-event .event-content .event-infos tr td:first-child {
    font-weight: bold;
    color: #2E2D2D;
}

.ot-show-event #event-map {
    height: 400px;
    width: 100%;
    align-self: center;
}

/*============================
Events preview
============================*/


/*============================
Structures page
============================*/

.ot-structures {
    display: flex;
    flex-direction: row;
}

.ot-structures .structure-controls {
    order: 1;
    flex: 1;
}

.ot-structures .structure-results {
    order: 0;
    flex: 1;
}

.ot-structures .structure-controls, .structure-results {
    display: flex;
    flex-direction: column;
    margin: 0 1.5em;
}

.ot-structures .structure-search {
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}

.ot-structures h3 {
    font-size: 1.2em;
    font-weight: bold;
}

.ot-structures .structure-search form {
    display: flex;
    flex-direction: column;
}

.ot-structures .structure-search form input, button {
    margin-bottom: 1em;
    line-height: 1.4em;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
}

.ot-structures .structure-search form button {
    border: solid 2px #cccccc;
    color: #333333;
}

.ot-structures .structure-search form button:hover {
    background-color: #d8edf3;
    cursor: pointer;
}

.ot-structures #structure-map {
    height: 400px;
    width: 100%;
    align-self: flex-end;
}

.ot-structures .structure {
    display: flex;
    flex-direction: column;
    border-bottom: solid 2px #cccccc;
    border-radius: 4px;
    height: 200px;
    padding: 1em;
    justify-content: space-around;
}

.ot-structures .structure-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ot-structures .structure-preview .structure-poster {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ot-structures .structure-preview .structure-poster img {
    width: auto;
    max-width: 100%;
    min-width: 40%;
    height: auto;
    margin-right: 4em;
}

.ot-structures .structure-preview .structure-summary {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.ot-structures .structure-preview .structure-summary > span {
    margin-bottom: 0.5em;
}

.ot-structures .structure-preview .structure-name {
    font-size: 1.4em;
    color: #333333;
    font-weight: bold;
}

.ot-structures .structure-preview .structure-loc-date {
    font-size: 1.1em;
    color: #4d4d4d;
    font-weight: bold;
}

.ot-structures .structure-preview .structure-description {
    color: #4d4d4d;
}

.ot-structures .structure-see {
    align-self: stretch;
    padding: 0.4em 0.8em;
    font-size: 1.1em;
    margin-top: 0.4em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ot-structures .structure-see:hover {
    text-decoration: none;
    font-weight: bold;
}

/*============================
Sitemap page
============================*/
.frame-type-menu_sitemap {
    font-size: 16px;
    font-weight: bold;
}

.frame-type-menu_sitemap>ul {
    padding-left: 1.5em;
    list-style: none;
}

.frame-type-menu_sitemap li ul {
    list-style: disc;
    padding-left: 3em;
}

.frame-type-menu_sitemap li ul li ul {
    list-style: square;
    padding-left: 4.5em;
}

.frame-type-menu_sitemap li{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #979797;
}

/*   prevents iframe to oversize the content width*/
iframe {
    width: 100%;
    height: auto;
    max-width: 560px;
}

/*============================
Media queries
============================*/

@media screen and (max-width: 900px) {


    /* Events page*/
    .ot-all-events {
        flex-direction: column;
    }

    .ot-all-events .event {
        height: auto;
    }

    .ot-all-events .event-preview {
        flex-direction: column;
    }

    .ot-all-events .event-preview .event-poster img {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .ot-all-events .event-preview .event-name {
        text-align: center;
    }

/* Structures page*/
   .ot-structures {
       flex-direction: column;
   }

    .ot-structures .structure-controls {
        order: 0;
    }

    .ot-structures .structure-results {
        order: 1;
    }

    .ot-structures .structure {
        height: auto;
    }

/*    Members */



}
