html {
   font-family:
      "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;

   background-color: #2c3942;
   overflow-x: hidden;
}

/*#region Scrow bar */
::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
   background-color: #1b2831;
}

::-webkit-scrollbar-thumb {
   background: #96081d;
}

::-webkit-scrollbar-thumb:hover {
   background: #820719;
}
/*#endregion Scrow bar */

/*#region Loader */
.Loader {
   display: flex;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: #2c3942;
   justify-content: center;
   align-items: center;
   overflow: hidden;

   z-index: 99;
}

.Loader img {
   position: absolute;
   width: 100%;
   bottom: 0;
   mix-blend-mode: darken;
   opacity: 0.3;
   overflow: hidden;
}

.Loader.hidden {
   animation: fadeOutt 1s;
   animation-fill-mode: forwards;
   overflow-y: visible;
}

@keyframes fadeOutt {
   100% {
      opacity: 0;
      visibility: hidden;
   }
}

.obj {
   width: 15px;
   height: 0px;
   background: #820719;
   border-radius: 10px;
   margin: 0 3px;

   animation: Loader 0.8s infinite;
}

.obj:nth-child(2) {
   animation-delay: 0.1s;
}
.obj:nth-child(3) {
   animation-delay: 0.2s;
}
.obj:nth-child(4) {
   animation-delay: 0.3s;
}
.obj:nth-child(5) {
   animation-delay: 0.4s;
}
.obj:nth-child(6) {
   animation-delay: 0.5s;
}
.obj:nth-child(7) {
   animation-delay: 0.6s;
}
.obj:nth-child(8) {
   animation-delay: 0.7s;
}

@keyframes Loader {
   0% {
      height: 0;
      background: #b60a23;
   }

   50% {
      height: 80px;
   }

   100% {
      height: 0;
      background: #820719;
   }
}
/*#endregion Loader */

/*#region Top bar */
.topBar {
   position: absolute;
   width: 100%;
   height: 100px;
   background-color: transparent;

   z-index: 20;

   animation: dropDown 0.5s ease-out forwards 0.7s;
   transform: translateY(-50px);
   opacity: 0;
}

.topBar a {
   position: relative;
   top: auto;
   bottom: -30;
   left: 30px;
   font-size: 30px;
   font-weight: bold;
   text-decoration: none;
   color: #2c3942;
   padding: 12px 20px;

   animation: fadeIn 0.3s ease-out forwards 0.75s;
   opacity: 0;
}

.topBar a::before {
   content: "";
   position: absolute;
   width: 90%;
   height: 2px;
   bottom: -5px;
   left: 5%;
   background-color: #2c3942;
   visibility: hidden;
   transform: scaleX(0);

   transition: ease 0.3s;
}

.topBar a.Logo img {
   width: 200px;
}

.topBar a.Active {
   color: #b60a23;
}

.topBar a:hover {
   color: #b60a23;
}

.topBar a:hover::before {
   visibility: visible;
   transform: scaleX(1);
}

.topBar a.Logo:hover::before,
.topBar a.threeLineButton:hover::before {
   transform: scaleX(0);
}

.topBar a.Logo img:hover {
   width: 220px;
}

.topBar a.threeLineButton {
   display: none;
   float: right;
   position: absolute;
   width: 70px;
   height: 35px;
   top: auto;
   bottom: 5;
   left: auto;
   right: 25;
   background-color: transparent;
   padding: 0px;
}

.topBar a.threeLineButton div {
   position: absolute;
   width: 100%;
   height: 4px;
   background-color: #d8d8d8;
}

.topBar a.threeLineButton div:nth-child(1) {
   float: left;
   width: 60%;
   top: 0;
   left: 0;
}

.topBar a.threeLineButton div:nth-child(2) {
   width: 100%;
   top: calc(50% - 2px);
}

.topBar a.threeLineButton div:nth-child(3) {
   float: right;
   width: 60%;
   bottom: 0;
   right: 0;
}

.topBar a.threeLineButton:hover div {
   background-color: #b3b1b1;
   width: 100%;
}
/*#endregion Top bar */

