﻿/* Morph Button: Default Styles */

.morph-button {
	position: relative;
	display: block;
	margin: 10px auto;
}

.morph-button > button {
	position: relative;
	padding: 0px 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button-fixed,
.morph-button-fixed .morph-content {
	width: 208px;
	height:auto;
}

.morph-button-fixed > button {
	z-index: 1000;
	width: 100%;
padding: 7px !important;
	height: 100%;
	font-size:12px;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-fixed.open .morph-content {
	opacity: 1;
}

.morph-button-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button-fixed.active > button {
	z-index: 2000;
}

.morph-button-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button-overlay .morph-content,
.morph-button-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button-overlay.open .morph-content,
.morph-button-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button.morph-button-overlay {
	margin: 5px auto;
}

.morph-button-overlay .morph-content {
	overflow: hidden;
	background: #0154a6;
}

.morph-button-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button-modal.active::before {
	z-index: 1800;
}

.morph-button-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button.morph-button-modal-1 {
	float: left;
}

.morph-button.morph-button-modal-2,
.morph-button.morph-button-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button-modal-1 > button,
.morph-button-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button-modal-2 > button,
.morph-button-modal-2 .morph-content,
.morph-button-modal-3 > button,
.morph-button-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button-modal-4 {
	display: inline-block;
}

.morph-button-modal-4 > button,
.morph-button-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button-modal-4 > button span,
.morph-button-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button-modal-4.open .morph-clone,
.no-js .morph-button-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button-modal-2.open .morph-content > div,
.morph-button-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button-inflow-1 > button span {
	visibility: hidden;
}

.morph-button-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button-sidebar,
.morph-button-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button-sidebar .morph-content {
	background: #e85657;
}

.morph-button-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button .morph-content,
.morph-button.open .morph-content,
.morph-button-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button > button {
	display: none;
}

.no-js .morph-button {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button,
.no-js .morph-button .morph-content,
.no-js .morph-button .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button .morph-content .icon-close {
	display: none;
}

.no-js .morph-button-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button-fixed,
	.morph-button-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button-fixed > button {
		font-size: 75%;
	}

	.morph-button-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button-modal-4,
	.morph-button-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button-modal-4 > button span {
		display: block;
	}

	.morph-button-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button-sidebar,
	.morph-button-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button-sidebar.open .morph-content {
		height: 100% !important;
	}
}











/* Morph Button2 */

.morph-button2 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button2 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button2.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button2.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button2-fixed,
.morph-button2-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button2-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button2-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button2-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button2-fixed.open .morph-content {
	opacity: 1;
}

.morph-button2-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button2-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button2-fixed.active > button {
	z-index: 2000;
}

.morph-button2-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button2-overlay .morph-content,
.morph-button2-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button2-overlay.open .morph-content,
.morph-button2-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button2.morph-button2-overlay {
	margin: 50px auto;
}

.morph-button2-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button2-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button2-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button2-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button2-modal.active::before {
	z-index: 1800;
}

.morph-button2-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button2-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button2.morph-button2-modal-1 {
	float: left;
}

.morph-button2.morph-button2-modal-2,
.morph-button2.morph-button2-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button2-modal-1 > button,
.morph-button2-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button2-modal-2 > button,
.morph-button2-modal-2 .morph-content,
.morph-button2-modal-3 > button,
.morph-button2-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button2-modal-4 {
	display: inline-block;
}

.morph-button2-modal-4 > button,
.morph-button2-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button2-modal-4 > button span,
.morph-button2-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button2-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button2-modal-4.open .morph-clone,
.no-js .morph-button2-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button2-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button2-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button2-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button2-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button2-modal-2.open .morph-content > div,
.morph-button2-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button2-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button2-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button2-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button2-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button2-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button2-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button2-inflow-1 > button span {
	visibility: hidden;
}

.morph-button2-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button2-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button2-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button2-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button2-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button2-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button2-sidebar,
.morph-button2-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button2-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button2-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button2-sidebar .morph-content {
	background: #e85657;
}

.morph-button2-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button2 .morph-content,
.morph-button2.open .morph-content,
.morph-button2-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button2-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button2-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button2 > button {
	display: none;
}

.no-js .morph-button2 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button2,
.no-js .morph-button2 .morph-content,
.no-js .morph-button2 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button2 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button2-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button2-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button2-fixed,
	.morph-button2-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button2-fixed > button {
		font-size: 75%;
	}

	.morph-button2-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button2-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button2-modal-4,
	.morph-button2-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button2-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button2-modal-4 > button span {
		display: block;
	}

	.morph-button2-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button2-sidebar,
	.morph-button2-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button2-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button2-sidebar.open .morph-content {
		height: 100% !important;
	}
}












/* Morph Button3 */

.morph-button3 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button3 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button3.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button3.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button3-fixed,
.morph-button3-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button3-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button3-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button3-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button3-fixed.open .morph-content {
	opacity: 1;
}

.morph-button3-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button3-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button3-fixed.active > button {
	z-index: 2000;
}

.morph-button3-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button3-overlay .morph-content,
.morph-button3-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button3-overlay.open .morph-content,
.morph-button3-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button3.morph-button2-overlay {
	margin: 50px auto;
}

.morph-button3-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button3-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button3-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button3-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button3-modal.active::before {
	z-index: 1800;
}

.morph-button3-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button3-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button3.morph-button2-modal-1 {
	float: left;
}

.morph-button3.morph-button3-modal-2,
.morph-button3.morph-button3-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button3-modal-1 > button,
.morph-button3-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button3-modal-2 > button,
.morph-button3-modal-2 .morph-content,
.morph-button3-modal-3 > button,
.morph-button3-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button3-modal-4 {
	display: inline-block;
}

.morph-button3-modal-4 > button,
.morph-button3-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button3-modal-4 > button span,
.morph-button3-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button3-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button3-modal-4.open .morph-clone,
.no-js .morph-button3-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button3-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button3-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button3-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button3-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button3-modal-2.open .morph-content > div,
.morph-button3-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button3-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button3-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button3-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button3-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button3-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button3-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button3-inflow-1 > button span {
	visibility: hidden;
}

.morph-button3-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button3-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button3-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button3-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button3-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button3-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button3-sidebar,
.morph-button3-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button3-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button3-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button3-sidebar .morph-content {
	background: #e85657;
}

.morph-button3-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button3 .morph-content,
.morph-button3.open .morph-content,
.morph-button3-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button3-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button3-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button3 > button {
	display: none;
}

.no-js .morph-button3 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button3,
.no-js .morph-button3 .morph-content,
.no-js .morph-button3 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button3 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button3-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button3-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button3-fixed,
	.morph-button3-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button3-fixed > button {
		font-size: 75%;
	}

	.morph-button3-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button3-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button3-modal-4,
	.morph-button3-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button3-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button3-modal-4 > button span {
		display: block;
	}

	.morph-button3-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button3-sidebar,
	.morph-button3-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button3-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button3-sidebar.open .morph-content {
		height: 100% !important;
	}
}











