/*

Theme Name: Flatsome Child

Description: This is a child theme for Flatsome Theme

Author: UX Themes

Template: flatsome

Version: 3.0

*/



/*************** ADD CUSTOM CSS HERE.   ***************/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



:root{

	--cl-x: #154499;

	--cl-y: #2699D6;

	--cl-z: #FEA312;

	--fs-title: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);

	--fs-sub-title: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);

}



body{

	font-family: "Inter", sans-serif;

	line-height: normal;

}



p:last-of-type{

	margin-bottom: 0;

}



.rounded-8{

	border-radius: 0.5rem;

	overflow: hidden;

}

.bg-gradient{
	background: linear-gradient(0deg, #154499 0%, #2699d6 100%);
}

.justify-content-center{
	justify-content: center;
}

.row-inner-full > .col > .col-inner{
	height: 100%;
}

.row-slider .flickity-slider > .col{
	padding-bottom: 0 !important;
}


.svg-clip-path {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
}



#top-bar{

	.nav > li{

		margin: 0 1rem;

		font-size: 1rem;

		color: var(--cl-x);

		font-weight: 500;

	}

	.nav li a{

		font-size: inherit;

		font-weight: inherit;

	}



	.nav.nav-left{

		padding-left: 11rem;

	}



	.html.custom  i{

		margin-right: 0.375rem;

		color: var(--cl-z);

	}

	.social-icons a.icon{

		margin: 0;

	}

}



.social-icons{

	display: flex;

	gap: 0.25rem;

	a.icon{

		min-width: unset;

		min-height: unset;

		width: 2rem;

		height: 2rem;

		display: inline-flex;

		justify-content: center;

		align-items: center;

		margin: 0;

		background-color: var(--cl-z) !important;

		border-radius: 50%;

		color: #fff;

	}

	i{

		font-size: 0.875rem;

	}

}



.header-main{

	height: unset !important;

	position: unset;

	background: linear-gradient(0deg, #154499 0%, #2699d6 100%);

	.header-nav-main.nav > li > a{
			padding: 1.25rem 0;
	}
}



.header-bg-container{

	display: none;

}



/*===*/

#popup-form{
	border-radius: 1rem;
	overflow: hidden;
}

.wrapper-form-popup{

	padding: 2rem;

	.form-control{

		padding: 0.7rem 1rem;

		border-radius: 50rem;

		box-shadow: none !important;

		height: unset;
		font-size: inherit;

	}

	input[type='submit']{

		width: 100%;

		margin: 0;

		padding: 0.25rem 1rem;

		border-radius: 50rem !important;

	}

	.wpcf7-spinner{

		display: none;

	}

}


#popup-notify{
	display: none;
	position: absolute;
	top: clamp(6.25rem, 5.625rem + 3.125vw, 9.375rem);
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	z-index: 10;
	border-radius: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
	overflow: hidden;
	.popup-notify-title{
		padding: 0.75rem;
		background: linear-gradient(0deg, #154499 0%, #2699d6 100%);
		h2{
			margin-bottom: 0;
			color: #fff;
		}
	}
	.btn-close{
		position: absolute;
		right: 1rem;
        top: 0.75rem;
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
        color: #fff;
        cursor: pointer;
	}
}





/*====*/

.box-content-main h2{

	margin-bottom: 0.5rem;

	font-size: var(--fs-title);

	color: var(--cl-y);

}



.box-content-main h3{

	margin-bottom: 0.25rem;

	font-size: var(--fs-sub-title);

	font-weight: 700;

	color: var(--cl-z);

}



.main-title{

	position: relative;

}



.main-title h2{

	margin-bottom: 0;

	font-size: var(--fs-title);

	font-weight: 700;

	color: var(--cl-y);

}



.main-title h3{

	margin-bottom: 0;

	position: absolute;

	z-index: -1;

	top: 50%;

	transform: translateY(-50%);

	font-size: clamp(3rem, 2.6rem + 2vw, 5rem);

	color: #E8E8E8;

	line-height: normal;

}



