/*styles based on content, these class names are generated with js based on the name of the content, for example based on the name of a category*/

:root {
    --music-color: #ff00ea;
    --music-color4d: #ff00ea4d;

    --analog-photography-color: #d2d2d2;
    --analog-photography-color4d: #d2d2d24d;

    --field-recordings-color: #00ff00;
    --field-recordings-color4d: #00ff004d;

    --about-color: #ff0000;
    --about-color4d: #ff00004d;

    --text-color: #00dbff;
    --text-color4d: #00dbff4d;

    --video-color: #ff6c00;
    --video-color4d: #ff6c004d;

    --sound-engineering-color: #0000ff;
    --sound-engineering-color4d: #0000ff4d;

    --footer-nav-path-color: #ffffff;
    --footer-nav-path-color4d: #ffffff4d;
}

/********************************************/
/*            FRONT OVERLAY NAV             */
/********************************************/

/*music*/

.front-wrapper {
    .overlay-path-music {
        stroke: var(--music-color);
    }

    .overlay-caption-link-music {
        fill: var(--music-color);
    }

    .hover-group-music:hover .overlay-path {
        fill: var(--music-color4d);
        stroke: var(--music-color);
    }

    .hover-group-music:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-music .overlay-caption-en {
        transform: translate(750px, 560px);
    }

    .hover-group-music .overlay-caption-de {
        transform: translate(750px, 560px);
    }

    /*analog photography*/

    .overlay-path-analog-photography {
        stroke: var(--analog-photography-color);
    }

    .overlay-caption-link-analog-photography {
        fill: var(--analog-photography-color);
    }

    .hover-group-analog-photography:hover .overlay-path {
        fill: var(--analog-photography-color4d);
        stroke: var(--analog-photography-color);
    }

    .hover-group-analog-photography:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-analog-photography .overlay-caption-en {
        transform: translate(360px, 786px);
    }

    .hover-group-analog-photography .overlay-caption-de {
        transform: translate(360px, 786px);
    }

    /*field recordings*/

    .overlay-path-field-recordings {
        stroke: var(--field-recordings-color);
    }

    .overlay-caption-link-field-recordings {
        fill: var(--field-recordings-color);
    }

    .hover-group-field-recordings:hover .overlay-path {
        fill: var(--field-recordings-color4d);
        stroke: var(--field-recordings-color);
    }

    .hover-group-field-recordings:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-field-recordings .overlay-caption-en {
        transform: translate(1275px, 765px);
    }

    .hover-group-field-recordings .overlay-caption-de {
        transform: translate(1275px, 765px);
    }

    /*about*/

    .overlay-path-about {
        stroke: var(--about-color);
    }

    .overlay-caption-link-about {
        fill: var(--about-color);
    }

    .hover-group-about:hover .overlay-path {
        fill: var(--about-color4d);
        stroke: var(--about-color);
    }

    .hover-group-about:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-about .overlay-caption-en {
        transform: translate(1060px, 693px);
    }

    .hover-group-about .overlay-caption-de {
        transform: translate(1060px, 693px);
    }

    /*text*/

    .overlay-path-text {
        stroke: var(--text-color);
    }

    .overlay-caption-link-text {
        fill: var(--text-color);
    }

    .hover-group-text:hover .overlay-path {
        fill: var(--text-color4d);
        stroke: var(--text-color);
    }

    .hover-group-text:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-text .overlay-caption-en {
        transform: translate(889px, 1002px);
    }

    .hover-group-text .overlay-caption-de {
        transform: translate(889px, 1002px);
    }

    /*video*/

    .overlay-path-video {
        stroke: var(--video-color);
    }

    .overlay-caption-link-video {
        fill: var(--video-color);
    }

    .hover-group-video:hover .overlay-path {
        fill: var(--video-color4d);
        stroke: var(--video-color);
    }

    .hover-group-video:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-video .overlay-caption-en {
        transform: translate(900px, 600px);
    }

    .hover-group-video .overlay-caption-de {
        transform: translate(900px, 600px);
    }

    /*sound engineering*/

    .overlay-path-sound-engineering {
        stroke: var(--sound-engineering-color);
    }

    .overlay-caption-link-sound-engineering {
        fill: var(--sound-engineering-color);
    }

    .hover-group-sound-engineering:hover .overlay-path {
        fill: var(--sound-engineering-color4d);
        stroke: var(--sound-engineering-color);
    }

    .hover-group-sound-engineering:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-sound-engineering .overlay-caption-en {
        transform: translate(1300px, 227px);
    }

    .hover-group-sound-engineering .overlay-caption-de {
        transform: translate(1300px, 227px);
    }

    /*take me elseweher - the lamp*/

    .overlay-path-footer-nav-path {
        stroke: var(--footer-nav-path-color);
    }

    .overlay-caption-link-footer-nav-path {
        fill: var(--footer-nav-path-color);
    }

    .hover-group-footer-nav-path:hover .overlay-path {
        fill: var(--footer-nav-path-color4d);
        stroke: var(--footer-nav-path-color);
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group-footer-nav-path .overlay-caption-en {
        transform: translate(950px, 370px);
    }

    .hover-group-footer-nav-path .overlay-caption-de {
        transform: translate(950px, 370px);
    }
}

/************************************/
/*                PAGES             */
/************************************/
/*about page*/
.about-wrapper {
    /*caption position (relative to full screen in px)*/
    .hover-group-footer-nav-path .overlay-caption-en {
        transform: translate(1000px, 693px);
    }

    .hover-group-footer-nav-path .overlay-caption-de {
        transform: translate(1000px, 693px);
    }
}

/*sound engineering page*/
.sound-engineering-wrapper {
    /*caption position (relative to full screen in px)*/
    .hover-group-footer-nav-path .overlay-caption-en {
        transform: translate(1300px, 227px);
    }

    .hover-group-footer-nav-path .overlay-caption-de {
        transform: translate(1300px, 227px);
    }
}

/*****************************************/
/*            CATEGORY PAGES             */
/*****************************************/

.category-wrapper-music {
    background-color: var(--music-color);

    .overlay-path {
        stroke: #000000;
    }

    .overlay-caption {
        fill: #000000;
    }

    .hover-group:hover .overlay-path {
        fill: #0000004d;
        stroke: #000000;
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group .overlay-caption-en {
        transform: translate(760px, 560px);
    }

    .hover-group .overlay-caption-de {
        transform: translate(780px, 560px);
    }
}

/*video*/
.category-wrapper-video {
    background-color: var(--video-color);

    .overlay-path {
        stroke: #000000;
    }

    .overlay-caption {
        fill: #000000;
    }

    .hover-group:hover .overlay-path {
        fill: #0000004d;
        stroke: #000000;
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group .overlay-caption-en {
        transform: translate(850px, 600px);
    }

    .hover-group .overlay-caption-de {
        transform: translate(870px, 600px);
    }
}

/*text*/
.category-wrapper-text {
    background-color: var(--text-color);

    .overlay-path {
        stroke: #000000;
    }

    .overlay-caption {
        fill: #000000;
    }

    .hover-group:hover .overlay-path {
        fill: #0000004d;
        stroke: #000000;
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group .overlay-caption-en {
        transform: translate(800px, 1000px);
    }

    .hover-group .overlay-caption-de {
        transform: translate(890px, 1000px);
    }
}

/*field recordings*/
.category-wrapper-field-recordings {
    background-color: var(--field-recordings-color);

    .overlay-path {
        stroke: #000000;
    }

    .overlay-caption {
        fill: #000000;
    }

    .hover-group:hover .overlay-path {
        fill: #0000004d;
        stroke: #000000;
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group .overlay-caption-en {
        transform: translate(1275px, 765px);
    }

    .hover-group .overlay-caption-de {
        transform: translate(1350px, 765px);
    }
}

/*analog photography*/
.category-wrapper-analog-photography {
    background-color: var(--analog-photography-color);

    .overlay-path {
        stroke: #000000;
    }

    .overlay-caption {
        fill: #000000;
    }

    .hover-group:hover .overlay-path {
        fill: #0000004d;
        stroke: #000000;
    }

    .hover-group-footer-nav-path:hover text {
        text-decoration: underline;
    }

    /*caption position (relative to full screen in px)*/
    .hover-group .overlay-caption-en {
        transform: translate(360px, 786px);
    }

    .hover-group .overlay-caption-de {
        transform: translate(360px, 786px);
    }
}

/*****************************************/
/*       SCREENS SMALLER THAN 451PX      */
/*****************************************/

@media screen and (max-width: 450px) {
    /********************************************/
    /*            FRONT OVERLAY NAV             */
    /********************************************/

    /*music*/
    /*caption position (relative to full screen in px)*/
    .hover-group-music .overlay-caption-en {
        transform: translate(750px, 560px);
    }

    .hover-group-music .overlay-caption-de {
        transform: translate(750px, 560px);
    }

    /*analog photography*/
    /*caption position (relative to full screen in px)*/
    .hover-group-analog-photography .overlay-caption-en {
        transform: translate(360px, 786px);
    }

    .hover-group-analog-photography .overlay-caption-de {
        transform: translate(360px, 786px);
    }

    /*field recordings*/
    /*caption position (relative to full screen in px)*/
    .hover-group-field-recordings .overlay-caption-en {
        transform: translate(1275px, 765px);
    }

    .hover-group-field-recordings .overlay-caption-de {
        transform: translate(1275px, 765px);
    }

    /*about*/
    /*caption position (relative to full screen in px)*/
    .hover-group-about .overlay-caption-en {
        transform: translate(1060px, 693px);
    }

    .hover-group-about .overlay-caption-de {
        transform: translate(1060px, 693px);
    }

    /*text*/
    /*caption position (relative to full screen in px)*/
    .hover-group-text .overlay-caption-en {
        transform: translate(889px, 1002px);
    }

    .hover-group-text .overlay-caption-de {
        transform: translate(889px, 1002px);
    }

    /*video*/
    /*caption position (relative to full screen in px)*/
    .hover-group-video .overlay-caption-en {
        transform: translate(900px, 600px);
    }

    .hover-group-video .overlay-caption-de {
        transform: translate(900px, 600px);
    }

    /*sound engineering*/
    /*caption position (relative to full screen in px)*/
    .hover-group-sound-engineering .overlay-caption-en {
        transform: translate(1300px, 227px);
    }

    .hover-group-sound-engineering .overlay-caption-de {
        transform: translate(1300px, 227px);
    }

    /*take me elseweher - the lamp*/
    /*caption position (relative to full screen in px)*/
    .hover-group-footer-nav-path .overlay-caption-en {
        transform: translate(950px, 370px);
    }

    .hover-group-footer-nav-path .overlay-caption-de {
        transform: translate(950px, 370px);
    }

    /************************************/
    /*                PAGES             */
    /************************************/
    /*about page*/
    .about-wrapper {
        /*caption position (relative to full screen in px)*/
        .hover-group-footer-nav-path .overlay-caption-en {
            transform: translate(1000px, 693px);
        }

        .hover-group-footer-nav-path .overlay-caption-de {
            transform: translate(1000px, 693px);
        }
    }

    /*sound engineering page*/
    .sound-engineering-wrapper {
        /*caption position (relative to full screen in px)*/
        .hover-group-footer-nav-path .overlay-caption-en {
            transform: translate(1240px, 227px);
        }

        .hover-group-footer-nav-path .overlay-caption-de {
            transform: translate(1300px, 227px);
        }
    }

    /*****************************************/
    /*            CATEGORY PAGES             */
    /*****************************************/

    /*music*/
    .category-wrapper-music {
        /*caption position (relative to full screen in px)*/
        .hover-group .overlay-caption-en {
            transform: translate(680px, 560px);
        }

        .hover-group .overlay-caption-de {
            transform: translate(750px, 560px);
        }
    }

    /*video*/
    .category-wrapper-video {
        /*caption position (relative to full screen in px)*/
        .hover-group .overlay-caption-en {
            transform: translate(800px, 600px);
        }

        .hover-group .overlay-caption-de {
            transform: translate(870px, 600px);
        }
    }

    /*text*/
    .category-wrapper-text {
        /*caption position (relative to full screen in px)*/
        .hover-group .overlay-caption-en {
            transform: translate(750px, 1000px);
        }

        .hover-group .overlay-caption-de {
            transform: translate(820px, 1000px);
        }
    }

    /*field recordings*/
    .category-wrapper-field-recordings {
        /*caption position (relative to full screen in px)*/
        .hover-group .overlay-caption-en {
            transform: translate(1275px, 765px);
        }

        .hover-group .overlay-caption-de {
            transform: translate(1350px, 765px);
        }
    }

    /*analog photography*/
    .category-wrapper-analog-photography {
        /*caption position (relative to full screen in px)*/
        .hover-group .overlay-caption-en {
            transform: translate(200px, 910px);
        }

        .hover-group .overlay-caption-de {
            transform: translate(260px, 910px);
        }
    }
}