/* buttom4*/

/* Morph Button: Default Styles */

.morph-button4 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button4 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button4.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button4.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button4-fixed,
.morph-button4-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button4-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button4-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button4-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button4-fixed.open .morph-content {
	opacity: 1;
}

.morph-button4-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button4-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button4-fixed.active > button {
	z-index: 2000;
}

.morph-button4-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button4-overlay .morph-content,
.morph-button4-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button4-overlay.open .morph-content,
.morph-button4-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button4.morph-button4-overlay {
	margin: 50px auto;
}

.morph-button4-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button4-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button4-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button4-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button4-modal.active::before {
	z-index: 1800;
}

.morph-button4-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button4-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button4.morph-button4-modal-1 {
	float: left;
}

.morph-button4.morph-button4-modal-2,
.morph-button4.morph-button4-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button4-modal-1 > button,
.morph-button4-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button4-modal-2 > button,
.morph-button4-modal-2 .morph-content,
.morph-button4-modal-3 > button,
.morph-button4-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button4-modal-4 {
	display: inline-block;
}

.morph-button4-modal-4 > button,
.morph-button4-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button4-modal-4 > button span,
.morph-button4-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button4-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button4-modal-4.open .morph-clone,
.no-js .morph-button4-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button4-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button4-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button4-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button4-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button4-modal-2.open .morph-content > div,
.morph-button4-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button4-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button4-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button4-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button4-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button4-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button4-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button4-inflow-1 > button span {
	visibility: hidden;
}

.morph-button4-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button4-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button4-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button4-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button4-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button4-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button4-sidebar,
.morph-button4-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button4-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button4-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button4-sidebar .morph-content {
	background: #e85657;
}

.morph-button4-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button4 .morph-content,
.morph-button4.open .morph-content,
.morph-button4-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button4-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button4-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button4 > button {
	display: none;
}

.no-js .morph-button4 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button4,
.no-js .morph-button4 .morph-content,
.no-js .morph-button4 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button4 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button4-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button4-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button4-fixed,
	.morph-button4-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button4-fixed > button {
		font-size: 75%;
	}

	.morph-button4-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button4-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button4-modal-4,
	.morph-button4-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button4-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button4-modal-4 > button span {
		display: block;
	}

	.morph-button4-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button4-sidebar,
	.morph-button4-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button4-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button4-sidebar.open .morph-content {
		height: 100% !important;
	}
}







/*buttom5*/
/* Morph Button: Default Styles */

.morph-button5 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button5 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button5.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button5.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button5-fixed,
.morph-button5-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button5-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button5-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button5-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button5-fixed.open .morph-content {
	opacity: 1;
}

.morph-button5-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button5-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button5-fixed.active > button {
	z-index: 2000;
}

.morph-button5-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button5-overlay .morph-content,
.morph-button5-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button5-overlay.open .morph-content,
.morph-button5-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button5.morph-button5-overlay {
	margin: 50px auto;
}

.morph-button5-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button5-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button5-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button5-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button5-modal.active::before {
	z-index: 1800;
}

.morph-button5-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button5-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button5.morph-button5-modal-1 {
	float: left;
}

.morph-button5.morph-button5-modal-2,
.morph-button5.morph-button5-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button5-modal-1 > button,
.morph-button5-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button5-modal-2 > button,
.morph-button5-modal-2 .morph-content,
.morph-button5-modal-3 > button,
.morph-button5-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button5-modal-4 {
	display: inline-block;
}

.morph-button5-modal-4 > button,
.morph-button5-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button5-modal-4 > button span,
.morph-button5-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button5-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button5-modal-4.open .morph-clone,
.no-js .morph-button5-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button5-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button5-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button5-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button5-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button5-modal-2.open .morph-content > div,
.morph-button5-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button5-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button5-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button5-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button5-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button5-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button5-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button5-inflow-1 > button span {
	visibility: hidden;
}

.morph-button5-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button5-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button5-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button5-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button5-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button5-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button5-sidebar,
.morph-button5-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button5-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button5-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button5-sidebar .morph-content {
	background: #e85657;
}

.morph-button5-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button5 .morph-content,
.morph-button5.open .morph-content,
.morph-button5-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button5-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button5-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button5 > button {
	display: none;
}

.no-js .morph-button5 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button5,
.no-js .morph-button5 .morph-content,
.no-js .morph-button5 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button5 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button5-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button5-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button5-fixed,
	.morph-button5-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button5-fixed > button {
		font-size: 75%;
	}

	.morph-button5-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button5-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button5-modal-4,
	.morph-button5-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button5-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button5-modal-4 > button span {
		display: block;
	}

	.morph-button5-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button5-sidebar,
	.morph-button5-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button5-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button5-sidebar.open .morph-content {
		height: 100% !important;
	}
}



/*buttom6*/





/* Morph Button: Default Styles */

.morph-button6 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button6 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button6.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button6.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button6-fixed,
.morph-button6-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button6-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button6-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button6-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button6-fixed.open .morph-content {
	opacity: 1;
}

.morph-button6-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button6-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button6-fixed.active > button {
	z-index: 2000;
}

.morph-button6-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button6-overlay .morph-content,
.morph-button6-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button6-overlay.open .morph-content,
.morph-button6-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button6.morph-button6-overlay {
	margin: 50px auto;
}

.morph-button6-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button6-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button6-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button6-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button6-modal.active::before {
	z-index: 1800;
}

.morph-button6-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button6-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button6.morph-button6-modal-1 {
	float: left;
}

.morph-button6.morph-button6-modal-2,
.morph-button6.morph-button6-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button6-modal-1 > button,
.morph-button6-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button6-modal-2 > button,
.morph-button6-modal-2 .morph-content,
.morph-button6-modal-3 > button,
.morph-button6-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button6-modal-4 {
	display: inline-block;
}

.morph-button6-modal-4 > button,
.morph-button6-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button6-modal-4 > button span,
.morph-button6-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button6-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button6-modal-4.open .morph-clone,
.no-js .morph-button6-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button6-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button6-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button6-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button6-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button6-modal-2.open .morph-content > div,
.morph-button6-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button6-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button6-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button6-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button6-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button6-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button6-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button6-inflow-1 > button span {
	visibility: hidden;
}

.morph-button6-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button6-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button6-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button6-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button6-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button6-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button6-sidebar,
.morph-button6-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button6-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button6-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button6-sidebar .morph-content {
	background: #e85657;
}

.morph-button6-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button6 .morph-content,
.morph-button6.open .morph-content,
.morph-button6-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button6-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button6-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button6 > button {
	display: none;
}

.no-js .morph-button6 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button6,
.no-js .morph-button6 .morph-content,
.no-js .morph-button6 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button6 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button6-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button6-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button6-fixed,
	.morph-button6-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button6-fixed > button {
		font-size: 75%;
	}

	.morph-button6-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button6-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button6-modal-4,
	.morph-button6-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button6-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button6-modal-4 > button span {
		display: block;
	}

	.morph-button6-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button6-sidebar,
	.morph-button6-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button6-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button6-sidebar.open .morph-content {
		height: 100% !important;
	}
}



