/*
Theme Name: Kalium - HoJa Main
Theme URI: https://laborator.co/themes/kalium/
Author: Johannes Merz
Author URI: 
Description:
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

/* Sil-ben-tren-nung */

body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Über Uns Page */

.page-id-341 .vc-container {
    background: white;
    color: black;
}

.page-id-341 p,
.page-id-341 a {
    color: black !important;
}

/* RESETS */

/* removes negative margins that mess up mobile view */
.row {
    margin: 0 !important;
}

.site-footer .footer-bottom-content a {
    color: black;
}

/* 
TYPO 
*/

/* .title h1 {
    font-weight: 400 !important;
} */
.section-title {
    margin-bottom: 0px !important;
}

.section-title h1 {
    font-size: 40px;
    text-transform: uppercase;
}

.project_subheading h2 {
    font-size: 28px;
    margin-top: 0 !important;
    letter-spacing: 0.03em;
    color: rgb(215, 215, 215);
}

.project_subheading {
    margin-bottom: 1.5em !important;
}

.project-info h3,
.project-info h4 {
    text-transform: uppercase;
    font-size: 20px;
    font-style: normal;
    color: white;
    font-weight: normal;
}

.item-info h4 {
    text-transform: uppercase;
    font-size: 30px;
    font-style: normal;
    color: white;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 900;
}

.item-info h5 {
    font-family: "Noto Serif", serif;
    font-size: 20px;
    font-style: normal;
    color: #cccccc;
}

.project_log-line {
    font-family: "Libre Franklin", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    margin-bottom: 50px !important;
}

.project_log-line div {
    margin-top: 10px;
    font-style: normal;
    font-size: 1.5rem;
    font-family: "Libre Franklin", sans-serif;
    letter-spacing: 0.08em;
    color: #cccccc;
}

.page-id-35 h3 {
    /* kontakt */
    font-weight: 500;
}

/* 
LINKS 
*/

.hoja-link-styles a {
    color: white;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 312 511.42"><path fill="white" fill-rule="nonzero" d="M35.54 0 312 252.82 29.84 511.42 0 478.8l246.54-225.94L5.7 32.62z" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right 16px;
    background-size: 8px;
    padding-right: 32px;
    transition: all 300ms ease-out;
    overflow: visible;
}

.hoja-link-styles a:hover {
    /* padding-right: 45px !important; */
    background-size: 10px;
    text-decoration-color: black;
    background-position: center right 0px;
    /* letter-spacing: 0.05em; */
}

.hoja-link-styles a:hover::after {
    width: calc(100% - 32px);
}

.hoja-link-styles a::after {
    /* background-color: #255D72; */
    /* width: 25px; */
}

/*
    NAVBAR
*/

.header-block a,
.header-block .sn-skin-default .sn-text {
    color: white !important;
}

.header-search-input.menu-skin-main .search-icon a svg {
    fill: white;
}

.header-block__items-row {
    width: 100%;
}

.header-block__item--type-raw-text {
    flex-grow: 1;
}

.header-search-input.menu-skin-main .search-field input {
    color: black !important;
}

.header-search-input.menu-skin-main .search-field input::placeholder {
    color: red !important;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #909;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #909;
    opacity: 1;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #909;
    opacity: 1;
}
:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #909;
}
::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #909;
}

::placeholder {
    /* Most modern browsers support this now. */
    color: #909;
}

/*
    FRONTPAGE
*/

.main_video_container {
    height: 100vh;
}

.main_video_container .main_video {
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

.intro_text-box {
    position: absolute;
    top: calc(100vh - 150px);
    left: 0;
    text-align: left;
    vertical-align: middle;
    line-height: 20px;
    padding: 40px;
    pointer-events: none;
    width: 100%;

    opacity: 0;
    animation: intro-text-fade-in 500ms ease-in-out 1000ms forwards;
}


/* Scroll-Button unterhalb des Textes */
.intro_scroll-button {
    position: absolute;
    top: 30px;
    left: 95%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    padding: 0;

    color: inherit;
    font: inherit;
    font-size: 46px;
    line-height: 1;

    background: transparent;
    border: 0;
    cursor: pointer;

    transform: translateX(-50%);
    animation: intro-scroll-arrow 2000ms ease-in-out infinite;

    /* Button wird erst nach dem Fade-in anklickbar */
    pointer-events: auto;
}

.intro_scroll-button span {
    display: block;
    transform: translateY(-6px);
}

.intro_scroll-button:hover {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.15);
}

