@font-face {
  font-family: 'Helveticaneuecyr-Medium';
  src: url('../fonts/helveticaneuecyr_medium.eot');
  src: url('../fonts/helveticaneuecyr_medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helveticaneuecyr_medium.woff2') format('woff2'),
       url('../fonts/helveticaneuecyr_medium.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Helveticaneuecyr-Bold';
  src: url('../fonts/helveticaneuecyr_bold.eot');
  src: url('../fonts/helveticaneuecyr_bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helveticaneuecyr_bold.woff2') format('woff2'),
       url('../fonts/helveticaneuecyr_bold.woff') format('woff');
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

ul {
  list-style: none;
}

body {
  font-family: 'Helveticaneuecyr-Medium';
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  overflow: hidden;
}

main {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

strong {
  font-family: 'Helveticaneuecyr-Bold';
}

img {
  display: block;
  max-width: 100%;
}

section {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.smaller {
  align-items: center;
  justify-content: center;
}

p {
  font-family: 'Helveticaneuecyr-Medium';
  font-size: 17px;
  line-height: 1.09;
}

.plane {
  transform-origin: 0 0;
  will-change: transform;
}

.smaller .plane {
  position: relative;
  left: 50%;
  top: 50%;
  transform: scale(0.7) translateX(-50%) translateY(-50%);
  border: 0.1vw solid rgba(0,0,0,0.5);
}

.plane, .plane__img {
  width: 100%;
  position: relative;
}

.plane__img {
  height: auto;
  z-index: 1;
  margin-top: 0; 
}

.triangle {
  position: absolute;
  bottom: 0;
  height: 100%;
}

#detail-8  .triangle {
  width: 4%;
}

#detail-10 .triangle {
  width: 15%;
}

#detail-11 .triangle {
  width: 20%;
}

#detail-13 .triangle {
  width: 15%;
}

.img1 {
  right: 99.3%;
}

.img2 {
  left: 99.3%;
}

.detail {
  position: absolute;
  z-index: 3;
}

.detail__content {
  background-color: rgba(241,240,238,0.9);
  /*border-bottom: 3.7px solid #beb8ab;*/
  padding-top: 10px;
  padding-bottom: 13px;
  padding-left: 15px;
  padding-right: 15px;
}

.border-line {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 3.7px;
  background-color: #beb8ab;
}

#detail-8 .line-triangle {
  width: 7% !important;
  left: auto;
  right: 97%;
} 

#detail-13 .line-triangle {
  width: 17.85% !important;
  left: auto;
  right: 97%;
} 

#detail-1, #detail-2, #detail-3, #detail-4 {
  top: 6.2%;
}

#detail-1 {
  left: 14%;
}

#detail-2 {
  left: 37%;
}

#detail-3 {
  left: 52%;
}

#detail-4 {
  left: 71%;
}

#detail-5 {
  top: 57.51%; 
  left: 71.63%;
}

#detail-6 {
  top: 67.35%; 
  left: 71.92%;
}

#detail-7 {
  top: 71.8%; 
  left: 61.19%;
}

#detail-8 {
  top: 81.5%; 
  left: 56.53%;
}

#detail-9 {
  top: 81.5%; 
  left: 44.78%;
}

#detail-10 {
  top: 73.5%; 
  left: 42.85%;
}

#detail-11 {
  top: 69.58%;
  left: 24.1%;
}

#detail-12 {
  top: 60.5%;
  left: 18.7%;
}

#detail-13 {
  top: 53.5%; 
  left: 17.73%;
}

.circle, .circle__inner {
  border-radius: 50%;
}

.circle {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 3.5px solid #beb8ab;
}

.circle__inner {
  width: 63%;
  height: 63%;
  background-color: #0030cc;
}

.red {
  background-color: #cc0000;
}

.yellow {
  background-color: #ffc600;
}

#circle-1 {
  top: 29.5%; 
  left: 30.7%;
}

#circle-1_2 {
  top: 25.5%;
  left: 39.2%;
}

#circle-2 {
  top: 25.3%; 
  left: 47.5%;
}

#circle-3 {
  top: 27.9%;
  left: 67%;
}

#circle-3_2 {
  top: 25.5%;
  left: 72.4%;
}