.box-advantage{

	position: relative;

	transition: unset;

	.box-image{

		outline-offset: -2px;

		padding: 0.75rem;

		background: 

    		linear-gradient(white, white) padding-box, 

    		linear-gradient(to right, #fea312, #004199) border-box;

  		border-radius: 1.5rem;

  		border: 2px dashed #fff; transparent;



	}

	.box-image .image-cover{

		border-radius: 1.25rem;

	}



	.box-text{

		position: absolute;

		left: 0;

		top: 0;

		z-index: 10;

		padding: 1rem;

		background-color: #fff;

		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

		border-radius: 1rem;

		will-change: transform, opacity;

		transition: none;

		opacity: 0;

	}

}

.box-advantage:hover{

	z-index: 10;

}


/*===*/
.box-number{
	padding: 2rem 1rem;
	.icon-box-text{
		font-size: inherit;
		h3{
			margin-bottom: 0.5rem;
			font-size: clamp(1.5rem, 1rem + 2.5vw, 4rem);
			line-height: 1;
		}
	}
}








/*===*/

.box-blog-post .box-image{

	border-radius: 0.5rem;

}



.box-blog-post .box-text{

	padding-bottom: 0;

}



.box-blog-post .box-text .post-title{

	font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);

}



.box-blog-post:hover .box-text .post-title a{

	color: var(--cl-x) !important;

}



.is-divider{

	display: none;

}





/*===*/

.post-slide{

	.badge.post-date{

		top: 0;

		left: 0.5rem;

		transform: translateY(-100%);

		.badge-inner{

			padding: 0.25rem;

			background-color: #F3F3F3;

			color: #717171;

		}



		.badge-inner:after{

			content: "";

			position: absolute;

			left: 0;

			bottom: 0;

			width: 100%;

			height: 6px;

			background-color: var(--cl-x);

			transform: translateY(100%);

		}



		span{

			display: block;

		}



		br{

			display: none;

		}



		.post-date-day{

			margin-bottom: 0.25rem;

			padding-bottom: 0.25rem;

			font-size: 2rem;

			border-bottom: 1px solid #717171;

		}

		.post-date-month{

			font-size: 0.5rem;

		}

	}



	.box-image{

		border-radius: 0.5rem 0.5rem 0 0;

	}



	.box-text{

		padding: 1rem;

		background-color: #F3F3F3;

		border-radius: 0 0 0.5rem 0.5rem;

		.post-title{

			font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);

			a{

				margin: 0;

			}

		}

		.button{

			position: relative;

			min-height: unset;

			padding: 0.25rem 0;

			border-radius: 50rem;

			font-size: 0.875rem;

			color: #1E1E1E;

			font-weight: 500;

			line-height: normal;

			transition: all .2s ease-in-out;

		}



		.button:before{

			content: "";

			display: inline-block;

			vertical-align: middle;

			width: 1.5rem;

			height: 1.5rem;

			margin-right: 0.5rem;

			background-image: url('/wp-content/uploads/2025/10/icon-view.png');

			background-repeat: no-repeat;

			background-position: center center;

			background-size: contain;

			transition: all .3s ease-in-out;

		}

		.button:hover{

			padding: 0.25rem 0.5rem 0.25rem 0.25rem;

			background-color: #D00715 !important;

			color: #fff;

		}

	}

}







/*===*/

.wrapper-form-register > .col-inner{

	background-image: url('/wp-content/uploads/2025/10/bg-loi-ich.png');

}



.wpcf7-form{

	margin-bottom: 0;

}

.form-register .form-control{

	box-shadow: none;

	height: unset;

	padding: 0.75rem 1rem;

	border-radius: 0.25rem;

	font-size: inherit;

}



.form-register input[type=submit]{

	margin-bottom: 0;

	border-radius: 0.25rem;

}





