html { 
    height: 100%; 
    width: 100%;
    position: relative;
  }
@font-face {
	font-family: 'Museo Sans Cyrl 700';
	src: url('fonts/MuseoSansCyrl-700.eot');
	src: local('fonts/MuseoSansCyrl-700'),
		url('fonts/MuseoSansCyrl-700.eot?#iefix') format('embedded-opentype'),
		url('fonts/MuseoSansCyrl-700.woff') format('woff'),
		url('fonts/MuseoSansCyrl-700.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Museo Sans Cyrl 300';
	src: url('fonts/MuseoSansCyrl-300.eot');
	src: local('fonts/MuseoSansCyrl-300'),
		url('fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
		url('fonts/MuseoSansCyrl-300.woff') format('woff'),
		url('fonts/MuseoSansCyrl-300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
.wrap{
    width: 60%;
    /*margin: 0 auto;*/
    display: flex;
    justify-content: center;
}
.textblock{
    font-size: 1.1em;
}
.boldspan{
    font-family: 'Museo Sans Cyrl 700';
}
  body {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Museo Sans Cyrl 300';
    color: #3e476b;
    overflow: hidden;
  }
  #sector{
    width:308px;
    height:308px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .ringshadow{
    width: 100%;
    height: 100%;
    /*background: url('https://res.cloudinary.com/orekhov/image/upload/v1542030883/dev/white-disk.png') center center no-repeat;*/
  }
  .circlesticks{
    width: 100%;
    height: 100%;
    display:block;
    background: url('https://res.cloudinary.com/orekhov/image/upload/v1542030883/dev/circlesticks.png') center center no-repeat;
  }
  #sector:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://res.cloudinary.com/orekhov/image/upload/v1542030883/dev/external-radius.png') center center no-repeat;
    animation: ring-animate 10s infinite ease;
  }
  #sector:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://res.cloudinary.com/orekhov/image/upload/v1542030883/dev/internal-radius.png') center center no-repeat;
    animation: ring-reverse 10s infinite linear;
  }
  .hwlogo{
    height:100%;
    width:100%;
    display:block;
    position:relative;
    background:url('https://res.cloudinary.com/orekhov/image/upload/v1542030883/dev/headway-disk.png') center center no-repeat;
  }
  .color-disk{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display:block;
    background: url('https://res.cloudinary.com/orekhov/image/upload/v1544696470/dev/merged-colored-disk.png') center center no-repeat;
  }
  @keyframes ring-animate {
    0% {  transform: rotate(0deg);  }
    10% { transform: rotate(70deg); }
    23% { transform: rotate(30deg); opacity: 1; }
    35% { transform: rotate(100deg); opacity: 0.4; }
    40% { transform: rotate(75deg); opacity: 1; }
    55% { transform: rotate(130deg); }
    63% { transform: rotate(100deg); }
    70% { transform: rotate(175deg); }
    85% { transform: rotate(160deg); }
    89% { transform: rotate(250deg); }
    95% { transform: rotate(290deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes ring-reverse {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    23% { transform: rotate(-10deg); opacity: 0.2; }
    35% { transform: rotate(-120deg); opacity 1; }
    40% { transform: rotate(-90deg); }
    55% { transform: rotate(-150deg); }
    63% { transform: rotate(-200deg); }
    70% { transform: rotate(-175deg); }
    85% { transform: rotate(-230deg); }
    89% { transform: rotate(-300deg); }
    95% { transform: rotate(-340deg); }
    100% { transform: rotate(-360deg); }
  }
  @keyframes logo-rotate {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(360deg); }
    35% { transform: rotate(-120deg); }
    40% { transform: rotate(-90deg); }
    55% { transform: rotate(-150deg); }
    63% { transform: rotate(-200deg); }
    70% { transform: rotate(-175deg); }
    85% { transform: rotate(-230deg); }
    89% { transform: rotate(-300deg); }
    95% { transform: rotate(-340deg); }
    100% { transform: rotate(-360deg); }
  }