#circle-4 {
  top: 38.8%;
  left: 67%;
}

#circle-5 {
  top: 50%;
  left: 67.5%;
}

#circle-6 {
  top: 51.8%;
  left: 63.6%;
}

#circle-7 {
  top: 52.7%;
  left: 60.7%;
}

#circle-8 {
  top: 44%;
  left: 58%;
}

#circle-9 {
  top: 50.4%;
  left: 54.2%;
}

#circle-10 {
  top: 57.5%;
  left: 50.5%;
}

#circle-11 {
  top: 58.5%;
  left: 46%;
}

#circle-11_2 {
  top: 60.6%;
  left: 39%;
}

#circle-12 {
  top: 46.5%; 
  left: 33.5%;
}

#circle-13 {
  top: 51.2%;
  left: 17.5%;
}

.line {
  position: absolute;
  bottom: 100%;
  width: 3.7px;
  background-color: #beb8ab;
  transform-origin: bottom center; 
}

.line.bottom {
  bottom: 0%;
}

#circle-1 .line {
  height: 146px;
  transform: translateZ(0) rotate(-7.4deg);
}

#circle-1_2 .line {
  height: 188px;
  transform: translateZ(0) rotate(-52.8deg);
}

#circle-2 .line {
  height: 114px;
  transform: translateZ(0) rotate(-16.5deg);
}

#circle-3 .line {
  height: 139px;
  transform: translateZ(0) rotate(-19.2deg);
}

#circle-3_2 .line {
  height: 172px;
  transform: translateZ(0) rotate(-48.8deg);
}

#circle-4 .line {
  height: 415px;
  transform: translateZ(0) rotate(55.8deg);
}

#circle-5 .line {
  height: 116.2px;
  transform: translateZ(0) rotate(180deg) rotate(-28.1deg);
}

#circle-6 .line {
  height: 262.1px;
  transform: translateZ(0) rotate(180deg) rotate(-27.9deg);
}

#circle-7 .line {
  height: 206px;
  transform: translateZ(0) rotate(180deg) rotate(0deg);
}

#circle-8 .line {
  height: 394px;
  transform: translateZ(0) rotate(180deg) rotate(5.5deg);
}

#circle-9 .line {
  height: 335px;
  transform: translateZ(0) rotate(180deg) rotate(0deg);
}

#circle-10 .line {
  height: 161px;
  transform: translateZ(0) rotate(180deg) rotate(0deg);
}

#circle-11 .line {
  height: 231px;
  transform: translateZ(0) rotate(180deg) rotate(47.8deg);
}

#circle-11_2 .line {
  height: 148px;
  transform: translateZ(0) rotate(180deg) rotate(25deg);
}

#circle-12 .line {
  height: 182px;
  transform: translateZ(0) rotate(180deg) rotate(27.4deg);
}

#circle-13 .line {
  height: 46px;
  transform: translateZ(0) rotate(180deg) rotate(33.6deg);
}

.legend {
  width: 25%;
  position: absolute;
  z-index: 12;
  top: 80%;
  left: 0%;
  border: 0.14vw solid #beb8ab;
  background-color: #fff;
  border-radius: 1vw;
  transform: scale(0.85);
  padding: 1.1vw 0;
}

.legend p {
  font-size: 0.95vw;
}

.legend__title {
  padding-left: 1.1vw;
}

.legend img {
  width: 100%;
}

.legend__levels {
  width: 100%;
}

.legend__levels p {
  position: relative;
  line-height: 1;
  text-transform: uppercase;
}

.legend__levels {
  display: flex;
  align-items: center;
  margin-top: -1.9%;
}

.cool {
  left: 8.5%;
}

.warm {
  left: 30.5%;
}

.hot {
  left: 50.5%;
}

/*ANIMATION - BEGIN*/
.plane__img, .circle, .detail__content, .detail__content p, .legend {
  opacity: 0;
}
.circle { transform: scale(0); }
.line { height: 0; opacity: 0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes circleGrow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.plane__img.animate { animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.circle.animate { animation: circleGrow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.detail__content.animate, .detail__content p.animate, .legend.animate { 
  animation: fadeIn 0.5s ease-out forwards; 
}