/* buttom 7*/
/* Morph Button: Default Styles */

.morph-button7 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button7 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button7.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button7.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button7-fixed,
.morph-button7-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button7-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button7-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button7-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button7-fixed.open .morph-content {
	opacity: 1;
}

.morph-button7-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button7-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button7-fixed.active > button {
	z-index: 2000;
}

.morph-button7-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button7-overlay .morph-content,
.morph-button7-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button7-overlay.open .morph-content,
.morph-button7-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button7.morph-button7-overlay {
	margin: 50px auto;
}

.morph-button7-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button7-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button7-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button7-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button7-modal.active::before {
	z-index: 1800;
}

.morph-button7-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button7-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button7.morph-button7-modal-1 {
	float: left;
}

.morph-button7.morph-button7-modal-2,
.morph-button7.morph-button7-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button7-modal-1 > button,
.morph-button7-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button7-modal-2 > button,
.morph-button7-modal-2 .morph-content,
.morph-button7-modal-3 > button,
.morph-button7-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button7-modal-4 {
	display: inline-block;
}

.morph-button7-modal-4 > button,
.morph-button7-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button7-modal-4 > button span,
.morph-button7-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button7-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button7-modal-4.open .morph-clone,
.no-js .morph-button7-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button7-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button7-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button7-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button7-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button7-modal-2.open .morph-content > div,
.morph-button7-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button7-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button7-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button7-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button7-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button7-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button7-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button7-inflow-1 > button span {
	visibility: hidden;
}

.morph-button7-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button7-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button7-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button7-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button7-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button7-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button7-sidebar,
.morph-button7-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button7-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button7-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button7-sidebar .morph-content {
	background: #e85657;
}

.morph-button7-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button7 .morph-content,
.morph-button7.open .morph-content,
.morph-button7-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button7-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button7-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button7 > button {
	display: none;
}

.no-js .morph-button7 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button7,
.no-js .morph-button7 .morph-content,
.no-js .morph-button7 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button7 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button7-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button7-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button7-fixed,
	.morph-button7-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button7-fixed > button {
		font-size: 75%;
	}

	.morph-button7-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button7-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button7-modal-4,
	.morph-button7-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button7-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button7-modal-4 > button span {
		display: block;
	}

	.morph-button7-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button7-sidebar,
	.morph-button7-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button7-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button7-sidebar.open .morph-content {
		height: 100% !important;
	}
}






/* buttom 8*/
/* Morph Button: Default Styles */

.morph-button8 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button8 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button8.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button8.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button8-fixed,
.morph-button8-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button8-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button8-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button8-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button8-fixed.open .morph-content {
	opacity: 1;
}

.morph-button8-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button8-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button8-fixed.active > button {
	z-index: 2000;
}

.morph-button8-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button8-overlay .morph-content,
.morph-button8-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button8-overlay.open .morph-content,
.morph-button8-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button8.morph-button8-overlay {
	margin: 50px auto;
}

.morph-button8-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button8-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button8-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button8-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button8-modal.active::before {
	z-index: 1800;
}

.morph-button8-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button8-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button8.morph-button8-modal-1 {
	float: left;
}

.morph-button8.morph-button8-modal-2,
.morph-button8.morph-button8-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button8-modal-1 > button,
.morph-button8-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button8-modal-2 > button,
.morph-button8-modal-2 .morph-content,
.morph-button8-modal-3 > button,
.morph-button8-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button8-modal-4 {
	display: inline-block;
}

.morph-button8-modal-4 > button,
.morph-button8-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button8-modal-4 > button span,
.morph-button8-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button8-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button8-modal-4.open .morph-clone,
.no-js .morph-button8-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button8-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button8-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button8-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button8-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button8-modal-2.open .morph-content > div,
.morph-button8-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button8-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button8-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button8-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button8-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button8-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button8-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button8-inflow-1 > button span {
	visibility: hidden;
}

.morph-button8-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button8-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button8-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button8-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button8-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button8-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button8-sidebar,
.morph-button8-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button8-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button8-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button8-sidebar .morph-content {
	background: #e85657;
}

.morph-button8-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button8 .morph-content,
.morph-button8.open .morph-content,
.morph-button8-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button8-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button8-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button8 > button {
	display: none;
}

.no-js .morph-button8 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button8,
.no-js .morph-button8 .morph-content,
.no-js .morph-button8 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button8 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button8-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button8-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button8-fixed,
	.morph-button8-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button8-fixed > button {
		font-size: 75%;
	}

	.morph-button8-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button8-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button8-modal-4,
	.morph-button8-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button8-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button8-modal-4 > button span {
		display: block;
	}

	.morph-button8-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button8-sidebar,
	.morph-button8-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button8-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button8-sidebar.open .morph-content {
		height: 100% !important;
	}
}









