/* INTER */
.padding-top{
    height:123px;
}
.padding-top2{
    height: 82px;
}

/* CORE */
body{
    background-color: #fbfbfb !important;
}
h5, h4, h3, .footer-icons, .p-content span, .card-text span, .hr-content, .hr-subcontent, i:not(.btn-group i, .contact-input i, .btn.btn-sm.btn-outline-danger i, .bi.bi-arrow-return-left){
    color: #736B02 !important;
}

/* HEADER */
.header {
    background-color: rgba(0, 0, 0, 0.822);
    display: flex;
    justify-content: space-evenly;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position:fixed;
    width:100%;
    z-index:99;
}
.header i{
    vertical-align: text-top;
    padding-right:5px ;
}
.div-header{
    display:flex;
    justify-content:space-around;
}
#DSPLogo {
    width:190px;
    margin:2px;
    transition-duration: .3s;
  }
.a-header {
    color: white;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px;
  }
.a-header:hover {
    background-color: #ddd;
    color: black;
}
.a-header:active {
    background-color: #ddd;
    color: black;
}
.a-icon{
    color:white;
    text-decoration: none;
  }
.ai-div{
    font-size: 14pt;
}
.buttonHeader{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

/* FOOTER */
footer{
    background-color: #fbfbfb;
    border-top: 1px solid rgba(0,0,0,.125);
    margin-bottom: 0 !important;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}
footer hr{
    height:2px !important;
    width:40vw
}
.footer-icons{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.footer-icons ul {
    align-items: center;
}
.footer-sub{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 2rem;
    text-align: center;
}
.footer-sub div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:0rem 7rem 0rem 7rem;
}
.footer-sub div:nth-child(2){
    border-left: 1px solid rgba(0,0,0,.125);
    border-right: 1px solid rgba(0,0,0,.125);
}
.footer-sub a{
    margin: 5% 0 5% 0;
    display: flex;
    justify-content: center;
}
.footer-sub img{
    width:240px;
}
.footer-sub div{
    width:30vw ;
}
.sm-icon{
    font-size:28pt;
}
.icon-footer{
    margin:0.5rem;
}

/* BACKGROUND IMG */
.img-bg{
    display:flex;
    position: absolute;
    min-width: 100%;
    max-width: 100%;
    z-index: -1;
}
.center-fit{
    margin: auto;
    min-width: 100%;
    object-fit: cover;
}

/* CONTENT */
.hr-content{
    width:40vw;
    margin: 1rem auto 1rem auto;
}
.hr-content2{
    width:65vw;
    margin: 1rem auto 1rem auto;
}
.hr-subcontent{
    margin: 1rem auto 1rem auto;
    width: 52vw;
}
.base-content, .base-content2, .base-content3{
    display:flex;
    flex-direction:column;
    background-color:#fbfbfb;
}
.base-content2, .base-content3{
    padding:2rem;
    box-shadow:rgba(0, 0, 0, 0.35) 0 10px 15px -10px;
}
.base-content3{
    align-items: center;
}
.separation-content{
    position: relative;
    height: 2rem;
    z-index: -1 ;
    background-color: #E5E5E5 ;
}
.wrap-content, .wrap-content2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: auto;
    max-width: 80vw;
    flex-wrap: wrap;
}

/* CONTENT TEXT */
.p-content{
    width: 63vw;
    font-size: 1.25rem;
    font-weight: 300;
    margin: auto auto 1rem auto;
}
.p-content span, .card-text span{
    font-weight: 600;
}
.p-center{
    text-align: center;
}
.p-subcontent{
    width: 50vw;
    font-size: 1.25rem;
    font-weight: 300;
    text-align: center;
    margin: auto auto 3rem auto;
}
h4, h3{
    font-weight: 700 !important;
}
.h4-content, .h4-base{
    margin: auto;
    width: 63vw;
}
.h4-content{
    margin: auto auto .5rem auto;
    text-align: center;
}
.h5-content{
    margin: auto;
    width: 63vw;
}


/* HEADING */
.heading{
    width: 63vw;
    margin: auto;
}
.heading h1{
    font-size: 28px;
    color: #736B02;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5em;
    padding-bottom: 15px;
    position: relative;
}
.heading h1:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 22vw;
    background-color: #736B02;
}
.heading h1:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 1px;
    width: 100%;
    background-color: #736B02;
}

