:root {
    --border-color: rgba(255, 255, 255, 0.3);
}

/* CUSTOM BUTTON */

.custom-btn {
    /*width: 100%;*/
    height: 40px;
    padding: 5px 15px;
    border: 2px solid var(--border-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

/* 13 */
.btn-13 {
    background: var(--background-color);
    color: var(--color);
    font-weight: 400;
    z-index: 1;
    border-radius: 50px;
 }
 .btn-13:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--border-color);
    transition: all 0.3s ease;
    border-radius: 50px;
 }
 .btn-13:hover {
    color: var(--color);
    border-radius: 50px;
 }
 .btn-13:hover:after {
    top: 0;
    height: 100%;
    border-radius: 50px;
 }
 .btn-13:active {
    top: 2px;
    border-radius: 50px;
 }

/* IMAGE */
.imgwork{
    flex-grow: 1;
}

.image-ocs {
    background: center url("../images/ocs.png");
    background-size: cover;
}

.image-cms {
    background: center url("../images/lef.png");
    background-size: cover;
}

/* OCS */
.work1-ocs {
    background: center url("../images/ocs/work1.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work2-ocs {
    background: center url("../images/ocs/work2.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-ocs {
    background: center url("../images/ocs/work3.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

/* CMS */
.work1-cms {
    background: center url("../images/cms/work1.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
    background-position: center center;
}

.work2-cms {
    background: center url("../images/cms/work2.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-cms {
    background: center url("../images/cms/work3.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

/* APPS */
.work1-apps {
    background: center url("../images/apps/work1.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
    background-position: center center;
}

.work2-apps {
    background: center url("../images/apps/work2.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-apps {
    background: center url("../images/apps/work3.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

/* GALA */
.work1-gala {
    background: center url("../images/gala/work1.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
    background-position: center center;
}

.work2-gala {
    background: center url("../images/gala/work2.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-gala {
    background: center url("../images/gala/work3.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

/* PAYBYPHONE */
.work1-pbp {
    background: center url("../images/pbp/work1.png");
    background-size: cover;
    border: 2px solid var(--border-color);
    background-position: center center;
}

.work2-pbp {
    background: center url("../images/pbp/work2.png");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-pbp {
    background: center url("../images/pbp/work3.png");
    background-size: cover;
    border: 2px solid var(--border-color);
}

/* SITE VIDÉO */
.work1-video {
    background: center url("../images/video/work1.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
    background-position: center center;
}

.work2-video {
    background: center url("../images/video/work2.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}

.work3-video {
    background: center url("../images/video/work3.jpg");
    background-size: cover;
    border: 2px solid var(--border-color);
}



/* 700PX */
@media (max-width: 700px) {
  .images .divstyle{
    height: 40%;
  }
}