/*buttom 9*/
/* Morph Button: Default Styles */

.morph-button9 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button9 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button9.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button9.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button9-fixed,
.morph-button9-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button9-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button9-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button9-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button9-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button9-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button9-fixed.active > button {
	z-index: 2000;
}

.morph-button9-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button9-overlay .morph-content,
.morph-button9-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button9-overlay.open .morph-content,
.morph-button9-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button9.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button9-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button9-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button9-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button9-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button9-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button9-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button9.morph-button9-modal-1 {
	float: left;
}

.morph-button9.morph-button9-modal-2,
.morph-button9.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button9-modal-1 > button,
.morph-button9-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button9-modal-2 > button,
.morph-button9-modal-2 .morph-content,
.morph-button9-modal-3 > button,
.morph-button9-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button9-modal-4 {
	display: inline-block;
}

.morph-button9-modal-4 > button,
.morph-button9-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button9-modal-4 > button span,
.morph-button9-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button9-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button9-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button9-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button9-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button9-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button9-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button9-modal-2.open .morph-content > div,
.morph-button9-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button9-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button9-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button9-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button9-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button9-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button9-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button9-inflow-1 > button span {
	visibility: hidden;
}

.morph-button9-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button9-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button9-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button9-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button9-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button9-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button9-sidebar,
.morph-button9-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button9-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button9-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button9-sidebar .morph-content {
	background: #e85657;
}

.morph-button9-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button9 .morph-content,
.morph-button9.open .morph-content,
.morph-button9-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button9-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button9-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button9 > button {
	display: none;
}

.no-js .morph-button9 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button9,
.no-js .morph-button9 .morph-content,
.no-js .morph-button9 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button9 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button9-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button9-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button9-fixed,
	.morph-button9-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button9-fixed > button {
		font-size: 75%;
	}

	.morph-button9-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button9-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button9-modal-4,
	.morph-button9-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button9-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button9-modal-4 > button span {
		display: block;
	}

	.morph-button9-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button9-sidebar,
	.morph-button9-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button9-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button9-sidebar.open .morph-content {
		height: 100% !important;
	}
}





/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button10 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button10 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button10.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button10.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button10-fixed,
.morph-button10-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button10-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button10-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button10-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button10-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button10-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button10-fixed.active > button {
	z-index: 2000;
}

.morph-button10-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button10-overlay .morph-content,
.morph-button10-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button10-overlay.open .morph-content,
.morph-button10-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button10.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button10-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button10-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button10-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button10-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button10-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button10-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button10.morph-button9-modal-1 {
	float: left;
}

.morph-button10.morph-button9-modal-2,
.morph-button10.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button10-modal-1 > button,
.morph-button10-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button10-modal-2 > button,
.morph-button10-modal-2 .morph-content,
.morph-button10-modal-3 > button,
.morph-button10-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button10-modal-4 {
	display: inline-block;
}

.morph-button10-modal-4 > button,
.morph-button10-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button10-modal-4 > button span,
.morph-button10-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button10-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button10-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button10-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button10-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button10-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button10-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button10-modal-2.open .morph-content > div,
.morph-button10-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button10-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button10-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button10-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button10-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button10-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button10-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button10-inflow-1 > button span {
	visibility: hidden;
}

.morph-button10-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button10-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button10-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button10-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button10-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button10-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button10-sidebar,
.morph-button10-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button10-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button10-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button10-sidebar .morph-content {
	background: #e85657;
}

.morph-button10-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button10 .morph-content,
.morph-button10.open .morph-content,
.morph-button10-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button10-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button10-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button10 > button {
	display: none;
}

.no-js .morph-button10 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button10,
.no-js .morph-button10 .morph-content,
.no-js .morph-button10 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button10 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button10-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button10-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button10-fixed,
	.morph-button10-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button10-fixed > button {
		font-size: 75%;
	}

	.morph-button10-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button10-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button10-modal-4,
	.morph-button10-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button10-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button10-modal-4 > button span {
		display: block;
	}

	.morph-button10-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button10-sidebar,
	.morph-button10-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button10-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button10-sidebar.open .morph-content {
		height: 100% !important;
	}
}






/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button11 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button11 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button11.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button11.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button11-fixed,
.morph-button11-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button11-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button11-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button11-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button11-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button11-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button11-fixed.active > button {
	z-index: 2000;
}

.morph-button11-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button11-overlay .morph-content,
.morph-button11-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button11-overlay.open .morph-content,
.morph-button11-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button11.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button11-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button11-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button11-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button11-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button11-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button11-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button11.morph-button9-modal-1 {
	float: left;
}

