*,
 *::before,
 *::after {
     box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
}

  img,svg,video,picture {
  max-width: 100%;
  height: auto;
}
        .header {
            width: 100%;
            padding: 0.8rem;
            text-align: center;
            background-color: olive;
            color: white;
        }

        .hero {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-columns: auto;
        align-items: center;
        align-content: center;
        background: url(../images/sapbg.jpg) no-repeat bottom center scroll; 
	    -webkit-background-size: cover;
	    -moz-background-size: contain;
	    -o-background-size: cover;
	    background-size: cover;
	    padding: 20vh 1rem;
        }
        .tagline {
            padding: 1rem;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.473);
        }

        .full-width {
            width: 100%;
            padding: 1rem;
            background-color: white
        }
        .fifty-wrapper {
           display: grid; 
           grid-template-columns: 1fr 1fr;
           grid-template-rows: auto;
        }
        .left-fifty {
            background-color: #A0C4FA;
            padding: 1rem;
        }
        .right-fifty {
            background-color: #77abfa;
            padding: 1rem;
        }
        .footer {
            width: 100%;
            text-align: center;
            padding: 0.2rem;
            background-color: white;
        }

        /*todo fonts **********************/

h1 {
    
    font-size: clamp(1.5625rem, 1.2887rem + 1.369vw, 3rem);
    }

h2 {
    font-size: clamp(0.875rem, 0.394rem + 2.4051vw, 3.25rem);
    margin-bottom: 10px;   
}


h3 {
    font-size: clamp(0.875rem, 0.5459rem + 1.6456vw, 2.5rem);
    margin-bottom: 10px;
}

h4 {
    font-size: clamp(0.875rem, 0.5459rem + 1.6456vw, 2.5rem);
    margin-bottom: 10px;
}

p {
    
    font-size: clamp(0.875rem, 0.7991rem + 0.3797vw, 1.25rem);
    margin-bottom: 8px;
    font-weight: 200;
}
.pull-quote {
    font-size: clamp(0.875rem, 0.7991rem + 0.3797vw, 1.25rem);
    margin-bottom: 8px;
    font-weight: 300;

}

/*todo buttons */
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
  }
  
  .button1 {
    background-color: white; 
    color: black; 
    /* border: 2px solid white; */
  }
  
  /* .button1:hover {
    background-color: black;
    color: white;
  } */
  

/*todo media queries **/

/* MOBILE MEDIA QUERIES iPad portrait */

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

    .fifty-wrapper {
        display: grid; 
        grid-template-columns: 1fr;
        grid-template-rows: auto;
     }
     .left-fifty {
        background-color: #77abfa;
        text-align: center;
        padding: 1rem;
}
}


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

    .hero {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-columns: auto;
        align-items: center;
        align-content: center;
        background: url(../images/sapbg.jpg) no-repeat bottom center scroll; 
        -webkit-background-size: cover;
        -moz-background-size: contain;
        -o-background-size: cover;
        background-size: cover;
        padding: 15vh 1rem;
        }

        .left-fifty {
            background-color: #77abfa;
            text-align: center;
            padding: 1rem;
        }

}