@charset "UTF-8";
/* CSS Document */



.modul-circleblock {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
}

.modul-circleblock .ModulContent {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.modul-circleblock .TextblockBox blockquote {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
}


.modul-circleblock .circlebox {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}


button {
    border: 0;
    position: relative;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding: 3.125vw;
}

button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin {
  height:35vw;
     width: 35vw;
	background-color: #fff;
}

.spin::before,
.spin::after {
    top: 0;
    left: 0;
}

.spin::before {
    border: 9px solid transparent;
}

.spin.triggeredCSS3::before {
    border-top-color: #00BEFF;
    border-right-color: #00BEFF;
    border-bottom-color: #00BEFF;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;
}

.spin::after {
    border: 0 solid transparent;
}

.spin.triggeredCSS3::after {
    border-top: 9px solid #00BEFF;
    border-left-width: 9px;
    border-right-width: 9px;
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.spin.triggeredCSS3::after {
    border-top: 9px solid #00BEFF;
    border-left-width: 9px;
    border-right-width: 9px;
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.circle::before,
.circle::after {
    border-radius: 100%;
}







/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */

@media screen and (max-width: 956px) {
	
button {
	padding: 6.125vw;
}

.spin {
  height:50vw;
     width: 50vw;
}
/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */
}

@media screen and (max-width: 720px) {


button {
	padding: 6.125vw;
}

.spin {
  height:85vw;
     width: 85vw;
}

	

.spin::before {
    border: 3px solid transparent;
}


.spin.triggeredCSS3::after {
    border-top: 3px solid #00BEFF;
    border-left-width: 3px;
    border-right-width: 3px;
}
.spin.triggeredCSS3::after {
    border-top: 3px solid #00BEFF;
    border-left-width: 3px;
    border-right-width: 3px;
}
/* ------------------------------------------------------------------------ */

}