.morph-button11.morph-button9-modal-2,
.morph-button11.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button11-modal-1 > button,
.morph-button11-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button11-modal-2 > button,
.morph-button11-modal-2 .morph-content,
.morph-button11-modal-3 > button,
.morph-button11-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button11-modal-4 {
	display: inline-block;
}

.morph-button11-modal-4 > button,
.morph-button11-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button11-modal-4 > button span,
.morph-button11-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button11-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button11-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button11-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button11-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button11-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button11-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button11-modal-2.open .morph-content > div,
.morph-button11-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button11-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button11-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button11-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button11-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button11-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button11-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button11-inflow-1 > button span {
	visibility: hidden;
}

.morph-button11-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button11-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button11-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button11-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button11-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button11-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button11-sidebar,
.morph-button11-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button11-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button11-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button11-sidebar .morph-content {
	background: #e85657;
}

.morph-button11-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button11 .morph-content,
.morph-button11.open .morph-content,
.morph-button11-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button11-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button11-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button11 > button {
	display: none;
}

.no-js .morph-button11 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button11,
.no-js .morph-button11 .morph-content,
.no-js .morph-button11 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button11 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button11-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button11-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button11-fixed,
	.morph-button11-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button11-fixed > button {
		font-size: 75%;
	}

	.morph-button11-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button11-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button11-modal-4,
	.morph-button11-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button11-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button11-modal-4 > button span {
		display: block;
	}

	.morph-button11-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button11-sidebar,
	.morph-button11-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button11-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button11-sidebar.open .morph-content {
		height: 100% !important;
	}
}



/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button12 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button12 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button12.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button12.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button12-fixed,
.morph-button12-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button12-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button12-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button12-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button12-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button12-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button12-fixed.active > button {
	z-index: 2000;
}

.morph-button12-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button12-overlay .morph-content,
.morph-button12-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button12-overlay.open .morph-content,
.morph-button12-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button12.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button12-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button12-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button12-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button12-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button12-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button12-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button12.morph-button9-modal-1 {
	float: left;
}

.morph-button12.morph-button9-modal-2,
.morph-button12.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button12-modal-1 > button,
.morph-button12-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button12-modal-2 > button,
.morph-button12-modal-2 .morph-content,
.morph-button12-modal-3 > button,
.morph-button12-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button12-modal-4 {
	display: inline-block;
}

.morph-button12-modal-4 > button,
.morph-button12-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button12-modal-4 > button span,
.morph-button12-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button12-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button12-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button12-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button12-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button12-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button12-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button12-modal-2.open .morph-content > div,
.morph-button12-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button12-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button12-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button12-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button12-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button12-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button12-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button12-inflow-1 > button span {
	visibility: hidden;
}

.morph-button12-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button12-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button12-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button12-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button12-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button12-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button12-sidebar,
.morph-button12-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button12-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button12-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button12-sidebar .morph-content {
	background: #e85657;
}

.morph-button12-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button12 .morph-content,
.morph-button12.open .morph-content,
.morph-button12-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button12-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button12-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button12 > button {
	display: none;
}

.no-js .morph-button12 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button12,
.no-js .morph-button12 .morph-content,
.no-js .morph-button12 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button12 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button12-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button12-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button12-fixed,
	.morph-button12-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button12-fixed > button {
		font-size: 75%;
	}

	.morph-button12-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button12-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button12-modal-4,
	.morph-button12-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button12-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button12-modal-4 > button span {
		display: block;
	}

	.morph-button12-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button12-sidebar,
	.morph-button12-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button12-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button12-sidebar.open .morph-content {
		height: 100% !important;
	}
}




/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button13 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button13 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button13.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button13.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button13-fixed,
.morph-button13-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button13-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button13-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button13-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button13-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button13-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button13-fixed.active > button {
	z-index: 2000;
}

.morph-button13-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button13-overlay .morph-content,
.morph-button13-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button13-overlay.open .morph-content,
.morph-button13-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button13.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button13-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button13-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button13-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button13-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button13-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button13-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button13.morph-button9-modal-1 {
	float: left;
}

.morph-button13.morph-button9-modal-2,
.morph-button13.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button13-modal-1 > button,
.morph-button13-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button13-modal-2 > button,
.morph-button13-modal-2 .morph-content,
.morph-button13-modal-3 > button,
.morph-button13-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button13-modal-4 {
	display: inline-block;
}

.morph-button13-modal-4 > button,
.morph-button13-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button13-modal-4 > button span,
.morph-button13-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button13-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button13-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button13-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button13-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button13-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button13-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button13-modal-2.open .morph-content > div,
.morph-button13-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button13-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button13-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button13-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button13-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button13-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button13-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button13-inflow-1 > button span {
	visibility: hidden;
}

