@font-face {
    font-family: 'BYekan';
    font-weight: normal;
    font-style: normal;
    src: url('../../../../../fonts/Yekan.eot?-wwn5ej');
    src: url('../../../../../fonts/Yekan.eot?#iefix-wwn5ej') format('embedded-opentype'),
         url('../../../../../fonts/Yekan.woff?-wwn5ej') format('woff'),
         url('../../../../../fonts/Yekan.ttf?-wwn5ej') format('truetype'),
         url('../../../../../fonts/Yekan.svg?-wwn5ej#icomoon') format('svg');
}

@-moz-document url-prefix() {
    @font-face {
        font-family: 'BYekan';
        src: url('../fonts/Yekan.eot?-wwn5ej');
        src: url('../fonts/Yekan.eot?#iefix-wwn5ej') format('embedded-opentype');
        src: url('../fonts/Yekan.woff?-wwn5ej') format('woff');
        src: url('../fonts/Yekan.ttf?-wwn5ej') format('truetype');
        src: url('../fonts/Yekan.svg?-wwn5ej#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 100%;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
    transform: rotateY(180deg);
}

.my-line {
    width: 100%;
    height: 1px;
    background-color: #2BBBAD;
}

li {
    display: block;
}


/*aos animtion*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

.aos-all {
    width: 1000px;
    max-width: 98%;
    margin: 10vh auto 0 auto;
}

.aos-item {
    display: inline-block;
    float: left;
    width: 33.3333%;
    height: 300px;
    padding: 20px;
}

.aos-item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    background: #1da4e2;
    line-height: 260px;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 800px) {
    .aos-item {
        width: 50%;
    }
}

/*
        * The function calc is working wrong in case calculations in the Firefox
        */

.photobox {
    display: inline-block;
}

.photobox__previewbox {
    position: relative;
    overflow: hidden;
}

.photobox__preview {
    display: block;
    max-width: 100%;
}

.photobox__previewbox:before {
    content: "";
}

/* type 1 */

.photobox_type1 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    transition: transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    will-change: transform;
    transform: scale(0);
}

.photobox_type1:hover .photobox__previewbox:before {
    transform: scale(2);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-delay: 0s;
}

.photobox_type1 .photobox__label {
    width: 50%;
    transform: translate(-200%, -50%);
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
    will-change: transform;
    position: absolute;
    top: 50%;
    left: 15%;
}

.photobox_type1:hover .photobox__label {
    transition-duration: var(--photoboxAnimationDuration, .2s);
    transform: translate(0, -50%);
}

/* type 2*/

.photobox_type2 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    position: absolute;
    top: 0;
    right: 0;
    transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    will-change: transform;
    transform: scale(0);
}

.photobox_type2:hover .photobox__previewbox:before {
    transform: scale(2);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-delay: 0s;
}

.photobox_type2 .photobox__label {
    width: 50%;
    text-align: right;
    transform: translate(200%, -50%);
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
    will-change: transform;
    position: absolute;
    top: 50%;
    right: 15%;
}

.photobox_type2:hover .photobox__label {
    transition-duration: var(--photoboxAnimationDuration, .2s);
    transform: translate(0, -50%);
}

/* type 3 */

.photobox_type3 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type3:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type3 .photobox__label {
    width: 98%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photobox_type3:hover .photobox__label {
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type3 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type3:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

/* type 4 */

.photobox_type4 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type4:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type4 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 2;
}

.photobox_type4:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type4 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type4:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

/* type 5 */

.photobox_type5 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type5:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type5 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-200%, -50%);
    z-index: 2;
}

.photobox_type5:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type5 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type5:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

/* type 6 */

.photobox_type6 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type6:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type6 .photobox__label {
    width: 95%;
    text-align: center;
    transform: translate(-200%, -50%);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    will-change: transform;
    position: absolute;
    top: 50%;
    left: 50%;
}

.photobox_type6:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transform: translate(-50%, -50%);
}

/* type 7 */

.photobox_type7 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type7:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type7 .photobox__label {
    width: 95%;
    text-align: center;
    transform: translate(-200%, -50%);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    will-change: transform;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type7:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transform: translate(-50%, -50%);
}

.photobox_type7 .photobox__preview {
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type7:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

/* type 8 */

.photobox_type8 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type8:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type8 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type8:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}

.photobox_type8 .photobox__preview {
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type8:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

/* type 9 */

.photobox_type9 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type9:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type9 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type9:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}

.photobox_type9 .photobox__preview {
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type9:hover .photobox__preview {
    transform: scale(1.2);
}

/* type 10 */

.photobox_type10 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type10:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type10 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type10:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}

/* type 11 */

.photobox_type11 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform;
}

.photobox_type11:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type11 .photobox__label {
    width: 95%;
    text-align: center;
    transform: translate(-200%, -50%);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    will-change: transform;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type11:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transform: translate(-50%, -50%);
}

.photobox_type11 .photobox__preview {
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type11:hover .photobox__preview {
    transform: scale(1.2);
}

/* type 12 */

.photobox_type12 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform var(--photoboxAnimationDuration, .4s) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type12:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}

