.social-wrapper {
	position: fixed;
	left: 10vw;
	bottom: 1vh;
	z-index: 1000;
}

.social-wrapper .hamburger {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin: 50px auto;
	text-align: center;
	line-height: 60px;
	cursor: pointer;
	z-index: 2;
	position: relative;
}

.social-wrapper .cont {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(0deg, #0ba082, #5ce6ca);
	transition: 0.4s ease-in-out;
}

.social-wrapper .line {
	width: 75px;
	height: 10px;
	border-radius: 5px;
	background: #464646;
	margin: 10px auto;
	z-index: 2;
	position: relative;
	transition: all .4s linear .2s !important;
	top: 22px;
}

.social-wrapper .spin {
	/* animation: spin 0.5s ease-in-out; */
}

.social-wrapper .unspin {
	/* animation: spin 0.5s ease-in-out; */
	animation-direction: reverse;
}

#bubble1, #bubble2, .social-wrapper #bubble3, .social-wrapper #bubble4 {
	width: 50px;
	height: 50px;
	margin: 0 auto;
	opacity: 1;
	position: fixed;
	transition: all 0.2s ease 0s;
	border-radius: 50%;
	line-height: 120px;
	z-index: 999;
	left: 30px;
}

.bubble a {
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0;
	width: 100%;
	height: 100%;
}
.bubble div {
	text-align: center;
	height: 100%;
	width: 100%;
	line-height: 50px;
}
.bubble i {
	color: #fff !important;
	display: inline-block;
	line-height: normal;
		margin: auto;
		font-size: 30px;
		vertical-align: middle;
}

.cont div {
	text-align: center;
	height: 100%;
	width: 100%;
	line-height: 60px;
}
.cont div i {
	color: #fff !important;
	display: inline-block;
	line-height: normal;
		margin: auto;
		font-size: 35px;
		vertical-align: middle;
}

#bubble1 {
	background: linear-gradient(0deg, #1aaf47, #70df91);
	bottom: 20px;
	display: none;
}

#bubble2 {
	bottom: 80px;
	background: linear-gradient(0deg, #0ba082, #5ce6ca);
}

@media only screen and (max-width: 468px) {
	#bubble1 {
		display: block;
	}
}

.social-wrapper #bubble3 {
	top: 16px;
}

.social-wrapper #bubble4 {
	top: 16px;
}

.out1, .out2, .out3, .out4 {
	color: #fff !important;
	transition: all .4s linear 0.1s !important;
}
/* 
.bubble1 {
	left: 0 !important; right: 0 !important;
	margin: auto;
	top: -60px !important;
	background: linear-gradient(0deg, #1aaf47, #70df91);
}

.bubble2 {
	left: 0 !important; right: 0 !important;
	margin: auto;
	top: -115px !important;
	background: linear-gradient(0deg, #01bef6, #8fe5ff);
} */

.out3 {
	left: 0 !important; right: 0 !important;
	margin: auto;
	top: -170px !important;
	background: linear-gradient(0deg, #24cc63, #9be6b7);
	
}

.out4 {
	left: 0 !important; right: 0 !important;
	margin: auto;
	top: -225px !important;
	/* background: #4d4d4d; */
	background: linear-gradient(0deg, #0270f3, #01bef6);
	/* background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);  */
	line-height: 110px !important;
}
/* .out1 {
	left: 80px !important;
	top: 20px !important;
	background: #3B5998;
}

.out2 {
	left: 40px !important;
	top: 80px !important;
	background: #55acee;
}

.out3 {
	left: -30px !important;
	top: 80px !important;
	background: #dd4b39;
}

.out4 {
	left: -70px !important;
	top: 20px !important;
	background: #4d4d4d;
	line-height: 110px !important;
} */

.cross1, .cross3 {
	background: #fff !important;
}

.cross2 {
	opacity: 0 !important;
}

.cross1 {
	top: 42px !important;
	transform: rotate(45deg);
}

.cross3 {
	top: 2px !important;
	transform: rotate(-45deg);
}

.turn {
	/* animation: turn 0.4s ease-in-out; */
	transform: rotate(-90deg);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes turn {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-90deg);
	}
}

.mobileLink {
	display: none;
}
@media only screen and (max-width: 450px) {
	.desktopLink {
		display: none;
	}
	.mobileLink {
		display: block;
	}
}