/* (Burger) Menu */

.burger-menu {
    display: none !important;
}

@media screen and (max-width: 768px) {
    #mainNavWrapper {
        display: none !important;
        background: white;
        width: 100%;
        height: 100%;
        position: absolute !important;
        top: 50px !important;
        padding-top: 50px;
        z-index: 11;
        /* padding: 1vh; */
        left: -1.5vh;
    }
    #mainNavWrapper .nav-item {
        text-align: center;
        vertical-align: auto;
        font-size: 24px;
        height: 80px;
    }

    #mainNavWrapper label {
        cursor: pointer;
    }

    #mainNavWrapper.show {
        display: block !important;
    }

    .burger-menu {
        display: block !important;
    }

    .subnav .collection span {
        font-size: 20px;
        color: #bebebe !important;
    }
    
    /* magic */
    .nav-wrapper .folder {
        position: relative;
    }

    .nav-wrapper .folder > a {
        display: block;
    }
    .subnav .collection a {
        text-align: center !important;  /* Align text within the <a> tags to the left */
        display: block;    /* Ensure the link is a block element, so it takes up full width */
    }
    
    .subnav{
        background-color: white !important;
        width: 100% !important;
        left: 0.3vh !important;
        top: 50px !important;
        border-top: 2px solid black;   /* Top border */
        border-bottom: 2px solid black; /* Bottom border */
        padding: 20px;
        z-index: 100;
    }
    /* magic */
}

body .nav-wrapper .folder:hover .subnav {
    max-height: 100vh;
    opacity: 1;
    transition: max-height 500ms ease-in-out, opacity 250ms ease-in-out;
}

/* Portfilio pages */
@media screen and (max-width: 768px) {
    .column {
        flex: 0 0 100%;
        padding: 0;
    }
    
    .column img {
        width: 96%;
        margin: 1% 2%;
    }
}

/* Thumbnails */
.carousel-item {
    flex: 0 0 24%;
    margin: 0 1%;
    text-align: left; /* Align text to the left */
}

@media screen and (max-width: 768px) {
    .carousel-item {
        flex: 0 0 100%;
        margin: 0;
    }
    .carousel-btn.prev {
        left: -10px !important;
    }
}

/* Text in blogs */
h1:not(.entry-title):not(.page-title):not(.project-intro-title):not(.BlogItem-title):not(.ProductList-title):not(.ProductItem-details-title) {
	font-family: "Chivo";
}

@media screen and (min-aspect-ratio:1/1) and (max-width:576px) {
	.scale-heading-1-font-size h1:not(.entry-title):not(.page-title):not(.project-intro-title):not(.BlogItem-title):not(.ProductList-title):not(.ProductItem-details-title) {
		font-size: 26px
	}
}

@media screen and (max-aspect-ratio:1/1) and (max-width:576px) {
	.scale-heading-1-font-size h1:not(.entry-title):not(.page-title):not(.project-intro-title):not(.BlogItem-title):not(.ProductList-title):not(.ProductItem-details-title) {
		font-size: 26px
	}
}

@media screen and (max-aspect-ratio:1/1) and (max-width:1314px) {
	.scale-heading-2-font-size h2:not(.index-item-title) {
		font-size: 24px
	}
}

.mobile-branding-wrapper .mobile-site-tagline {
    font-size: 16px;
}

.mobile-branding-wrapper .mobile-site-title {
    font-family: Bebas Neue;
    font-size: 32px;
}