.quote3{
  color:#fff;
  width:100%;
  text-align:justify;
  border-top:  3px solid #89715b;
  border-bottom: 3px solid #89715b;
  padding:20px 10px;
  position:relative;
}

.quote3::before, .quote3::after{
  position:absolute;
  font-size:105px;
  font-family: 'Exo', sans-serif;
  background: #090909;
  display:block;
  height:30px;
  width:45px;
  text-align:center;
  color: white;
  left:0;
  right:0;
  margin:auto;
}

.quote3::before{
  content:"“";
  top:-30px;
  line-height:120px;
}

.quote3::after{
  content:"”";
  bottom:-25px;
  line-height: 80px;
}

.quote3 .txt{
  width:90%;
  margin:auto;
}

:root {
  --strokeWeight: 6px;
  --containerSize: 256px;
  --google-red: #E00712;
  --google-green: #01953F;
  --google-yellow: #FFCC03;
  --google-blue: #005DAA;
}

.custom-anim-circle .google-custom-wrapper {
  display: block;
  height: 230px;
  width: 100%;
  position: relative;
}

.custom-anim-circle .google-cont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--containerSize);
  height: var(--containerSize);
}

.custom-anim-circle .outer-box,
.custom-anim-circle .inner-box,
.custom-anim-circle .inner-box:after,
.custom-anim-circle .inner-box:before {
  display: block;
  position: absolute;
  margin: calc(var(--strokeWeight) * -1); /* same size as border */
  /* margin: 0px;   there is a shift without */
  padding: 0;
  border: var(--strokeWeight) solid transparent;
  border-color: rgba(128,128,128,0.035);
  border-radius: 50%;
  animation: spinning 24s ease-in infinite;
  /*animation-fill-mode: both;*/
  transform: translate3d(0,0,0);
  content: "";
}

.custom-anim-circle .outer-box {
  width: calc(var(--containerSize) - (var(--strokeWeight) * 2));
  height: calc(var(--containerSize) - (var(--strokeWeight) * 2));
  left: var(--strokeWeight);
  top: var(--strokeWeight);
  border-bottom-color: var(--google-red);
  animation-delay: -2.7s;
  animation-duration: 29s;
  animation-direction: reverse;  
}

.custom-anim-circle .inner-box {
  border-color: rgba(128,128,128,0.035);
  width: calc(var(--containerSize) - (var(--strokeWeight) * 10));
  height: calc(var(--containerSize) - (var(--strokeWeight) * 10));
  left: calc(var(--strokeWeight) * 4);
  top: calc(var(--strokeWeight) * 4);
  border-left-color: var(--google-green);
  animation-delay: -3.2s;
  animation-duration: 21s;
}

.custom-anim-circle .inner-box:before {
  border-color: rgba(128,128,128,0.035);
  width: calc(var(--containerSize) - (var(--strokeWeight) * 6));
  height: calc(var(--containerSize) - (var(--strokeWeight) * 6));
  left: calc(var(--strokeWeight) * -2);
  top: calc(var(--strokeWeight) * -2);  
  border-top-color: var(--google-yellow);
  animation-delay: -1.9s;
  animation-duration: 24s;
  animation-direction: alternate-reverse;
}

.custom-anim-circle .inner-box:after {
  border-color: rgba(128,128,128,0.035);
  width: calc(var(--containerSize) - (var(--strokeWeight) * 14));
  height: calc(var(--containerSize) - (var(--strokeWeight) * 14));
  left: calc(var(--strokeWeight) * 2);
  top: calc(var(--strokeWeight) * 2);  
  border-right-color: var(--google-blue);
  animation-delay: -2.6s;
  animation-duration: 19s;  
  animation-direction: reverse;  
}

.google-heading {
  position: absolute;
  text-align: center;
  width: calc( var(--containerSize) - (var(--strokeWeight) * 16) );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%
}

/****************************************************************/

@keyframes spinning {
	0% {
    -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);  /* IE 9 */
    transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}

	50% {
    -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);  /* IE 9 */
    transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}

	100% {
    -webkit-transform: rotate(720deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(720deg);  /* IE 9 */
    transform: rotate(720deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

@-webkit-keyframes spinning {
	0% {
    -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);  /* IE 9 */
    transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}

  50% {
    -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);  /* IE 9 */
    transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}

	100% {
    -webkit-transform: rotate(720deg);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(720deg);  /* IE 9 */
    transform: rotate(720deg);  /* Firefox 16+, IE 10+, Opera */
	}
}