/*#region Side bar */
.sideBar {
   float: left;
   position: fixed;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   background-color: #2c3942;
   transform: translateX(100%);

   z-index: 90;
}

.sideBar a.closeButton {
   float: right;
   position: absolute;
   width: 60px;
   height: 60px;
   top: 48;
   left: auto;
   right: 27;
}

.sideBar a.closeButton div {
   position: absolute;
   width: 100%;
   height: 4px;
   top: calc(50% - 2px);
   left: 0;
   background-color: #b60a23;
}

.sideBar a.closeButton div:nth-child(1) {
   transform: rotate(45deg);
}

.sideBar a.closeButton div:nth-child(2) {
   transform: rotate(-45deg);
}

.sideBar a.closeButton:hover {
   width: 65px;
   height: 65px;
}

.sideBar a.closeButton:hover div {
   background-color: #96081d;
}

.sideBar div.menuButton {
   position: absolute;
   width: calc(100% - 120px);
   height: 50px;
   top: 150;
   left: 60;
   background-color: transparent;
}

.sideBar div.menuButton.P {
   top: 210;
}

.sideBar div.menuButton.No {
   top: 270;
}

.sideBar div.menuButton.K {
   top: 330;
}

.sideBar div.menuButton div {
   position: absolute;
   width: 0px;
   height: 4px;
   top: calc(50% - 2px);
   left: 0;
   background-color: #d8d8d8;
}

.sideBar div.menuButton p {
   position: absolute;
   top: calc(50% - 17px);
   left: 0;
   font-size: 30px;
   font-weight: normal;
   color: #d8d8d8;
}

.sideBar div.menuButton:hover div {
   width: 80px;
}

.sideBar div.menuButton:hover p {
   left: 100;
}

.sideBar div.menuButton.Active div {
   width: 80px;
   background-color: #b60a23;
}

.sideBar div.menuButton.Active p {
   left: 100;
}

.sideBar div.menuButton.Active:hover div {
   width: 90px;
   background-color: #96081d;
}

.sideBar div.menuButton.Active:hover p {
   left: 110;
}
/*#endregion Side bar */

/*#region Main things */
.mainTitle {
   position: absolute;
   top: 200px;
   left: 120px;
   font-size: 60px;
   font-weight: 900;
   text-align: left;
   color: #2c3942;

   animation: dropDown 0.5s ease-out forwards 0.9s;
   transform: translateY(-50px);
   opacity: 0;
}

.mainTitle slimText {
   font-weight: normal;
   font-size: 55px;
}

.redLine {
   position: absolute;
   width: 200px;
   height: 7.5px;
   top: 430;
   left: 120;
   background-color: #b60a23;
   border-radius: 999px;

   animation: redLineAnimation 0.8s ease-out forwards 1s;
   opacity: 0;
}

.sideImage {
   float: right;
   position: absolute;
   top: 230;
   right: 600;

   z-index: 1;

   animation: dropDown 0.5s ease-out forwards 1.1s;
   transform: translateY(-50px);
   opacity: 0;
}

.sideImage img {
   position: absolute;
   width: 300px;
   top: 0;
   left: 0;

   z-index: 1;
}

.sideImage .Shadow {
   position: absolute;
   width: 500px;
   height: 160px;
   top: 310;
   left: -120;
   background: radial-gradient(50% 50% at 50% 50%, #0000005b 30%, #00000000 100%);

   z-index: 0;
}

.firstButton {
   position: absolute;
   top: 600;
   left: 120;
   font-size: 30px;
   font-weight: 500;
   text-decoration: none;
   color: #d8d8d8;
   background-color: #b60a23;
   padding: 12px 80px;

   box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.3);

   animation: dropDown 0.5s ease-out forwards 1.2s;
   transform: translateY(-50px);
   opacity: 0;
}

.firstButton:hover {
   background-color: #96081d;
}

