@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Open+Sans:wght@400;700&display=swap');

  .branding{
      background-image: url(logo.png);
      height: 115px;
      width: 100%;
      background-repeat: no-repeat;
      background-size: 175px;
      background-position: 30px center;
    }

    p.branding-text{
      width: 100%;
      text-align: right;
      height: 115px;
      padding-top: 47px;
      font-size:16px;
    }

    html{
      margin:0;
      padding:0;
      background:#003D5B;
    }

    body{
      margin: 0;
      padding: 0;
      background: linear-gradient(-64deg, #60A0BA 6%, #2E75A7 100%);
      height: 235px;

    }

    .phone{
      position: absolute;
      right: 30px;
    }


    a{
      color:#FFF;
    }

    .container{
      width: 600px;
      left: 50%;
      margin-left: -300px;
      padding-bottom:30px;
      position: relative;
      z-index: 300;
    }

    .hero{
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 0px;
      padding-bottom: 0px;
    }

    .instructions{
      padding-left:30px;
      padding-right:30px;
      padding-top:10px;
      padding-bottom:10px;
    }

    .app-store{
      height:95px;
      background:#1B89B1;
    }

    h1{
      font-family: 'Barlow', sans-serif;
      color:#FFF;
      font-size: 54px;
      line-height: 42px;
      margin-top:0px;
    }

    p{
      font-family: 'Barlow', sans-serif;
      color:#FFF;
      font-size:19px;
    }


    p.footer{
      display:none;
    }

    p.small{
      font-size:14px;
      font-family: 'Open Sans', sans-serif;
    }

    .column{
      display: inline-grid;
      padding-left: 30px;
    }


      p.desktop-hidden{
        display:none;
      }

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

    .phone{
      padding-top: 50px;
    }


    .branding{
      background-repeat: no-repeat;
      background-size: 160px;
      background-position: 30px center;
      position: absolute;
      height:95px;
    }

    p.branding-text{
      display:none;
    }

    p.footer{
      text-align: center;
      background: #ffffff26;
      width:100%;
      padding-top:30px;
      padding-bottom:30px;
      width:100%;
      padding-top: 30px;
      margin-bottom: 0px;
      padding-bottom: 30px;
      display:block;
    }

    body{
      height:initial;
      background:initial;
    }

    .column{
      width: 33%;
      display: inline-grid;
      padding-left: 10%;
    }

    .left{
      width:initial;
      display:block;
      height:initial;
    }

    .right{
      width:initial;
      display:block;
      height:initial;
      margin-top:initial;
      position:initial;
    }

    .hero{
      background: linear-gradient(-64deg, #60A0BA 6%, #2E75A7 100%);
      padding-top: 155px;
      padding-bottom: 30px;
    }

    .container{
      margin:0;
      left:0;
      width:100%;
    }

    .instructions{
      background-image: linear-gradient(-180deg, #1B6687 0%, #003D5B 31%);
    }

    h1{
      font-size:52px;
      line-height:41px;
      font-weight:bolder;
    }

    p{
      font-size:19px;
    }

    p.small{
      font-size:13px;
    }

    img{
      padding-top:5px;
    }
  }

@media screen and (min-width: 800px) and (min-height: 831px){

      body{
        height:280px;
      }

      h1{
        font-size:70px;
        line-height: initial;
        line-height:60px;
      }

      .app-store{
        height:auto;
      }

      p{
        font-size: 20px;
      }

      img.logo{
        width: 255px;
      }

      .phone{
        width: 160px;
      }

      p.desktop-hidden{
        display:initial;
      }



}