/* =========================================================
   HYDRA PROJECT DETAIL
========================================================= */

.hydra-project-detail {

    position: relative;

}


/* =========================================================
   PAGE TITLE
========================================================= */

.hydra-project-page-title {

    background-position: center center;

    background-size: cover;

}


/* =========================================================
   PROJECT MEDIA CAROUSEL
========================================================= */

.hydra-project-carousel {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

}


.hydra-project-carousel
.owl-stage-outer {

    width: 100%;

    overflow: hidden;

}


.hydra-project-carousel
.owl-stage {

    display: flex;

    align-items: stretch;

}


.hydra-project-carousel
.owl-item {

    display: flex;

    align-items: stretch;

}


.hydra-project-carousel
.item {

    width: 100%;

    margin: 0;

    padding: 0;

}


/* =========================================================
   PROJECT IMAGES
========================================================= */

.hydra-project-image {

    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    background: #171a1d;

}


.hydra-project-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

}


.hydra-image-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%, -50%)
        scale(.85);

    opacity: 0;

    border-radius: 50%;

    background:
        rgba(23, 26, 29, .85);

    color: #fff;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.hydra-project-image:hover
.hydra-image-overlay {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

}


.hydra-image-overlay i {

    font-size: 20px;

}


/* =========================================================
   OWL NAVIGATION
========================================================= */

.hydra-project-carousel
.owl-nav {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    width: 100%;

    margin: 0;

    transform:
        translateY(-50%);

    pointer-events: none;

}


.hydra-project-carousel
.owl-nav button.owl-prev,

.hydra-project-carousel
.owl-nav button.owl-next {

    position: absolute;

    top: 50%;

    width: 48px;

    height: 48px;

    margin: 0 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

    border: 0 !important;

    border-radius: 50%;

    background:
        rgba(23, 26, 29, .78) !important;

    color: #fff !important;

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    transition:
        background .2s ease,
        transform .2s ease;

}


.hydra-project-carousel
.owl-nav button.owl-prev {

    right: 20px;

}


.hydra-project-carousel
.owl-nav button.owl-next {

    left: 20px;

}


.hydra-project-carousel
.owl-nav button:hover {

    background:
        #f9a305 !important;

    color:
        #171a1d !important;

}


/* =========================================================
   PROJECT VIDEO
========================================================= */

.hydra-project-video {

    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #000;

}


/* =========================================================
   MEDIAPLAYER CONTAINER
========================================================= */

.hydra-project-video
.projects-media-player {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #000 !important;

    box-sizing: border-box !important;

}


/* =========================================================
   MEDIAPLAYER VIDEO
========================================================= */

.hydra-project-video
.projects-media-player
.projects-media-media {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-width: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    outline: none !important;

    border-radius: 0 !important;

    background: #000 !important;

    object-fit: contain !important;

    box-sizing: border-box !important;

}


/* =========================================================
   MEDIAPLAYER TOOLBAR
========================================================= */

.hydra-project-video
.projects-media-toolbar {

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    z-index: 50 !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding: 4px 8px !important;

    background:
        rgba(0, 0, 0, .82) !important;

    color: #fff !important;

    direction: ltr !important;

    box-sizing: border-box !important;

}


/* =========================================================
   PLAYER CONTROLS
========================================================= */

.hydra-project-video
.projects-media-control {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 42px !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 8px !important;

    border: 0 !important;

    border-radius: 0 !important;

    outline: none !important;

    background: transparent !important;

    color: #fff !important;

    font: inherit !important;

    line-height: 1 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

}


.hydra-project-video
.projects-media-control:hover {

    background:
        rgba(249, 163, 5, .20) !important;

}


.hydra-project-video
.projects-media-control:focus {

    outline:
        2px solid #f9a305 !important;

    outline-offset:
        -2px !important;

}


/* =========================================================
   MEDIAPLAYER SVG ICONS
========================================================= */

/*
 * IMPORTANT:
 *
 * Do NOT force display:none here.
 *
 * media-player.js controls icon visibility itself.
 */

.hydra-project-video
.projects-media-symbol {

    width: 20px !important;

    height: 20px !important;

    min-width: 20px !important;

    min-height: 20px !important;

    margin: 0 !important;

    padding: 0 !important;

    fill: currentColor !important;

    color: currentColor !important;

    overflow: visible !important;

}


/* =========================================================
   TIME SLIDER
========================================================= */

.hydra-project-video
.projects-media-time {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 80px !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 8px !important;

    background: transparent !important;

    box-sizing: border-box !important;

    cursor: pointer !important;

}


.hydra-project-video
.projects-media-time-range {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: 6px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 999px !important;

    background:
        rgba(255, 255, 255, .28) !important;

    box-sizing: border-box !important;

}


.hydra-project-video
.projects-media-time-meter {

    display: block;

    width: 0%;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 999px !important;

    background:
        #f9a305 !important;

    box-sizing: border-box !important;

}


