html {
  font-family: Montserrat, sans-serif;
  color: #1b1d1f;
  box-sizing: border-box;
  
}


html, body {
  margin: 0;
  padding: 0;
 width:100%;
 box-sizing: border-box;

}


body {

  display:grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 100%;

}

/* header */
.header {

  grid-row: 1/span 1;
  grid-column: 1/2;
  box-sizing: border-box;
  background: linear-gradient(90deg,#FCFEFE,#A5DEFF);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;

}

/* Контейнер з зображенням бандерогуся */
.div_img_banderogus {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
  box-sizing:border-box;
  display : grid;
}

/* Зображення Бандерогусака */

.imglogo {
  
  justify-self: center;
  grid-row: 1/2; 
  grid-column: 1/2;

}

/* SIDEBAR */
.sidebar
{

  padding: 32px 0px 56px 92px;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: #1b1d1f;

}

/* Logo BanderoGus*/
.logo {
   
  margin-bottom:124px;

}

/* Content Sidebar */

#content {

  box-sizing: border-box;
  border-radius: 40px;
  width : 576px;
  background-color: #fff;
  height: 476px;
  padding:60px;

}

.first_title {

  margin-bottom: 60px;

}

/* H1 header Бандерогусь */
.header_BunderoGus {

  font-size: 64px;
  line-height: 112%;
  margin-bottom :24px;
}

/* Головний контент хедера */
.main_content_header {

  font-weight: 400;
  margin-bottom: 32px;

}

/* StartGus */
.go-to-form-btn, .launchbtn {

  background-color : #FF6B0A;
  border-radius :8px;
  padding :12px 24px;
  height : 48px;
  width : 172px;
  border : 0;
  color: #fff;
  font-weight:400;
  font-size: 16px;
  font-family: Montserrat;
  line-height: 150%;

}

/* MainContent, контейнер main, головна інформація про БендероГусака */
.MainContent {

  padding:67px 95px 67px;
 
  height:auto;
  /*max-height: auto;*/
  width:inherit;
  grid-column : 1/2;
  grid-row :2/3;
  display :flex;
  flex-direction: column;
  align-items :center;
  box-sizing: border-box;
  justify-self: center;
  align-self: center;

}

#trezub {

  margin:0 0 48px 0;

}

.InterestFactsHeader {

  font-weight: 600;
  font-size: 48px;
  line-height: 150%;
  margin:0 0 24px 0;
  padding:0;

}

/* InterstFacts */
#InterstFacts {

  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  margin-bottom: 32px;

}



section.ThreeInterstingFacts {

  display : grid;
  grid-template-columns : repeat(auto-fit,minmax(280px,1fr));
  column-gap:24px;
  max-height:auto;
  width: 100%;
  max-width: 1170px;
  box-sizing: border-box;
  margin: 0 auto;

}
@media (max-width:768px) {
  .MainContent {

    padding-left:0;
    padding-right:0;
    display:flex;
    flex-direction: column;
    align-items: center;
  }

  .ThreeInterstingFacts {

    grid-template-columns: minmax(280px, 1fr);
    grid-template-rows: repeate(3, 1fr);
    max-width:480px;
  

  }

}
@media (max-width:480px) {
  .MainContent {

    padding-left:0;
    padding-right:0;
    display:flex;
    flex-direction: column;
    align-items: center;

  }

  .ThreeInterstingFacts {

    grid-template-columns: minmax(280px, 1fr);
    grid-template-rows: repeate(3, 1fr);
    max-width:480px;

  }

}
/* Головний контент про бандерогусаків */

#nav, #ThermalImager, #wings {

  width : 374px;
  height: 502px;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
 justify-self:self-start;

}

/* nav - Навігація бандерогусака */
#nav {

  grid-column : 1/2;
  grid-row : 1/2;

}

/* ThermalImager, тепловізор гусака */
#ThermalImager {

  grid-column : 2/3;
  grid-row : 1/2;

}

@media (max-width:768px) {

  #ThermalImager {

    grid-row:2/span 1;
    grid-column: 1/2;

  }
  #nav, #ThermalImager, #wings {
    width:100%;
  }
}

@media (max-width:480px) {

  #ThermalImager {

    grid-row:2/span 1;
    grid-column: 1/2;

  }
  
}

/* wings, Крила гусака */
#wings {

  grid-column : 3/4;
  grid-row : 1/2;

}

@media (max-width:768px) {

  #wings {

    grid-row:3/span 1;
    grid-column: 1/2;

  }
}

@media (max-width:480px) {

#wings {

  grid-row:3/span 1;
  grid-column: 1/2;
}

}
.ImgNav,.ImgThermalImager, img.ImgWings {

  width:480px;
  /*max-width:374px;*/
  height: auto;
  
}


/* Заголовки для артикулів з ID WingsH3Header, NavH3Header, ThermalImagerH3header */

