/***DESKTOPS (X-LARGE SCREEN)
*****************************************************/
@media (min-width: 1920px) {  
}

/***DESKTOPS (LARGE SCREEN)
*****************************************************/
@media (min-width: 1600px) {
}

/***NOTEBOOKS (MEDIUM SCREEN)
*****************************************************/
@media (min-width: 1024px) and (max-width: 1599px) {
}

/***FROM TABLETS TO MOBILES
*****************************************************/
@media (max-width: 1023px) {
    :root {
        /***VIEWPORT HEIGHT***/
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
}

/***TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 1023px)   {
}

/***TABLETS (PORTRAIT)
*****************************************************/
@media (min-width: 768px) and (max-width: 1023px) {
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 767px) {
	:root {
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 0.9rem;
        --fontSizeLarge: 1.2rem;
    }
    /*
    footer .footer_data {
		font-size: var(--fontSizeMedium);
    }
    section.data .data_sheet,
    section.data .data_text {
        font-size: var(--fontSizeMedium);
	}
    */
    section.data {
    	padding: var(--spaceY) var(--spaceX);
    }
    section.data .data_text {
        column-count: 2;
	}
}

/***TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px)  {
    .mobile {
    	display: none;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 0.9rem;
        --fontSizeLarge: 1.5rem;
    }
    .desktop {
    	display: none;
    }
    body#project {
    	overflow-y: scroll;
        display: flex;
        flex-direction: column;
    }
    body#project header {
    	position: static;
        display: inline-block;
    	order: 1;
        min-height: auto;
        padding: var(--spaceY) var(--spaceX) 0;
    }
    
    body#project main.content {
    	order: 3;
    }
    body#project header h1.site_name {
    	font-size: var(--fontSizeMedium)
    }
    header .project_name {
    	margin-top: var(--rowGutterLarge);
    }
    body#project .reel {
    	height: auto;
    }
   	body#project .reel {
    	display: initial;
    }
    body#project .reel .reel_content {
    	display: flex;
        flex-direction: column;
    }
    body#project .reel .reel_content .content_item {
    	height: auto !important;
    }
    body#project .reel .reel_content .content_item:not(.full) {
    	width: 80%;
    	height: auto;
    }
    body#project .reel .reel_content .content_item.full {
    	width: 100%;
    	height: auto;
    }
    body#project footer {
    	position: static;
        display: inline-block;
        order: 2;
        min-height: auto;
        padding: 0 var(--spaceX);
        margin-block: 0 var(--rowGutterLarge);
    }
    footer .footer_data {
		font-size: var(--fontSizeLarge);
        white-space: normal;
    	overflow: auto;
    	text-overflow: initial;
    }
    footer .footer_data_button,
    footer .footer_contact_button {
    	display: none;
    }
    section.data {
    	position: static;
        display: inherit;
        padding: 0 var(--spaceX) calc(var(--rowGutterMedium)*3);
    }
    section.data:not(.pusher) {
    	transform: none;
    }
    section.data .data_sheet {
    	font-size: var(--fontSizeMedium)
    }
    section.data .data_text {
    	column-count: 1;
    	column-gap: var(--colGutter);
    	font-size: var(--fontSizeMedium);
    	margin-top: calc(var(--rowGutterMedium)*3);
    }
    section.data .data_footer {
    	font-size: var(--fontSizeMedium);
    	margin-block: calc(var(--rowGutterMedium)*3) var(--rowGutterMedium);
    }
    .project_footer {
    	padding-inline: var(--spaceX);
        font-size: var(--fontSizeMedium);
        padding-bottom: calc(var(--rowGutterMedium)*1);
    }
}