/* -------- Position classes ---------- */

.maily-post{
	z-index: 5;
	position: absolute;
	top: -85px;
	right: -15px;
}

.maily-fixed{
	z-index: 5;
	position: fixed;
	bottom: -7px;
	right: 25px;
}

/* -------- Maily styling ---------- */

#maily{
	cursor: pointer;
}
#maily {
	z-index: 5;
	transform-origin: bottom;
	animation-name: breathing;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	width: 85px;
	height: 85px;
	background-size: 100%;
}
.maily-regular {
	background-image: url('../maxhacker11/ccKdc6FG2_width-640-height-640-select-ccKdc6FG2page0.svg');
}
.maily-christmas {
	background-image: url('https://vectr.com/maxhacker11/ccKdc6FG2.svg?width=640&height=640&select=e1myRSXvMr')
}
.maily-eye_left{
	left: 18%;
}
.maily-eye_right{
	right: 19%;
}
.maily-eye {			
	position: absolute;
	top: 28%;
	border-radius: 50%;
	height: 17%;
	width: 17%;
	background: white;
}
.maily-eye:after {
	position: absolute;
	bottom: 9px;
	right: 25%;
	width: 40%;
	height: 38%;
	border-radius: 50%;
	background-color: black;
	content: " ";
}

/* -------- maily-maily-tooltip ---------- */

.maily-tooltip {
    display:inline-block;
    position:relative;
    text-align:left;
}

.maily-tooltip .left {
    min-width:150px; 
    max-width:250px;
    top:50%;
    right:100%;
    margin-right:20px;
    transform:translate(0, -25%);
    padding:10px 20px;
    color:#EEEEEE;
    background-color:#444444;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display: none;
}

.maily-tooltip .left i {
    position:absolute;
    top:25%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.maily-tooltip .left i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#444444;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

/* -------- Maily animations ---------- */

@keyframes breathing {
	0% { transform: scale(1.0); }
	50% { transform: scale(1.0, 1.05); }
	100% { transform: scale(1.0); }
}