/*
 * Mobile styles & Breakpoints
 * By Funkhaus - 2016
 * www.funkhaus.us
 *
 * @see https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
 * (min-width: 1800px) == Greater than or equal to 1800px
 * (max-width: 750px) == Less than or equal to 750px 
 * 
 */


/* 
 * Globals
 */
	.is-mobile .work-block .overlay {

	}


/* 
 * Breakpoints 
 */
    /* Cinema Display and larger */
    @media (min-width: 1800px) {

		/* Menu */	    
		.menu li {
			font-size: 54px;
		}
		#menu-overlay .contact-block .title {
			font-size: 30px;	
		}
		#menu-overlay .contact-block .entry {
			font-size: 18px;
		}
		
		.work-detail .entry p {
			max-width: 800px;
		}
    }

    /* Smaller than Desktop HD */
    @media (max-width: 1000px) {

		/* Globals */
		.home #logo,
	    #logo {
		    left: 80px;
	    }
		.home .menu-button,
	    .menu-button {
		    right: calc(80px - 25px);
	    }
	    .close {
		    right: 80px;
	    }
	    
		/* Menu */
		.home #menu-overlay,
		#menu-overlay {
			padding: 130px 80px 0 80px;
		}
		
		/* Homepage/Work Grid */
		.grid-block .title {
			left: 80px;
			bottom: 12px;
			line-height: 1.3;
		}
		.grid-block .project-link {
			right: 80px;
			bottom: 16px;
		}		

		/* Work Detail */
		main.work-detail {
			padding: 110px 80px 90px 80px;			
		}

		/* Reel Detail */		
		.reel-detail .stage {
			padding: 110px 80px 0 80px;
		}
		.reel-detail .meta {
			padding: 16px 0 30px 0;
		}
		
		/* Category */
		main.category {
			padding: 165px 75px 90px 75px;
		}

		/* Contact */
		main.contact {
			padding: 180px 80px 90px 80px;
		}
		main.contact .contact-block {
			margin-right: 40px;
		}
		.contact-block .entry {
			font-size: 18px;
		}
		.gallery-block {
			width: calc(100% / 4);
		}
		.gallery-block:nth-child(n+5) {
			display: none;
		}
		
		/* Overlay Gallery */
	    .overlay-gallery .slide {
		 	background-color: #333333;
	 	}		
		.overlay-gallery .slide > img {
			object-fit: contain;
		}

    }

    /* Smaller than tablet */
    @media (max-width: 750px) {

		/* Globals */
		#logo {
			left: 20px;
			top: 20px;
		}
		#logo .svg {
		 	height: 45px;
		 	width: 104px;
		}
		.menu-button {
			top: calc(23px - 20px);
			right: calc(20px - 25px);
		}

		/* Small Header */	 	
	 	.small-header #logo {
		 	left: 20px;
	 	}
		.small-header #logo .svg {
		 	height: 45px;
		 	width: 104px;
		}
		.small-header .close {
			right: 20px;
			top: 39px;
		}

		/* Menu */
		.home #menu-overlay,
		#menu-overlay {
			padding: 65px 20px 0 20px;
			height: 75vh;
		}
		.main-menu a {
			padding-left: 0 !important;
		}
	 	.contact-block-wrapper {
		 	display: none;
	 	}

		/* Homepage/Work Grid */
		.home #logo {
			left: 20px;
			top: 20px;
		}
		.home .menu-button {
			right: calc(24px - 25px);
		}
		.home #logo .svg {
		 	height: 45px;
		 	width: 104px;
		}
		.work-grid .grid-block {
			width: 100%;
			display: block;
			padding-bottom: 56.25%;
		}
		.grid-block {
			padding-bottom: 56.25%;
		}
		.work-grid .grid-block .title,
		.grid-block .title {
			left: 20px;
			bottom: 12px;
			line-height: 1.3;
		}
		.grid-block .title .line-1 {
			font-size: 18px;
		}
		.grid-block .title .line-2 {
			font-size: 24px;
		}
		.grid-block .project-link {
			display: none;
		}
		
		/* Work Detail */
		main.work-detail {
			padding: 100px 20px 40px 20px;
		}
		.browse {
			display: none;
		}
		.work-detail .title {
			font-size: 22px;
			margin-top: 30px;
			margin-bottom: 40px;
		}
		.work-detail .entry h2 {
			font-size: 32px;
		}
		.work-detail .entry p {
			font-size: 18px;
		}
		
		/* Reel Detail */
		.not-mobile .reel-detail .stage {
	        padding: 100px 20px 0 20px;
		}
		.reel-detail .stage {
	        padding: 100px 10px 0 10px;
		    height: calc(100vh - 165px);
		    display: flex;
		}
		.is-mobile .reel-detail .media {
			width: 100%;
		}

		/* Fun/Category */
		main.category {
			padding: 100px 20px 40px 20px;
		}
		.post-block {
			display: block;
			max-width: 100% !important;
			margin: 0 0 10px 0;
		}
		.is-mobile .post-block .content {
			bottom: 15px;
			opacity: 1;
		}
		.post-block .title {
			font-size: 20px;
		}
		.post-block .entry {
			font-size: 14px;
		}
		
		/* Overlay Gallery */
		.overlay-gallery {
			padding: 0;
		}
		.overlay-gallery .slides {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.overlay-gallery .content {
			left: 20px;
			right: 20px;
		}
		.overlay-gallery .title {
			font-size: 22px;
		}
		.overlay-gallery .entry {
			font-size: 18px;
		}
		
		/* Culture */
		main.culture {
			padding: 100px 20px 40px 20px;
		}
		.culture h1 {
			font-size: 32px;
		}
		.culture h2 {
			font-size: 28px;
		}
		.culture h3 {
			font-size: 22px;
		}
		.culture-section {
			flex-direction: column;
		}
		.culture-section > div {
			width: 100%;
		}
		.culture-section:nth-child(2n+1) > .culture-image,
		.culture-image {
			padding-left: 0;
			padding-right: 0;
		}
		.culture-section .entry,
		.culture-section:nth-child(2n+1) .entry {
			padding-left: 0;
			padding-right: 0;
		}
		.culture-section:nth-child(2n+1) > .culture-image {
			order: unset;
		}
		
		/* Contact */
		main.contact {
			padding: 100px 20px 40px 20px;
		}
		main.contact > .entry,
		.contact-block .entry {
			font-size: 18px;
		}
		main.contact > .entry h2 {
			font-size: 32px;
			margin-bottom: 30px;
		}
		.contact .tour-link {
			font-size: 26px;
			margin-top: 30px;
		}
		.contact section {
			margin-top: 40px;
		    -webkit-flex-direction: column;
		    -ms-flex-direction: column;
		    flex-direction: column;
		}
		main.contact .contact-block {
			margin-top: 20px;
			width: 100%;
			margin-right: 0;
		}
		.contact-block .entry {
			font-size: 18px;
		}
		.contact-block .entry .map {
			margin-top: 0.5em;
		}
		.gallery-block {
			width: calc(100% / 2);
		}
		.gallery-block:nth-child(n+3) {
			display: none;
		}
    }

    /* Smaller than tablet and landscape */
    @media (max-width: 750px) and (orientation: landscape){

		/* Menu */
		.home #menu-overlay,
		#menu-overlay {
			padding: 65px 27px 0 23px;
			height: 90vh;
		}
		.main-menu {
			line-height: 1.7;
		}
		.menu li {
			font-size: 28px;
		}
	 	.contact-block-wrapper {
		 	display: inline-block;
	 	}
	 	.contact-block:first-child {
		 	margin-right: 70px;
	 	}
	 	#menu-overlay .contact-block .title {
		 	font-size: 20px;
		 	margin-bottom: 0;
	 	}
		#menu-overlay .contact-block .entry p {
			margin: 10px 0;
		}
		.contact-block .entry .email {
			margin-top: 0;
		}
		
		/* Reel Detail */
		.reel-detail .stage {
	        padding: 90px 20px 0 20px;
		    height: auto;
		    display: block;
		}
		.reel-detail .meta {
			padding: 15px 0;
		}
		.reel-detail .title {
			font-size: 16px;
			line-height: 1.3;
		}
		.reel-detail .title .line-2 {
			font-size: 20px;
		}

    }