/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Default values for standard classes we use */
:root {
	--ws-border-radius: 10px;
}

.page .color-white {
	color: #fff !important;
}

.page .rounded, .page .rounded * {
	border-radius: var(--ws-border-radius);
}

body.ws-alternativeheader div#content {
    padding-top: 0 !important;
}

body.ws-alternativeheader div#content {
    padding-top: 0 !important;
    margin-top: -100px !important;
}

body .banner-text h1 {
    font-size: 23px !important;
    font-weight: 900 !important;
}

body .work-grid {
    display: grid;
}

a.work-grid__item-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

a.work-grid__item-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: 150ms;
}

a.work-grid__item-wrapper:hover::after {
    background-color: rgb(0 0 0 / 20%);
}

.work-grid__item {
    height: 400px;
}

a.work-grid__item-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
}

h3.work-grid__item-title {
    font-size: 21px;
	z-index: 10;
    position: relative;
}

body.ws-alternativefooter div#content {
    padding-bottom: 0 !important;
}

body .copyright-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

body .main-title a {
    text-decoration: line-through;
    font-weight: 500;
}

/* Work */
.single-work div#page {
    margin: 0 !important;
    max-width: 100vw;
}

.single-work div#content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.single-work .site-header {
    background: transparent;
}

.work-banner {
    height: 75vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.work-banner::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #060606 0%, rgba(6, 5, 8, 0) 50%);
    z-index: 1;
}

.work-scroll-down {
    position: absolute;
    bottom: 20px;
    z-index: 10;
    cursor: pointer;
    animation: bounce2 3s ease infinite;
}

.home-scroll-down {
    position: relative;
    z-index: 10;
    cursor: pointer;
    animation: bounce2 3s ease infinite;
	width: max-content;
	margin: auto;
	margin-top: -100px;
}

.work-videos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 35px;
    min-height: 500px;
    width: 75%;
}

.work-text-content {
    width: 25%;
    height: 670px;
    overflow: auto;
}

/* width */
.work-text-content::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.work-text-content::-webkit-scrollbar-track {
    background: #060606;
    border-radius: 10px;
}

/* Handle */
.work-text-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Handle on hover */
.work-text-content::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-radius: 10px;
}

.work-video {
    display: block;
    width: calc(50% - 18px);
    position: relative;
}

div#work-content {
    width: 1700px;
    margin: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
    max-width: 100%;

}

.work-row-content {
    display: flex;
    gap: 35px;
    margin-top: 75px;
    align-content: center;
}

.work-stills {
    margin-top: 75px;
}

.work-stills-gallery {
    display: flex;
    flex-direction: row;
    gap: 35px;
    flex-wrap: wrap;
    justify-content: center;
}

.work-still {
    width: calc(33% - 18px);
}

.work-crew {
    display: flex;
    text-align: center;
    align-content: center;
}

table.work-crew-list {
    width: max-content;
    text-align: left;
    max-width: 100%;
    height: max-content;
    margin: 0 -8px;
}

.work-banner-content {
    z-index: 10;
}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-7.5px);}
}

.work-stills h2 {
    text-align: center;
}

.work-video.big-vid {
    width: 100%;
}

.work-video.big-vid iframe {
    height: 670px !important;
}

span.stth {
	display: inline-block;
	position: relative;
	color: #6b6b6b;
	font-weight: 500 !important;
}

span.stth::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #6b6b6b;
    bottom: 11px;
}
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* SCROLLER */
.scroller {
    max-width: 100%;
}

.scroller__inner {
    padding-block: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: -webkit-linear-gradient(
            90deg,
            transparent,
            white 50%,
            white 50%,
            transparent
    );
    mask: linear-gradient(90deg, transparent, white 50%, white 50%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="semi-fast"] {
    --_animation-duration: 30s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    font-size: 40px;
    text-transform: uppercase !important;
}

body .home-banner::after {
    content: "";
    display: block !important;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to top, #060606 0%, rgba(6, 5, 8, 0) 50%);
    z-index: 1;
    visibility: visible !important;
    left: 0;
    bottom: 0;
}


/* Only desktop */
@media only screen and (min-width: 1280px) {}

/* 110% size */
@media (min-width: 1701px) and (max-width: 1919px) {}

/* Laptop L (120%) size */
@media (min-width: 1501px) and (max-width: 1700px) {
    .work-video.big-vid iframe {
        height: 591px !important;
    }
    .work-still {
        width: calc(33% - 19px);
    }
    .work-text-content {
        height: 592px;
    }
}

/* Macbook screens size (1440x768) */
@media (min-width: 1401px) and (max-width: 1500px) {
    .work-video.big-vid iframe {
        height: 575px !important;
    }
    .work-still {
        width: calc(33% - 19px);
    }
    .work-text-content {
        height: 566px;
    }
}

/* Laptop S/M (150%) sizes */
@media (min-width: 1200px) and (max-width: 1400px) {
    .work-video.big-vid iframe {
        height: 500px !important;
    }
    .work-still {
        width: calc(33% - 20px);
    }
    .work-text-content {
        height: 693px;
    }
}

/* Tablet/iPad landscape mode */
@media (min-width: 901px) and (max-width: 1199px) {
    .work-row-content {
        flex-direction: column;
    }
    .work-row-content > div {
        width: 100%;
    }
    .work-stills-gallery {
        gap: 15px;
    }
    .work-still {
        width: calc(33% - 7px);
    }
}

/* Tablet/iPad portrait mode */
@media (min-width: 501px) and (max-width: 900px) {
	/* Default tablet flex rules for WPBakery Rows. Use class tab-flexcol or tab-flexcol-rev on a row to have it below each other. */
	body .tab-flexcol {
		display: flex;
		flex-direction: column;
	}
	body .tab-flexcol-rev {
		display: flex;
		flex-direction: column-reverse;
	}
	body .tab-flexcol > div, body .tab-flexcol-rev > div {
		width: 100%;
	}
    .work-row-content {
        flex-direction: column;
    }
    .work-row-content > div {
        width: 100%;
    }
    .work-videos > div {
        width: 100%;
    }
    .work-videos > div > iframe {
        height: 406px !important;
    }
    .work-stills-gallery {
        gap: 15px;
    }
    .work-still {
        width: calc(50% - 8px);
    }
}

/* Mobile general */
@media (max-width: 500px) {
    body .work-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    body .work-grid__item {
        height: 300px !important;
    }
    .work-row-content {
        flex-direction: column;
    }
    .work-row-content > div {
        width: 100%;
        gap: 15px;
    }
    .work-videos > div {
        width: 100%;
        height: 220px;
    }
    .work-videos > div > iframe {
        height: 176px !important;
    }
    .work-stills-gallery {
        gap: 15px;
    }
    .work-still {
        width: 100%;
    }
    body .copyright-bar {
        flex-direction: column;
        align-items: center;
    }
    div#footer-widgets {
        display: none !important;
    }
    .work-video.big-vid iframe {
        height: 176px !important;
    }
    .work-videos {
        min-height: 180px;
    }
    .tag-list li {
        font-size: 30px;
    }
}

/* iPhone X en kleiner */
@media (max-width: 380px) {}