/* Styling for index.html */
/* Jack Ryan 2021 */

/* Variables */
@import "variables.css";

/* Hack to preload images */
body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
  content:url("../assets/images/LB_Home_Photo_1_Hero_Mobile.jpg") url("../assets/images/LB_Home_Photo_1_Hero_Tablet.jpg") url("../assets/images/LB_Home_Photo_1_Hero_Desktop.jpg"); 
}

/* Ultra Small */
@media screen and (min-width: 200px) {
  /* Hero Image */
  .hero-image-container {
    height: 100vh;
    background-image: url("../assets/images/LB_Home_Photo_1_Hero_Mobile.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  img.lumen-logo-hero {
    margin-bottom: 0px;
  }

  .hero-title-container {
    display: grid;
    max-width: 100%;
    transform: translate(0%, 50vh);
    place-items: center;
  }

  #index-hero-image-container {
    min-width: 100%;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .index-hero-title,
  .hero-subtitle {
    color: var(--white);
    font-weight: bold;
  }

  .index-hero-title {
    font-size: 2.95em;
  }

  .hero-subtitle {
    margin: 0px;
    font-size: 1.5em;
  }

  /* Two Image Column Styling */
  #index-two-image-column-container {
    padding: 5% 0px;
    min-height: 75vh;
    background: var(--blue);
    background: linear-gradient(0deg, var(--blue) 0%, var(--cyan) 100%);
  }

  #col-1,
  #col-2 {
    display: flex;
    flex-direction: column;
  }

  #col-2-header {
    order: 1 !important;
  }

  #col-2-img {
    order: 2 !important;
    margin-bottom: 40px;
  }

  .column-image {
    border-radius: 10px;
    max-width: 85%;
    margin: auto;
  }

  .column-title {
    color: var(--white);
    font-weight: bold;
    font-size: 2.75em;
    max-width: 95%;
    padding: 0% 10%;
  }

  /* Double Column Image and Text */
  #double-column {
    display: flex;
    flex-direction: column;
  }

  #dbl-col-1 {
    margin: auto;
  }

  #dbl-col-2 {
    padding: 2.5%;
  }

  .teal-text {
    font-weight: bold;
    color: var(--cyan);
    font-size: 1.5em;
    margin: auto;
    /* margin: 5% 0% 0% 0%; */
  }

  #second-para {
      margin: 5% 0%;
  }
  /* Testimony */
  #testimony {
    min-height: 75vh;
    background: url("../assets/images/backgrounds/LB_Home_MetalPatternBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }

  #testimony-title {
    font-size: 2.5em;
    color: var(--white);
    text-transform: uppercase;
    width: 100%;
    font-weight: bolder;
    padding: 5% 0% 1% 0%;
    text-align: center;
  }

  blockquote {
    padding: 0% 2% 0% 2% !important;
  }

  blockquote p {
    color: var(--white);
    font-style: normal;
    max-width: 65ch;
  }

  .test-attribution {
    padding: 0% 2.5% 0% 5%;
  }

  .image-col {
    display: none;
  }

  .test-col-1 {
    display: grid;
    place-items: center;
  }

  .test-image {
    order: 2;
    max-width: 90%;
    margin: auto;
  }

  .test-text-lead {
    order: 1;
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 2.5%;
  }

  .test-name {
    font-size: 1.25em;
  }

  .test-main-quote {
    font-size: 0.95em;
    padding: 0% 2.5% 0% 5%;
  }

  .test-quote {
    float: left;
    margin: 0% 2% 0% 2%;
  }
}

