:root {
  box-sizing: border-box;
}

*, ::before, ::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  --main_color:rgb(81, 82, 90);
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
font-family: Montserrat, system-ui, sans-serif;
}

/* $header-color: rgb(219, 202, 255); */
html {
  font-size: 100%;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  background: repeating-linear-gradient(to right, transparent 0, transparent 8px, var(--main_color) 8px, var(--main_color) 122px, transparent 122px, transparent 127px), repeating-linear-gradient(180deg, transparent 0, transparent 8px, var(--main_color) 8px, var(--main_color) 122px, transparent 122px, transparent 127px), repeating-linear-gradient(180deg, rgb(249, 201, 139), rgb(249, 201, 139) 3px, transparent 3px, transparent 127px), repeating-linear-gradient(to right, rgb(249, 201, 139), rgb(249, 201, 139) 3px, var(--main_color) 3px, var(--main_color) 127px); /*background: #158e79;*/
}
html{
  scroll-behavior: smooth;
}
body{
  align-content: stretch;
  width: 100%;
}

.global_cover{
  min-height: 100%;
  background-color: aliceblue;
  max-width: 1920px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5rem 0 0 0;
}

h1, .title{
  font-size: 3rem;
  font-weight: 600;
}

/*--------------------------------------------------Main block wrap-------------------------------------------------*/

.header {
  max-width: 1920px;
  max-height: 450px;
  margin: 0;
}
.header__cover {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: minmax(300px, 1fr) 3fr;
  grid-template-rows: 2fr 2fr 2fr;
  background-color: azure;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  border-radius: 5rem 0 0 0;
}
.header__menu {
  width: 100%;
  height: 100%;
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: transparent;
}
.header__list {
  display: flex;
  width: 100%;
  height: 100%;
}
.header__items {
  list-style-type: none;
  margin: 0;
  padding: 0 .8rem;
  flex: 1 1 100%;
  text-align: center;
  border: 5px solid black;
  border-radius: 0 0 5rem 2rem;
}
.header__items:nth-child(2){
  flex:  1 1 130%;
}

.header__items:nth-child(4){
  flex:  1 1 110%;
}

.header__link {
  display: flex;
  width: 100%;
  height: 100%;
  color: rgb(26, 26, 112);
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  padding: 0 .2rem;
}

/* Стили для описания калькуляторов */

.dedscr{
  font-family: Montserrat, sans-serif, Comic Sans MS;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 3rem;
  text-align: justify;
  width: 100%;
  margin: 1rem 0 0 0;
}

