/* CORE POSITIONING
********************************************************************************/

body {
  background:black;
}

.ci_widget {
	position:fixed;
	bottom:1rem;
	right:1rem;
	z-index:999;
}

.ci_widget_container {
	position: relative;
}

/* BUTTON STYLE
********************************************************************************/

.ci_widget button {
	padding:1rem 2rem 1rem 1.5rem;
	display: flex;
	align-items: center;
	border-radius:50px;
	color:#000;
	background-color: rgba(255,255,255,1);
	font-weight:600;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
	transition:all 0.25s ease;
  	border:none;
}

.ci_widget button:hover {
	background-color: rgba(255,255,255,1);
}

.ci_widget button > * + * {
	margin-left:0.5rem;
}

.ci_widget.active button {
	background-color: rgba(255,255,255,1);
}

.ci_widget button:active {
  transform: scale3d(1.05, 1.05, 1.05);
}

/* MENU STYLE
********************************************************************************/

.ci_widget_menu {
	width:100%;
	min-width:228px;
	background:#fff;
	border-radius:5px;
	padding:2rem 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	position:absolute;
	bottom:calc(100% + 1rem);
	right:0;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
}

.ci_widget_menu_widget{
	width:100%;
	min-width:300px;
	background: none;
	border-radius:25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	position:absolute;
	bottom: calc(100% + 10px);
	right:0;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
}

.ci_widget_menu a + a {
	margin-top:1.5rem;
}

.ci_widget.active .ci_widget_menu, .ci_widget.active .ci_widget_menu_widget {
	animation-name: zoomIn;
	pointer-events: auto;
}

/* HELPER CLASSES
********************************************************************************/

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes zoomIn {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);

    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}