/* base */
.burger {
	height: 2.5em;
	width: 3em;
	cursor: pointer;
}

.dropdown
{
    position: relative;
    display: inline-block;
}

.dropdown-content
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 999;
}

.dropdown:hover .dropdown-content
{
    display: block;
}


.onclick-menu {
    position: relative;
    display: inline-block;
}

.onclick-menu:focus
{
    /* clicking on label should toggle the menu */
    /*pointer-events: pointer;*/
}

.onclick-menu.open .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* menu 
.onclick-menu-content {
    background-color: silver;
    width: 200px;
    margin-top: 14px;
    margin-left: -152px;
    padding: 10px;
    box-shadow: 10px 10px 5px black;
    z-index: 999;
}
*/

.onclick-menu-content {
    position: absolute;
    top: 100%;
    right: 0;

    background-color: silver;
    width: 200px;
    margin-top: 14px;
    padding: 10px;

    box-shadow: 10px 10px 5px black;
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.onclick-menu
{
	padding: 0;
	margin: 0 0.5em 1em 0;
	outline: 0;
}

.onclick-menu:before
{
	padding: 1px 5px;
	background-color: red;
}

/* menu block */
.onclick-menu-content
{
	background-color: silver;
	width: 200px;
	margin-top: 14px;
	margin-left: -152px;
	padding: 10px;
	box-shadow: 10px 10px 5px black;
	z-index:999;
}

.onclick-menu-content:before {
    content: "";
    width: 0;
    height: 0;

    border-bottom: 20px solid silver;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    position: absolute;
    top: -20px;
    right: 8px;
}

.onclick-menu-content li {
    color: white;
    font-family: arial;
    font-size: 1.5em;
    list-style-type: none;
    white-space: nowrap;
}

/* style the buttons */
.onclick-menu-content a
{
	background: transparent;
	border: none;
	color: inherit;
	cursor: inherit;
	outline: 0;
	cursor: pointer;
}

.onclick-menu-content a:hover
{
	color: #204080;
	background-color: white;
}

/* adaptation mobile */
@media screen and (max-width: 768px) {

    .burger {
        width: 48px;
        height: 40px;
    }

    .onclick-menu-content {
        width: 220px;
        margin-left: -170px;
        padding: 14px;
    }

    .onclick-menu-content li {
        font-size: 22px;
        line-height: 1.8;
    }

    .onclick-menu-content a {
        display: block;
        padding: 6px 10px;
        text-decoration: none;
    }
}