@import url(./reset.css);
@import url(./media.css);
@import url(./animate.css);
/* @import url(./animate.min.css); */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap");

/* .ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
} */

@font-face {
  font-family: "Demos";
  font-style: normal;
  font-weight: 400;
  src: local("Demos"), url(../fnt/Demos.woff2) format("woff2"), url(../fnt/Demos.woff) format("woff");
}

:root {
  --bg_color: #02a4fd;
  --bg_lightcolor: #29abe2;
  --bg_darkcolor: #0071bc;
  --text_color: white;
  --col_orange: #f58220;
  --col_green: #008586;
  --col-gray: #a7a9ac;
  --col-light_blue: #3faccd;

  /* --animate-duration: 800ms;
  --animate-delay: 0.9s; */
}
html,
body {
  height: 100%;
}
body {
  font-family: Ubuntu, "Arial", "Helvetica", sans-serif;
  line-height: 1.5;
}

main {
  max-width: 1400px;
  /*max-width: 75rem;*/
  padding-inline: 1rem;
  margin-inline: auto;
  height: 100vh;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: 100px auto 1fr;
  grid-template-areas:
    "header"
    "Razdel"
    "Content";
}

.header {
  grid-area: header;
  display: grid;
  justify-content: center;
  grid-template-columns: 240px 1fr 50px;
  /* background-color: #f58220; */
  align-items: center;
}

.Razdel {
  grid-area: Razdel;
  display: grid;

  grid-gap: 10px;

  text-align: center;
}

.Razdel Li {
  display: inline-block;
  margin: 10px;

  /* list-style: none; */

  text-transform: uppercase;

  /* padding: 10px 20px; */
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: none;
  /* font-weight: normal; */
}

.Razdel a {
  /*color: #f58220;*/
  color: var(--bg_darkcolor);
  display: block;
  text-align: center;
  /* background-color: #f58220; */
  padding: 10px 20px;
}

.Razdel Li:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
/* a.icco {
  width: 100%;
} */