/* Mobile */
@media screen and (min-width: 300px) {
  /* Hero Image */
  .hero-image-container {
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .hero-title-container {
    display: grid;
    max-width: 100%;
    transform: translate(0%, 50vh);
  }

  #index-hero-image-container {
    min-width: 100%;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .index-hero-title,
  .hero-subtitle {
    color: var(--white);
    font-weight: bold;
    text-align: center;
  }

  .index-hero-title {
    font-size: 2.5em;
    padding: 0% 1%;
  }

  .hero-subtitle {
    margin: 0px;
    font-size: 1.5em;
  }

  /* Two Image Column Styling */
  #index-two-image-column-container {
    padding: 5% 0px;
    min-height: 75vh;
    background: var(--blue);
    background: linear-gradient(0deg, var(--blue) 0%, var(--cyan) 100%);
  }

  #col-1,
  #col-2 {
    display: flex;
    flex-direction: column;
  }

  #col-2-header {
    order: 1 !important;
  }

  #col-2-img {
    order: 2 !important;
    margin-bottom: 40px;
  }

  .column-image {
    border-radius: 5px;
    max-width: 60%;
    margin: auto;
  }

  .column-title {
    color: var(--white);
    font-weight: bold;
    font-size: 2em;
    padding: 0% 5%;
  }

  /* Double Column Image and Text */
  #double-column {
    display: flex;
    flex-direction: column;
  }

  #dbl-col-1 {
    order: 2;
  }

  #dbl-col-2 {
    color: var(--white);
    order: 1;
    background: url("../assets/images/backgrounds/LB_Home_MetalPatternBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #dbl-col-1 img {
    width: 100%;
    height: auto;
  }

  .teal-text {
    font-weight: bold;
    color: var(--white);
    font-size: 1.25em;
    max-width: 65ch;
    /* margin: 5% 0% 0% 0%; */
  }

  #second-para {
      margin: 5% 0%;
  }
  /* Testimony */
  #testimony {
    min-height: 75vh;
    background: url("../assets/images/backgrounds/LB_Home_MetalPatternBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }

  #testimony-title {
    font-size: 2em;
    color: var(--white);
    text-transform: uppercase;
    width: 100%;
    font-weight: bolder;
    padding: 5% 0% 1% 0%;
    text-align: center;
  }

  blockquote p {
    color: var(--white);
    font-style: normal;
    max-width: 65ch;
  }

  .test-attribution {
    padding: 0% 5% 0% 5%;
  }

  .test-col-1 {
    display: grid;
    place-items: center;
  }

  .test-text-lead {
    font-size: var(--heading-three-mobile);
    font-weight: bold;
    padding: 0% 5%;
  }

  .test-name {
    font-size: 1.25em;
  }

  .test-main-quote {
    font-size: 0.95em;
    padding: 0% 5% 0% 5%;
  }

  .test-quote {
    float: left;
    margin: 0% 2% 0% 2%;
  }
}

/* Tablet */
@media screen and (min-device-width: 651px) {
  /* Hero Image */
  .hero-image-container {
    height: var(--hero-container-tablet);
    background-image: url("../assets/images/LB_Home_Photo_1_Hero_Tablet.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #index-hero-image-container {
    min-width: 100%;
  }

  .hero-title-container {
    display: grid;
    max-width: 100%;
    transform: translate(20%, 50%);
  }

  .lumen-logo-hero {
    display: none !important;
  }

  .index-hero-title,
  .hero-subtitle {
    color: var(--white);
    font-weight: bold;
  }

  .index-hero-title {
    font-size: var(--heading-one-tablet);
    height: 100%;
    width: 50%;
  }

  .hero-subtitle {
    margin: 0px;
    font-size: var(--heading-two-tablet);
  }

  /* Two Image Column Styling */
  #index-two-image-column-container {
    padding: 2.5% 0px;
    min-height: var(--hero-container-tablet);
    background: var(--blue);
    background: linear-gradient(0deg, var(--blue) 0%, var(--cyan) 100%);
  }

  #col-1,
  #col-2 {
    display: grid;
    place-items: center;
  }

  #col-1 {
    grid-column: 1 / 1;
  }

  #col-2 {
    grid-column: 2 / 2;
  }

  .column-image {
    border-radius: 5px;
    max-width: 40% !important;
  }

  .column-title {
    color: var(--white);
    font-weight: bold;
    font-size: 2em;
    max-width: 95%;
    padding: 0% 10%;
  }

  /* Double Column Image and Text */
  #double-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    place-items: center;
  }

  #dbl-col-1 {
    grid-column: 1 / 1;
    order: 0 !important;
  }

  #dbl-col-1 .uk-inline img {
    max-width: 85%;
  }

  #dbl-col-2 {
    grid-column: 2 / 2;
    order: 0 !important;
    background: transparent;
  }

  .teal-text {
    font-weight: bold;
    color: var(--cyan);
    font-size: 1.5em;
  }

  #second-para {
    margin-top: 5%;
  }

  /* Testimony */
  #testimony {
    min-height: var(--hero-container-tablet);
    background: url("../assets/images/backgrounds/LB_Home_MetalPatternBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
  }

  #testimony-title {
    font-size: var(--heading-two-tablet);
    color: var(--white);
    text-transform: uppercase;
    width: 100%;
    font-weight: bolder;
    padding: 5% 0% 1% 0%;
    text-align: center;
  }

  #testimony-article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 0.5fr;
    place-items: center;
  }

  blockquote p {
    color: var(--white);
    font-style: normal;
    max-width: 100ch;
  }

  .test-text-lead {
    font-size: 1.5em;
    font-weight: bold;
  }

  .test-name {
    font-size: var(--para-tablet);
  }

  .test-main-quote {
    padding-left: 5%;
  }

  .test-quote {
    float: left;
    margin: 0% 2% 0% 2%;
  }

  .test-col-1 {
    grid-column: 1/-1;
    grid-row: 2/2;
  }
}