/* CONTACT INFO */
.contact-info{
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.contact-info div{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
    align-items: center;
    margin:1rem 1rem 0rem 1rem;
    width: 20vw;
}
.contact-info div:nth-child(2){
    border-left: 1px solid rgba(0,0,0,.125);
    border-right: 1px solid rgba(0,0,0,.125);
}
.contact-info img{
    margin-bottom: .5em;
    width: 2em;
}
.contact-info p{
    width: 100%;
    font-weight: 600;
}

/* CONTACT INPUT */
.contact-input{
    width: 50%;
    margin: auto;
}
.contact-input .mb-3{
    width:49%;
}
.contact-input button{
    width: 100%;
}
label span, .text-muted span{
    color: red;
}
.contact-inner{
    display: flex;
    justify-content: space-between;
} 

/* VICOPO */
.vicopo-ul{
    position: absolute;
    background-color: #fbfbfb;
    list-style: none;
    width: 23.3%;
    padding: .5rem;
    margin-top: -1rem;;
    max-height: 30vh;
    overflow-y: auto;
}
.vicopo-ul li:hover{
    background-color: #736B02;
    color: white;
    cursor: pointer;
}

/* WRAP DIV */
.wrap-content div{
    width: 260px;
    max-width: 260px;
    margin: 2%;
    padding:1%;
    border: 1px solid rgba(0,0,0,.125);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius:15px;
}
.wrap-content h5{
    color: #736B02;
    text-align: center;
    margin: 8px;
}
.wrap-content img{
    border-radius: 8%;
    width: 100%;
}

/* WRAP MACHINE */
.wrap-machine{
    display: flex;
    margin: auto;
    padding: 1rem;
    width: 65vw;
}
.wrap-machine-inner-left, .wrap-machine-inner-right{
    width: 50%;
    text-align: center;
    padding: 0 3rem 0 3rem;
}
.wrap-machine-inner-left div, .wrap-machine-inner-right div{
    margin-bottom: 2rem;
}
.wrap-machine-inner-left{
    border-right: 1px solid rgba(0,0,0,.125);
}
.wrap-machine p{
    font-size: 1.25rem;
    font-weight: 300;
}

/* HAMBURGER */
.hamburger{
    display: none;
    font-size: 28pt;
    color:white;
    padding-right:5%;
}
#toggle{
    display: none;
}

/* FIL ARIANE */
.ariane{
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1rem 0 1rem;
}
a.breadcrumb-item.active{
    text-decoration: none;
}

/* CAROUSEL */
.d-flex.mb-4{
    position:absolute;
    width: 100%;
    left: 0;
    top: 40%;
    justify-content: space-between;
}
.carousel-container{
    max-width: 80vw !important;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-left:auto;
    margin-right: auto; 
}

/* BS OVERRIDE */
.container.col-xxl-8.px-4.py-1{
    background-color: #fbfbfb;
    border-radius: 15px 15px 0 0;
}
.btn-primary{
    background-color: #736B02 !important;
    border-color: #676001 !important;
}
.btn-primary:focus{
    box-shadow:0 0 0 .25rem rgba(115,107,2,.5) !important
}
.carousel-container .card {
    height: 100% !important;
}
.alert{
    position: fixed !important;
    right: 0;
    z-index: 99;
}

/* MULTI DROPDOWN */
.dropdown-menu li {
    position: relative;
}
    .dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}
    .dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}
    .dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

/* MODEL DISPLAY */
#model-display{
    display: flex;
    min-height:100vh;
    padding-top:97px;
    max-height: 100vh;
}
.dash-right{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: inherit;
}
.dash-inner{
    background-color: #E5E5E5;
    display: flex;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.125);

}
.dash-inner h5{
    padding-left:2%;
}
.model{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-items: center;
    align-items:flex-start;
    align-content: flex-start;
    overflow-y: auto;
    padding:15px;
    width:100%;
    height: 100%;
    text-align: center;
    background-color: #fbfbfb;
}

/* MULTI CAT  */
.img-multi{
    max-height: 25vh;
    max-width: 25vh;
    cursor:zoom-in;
    border:solid 1px #8e8e8e;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
    transition: transform .2s; /* Animation */
}
.img-multi:hover{
    transform: scale(1.1);
}
.multi-model{
    width: 80%;
    margin: 10px;
}

/* MULTI FOLD */
.multi-fold-div{
    width: 7vw;
    user-select: none;
}
.multi-fold{
    width:90%;
    
}

/* IMG ZOOM */
.Modal{
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed; 
    z-index: 99; 
    padding: 2rem; 
    left: 0;
    top: 0;
    cursor: zoom-out;
    width: 100%; 
    height:100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
}
.Modal-Content{
    display: block;
    max-height: 88vh;
    max-width: 88vw;
}
#Caption {
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.Modal-content, #Caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
.out {
    animation-name: zoom-out;
    animation-duration: 0.6s;
}

