@charset "utf-8";
/* CSS Document */

.iconblack {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
	position: fixed; /* Stay in place */
    z-index: 998; /* Sit on top */
	display: none;
	height: 100%;
    width: 100%;
	right: 0px;
    bottom: 0px;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden; /* Disable horizontal scroll */
}

.material-button-anim {
	z-index: 999;
	position: fixed;
	right: 0px;
	bottom: 0px;
	text-align: center;
	background-color: rgb(255,255,255); /* Black fallback color */
    background-color: rgba(0,0,0, 0); /* Black w/opacity */
	padding: 0px;
}

.material-button-anim .list-fixed {
	list-style:none;
	
}

.material-button, .material-icon {
    position: fixed;
	bottom: 20px;
	right: 20px;
    z-index: 1;
    width: 50px;
    height: 50px;
    font-size: 28px;
	font-weight:bold;
    color: #FFF;
    background: #6C0;
    border: none;
    border-radius: 50%;
	border: 2px #6C0;
    box-shadow: 0 3px 6px rgba(0,0,0,.275);
    outline: none;
	padding-top: 17px;
}
.material-button-toggle {
    z-index: 3;
    width: 60px;
    height: 60px;
}
.material-button-toggle span {
    -webkit-transform: none;
    transform:         none;
    -webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
    transition:         transform .175s cubic-bazier(.175,.67,.83,.67);
}
.material-button-toggle.open {
    -webkit-transform: scale(1,1);
    transform:         scale(1,1);
    -webkit-animation: toggleBtnAnim .175s;
    animation:         toggleBtnAnim .175s;
}
.material-button-toggle.open span {
    -webkit-transform: rotate(45deg);
    transform:         rotate(45deg);
    -webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
    transition:         transform .175s cubic-bazier(.175,.67,.83,.67);
}

.material-icon {
	position:relative;
	display:inline-block;
	top: 5px;
	right: 15px;
	width: 50px;
    height: 50px;
	padding-top: 15px;
	text-align:center;
	background: #eee;
	color: #555;
	border: 1px #999;
	font-size: 22px;
	font-weight: normal;
}

.material-text {
	top: 5px;
	right: 30px;
	font-size: 18px;
    outline: none;
	padding: 8px;
	padding-right: 20px;
	color: #FFF;
	display: none;
}

#options {
	height: 20px;
}
.option {
	position: relative;
}
.option .option1,
.option .option2,
.option .option3,
.option .option4,
.option .option5,
.option .option6 {
	position: fixed;
	bottom: 0px;
	right: 0px;
	height: 60px;
	padding: 0px 10px 5px 0px;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -webkit-transition: all .175s;
    transition:         all .175s;
	color: #555;
	--background-color: #eee;
	border-radius: 5px;
	text-align: right;
}

.option.scale-on .option1, 
.option.scale-on .option2,
.option.scale-on .option3,
.option.scale-on .option4,
.option.scale-on .option5,
.option.scale-on .option6,
.option.star-on .option1, 
.option.star-on .option2,
.option.star-on .option3,
.option.star-on .option4,
.option.star-on .option5,
.option.star-on .option6 {
    filter: blur(0);
    -webkit-filter: blur(0);
    -webkit-transform: none;
    transform:         none;
    -webkit-transition: all .175s;
    transition:         all .175s;
}

/* ==================================*/

.option .option1, .option .option2, .option .option3, .option .option4, .option .option5 {
    -webkit-transform: translate3d(0px,-20px,0) scale(.8,.8);
    transform:         translate3d(0px,-20px,0) scale(.8,.8);
}
.option.scale-on .option1 {
	-webkit-transform: translate3d(0px,-80px,0);
	transform:        translate3d(0px,-80px,0);
}
.option.scale-on .option2 {
	-webkit-transform: translate3d(0px,-135px,0);
	transform:        translate3d(0px,-135px,0);
}
.option.scale-on .option3 {
	-webkit-transform: translate3d(0px,-190px,0);
	transform:        translate3d(0px,-190px,0);
}
.option.scale-on .option4 {
	-webkit-transform: translate3d(0px,-245px,0);
	transform:        translate3d(0px,-245px,0);
}

