/*
 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.2.0
*/

/* Custom cursor 

body {
  cursor: url('https://grillifilms.hello.zoner.dev/wp-content/uploads/2021/05/pointer-grilli-svg.svg'), default;	
}

body a {
  cursor: url('https://grillifilms.hello.zoner.dev/wp-content/uploads/2021/05/pointer2-grilli-svg.svg'), pointer;	
}

*/



/* Navi */
@media (min-width: 769px) {
    .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;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
        margin-right: auto;
    }
}

/* Header */
#masthead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
}

#sticky-navigation {
    background-color: #fff;
}

#sticky-navigation .site-branding p a {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sticky-navigation .site-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

}

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: none;
    border-bottom: 1px solid #000;
}

.main-navigation:not(.is_stuck) .sticky-branding  {
	display: none;
}

.site-header {
    border-bottom: 1.3px solid #000;
}

.main-navigation .main-nav ul li a {
    font-family: "freight-text-pro", Sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
}

.site-branding p {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navigation-branding .main-title a {
    font-family: "neue-haas-grotesk-display", Sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

/*mobile-menu */

.mobiletitle a {
	font-family: "neue-haas-grotesk-display" !important;
	font-size: 23px !important;
	letter-spacing: 1px;
}

.slideout-exit:before {
	content:'close';
	font-family: "freightdispl";
	font-size: 16px !important;
	text-transform: uppercase;
	position: absolute;
    right: 10px;
    top: 18px;
}

.slideout-exit .gp-icon {
    display: none !important;
}

.slideout-navigation.do-overlay .inside-navigation {
    padding: 0% 0% 10% 0% !important;
}

.menu-toggle .gp-icon {
    display: none;
}

.menu-works a {
    font-family: "neue-haas-grotesk-display" !important;
    font-size: 37px !important;
	font-weight: 500 !important;
}

.menu-prodserv a {
    font-family: "freight-display-pro", Sans-serif !important;
	font-weight: 200 !important;
    font-size: 43px !important;
	line-height: 1 !important;
}

.menu-people a {
    font-family: "neue-haas-grotesk-display" !important;
    font-size: 37px !important;
	font-weight: 400 !important;
}

.menu-about a {
    font-family: "freight-display-pro", Sans-serif !important;
	font-weight: 200 !important;
	font-style: italic;
    font-size: 43px !important;
}

.menu-culture a {
    font-family: "freight-display-pro", Sans-serif !important;
	font-weight: 200 !important;
	font-size: 43px !important;
}

.menu-contact a {
    font-family: "neue-haas-grotesk-display", Sans-serif !important;
	font-weight: 200 !important;
	font-size: 37px !important;
}

.slideout-widget .widget_text {    
	text-transform: uppercase !important;
}

.widget_text .textwidget a {
    margin-top: -30px;
} 

/* Footer */

/* Home */

body.home #masthead {
    margin-bottom: -61px;
}

body.home #masthead .main-title a {
	color: #fff;
}

body.home #masthead .main-navigation .main-nav ul li a {
    color: #ffffff;
}

body.home .site-footer {
display:none;
}

.premium-video-box-video-container iframe {
    background-color: #fff;
}
.premium-video-box-video-container {
    border-radius: 20px;
    background-color: #fff !important;
}

/* works page 
 * works custom post type */
#works-page .separate-containers .site-main {
margin: 0px;
}

.workspage .entry-content {
    text-align: center;
    margin-top: 40px;
}

h1.home-title {
    width: -webkit-fill-available;
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid #000;
    overflow: hidden;
    text-align: center;
    margin-top: -10px;
    font-family: "freight-display-pro", Sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 39px !important;
    padding-bottom: 8px;
}
h1.home-title span {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-weight: 400;
    text-transform: uppercase;
	font-size: 90%;
}

.works-credits h6 {
    font-size: 13px;
    margin-bottom: 0;
}

.works-credits h5 {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 20px;
}

.single-works h3 {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 10px;

}

#works-film, #works-film > div, , #works-film a {
	cursor: pointer !important;
}

/* works films */

