/*
Theme Name: AVM

Author: Kookline
Author URI: https://www.kookline.net/

*/

/***** RESPONSIVE ****/

@media screen and (max-width: 768px) {
    .container {
        padding: 0;
        width: auto;
        max-width: 100%;
    }
	
	#lnkheaderextranet{
		display: none;
	}
    
    header {
        height: auto;
    }
    
    header .container {
        flex-direction: column;
    }
    
    header .logo-container {
        position: relative;
    }
    
    header .logo-container a {
        padding: 10px;
        margin: 0;
    }
    
    header .logo-container .search {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        display: block;
        margin: auto;
        width: 30px;
        height: 30px;
        background-image: url('../img/loupe.png');
        background-position: center;
        background-size: 30px;
        background-repeat: no-repeat;
        font-size: 30px;
        color: white;
    }
    
    header .logo-container .search.active{
        background-image: url('../img/close.png');
        background-size: 24px;
    }
    
    header .logo-container img {
        max-width: 100px;
    }
    
    header .menu-container {
        align-items: initial;
    }
    
    header .menu-top {
        flex-direction: column;
        padding-top: 0;
    }
    
    header .menu-top a {
        display: none;
    }
    
    header .menu-top label {
        display: none;
    }
    
    header .menu-top label.active {
        z-index: 2;
        display: flex;
        position: relative;
        width: 100%;
        padding: 15px;
        background-color: white;
        color: #c5c5c5;
        text-transform: none;
    }
    
    header .menu-top label input {
        width: calc(100% - 85px);
        margin: auto 0;
        padding: 5px 0;
        padding-left: 10px;
        background-color: transparent;
        color: #c5c5c5;
        border: 1px solid #c5c5c5;
        height: 20px;
    }
    
    header .menu-top label input:not(:focus):not(:valid) + span {
        top: 20px;
        left: 25px;
    }
    
    header .menu-top label:after {
        content: '';
        position: initial;
        padding: 5px 20px;
        height: 20px;
        border: 1px solid #c5c5c5;
        background-color: #c5c5c5;
        background-image: url('../img/loupe.png');
        background-size: 24px;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    header .menu-top .menu-bar-responsive {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
        font-size: 20px;
        color: white;
    }
    header .menu-top .menu-bar-responsive:before {
        content: '';
        position: absolute;
        top: -5px;
        left: 0;
        right: 0;
        margin: auto;
        width: 80%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    header .menu-top .menu-bar-responsive span {
        margin-left: 5px;
    }
    
    header .menu-bar {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    header .menu-bar > nav {
        width: 100%;
        text-align: center;
    }
    
    header .menu-bar nav > ul.menu-primary {
        flex-direction: column;
    }
    header .menu-bar nav ul.menu-right > li:nth-child(1) > a:after{
        width: 0;
    }
    header .menu-bar nav ul.menu-right > li:nth-child(1) > a.responsive:after{
        right: 51%;
        width: 1px;
        bottom: 13px;
    }
    header .menu-bar nav ul.menu-primary > li + li a:before  {
        display: none;
    }
    
    header .menu-bar nav ul.menu-right > li {
        padding: 22.5px 0;
        width: 50%;
    }
    header .menu-bar nav ul.menu-right > li:nth-child(1) > a, header .menu-bar nav ul.menu-right > li:nth-child(2) > a {
        
        padding: 0;
        margin: 0 auto;
    }
    header .menu-bar nav > ul.menu-right > li .toggle {
        top: initial;
        bottom: 0;
        right: initial;
        transform: translate3d(0, 25%, 0);
    }
    
    header .menu-bar nav > ul.menu-right > li .toggle i {
        color: white;
    }
    
    header .menu-bar nav > ul.menu-right > li.open .toggle i {
        color: #780028;
    }
    
    header .menu-bar nav ul.menu-right > li:nth-child(1) > a {
        position: initial;
    }
    
    
    header .menu-bar nav ul.menu-right > li:hover > .sub-menu {
        display: none;
    }
    
    header .menu-bar nav ul.menu-right > li.open > .sub-menu {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        padding: 0 2.5px;
        width: calc(100% - 5px);
        
    }
    
    header .menu-bar nav ul.menu-right > li:hover > .sub-menu > li {
        width: 100%;
        height: 120px;
    }
    
    header .menu-bar nav ul.menu-primary li {
        position: relative;
        background-color: white;
    }
    
    header .menu-bar nav ul.menu-primary > li > a {
        padding: 15px;
        color: #780028;
        background-color: #ececec;
    }
    
    header .menu-bar nav > ul > li .toggle {
        z-index: 10;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        display: flex;
        height: 40px;
        line-height: 40px;
    }
    
    header .menu-bar nav > ul > li .toggle i {
        font-size: 20px;
        color: #780028;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    header .menu-bar nav ul.menu-primary > li:hover > .sub-menu {
        display: none;
        box-shadow: none;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > .sub-menu {
        position: static;
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
        font-size: 15px;
        font-weight: 400;
    }
    
    header .menu-bar nav > ul > li.open a {
        color: #780028;
        padding: 15px;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > a {
        background-color: #780028;
        color: white;
    }
    a.oui{
        padding: 15px;
        color: #780028 !important;
        background-color: #ececec;
        text-transform: uppercase;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open {
        background-color: #54001C;
        color: white;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > .toggle i,
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open > .toggle i {
        color: white;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > .sub-menu li {
        width: 100%;
        margin: 0;
        padding: 15px 0;
    }
    
    header .menu-bar nav ul.menu-primary > .produits.open > .sub-menu li {
        padding: 0;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li > a {
        padding: 15px 0;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open > a {
        color: white;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > .sub-menu li:nth-child(even) {
        padding: 0;
        width: 100%;
    }
    
    header .menu-bar nav ul.menu-primary > li.open > .sub-menu > li:nth-child(odd):before {
        display: none;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li:after {
        display: none;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li .sub-menu {
        display: none;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open .sub-menu {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        width: 100%;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open .sub-menu li {
        padding: 15px 0;
        margin: 0;
        background-color: #ececec;
        text-transform: uppercase;
    }
    
    header .menu-bar nav ul.menu-primary .produits > .sub-menu > li.open .sub-menu li:before {
        display: none;
    }
    .prod-img{
        display: none !important;
    }
    
    #home-slider {
        height: 245px;
    }
    
    #home-slider .slider-banner .slider-txt {
        padding-top: 15px;
        width: auto;
        height: calc(100% - 30px);
        text-align: center;
    }
    
    #home-slider .dots-container {
        width: auto;
    }
    
    #home-slider .dots-container .slick-dots {
        left: 0;
        right: 0;
        width: auto;
    }

    #home-slider .slider-txt .title {
        font-size: 20px;
    }
    
    .right-links {
        position: static;
        transform: none;
        flex-direction: row;
    }
    
    .right-links a {
        max-width: none;
        transform: none;
        margin: 20px auto;
        padding: 5px 0px;
        width: calc(50% - 5px);
        box-shadow: none;
        align-items: center;
    }
    
    .right-links img {
        margin-left: 10px;
        width: 20%;
        max-width: 30px;
    }
    
    .right-links .separator {
        position: initial;
        margin: 0 10px;
        transform: none;
        width: 1.3px;
    }
    
    .right-links span {
        margin-left: 0;
        margin-right: auto;
        font-size: 12px;
        text-align: left;
    }
    
    .home .right-links {
        position: absolute;
        top: 350px;
        left: 0;
    }
    
    .home #menu-produits {
        padding-top: 60px;
    }
    
    section h2{
        font-size: 17px !important;
    }
    #menu-produits .container {
        padding: 0;
    }
    
    section#menu-produits h2 {
        padding-bottom: 0;
        width: 90%;
        font-size: 17px;
    }
    
    #menu-produits .products-container {
        flex-direction: column;
        margin-bottom: 0;
    }
    
    #menu-produits .products-container .product {
        width: auto;
        height: 55px;
        background-color: rgba(0, 0, 0, 0.6);
        margin-top: 2px;
    }
    
    #menu-produits .products-container .product span {
        margin: auto 0;
    }
    
    #menu-produits .products-container .product span:after {
        margin-bottom: 0px;
    }
    
    #menu-produits .products-container .product:hover ul {
        display: none;
    }
    
    #menu-produits .products-container .product:hover:after {
        display: none;
    }
    
    #menu-produits .products-container .product:hover {
        background-blend-mode: color;
    }
    
    #menu-produits .products-container .product:hover span {
        margin: auto 0;
    }
    #menu-produits .products-container .product a {
        margin-top: 21px;
    }
    
    #actualite {
        background-image: none;
    }
    
    #actualite h2 {
        text-align: center;
        
    }
    #actualite .actu-wrapper{
        width: 90%;
        margin: 0 auto;
    }
    #actualite .actu-container {
        display: flex;
        margin: 0 auto;
        margin-bottom: 60px;
        padding: 20px;
        width: auto;
        height: 85px;
        background-size: contain;
    }
    
    #actualite .actu-container .actu-content {
        width: 50%;
        padding: 0 5px;
    }
    
    #actualite .actu-content .actu-title {
        font-size: 12px;
        text-align: justify;
        padding: 5px 2px;
    }
    
    #actualite .actu-content .actu-txt {
        display: none;
    }
    
    #actualite .actu-img {
        position: initial;
        margin-top: -20px;
        width: 50%;
        transform: none;
    }
    
    #actualite .actu-img .img-container {
        height: 125px;
    }
    
    #actualite .actu-content a {
        margin: auto;
        /*margin-top: -10px;*/
        padding: 5px 21px;
        font-size: 10px;
    }
    
    #actualite .actu-img .link-btn {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 90%;
        font-size: 13px;
        text-align: center;
        padding: 12px 14px;
    }
    
    #realisations .container {
        flex-direction: column;
        padding: 7px;
    }
    
    #realisations .container > div {
        width: 100%;
    }
    #realisations .left-content p{
        font-size: 12px;
    }
    #realisations .slider-container {
        height: 310px;
    }
    
    #realisations .left-content .link-btn {
        width: 100%;
        margin-bottom: 20px;
        padding: 12px 0;
        font-size: 12px;
        text-align: center;
    }
    
    #realisations .right-slider {
        padding: 12px 0;
        width: 100%;
        font-size: 12px;
    }
    #realisations a.link-btn{
        padding: 12px 28px;
    }
    #partenaires {
        background-image: none;
    }
    
    #partenaires h2 {
        text-align: center;
        padding-top: 35px;
        padding-bottom: 0;
    }
    #partenaires h2:nth-child(3){
        font-size: 16px !important;
    }
    
    #partenaires .img-list {
        width: 100%;
    }
    
    #partenaires .img-list img {
        margin: 30px 20px;
        width: 110px;
    }
    
    #partenaires .link-btn {
        font-size: 12px;
        padding: 17px 38px;
    }
    
    /*/////////////////////PAGES INTERIEURES//////////////////////*/
    .page-banner, .page-banner .container{
        height: 175px;
    }
    .page-banner .title-container{
        min-height: 50px;
        max-height: 50px;
        text-align: center;
        width: 55%;
        padding: 50px 60px;
        
    }
    .page-banner h1{
        font-size: 20px !important;
    }
    .breadcrumbs{
        display: none;
    }
    .page-simple{
        flex-direction: column;
        padding-bottom: 20px;
    }
    .page-simple .page-content{
        width: 90%;
        margin: 0 auto;
    }
    .page-simple .sidebar-page{
        margin: 0px auto;
        width: 90%;
    }
    /*CATALOGUE 1*/
    .page-template-page-produits .page-simple {
        flex-direction: column-reverse;
    }
    .sidebar-page .products-container .product{
        margin: 2px 0 ;
    }
    /*CATALOGUE 2*/
    .page-template-page-produits-liste .sidebar-page .e-books {
        display: none;
    }
    .page-content .e-books{
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px;
    }
    .page-content .e-books img{
        display: block;
        padding-bottom: 14px;
        padding-left: 16px;
    }
    .page-content .e-books div{
        padding-left: 19px;
        width: 60%;
        padding-bottom: 14px;
    }
    .page-content .e-books div span:last-child{
        padding: 0;
    }
    .page-content .e-books span:last-child  {
        padding: 7px 28px;
    }
    .products-container .product a{
        font-family: 'Karla', sans-serif;
        font-size: 20px;
        
    }
    .products-container.liste-produits{
        flex-direction: column;
        
    }
    .products-container.liste-produits .product {
        width: 80%;
        height: 150px;
    }
    
    .products-container.liste-produits .product span{
        text-align: center;
        
    }
    .products-container.liste-produits .product span:after{
        margin: 10px auto;
        margin-bottom: 15px;
    }
    table{
        width: 100% !important;
        display: none;
    }
    .table-scroll{
        overflow-x: scroll;
    }

    .page-simple .table-mobile {
        display: block;
        margin-top: 30px;
        border-bottom: 1px solid black;
    }

    .page-simple .table-mobile > div > span {
        display: flex;
        height: 50px;
        background-color: #780028;
        color: white;
        font-size: 15px;
        font-weight: 700;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .page-simple .table-mobile .mobile-row > span + span {
        border-top: 1px solid white;
    }

    .page-simple .table-mobile .row-content {
        color: #444444;
        font-size: 12px;
        text-align: center;
    }

    .page-simple .table-mobile .row-content p { 
        padding: 10px 0;
    } 
    .page-simple .btns {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
    }
    .page-simple .btns .link-btn {
        margin: 5px 20px;
    }
    
    /*FORM CONTACT*/
    
    .page-simple .form-content{
        width: 90%;
    }
    .form-content .wpcf7-recaptcha {
        transform: scale(0.8);
        transform-origin: left;
        margin-left: -10px;
    }
    
    .form-content input, .form-content select, .form-content textarea {
        width: 90%;
    }
    
    .form-content + p {
        margin-top: 0;
    }
    
    /*LIGHTBOX-CONTACT*/
    
    .lightbox-contact .lightbox-form{
        width: 70%;
    }
    .lightbox-form .form-content{
        width: 95%;
    }
    
    /*PORTES INTERIEURES*/
    
    .page-content.portes-interieures .flex-content{
        flex-direction: column;
    }
    .page-content.portes-interieures .flex-content .left-content{
        width: 100%;
    }
    .page-content.portes-interieures .flex-content .right-content{
        width: 100%;
        padding-left: 0;
    }
    .right-content a.link-btn{
        margin-top: 10px !important;
        
    }
    .right-content a.link-btn.black{
        margin-top: 30px !important;
        
    }
    .btn-infos span{
        color: white;
    }
    .circle i{
        color: white;
    }
    .icon.dir  {
        width: 77px !important;
    }
    a.link-btn.left-icon > span{
        padding: 15px 0;
    }
    .sidebar-page .item.e-books.single div span{
        font-size: 14px;
    }
    .page-content .slider-nav .slide-arrow{
        /* top: 35%; */
    }
    /*PAGE PARTICULIER*/
    .page-content .reassurance .atout{
        display: inline-flex;
        margin: 30px auto;
    }
    .page-content .reassurance .atout span{
        font-size: 12px;
    }
    .page-simple .infos-container {
        margin: auto;
        width: 90%;
    }
    /*PAGE ACTUALITES*/
    .page-content.page-actus .actu-container {
        display: flex;
        margin: 0 auto;
        margin-bottom: 40px;
        padding: 20px;
        width: auto;
        height: 85px;
        background-size: contain;
        padding-right: 0;
    }
    .page-content.page-actus .actu-container .actu-content{
        width: 50%;
        padding: 0 5px;
    }
    .page-content.page-actus .actu-container .actu-content .actu-title{
        font-size: 12px;
        text-align: justify;
        padding: 5px 2px;
    }
    .page-content.page-actus .actu-container .actu-content .actu-txt{
        display: none;
    }
    .page-content.page-actus .actu-container .actu-content a{
        margin: auto;
        margin-top: -25px;
        padding: 5px 17px;
        font-size: 10px;
    }
    .page-content.page-actus .actu-container .actu-img {
        position: initial;
        margin-top: -20px;
        width: 45%;
        transform: none;
    }
    .page-content.page-actus .actu-container .actu-img .img-container{
        height: 125px;
        width: 100%;
    }
    
    /*PAGE DETAILS ACTU*/
    .page-content.actu .center .link-btn {
        font-size: 12px;
        padding: 12px 25px;
        margin-top: 15px;
    }
    
    .page-content img {
        /*  */
    }
    /*PAGE PARTENAIRES*/
    .page-content.partenaires > h2{
        margin-bottom: 10px;
    }
    .page-content.partenaires .img-list .img-item{
        margin: 15px auto;
    }
    
    .page-content.partenaires .img-list .img-item span{
        margin-top: 5px;
        font-weight: bold;
        font-size: 15px;
    }
    .page-content.partenaires .img-list .img-item a{
        margin-top: 10px;
        font-weight: bold;
        font-size: 15px;
        text-transform: uppercase;
    }
    .page-content.partenaires .img-list .img-item .nolink{
        color: #fcca12;
        text-decoration: underline;
    }
    /*PAGE TEMOIGNAGES*/
    
    .temoignage-txt{
        max-height: none !important;
    }
    /*PAGE REALISATIONS*/
    .rea-list{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .rea-list .rea-photo{
        margin: 15px auto;
        width: 125px;
    }
    .rea-container .load-more-txt{
        adding: 12px 16px;
    }
    .rea-container .lightbox .lightbox-content .lightbox-wrapper{
        height: 95%;
    }
    .rea-container .lightbox .lightbox-content .close{
        position: fixed;
        top: 0;
        right: 0;
    }
    .rea-container .lightbox .lightbox-content .lightbox-nav-container > div.prev{
        position: fixed;
        left: 0;
        top: 50%;
    }
    .rea-container .lightbox .lightbox-content .lightbox-nav-container > div.next{
        position: fixed;
        right: 0;
        top: 50%;
    }
    .rea-container .lightbox .lightbox-content .lightbox-nav-container > div i{
        color: white;
    }
    /*PAGE FAQ*/
    .faq .cat-content{
        padding: 30px 15px;
        padding-right: 0;
    }
    .faq .cat-header{
        font-size: 17px;
    }
    .faq .cat-header span {
        margin-right: 50px;
    }
    .faq .cat-container i.fa{
        font-weight: bold;
    }
    
    /*PAGE LEXIQUE*/
    .alphabet{
        background: #fcca12;
        margin: 0 12px;
    }
    .alphabet ul{
        
        justify-content: unset;
        
    }
    .alphabet > ul > li{
        
        margin: 4px;
        
        
    }
    .alphabet > ul > li.active{
        background: white;
        border-radius: 25px;
    }
    .alphabet > ul > li > a{
        text-decoration: none;
        color: white;
        border-radius: 25px;
        margin-left: -2px;
    }
    
    .alphabet > ul > li.active a{
        color: #fcca12;
        
    }
    .letter-i{
        font-size: 100px;
        font-family: 'Karla',sans-serif;
        color: #fcca12;
        text-transform: uppercase;
        font-weight: bold;
        margin-left: 20px;
    }
    /*MAP-REVENDEUR*/
    .carte-revendeur {
        min-height: 387px;
        position: relative;
        min-width: 550px;
        margin-left: -110px;
    }
    .carte-revendeur svg{
        min-height: 0 !important;
    }
    /*PAGE EXPERT*/
    .villes{
        flex-direction: column;
    }
    .villes .ville{
        margin-left: 0
    }
    /*PAGE LEXIQUE*/
    .tags{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .tags .lexique-link{
        margin-bottom: 20px;
    }
    
    /*PAGE-RECHERCHE*/
    .search-result-container{
        margin-left: 2%;
        margin-bottom: 40px;
        padding: 0;
        width: 98%;
    }
    .search-result-container > h3{
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
        padding-top: 8px;
    }
    .search-result-content{
        margin:  0;
        display: flex;
        flex-direction: column;
        padding: 0;
        width: auto;
        padding-left: 35px;
        font-size: 12px;
        position: relative;
    }
    .link-btn.search-result{
        margin: 0 auto;
        display: table;
        position: absolute;
        bottom: -22px;
        left: calc(75% - 160px);
    }
    
    .cat-content .question-content {
        max-width: calc(100% - 55px);
    }
    
    .page-content .reassurance .atout span + span {
        width: 110px;
    }
    
    footer .pre-footer .container {
        flex-direction: column;
        padding: 30px 0;
    }
    
    footer .contact {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    footer .contact .logo-container {
        margin-left: auto;
        width: 35%;
        max-width: 120px;
    }
    
    footer .contact .logo-container img {
        width: 100%;
    }
    
    footer .contact .infos {
        width: 50%;
        font-size: 12px;
        text-transform: uppercase;
    }
    
    footer .contact .infos span {
        margin-bottom: 4px;
    }
    
    footer .contact .link-btn {
        margin-top: 20px;
        width: 70%;
        font-size: 17px;
    }
    
    footer .mid-col {
        margin-left: 0;
    }
    
    footer .mid-col .links {
        display: none;
    }
    
    footer .mid-col .newsletter {
        flex-direction: column;
        padding: 20px 0;
        width: 100%;
        text-align: center;
    }
    
    footer .newsletter > span {
        margin: auto;
        width: 75%;
    }
    
    footer .mid-col .newsletter .input-container input {
        margin-top: 10px;
        width: 70%;
    }
    
    footer .footer .container {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    
    footer .footer .container span  {
        margin-bottom: 15px;
    }
    
    footer .footer .container span + span:before {
        display: none;
    }
}

@media screen and (max-width: 321px) {
    
    header .menu-top .menu-bar-responsive {
        margin: 20px 0;
    }
    header .menu-top .menu-bar-responsive:before {
        top: -20px;
    }

}