a.icco::before {
  /* content: url(../img/file-download-alt-white.svg); */
  content: url(../img/file-download-alt-white.svg);
  padding: 3px 9px 0px 0px;

  width: 30px;
  /* height: 10px; */
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

a.iccodark::before {
  /* content: url(../img/file-download-alt-white.svg); */
  content: url(../img/file-download-alt.svg);
  padding: 3px 9px 0px 0px;

  width: 30px;
  /* height: 10px; */
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

a.icotitl::before {
  /* content: url(../img/file-download-alt-white.svg); */
  content: url(../img/icotitle.svg);
  padding: 3px 9px 0px 0px;

  width: 30px;
  /* height: 10px; */
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.btn {
  padding: 8px 15px;
  margin: 0px 30px 10px 0px;
  background-color: var(--bg_darkcolor);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  display: inline-block;
}

a.btn:hover {
  background-color: var(--bg_lightcolor);
  color: #fff;
  /* transition: 0.3s all; */
}

a.btn {
  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}

.btnLight {
  padding: 8px 15px;
  margin: 0px 30px 10px 0px;
  /* background-color: var(--bg_darkcolor); */
  background-color: #fff;

  color: var(--bg_darkcolor);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  font-weight: bold;
  display: inline-block;
  background: rgba(255, 255, 255, 0.6);
}

a.btnLight:hover {
  /* background-color: var(--bg_darkcolor); */
  background: rgba(255, 255, 255, 0.3);
  color: var(--bg_darkcolor);
  /* color: #fff; */
  /* transition: 0.3s all; */
}

.lang li {
  display: inline-block;

  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  margin-right: 10px;
  /* width: 50px; */
  /* line-height: 30px; */
}

.lang li a {
  text-decoration: none;
  color: var(--bg_darkcolor);
  display: block;
  font-size: 10px;

  text-align: center;
  /* background-color: #f58220; */
  padding: 3px 10px;
}

.lang li a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  /* transition: 0.3s all; */
}

.lang li a.act {
  background-color: var(--bg_darkcolor);
  color: #ffffff;
  border-radius: 10px;
  cursor: default;
}

.header > a img {
  height: 50px;
  padding-left: 20px;
}

.lang {
  display: grid;
  justify-content: end;
  margin-right: 50px;
}

.burgerdiv {
  position: relative;
  display: grid;
  align-items: start;
  justify-content: center;
}

/*Менюша*/
.nav {
  height: 100vh;
  position: absolute;

  width: 350px;
  right: 0px;
  top: 0px;

  right: 0px;
  margin-top: -40px;

  background: linear-gradient(180deg, var(--bg_color) 0%, var(--bg_darkcolor) 100%);
  overflow: scroll;
  z-index: 98;
  display: none;
}

.nav img {
  height: 50px;
  margin: 120px auto 50px auto;
}

.nav ul {
  padding: 5px;
}

.logoGOmenu img {
  display: grid;
}

.RightCln {
  background-color: #a7a9ac;
  margin-top: 100px;
}

.TxtStory {
  display: grid;
  grid-template-columns: minmax(50px, 0.5fr) 1fr;
  /* grid-template-columns: 0.5fr 1fr; */
  grid-template-rows: 1fr;
  padding: 10px;
  margin-bottom: 50px;
}

.BossPic {
  position: sticky;
  top: 1rem;
  height: 60px;
  width: 100%;
  margin-bottom: 150px;

  /* width: 100%; */
}

.BossPic img {
  /* height: 100px; */
  min-width: 50%;
  /* width: 100%; */
}

.BossDescrip {
  padding: 10px;
}
.BossDescrip p {
  padding-bottom: 10px;
}

.LeftCln > h1 {
  font-family: "Demos";

  font-size: clamp(15px, 4vw, 70px);

  color: var(--col_orange);
  line-height: 0.9;
  margin: 100px 0px 50px 0px;
  min-height: 50px;
  text-shadow: 1px 1px 1px #000;
  text-transform: uppercase;
}

/*
.LeftCln h1::after {
  content: "";
  display: inline-block;
  width: 100%;
} */

.TwoCol {
  grid-area: Content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.Content > h1 {
  font-family: "Demos";

  font-size: clamp(40px, 8vw, 100px);

  color: var(--col_orange);
  line-height: 0.9;
  margin: 100px 0px 50px 0px;
  min-height: 50px;
  text-shadow: 1px 1px 1px #000;
  text-transform: uppercase;
}

.Content {
  margin: 50px 0 0 20px;
  /* height: 100px; */
  text-align: left;
  animation: bounceInLeft; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
  /* animation-delay: 1s; */
}

/*Менюша - проверка состояния*/

/* TST */
#burger:has(input:checked) .nav {
  transform: translateX(0);
  /* background-color: #f58220;*/
}

/*Working*/
input[type="checkbox"]:checked ~ .nav {
  /* transform: translateX(0);*/
  display: block;
  /*transition: 0.3s all;*/
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebarMenuInner li {
  display: block;
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  /*font-weight: bold;*/
  /* padding: 10px; */
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* padding-left: 20px; */
}

.sidebarMenuInner li:hover {
  background-color: var(--bg_color);
  /* transition: 0.3s all; */
}

.sidebarMenuInner li.active {
  background-color: var(--bg_darkcolor);

  /* transition: 0.3s all; */
}

.sidebarMenuInner li span {
  /*display: block;*/
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  /* padding-left: 0px; */
}
.sidebarMenuInner li a {
  display: block;
  color: #fff;
  text-transform: uppercase;
  /*font-weight: bold;*/
  cursor: pointer;
  text-decoration: none;
  padding: 10px;
}

/*Гамбургер Иконка*/

input[type="checkbox"] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}
.sidebarIconToggle {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  /* position: absolute;*/
  z-index: 99;
  /* height: 100%;
  width: 100%;
  top: 22px;
  right: 15px;*/
  height: 22px;
  width: 22px;
}
.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}
.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}