@charset "utf-8";
/*https://webdesignerhut.com/examples/pure-css-dropdown-menu/*/
/* Giving a background-color to the nav container. */

.menu {
    /*margin: 100px 0;*/
    background-color: #4b5563;
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
.menu:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
.menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

/* Positioning the navigation items inline */
.menu ul li {
    margin: 0;
    display: inline-block;
    float: left;
    background-color: #4b5563;
}

/* Styling the links */
.menu a {
    display: block;
    padding: 0 10px;
    /*color: #FFF;*/
    /*font-size: 20px;*/
    /*line-height: 60px;*/
    text-decoration: none;
}


.menu ul li ul li:hover {
    background: #9ca3af;
}

/* Background color change on Hover */
.menu a:hover {
    background-color: #9ca3af;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
.menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}

/* Display Dropdowns on Hover */
.menu ul li:hover > ul {
    display: inherit;
}

/* First Tier Dropdown */
.menu ul ul li {
    min-width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
.menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
    content: ' +';
}

li > a:only-child:after {
    content: '';
}

#relatedContent {
    max-width: 800px;
    margin: 50px auto;
}

#relatedContent .item {
    max-width: 44%;
    padding: 3%;
    float: left;
    text-align: center;
}

#relatedContent .item a img {
    max-width: 100%;
}