.asterisk--section {
	overflow: hidden;
}

.asterisk--container {
	padding: 60px 30px;
}

.asterisk--graphic-wrap {
	position: relative;
}

.asterisk--graphic {
	position: relative;
	transition: transform 0s ease-out;
	cursor: pointer;
}

.asterisk--graphic:before {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.asterisk--graphic span {
	position: absolute;
	top: 0;
	left: 38%;
	width: 24%;
	height: 50%;
	background: var(--dlc-green);
	transform-origin: center bottom;
}

.asterisk--graphic span:nth-child(2) {
	transform: rotate(72deg);
}

.asterisk--graphic span:nth-child(3) {
	transform: rotate(144deg);
}

.asterisk--graphic span:nth-child(4) {
	transform: rotate(-144deg);
}

.asterisk--graphic span:nth-child(5) {
	transform: rotate(-72deg);
}

.asterisk--graphic > div {
    position: absolute;
	width: 15px;
    height: 15px;
    border-radius: 50%;
	margin-left: -7.5px;
	margin-top: -7.5px;
    top: 50%;
    left: 50%;
	background: rgba(255,255,255,.6);
}

.asterisk--graphic > div:after {
	content: "";
	position: absolute;
    border: 3px solid rgba(255,255,255,.6);
    border-radius: 30px;
    height: 25px;
    width: 25px;
	top: -5px;
	left: -5px;
	animation: lpulsate 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0.0;
}

@-webkit-keyframes lpulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.asterisk--graphic-top {
	position: relative;
	z-index: 1;
}

.asterisk--graphic-tip {
	position: absolute;
	bottom: -25px;
	left: 38%;
	width: 24%;
	height: 25px;
	background: var(--dlc-orange);
	opacity: 0;
}
.asterisk--graphic-tip:after {
	content: "";
	position: absolute;
	top: -10px;
	left: calc(50% - 10px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent var(--dlc-orange) transparent;
}

.asterisk--slider > .asterisk--slide:not(:first-child) {
	display: none;
}

.asterisk--slider .slick-dots {
	position: relative;
	text-align: left;
	margin-left
}

.asterisk--slider .slick-dots button:before {
	background: var(--dlc-green);
	border-radius: 50%;
	opacity: .5;
}

.asterisk--slider .slick-dots .slick-active button:before {
	opacity: 1;
}

.asterisk--label {
	opacity: 0;
	transition: opacity 0s;
	transition-delay: 0s;
}

.changed .asterisk--label {
	opacity: 1;
	transition: opacity .4s;
	transition-delay: .2s;
}

.changing .asterisk--graphic {
	transition-duration: .5s;
	transform: rotate(72deg);
}

.changed .asterisk--graphic-tip {
	transition: opacity .2s;
	transition-delay: 0s;
	opacity: 1;
}