.intro_scroll-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 50%;
}

@keyframes intro-text-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes intro-scroll-arrow {
    0%,
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    50% {
        transform: translateX(-50%) translateY(10px) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro_text-box {
        animation: none;
        opacity: 1;
    }

    .intro_scroll-button {
        animation: none;
    }
}

.intro_text-box h1 {
    margin: 0px 0px;
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* max-width: 400px; */
    /* border-bottom: 1px solid white; */
    /* margin-bottom: 40px; */
    /* text-align: left; */
}

@media only screen and (max-width: 768px) {

    .intro_text-box  {
        top: calc(100vh - 220px);
    }

    .intro_text-box h1 {
        font-size: 28px;
    }
}


/* FRONTPAGE */
.map-vid_container {
    position: relative;
    width: 100vw;
    height: 300px;
    /* margin-top: -35px; */
}

.map-vid_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}

.map_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map_text-box {
    position: absolute;
    bottom: calc(47% + 30px);
    right: 48%;
    background: rgb(31, 31, 31);
    padding: 10px 20px;
    line-height: 2;
}

.map_text-box::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    right: 0%;
    border: solid 30px;
    border-left: solid 60px;
    border-right: solid 0px;
    border-color: rgb(31, 31, 31) transparent transparent transparent;
}

.wpb_wrapper .lab-portfolio-items {
    margin-bottom: 20px !important;
}

.wpb_content_element {
    margin-bottom: 0px;
}

#portfolio-1-container {
    padding: 0 9px !important;
}

.sub_heading_frontpage {
    margin-top: 50px !important;
    display: block !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    

}

.sub_heading_frontpage h2 {
    font-size: 28px;
    letter-spacing: 0.03em;
    color: rgb(215, 215, 215);
}

.btn_all_productions {
    display: block !important;
    width: fit-content;
    margin-left: auto;
    margin-right: 24px;
    /* margin-right: auto; */
    background: transparent !important;
    color: white !important;
    border: 2px white solid !important;
}

/* .hoja-award-carousel img {
    filter: grayscale(1);
}
.hoja-award-carousel .vc_item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hoja-award-carousel .vc_carousel-inner .vc_carousel-slideline {
    max-height: 200px;
} */

/* 
    KONTAKT
*/

.hoja-contact-mail-img {
    max-width: 300px;
}

/* 
    ÜBER UNS
*/

/* 
    LOOP
*/
/* 
#portfolio-1 > div:nth-child(even) {
    background: rgb(31, 31, 31);
}

#portfolio-1 > div:nth-child(even) .item-box {
    flex-direction: row-reverse;
}

#portfolio-1 > div:nth-child(even) .item-info {
    padding-right: 100px;
    padding-left: 0px;
}

.portfolio-heading {
    padding-left: 50px !important;
    padding-top: 30px !important;
}

.item-box {
    display: flex !important;
    padding: 30px 50px;
}

.item-box > .item-thumb {
    height: auto;
    width: 50%;
    padding: 0px 0px;
}

.item-info {
    padding-left: 100px;
    width: 30%;
    min-width: 450px;
    /* text-align: justify; /*
} */

/* .item-info h3 {
    margin-top: 0px;
}

.item-info .hoja a {
    margin-top: 40px;
    float: right;
    text-align: right;
    letter-spacing: 0.03em;
    font-weight: 400;
    text-transform: uppercase;
}

.item-info > p {
    padding: 20px 0px;
    text-align: justify;
}  */

/* SINGLE */

/* .project-info-container {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    margin-bottom: 80px;
} */

/* .single-portfolio .title {
    margin-bottom: 0px !important;
}

.single-portfolio h3, 
.single-portfolio h4
{
    font-family: "Chivo", sans-serif;
    font-weight: bold;
    font-size: 15px;
} */

