/**** Version tel ****/

@media (max-width: 767px) {
    .controls {
        display: none;
    }

    .divLeLaser-tpc {
        padding: 0 0 12% 0;
    }

    .oModal2 img {
        max-height: 600px;
        width: auto;
        min-height: auto;
        border-radius: 15px;
        transition: 600ms;
        max-width: 100%;
        height: auto;
    }

    .absolute2 .button2 a {
        font-size: 12px;
        padding: 10px 20px;
    }

    .height40 {
        height: 40px;
    }

    .lacat-acc {
        margin: 10px;
    }
}

@media (max-width: 1040px) {
    .titre-plotter{
        color: rgb(56, 56, 58);
    }
}

@media (max-height: 800px) {
    .submenu-co ul {
        padding-bottom: 50px;
    }

    .submenu-co ul {
        overflow-y: scroll;
    }

   /* .oModal2 img {
        max-height: 600px;
        width: auto;
        min-height: 450px;
        border-radius: 15px;
        transition: 600ms;
        max-width: 100%;
        height: auto;
    }*/

    .oModal2 img {
        max-height: 600px;
        width: auto;
        min-height: auto;
        border-radius: 15px;
        transition: 600ms;
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 1388px) {
    .header-nav > ul > li > .a {
        transition: 600ms;
        font-size: 15px;
    }
}

@media (max-width: 1300px) {
    .absolute2 h1 {
        font-size: 45px;
    }
    .section-erreur404{
        width: 100%;
        height: 800px;
    }
}

@media (max-width: 1170px) {
    .absolute2 h1 {
        font-size: 40px;
    }

    .article-bas {
        justify-content: center;
    }

    .fiche-caracteristique {
        margin-left: 0;
    }

    body{
        zoom: 80%;
    }
}

@media (max-width: 1000px) {
    .absolute2 h1 {
        font-size: 30px;
    }

    .image-contenue {
        margin-left: 2%;
    }

    .erreur-relative {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        display: flex;
        height: 600px;
        margin: 0;
        text-align: center;
        right: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .etape-commande{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 300px;
    }
    .ligne-etape {
        height: 50px;
        width: 5px;
        border-radius: 15px;
        margin: 12.5px 183px 12.5px 0;
    }
    .rond-etape {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 85%;
    }
    .rond-etape .width-100 p{
        margin: 0 0 0 10px;
        text-align: left;
    }
    .en-cours {
        background: #0087cb;
        height: 25px;
        width: 5px;
        border-radius: 15px;
        position: absolute;
    }
    .image-contenue {
        margin-left: 0;
        width: 80%;
        min-width: 400px;
        min-height: 420px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .etape {
        background: #b5b5b5ba;
        height: 60px;
        width: 60px;
        min-width: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        padding: 5px;
        box-shadow: #00000042 0 0 10px 1px;
    }
    .img-prod-acc img {
        width: 125px;
        height: auto;
        max-height: 180px;
        transition: 600ms;
        transform: scale(1);
    }

    .banner-img {
        min-height: 300px;
    }

    .divLeLaser-pl img {
        width: 80%;
        height: auto;
        max-width: 960px;
        max-height: 540px;
        min-width: 100px;
        box-shadow: 0px 0px 4px 1px #00000054;
        border-radius: 15px;
        background: #fff;
    }

    .articledescription {
        width: 94%;
        /* margin-left: 3%; */
        margin: 3%;
        /* margin-top: 3%; */
        text-align: center;
    }

    .absolute2 h1 {
        font-size: 25px;
    }

    .absolute2 .button a {
        font-weight: bold;
        background: #0087cb;
        max-width: 100%;
        width: 100%;
        padding: 10px 50px 10px 50px;
        border-radius: 40px;
        text-align: center;
    }

    .banner-text {
        color: rgb(56, 56, 58);
        position: absolute;
        top: 12%;
        left: 8%;
        width: 50%;
        max-width: 660px;
    }

    .article-description {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        text-align: center;
    }

    .fiche-caracteristique {
        padding: 1%;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 80%;
        min-width: 100px;
        max-width: 900px;
    }

    .devis-block {
        margin-bottom: 6%;
    }
}

@media (max-width: 870px) {
    .lesfleches{
        display: none;
    }

    .newbloc-souscat.slide {
        display: none;
        animation: agauche 2s ease;
    }
}

@media (max-width: 630px) {
    .contenu-souscat {
        max-width: 70%;
        width: 70%;
        height: 82%;
        min-height: 190px;
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

@media (max-width: 530px) {
    .img-cat {
        width: 400px;
        min-width: 400px;
        min-height: 400px;
    }

    .img-cat img:hover {
        transition: 400ms;
        transform: scale(1.1);
    }
}

@media (max-height: 800px) {
    .submenu-co ul {
        padding-bottom: 50px;
    }

    .submenu-co ul {
        overflow-y: scroll;
    }
}

@media (max-width: 700px) {
    .absolute2 h1 {
        font-size: 20px;
    }

    .banner-img {
        min-height: auto;
    }

    .absolute2 .button a {
        font-weight: bold;
        background: #0087cb;
        max-width: 100%;
        width: 100%;
        padding: 10px 30px 10px 30px;
        border-radius: 40px;
        text-align: center;
        font-size: 10px;
    }

    .descriptioncat {
        width: auto;
    }

    .souscat-menu .flex-cat {
        max-height: none;
    }

    .leproduit-cat {
        margin: 5%;
    }

    .leproduit-best {
        margin: 5%;
    }
}

@media (max-width: 1200px) {
    .omodal3{
        top: 80px;
    }

    .omodal-compte2{
        top: 80px;
    }

    .omodal-compte{
        top: 80px;
    }

    .corp-de-page{
        margin-top: 80px;
    }

    .header-navigation {
        width: 2%;
        min-width: 37%;
        height: auto;
        text-align: right;
        padding-right: 2%;
    }

    .header-nav > ul > li > label {
        float: right;
        position: relative;
        /* padding: 30px 4px; */
        transition: 400ms;
        top: 0px;
    }

    .header-logo {
        width: 33%;
        padding-left: 7%;
        justify-content: center;
    }

    .header-nav ul {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style-type: none;
        width: 100%;
        background: #38383a;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 80px;
    }

    .header-img {
        max-height: 125px;
        width: 125px;
        height: auto;
        max-width: 139px;
    }

    .menuportable {
        z-index: 9999;
        display: flex;
        width: 100%;
        background: #38383a;
        opacity: .97;
        height: 80px;
        position: fixed;
        box-shadow: black 0px -5px 10px 1px;
        align-items: center;
    }

    .submenu-co ul{
        display: flex;
        /* position: absolute; */
        list-style-type: none;
        flex-wrap: nowrap;
        background: #fefefe;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        align-content: flex-start;
        height: auto;
        padding-top: 10px;
    }

    .submenu-co ul li{
        width: 100%;
        text-align: left;
        margin: 0 20px;
    }

    .menuprincipal {
        display: none;
    }

    .longinportable {
        width: 33%;
        min-width: 33%;
        display: flex;
        text-align: right;
    }

    .loginmenu {
        align-self: center;
        width: 100%;
    }

    .titremenu {
        text-align: center;
        width: 33%;
    }

    .navigationportable {
        width: 33%;
        display: flex;
        height: 80px;
        align-items: center;
        background: #38383a;
    }

    .nav-menu a {
        display: inline-block;
        text-decoration: none;
        color: black;
        transition: 600ms;
    }

    .nav-menu-p > ul {
        text-decoration: none;
        list-style: none;
        padding: 0;
        max-height: 500px;

    }

    .nav-menu > ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .nav-menu > ul > li {
        text-decoration: none;
        list-style: none;
        color: black;
        float: left;
        position: relative;
        padding: 30px 20px;
    }

    .nav-menu > ul > li:hover .amenu {
        color: #0087cb;
        transition: 600ms;
    }

    .submenup {
        /*height: 130vw;*/
        display: block;
        position: absolute;
        list-style-type: none;
        animation: .40s opacity 1;
        top: 100px;
        padding: 0;
        z-index: 2;
        margin: 0;
        left: -410px;
        /*background-color: #292a2cba;*/
        width: 30%;
        min-width: 300px;
        max-width: 400px;
        min-height: 300px;
        transition: 600ms;
        height: 1110px;
    }

    .t-box-p {
        display: none;
    }

    .label-p-nav {
        margin-left: 5%;
    }

    .background-subp {
        width: 100%;
        background: #292a2c;
        height: 100%;
        margin-top: -20px;
        border-bottom-right-radius: 15px;
        animation: .70s divmenup 1;
        padding: 0;
        overflow: scroll;
    }

    .t-box-p:checked ~ .submenup {
        left: 0;
        transition: 600ms;
        width: 100%;
    }

    .t-box-p:checked ~ label .fa-bars{
        background: url("https://www.tracamatrix.com/images/icons/times-solid.svg") no-repeat;
        height: 30px;
        width: 30px;
        color: #fff;
        transition: 400ms;
        display: block;
    }

    .t-box-p:checked ~ label .fa-bars:hover{
        background: url("https://www.tracamatrix.com/images/icons/times-solid-blue.svg") no-repeat;
        height: 30px;
        width: 30px;
        color: #fff;
        transition: 400ms;
    }

    .submenup ul li {
        color: white;
        padding: 15px 20px 15px 20px;
        font-size: 25px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .submenup .libar {
        border-bottom: 1px solid #b8b8b8;
    }

    .submenup ul li a {
        position: relative;
        /* padding: 15px 20px; */
        text-align: left;
        width: 180px;
        /*margin-left: 20px;*/
        margin-top: 10px;
        height: 30px;
        text-decoration: none;
        color: white;
        transition: 600ms;
        /* background-color: white;*/
    }

    .submenup ul li:hover a {
        color: #0087cb;
        margin-left: 30px;
        transition: 600ms;
        width: 170px;
    }

    .submenup ul li:hover ul li a{
        margin-left: 0;
        color: white;
    }

    .submenu-p {
        transition: 600ms;
        display: block;
        position: absolute;
        list-style-type: none;
        width: 100%;
        left: 0;
        top: -20px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        /* bottom: 0px; */
        padding: 0;
        z-index: -1;
        margin: 0;
        background-color: #0087cb;
        height: 100%;
    }

    .submenup li:hover .submenu-p {
        transition: 600ms;
        left: 100%;
    }

    .submenu-p ul li {
        color: white;
        padding: 2px 0px 28px 0px;
        font-size: 18px;
        margin-top: 16px !important;
    }

    .submenu-p .libar {
        border-bottom: 1px solid #b8b8b8;
    }

    .a-sub-p {
        position: relative;
        /* padding: 15px 20px; */
        padding: 2px 0px 28px 0px;
        font-size: 18px;
        text-align: left;
        width: 180px;
        margin-left: 20px;
        margin-top: 10px;
        height: 30px;
        text-decoration: none;
        color: white !important;
        transition: 600ms;
        /* background-color: white;*/
    }

    .a-sub-p:hover {
        padding-left: 10px !important;
        transition: 600ms !important;
        width: 170px !important;
    }

    .divpourpro {
        width: 95%;
        padding-left: 5%;
        margin-bottom: 4%;
    }

    .div-colorpourpro {
        width: 92%;
        padding: 2%;
        border-radius: 5px;
        box-shadow: 9px 9px 7px 0px rgba(1, 3, 4, 0.35);
        /* background: #091e42; */
        background: #292a2c;
    }

    .footer-contenu-bottom {
        min-width: 150px;
        margin-right: 2%;
    }

    .footer-bottom {
        display: flex;
        width: 80%;
        padding: 2% 10% 2% 10%;
        place-content: center;
        text-align: center;
        place-items: center;
        flex-wrap: wrap;
    }

    .decouvreprolibpro {
        margin-right: 2%;
    }

    .searchpro {
        width: 100%;
    }

    .searchlocation {
        width: 100%;
    }

    .searchmonpro {
        width: 100%;
    }

    .divformaccueil {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        place-content: center;
    }

    .textarea {
        width: 84%;
        max-width: 215px;
        min-height: 60px;
        height: auto;
    }
}

@media (max-width: 700px) {
    .ledevis-formulaire {
        width: 50%;
        margin-left: 4%;
        box-shadow: 0px 0px 4px 1px #00000054;
        min-width: 500px;
        margin-bottom: 2%;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .textarea {
        width: 84%;
        max-width: 215px;
        min-width: 215px;
        min-height: 60px;
        height: auto;
    }
}

@media (max-width: 600px) {
    .choix {
        display: flex;
        align-items: flex-start;
        margin-bottom: 2%;
        flex-direction: column;
        width: 90%;
    }
    .header-navigation{
        background: #38383a;
    }
    .banner-text {
        color: rgb(56, 56, 58);
        position: absolute;
        left: 8%;
        width: 50%;
        max-width: 660px;
    }

    .submenup li:hover .submenu-p {
        transition: 600ms;
        left: 0;
    }

    .absolute2 h1 {
        font-size: 16px;
    }

    .submenup li:hover .submenu-p {
        position: initial;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        margin-top: 7%;
    }

    /*.submenup{
        overflow: scroll;
    }*/

    .devis-formulaire tr {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-bottom: 22%;
    }

    .ledevis-formulaire {
        width: 100%;
        margin-left: 4%;
        box-shadow: 0px 0px 4px 1px #00000054;
        min-width: 1px;
        margin-bottom: 2%;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    .image-article {
        min-width: 300px;
        max-width: 300px;
    }

    .mySlides {
        width: 100%;
        text-align: -webkit-center;
    }

    .image-article img:hover {
        transform: scale(1);
    }
}