.img_ded-left {
  min-width: 25rem;
  width: 20%;
  height: auto;
  float: left;
  padding: 1rem 1rem 1rem 0;
  filter: drop-shadow(3px 3px 6px #4444dd);
}
.dedscr > p{
  min-width: 100%;
  margin-top: 2rem;
}
.img_ded-right {
  min-width: 25rem;
  width: 20%;
  height: auto;
  float: right;
  padding: 1rem 0 1rem 1rem;
  filter: drop-shadow(-3px 3px 6px #4444dd);
}
.dedscr > h1{
  text-align: center;
}


/* Стили для описания калькуляторов */




.header__items:hover {
  border: 5px solid rgba(9, 18, 146, 0.801);
  box-shadow: 5px -5px 13px 0 black;
  background-image: linear-gradient(to right top, rgba(43, 110, 211, 0.253), white);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.header__items:active {
  background-color: aquamarine;
  color: red;
}

.icon {
  display: flex;
  grid-column: 1/2;
  grid-row: 1/4;
  width: 100%;
  background-color: rgba(43, 110, 211, 0.253);
  border-radius: 5rem;
  border: 5px solid rgb(23, 23, 61);
}

.title {
  background-image: linear-gradient(to right top, rgba(43, 110, 211, 0.253), white);
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  grid-column: 2/3;
  grid-row: 1/3;
  font-size: 3.8rem;
  text-align: center;
  padding: 1rem;
}

.burger, .burger__cover {
  display: none;
}

@keyframes rotation {
  0% {
    transform: rotateY(0deg) rotateX(20deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(20deg);
  }
}
.shar {
  margin: 30px auto;
  position: relative;
  animation: rotation 25s linear infinite;
  transform-style: preserve-3d;
  width: 330px;
  height: 330px;
  padding: 30px;
  display: inline-block;
  text-align: center;
}

.sphere {
  width: 270px;
  height: 270px;
  border: 15px double rgb(197, 174, 46);
  border-radius: 50%;
  position: absolute;
  background-color: transparent;
  box-shadow: 2px 2px 7px 0 rgb(170, 77, 10);
}

.sphere_hor {
  width: 230px;
  height: 230px;
  border: 15px double rgb(197, 174, 46);
  border-radius: 50%;
  position: absolute;
  background-color: transparent;
  box-shadow: 2px 2px 7px 0 saddlebrown;
}

.nb2 {
  transform: rotateY(90deg);
  transform-origin: 50%;
}

.nb3 {
  transform: rotateY(45deg);
  transform-origin: 50%;
}

.nb4 {
  transform: rotateY(135deg);
  transform-origin: 50%;
}

.nb5 {
  transform: rotateX(90deg);
  transform-origin: 50%;
}

.nb6 {
  margin: 20px;
  transform: rotateX(90deg);
  transform-origin: 50%;
  top: 30%;
}

.nb7 {
  margin: 20px;
  transform: rotateX(90deg);
  transform-origin: 50px;
  top: -10%;
}

.body__cover{
  min-height: 100%;
  background-color: aliceblue;
  padding: 0 1rem;
  text-align: center;
  width: 100%;
}

.inter_father{
  margin: 2rem;
  height: 600px;
  display: flex;
  outline: 2px solid rebeccapurple;
  border-radius: .8rem;
  background-color: white;
background-image: repeating-linear-gradient(to right, transparent, transparent calc(37.8px - 1px) , rgba(236, 12, 12, .1) calc(37.8px - 1px) calc(37.8px + 1px), transparent calc(37.8px + 1px)),
                  repeating-linear-gradient(to left, transparent, transparent calc(37.8px - 1px) , rgba(236, 12, 12, .1) calc(37.8px - 1px) calc(37.8px + 1px), transparent calc(37.8px + 1px)),
                  repeating-linear-gradient(to top, transparent, transparent calc(37.8px - 1px) , rgba(236, 12, 12, .1) calc(37.8px - 1px) calc(37.8px + 1px), transparent calc(37.8px + 1px)),
                  repeating-linear-gradient(to bottom, transparent, transparent calc(37.8px - 1px) , rgba(236, 12, 12, .1) calc(37.8px - 1px) calc(37.8px + 1px), transparent calc(37.8px + 1px)),
                  linear-gradient(transparent calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), 
                  linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
;
background-size: 50% 100%, 50% 100%, 100% 50%, 100% 50%, auto, auto;
background-position: right, left, top, bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  box-shadow: 6px 6px 9px 0px rgb(104, 96, 96) inset;
  position: relative;
}

.result_empty{
  font-size: 1rem;
  text-shadow: 1px 1px 1px rgb(85, 158, 226);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.result_full{
  font-size: 1.8rem;
  text-shadow: 2px 2px 3px rgb(223, 214, 214);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}


.dot{
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 4px solid black;
  background-color: yellow;
  box-shadow: 6px 6px 8px rgb(104, 96, 96);
  user-select:none;
}

.dot:hover{
  cursor: grab;
}

.dot:active{
  cursor: grabbing;
}

.dot_pr_0{
  display: inline-block;
}
.dot_pr_0:before{
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1rem;
  content: "A1";
}

.dot_pr_1:before{
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1rem;
  content: "A2";
}

.dot_pr_2:before{
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1rem;
  content: "A3";
}

.field{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid rebeccapurple;
  border-radius: .8rem;
}

.field.dannie > p{
  display: inline-block;
  margin: 0;
}

.field > fieldset{
  width: 100%;
  display: flex;
}

.field > fieldset > p{
  margin-left: 1rem;
  margin-top: .5rem;
}

.field > fieldset > p:first-of-type {
  margin-top: 0;
}



main > .field.dannie{
  margin: 1rem 0;
}

.dot_block{
  border: 2px solid rebeccapurple;
  border-radius: .8rem;
  padding: 1rem;
  display: flex;
}

.bot_chek{
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
background-color: rgba(227, 253, 253, 0)
}
.submit{
padding: .3rem;
border-radius: .5rem;
background-color: antiquewhite;
margin: .2rem;
}

.input_wind, .input_er{
display: inline-block;
padding: .3rem;
border-radius: .5rem;
background-color: antiquewhite;
margin: .2rem;
}

.input__cover{
margin: 0;

}

.description{
padding: .3rem;
border: 2px solid black;
margin: 7px;
border-radius: .3rem;
user-select:none;
}

.footer {
  width: 100%;
  max-width: 1920px;
  background-color: aliceblue;
  padding: 4rem 0 0 0;
  margin-bottom: 0;
}

  .footer__cover {
    display: grid;
    width: 100%;
    min-height: 200px;
    background-image: linear-gradient(to bottom right, rgba(43, 110, 211, 0.253) 30%, aliceblue);
    border-radius: 3rem 3rem 0 0;
    border: 3px solid black;
    grid-template-columns: 3fr minmax(300px, 1fr);
    grid-template-rows: 1.5fr 2fr 2fr;
  }

 .footer__menu{
  width: 100%;
    grid-column: 1/3;
    grid-row: 1/2;
 }

 .footer__list{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 2px solid black;
 }


 .footer__items{
  list-style-type: none;
  width: 100%;
  height: 100%;
 }

 .footer__items:nth-child(n):not(:last-of-type){
  border-right: 2px solid black;
 }

 .footer__link{
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration:none;
  font-size: 1.6rem;
  color: black;
 }
.contacts{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  grid-column: 1/3;
  grid-row: 2/3;
}
.contacts > a{
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
}
.rights{
  width: 100%;
  height: 100%;
  grid-column: 1/3;
  grid-row: 3/4;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
  text-align: center;
}
.rights.sub{
  width: 100%;
  height: 100%;
  vertical-align: center;
}
.video_utub{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 854px;
  height: 480px;
  padding: 1rem;
}
.video_utub>iframe{
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: 2px solid rebeccapurple;
}

/*------------------------------------------------------------------Медиазапросы------------------------------------------------------------------------------*/

@media (max-width: 1440px) {
  .shar {
    margin: 10px auto;
    width: 270px;
    height: 270px;
  }
  .sphere {
    width: 210px;
    height: 210px;
  }
  .header__link {
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  }
  .sphere_hor {
    width: 160px;
    height: 160px;
  }
  .nb6 {
    margin: 25px;
    top: 30%;
  }
  .nb7 {
    margin: 25px;
    top: -10%;
  }
  .title {
    font-size: 3rem;
  }
  .header {
    height: 300px;
  }
}
@media (max-width: 1024px) {
  .title {
    font-size: 1.4rem;
    height: 100%;
    grid-column: 2/3;
    grid-row: 1/4;
  }
  .header {
    width: 100%;
    height: 150px;
  }
  .header__menu {
    display: none;
  }
  .header__cover {
    grid-template-columns: minmax(300px, 1fr) 2fr minmax(100px, 0.5fr);
    grid-template-rows: 2fr 2fr 1fr;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .burger {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 3px;
    background-color: black;
    position: relative;
  }
  .burger:before, .burger:after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 3px;
    background-color: black;
    position: absolute;
  }
  .burger:before {
    top: 20px;
  }
  .burger:after {
    top: -20px;
  }
  .burger__cover {
    display: block;
    margin: 0 auto;
    grid-column: 3/4;
    grid-row: 1/4;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
  }
  .burger__cover.active {
    margin: 0 auto;
    border: 3px solid black;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .burger.active {
    width: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .burger.active:before {
    rotate: 45deg;
    width: 123px;
    left: -63px;
    top: 0;
  }
  .burger.active:after {
    rotate: -45deg;
    width: 123px;
    left: -63px;
    top: 0;
  }
  .header__menu.active {
    display: block;
    position: absolute;
    max-height: 400px;
    max-width: 320px;
    top: 0;
    right: 0;
    top: 150px;
  }
  .header__menu.active .header__list {
    display: flex;
    flex-direction: column;
    background-color: azure;
  }
  .shar {
    margin: 10px auto;
    width: 100px;
    height: 100px;
  }
  .sphere {
    width: 80px;
    height: 80px;
  }
  .sphere_hor {
    width: 60px;
    height: 60px;
  }
  .nb6 {
    margin: 10px;
    top: 10%;
  }
  .nb7 {
    margin: 10px;
    top: 50%;
  }
  .video_utub{
    width: 426px;
    height: 240px;
    padding: .6rem;
  }
}
@media (max-width: 1024px) {
  .title {
    display: none;
  }
  .icon {
    height: 100%;
    border-radius: 5rem 0 0 0;
  }
  .header__cover {
    grid-template-columns: 180px 2fr minmax(120px, 0.5fr);
  }
  .footer__menu{
    display: none;
   }
   .contacts{
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .rights{
    width: 100%;
    height: 100%;
    grid-column: 1/3;
    grid-row: 2/3;
  }
  .footer__cover {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    padding: 0 1rem;
  }
  .sub{
    font-size: 1.2rem;
  }
  .contacts a{
    font-size: 1.2rem;
  }
}

  @media (max-width: 768px) {

.dedscr{
  font-family: Montserrat, sans-serif, Comic Sans MS;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: justify;
  width: 100%;
  margin: 1rem 0 0 0;
}

.img_ded-left {
  min-width: 100%;
  height: auto;
  padding: 0;
}
 h1{
  font-size: 2rem;
}
.dedscr > p{
  margin-top: 1rem;
}
.img_ded-right {
  min-width: 100%;
  height: auto;
  padding: 0;
}

}

@media (max-width: 565px) {

.dot_block{
  flex-direction: column;
}
.video_utub{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 56.5vw;
  padding: 0rem;
}
.video_utub>iframe{
  border-radius: .3rem;
  border: 2px solid rebeccapurple;
}
}