.photobox_type12 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type12:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    opacity: 1;
}

.photobox_type12 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type12:hover .photobox__preview {
    transform: scale(1.2);
}

/* type 13 */

.photobox_type13 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 45%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease;
    will-change: opacity, transform;
    transform: translate(-50%, -200%);
}

.photobox_type13:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type13 .photobox__label {
    width: 80%;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type13:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: var(--photoboxAnimationDuration, .4s);
    opacity: 1;
}

.photobox_type13 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type13:hover .photobox__preview {
    transform: scale(1.2);
}
/* type 14 */

.photobox_type14 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 45%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform var(--photoboxAnimationDuration, .4s) ease calc(var(--photoboxAnimationDuration, .4s) / 2);
    will-change: transform;
    transform: translate(-50%, -250%);
}

.photobox_type14:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%);
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: 0s;
}

.photobox_type14 .photobox__label {
    width: 80%;
    text-align: center;
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    transform: translate(-50%, -200%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type14:hover .photobox__label {
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: var(--photoboxAnimationDuration, .4s);
    opacity: 1;
}

.photobox_type14 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type14:hover .photobox__preview {
    transform: scale(1.2);
}

/* type 15 */

.photobox_type15 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform var(--photoboxAnimationDuration, .4s) ease;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type15:hover .photobox__previewbox:before {
    transform: translate(-50%, -50%) scale(4);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}

.photobox_type15 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.photobox_type15:hover .photobox__label {
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    opacity: 1;
}

.photobox_type15 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) translate(0, 0);
}

.photobox_type15:hover .photobox__preview {
    transform: scale(1.2) translate(4%, 4%);
}

/* type 16 */

.photobox_type16 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type16:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type16 .photobox__label {
    width: 98%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photobox_type16:hover .photobox__label {
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type16 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) translate(0, 0);
}

.photobox_type16:hover .photobox__preview {
    transform: scale(1.2) translate(4%, 4%);
}


/* type 17 */

.photobox_type17 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type17:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type17 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 2;
}

.photobox_type17:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

.photobox_type17 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    transform: scale(1) translate(0, 0);
}

.photobox_type17:hover .photobox__preview {
    transform: scale(1.2) translate(4%, 4%);
}

/* type 18 */

.photobox_type18 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    opacity: 0;
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.photobox_type18:hover .photobox__previewbox:before {
    opacity: 1;
}

.photobox_type18 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-200%, -50%);
    z-index: 2;
}

.photobox_type18:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 4);
}

.photobox_type18 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) translate(0, 0);
}

.photobox_type18:hover .photobox__preview {
    transform: scale(1.2) translate(4%, 4%);
}

/* type 19 */

.photobox_type19 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type19:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type19 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type19:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

/* type 20 */

.photobox_type20 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type20:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type20 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-200%, -50%);
    z-index: 2;
}

.photobox_type20:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: var(--photoboxAnimationDuration, .4s);
}

/* type 21 */

.photobox_type21 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type21:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type21 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photobox_type21:hover .photobox__label {
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: var(--photoboxAnimationDuration, .4s);
}

/* type 22 */

.photobox_type22 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type22:hover .photobox__preview {
    transform: scale(1.2);
}

.photobox_type22 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type22:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type22 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photobox_type22:hover .photobox__label {
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: var(--photoboxAnimationDuration, .4s);
}

/* type 23 */

.photobox_type23 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type23:hover .photobox__preview {
    transform: scale(1.2);
}

.photobox_type23 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type23:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type23 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-200%, -50%);
    z-index: 2;
}

.photobox_type23:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: var(--photoboxAnimationDuration, .4s);
}

/* type 24 */

.photobox_type24 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}

.photobox_type24:hover .photobox__preview {
    transform: scale(1.2);
}

.photobox_type24 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type24:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type24 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type24:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

/* type 25 */

.photobox_type25 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type25:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

.photobox_type25 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: .2;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type25:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type25 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photobox_type25:hover .photobox__label {
    opacity: 1;
    transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

/* type 26 */

.photobox_type26 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type26:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

.photobox_type26 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: .2;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type26:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type26 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-200%, -50%);
    z-index: 2;
}

.photobox_type26:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

/* type 27 */

.photobox_type27 .photobox__preview {
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type27:hover .photobox__preview {
    transform: scale(1.2) rotate(5deg);
}

.photobox_type27 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: .4;
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
    clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0);
}

.photobox_type27:hover .photobox__previewbox:before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(7);
    transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type27 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: opacity, transform;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 3;
}

.photobox_type27:hover .photobox__label {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}

/*
        * demo styles for photobox
        */
.photobox {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    font-style: normal;
    font-family: 'byekan' !important;
    line-height: 1.5em;
    direction: rtl;
    width: 100%;
    --photoboxOverlay: rgba(26, 188, 156, 0.7);
    /*--photoboxAnimationDuration: .5s;*/
}

@media screen and (max-width: 480px) {
    .photobox {
        width: 100%;
    }
}

.media-carousel img {
    width: auto !important;
    height: auto !important;
}