.morph-button13-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button13-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button13-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button13-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button13-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button13-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button13-sidebar,
.morph-button13-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button13-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button13-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button13-sidebar .morph-content {
	background: #e85657;
}

.morph-button13-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button13 .morph-content,
.morph-button13.open .morph-content,
.morph-button13-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button13-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button13-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button13 > button {
	display: none;
}

.no-js .morph-button13 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button13,
.no-js .morph-button13 .morph-content,
.no-js .morph-button13 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button13 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button13-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button13-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button13-fixed,
	.morph-button13-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button13-fixed > button {
		font-size: 75%;
	}

	.morph-button13-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button13-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button13-modal-4,
	.morph-button13-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button13-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button13-modal-4 > button span {
		display: block;
	}

	.morph-button13-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button13-sidebar,
	.morph-button13-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button13-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button13-sidebar.open .morph-content {
		height: 100% !important;
	}
}




/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button14 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button14 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button14.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button14.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button14-fixed,
.morph-button14-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button14-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button14-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button14-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button14-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button14-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button14-fixed.active > button {
	z-index: 2000;
}

.morph-button14-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button14-overlay .morph-content,
.morph-button14-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button14-overlay.open .morph-content,
.morph-button14-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button14.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button14-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button14-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button14-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button14-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button14-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button14-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button14.morph-button9-modal-1 {
	float: left;
}

.morph-button14.morph-button9-modal-2,
.morph-button14.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button14-modal-1 > button,
.morph-button14-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button14-modal-2 > button,
.morph-button14-modal-2 .morph-content,
.morph-button14-modal-3 > button,
.morph-button14-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button14-modal-4 {
	display: inline-block;
}

.morph-button14-modal-4 > button,
.morph-button14-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button14-modal-4 > button span,
.morph-button14-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button14-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button14-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button14-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button14-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button14-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button14-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button14-modal-2.open .morph-content > div,
.morph-button14-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button14-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button14-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button14-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button14-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button14-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button14-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button14-inflow-1 > button span {
	visibility: hidden;
}

.morph-button14-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button14-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button14-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button14-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button14-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button14-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button14-sidebar,
.morph-button14-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button14-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button14-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button14-sidebar .morph-content {
	background: #e85657;
}

.morph-button14-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button14 .morph-content,
.morph-button14.open .morph-content,
.morph-button14-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button14-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button14-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button14 > button {
	display: none;
}

.no-js .morph-button14 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button14,
.no-js .morph-button14 .morph-content,
.no-js .morph-button14 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button14 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button14-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button14-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button14-fixed,
	.morph-button14-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button14-fixed > button {
		font-size: 75%;
	}

	.morph-button14-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button14-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button14-modal-4,
	.morph-button14-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button14-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button14-modal-4 > button span {
		display: block;
	}

	.morph-button14-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button14-sidebar,
	.morph-button14-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button14-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button14-sidebar.open .morph-content {
		height: 100% !important;
	}
}



/*buttom 10*/
/* Morph Button: Default Styles */

.morph-button15 {
	position: relative;
	display: block;
	margin: 5px auto;
}

.morph-button15 > button {
	position: relative;
	padding: 0 1em;
	border: none;
	background-color: #0154a6;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	overflow: hidden;
}

.morph-button15.open > button {
	pointer-events: none;
}

.morph-content {
	pointer-events: none;
}

.morph-button15.open .morph-content {
	pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button15-fixed,
.morph-button15-fixed .morph-content {
	width: 300px;
	height: 80px;
}

.morph-button15-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}

.morph-button15-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.morph-button15-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button15-fixed.open .morph-content {
	opacity: 1;
}

.morph-button9-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button15-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.morph-button15-fixed.active > button {
	z-index: 2000;
}

