@font-face {
  font-family: SST-Regular;
  src: url(../font/SSTRg.woff);
}

@font-face {
  font-family: SST-Medium;
  src: url(../font/SST-MEDIUM.OTF);
}

@font-face {
  font-family: SST-Bold;
  src: url(../font/SST-BOLD.OTF);
}

@font-face {
  font-family: SST-Light;
  src: url(../font/SST-LIGHT.OTF);
}

@font-face {
  font-family: Cube-Pro;
  src: url(../font/FF\ Cube\ Bold.ttf);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media only screen and (min-width: 600px) {

body {
  width: 100%;
  height: 204vw;

}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 557fr 71fr 419fr 74fr 84fr 62fr 160fr 60fr 194fr 87fr 103fr 64fr 306fr 154fr 238fr 84fr 84fr;
  grid-template-columns: 59fr 29fr 68fr 57fr 219fr 25fr 90fr 86fr 96fr 51fr 43fr 80fr 33fr 211fr 62fr 43fr 43fr 70fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #F5F7FA;
}

.background-desktop{
  grid-area: 1 / 1 / 10 / 19;
  background-image: url("../img/Astrobot-PS5-Background.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.section-01{
  grid-area: 3 / 11 / 5 / 15;
  background-image: url("../img/01-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-02{
  grid-area: 3 / 2 / 4 / 9;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;

}

.section-02 h2{
  font-size: 2.8vw;
  font-family: SST-Regular;
  color: #ffffff; /*0070cc;*/
  text-align: left;
  text-transform: uppercase;
  width: 80%;
  padding-bottom: 4%;
}

.section-02 p{
  font-size: 1.35vw;
  font-family: SST-Regular;
  color: #ffffff; /*#2d2d2d;*/
}

.section-03{
  grid-area: 6 / 4 / 8 / 6;
  background-image: url("../img/02-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-04{
  grid-area: 7 / 8 / 9 / 12;
  background-image: url("../img/03-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-05{
  grid-area: 7 / 14 / 9 / 17;
  background-image: url("../img/04-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-06 {
  grid-area: 9 / 4 / 10 / 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.section-06 h3 {
  font-size: 1.5vw;
  font-family: SST-Regular;
  color: #ffffff; /*#2d2d2d;*/
  text-transform: uppercase;
  text-align: center;
    padding-bottom: 3%;
}

.section-06 p {
  font-size: 1vw;
  font-family: SST-light;
  color: #ffffff; /*#2d2d2d;*/
  text-align: center;
    line-height: 1.3;
}

.section-07 {
  grid-area: 9 / 8 / 10 / 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.section-07 h3 {
  font-size: 1.5vw;
  font-family: SST-Regular;
  color: #ffffff; /*#2d2d2d;*/
  text-transform: uppercase;
  text-align: center;
    padding-bottom: 3%;
}

.section-07 p {
  font-size: 1vw;
  font-family: SST-light;
  color: #ffffff; /*#2d2d2d;*/
  text-align: center;
    line-height: 1.3;
}

.section-08 {
  grid-area: 9 / 14 / 10 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.section-08 h3 {
  width: 75%;
  font-size: 1.5vw;
  font-family: SST-Regular;
  color: #ffffff; /*#2d2d2d;*/
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 3%;
}

.section-08 p {
  font-size: 1vw;
  font-family: SST-light;
  color: #ffffff; /*#2d2d2d;*/
  text-align: center;
  line-height: 1,3;
}

.section-09{
  grid-area: 5 / 7 / 7 / 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.section-09 h2{
  font-size: 2.5vw;
  font-family: SST-Regular;
  color: #ffffff; /*0070cc;*/
  text-align: center;
  text-transform: uppercase;

}

.section-10{
  grid-area: 10 / 10 / 13 / 18;
  background-image: url("../img/05-Astrobot-PS5.png");
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: 2;
}


.section-11{
  grid-area: 11 / 3 / 12 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-11 h2{
  font-size: 2.8vw;
  font-family: SST-Bold;
  color: #003796;
  text-align: center;
  text-transform: uppercase;
}

.section-11 h3{
  font-size: 2vw;
  font-family: SST-Regular;
  color: #003796;
  text-align: center;
  text-transform: uppercase;

}

.section-12{
  display: grid;
  grid-area: 13 / 1 / 14 / 19;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 3%;
  grid-row-gap: 0;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 6%;
  padding-bottom: 3%;
}


.section-12 div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}

.section-12 div img{
  width: 33%;
}

.section-12 div p{
  font-size: 1vw;
  font-family: SST-light;
  color: #121315;
  text-align: center;
  line-height: 1.3;
}

.section-12 div h3{
  font-size: 1.5vw;
  font-family: SST-Regular;
  color: #121315;
  text-align: center;
  padding-bottom: 3%;
}

.section-13{
  grid-area: 14 / 1 / 18 / 19;
  background-color: #121315;
}

.section-14{
  grid-area: 14 / 15 / 15 / 18;
  background-image: url("../img/08-Astrobot-PS5.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-15{
  grid-area: 14 / 1 / 15 / 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.section-15 h2{
  font-size: 2.5vw;
  font-family: SST-Regular;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

.section-16{
  grid-area: 15 / 5 / 16 / 9;
  background-image: url("../img/06-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-17{
  grid-area: 15 / 10 / 16 / 15;
  background-image: url("../img/07-Astrobot-PS5.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.section-18{
  grid-area: 16 / 5 / 17 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.section-18 p{
  font-size: 1.6vw;
  font-family: SST-Regular;;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
  padding-top: 2%;
}

.section-19{
  grid-area: 16 / 10 / 17 / 15;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.section-19 p{
  font-size: 1.6vw;
  font-family: SST-Regular;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
  padding-top: 2%;
}

.section-20{
  grid-area: 17 / 1 / 18 / 19;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-20 p{
  font-size: 1vw;
  font-family: SST-light;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
}

  .mobile-image {
    display: none;
  }

}
@media only screen and (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
    background-color: #F5F7FA;
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-01,
  .section-02,
  .section-03,
  .section-04,
  .section-05,
  .section-06,
  .section-07,
  .section-08,
  .section-09,
  .section-10,
  .section-11,
  .section-12,
  .section-13,
  .section-14,
  .section-15,
  .section-16,
  .section-17,
  .section-18,
  .section-19,
  .section-20 {
    display: none;
  }

  .mobile-image {
    width: 100%;
    height: auto;
    display: block;
  }
}