/*
Theme Name: Groupe Media Montréal
Theme URI: https://wordpress.org/themes/mediamontreal/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Est Media is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Est Media comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mediamontreal
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

*{
    box-sizing: border-box;
    transition: all .3s;
}
body{
    margin: 0;
    font-family: "Rubik", sans-serif;
    overflow-x: hidden;
}
body img{
    display: block;
    max-width: 100%;
    height: auto;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.site-header{
    padding: 50px 0 50px;
}
.site-header .header-logo{
    padding-bottom: 50px;
}
.site-header .header-logo-content{
    align-items: center;
    justify-content: center;
    display: flex;
}
.site-header .header-menu {
    background-color: #000;
    color: #fff;
    padding: 10px 0;
}   
.site-header .header-menu .header-menu-content{
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.site-header .header-menu ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}
.site-header .header-menu .sub-menu{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: absolute;
    background-color: #000;
    z-index: 2;
    left: 0;
    opacity: 0;
    visibility: hidden;
    padding: 20px;
    -webkit-transition: all .5s;
    transition: all .5s;
    width: 200px;
    top: 18px;
    -webkit-box-shadow: 10px 10px 38px -8px rgba(0,0,0,.45);
    -moz-box-shadow: 10px 10px 38px -8px rgba(0, 0, 0, .45);
    box-shadow: 10px 10px 38px -8px rgba(0,0,0,.45);
}

.site-header .header-menu li:hover .sub-menu,
.site-header .header-menu li a:hover + .sub-menu{
    visibility: visible;
    opacity: 1;
}
.site-header .header-menu ul li a{
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}
.site-header .header-menu .menu{
    gap: 15px;
}
.site-header .header-menu .menu li:not(:last-child){
    padding-right: 15px;
    border-right: 1px solid #FFFFFF;
    line-height: 16px;
    position: relative;
}
.site-header .header-menu  .menu .sub-menu li{
    border: none;
    line-height: 24px;
}
.site-header .header-menu .menu li a{
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    
}
.site-header .header-menu .menu li a:hover{
    color: #B2AEA6;
}
.home .site-header{
    padding-bottom: 0;
}
.site-header #burger,
.site-header  .header-menu .logo{
    display: none;
}
.site-header #burger .line {
    width: 27px;
    height: 2px;
    background-color: #B2AEA6;
    display: block;
    margin: 6px auto;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.section-listing-sites .site .site-content h2{
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    font-weight: 700;
}
.section-listing-sites .site .site-content h2 a{
    color: #000;
    text-decoration: none;
    font-weight: 700;
}
.section-listing-sites .site .site-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #000;
    flex-wrap: wrap;
}
.section-listing-sites .site .site-content .site-logo{
    flex: 0 0 33%;
    padding-right: 30px;
}
.section-listing-sites .site .site-content .site-logo img{
    max-width: 392px;
}
.section-listing-sites .site .site-content .site-details{
    flex: 0 0 calc(100% - 38%);
}
.section-listing-sites .site{
    padding: 30px 0;
    border-bottom: 1px solid rgba(178, 174, 166, 0.5);
}
.section-listing-sites .site:last-child{
    border: none;
}
.section-card img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.section-card .site-card{
    padding: 60px 0;
}
.section-card h2{
    text-transform: uppercase;
    color: #fff;
    background-color: #000;
    font-size: 20px;
    line-height: 28px;
    padding: 10px;
    margin: 0;
}
.section .site-details .btn-actions{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
}
.section .site-details .btn-actions a{
    text-decoration: none;
    display: inline-block;
}
.section .site-details .btn-actions .link-discover{
    display: inline-block;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    font-weight: 700;
}
.section .site-details .btn-actions .link-social,
.section .site-details .btn-actions .link-social-share{
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.section .site-details .btn-actions .link-social{
    color: #fff;
    background-color: #B2AEA6;
    color: #fff;
    font-size: 30px;
}
.section .site-details .btn-actions .link-social svg{
    width: 30px;
    color: #fff;
    fill: #fff;
}
.section .site-details .btn-actions .link-social:hover{
    background-color: #000;
}
.section .site-details .btn-actions .link-social-share{
    background: url('assets/images/icon-share.svg') no-repeat center center #000;
}
.section .site-details .btn-actions .link-discover:hover,
.section .site-details .btn-actions .link-social-share:hover{
    background-color: #B2AEA6;
}

/*********Footer********/
.site-footer{
    background-color: #B5B5B5;
    font-size: 16px;
    color: #fff;
    padding: 22px 0;
}
.site-footer .socials-links ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 20px;
}
.site-footer .socials-links ul li,
.site-footer .socials-links ul li a,
.site-header .socials-links li a{
    color: #fff;
    font-size: 22px;
}
.site-footer .socials-links ul li a svg,
.site-header .socials-links li a svg{
    width: 20px;
    color: #fff;
    fill: #fff;
    position: relative;
    top: 2px;
}
.site-footer .d-flex{
    align-items: center;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}
.site-footer  .text-copyright{
    font-size: 16px;
}
@media (max-width: 991px) {
    .site-header,
    .section-listing-sites .site,
    .section-card .site-card{
        padding: 30px 0 30px;
    }
    .site-header #burger {
        display: block;
    }
    .menuOpen .header-menu .menu-box {
        right: 0;
        display: block;
        width: 100%;
    }
    .header-menu .menu-box {
        position: absolute;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100vh;
        right: -100%;
        width: 100%;
        max-width: 100%;
        z-index: 999;
        top: 175px;
        overflow-y: scroll;
        background-color: #000;
        -webkit-transition: all .8s;
        transition: all .8s;
        bottom: 0;
        padding-bottom: 30px;
        padding-top: 30px;
        display: none;
    }
    
    .section-listing-sites .site .site-content .site-logo img{
        max-width: 300px;
    }
    .site-header  .header-menu .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .site-header .header-logo{
        display: none;
    }
    .header-menu .menu-box ul{
        flex-direction: column;
        justify-content: start;
        align-items: flex-start;
    }
    .header-menu .menu-box ul li,
    .site-header .header-menu .menu li:not(:last-child),
    .header-menu .menu-box ul li a{
        border: none;
    }
    .home .site-header{
        padding-top: 0;
    }
    .header-menu .menu-box ul li a{
        padding: 0 15px;
    }
    .site-header .header-menu{
        padding: 15px 0;
        border-bottom: 1px solid rgba(1, 1, 1, 0.1);
        background: #fff;
    }
    .site-header  .header-menu .logo{
        display: block;
    }
    .site-header  .header-menu .logo img{
        max-width: 200px;
    }
    .site-header #burger .line {
        width: 50px;
        height: 7px;
        margin: 10px auto;
    }
    .section-listing-sites .site .site-content .site-logo {
        flex: 0 0 25%;
    }
    .section-listing-sites .site .site-content .site-details {
        flex: 0 0 54%;
    }
}
@media (max-width: 767px) {
    .site-header .header-menu .logo img{
        max-width: 100px;
    }
    .section-listing-sites .site .site-content .site-logo,
    .section-listing-sites .site .site-content .site-details{
        flex: 0 0 100%;
        padding-right: 0;
        text-align: center;
    }
    .section-listing-sites .site .site-content{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .header-menu .menu-box {
        top: 103px;
    }
    .section .site-details .btn-actions{
        justify-content: center;
    }
    .section-listing-sites .site .site-content{
        display: flex;
        gap: 30px;
    }
}