.circle-morph-wrap{
	width:100%;
	background:#033350;
	padding:100px 0px;
}
.circle-morph-wrap.right{
	display:flex;
	justify-content:end;
}
.main-circle{
	width:75vh;
	height:75vh;
	background:yellow;
	border-radius:100%;
	transition:all .4s;
	transform: translateX(100px);
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	background-size:cover !important;
	background-position:50% 30% !important;
}
.circle-morph-wrap.right .main-circle{
	transform: translateX(-100px);
}
.main-circle .circle-btn{
    width: 70vh;
    height: 70vh;
    border: 1px solid #fff;
    border-radius: 100%;
    position: absolute;
    left: 70%;
    top: 55%;
	transform:translate(-50%, -50%);
	transition:all 0.5s;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	cursor:pointer;
}
.circle-morph-wrap.right .main-circle .circle-btn{
	left:30%;
}
.main-circle .circle-btn .icon{
	color:#fff;
	font-size:30px;
	opacity:0;
	transition: opacity 0.1s ease 0s;
}
.main-circle .circle-btn span{
	position:absolute;
	color:#fff;
	transform:translate(-60%, 0%);
	white-space:nowrap;
	font-size:24px;
	opacity:0;
	transition: opacity 0.1s ease 0s;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn{
	width:160px;
	height:160px;
	left:calc(100% - 150px);
	top:calc(100% - 150px);
	transform:translate(-50%, -50%);
	transition:all 0.4s;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn .icon{
	transition: opacity 0.6s ease 0.25s;
	opacity:1;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn .icon svg{
	fill:#fff;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn span{
	transition: opacity 0.6s ease 0.25s;
	opacity:1;
}
	
.circle-morph-wrap.is-visible .main-circle .circle-btn:hover{
	border:1px solid #ffc300;
	width:188px;
	height:188px;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn:hover span{
	color:#ffc300;
}

.circle-morph-wrap.is-visible .main-circle .circle-btn:hover .icon{
	color:#ffc300;
	margin-top:-1px;
	margin-top:-1px;
}
.circle-morph-wrap.is-visible .main-circle .circle-btn:hover .icon svg{
	fill:#ffc300;
}


.circle-morph-wrap.is-visible .main-circle{
	border-radius:00% 38vh 38vh 0px;
	width:70vw;
	transform: translateX(0px);
}
.circle-morph-wrap.right.is-visible .main-circle{
	border-radius:38vh 0vh 0vh 38vh;
	width:70vw;
	transform: translateX(0px);
}

.main-circle .inner-info{
	position:absolute;
	width:40vw;
	left:50%;
	top:50%;
	transform:translate(30%, -100%);
	transition:all .8s;
}
.circle-morph-wrap.right .main-circle .inner-info{
	position:absolute;
	width:40vw;
	left:50%;
	top:50%;
	transform:translate(-130%, -100%);
	transition:all .8s;
}

.main-circle .inner-info h2{
	font-size:60px;
	text-align:center;
	font-weight:700;
	color:#fff;
	text-shadow: 0px 0px 70px rgba(0,0,0,0.95);
}
.main-circle .inner-info p{
	font-size:32px;
	opacity:0;
	color:#fff;
	text-align:center;
	overflow:hidden;
	transition:all .0s;
	text-shadow: 0px 0px 70px rgba(0,0,0,0.95);
}
.circle-morph-wrap.is-visible .main-circle .inner-info{
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	transition: all 0.4s ease;
}
.circle-morph-wrap.is-visible .main-circle .inner-info p{
	max-height:500px;
	opacity:1;
	transition:all 0.8s;
}

@media only screen and (max-width: 1600px) {
	.main-circle .inner-info h2{
		font-size:48px;
		text-align:center;
		font-weight:700;
		color:#fff;
		text-shadow: 0px 0px 70px rgba(0,0,0,0.95);
	}
	.main-circle .inner-info p{
		font-size:24px;
	}
	.main-circle .circle-btn span{
		font-size:18px;
	}
	.circle-morph-wrap.is-visible .main-circle .circle-btn{
		width:130px;
		height:130px;
		left:calc(100% - 120px);
		top:calc(100% - 120px);
		transform:translate(-50%, -50%);
		transition:all 0.4s;
	}
	.circle-morph-wrap.is-visible .main-circle .circle-btn:hover{
		border:1px solid #ffc300;
		width:160px;
		height:160px;
	}
}