@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

nav {
    display: flex;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin-top: 20px;
}

nav #logo {
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    top: -3px;
    margin-left: 80px;
    color: white;
}
nav #logo:hover {
    position: relative;
    top: 0px;
    display:block;
}

nav > span {
    margin-left: 0rem;
    color: white;
}

.slide-down {
    opacity: 0;
    animation: slide-down 1s 1s ease-in-out forwards;
}

/* Animation keyframes */
@keyframes slide-down {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 576px) {
  nav #logo {
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    top: -3px;
    margin-left: 30px;
    color: white;
  }
}

#emme {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;
}
#emme img {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #CC3043;
  transition: border-radius 0.2s ease-in-out;
}
#emme img:hover {
  border-radius: 30%;
}

#ema {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
}
#ema img {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #CC3043;
  transition: border-radius 0.2s ease-in-out;
}
#ema img:hover {
  border-radius: 30%;
}

.floating-btn {
	border-radius: 50px;
	background-color: #fff;
	border: 0px solid #E76494;
	box-shadow: 0 16px 22px -17px #E76494;
	color: #fff;
	padding: 10px 12px;
	position: fixed;
	bottom: 80px;
	right: 10px;
	z-index: 99999999;
}

.floating-btn:hover {
	background-color: #BC3946;
	color: #E76494;
}

.floating-btn:focus {
	outline: none;
}


@media screen and (max-width: 480px) {

	.social-panel-container.visible {
		transform: translateX(0px);
	}
	
	.floating-btn {
		right: 10px;
	}
}