/* Adapted from:
   https://codepen.io/signalkuppe/pen/YybXNJ 
*/

/* narrow styles */
@media screen and (max-width: 1024px) {

    .header { 
	
	.menu {
	    padding: 0;
	    background: white;
	    margin-right: 1rem;
	    margin-top: 1rem;
	}
	
	.menu > label {
	    display: block;
	    text-align: right;
	}
	
	.menu a {
	    text-decoration: none;
	    color: #202020; 
	    display: block;
	    white-space: nowrap;
	}
	
	.menu ul {
	    list-style: none;
	    padding: 0;
	}
	
	.menu li {
	    text-align: right;
	    padding: 0.2rem 0 0.2rem 0;
	}
	
	.menu li i {
	    display: inline-block;
	    width: 1rem;
	}
	
	.menu label:hover {
            cursor: pointer;
	}
	
	.menu-dropdown,
	.menu > ul,
	.menu input[type="checkbox"] {
	    display: none;
	}
	
	input[type="checkbox"]:checked + ul {
	    display: block;
	}
	
	.menu-dropdown {
	    background: #f0f0f0;
	}
    }
}    

/* large styles */
@media screen and (min-width: 1025px) {

    .header {
	
	.menu {
	    max-width: 1024px;
	    margin-top: 1rem;
	}
	
	.menu ul {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}
	.menu, .menu a {
	    color: #202020;
	    text-decoration: none;
	}
	.menu a {
	    display: block;
	    white-space: nowrap;
	}
	.menu-dropdown, .menu input[type="checkbox"] {
	    display: none;
	}
	.menu a:hover {
	    cursor: pointer;
	    color:#0070ad;
	}
	.menu > label, input[type="checkbox"] {
	    display: none;
	}
	.menu > ul > li {
	    padding-right: 2rem;
	}
	
	.menu > ul > li {
	    display: inline-block;
	}
	.menu-hasdropdown {
	    position: relative;
	}
	.menu-hasdropdown:hover > ul {
	    display: block;
	    animation: grow 0.5s ease-in-out;
	}
	.menu-hasdropdown > ul {
	    position: absolute;
	    top: 100%;
	    left: 0;
	    background: white;
	}
	
	.menu-dropdown a {
	    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	} 
    }
}