/* =========================================================
   VOLUME
========================================================= */

.hydra-project-video
.projects-media-volume {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    flex: 0 0 auto !important;

    width: 100px !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 8px !important;

    background: transparent !important;

    box-sizing: border-box !important;

}


.hydra-project-video
.projects-media-volume-range {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: 6px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 999px !important;

    background:
        rgba(255, 255, 255, .28) !important;

    box-sizing: border-box !important;

}


.hydra-project-video
.projects-media-volume-meter {

    display: block;

    width: 0%;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 999px !important;

    background:
        #f9a305 !important;

    box-sizing: border-box !important;

}


/* =========================================================
   TIME TEXT
========================================================= */

.hydra-project-video
.projects-media-current-time,

.hydra-project-video
.projects-media-remaining-time {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 auto !important;

    min-width: 42px !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 0 4px !important;

    background: transparent !important;

    color: #fff !important;

    font-family:
        Arial,
        Tahoma,
        sans-serif !important;

    font-size: 11px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;

}


/* =========================================================
   DOWNLOAD
========================================================= */

.hydra-project-video
.projects-media-download {

    width: 42px !important;

    flex:
        0 0 42px !important;

}


/* =========================================================
   FULLSCREEN
========================================================= */

.hydra-project-video
.projects-media-fullscreen {

    width: 42px !important;

    flex:
        0 0 42px !important;

}


/* =========================================================
   HIDE NATIVE VIDEO CONTROLS
========================================================= */

.hydra-project-video
video::-webkit-media-controls {

    display: none !important;

}


.hydra-project-video
video::-webkit-media-controls-enclosure {

    display: none !important;

}


/* =========================================================
   FULLSCREEN PLAYER
========================================================= */

.hydra-project-video
.projects-media-player:fullscreen {

    width: 100vw !important;

    height: 100vh !important;

    max-width: none !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #000 !important;

}


.hydra-project-video
.projects-media-player:fullscreen
.projects-media-media {

    width: auto !important;

    max-width: 100vw !important;

    height: auto !important;

    max-height: 100vh !important;

    object-fit: contain !important;

}


/* =========================================================
   EMPTY MEDIA
========================================================= */

.hydra-project-empty-media {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    padding: 50px;

    background: #171a1d;

    color: #fff;

    text-align: center;

}


.hydra-project-empty-media i {

    margin-bottom: 15px;

    font-size: 45px;

    color: #f9a305;

}


/* =========================================================
   PROJECT META
========================================================= */

.hydra-project-inline-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 20px;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

}


.hydra-project-inline-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}


.hydra-project-inline-meta i {

    color: #f9a305;

}


.hydra-project-inline-meta strong {

    font-weight: 600;

}


.hydra-meta-separator {

    color: #aaa;

}


/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.hydra-project-description {

    white-space: normal;

    word-break: normal;

}


/* =========================================================
   LATEST PROJECTS
========================================================= */

.hydra-latest-projects {

    margin-top: 70px;

}


.hydra-latest-carousel {

    position: relative;

}


.hydra-latest-carousel .item {

    padding: 0;

}


.hydra-latest-carousel
.portfolio-item {

    position: relative;

    overflow: hidden;

}


.hydra-latest-carousel
.portfolio-item img {

    display: block;

    width: 100%;

    height: auto;

}


.hydra-latest-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 250px;

    background: #171a1d;

    color: #f9a305;

    font-size: 40px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .hydra-project-carousel
    .owl-nav button.owl-prev,

    .hydra-project-carousel
    .owl-nav button.owl-next {

        width: 40px;

        height: 40px;

    }


    .hydra-project-carousel
    .owl-nav button.owl-prev {

        right: 10px;

    }


    .hydra-project-carousel
    .owl-nav button.owl-next {

        left: 10px;

    }


    .hydra-project-inline-meta {

        gap: 8px;

    }


    .hydra-project-video
    .projects-media-toolbar {

        min-height: 46px !important;

        padding:
            3px 4px !important;

    }


    .hydra-project-video
    .projects-media-control {

        width: 36px !important;

        height: 38px !important;

        flex-basis: 36px !important;

        padding: 7px !important;

    }


    .hydra-project-video
    .projects-media-symbol {

        width: 18px !important;

        height: 18px !important;

        min-width: 18px !important;

        min-height: 18px !important;

    }


    .hydra-project-video
    .projects-media-current-time,

    .hydra-project-video
    .projects-media-remaining-time {

        min-width: 35px !important;

        height: 38px !important;

        font-size: 10px !important;

    }


    .hydra-project-video
    .projects-media-volume {

        width: 70px !important;

        height: 38px !important;

    }


    .hydra-project-video
    .projects-media-time {

        min-width: 50px !important;

        height: 38px !important;

    }

}