:root {
--mxtt-box-txt: #111;
--mxtt-box-bgr: #fff;
--mxtt-box-size: 200px;
}  


.circle {
position: relative;
width: var(--mxtt-box-size);
height: var(--mxtt-box-size);
border-radius: 100vmax;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }

.circle .logo {
position: absolute;
width:  calc(var(--mxtt-box-size) - 60px);
height: calc(var(--mxtt-box-size) - 60px);
border-radius: 100vmax;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background-color: var(--mxtt-box-bgr);
font-size: 52px;
color: var(--mxtt-box-txt);
font-weight: bold;
line-height: 50px; }

.circle .logo img{
position: absolute;
width:  calc(var(--mxtt-box-size) - 60px);
height: calc(var(--mxtt-box-size) - 60px);
border-radius: 100vmax;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;}

.circle .text {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
-webkit-animation: textRotation 8s linear infinite;
animation: textRotation 8s linear infinite;
color: var(--mxtt-box-txt); 
}

.circle .text.rot_right {
-webkit-animation: textRotation 8s linear infinite;
animation: textRotation 8s linear infinite;
}
.circle .text.rot_left {
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -ms-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle .text span {
position: absolute;
left: 50%;
font-size: 1.2em;
-webkit-transform-origin: 0 calc(var(--mxtt-box-size) * 0.5);
transform-origin: 0 calc(var(--mxtt-box-size) * 0.5); }


/* ANIMATIONS */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0);
  }
}
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(360deg);
  }
  to {
    -o-transform: rotate(0);
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@-webkit-keyframes textRotation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }

@keyframes textRotation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }