@import url("https://use.typekit.net/zax8eyn.css");
 
 :root {
   --body_font: 'obvia', sans-serif;
   --headline_font: 'navigo', sans-serif;
   --color_white: #fff;
   --color_blue: #009EC2;
 }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
   background:url('../img/horizontal_centered_bg.jpg') no-repeat bottom center;
   background-size:cover;
   min-height: 100vh;
   color: var(--color_white);
   font-family:var(--body_font);
   font-size: 22px;
   line-height: 1.13em;
   text-align:center;
}

.container {
   padding-left:25px;
   padding-right: 25px;
}

.col-4 {
   text-align:left;
}
.col-8 {
   text-align:right;
}

.max-logo {
   width:75px;
}

.partnership-logo {
   width:200px;
}

img {
   max-width: 100%;
   height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headline_font);
}

h1 {
   font-size: 40px;
   line-height: 1.25em;
   text-align:center;
   color:var(--color_white);
   font-weight:300;
   text-transform:uppercase;
   margin: 62px 0 26px;
}

h1 strong {
   font-weight: 700;
}

p {
   max-width: 530px;
   margin: 0 auto;
}

.btn-wrap {
   margin: 74px 0 13px;
}

.button,
.button:visited {
   background-color:var(--color_blue);
   color:var(--color_white);
   font-family:var(--headline_font);
   font-weight: 500;
   text-decoration:none;
   text-transform: uppercase;
   font-size: 16px;
   line-height: 20px;
   padding: 16px 28px;
   border-radius: 50px;
   transition: all 0.3s ease;
}

.button:hover {
   background-color:var(--color_white);
   color:var(--color_blue);  
}

.qr-code {
   margin-top: 35px;
}

.qr-code img {
   max-width: 111px;
}

@media only screen and (min-width: 768px) {
   body {
      font-size: 30px;
      padding: 56px 0;
      height: 100vh;
   }

   .main-content .container {
      position:relative;
      min-height: calc(100vh - 270px);
   }

   .max-logo {
     width: 120px;
   }

   .partnership-logo {
      width:337px;
   }

   h1 {
      font-size: 68px;
      margin: 62px 0 26px;
   }
   .qr-code {
      margin-top:0;
      text-align:left;
      position:absolute;
      bottom:9px;
      left:13px;
   }
}