@font-face {
    font-family: 'CircularStd';
    font-weight: 400;
    font-style: normal;
    src: local('CircularStd'), url('CircularStd-Book.otf') format('opentype');
}

@font-face {
    font-family: 'Athletics';
    font-weight: 400;
    font-style: normal;
    src: local('Athletics'), url('Athletics-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Athletics';
    font-weight: 600;
    font-style: medium;
    src: local('Athletics'), url('Athletics-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'CircularStd';
    font-weight: 500;
    font-style: normal;
    src: local('CircularStd'), url('CircularStd-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'CircularStd';
    font-weight: 700;
    font-style: normal;
    src: local('CircularStd'), url('CircularStd-Bold.otf') format('opentype');
}

.maskCircle {
    -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
    mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);

    /* -webkit-mask-image: radial-gradient(ellipse 50% 90% at 49% 54%, black 40%, rgba(0, 0, 0, 0.2) 50%); */
}

.mask-default {
    width: 100% !important;
    height: 100% !important;
}

.mask-face {
    -webkit-mask-image: url(../assets/ova2.png);
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: 50% !important;
    -webkit-mask-position: center !important;
    width: 100% !important;
    height: 100% !important;
    mask-image: url(../assets/ova2.png) !important;
    mask-mode: alpha !important;
    mask-repeat: no-repeat !important;
    mask-size: 60% !important;
    mask-position: center !important;
}

.preview-remote-video {
    width: 10% !important;
    height: 15% !important;
}

.mask-ID {
    -webkit-mask-image: url(../assets/rectangulo.png) !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: 90% !important;
    -webkit-mask-position: center !important;
    width: 100% !important;
    height: 100% !important;
    mask-image: url(../assets/rectangulo.png) !important;
    mask-repeat: no-repeat !important;
    mask-size: 90% !important;
    mask-position: center !important;
}

.mask-svg-id {
    transform: scale(2.5) !important;
    position: absolute !important;
    z-index: 100;
    margin-top: -22% !important;
}

.mask-doc {
    transform: scale(5.5) !important;
    position: absolute !important;
    z-index: 5;
    top: 0;
    left: 0;
}

.local-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    transform: rotateY(180deg);
}

.styleVideoParent {
    background-color: #074651 !important;
}


.stylePadding {
    padding: 0 !important;
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 320px) {
    .mask-doc {
        transform: scale(6) !important;
        top: 33%;
    }
}

@media (min-width: 500px) {
    .styleVideoFromAgent {
        height: 50% !important;
        top: 20% !important;
        position: relative !important;
    }

    .mask-doc {
        transform: scale(5.5) !important;
        top: 34%;
    }
}

@media (min-width: 576px) {
    .mask-svg-id {
        transform: scale(5) !important;
        margin-top: 12% !important;
    }

    .mask-doc {
        transform: scale(5.5) !important;
        top: 32%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .mask-svg-id {
        transform: scale(5) !important;
        margin-top: 12% !important;
    }

    .styleVideoFromAgent {
        height: 70% !important;
        top: 10% !important;
        position: relative !important;
    }

    .mask-doc {
        transform: scale(5) !important;
        top: 28%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .mask-svg-id {
        transform: scale(3.5) !important;
        margin-top: -15% !important;
    }

    .styleVideoFromAgent {
        height: 70% !important;
        top: 10% !important;
        position: relative !important;
    }

    .mask-doc {
        transform: scale(6) !important;
        top: 19%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .mask-svg-id {
        transform: scale(3.5) !important;
        margin-top: -15% !important;
    }

    .styleVideoFromAgent {
        height: 70% !important;
        top: 10% !important;
        position: relative !important;
    }

    .mask-doc {
        transform: scale(6) !important;
        top: 15%;
    }
}

@media (min-width: 1400px) {
    .mask-svg-id {
        transform: scale(4.5) !important;
        margin-top: -5% !important;
    }

    .styleVideoFromAgent {
        height: 100% !important;
        top: 0% !important;
        position: inherit !important;
    }

    .mask-doc {
        transform: scale(6) !important;
        top: 5%;
    }
}

.mask-face-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

/* Small devices (landscape phones, 576px and up) */

.styleVideoFromAgent {
    width: 100%;
    height: 100%;
    position: inherit;
    object-fit: cover !important;
}

.jumping {
    animation: jumping 2s ease infinite;
}

@keyframes jumping {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-40px);
    }

    60% {
        transform: translateY(-15px);
    }
}