.portfolio-single-container {
    margin: 0 !important;
    margin-top: 50px !important;
    padding-left: 30px;
}

.portfolio-single-gallery {
    margin: 0 !important;
    /* max-width: 800px !important; */
}

.single-portfolio .page-container {
    margin: 0px !important;
}

.single-portfolio-holder .title h1 {
    margin-top: 0px !important;
}

.post-formatting {
    padding-right: 20px;
    text-align: justify;
}

.post-formatting div {
    margin-bottom: 40px;
}

.project_intro-text > p {
    padding-bottom: 10px;
}

.project_copyright span {
    font-style: italic;
    font-weight: light;
    font-size: 14px;
    opacity: 0.7;
}

.project_copyright .project_copyright-text {
    font-style: italic;
    display: block;
}

.project_copyright .project_copyright-year {
    /* font-size: 16px; */
}
.project_copyright .project_partners span {
    display: block;
    margin-top: 0.1em !important;
}

.collapsible_container h4 {
    cursor: pointer;
}

.collapsible_container h4:hover {
    filter: brightness(60%);
}

.collapsible_container h4::after {
    content: "\2304";
    /* content: "\142F"; */
    display: inline;
    margin-left: 7px;
}

.collapsible_container .collapsible {
    overflow: hidden;
    transition: height 200ms ease-in;
}

.collapsible_container .collapsible p {
    margin-top: 0.8em;
}

.project_crew span {
    display: block;
}

.project_crew .crew_title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: white;
    margin-bottom: 0.1em;
}

.ion-icon {
    width: 3rem;
    height: 3rem;
}

/* remove Video controls */
.vjs-control-bar {
    display: none !important;
}

.vjs-big-play-button {
    left: 5% !important;
    top: 10% !important;
    color: rgba(25, 37, 58, 0.8) !important;
}

.header-block__item--type-open-top-menu {
    background: rgba(25, 37, 58, 1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.header-block__item {
    justify-content: center;
}

.toggle-bars__bar-line {
    /* background-color: rgb(127,9,25); */
    background-color: white !important;
}

.wpb_gallery_slides {
    max-height: 100vh;
    min-height: 100vh;
}

.wpb_gallery_slides .flex-viewport {
    max-height: calc(100vh - 10px);
    min-height: calc(100vh - 10px);
}

.wpb_gallery_slides .flex-viewport a {
    min-width: calc(100vw - 5px);
}

/* Responsive */

/* @media only screen and (max-width: 992px) {
    .item-info {
        padding-left: 50px;
        width: 50%;
        min-width: 50%;
    }

    #portfolio-1 > div:nth-child(even) .item-info {
        padding-right: 50px;
        padding-left: 0px;
    }

    .item-thumb {
        width: 50%;
        min-width: 50%;
    }

    .header-block__items-row {
        justify-content: flex-end;
    }
} */
/* 
@media only screen and (max-width: 768px) {
    .front_video {
        width: 250vw;
    }

    .intro_text-box {
        height: auto;
        left: 0px;
        width: 100%;
    }

    .item-box {
        flex-direction: column;
        padding: 30px 0px;
    }

    #portfolio-1 > div:nth-child(even) .item-box {
        flex-direction: column;
    }

    .item-thumb {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .item-info {
        padding: 0px 30px;
        width: 100%;
    }

    #portfolio-1 {
        margin-bottom: 125px;
    }

    #portfolio-1 > div:nth-child(even) .item-info {
        padding: 0px 30px;
    }

    .portfolio-holder .portfolio-item {
        padding: 0px !important;
    }

    .vc-row-container .vc_custom_1674824740968 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
} */

/* PORTFOLIO PAGE */

.portfolio-title-holder .section-title {
    display: none;
}

/* FOOTER */

footer a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* LINKED IN FEED */

.linkedin_feed a {
    display: none !important;
    opacity: 0 !important;
}


a::after {
    content: "" !important;
    text-decoration-color: black !important;
    text-underline-offset: 10px !important;
    border-bottom: none !important;
}