@media (min-width: 700px) and (max-width: 810px) {
    .desktop-menu .header-logo-section div.title-1,
    .desktop-menu .header-logo-section div.title-2 {
        display: none;
    }
}
@media (min-width: 810px) and (max-width: 875px) {
    .desktop-menu:not(.collapsed) .header-logo-section div.title-1 {
        padding-top: 13px;
        font-size: 20px;
        line-height: 20px;
    }
    .desktop-menu:not(.collapsed) .header-logo-section div.title-2 {
        display: none;
    }
}
@media (min-width: 700px) {
    .mobile-menu-container {
        display: none;
    }
    .desktop-menu-container {
        height: 100px;
        position: sticky;
        top: 0px;
        z-index: 100;
    }
    .desktop-menu {
        width: 100%;
        max-width: 1200px;
        margin: auto;
        background-color: black;
        position: relative;
        transition: height 0.5s, box-shadow 0.5s;
        -webkit-transition: height 0.5s, box-shadow 0.5s;
        -moz-transition: height 0.5s, box-shadow 0.5s;
        -ms-transition: height 0.5s, box-shadow 0.5s;
        -o-transition: height 0.5s, box-shadow 0.5s;
    }
    	.desktop-menu.collapsed {
    	    height: 60px;
            box-shadow: 0px 10px 10px black;
    	}
    	.desktop-menu:not(.collapsed) {
    	    height: 100px;
            box-shadow: none;
    	}
    	
    .desktop-menu .header-logo-section > a {
        display: flex;
    }
    
    .desktop-menu .logo {
        background-image: url('/img/site_logo_small.png');
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: width 0.5s, height 0.5s, top 0.5s;
        -webkit-transition: width 0.5s, height 0.5s, top 0.5s;
        -moz-transition: width 0.5s, height 0.5s, top 0.5s;
        -ms-transition: width 0.5s, height 0.5s, top 0.5s;
        -o-transition: width 0.5s, height 0.5s, top 0.5s;
        flex-grow: 0;
    }
        .desktop-menu.collapsed .logo {
            width: 30px;
            height: 30px;
            top: 2px;
        }
        .desktop-menu:not(.collapsed) .logo {
            width: 45px;
            height: 45px;
            top: 0px;
        }
        
    .desktop-menu .site-title {
        padding-left: 27px;
        box-sizing: border-box;
    }
    
    .desktop-menu .header-logo-section .a, .desktop-menu * {
        text-decoration: none;
        text-transform: uppercase;
    }
    .desktop-menu .header-logo-section {
        transition: padding-top 0.5s;
        -webkit-transition: padding-top 0.5s;
        -moz-transition: padding-top 0.5s;
        -ms-transition: padding-top 0.5s;
        -o-transition: padding-top 0.5s;
        padding-left: 27px;
        width: 50%;
    }
    	.desktop-menu.collapsed .header-logo-section {
    	    padding-top: 12px;
    	}
    	.desktop-menu:not(.collapsed) .header-logo-section {
    	    padding-top: 27px;
    	}
    
    .desktop-menu .header-logo-section .title-1 {
        font-size: 25px;
        line-height: 25px;
        letter-spacing: 5px;
        transition: margin-top 0.5s, font-size 0.5s, line-height 0.5s;
        -webkit-transition: margin-top 0.5s, font-size 0.5s, line-height 0.5s;
        -moz-transition: margin-top 0.5s, font-size 0.5s, line-height 0.5s;
        -ms-transition: margin-top 0.5s, font-size 0.5s, line-height 0.5s;
        -o-transition: margin-top 0.5s, font-size 0.5s, line-height 0.5s;
    }
    	.desktop-menu.collapsed .header-logo-section .title-1 {
    	    margin-top: 10px;
    	    font-size: 16px;
    	    line-height: 16px;
    	}
    	.desktop-menu:not(.collapsed) .header-logo-section .title-1 {
    	    margin-top: 0px;
    	    font-size: 25px;
    	    line-height: 25px;
    	}
    
    .desktop-menu .header-logo-section .title-2 {
        font-size: 15px;
        line-height: 15px;
        letter-spacing: 5px;
        margin-top: 5px;
        color: #AAAAAA;
        transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
    }
    	.desktop-menu.collapsed .header-logo-section .title-2 {
    	    opacity: 0.0;
    	}
    	.desktop-menu:not(.collapsed) .header-logo-section .title-2 {
    	    opacity: 1.0;
    	}
    
    .header-button-container {
        height: 100px;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 100;
    }
    .desktop-menu .header-button-container > * {
        display: inline-block;
        position: relative;
        z-index: 100;
        vertical-align: top;
        transition: padding 0.5s;
        -webkit-transition: padding 0.5s;
        -moz-transition: padding 0.5s;
        -ms-transition: padding 0.5s;
        -o-transition: padding 0.5s;
    }
        .desktop-menu.collapsed .header-button-container > *
        {
            padding: 22px 15px 22px 30px;
        }
        .desktop-menu:not(.collapsed) .header-button-container > * {
            padding: 42px 15px 42px 30px;
        }
        
    .header-button-container .header-text {
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 5px;
    }
    
    .desktop-menu .header-expand-icon {
        background-image: url('/img/downarrow.png');
        display: inline-block;
        width: 16px;
        height: 16px;
        background-size: cover;
        vertical-align: top;
        position: relative;
        top: 0px;
        left: 5px;
        transition: top 0.25s, transform 0.25s;
        -webkit-transition: top 0.25s, transform 0.25s;
        -moz-transition: top 0.25s, transform 0.25s;
        -ms-transition: top 0.25s, transform 0.25s;
        -o-transition: top 0.25s, transform 0.25s;
    }
        .desktop-menu .header-button.has-menu:hover:not(.expanded) .header-expand-icon {
            top: 3px;
        }
        .desktop-menu .header-button.expanded > .header-expand-icon {
            transform: rotate(180deg);
        }
    
    
    .desktop-menu .header-button-container > .header-button > .header-text-highlighter {
        position: absolute;
        left: 15px;
        width: 5px;
        height: 15px;
        background-color: white;
        transition: top 0.5s, opacity 0.5s;
        -webkit-transition: top 0.5s, opacity 0.5s;
        -moz-transition: top 0.5s, opacity 0.5s;
        -ms-transition: top 0.5s, opacity 0.5s;
        -o-transition: top 0.5s, opacity 0.5s;
        opacity: 0.0;
    }
        .desktop-menu .header-button-container > .header-button:hover > .header-text-highlighter {
            opacity: 1.0;
        }
        .desktop-menu.collapsed .header-button-container > .header-button:hover > .header-text-highlighter {
            top: 22px;
        }
        .desktop-menu:not(.collapsed) .header-button-container > .header-button:hover > .header-text-highlighter {
            top: 42px;
        }
    
    .desktop-menu .header-button-dropdown {
        height: 0px;
        overflow: hidden;
        transition: height 0.25s, margin-top 0.5s;
        -webkit-transition: height 0.25s, margin-top 0.5s;
        -moz-transition: height 0.25s, margin-top 0.5s;
        -ms-transition: height 0.25s, margin-top 0.5s;
        -o-transition: height 0.25s, margin-top 0.5s;
        background-color: black;
        position: absolute;
        left: 0px;
    }
        .desktop-menu .header-button.expanded .header-button-dropdown.item-count-1 {
            height: 36px;
        }
        .desktop-menu .header-button.expanded .header-button-dropdown.item-count-2 {
            height: 72px;
        }
        .desktop-menu .header-button.expanded .header-button-dropdown.item-count-3 {
            height: 108px;
        }
        
        .desktop-menu:not(.collapsed) .header-button-dropdown {
            margin-top: 22px;
        }
        .desktop-menu.collapsed .header-button-dropdown {
            margin-top: 12px;
        }
        
    .desktop-menu .header-button-dropdown .header-button-child {
        display: block;
        padding: 10px 15px 10px 30px;
        position: relative;
    }
    .desktop-menu .header-button-container .header-button-child > .header-text-highlighter {
        position: absolute;
        left: 15px;
        top: 10px;
        width: 5px;
        height: 15px;
        background-color: white;
        transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        opacity: 0.0;
    }
        .desktop-menu .header-button-container .header-button-child:hover > .header-text-highlighter {
            opacity: 1.0;
        }
}