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



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

        .grid-block {
            width: 25%;
        }
        .post-block {
            width: 25%;
        }
        
        /* The Lab */
        .lab-block,
		.section-grid .grid-sizer {
			width: 25%;
		}            
		.section.section-lab-text {
			font-size: 24px;
		}   
		.section-lab-text h2 {
			font-size: 78px;
		}
		.section-lab-text h3 {
			font-size: 70px;		
		}		
		 
    }

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

        /* Grid View */
        .grid-block {
            width: 33.33%;
        }
        .post-block {
            width: 33.33%;
        }
        .lab-block,
		.section-grid .grid-sizer {
			width: 33.33%;
		}        
    }

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

        /* Grid View */
        .grid-block {
            width: 50%;
        }
        .post-block {
            width: 50%;
        }
        .lab-block,
		.section-grid .grid-sizer {
			width: 50%;
		}             

    }
    
    /* Small screens */
	@media (max-width: 1024px) {
		/* The Lab */
		.section-lab-text .entry .svg,
		.section-contact .svg {
			max-width: 80%;
			height: auto;
		}
	}

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

        /* Globals */
        #header {
            top: 0;
            left: 0;
            right: 0;
            height: 75px;
        }
        #overlay {
            background-color: #ffffff;
        }
        #footer {
            padding: 0 25px;
            font-size: 14px;
        }

        /* Header */
        .hamburger {
            left: 5px;
            top: 5px;
        }
        .breadcrumb {
            left: 70px;
            right: 80px;
        }
        .breadcrumb h2 {
            display: none;
        }
        .return-link {
            top: -1.5px;
        }
        .logos {
            top: 15px;
            right: 25px;
        }
        .logos .logo {
            display: none;
        }
        .logos .logo-a {
            display: block;
        }
        .logos .logo-a .svg {
            height: 40px;
            width: auto;
        }
        .logos .logo-a:hover path {
            fill: #ffffff;
        }        
        .logos .logo-a:hover .highlight {        
            fill: #D7392D;
        }
        .region-selector {
	        top: 65px;
	        right: 25px;
        }
        .page-header {
            padding: 100px 25px 0;
        }
        .page-header .title {
            font-size: 38px;
        }
        
        
        /* Dark theme */
        .dark-theme .media-player .media {
	        background-color: transparent;
        }
        .dark-theme:not(.floating-header):not(.menu-opened) .logos .logo-a path {
	        fill: #222222;
        }     
        .dark-theme:not(.floating-header):not(.menu-opened) .logos .logo-a .highlight {
	        fill: #ffffff;
        }             

        /* Menu */
        .menu-panel .wrap {
            padding: 80px 25px;
        }
        .main-menu {
            font-size: 20px;
        }

        /* Home */
        .home .title-wrapper {
            padding: 50px 25px;
            width: calc(100% + 60px);
            box-sizing: border-box;
        }
        .home .item .title {
            font-size: 27px;
            word-wrap: break-word;
        }
        .home .item .credits,
        .home .item .sub-title {
            font-size: 16px;
        }
        .home .arrow {
            display: none;
        }

        /* List View */
        .list-view {
            padding: 50px 25px;
        }

        /* Grid Page */
        .grid-view {
            padding: 0 25px;
            margin-top: 40px;
        }
        .grid-block {
            width: 100%;
            display: block;
        }

        /* Real Page */
        .about-entry {
            margin: 110px 25px 40px 25px;
        }
        .reel-page .pagination {
            right: 25px;
        }
        .sidemenu {
            display: none;
        }
        .reel-view .title {
            left: 25px;
            margin-right: 50px;
        }

        /* Media Player */
        .media-header {
            height: 50px;
        }
        .media-header .controls {
            left: 0;
            top: -10px;
            right: 60px;
        }
        .media-player .media {
            top: 50px;
            background-color: transparent;
        }
        
        /* Text Page */
        .text-page .entry {
            padding: 0 25px;
            font-size: 18px;
        }
        .text-page .section .wrap {
            padding: 50px 25px;
        }
        ul.three-column li:nth-child(3),
        ul.three-column li {
            width: 100%;
            text-align: center;
        }
        
        /* The Lab */
        .lab-page .logos .logo-the-lab {
	        height: 20px;
	        width: 135.933px;
        }
        .lab-page .section {
	        padding-left: 25px;
	        padding-right: 25px;	        
        }   
		.section.section-lab-text {
			font-size: 16px;
		}        
        .section-lab-text h3 {
	        font-size: 24px;
        }
        .lab-page .section-grid {
	        padding-right: 0;
	        padding-left: 0;
        }
        .section-grid .grid {
	        margin: 0 25px;
        }
        .lab-block,
		.section-grid .grid-sizer {
			width: 100%;
		}
        .lab-block {
	        padding: 0 0 30px 0;
        }		

        /* Category */
        #content.category {
            margin: 50px 25px;
            padding: 0;
        }
        .post-block {
            width: 100%;
            margin: 0 0 60px 0;
            padding: 0;
        }
        .post-block .title {
            margin: 20px 0;
            text-align: center;
        }
        .post-block .entry {
            text-align: justify;
        }

        /* Single */
        #content.single {
            padding: 100px 25px;
        }
        .single-post .title {
            font-size: 32px;
            margin: 0;
        }
        .single-post .entry {
            margin: 20px 0;
        }
        .single-post .pagination {
            position: static;
            text-align: center;
            margin: 2em 0;
        }
        .single-post .pagination .wrap {
            position: relative;
            right: auto;
            top: auto;
        }
        .single-post .pagination a {
            display: inline-block;
        }
        .single-post .pagination .left {
            position: absolute;
            left: 0;
        }
        .single-post .pagination .right {
            position: absolute;
            right: 0;
        }
        .single-post .adjacent-preview {
            display: none !important;
        }


        /* Contact */
        .contact .section .title {
            margin-right: 25px;
            margin-left: 25px;
            font-size: 24px;
        }
        .contact .entry {
            margin: 0px 25px 10px 25px;
            font-size: 16px;
        }
        .contact .entry h2 {
            margin-bottom: 0;
        }
        .contact .email .svg {
            top: 4px;
        }
        .top-section {
            padding: 80px 0 40px 0;
        }
        .top-section .entry {
            margin: 0 25px 10px 25px;
        }
        .contact .top-section li {
            margin: 20px 0;
            width: 100%;
        }
        .bottom-section .entry {
            margin: 30px 25px;
        }
        #footer span {
            display: block;
            margin-bottom: 5px;
        }
    }

    /* Smaller than tablet and orientation specific */
    @media (max-width: 750px) and (orientation: portrait){
        .media-header .controls .title-wrap {
            position: static;
            margin: 10px 0;
            width: 100%;
        }
    }
    @media (max-width: 750px) and (orientation: landscape){

    }

    /* Short height */
    @media (max-height: 700px) {
        .main-menu {
            font-size: 20px;
        }
        .main-menu a {
            padding: 5px 15px;
        }
    }