@font-face {
    font-family: SST-Regular;
    src: url(../font/SSTRg.woff);
  }
  
  @font-face {
    font-family: SST-Medium;
    src: url(../font/SSTMedium.woff);
  }
  
  @font-face {
    font-family: SST-Bold;
    src: url(../font/SSTBold.woff);
  }
  
  @font-face {
    font-family: SST-Light;
    src: url(../font/SSTLight.woff);
  }
  

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

html{
    overflow-x: hidden;
  }

  @media only screen and (min-width: 600px) {
  
  .container {
    height: 310vw;
    width: 100vw;
    display: grid;
    grid-template-columns: 89fr 640fr 102fr 501fr 132fr ;
    grid-template-rows: 560fr 172fr 298fr 133fr 84fr 411fr 190fr 411fr 190fr 411fr 92fr 502fr 90fr 144fr 477fr 10fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  
  .section-1 {
    grid-area: 1 / 1 / 2 / 6;
    background-image: url("../img/ps-astrobot-header.png");
    background-size: 100% auto ;
    background-repeat: no-repeat;
  }

  .section-2 {
    grid-area: 3 / 2 / 4 / 4;
    background-size: 100% 100% ;
  }

  .section-2 h3{
    color: #ffffff;
    font-size: 2.5vw;
    font-family: SST-Regular;
  }

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

  .section-3 {
    grid-area: 2 / 4 / 5 / 6;
    background-image: url("../img/ps-astrobot-dog.png");
    background-size: 85% auto  ;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .section-4 {
    grid-area: 2 / 1 / 5 / 6;
    background-color: #0618a6;
    z-index: -1;
  }

  .section-5 {
    grid-area: 6 / 1 / 7 / 3;
    background-image: url("../img/ps-astrobot-spaceship.png");
    background-size: 100% auto  ;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .section-6 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-area: 6 / 4 / 7 / 5;
    background-size: 100% 100% ;
  }

  .section-6 h3{
    color: #282828;
    font-size: 2.5vw;
    font-family: SST-Regular;
  }

  .section-6 p{
    padding-top: 1.6vw;
    color: #282828;
    font-size: 2vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-7 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-area: 8 / 2 / 9 / 3;
    background-size: 100% 100% ;
    padding-right: 20%;
  }

  .section-7 h3{
    color: #282828;
    font-size: 2.5vw;
    font-family: SST-Regular;
  }

  .section-7 p{
    padding-top: 1.6vw;
    color: #282828;
    font-size: 2vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-8 {
    grid-area: 8 / 3 / 9 / 6;
    background-image: url("../img/ps-astrobot-desert.png");
    background-size: 100% auto  ;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section-9 {
    grid-area: 10 / 1 / 11 / 3;
    background-image: url("../img/ps-astrobot-rescue.png");
    background-size: 100% auto  ;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section-10 {
    grid-area: 10 / 4 / 11 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .section-10 h3{
    color: #282828;
    font-size: 2.5vw;
    font-family: SST-Regular;
  }

  .section-10 p{
    padding-top: 1.6vw;
    color: #282828;
    font-size: 2vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-11 {
    grid-area: 12 / 2 / 13 / 5;
    background-image: url("../img/ps5.png");
    background-size: 80% auto  ;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section-12 {
    grid-area: 13 / 2 / 14 / 5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SST-Bold;
    font-size: 3vw;
    color: #00439c;
  }

  .section-13 {
    grid-area: 14 / 2 / 15 / 5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SST-Bold;
    font-size: 2.4vw;
    color: #00439c;
  }

  .section-14 {
    grid-area: 12 / 1 / 16 / 6;
    z-index: -1;
    background: linear-gradient(to bottom, #f2f3f7 0%, #ffffff 11%);
  }
  
  .section-15 {
    grid-area: 15 / 1 / 16 / 6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    padding: 2vw 4vw;
  }

  .section-15 div{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 1.5vw;
  }

  .section-15 img{
    width: 2vw;
    align-self: center;
  }

  .section-15 div img{
    width: 6vw;
  }

  .section-15 div h3{
    font-family: SST-Light;
    font-size: 2vw;
    text-align: center;
    padding-top: 2vw;
    padding-bottom: 2vw;
  }

  .section-15 div p:nth-child(3){
    color: #282828;
    font-size: 1.6vw;
    font-family: SST-Regular;
    text-align: center;
  }

  .section-15 div p:nth-child(4){
    color: #282828;
    font-size: 1.7vw;
    font-family: SST-Regular;
    text-align: center;
    padding-top: 2vw;
  }

  .section-16 {
    grid-area: 16 / 1 / 17 / 6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    padding: 2vw 4vw;
    font-size: 1.3vw;
  }
}

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

  .container {
    height: 790vw;
    width: 100vw;
    display: grid;
    grid-template-columns: 50fr 500fr 50fr;
    grid-template-rows: 430fr 450fr 450fr 450fr 450fr 450fr 450fr 450fr 240fr 144fr 103fr 490fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .section-1 {
    grid-area: 1 / 1 / 2 / 4;
    background-image: url("../img/ps-astrobot-header-mobile.png");
    background-size: 100% auto  ;
    background-repeat: no-repeat;
  }

  .section-2{
    grid-area: 2 / 2 / 3 / 3;
    background-size: 100% 100% ;
    background-color: #0618a6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 12%;
  }

  .section-2 h3{
    color: #ffffff;
    font-size: 6.4vw;
    font-family: SST-Regular;
    padding-bottom: 2vw;
  }

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

  .section-3 {
    grid-area: 3 / 1 / 4 / 4;
    background-image: url("../img/ps-astrobot-spaceship.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .section-4{
    grid-area: 2 / 1 / 3 / 4;
    background-color: #0618a6;
    z-index: -1;
  }

  .section-5{
    display: none;
  }


  .section-6{
    grid-area: 4 / 2 / 5 / 3;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 12%;
  }

  .section-6 h3{
    font-size: 6.4vw;
    font-family: SST-Regular;
    padding-bottom: 2vw;
  }

  .section-6 p{
    padding-top: 1.6vw;
    font-size: 4.3vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-7{
    grid-area: 6 / 2 / 7 / 3;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 12%;
  }

  .section-7 h3{
    font-size: 6.4vw;
    font-family: SST-Regular;
    padding-bottom: 2vw;
  }

  .section-7 p{
    padding-top: 1.6vw;
    font-size: 4.3vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-8{
    grid-area: 5 / 1 / 6 / 4;
    background-image: url("../img/ps-astrobot-desert.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .section-9{
    grid-area: 7 / 1 / 8 / 4;
    background-image: url("../img/ps-astrobot-rescue.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .section-10{
    grid-area: 8 / 2 / 9 / 3;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 12%;
  }

  .section-10 h3{
    font-size: 6.4vw;
    font-family: SST-Regular;
    padding-bottom: 2vw;
  }

  .section-10 p{
    padding-top: 1.6vw;
    font-size: 4.3vw;
    font-family: SST-Regular;
    line-height: 1.3;
  }

  .section-14 {
    grid-area: 9 / 1 / 13 / 4;
    z-index: -1;
    background: linear-gradient(to bottom, #f2f3f7 0%, #ffffff 11%);
  }

  .section-11{
    grid-area: 9 / 1 / 10 / 4;
    background-image: url("../img/ps5.png");
    background-size: 90% auto ;
    background-position: center bottom;
    background-repeat: no-repeat;
    
  }

  .section-12{
    grid-area: 10 / 1 / 11 / 4;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: SST-Bold;
    font-size: 6vw;
    color: #00439c;
    padding: 0vw 15vw;
  }

  .section-13{
    grid-area: 11 / 1 / 12 / 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SST-Regular;
    font-size: 5vw;
    color: #00439c;
    padding: 0vw 18vw;
  }

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

  .section-15 div{
    width: 65%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .section-15 div img{
    width: 14vw;
    height: 14vw;
    padding-right: 4vw;
    object-fit: contain; 
  }

  .section-15 div h3{
    font-size: 4vw;
    font-family: SST-Light;
  }

  .section-15 div p{
    display: none;
  }

  .section-16 {
    display: none;
  }

}