.secondButton {
   position: absolute;
   top: 600;
   left: 500;
   font-size: 30px;
   font-weight: 500;
   text-decoration: none;
   color: #d8d8d8;
   background-color: transparent;
   border: solid 3px #d8d8d8;
   padding: 12px 50px;

   box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.3);

   animation: dropDown 0.5s ease-out forwards 1.3s;
   transform: translateY(-50px);
   opacity: 0;
}

.secondButton:hover {
   background-color: #d8d8d82d;
}
/*#endregion Main things */

/*#region Commpany summery */
.commpanySummeryTitle {
   position: absolute;
   top: 870;
   left: 120;
   font-size: 70px;
   font-weight: bolder;
   color: #b60a23;

   animation: dropDown 0.5s ease-out forwards 1.35s;
   transform: translateY(-50px);
   opacity: 0;
}

.commpanySummeryText {
   position: absolute;
   top: 990;
   left: 120;
   font-size: 24px;
   font-weight: normal;
   color: #d8d8d8;
   padding-right: 120px;

   transition: ease 0.3s;
   animation: dropDown 0.7s ease-out forwards 1.4s;
   opacity: 0;
}

.commpanySummeryText ins {
   font-weight: bold;
   text-decoration: none;
}
/*#endregion Commpany summery */

/*#region Products */
.productsList {
   position: absolute;
   width: calc(100% - 240px);
   height: 380px;
   top: 990;
   left: 120;
   background-color: transparent;
   overflow: auto;
   overflow-y: hidden;
   white-space: nowrap;

   transition: ease 0.3s;
   animation: dropDown 0.7s ease-out forwards 1.4s;
   opacity: 0;
}

.productsList::-webkit-scrollbar {
   height: 5px;
}

.productsList a {
   display: inline-block;
   position: relative;
   top: 0;
   padding-right: 320px;
}

.productsList a.Active p {
   color: #b60a23;
}

.productsList a div {
   position: absolute;
   width: 300px;
   height: 300px;
   top: 0;
   left: 0;
   background-color: #d8d8d8;
   border-radius: 40px;
   overflow: hidden;
}

.productsList .images01,
.productsList .images02,
.productsList .images03 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;

   border-radius: 40px;
}

.productsList a p {
   position: absolute;
   width: 300px;
   height: 50px;
   top: 300;
   left: 0;
   font-size: 24px;
   font-weight: normal;
   text-align: center;
   line-height: 50px;
   color: #d8d8d8;
}

.productsHolder {
   position: absolute;
   width: 100%;
   height: auto;
   top: 1450;
   left: 0;
   background-color: transparent;

   transition: ease 0.3s;
   animation: dropDown 0.7s ease-out forwards 1.45s;
   opacity: 0;
}

.productsHolder.а1 {
   display: unset;
}

.productsHolder.а2 {
   display: none;
}

.productsHolder .Product {
   position: relative;
   width: calc(100% - 240px);
   min-height: 400px;
   top: 0;
   left: 120;
   background-color: #d8d8d811;
   border-radius: 30px;
   margin-bottom: 30px;
   padding-bottom: 20px;
}

.productsHolder .Product .productImageHolder img {
   position: absolute;
   width: 250px;
   height: 250px;
   top: calc(50% - 125px);
   left: 20px;
   border-radius: 30px;
}

.productsHolder .Product .ProductTitle {
   position: relative;
   width: calc(100% - 290px - 30px);
   height: auto;
   top: 20;
   left: 290;
   margin-bottom: 20px;
}

.productsHolder .Product .ProductTitle .Line {
   position: absolute;
   width: 7px;
   height: 100%;
   top: 0;
   left: 0;
   background-color: #b60a23;
   border-radius: 999px;
}

.productsHolder .Product .ProductTitle .productName {
   position: relative;
   width: calc(100% - 20px);
   top: 0;
   left: 20;
   font-size: 34px;
   font-weight: bold;
   color: #d8d8d8;
   padding-top: 20px;
}

.productsHolder .Product .ProductTitle .productCategory {
   position: relative;
   width: calc(100% - 20px);
   top: 0;
   left: 20;
   font-size: 24px;
   font-weight: normal;
   color: #b3b1b1;
   padding-bottom: 20px;
}

