:root {
  --darkblue: #001a71;
  --lightblue: RGBA(206, 225, 228, 0.5);
  --blue: #007cb5;
  --teal: #43C0C0;
  --font-headings: 'Barlow Condensed', sans-serif;
  --font-primary: "Lato","Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-secondary: 'DM Serif Display', 'Times New Roman', serif;
}

body {
  background: var(--lightblue);
  font-family: var(--font-primary);
  letter-spacing: .93px;
}

#header {
  background: var(--darkblue);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 0;
}

#logo {
  max-width: 120px;
}

#main {
  padding: 1rem 0.5rem 2rem 1rem;
}

#eyebrow {
  font-size: 1rem;
  color: var(--blue);
  font-weight: 600;
  font-family: var(--font-secondary);
  margin-bottom: 0.25rem;
}

#heading {
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--darkblue);
  letter-spacing: -2px;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  font-family: var(--font-headings);
  letter-spacing: .93px;
}

#content p {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25;
}

.link {
  text-decoration: none;
  display: block;
}

.link svg {
  margin-left: 6px;
}

#help-text {
  margin-bottom: 1rem;
}

#help-text p {
  color: var(--darkblue);
  font-weight: 700;
  font-size: 0.75rem;
}

#help-text .ar-icon {
  max-width: 32px;
}

img {
  max-width: 100%;
}

.ar-icon {
  max-width: 40px;
  display: inline-block;
  cursor: pointer;
}

.fixed-icon {
  position: absolute;
  bottom: -20px;
  left: -20px;
  z-index: 1;
}

.poster-container {
  display: inline-block;
}

.poster-container:first-of-type {
  margin-bottom: 2rem;
}

.poster {
  max-height: 320px;
}

#poster1, #poster2, #poster3 {
  display: flex;
  width: 100%;
  height: 100%;
}

.button-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 2.5rem;
}

.btn {
  font-family: var(--font-headings);
  letter-spacing: .93px;
  line-height: 1.84;
  -webkit-transition: background-color .2s ease,-webkit-transform .2s ease;
  transition: background-color .2s ease,-webkit-transform .2s ease;
  transition: background-color .2s ease,transform .2s ease;
  transition: background-color .2s ease,transform .2s ease,-webkit-transform .2s ease;
}

.button-download {
  width: 49%;
  background: var(--darkblue);
  color: #fff;
}

.button-download .ar-icon {
  margin-left: -14px;
  margin-top: -4px;
  padding: 0 6px;
}

.button-download:hover,
.button-download:active,
.button-download:focus {
  -webkit-transform: scale(1.04) perspective(1px);
  transform: scale(1.04) perspective(1px);
  background-color: #002677;
  color: #fff;
}

/* Modal Style */
#levar-modal { background-color: rgba(0, 0, 0, 0.75); z-index: 999999999; width:100%; height:100%; border:none; margin:0; padding:0; position: fixed; top: 0px; right: 0px; left: 0px; bottom: 0px; overflow: hidden; }
.levar-modal-container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; }
.levar-modal-box-custom { background: #ffffff; display: flex; max-height: calc(100% - 64px); padding: 2px; flex-direction: column; margin: 32px; position: relative; overflow-y: auto; border-radius: 2px; box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%); } 
.levar-modal-box { max-width: 414px; background: #ffffff; display: flex; max-height: calc(100% - 64px); padding: 2px; flex-direction: column; margin: 32px; position: relative; overflow-y: auto; border-radius: 2px; box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%); } 
.levar-modal-top { display: flex; justify-content: center; align-items: center; padding: 10px 16px; } .levar-modal-top h6 { color: #6d6d6d; margin: 0; font-size: 17px; font-family: inherit; font-weight: 500; line-height: 2; } 
.levar-modal-bottom { display: flex; padding: 15px; justify-content: center; } .levar-modal-bottom p { color: #6d6d6d;  margin: 0;  }
.levar-qr-body { padding: 16px 24px; position: relative; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } 
.levar-qr-body canvas { cursor: default; position: relative; }
.qrBorder { position: relative; padding: 16px; } .qrBorder::before, .qrBorder::after, .qrBorder > :first-child:before, .qrBorder > :first-child:after { content: ' '; position: absolute; width: 40px; height: 40px; border-style: solid; border-color: #3f9fff; }
.qrBorder::before { top: 0; left:0; border-width: 3px 0 0 3px; } .qrBorder::after { top: 0; right:0; border-width: 3px 3px 0 0; } .qrBorder > :first-child:before { bottom: 0; right: 0; border-width: 0 3px 3px 0; } 
.qrBorder > :first-child:after { bottom: 0; left: 0; border-width: 0 0 3px 3px; }

/* #modal_frame { width: 95vw; height: 90vh; max-height: 80vh; max-width: 80vw; position: relative; outline: none; overflow: hidden; margin: 0 auto; border: 0; outline: none; box-shadow: none; } */

@media screen and (min-width: 768px) {
  #header {
    padding: 1rem 0;
  }
  #logo {
    max-width: 160px;
  }
  #main {
    padding: 1rem 1rem 2rem;
  }
  #eyebrow {
    font-size: 2.5rem;
  }
  #heading {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 2rem;
  }
  #content p {
    font-size: 1rem;
    line-height: inherit;
  }
  #content p:first-of-type {
    margin-bottom: 3rem;
  }
  .link {
    margin-top: 3.5rem;
  }
  #help-text {
    margin-bottom: 0;
  }
  #help-text p {
    font-size: 1rem;
  }
  #help-text .ar-icon {
    max-width: 40px;
  }
  .poster-container:first-of-type {
    margin-bottom: 0;
  }
  .button-wrap {
    margin-top: 2rem;
    margin-left: 0;
    margin-bottom: 0;
    width: 98%;
  }
}