#WingsH3Header, #NavH3Header, #ThermalImagerH3header {

  padding:0;
  margin:8px 0 24px 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  text-align: center;
 
}

/* Текст артикулів бандерогусаків*/
section .ArticulContent{

  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;

}

/* Підвал сторінки*/

footer {

  margin:0;
  background: linear-gradient(to right, #FCFEFE, #A5DEFF);
  width : 100%;
  height:auto;
  display : grid;
  grid-template-rows: 1fr;
  grid-template-columns : minmax(200px,1fr);
  box-sizing: border-box;

}

/*  Секція для форми даної сторінки */
.ExtSectionForForm {

  border-radius : 40px;
  background-color :#fff;
  grid-row : 1/2;
  grid-column : 1/2;
  justify-self :center; /* Вирівнюємо дану секцію уздовж головної лінії даної її ділянки */ 
  align-self : center; /* Вирівнюємо дану секцію уздовж додаткової лінії даної її ділянки */
  width : 570px;
  height : 564px;
  display : grid;
  grid-template-columns : auto;
  grid-template-rows : auto

}

/* Внутрішній контейнер для форми */
div#IntSectionForForm {

  grid-row : 1/2;
  grid-column : 1/2;
  justify-self: center;
  align-self : center;
  width : auto;
  height : auto;
  display: flex;
  align-items: center;
  flex-direction :column;
}

/*--Значок трезуба--*/

img#ImgTrezub {

  width :30px;
  height: 52px;
  margin-bottom: 32px;

}

/*Заголовок для форми користувача*/
h4.H4HeaderForForm {

  padding :0 0 12px 0;
  margin:0;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  text-align: center;

}

#PidpysForBanderoGus {

  padding: 0 0 2px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;

}
form#form {

  width : 450px;
  height : 304px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

 .SectionForUserInput {
  
  margin-bottom:48px;
  display :grid;
  width:inherit;
  height: 208px;
  grid-template-rows :repeat(2,1fr);
  grid-template-columns : 1fr;
  row-gap :24px;

}

/* Клас для міток полів */

.LabelText {
  display :block;
  font-weight: 400;
  width :46px;
  height:24px;
  font-size: 16px;
  line-height: 150%;

}

/* клас для полів ввідення */
input.TypeText {

 border-radius: 8px;
 width: 450px;
 height: 60px; 
 border : 1px solid #005bbb;

}

/* Контейнери для введення */
#UserName {

 grid-row :1/2;
 grid-column : 1/2

}

#UserEmail {

  grid-row :2/3;
  grid-column : 1/2
}

#UserName, #UserEmail {

display:flex;
flex-direction: column;
align-items: flex-start;

}

#animGoos {

  width : 100%;
  position : fixed;
  top : 0;
  left : 0;
  bottom: 0;
  margin-bottom : auto;
  margin-top : auto;
  z-index : 2;
  pointer-events: none;

}

@media (max-width:768px) {

  section.ThreeInterstingFacts {

    display: grid;
    grid-template-columns:1fr;
    grid-template-rows: repeat(3, 1fr);
    max-width:768px;
    place-items: center;
   
    align-items:center

  }
  #InterstFacts {
    width:100vw;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-size: 10px;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

  }

  .InterestFactsHeader {
    font-size: 32px;
    text-align: center;
  }

   .header {

      grid-template-columns: 100%;
      grid-template-rows :auto auto;
      text-align: center;
      background-size: cover;
      width:100%;
      box-sizing:border-box;
      align-self: center;
   
    }

.sidebar { 
  
  padding:24px; 
  font-size: 14px;
  text-align: center;
  align-self: center;
  justify-items: center;

   }
  .logo {

    margin-bottom: 48px

  }

.imglogo {

  width:100%;
  height: 100%;

}

}

@media (max-width:480px) {

  .go-to-form-btn, .launchbtn {
    width: 100%;
    max-width: 280px;
    font-size: 10px;
    margin: 0 auto;
  }

  #content {
    width: 100%;
    padding: 32px;
  }
  
  .ExtSectionForForm {
    width: 100%;
    padding: 24px;
    height: auto;
  }

 input.TypeText, form#form {

  width:100%;

 }

.SectionForUserInput {
  
  row-gap:16px

  }

.main_content_header {
  width:inherit;
  text-align: center;
  font-size: 10px

  }

 .header_BunderoGus {
    padding:0;
   font-size: 20px;
   text-align: center

}

.div_img_banderogus {

grid-row:2/span 1;
grid-column:1/2;

}

}


*::before,*,*::after {
  box-sizing:inherit
}

@media (max-width:480px) {

#InterstFacts {
        width:100vw;
        font-size: 10px;
        line-height: 150%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        letter-spacing: 0;
    }

 .ImgNav,.ImgThermalImager, img.ImgWings {

  width:100vw;
  height: 374px; 

   }
}