.productsHolder .Product .sectionName {
   position: relative;
   width: calc(100% - 290px - 20px);
   top: 20;
   left: 290;
   font-size: 26px;
   font-weight: normal;
   color: #d8d8d8;
   margin-bottom: 10px;
}

.productsHolder .Product .sectionText {
   position: relative;
   width: calc(100% - 310px - 20px);
   top: 20;
   left: 310;
   font-size: 24px;
   font-weight: normal;
   color: #b3b1b1;
   margin-bottom: 20px;
}
/*#endregion Products */

/*#region Contacts */
.Map {
   position: absolute;
   width: calc(100% - 240px);
   height: 350px;
   top: 990;
   left: 120;

   transition: ease 0.3s;
   animation: dropDown 0.7s ease-out forwards 1.45s;
   opacity: 0;
}

.contactHolder {
   position: absolute;
   width: 100%;
   height: auto;
   top: 1400;
   left: 0;
   background-color: transparent;

   transition: ease 0.3s;
   animation: dropDown 0.7s ease-out forwards 1.5s;
   opacity: 0;
}

.contactHolder a {
   display: block;
   position: relative;
   width: calc(100% - 120px - 30px);
   top: 0;
   left: 120;
   font-size: 24px;
   font-weight: normal;
   line-height: 28px;
   color: #d8d8d8;
   margin-bottom: 20px;
}

.contactHolder a i {
   margin-right: 20px;
}

.contactHolder a:nth-child(1) i {
   margin-left: 4px;
   margin-right: 21px;
}

.contactHolder a:hover i {
   color: #b60a23;
   margin-right: 30px;
}
/*#endregion Contacts */

/*#region Bottom bar */
.bottomBar {
   position: absolute;
   width: 100%;
   height: 250px;
   top: 1300;
   left: 0;
   background-color: #182229;

   clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
   -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);

   animation: bottomBarAnimation 0.5s ease-out forwards 1.45s;
   clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   opacity: 0;
}

.bottomBar.Products,
.bottomBar.Contacts {
   position: relative;
   top: 0;
   margin-top: 80px;
}

.bottomBar .directionButton {
   position: absolute;
   width: 32%;
   height: 50px;
   top: 80;
   background-color: transparent;

   animation: dropDown 0.5s ease-out forwards 1.5s;
   transform: translateY(-50px);
   opacity: 0;
}

.bottomBar .directionButton.P {
   left: 0;
}

.bottomBar .directionButton.No {
   left: 32%;
}

.bottomBar .directionButton.K {
   left: 64%;
}

.bottomBar a {
   position: absolute;
   width: 100%;
   top: calc(50% - 18px);
   left: 0;
   font-size: 30px;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   color: #969696;
}

.bottomBar a:hover {
   color: #b60a23;
}

.bottomBar a.Active {
   color: #b60a23;
}

.bottomBar a.Active:hover {
   color: #96081d;
}

.bottomBar .Credits {
   position: absolute;
   width: 100%;
   top: auto;
   left: 0;
   bottom: 10;
   font-size: 14px;
   text-align: center;
   color: #6e6e6e;

   animation: fadeIn 0.5s ease-out forwards 1.55s;
   opacity: 0;
}
/*#endregion Bottom bar */

/*#region Boxes */
.grayBox {
   position: absolute;
   width: 100%;
   height: 800px;
   left: 0;
   background-image: linear-gradient(#4c555f, #2c3942);

   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);

   z-index: -1;

   animation: grayBoxAnimation 0.5s ease-out forwards 0.1s;
   clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   opacity: 0;
}

.whiteBox {
   position: absolute;
   width: 100%;
   height: 600px;
   left: 0;
   background-color: #d8d8d8;
   overflow: hidden;

   clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

   z-index: -1;

   animation: whiteBoxAnimation 0.5s ease-out forwards 0.3s;
   clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   opacity: 0;
}

.whiteBox img {
   position: absolute;
   width: 90%;
   bottom: 0;
   mix-blend-mode: darken;
   opacity: 0.06;
   overflow: hidden;
}