/*=====*/

.galler-partner .gallery-box{

	margin: 2px;

	padding: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);

	background-color: #fff;

	/*box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125);*/

	.box-image{

		padding-top: 40% !important;

		img{

			object-fit: contain;

		}

	}

}



.row:after{

	content: unset;

}



.col-footer h3{

	margin-bottom: 1rem;

}



.col-footer p{

	margin-bottom: 0.75rem;

}



.ux-menu .ux-menu-link + .ux-menu-link{

	margin-top: 0.75rem !important;

}



.ux-menu .ux-menu-link__link{

	min-height: unset;

	padding: 0;

	transition: all .3s ease-in-out;

}



.ux-menu .ux-menu-link__link:hover{

	transform: translateX(0.5rem);

	color: var(--cl-x) !important;

}



.copyright-footer{

	color: #fff;

	font-weight: 300;

	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);

}





/*====*/

.banner-page{

	height: clamp(10rem, 9rem + 5vw, 15rem);

}



.banner-page h1.title-banner-page{

	margin-top: 0;

	margin-bottom: 0.5rem;

	font-weight: 700;

	font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);

	text-align: center;

}



.banner-page .text-box{

	width: 97% !important;

}



.banner-page p{

	margin-top: 0;

	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);

}



.rank-math-breadcrumb{

	text-align: center;

}







/*post*/

.title-archive{

	text-align: center;

	font-size: var(--fs-title);

}



ul.list-chill-cate{

	list-style: none;

	margin: 0;

	display: flex;

	justify-content: center;

	align-items: center;

	flex-wrap: wrap;

	gap: 0.5rem;

}



ul.list-chill-cate li{

	margin: 0;

}



ul.list-chill-cate li a{

	display: inline-block;

	padding: 0.5rem 1rem;

	border: 1px solid var(--cl-y);

	border-radius: 0.25rem;

	color: var(--cl-y);

	font-weight: 700;

	transition: all .3s ease-in-out;

}



ul.list-chill-cate li.active a,

ul.list-chill-cate li:hover a{

	background-color: var(--cl-y);

	color: #fff;

}



.no-results .searchform{

	margin-top: 1.5rem;

}





/*==== Contact*/

.icon-contact{

	padding: 0.5rem 0.75rem;

	border: 1px solid  rgba(0, 0, 0, 0.1);

	border-radius: 0.375rem;

	img{

		padding-top: 0;

	}

}



.form-contact .form-control{

	height: unset;

	padding:  0.75rem 1rem;

	box-shadow: none;

	transition: all .3s ease-in-out;

	border-radius: 0.375rem;

	font-size: inherit;

}



.form-contact input[type=submit]{

	margin: 0;

	background-color: #FF5757;

}



.form-contact .wpcf7-spinner{

	display: none;

}



.box-map iframe{

	width: 100%;

}



/*====*/

