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

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

/***NOTEBOOKS (MEDIUM SCREEN)
*****************************************************/
@media (min-width: 768px) and (max-width: 1599px) {
	main.content section.content_col .col_item > .item_header .header_prefix,
    main.content section.content_col .col_item .item_stack > .item_header .header_prefix {
    	position: static;
        transform: translateX(0%);
    }
}

/***FROM TABLETS TO MOBILES
*****************************************************/
@media (max-width: 1023px) {
}

/***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 AND PORTRAIT)
*****************************************************/
@media (max-width: 767px) {
	:root {
        --fontSizeSmall: 0.9rem;
        --fontSizeMedium: 0.9rem;
        --fontSizeLarge: 1.5rem;
        --spaceY: calc(var(--fontSizeSmall) * 1);
    	--spaceX: calc(var(--fontSizeSmall) * 1);
        --headerHeight: calc(var(--spaceY) * 2 + var(--rowGutterSmall) * 2);
        --rowGutterBetweenSections: calc(var(--rowGutterMedium) * 3);
        --colGutter: calc(var(--spaceX));
        --gridGap: calc(var(--rowGutterMedium) * 3) var(--colGutter);
        --mainBottomSpace: calc(var(--rowGutterMedium) * 3);
    }
    
    /***INTRO***/
    body#index main.content {
    	display: flex;
    }
    .column:nth-child(2), 
    .column:nth-child(7) {
    	padding-block: 0px;
    }
    .column:not(:nth-child(2)):not(:nth-child(7)),
    .column:nth-child(2) .column_item.text,
    .column:nth-child(7) .column_item.text {
    	display: none;
    }
    .column:nth-child(2) .column_item.logo_anexo p {
    	width: calc(var(--fontSizeLarge) * 2);
    }
    .column:nth-child(2) .column_item.logo_anexo p span {
    	width: calc(var(--fontSizeLarge) * 0.6);
    	display: inline-block;
    }
    .column .column_item.logo_casa {
   		transform: translateX(0%);
        padding-bottom: 0px;
    }
    
    /***HEADER AND MENU***/
    header {
    	transition-property: height, background;
        transition-duration: var(--transitionDuration);
    }
    header nav.main_menu,
    header nav.filters_menu,
    header nav.footer_menu {
    	transition-property: height, opacity;
        transition-duration: var(--transitionDuration);
    }
    header:not(.open) {
    	height: var(--headerHeight);
    }
    header:not(.open) nav.main_menu,
    header:not(.open) nav.filters_menu,
    header:not(.open) nav.footer_menu {
    	opacity: 0;
        pointer-events: none;
    }
    header:not(.open) nav.main_menu,
    header:not(.open) nav.filters_menu {
    	height: 0px;
    }
    header.open {
    	height: 100dvh;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, .75) 100%, rgba(255, 255, 255, 0) 100%);
    }
    header.open nav.main_menu,
    header.open nav.filters_menu,
    header.open nav.footer_menu {
    	opacity: 1;
        pointer-events: auto;
    }
    header.open nav.main_menu,
    header.open nav.filters_menu {
    	height: calc(100dvh - (var(--headerHeight)*2) - (var(--rowGutterSmall)*2));
    }
    .menu_button.mobile_version,
    nav.footer_menu.mobile_version {
    	display: inline-block !important;
    }
    .menu_button {
    	position: absolute;
        top: 0px;
        right: 0px;
        padding: var(--spaceY) var(--spaceX);
    }
    .site_name {
    	grid-column: span 8;
        align-self: start;
        justify-self: start;
    }
    nav.main_menu,
    nav.filters_menu {
        box-sizing: border-box;
	} 
    nav.main_menu {
    	grid-column: 1 / 5;
	} 
    nav.filters_menu {
    	grid-column: 5 / 9;
	}
    nav.main_menu ul,
    nav.filters_menu ul {
    	display: flex;
   		flex-direction: column;
        justify-content: space-between;
        height: 100%;
        text-align: left;
    }
    nav.index_menu {
    	display: none;
    }
    nav.filters_menu ul li.menu_item a {
        display: inline-block;
        text-align: left;
	}
    nav.footer_menu {
    	grid-column: span 8;
        align-self: end;
    }
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 767px) {
	body#index main.content {
        justify-content: center;
        align-items: center;
        grid-gap: calc(var(--rowGutterMedium) * 3) calc(var(--colGutter)*5);
    }
    .column .column_item.logo_anexo {
		transform: translateY(-2.5%);
    }
    .news.desktop_version {
    	display: none !important;
    }
    .news.mobile_version {
    	display: inline-block !important;
        padding-top: var(--rowGutterBetweenSections);
    }
	main.content section.content_index {
   		grid-column: 1 / 4;
    }
    body:not(#home):not(#contact) main.content section.content_col {
    	grid-column: 4 / 9;
    }
    body#home main.content section.content_col,
    body#contact main.content section.content_col {
    	grid-column: 1 / 9;
    }
    main.content section.content_col .col_item,
    main.content section.content_col .col_item .item_stack {
    	width: 100%;
    }
    .flex_grid .flex_item {
    	width: calc(var(--colWidth) * 1.66 + var(--colGutter) * 0.66);
	}
    .grid .grid_column {
    	grid-column: span 2;
	}
    .inner_columns .inner_col_item .item_prefix {
    	position: static;
        transform: translateX(0%);
    }
    .col_item .inner_columns {
    	column-count: 2;
    }
}

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

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	/*
    :root {
        --fontSizeSmall: 0.9rem;
        --fontSizeMedium: 0.9rem;
        --fontSizeLarge: 1.5rem;
        --spaceY: calc(var(--fontSizeSmall) * var(--lineHeightNatural));
    	--spaceX: calc(var(--fontSizeSmall) * var(--lineHeightNatural));
        --headerHeight: calc(var(--spaceY) * 2 + var(--rowGutterSmall) * 2);
        --rowGutterBetweenSections: calc(var(--rowGutterMedium) * 3);
        --gridGap: calc(var(--rowGutterMedium) * 3) var(--colGutter);
        --mainBottomSpace: calc(var(--rowGutterMedium) * 3);
    }
    */
    .desktop_version {
    	display: none;
    }
    body#index main.content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /***INDEXES***/
    main.content section.content_index {
    	position: static;
        grid-column: 1 / 9;
        padding-right: 0px;
    }
    body#posts main.content section.content_index,
    body#about main.content section.content_index,
    body#productivity main.content section.content_index,
    body#activity main.content section.content_index .index_activity .activity_agenda,
    body#activity main.content section.content_index .index_activity .activity_prof,
    body#activity main.content section.content_index .index_activity .activity_contact {
        display: grid;
        grid-template-columns: var(--gridTemplate);
        column-gap: var(--colGutter);
    }
    body#glossary main.content section.content_index,
    body#word main.content section.content_index {
        order: 2;
    }
    body#ethno main.content section.content_index {
    	display: none;
    }
    main.content section.content_index .index_title,
    main.content section.content_index .tag_title,
    main.content section.content_index .index_activity .activity_agenda .agenda_title,
    main.content section.content_index .index_activity .activity_prof .item_title,
    main.content section.content_index .index_activity .activity_contact .item_title {
        grid-column: 1 / 9;
    }
    main.content section.content_index .index_tag,
    main.content section.content_index .index_about,
    main.content section.content_index .index_productivity,
    main.content section.content_index .index_activity .activity_agenda .agenda_item,
    main.content section.content_index .index_activity .activity_prof .item_content,
    main.content section.content_index .index_activity .activity_contact .item_content {
        grid-column: 3 / 9;
    }
    main.content section.content_index .index_activity .activity_agenda .agenda_item:not(:last-child) {
        margin-bottom: var(--rowGutterSmall);
    }
    section.content_index .index_activity .item_content {
    	text-indent: 0px;
    }
    main.content section.content_index .index_glossary {
    	column-count: 2;
    }
    main.content section.content_index .index_about .index_item:first-child, 
    main.content section.content_index .index_productivity .index_item:first-child {
        display: none;
    }
    
    /***CONTENT***/
    main.content section.content_col {
		grid-column: 1 / 9;
    }
    body:not(#home):not(#posts) main.content section.content_col {
    	position: static;
    	padding-bottom: 0px;
    }
    .news.mobile_version {
    	padding-top: var(--rowGutterBetweenSections);
    }
    body#glossary main.content section.content_col {
    	padding-bottom: 0px;
    }
    main.content section.content_col .col_item,
    main.content section.content_col .col_item .item_stack {
		width: 100%;
    }
    body:not(#word):not(#ethno):not(#productivity):not(#activity) main.content section.content_col .col_item > .item_header,
    main.content section.content_col .col_item .item_stack > .item_header {
    	display: grid;
    	grid-template-columns: var(--gridTemplate);
        column-gap: var(--colGutter);
        width: 100%;
    }
    main.content section.content_col .col_item > .item_header .header_prefix,
    main.content section.content_col .col_item .item_stack > .item_header .header_prefix {
    	position: static;
    	grid-column: 1 / 3;
        transform: translateX(0%);
    }
    main.content section.content_col .col_item > .item_header p,
    main.content section.content_col .col_item .item_stack > .item_header p {
    	grid-column: 3 / 9;
    }
    section.content_col .col_item .item_media.large {
    	width: 100%;
	}
    .grid .grid_item {
    	grid-column: span 4;
    }
    .grid .grid_column {
    	grid-column: span 8;
        text-align: center;
    }
    body#program .grid .grid_item,
    body#activities .grid .grid_item {
    	grid-column: span 4;
	}
    .flex_grid .flex_item {
    	width: calc(var(--colWidth) * 4 + var(--colGutter) * 3);
    }
    .col_item .inner_columns {
    	column-count: 2;
	}
    body#productivity .inner_columns .inner_col_item .item_prefix {
    	position: static;
        transform: translateX(0%);
    }
    section.content_col .col_item .item_media.small {
		width: 100%;
    }
    .col_logos {
    	flex-wrap: wrap;
    }
    
    /***FOOTER***/
    body:not(#home) footer.col_footer {
    	min-height: auto;
        padding-top: calc(var(--rowGutterMedium) * 2);
    }
    .footer_related .related_item {
    	width: calc(var(--colWidth) * 4 + var(--colGutter) * 3);
    	transition: width var(--transitionDuration);
	}
}