.darkGrayBox {
   float: right;
   position: absolute;
   width: 800px;
   height: 560px;
   right: 0;
   background-color: #6e6e6e;
   overflow: hidden;

   clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
   -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);

   z-index: -1;

   animation: darkGrayBoxAnimation 0.5s ease-out forwards 0.5s;
   clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
   opacity: 0;
}

.darkGrayBox img {
   position: absolute;
   width: 100%;
   bottom: 0;
   mix-blend-mode: darken;
   filter: grayscale(1);
   opacity: 0.15;
   overflow: hidden;
}

.redBox {
   float: right;
   position: absolute;
   width: 300px;
   height: calc(100% + 400px);
   right: 0;
   background-image: linear-gradient(#b60a23, #820719);
   overflow: hidden;

   clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);

   z-index: 2;

   animation: redBoxAnimation 0.5s ease-out forwards 0.7s;
   clip-path: polygon(0 0, 0 0, 0 0, 0 0);
   -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
   opacity: 0;
}

.redBox img {
   display: none;
   position: absolute;
   width: 400%;
   top: 0;
   mix-blend-mode: darken;
   transform: rotate(180deg);
   opacity: 0.15;
   overflow: hidden;
}
/*#endregion Boxes */

.textHolder {
   position: absolute;
   width: 100%;
   height: auto;
   top: 980;
   left: 0;
}

.textHolder p {
   position: relative;
   width: calc(100% - 240px);
   height: auto;
   top: 0;
   left: 120;
   font-size: 20px;
   color: #d8d8d8;
}

.twoImageBox {
   display: grid;
   position: relative;
   width: calc(100% - 240px);
   height: auto;
   top: 0;
   left: 120;
   margin-bottom: 30px;

   grid-template-columns: 1fr 1fr;
   gap: 30px;
}

.twoImageBox img {
   width: 100%;
   height: 200px;
   object-fit: contain;
}

img {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-user-drag: none;
   -webkit-touch-callout: none;
}

a {
   padding: 0;
   margin: 0;
   text-decoration: none;
   transition: ease 0.3s;
}

p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
i,
img {
   padding: 0;
   margin: 0;
   transition: ease 0.3s;
}

endent {
   display: inline-block;
   position: relative;
   width: 30px;
   height: 1px;
}

/*#region Animations */
@keyframes grayBoxAnimation {
   0% {
      clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      opacity: 0;
   }

   100% {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
      opacity: 1;
   }
}

@keyframes whiteBoxAnimation {
   0% {
      clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      opacity: 0;
   }

   100% {
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      opacity: 1;
   }
}

@keyframes darkGrayBoxAnimation {
   0% {
      clip-path: polygon(10% 0, 0% 0, 0% 0%, 0 0%);
      -webkit-clip-path: polygon(10% 0, 0% 0, 0% 0%, 0 0%);
      opacity: 0;
   }

   100% {
      clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
      -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
      opacity: 1;
   }
}

@keyframes redBoxAnimation {
   0% {
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      opacity: 0;
   }

   100% {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
      opacity: 1;
   }
}

@keyframes bottomBarAnimation {
   0% {
      clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      -webkit-clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%);
      opacity: 0;
   }

   100% {
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
      -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
      opacity: 1;
   }
}

@keyframes redLineAnimation {
   0% {
      width: 0px;
      opacity: 0;
   }

   100% {
      white: 200px;
      opacity: 1;
   }
}