/* BUTTONS */
.button-6 {
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    transition: all 250ms;
    touch-action: manipulation;
  }
  .button-6:hover, .button-6:focus {
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: rgba(0, 0, 0, 0.65);
  }
  .button-6:hover {
    transform: translateY(-5px);
  }
  .button-6:active {
    background-color: #fbfbfb;
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    color: rgba(0, 0, 0, 0.65);
    transform: translateY(0);
  }
  .btn-contact{
    border: none;
    outline: none;
    padding: 0.4em 1em 0.4em 1em;
    background: transparent;
    color: white;
    font-weight: 700;
    position: relative;
    transition: all 0.5s;
    z-index: 1;
  }
  .btn-contact::before{
    content: "";
    position: absolute;
    border-radius: 0.4em;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #ddd;
    z-index: -1;
    transition: all 0.5s;
  }
  .btn-contact:hover{
    color: black;
  }
  .btn-contact:hover::before {
    width: 100%;
   }
  .btn-contact:active:before {
    background: #b9b9b9;
   }

/* COOKIE */
.cookie-consent{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #eaeaeade;
    border-top:1px solid rgba(0,0,0,.125);
    z-index: 120;
}
  
/* ------------------------MEDIA QUERIES------------------------ */
@media all and (max-width: 990px) {
    /* CONTENT */
    .base-content2, .base-content3{
        padding: 1.5rem;
    }
    .h4-base, .h5-content{
        margin: 0;
    }
    .p-content, .h4-content, .hr-content, .heading, .hr-content2{
        width: 100%;
    }
    .p-subcontent{
        width: 60vw;
    }
    .hr-subcontent{
        width: 62vw;
    }
    .heading h1:before {
        width: 55vw;
    }

    /* HEADER */
    .header{
        justify-content: space-around;
    } 
    .div-header{
        justify-content: space-between;
    }
    .a-header{
        border-bottom:1px solid rgba(255, 255, 255, 0.125);
        border-radius: 0;
        width: 100%;
    }
    .header .buttonHeader{
        display: none;
    }
    .ai-div{
        margin:0.4em;
        font-size: 12pt;
    }

    /* FOOTER */
    .footer-sub{
        align-items: center;
        flex-direction: column;
        padding: 1.5rem;
    }
    .footer-sub div{
        padding: 2rem 7rem 2rem 7rem;
    }    
    .footer-sub img{
        width:175px;
    }
    .footer-sub div:nth-child(2){
        border-top: 1px solid rgba(0,0,0,.125);
        border-bottom: 1px solid rgba(0,0,0,.125);
        border-left: none;
        border-right: none;
    }

    /* CONTACT INFO */
    .contact-info{
        flex-direction: column;
    }
    .contact-info div{
        padding:1rem 0 1rem 0;
        width: auto;
        margin: unset;
    }
    .contact-info div:nth-child(2){
        border-top: 1px solid rgba(0,0,0,.125);
        border-bottom: 1px solid rgba(0,0,0,.125);
        border-left: none;
        border-right: none;
    }

    /*CONTACT INPUT */
    .contact-input{
        width: 100%;
    }

    /*HAMBURGER */
    .hamburger{
        display: flex;
        align-items: center;
    }
    #toggle:checked + .buttonHeader , nav{
        display: flex;
        flex-direction: column;
        text-align: center;
        
    }
    #toggle:checked  .ai-div{
        display: block;
    }

    /* MODEL DECOUPE */
    .model{
       grid-template-columns: auto auto auto;
    }
    .dash-inner{
        padding: .5rem;
    }
    .multi-fold-div{
        width:15vw
    }
    .multi-fold-div p{
        font-size: 10pt;
    }
    .img-multi{
        max-width: 13vh;
        max-height: 13vh;
    }

    /* WRAP DIV */
    .wrap-content div{
        width: 46%;
    }

    /* WRAP MACHINE */
    .wrap-machine{
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .wrap-machine-inner-left, .wrap-machine-inner-right{
        width: 100%;
        padding: 0;
        border: none;
    }
    /* COOKIES */
    .cookie-consent{
        flex-direction: column;
    }
 }

/* ------------------------ANIMATIONS------------------------ */

 @-webkit-keyframes zoom { /* zoom in */
    from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}
@keyframes zoom {
    from {transform:scale(0.4)}
    to {transform:scale(1)}
}
@-webkit-keyframes zoom-out { /* zoom out */
    from {transform:scale(1)}
    to {transform:scale(0)}
}
@keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}