/*
.griditem  {
    position: relative;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
    overflow: hidden;
    width: 336px;
    height: 186px;
    border-radius: 15px;
    margin: 10px;
    max-width: 99%;
}

.video {
    position: relative;
    margin-top: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}
*/
.video {
    z-index: 1;
    display: grid;
	visibility: hidden;
    border-radius: 15px;
    float: left;
    overflow: hidden;
}

.video video {
     display: block;
}


.griditem {
    position: relative;
    background-color: #777;
    overflow: hidden;
    width: auto;
    height: auto;
    border-radius: 15px;
    margin: 10px;
    max-width: 100%;
    max-height: 100%;
}



.overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}

/*
.titles {
    display: table;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .1s ease;
    -moz-transition: opacity .25s ease;
    background: rgb(0 0 0 / 0%);
    color: #FFFFFF;
    text-decoration: none;
}


.titles p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 25px;
    font-family: helvetica;
}
*/

.imgspacer {
    width:100%;
	opacity: 1;
}

.griditem:hover .video {
	visibility:visible;
}

/*
.griditem:hover .imgspacer {
    display: none;
}

.griditem:hover .imgspacer {
    opacity: 0;
}
*/

.imgspacer:hover {
  -webkit-transition: opacity 3s ease-out;
  -moz-transition: opacity 3s ease-out;
  -ms-transition: opacity 3s ease-out;
  -o-transition: opacity 3s ease-out;
  transition: opacity 3s ease-out;
    opacity: 0;
}

 .works-post {
    padding: 10px;
    width: 32%;
    display: inline-block;
    vertical-align: top;
}

.works-post h6 {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    padding-top: 30px;
    margin-bottom: 0px;
}

.works-description {
    font-family: "freight-text-pro", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

.ajax-load-more-wrap.white .alm-load-more-btn {
    background-color: #fff;
    color: #000000 !important;
    border: none !important;
    overflow: hidden;
    -webkit-transition: none;
    transition: none;
    outline: 0;
    box-shadow: none !important;
    font-family: "freight-text-pro", Sans-serif;
    font-style: italic;
    font-size: 23px;
}

.imgspacer img {
	display:none;
}

/* Artikkeli */
.single-post h6 {
	font-family: "freight-text-pro", Sans-serif;
	font-size: 18px;
}

.single-post h6 a {
	text-decoration: underline;
}


/* People */

.dir-img:not(.activeIcon) {
opacity: 0;
transition: opacity .5s;
pointer-events:none;
}

.dir-video:not(.activeIcon) {
opacity: 0;
pointer-events:none;
transition: .5s;
}

.dir-img.activeIcon {
opacity:1;
transition: .5s;
transition-timing-function: linear;
}

.dir-video.activeIcon {
opacity:1;
transition: .5s;
transform: scale(1.0);
transition-timing-function: linear;
}


#director-title a:hover {
    font-family: "neue-haas-grotesk-display", Sans-serif;
    font-size: 35px;
    text-transform: uppercase;
    text-decoration: underline;
}

/*
#director-title:hover + .dir-img {
display:block;
}

#director-title:hover ~ .dir-img {
display:block;
}
*/

/* Production services */
.projects-credits h6 {
    font-size: 13px;
	color: #ffffff !important;;
    margin-bottom: 0;
}

/* Works gallery */


#works-gallery  .elementor-custom-embed-image-overlay:hover {
  transform: scale(1.04); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transition: all 0.6s ease-in-out; 

}

/* Responsive */

@media only screen and (max-width: 1200px) {
.inside-header {
    padding: 0px 20px 0px 20px;
}

.main-navigation .main-nav ul li a {
    font-size: 16px;
}
}

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

.navigation-branding .main-title, .mobile-header-navigation .site-logo {
    margin-left: 0px !important;
}

#director-title a:hover {
    font-size: 21px;
}

#mobile-header {
    background-color: #fff;
    border-bottom: 1px solid #000;
    position: sticky;
}

#mobile-header p.main-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
}

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

.main-navigation.has-branding .menu-toggle {
    padding-right: 10px !important;
}
}