@keyframes dropDown {
   0% {
      transform: translateY(-50px);
      opacity: 0;
   }

   100% {
      transform: translateY(0px);
      opacity: 1;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@keyframes fadeOut {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

@keyframes defaultAnimation {
   0% {
   }

   100% {
   }
}
/*#endregion Animations */

/*#region Media 1300-1000 */
@media screen and (max-width: 1300px) {
   .darkGrayBox {
      width: 500px;
   }

   .sideImage {
      right: 400;
   }
}

@media screen and (max-width: 1200px) {
   .whiteBox img {
      width: 130%;
   }

   .darkGrayBox,
   .sideImage {
      display: none;
   }

   .redBox img {
      display: inline;
   }

   .redBox {
      z-index: -1;
   }
}

@media screen and (max-width: 1100px) {
}

@media screen and (max-width: 1000px) {
   .Loader img {
      width: 1500px;
   }
}
/*#endregion Media 1300-1000 */

/*#region Media 900-800 */
@media screen and (max-width: 900px) {
}

@media screen and (max-width: 800px) {
   .whiteBox img {
      width: 170%;
      left: -200;
   }

   .grayBox {
      height: 700px;
   }

   .redBox {
      width: 250px;
      height: calc(100% + 50px);
   }

   .secondButton,
   .topBar a {
      display: none;
   }

   .topBar a.Logo,
   .topBar a.threeLineButton {
      display: unset;
   }

   .mainTitle,
   .redLine,
   .firstButton {
      left: 60;
   }

   .mainTitle {
      font-size: 45px;
   }

   .mainTitle slimText {
      font-size: 40px;
   }

   .redLine {
      top: 380;
   }

   .firstButton {
      top: 450;
      font-size: 24px;
      padding: 12px 40px;
   }

   .commpanySummeryTitle {
      top: 720;
      left: 60;
      font-size: 50px;
   }

   .commpanySummeryText {
      top: 810;
      left: 60;
      font-size: 18px;
      padding-right: 60px;
   }

   .Map {
      width: calc(100% - 120px);
      top: 810;
      left: 60;
   }

   .contactHolder {
      top: 1220px;
   }

   .contactHolder a {
      width: calc(100% - 60px - 30px);
      left: 60;
   }

   .productsList {
      width: calc(100% - 120px);
      height: 180px;
      top: 810;
      left: 60;
   }

   .productsList a {
      padding-right: 140px;
   }

   .productsList a div {
      width: 120px;
      height: 120px;
      border-radius: 20px;
   }

   .productsList a p {
      width: 120px;
      height: 20px;
      top: 130;
      font-size: 16px;
      line-height: 20px;
   }

   .productsList a:hover p {
      font-size: 17px;
   }

   .productsHolder {
      top: 1020;
   }

   .productsHolder .Product {
      width: calc(100% - 60px);
      left: 30;
   }

   .productsHolder .Product .productImageHolder {
      position: relative;
      width: 100%;
      height: 240px;
      top: 20;
      left: 0;
      margin-bottom: 20px;
   }

   .productsHolder .Product .productImageHolder img {
      position: absolute;
      width: 240px;
      height: 240px;
      top: 0;
      left: calc(50% - 120px);
   }

   .productsHolder .Product .ProductTitle {
      width: calc(100% - 40px);
      top: 20;
      left: 20;
   }

   .productsHolder .Product .ProductTitle .productName {
      font-size: 26px;
   }

   .productsHolder .Product .ProductTitle .productCategory {
      font-size: 18px;
   }

   .productsHolder .Product .sectionName {
      width: calc(100% - 40px);
      left: 20;
      font-size: 18px;
   }

   .productsHolder .Product .sectionText {
      width: calc(100% - 50px);
      left: 30;
      font-size: 16px;
   }

   .bottomBar {
      height: 200px;
      top: 1100;
   }

   .bottomBar a {
      font-size: 24px;
   }

   .textHolder {
      top: 800;
   }

   .textHolder p {
      width: calc(100% - 120px);
      left: 60;
   }

   .twoImageBox {
      width: calc(100% - 120px);
      left: 60;
   }

   .twoImageBox img {
      height: 100px;
   }
}
/*#endregion Media 900-800 */

/*#region Media 700-600 */
@media screen and (max-width: 700px) {
}

@media screen and (max-width: 600px) {
   .Map {
      width: calc(100% - 60px);
      height: 300px;
      left: 30;
   }

   .contactHolder {
      top: 1150px;
   }

   .contactHolder a {
      width: calc(100% - 30px - 15px);
      left: 30;
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 15px;
   }
}
/*#endregion Media 700-600 */

/*#region Media 500-400 */
@media screen and (max-width: 500px) {
   .whiteBox img {
      width: 240%;
      left: -250;
   }

   .redBox {
      width: 150px;
   }

   .topBar {
      height: 90px;
   }

   .topBar a {
      top: 30;
      bottom: auto;
      left: 15px;
   }

   .topBar a.Logo img {
      width: 170px;
   }

   .topBar a.Logo img:hover {
      width: 190px;
   }

   .sideBar div.menuButton {
      width: calc(100% - 60px);
      left: 30;
   }

   .sideBar a.closeButton {
      top: 40;
   }

   .mainTitle,
   .redLine,
   .firstButton {
      left: 30;
   }

   .mainTitle {
      font-size: 34px;
   }

   .mainTitle slimText {
      font-size: 30px;
   }

   .redLine {
      top: 340;
   }

   .firstButton {
      top: 410;
   }

   .commpanySummeryTitle {
      top: 650;
      left: 30;
      font-size: 34px;
   }

   .commpanySummeryText {
      top: 710;
      left: 30;
      font-size: 16px;
      padding-right: 30px;
   }

   .Map {
      top: 710;
   }

   .contactHolder {
      top: 1050px;
   }

   .productsList {
      width: calc(100% - 30px);
      top: 710;
      left: 15;
   }

   .productsList a p {
      font-size: 14px;
   }

   .productsList a:hover p {
      font-size: 15px;
   }

   .productsHolder {
      top: 920;
   }

   .productsHolder .Product {
      width: calc(100% - 30px);
      left: 15;
   }

   .productsHolder .Product .productImageHolder {
      height: 200px;
   }

   .productsHolder .Product .productImageHolder img {
      width: 200px;
      height: 200px;
      left: calc(50% - 100px);
   }

   .productsHolder .Product .ProductTitle .productName {
      font-size: 22px;
   }

   .productsHolder .Product .ProductTitle .productCategory {
      font-size: 16px;
   }

   .bottomBar {
      height: 230px;
      top: 950;
   }

   .bottomBar .directionButton {
      position: absolute;
      width: 100%;
      height: 50px;
      top: 60;
      left: 0;
   }

   .bottomBar .directionButton.P,
   .bottomBar .directionButton.No,
   .bottomBar .directionButton.K {
      left: 0;
   }

   .bottomBar .directionButton.No {
      top: 100;
   }

   .bottomBar .directionButton.K {
      top: 140;
   }

   .bottomBar a {
      font-size: 18px;
   }

   .textHolder {
      top: 700;
   }

   .textHolder p {
      width: calc(100% - 60px);
      left: 30;
      font-size: 16px;
   }

   .twoImageBox {
      width: calc(100% - 60px);
      left: 30;

      grid-template-columns: 1fr;
   }

   .twoImageBox img {
      height: 100px;
   }
}

@media screen and (max-width: 400px) {
   .topBar {
      height: 80px;
   }

   .topBar a {
      top: 30;
   }

   .topBar a.Logo img {
      width: 140px;
   }

   .topBar a.Logo img:hover {
      width: 150px;
   }

   .sideBar a.closeButton {
      top: 30;
   }

   .bottomBar .Credits {
      width: calc(100% - 30px);
      bottom: 10;
      left: 15;
      font-size: 12px;
   }
}
/*#endregion Media 500-400 */

/*#region Media 350 */
@media screen and (max-width: 350px) {
   .topBar {
      height: 70px;
   }

   .topBar a {
      top: 20;
      left: 7;
   }

   .topBar a.Logo img {
      width: 140px;
   }

   .topBar a.Logo img:hover {
      width: 150px;
   }

   .mainTitle,
   .redLine,
   .firstButton {
      left: 15;
   }

   .mainTitle {
      font-size: 28px;
   }

   .mainTitle slimText {
      font-size: 24px;
   }

   .redLine {
      top: 310;
   }

   .firstButton {
      top: 400;
      font-size: 20px;
      padding: 8px 30px;
   }

   .bottomBar {
      top: 1000px;
   }
}
/*#endregion Media 350 */

@media screen and (min-height: 1000px) {
   .redBox {
      height: 100%;
   }
}