.icon-bar {
	/*position: fixed;   to display the labels through out the page */
	position: absolute;
	top: -65%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1040;
	text-align: center;
	}
	* {
	box-sizing: border-box;
	}
	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	.wrapper {
	  display: flex;
	  justify-content: center;
	}

	.cta {
		display: flex;
		padding: 1px 45px;
		text-decoration: none;
		font-family: 'Poppins', sans-serif;
		font-size: 28px;
		color: white;
		background: #b3002d;
		transition: 1s;
		box-shadow: 6px 6px 0 black;
		transform: skewX(-15deg);
	}

	.cta:focus {
	   outline: none; 
	}

	.cta:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ffffff;
	}

	.cta span:nth-child(2) {
		transition: 0.5s;
		margin-right: 0px;
	}

	.cta:hover  span:nth-child(2) {
		transition: 0.5s;
		margin-right: 45px;
	}

	.cta1 {
		display: flex;
		padding: 1px 45px;
		text-decoration: none;
		font-family: 'Poppins', sans-serif;
		font-size: 28px;
		color: white;
		background: #4000ff;
		transition: 1s;
		box-shadow: 6px 6px 0 black;
		transform: skewX(-15deg);
	}
	.cta1:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ffffff;
	}
	.cta1:focus {
	   outline: none; 
	}

	.cta1:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ff0040;
	}

	.cta1 span:nth-child(2) {
		transition: 0.5s;
		margin-right: 0px;
	}

	.cta1:hover  span:nth-child(2) {
		transition: 0.5s;
		margin-right: 45px;
	}
	.cta2 {
		display: flex;
		padding: 1px 45px;
		text-decoration: none;
		font-family: 'Poppins', sans-serif;
		font-size: 28px;
		color: white;
		background: #b3b300;
		transition: 1s;
		box-shadow: 6px 6px 0 black;
		transform: skewX(-15deg);
	}
	.cta2:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ffffff;
	}
	.cta2:focus {
	   outline: none; 
	}

	.cta2:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ff0040;
	}

	.cta2 span:nth-child(2) {
		transition: 0.5s;
		margin-right: 0px;
	}

	.cta2:hover  span:nth-child(2) {
		transition: 0.5s;
		margin-right: 45px;
	}
	.cta3 {
		display: flex;
		padding: 1px 45px;
		text-decoration: none;
		font-family: 'Poppins', sans-serif;
		font-size: 28px;
		color: white;
		background: #b300b3;
		transition: 1s;
		box-shadow: 6px 6px 0 black;
		transform: skewX(-15deg);
	}
	.cta3:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ffffff;
	}
	.cta3:focus {
	   outline: none; 
	}

	.cta3:hover {
		transition: 0.5s;
		box-shadow: 10px 10px 0 #ff0040;
	}

	.cta3 span:nth-child(2) {
		transition: 0.5s;
		margin-right: 0px;
	}

	.cta3:hover  span:nth-child(2) {
		transition: 0.5s;
		margin-right: 45px;
	}

	  span {
		transform: skewX(15deg) 
	  }

	  span:nth-child(2) {
		width: 20px;
		margin-left: 30px;
		position: relative;
		top: 10%;
	  }
	  
	/**************SVG****************/

	path.one {
		transition: 0.4s;
		transform: translateX(-60%);
	}

	path.two {
		transition: 0.5s;
		transform: translateX(-30%);
	}

	.cta:hover path.three {
		animation: color_anim 1s infinite 0.2s;
	}

	.cta:hover path.one {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.6s;
	}

	.cta1:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}
	.cta1:hover path.three {
		animation: color_anim 1s infinite 0.2s;
	}

	.cta1:hover path.one {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.6s;
	}

	.cta1:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}
	
	.cta2:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}
	.cta2:hover path.three {
		animation: color_anim 1s infinite 0.2s;
	}

	.cta2:hover path.one {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.6s;
	}

	.cta2:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}
	.cta3:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}
	.cta3:hover path.three {
		animation: color_anim 1s infinite 0.2s;
	}

	.cta3:hover path.one {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.6s;
	}

	.cta3:hover path.two {
		transform: translateX(0%);
		animation: color_anim 1s infinite 0.4s;
	}

	/* SVG animations */

	@keyframes color_anim {
		0% {
			fill: white;
		}
		50% {
			fill: #FBC638;
		}
		100% {
			fill: white;
		}
	}