.option.scale-on .option5 {
	-webkit-transform: translate3d(0px,-300px,0);
	transform:        translate3d(0px,-300px,0);
}

.option.star-on .option1 {
	-webkit-transform: translate3d(0px,-80px,0);
	transform:        translate3d(0px,-80px,0);
}

.option.star-on .option2 {
	-webkit-transform: translate3d(0px,-135px,0);
	transform:        translate3d(0px,-135px,0);
}
.option.star-on .option3 {
	-webkit-transform: translate3d(0px,-190px,0);
	transform:        translate3d(0px,-190px,0);
}
.option.star-on .option4 {
	-webkit-transform: translate3d(0px,-245px,0);
	transform:        translate3d(0px,-245px,0);
}

.option.star-on .option5 {
	-webkit-transform: translate3d(0px,-300px,0);
	transform:        translate3d(0px,-300px,0);
}

/* ==================================*/
.material-button-editor {
	z-index: 999;
	position: fixed;
	left: 0px;
	bottom: 0px;
	text-align: left;
	background-color: rgb(255,255,255); /* Black fallback color */
    background-color: rgba(0,0,0, 0.5); /* Black w/opacity */
	padding: 2px 2px 2px 2px;
	height: 40px;
	width: 100%;
	max-height: 40px;
	line-height: 40px;
}

.material-popup-editor {
	font-size: 18px;
}

.material-popup-editor a {
    padding: 3px 5px 5px 50px;
    text-decoration: none;
    color: #555;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
	height: 50px;
	min-height: 50px;
	max-height: 50px;
}
.material-popup-editor a:hover, 
.material-popup-editor a:focus {
	text-decoration: none;
	cursor: pointer;
	color: #FFF;
	background-color: #333;
	opacity: 1;
}

.material-popup-editor .e-icon {
	position: absolute;
	top: 10px;
	left: 1px;
	width: 50px;
	min-width: 50px;
	font-size: 28px;
	text-align: center;
}
.material-popup-editor .e-descr {
	position: absolute;
	top: 27px;
	left: 50px;
	font-size: 10px;
	text-align: left;
	color: #999;
	padding: 2px 2px 2px 2px;
}
.material-popup-editor .e-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 26px;
	min-height: 26px;
	min-width: 26px;
	font-size: 14px;
	font-weight:bold;
	text-align: center;
	color: #FFF;
	background-color: #6C0;
	border: 1px #fff;
	border-radius: 10px;
	padding: 2px 10px 2px 10px;
}

.material-button-editor a, 
.material-button-editor a:hover, 
.material-button-editor a:focus {
	text-decoration: none;
	cursor: pointer;
	color: #FFF;
}

/* ==================================*/
/*
@keyframes toggleBtnAnim {
    0% {
        -webkit-transform: scale(1,1);
        transform:         scale(1,1);
    }
    25% {
        -webkit-transform: scale(1.4,1.4);
        transform:         scale(1.4,1.4); 
    }
    75% {
        -webkit-transform: scale(1.2,1.2);
        transform:         scale(1.2,1.2);
    }
    100% {
        -webkit-transform: scale(1.3,1.3);
        transform:         scale(1.3,1.3);
    }
}
@-webkit-keyframes toggleBtnAnim {
    0% {
        -webkit-transform: scale(1,1);
        transform:         scale(1,1);
    }
    25% {
        -webkit-transform: scale(1.4,1.4);
        transform:         scale(1.4,1.4); 
    }
    75% {
        -webkit-transform: scale(1.2,1.2);
        transform:         scale(1.2,1.2);
    }
    100% {
        -webkit-transform: scale(1.3,1.3);
        transform:         scale(1.3,1.3);
    }
}
*/