.box-counter-about{
	background: linear-gradient(0deg, #02427f 0%, #28a0dc 100%);

}



.box-why-choose-us{

	height: 100%;

	padding: 1.5rem;

	background-color: #fff;
	background: 
		linear-gradient(white, white) padding-box, 
		linear-gradient(to right, #fea312, #004199) border-box;
	border-top: 4px solid transparent;
}



.box-why-choose-us h3{

	font-size: 1.125rem;

	font-weight: 700;

}


/*====*/
.section-achievement .section-bg{
	height: 81%;
}

.wrapper-achievement{
	border-radius: 1rem;
	background: linear-gradient(0deg, #2385c6 0%, #02427f 100%);

}

.icon-achievement{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.5rem, 1.4rem + 0.5vw, 2rem) 1rem;
	color: #fff;
	.icon-box-img{
		width: unset !important;
		height: 3rem;
		.icon, .icon-inner{
			width: 100%;
			height: 100%;
		}
		img{
			padding-top: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.icon-box-text{
		flex: 1;
		h3{
			margin-bottom: 0;
			font-size: 2rem;
			color: inherit;
		}
	}
	.icon-box-img + .icon-box-text{
		padding-left: 0;
	}
}


/*===*/
.choose-us-mb{
	position: relative;
	.choose-us-number-mb{
		width: 5rem;
		height: 5rem;
		padding: 1rem;
		background-color: var(--cl-z);
		border-radius: 1rem;
		font-weight: 700;
		color: #fff;
	}
	.choose-us-content-mb{
		margin-left: 2.5rem;
		margin-top: -2.5rem;
		padding: 1rem;
		border-radius: 1rem;
		background-color: #Fff;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	}
}



/*===*/
.wrapper-slide{
	position: relative;
}

.wrapper-slide-outline{
	.swiper-button-prev,
	.swiper-button-next{
		width: 2.25rem;
		height: 2.25rem;
		background-color: #28A5DE;
		border-radius: 50%;
	}

	.swiper-button-prev:after,
	.swiper-button-next:after{
		font-size: 1rem;
		font-weight: 700;
		color: #02427F;
	}
}


.wrapper-slide-outline{
	.swiper-button-prev{
		left: -3rem;
	}
	.swiper-button-next{
		right: -3rem;
	}
}


.type-study-abroad-slide{
	padding: 0.25rem;
}



.box-type-study-abroad{
	display: block;
	height: 100%;
	padding: 0.5rem;
	border-radius: 1rem;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);		
	.inner-thumbnail{
		padding-top: 60%;
		border-radius: 0.75rem 0.75rem 0 0;
	}

	.box-content{
		margin-top: -1.5rem;
		padding: 0 1rem 1rem;
		position: relative;
		z-index: 1;
		.content-top{
			padding: 0.75rem;
			border-radius: 1rem;
			background: 
				linear-gradient(#F7F6F6, #F7F6F6) padding-box, 
				linear-gradient(to right, #fea312, #004199) border-box;
			border-top: 4px solid transparent;
			.label-key{
				margin-bottom: 0.25rem;
				font-size: 1rem;
				font-weight: 700;
				color: rgba(0, 0, 0, 0.3);
			}
			.title{
				margin-bottom: 0;
				font-size: 1.125rem;
			}
		}

		.content-bottom{
			.excerpt{
				margin-top: 1rem;
				margin-bottom: 1rem;
				padding-bottom: 1rem;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			}
			.view-more{
				font-weight: 700;
				text-decoration: underline;
				color: var(--cl-x);
			}
		}
	}
}



.icon-hotline{
	width: unset;
	display: flex;
	align-items: center;
	.icon-box-img img{
		padding-top: 0;
	}
}





/*===*/

.box-process{
	--w: 7rem;
	.box-img{
		width: var(--w);
		height: var(--w);
		position: relative;
		margin-bottom: 1rem;
	}
	.number{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(50%, -50%);
		width: 2.25rem;
		height: 2.25rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(0deg, #2385c6 0%, #02427f 100%);
		border-radius: 50%;
		color: #fff;
		font-weight: 700;
	}

	.box-content{
		background-color: #ECF0F4;
		padding: 1rem;
		position: relative;
	}

	.box-content h3{
		margin-bottom: 0.25rem;
		font-size: 1.125rem;
	}
}


.box-process:before{
	content: "\f0da";
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	color: rgba(0, 0, 0, 0.2);
	position: absolute;
	top: calc(var(--w) / 2);
	right: 0;
	transform: translateY(-50%);
}



.box-process:after{

	content: "";

	position: absolute;

	left: 0;

	top: calc(var(--w) / 2);

	z-index: -1;

	width: 100%;

	border-top: 1px dashed rgba(0, 0, 0, 0.2);

}



.box-process .box-content:after{

	content: "";	

	position: absolute;

	left: calc(var(--w) / 2);

	top: 0;

	width: 2rem;

	height: 1rem;

	background-color: inherit;

	transform: translate(-50%,-100%);

	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);



}



/*=== Trang Điều kiện */



.box-necessity-study-abroad{

	height: 100%;

	background: 

		linear-gradient(#fff, #fff) padding-box, 

		linear-gradient(to right, #fea312, #004199) border-box;

	border-bottom: 4px solid transparent;

	border-radius: 1rem;

	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

	overflow: hidden;

	.box-text{

		padding: 1rem;

	}



	.box-text h3{

		margin: 0;

		font-size: 1.125rem;

		line-height: normal;

	}

}



/*===*/

.box-icon-choose-us{

	position: relative;

	display: flex;

	flex-direction: column;

	height: 100%;

	--w-icon : 4rem;

	.icon-box-img{

		position: absolute;

		left: 0;

		top: 0;

		z-index: 1;

		width: var(--w-icon) !important;

		height: var(--w-icon) !important;

		border-radius: 50%;

		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

		img{

			padding-top: 0;

		}

	}

	.icon-box-text{

		flex: 1;

		.text{

			display: flex;

			flex-direction: column;

			height: 100%;

		}

		h3{

			height: var(--w-icon);

			display: flex;

			justify-content: center;

			align-items: center;

			margin-bottom: 0;			

			background: linear-gradient(90deg, #2385c6 0%, #176CAC 100%);

			color: #fff;

			position: relative;

		}

		p{

			flex: 1;

			position: relative;

			margin-right: 15%;

			margin-left: 5%;

			padding: 1.5rem;

		}



		p:before{

			content: "";

			position: absolute;

			inset: 0;

			z-index: -2;

			background: 

				linear-gradient(#fff, #fff) padding-box, 

				linear-gradient(to right, #2385c6, #02427f) border-box;

			border: 3px solid transparent;

			border-top: 0;

			border-bottom-left-radius: 2rem;

			border-bottom-right-radius: 2rem;

			clip-path: polygon(0 0, 50% 0, 50% 60%, 100% 60%, 100% 100%, 0 100%);

		}

		p:after{

			content: "";

			position: absolute;

			right: 0;

			top: 59%;

			transform: translateX(calc(50% - 1.5px));

			width: 0.75rem;

			height: 0.75rem;

			background-color: var(--cl-z);

			border-radius: 50%;

		}

	}

}



.box-icon-choose-us.box-icon-choose-us-1 h3{

	border-top-left-radius: 50rem;

	border-bottom-left-radius: 50rem;

	background: linear-gradient(90deg, #2385c6 0%, #176CAC 100%);

}



.box-icon-choose-us.box-icon-choose-us-1 h3:after{

	content: "";

	position: absolute;

	inset: -4px;

	z-index: -1;

	background: 

		linear-gradient(#fff, #fff) padding-box, 

		linear-gradient(to right, #2385C6, #1C6A9E) border-box;

	border-width: 1px 0 1px 1px;

	border-style: dashed;

	border-radius: inherit;

}



.box-icon-choose-us.box-icon-choose-us-2 h3{

	background: linear-gradient(90deg, #176CAC 0%, #0C5694 100%);

}



.box-icon-choose-us.box-icon-choose-us-2 h3:after{

	content: "";

	position: absolute;

	inset: -4px;

	z-index: -1;

	background: 

		linear-gradient(#fff, #fff) padding-box, 

		linear-gradient(to right, #176CAC, #0C5694) border-box;

	border-width: 1px 0 1px 0;

	border-style: dashed;

}



.box-icon-choose-us.box-icon-choose-us-3 h3{

	border-top-right-radius: 50rem;

	border-bottom-right-radius: 50rem;

	background: linear-gradient(90deg, #0C5694 0%, #02427F 100%);

}



.box-icon-choose-us.box-icon-choose-us-3 h3:after{

	content: "";

	position: absolute;

	inset: -4px;

	z-index: -1;

	background: 

		linear-gradient(#fff, #fff) padding-box, 

		linear-gradient(to right, #0C5694, #02427F) border-box;

	border-top-left-radius: 50rem;

	border-bottom-left-radius: 50rem;

	border-width: 1px 1px 1px 0;

	border-style: dashed;

	border-radius: inherit;

}





/*===*/

.box-condition .box-text{

	margin-right: 0;

	font-size: inherit;

}







/*===*/

.list-school{

	overflow: auto;

}



.list-school table{

	border-top-left-radius: 1.5rem;

	border-top-right-radius: 1.5rem;

	overflow: hidden;

	tr{

		height: unset !important;

	}

	th, td{

		width: unset !important;

		padding: 1rem;

		border: 1px solid rgba(0, 0, 0, 0.3);

		color: #000;

		font-size: inherit;

		text-align: center;

		transition: all .3s ease-in-out;

	}

	th{

		height: unset !important;

		background: linear-gradient(180deg, #2385c6 0%, #02427f 100%);

		border-color: rgba(255, 255, 255, 0.5);

		color: #fff;

	}

	tr:hover td{

		background-color: #b5dcf3;

	}

}







.faq-accordion{

	.accordion-title{

		padding-top: 1rem;

		padding-bottom: 1rem;

		background-color: transparent;

		border-color: rgba(0, 0, 0, 0.10);

		color: var(--cl-y);

		font-weight: 700;

	}

	.toggle{

		width: 2.5rem;

		height: 2.5rem;

	}

	.accordion-inner{

		padding-top: 0;

		color: rgba(0, 0, 0, 0.7);

	}

}













/*button contact*/

.button-contact-fixed{

    position: fixed;

    bottom: 6%;

    right: 0.25rem;

    z-index: 30;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.25rem;

}



.box-ring {

    width: clamp(4rem, 3.8rem + 1vw, 5rem);

    height: clamp(4rem, 3.8rem + 1vw, 5rem);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: visibility .5s;

    position: relative;

}



.box-ring-outline {

    position: absolute;

    width: clamp(4rem, 3.8rem + 1vw, 5rem);

    height: clamp(4rem, 3.8rem + 1vw, 5rem);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    transform-origin: 0 0;

    border: 2px solid rgba(30, 30, 30, 0.5);

    background-color: transparent;

    border-radius: 50%;

    opacity: .5;

    transition: all .5s;

    animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;

}



.box-ring-inline {

    position: absolute;

    left: 50%;

    top: 50%;

    width: clamp(3rem, 2.8rem + 1vw, 4rem);

    height: clamp(3rem, 2.8rem + 1vw, 4rem);

    transform: translate(-50%, -50%);

    transform-origin: 0 0;

    border: 2px solid transparent;

    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.5);

    transition: all .5s;

    animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;

}



.box-ring-image{

    width: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);

    height: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);

    padding: 6px;

    border: 2px solid transparent;

    border-radius: 50%;

    background-color: #000;

    opacity: 1;

    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

}



.box-ring-image img{

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.box-ring-label{

	position: absolute;

	right: 2rem;

	height: 2.25rem;

	z-index: -1;

	padding: 0.25rem 3rem 0.25rem 1rem;

	border-radius: 50rem;

	white-space: nowrap;

	color: #fff;

	display: flex;

	align-items: center;

}



@keyframes coccoc-alo-circle-anim {

    0% {

        transform: rotate(0) scale(.5) skew(1deg) translate(-50%, -50%);

        opacity: .1

    }

    30% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

        opacity: .5

    }

    100% {

        transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);

        opacity: .1

    }

}



@keyframes coccoc-alo-circle-fill-anim {

    0% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

    }

    50% {

        transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);

    }

    100% {

        transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);

    }

}



@keyframes coccoc-alo-circle-img-anim {

    0% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        transform: rotate(0) scale(1) skew(1deg)

    }

}