/* Desktop */
@media screen and (min-device-width: 1023px) {
  /* Hero Image */
  .hero-image-container {
    height: var(--hero-container-desktop);
    background-image: url("../assets/images/LB_Home_Photo_1_Hero_Desktop2.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #index-hero-image-container {
    min-width: 100%;
  }

  .hero-title-container {
    display: grid;
    max-width: 50%;
    transform: translate(90%, 50%);
  }

  .index-hero-title,
  .hero-subtitle {
    color: var(--white);
    font-weight: bold;
  }

  .index-hero-title {
    font-size: 4.5em;
    height: 100%;
    width: 100%;
  }

  .hero-subtitle {
    margin: 0px;
    font-size: 2.5em;
  }

  /* Two Image Column Styling */
  #index-two-image-column-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 75vh;
    background: var(--blue);
    background: linear-gradient(0deg, var(--blue) 0%, var(--cyan) 100%);
  }

  #col-1,
  #col-2 {
    display: grid;
    place-items: center;
  }

  #col-1 {
    grid-column: 1 / 1;
  }

  #col-2 {
    grid-column: 2 / 2;
  }

  .column-image {
    border-radius: 10px;
    max-width: 65% !important;
  }

  .column-title {
    color: var(--white);
    font-weight: bold;
    font-size: 2.5em;
    max-width: 95%;
    padding: 0% 10% !important;
  }

  #col-2-img {
    order: 0 !important;
    margin-bottom: 0px;
  }

  /* Double Column Image and Text */
  #double-column {
    display: grid;
    grid-template-columns: repeat(2 1fr);
    place-items: center;
  }

  #dbl-col-1 {
    grid-column: 1 / 1;
    display: grid;
    place-items: center;
    width: 100%;
  }

  #dbl-col-1 img {
    width: 60%;
    height: auto;
  }

  #dbl-col-2 {
    grid-column: 2 / 2;
  }

  .teal-text {
    font-weight: bold;
    color: var(--cyan);
    font-size: 2em;
  }

  #second-para {
    margin-top: 2%;
  }

  /* Testimony */
  #testimony {
    min-height: 75vh;
    background: url("../assets/images/backgrounds/LB_Home_MetalPatternBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
  }

  #testimony-title {
    font-size: 2.5em;
    color: var(--white);
    text-transform: uppercase;
    width: 100%;
    font-weight: bolder;
    padding: 5% 0% 1% 0%;
    text-align: center;
  }

  #testimony-article {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr !important;
    place-items: center;
  }

  .image-col {
    display: grid;
    grid-column: 1/1;
    grid-row: 1/-1;
    place-items: center;
  }

  .test-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: solid 2px var(--blue);
  }

  .test-col-1 {
    grid-column: 2/2;
    grid-row: 1/-1;
  }

  .test-text-lead {
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 2.5%;
  }

  .test-name {
    font-size: 1.25em;
  }

  .test-main-quote {
    padding-left: 5%;
  }

  .test-quote {
    float: left;
    margin: 0% 2% 0% 2%;
  }
}