@font-face {
    font-family: SAIBA-45;
    src: url("fonts/SAIBA-45-Regular.woff") format("woff");
}

@font-face {
    font-family: Adventure;
    src: url("fonts/ljk_Adventure-Subtitles.woff") format("woff");
}


.body {
  margin: 0px;
  background-color: #000000;
}

.parallax {
  padding: 32px 64px 0px 64px;
  /* The image used */
  background-image: url("../png/Main.png");

  /* Full height */
  height: 100%; 


  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  padding: 0px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-end;
  align-items: stretch;
  /* The image used */
  background-image: url("../png/Contacts.png");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section {
  display: flex;
  flex-direction: column;
  background-color: #0a0a0a;
  padding: 5% 10% 5% 10%;
}

.workplace {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  margin-bottom: 32px;
}

.buttonblock {
  display: flex;
  flex-direction: row;
  column-gap: 2vh;
  row-gap: 2vh;
}

.buttonblock2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.casebuttonblock {
  display: flex;
  flex-direction: row;
  column-gap: 2vh;
  row-gap: 2vh;
  justify-content: center;
}

.section period {
  font-family: 'Adventure';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  line-height: 110%;
  color: #FFFFFF;
  text-align: center;
  padding-bottom: 0.4vh;
}

.section company {
  font-family: 'SAIBA-45';
  font-style: normal;
  font-weight: 700;
  font-size: 4vh;
  line-height: 100%;
  color: #0061BA;
  text-align: center;
}

.section p {
  margin-top: 12px;
  margin-bottom: 12px;
  font-family: 'Adventure';
  font-style: normal;
  font-weight: 400;
  font-size: 2.6vh;
  line-height: 110%;
  color: #FFFFFF;
  text-align: left;
}

.info {
  margin-top: 8px;
  margin-bottom: 12px;
}

.parallax h1 {
  font-family: "SAIBA-45", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 16vh;
  color: #0061BA;
  text-align: center;
  margin: 0px;
}

.parallax p {
  font-family: "SAIBA-45", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 5.2vh;
  line-height: 0%;
  color: #FFFFFF;
  text-align: center;
  margin: 0px;

}

.simplebutton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 1vh 2vh;
  border: 1px solid #FFFFFF;
  border-radius: 0vh;
  background-color: transparent;

  text-decoration: none;
  font-family: 'Adventure';
  font-style: normal;
  font-weight: 500;
  font-size: 2vh;
  line-height: .2.2vh;
  color: #FFFFFF;

  transition: 0.5s;
}
    
.simplebutton:hover {
  border: 1px solid  #BBDFFF;
  color: #BBDFFF;
  background-color: #0061BA;
}

.simplebutton:active {
  border: 1px solid  #004585;
  color: #004585;
  background-color: #012B52;
}

.ghostbutton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1vh 2vh;
  border: none; 
  border-radius: 1vh;
  background-color: transparent;

  text-decoration: none;
  font-family: 'Adventure';
  font-style: normal;
  font-weight: 500;
  font-size: 2vh;
  line-height: 2.2vh;
  color: #FFFFFF;

  transition: 0.5s;
}
 
.ghostbutton:hover {
  border: none; 
  color: #0061BA;
}

.ghostbutton:active {
  border: none; 
  color: #004585;
}


@media (min-width: 2200px)
{
.section {
  padding: 1% 33% 1% 33%;
}
}

@media (min-width: 1600px) and (max-width: 2200px)
{
.section {
  padding: 1% 28% 1% 28%;
}
}


@media (min-width: 1200px) and (max-width: 1600px)
{
.section {
  padding: 1% 22% 1% 22%;
}
}

@media (min-width: 426px) and (max-width: 960px)
{

.casebuttonblock {
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.buttonblock {
  flex-direction: column;
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.buttonblock2 {
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.simplebutton {
  justify-content: flex-end;
  align-self: flex-end;
}

.ghostbutton {
  justify-content: flex-start;
  align-self: flex-start;
}
.parallax {
  padding: 64px 32px 0px 32px;
  background-image: url("../png/MainPad.png");
}

.parallax2 {
  background-image: url("../png/ContactsPad.png");
}

.parallax h1 {
  font-size: 18vh;
  line-height: 90%;
}

.parallax p {
  font-size: 8vh;
  line-height: 70%;
}
}

@media (min-width: 240px) and (max-width: 425px), (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (any-pointer:coarse)
{

.casebuttonblock {
  display: flex;
  flex-direction: column;
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.buttonblock {
  flex-direction: column;
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.buttonblock2 {
  flex-direction: column-reverse;
  column-gap: 1.4vh;
  row-gap: 1.4vh;
}

.parallax {
  padding: 92px 32px 0px 32px;
  height: 100%; 
  background-attachment: scroll;
  background-image: url("../png/MainMob.png");

}

.parallax2 {
  padding: 0px 16px 32px 16px;
  height: 100%;
  background-attachment: scroll;
  background-image: url("../png/ContactsMob.png");
}

.section {
  padding: 32px 32px 0px 32px;
}

.section period {
  font-size: 1.6vh;
  padding-bottom: 0.8vh;
}

.section p {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: 'Adventure';
  font-style: normal;
  font-weight: 400;
  font-size: 1.4vh;
  line-height: 120%;
  color: #FFFFFF;
  text-align: left;
}


.workplace {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  margin-bottom: 48px;
}

.parallax h1 {
  font-size: 10vh;
  line-height: 80%;
}

.parallax p {
  font-size: 3.2vh;
  line-height: 100%;
}
}

/*  
*/