.morph-button15-fixed.active .morph-content {
	z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button15-overlay .morph-content,
.morph-button15-sidebar .morph-content {
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button15-overlay.open .morph-content,
.morph-button15-sidebar.open .morph-content {
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	
}

/* Morph Button Style: Overlay */
.morph-button15.morph-button9-overlay {
	margin: 50px auto;
}

.morph-button15-overlay .morph-content {
	overflow: hidden;
	background: #e85657;
}

.morph-button15-overlay.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

/* Morph Button Style: Modal */
.morph-button15-modal::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	pointer-events: none;
}

.morph-button15-modal.open::before {
	opacity: 1;
	pointer-events: auto;
}

.morph-button9-modal.active::before {
	z-index: 1800;
}

.morph-button15-modal .morph-content {
	overflow: hidden;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button15-modal.open .morph-content {
	top: 50% !important;
	left: 50% !important;
	margin: -210px 0 0 -300px;
	width: 600px;
	height: 420px;
	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button15.morph-button9-modal-1 {
	float: left;
}

.morph-button15.morph-button9-modal-2,
.morph-button15.morph-button9-modal-3 {
	display: inline-block;
	margin: 10px 15px;
}

.morph-button15-modal-1 > button,
.morph-button15-modal-1 .morph-content {
	background-color: #553445;
}

.morph-button15-modal-2 > button,
.morph-button15-modal-2 .morph-content,
.morph-button15-modal-3 > button,
.morph-button15-modal-3 .morph-content {
	background-color: #fef0e3;
	color: #e75854;
}

.morph-button15-modal-4 {
	display: inline-block;
}

.morph-button15-modal-4 > button,
.morph-button15-modal-4 .morph-content {
	background-color: #faf1e0;
	color: #553445;
}

.morph-button15-modal-4 > button span,
.morph-button15-modal-4 .morph-clone {
	padding-left: 10px;
	color: #286f81;
}

.morph-button15-modal-4 .morph-clone {
	position: absolute;
	right: 34px;
	bottom: 30px;
	z-index: 100;
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button15-modal-4.open .morph-clone,
.no-js .morph-button9-modal-4 .morph-clone {
	right: 10px;
	bottom: 10px;
}

.morph-button15-modal-1::before {
	background: rgba(240,221,204,0.7);
}

.morph-button15-modal-2.open .morph-content {
	margin: -210px 0 0 -170px;
	width: 340px;
	height: 420px;
}

.morph-button15-modal-3.open .morph-content {
	margin: -255px 0 0 -210px;
	width: 420px;
	height: 510px;
}

.morph-button15-modal-3.open .morph-content > div {
	height: 420px;
}

.morph-button15-modal-2.open .morph-content > div,
.morph-button15-modal-3.open .morph-content > div {
 	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.morph-button15-modal-4.open .morph-content {
	margin: -200px 0 0 -320px;
	width: 640px;
	height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button15-inflow {
	overflow: hidden;
	max-width: 100%;
	height: 70px;
}

.morph-button15-inflow > button {
	width: 100%;
	line-height: 70px;
}

.morph-button15-inflow .morph-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.morph-button15-inflow .morph-content .morph-clone {
	padding: 0;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button15-inflow-1 {
	width: 600px;
	margin: 2em auto;
	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button15-inflow-1 > button span {
	visibility: hidden;
}

.morph-button15-inflow-1 .morph-content .morph-clone {
	color: #f9f6e5;
	background: #e85657;
}

.morph-button15-inflow-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	background-color: #fef0e3;
	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, width 0.3s, transform 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.morph-button15-inflow-2 > button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #e75854;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.morph-button15-inflow-2.open > button {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.morph-button15-inflow-2 .morph-content {
	width: 260px;
	height: 200px;
}

.morph-button15-inflow-2.open {
	width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button15-sidebar,
.morph-button15-sidebar .morph-content {
	width: 60px;
	height: 60px;
}

.morph-button15-sidebar {
	position: fixed;
	bottom: 50px;
	left: 50px;
}

.morph-button15-sidebar > button {
	line-height: 60px;
	font-size: 1.6em;
	padding: 0;
}

.morph-button15-sidebar .morph-content {
	background: #e85657;
}

.morph-button15-sidebar.open .morph-content {
	top: 0 !important;
	left: 0 !important;
	width: 300px;
	height: 100%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button15 .morph-content,
.morph-button15.open .morph-content,
.morph-button15-modal-4 .morph-clone {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
	overflow: hidden;
}

.morph-button15-overlay.scroll .morph-content {
	overflow-y: scroll;
}

.morph-button15-sidebar.scroll .morph-content {
	overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button15 > button {
	display: none;
}

.no-js .morph-button15 {
	margin: 10px 0;
	float: none;
}

.no-js .morph-button15,
.no-js .morph-button15 .morph-content,
.no-js .morph-button15 .morph-content > div {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	visibility: visible;
	top: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	pointer-events: auto;
}

.no-js .morph-button15 .morph-content .icon-close {
	display: none;
}

.no-js .morph-button15-sidebar {
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	background: #e85657;
	overflow: auto;
}

.no-transition {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
	.morph-button15-modal.open .morph-content {
		top: 0% !important;
		left: 0% !important;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
	}
}

@media screen and (max-width: 400px) {
	.morph-button15-fixed,
	.morph-button15-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button15-fixed > button {
		font-size: 75%;
	}

	.morph-button15-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button15-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button15-modal-4,
	.morph-button15-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button15-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button15-modal-4 > button span {
		display: block;
	}

	.morph-button15-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button15-sidebar,
	.morph-button15-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button15-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button15-sidebar.open .morph-content {
		height: 100% !important;
	}
}
































































































