@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(../fonts/montserrat.ttf) format('truetype');
}

.fedmenu-bottom-left {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.fedmenu-bottom-right {
    position: fixed;
    bottom: 10px;
    right: 10px;
}
.fedmenu-bottom-left:hover .fedmenu-bottom-left.fedmenu-active {
    bottom: 2px;
    left: 2px;
}
.fedmenu-bottom-right:hover .fedmenu-bottom-right.fedmenu-active {
    bottom: 2px;
    right: 2px;
}

#fedmenu-tray {
    width: 48px;
    z-index: 1010;
}

.fedmenu-button {
    margin-left: auto;
    margin-right: auto;

    margin-top: 0px;
    margin-bottom: 8px;
    padding-bottom: 0px;

    width: 32px;
    height: 32px;

    -webkit-filter: drop-shadow(4px 4px 4px #222);
    filter:         drop-shadow(4px 4px 4px #222);

    /* Awesome */
    transition-property: width, height, bottom, left, background-size, filter, margin-top, margin-bottom, padding-bottom;
    transition-duration: 0.10s;
    transition-timing-function: linear;
}
.fedmenu-button:hover, .fedmenu-button.fedmenu-active {
    margin-top: -8px;
    margin-bottom: 0px;
    padding-bottom: -8px;

    width: 48px;
    height: 48px;

    -webkit-filter: drop-shadow(4px 4px 6px #222);
    filter:         drop-shadow(4px 4px 6px #222);
}

.fedmenu-button div.img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#fedmenu-main-button div.img { background-image: url("../img/logo.png"); }
#fedmenu-user-button div.img { border-radius: 50%;  /* Make avatars into a circle */ }

#fedmenu-wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1008;
    display: none;
}

#fedmenu-wrapper.fedmenu-active,.fedmenu-exit {
    cursor: pointer;
}

.fedmenu-exit {
    float: right;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 28px;
    font-family: sans-serif;
    font-size: 16pt;
    color: #FFF;
    background-color: #db3279;
    border-radius: 50%;

    -webkit-filter: drop-shadow(4px 4px 4px #222);
    filter:         drop-shadow(4px 4px 4px #222);

    /* Awesome */
    transition-property: width, height, margin, line-height, font-size;
    transition-duration: 0.10s;
    transition-timing-function: linear;
}

.fedmenu-exit:hover {
    margin-top: -6px;
    margin-right: -6px;

    width: 38px;
    height: 38px;
    line-height: 40px;
    font-size: 22pt;

    -webkit-filter: drop-shadow(4px 4px 6px #222);
    filter:         drop-shadow(4px 4px 6px #222);
}

#fedmenu-wrapper.fedmenu-active {
    display: block;
    background-color: rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 400px rgba(0,0,0,1);
            box-shadow: inset 0 0 400px rgba(0,0,0,1);

}

.fedmenu-content {
    position: fixed;
    top: 100%;

    /* Vary these two parameters for responsive-ness */
    left: 30%;
    width: 40%;

    background: url('../img/panda-wave.png') no-repeat right bottom;

    background-color: #FFF;
    margin-bottom: 20px;
    padding: 19px;
    border: 0px none;

    -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23);
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23);
    z-index: 1009;
}

.fedmenu-content.fedmenu-active {
    top: 15%;
    transition-property: top;
    transition-duration: 0.4s;
    transition-delay: 0.3s;
    transition-timing-function: ease-out;
}

.fedmenu-content > h1 {
    font-family: Montserrat;
    font-weight: bold;
    border-bottom: 2px solid;
    color: #294172;
}

.fedmenu-panel {
    font-family: Montserrat;
    display: inline-block;
    vertical-align: top;
    font-size: 12pt;
    padding: 15px;
}
.fedmenu-panel ul {
    margin-top: 10px;
    padding-left: 0px;
}
.fedmenu-panel li {
    list-style: none;
    margin-left: 0px;
}

.fedmenu-panel a,
.fedmenu-panel a:hover {
    color: #3C6EB4;
}

.fedmenu-header {
    display: inline;
    font-weight: bold;
    font-size: 12pt;
    color: #294172;
    border-bottom: 1px solid;
}

/* Responsive stuff... */
@media all and (max-width: 1450px) { .fedmenu-content { left: 25%; width: 50%; }}
@media all and (max-width: 1200px) { .fedmenu-content { left: 20%; width: 60%; }}
@media all and (max-width: 1000px) { .fedmenu-content { left: 15%; width: 70%; }}
@media all and (max-width:  860px) { .fedmenu-content { left: 10%; width: 80%; }}
@media all and (max-width:  740px) { .fedmenu-content { left:  5%; width: 85%; }}
@media all and (max-width:  600px) { .fedmenu-content { left:  0%; width:100%; }}
@media all and (max-width:  800px) { .fedmenu-content.fedmenu-active { top: 10%; }}
@media all and (max-width:  700px) { .fedmenu-content.fedmenu-active { top: 10%; }}
@media all and (max-width:  600px) { .fedmenu-content.fedmenu-active { top:  5%; }}
@media all and (max-width:  500px) {
    .fedmenu-content.fedmenu-active { top:  0%; }
    .fedmenu-content > h1 { font-size: 80%; padding: 5px }
    .fedmenu-panel .fedmenu-header { font-size: 90%; }
    .fedmenu-panel { padding: 7px; font-size: 5pt; }
    .fedmenu-content {
        padding: 9px;
        background-image: none;
    }
}