/* Styling for about.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_Commercial_Photo_1_Hero_RedLayer.jpg") url("../assets/images/LB_Commercial_Photo_4.jpg"); 
}

/* Ultra Small */
@media screen and (min-width: 200px) and (max-width: 299px) {
}

/* Mobile */
@media screen and (min-width: 300px) and (max-width: 650px) {
  #commercial-hero-image-container {
    display: grid;
    place-items: center;
    height: var(--hero-container-mobile);
    background-image: url("../assets/images/LB_Commercial_Photo_1_Hero_RedLayer.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Section 1 */
  .header h2 {
    text-align: center;
    color: var(--red);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-mobile);
    padding: 5%;
  }

  .img1-column,
  .img2-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .attract-image {
    padding: 5%;
    max-width: 100%;
    margin: auto;
  }

  .attract-subtitle {
    color: var(--cyan);
    text-align: center;
    margin: 0px !important;
  }

  .icons-container p {
    color: var(--blue) !important;
    margin: 0px !important;
  }

  .icon-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .icon-list {
    list-style-type: none;
  }

  .icon-list img {
    margin: 5%;
    max-width: 20%;
  }

  .icon-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .icon-list p {
    color: var(--black) !important;
    margin: 0px !important;
    font-weight: bold;
  }

  /* Financial Requirement Section */
  .two-col-text-container {
    background-image: url("../assets/images/backgrounds/LB_Commercial_RedMetal_Pattern.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    color: var(--white);
  }

  .header-col h2 {
    color: var(--white);
    font-weight: bold;
    font-size: var(--heading-two-mobile);
  }

  .list-col ul {
    list-style-type: disc;
  }

  .list-col ul li {
    line-height: 2.5ch !important;
    padding: 1% 5% !important;
    font-size: var(--para-mobile);
  }

  /* Advertising Budget Section */
  .budget-header h2 {
    text-align: center;
    color: var(--purple);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-mobile);
    padding: 5%;
  }

  .icon-column-container p {
    color: var(--black) !important;
  }

  .opt-box {
    padding: 2.5%;
    color: var(--red);
    font-size: var(--heading-two-tablet);
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    width: 45%;
    margin: 2% auto;
  }

  .opt1-column,
  .opt2-column,
  .opt3-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .opt-image {
    padding: 5%;
    max-width: 50%;
    margin: auto;
  }

  .opt-subtitle {
    color: var(--black);
    font-weight: bold;
    font-size: var(--heading-two-mobile);
    text-align: center;
    margin: 0px !important;
  }

  /* King of Prussia Image */
  .bottom-image {
    background-image: url("../assets/images/LB_Commercial_Photo_4.jpg");
  }
}

/* Tablet */
@media screen and (min-device-width: 651px) {
  #commercial-hero-image-container {
    display: grid;
    place-items: center;
    height: var(--hero-container-tablet);
    background-image: url("../assets/images/LB_Commercial_Photo_1_Hero_RedLayer.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Section 1 */
  .header h2 {
    text-align: center;
    color: var(--red);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-tablet);
    padding: 5%;
  }

  .image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content max-content;
  }

  .img1-column,
  .img2-column {
    display: grid;
    place-items: center;
  }

  .attract-image {
    padding: 5%;
    max-width: 100%;
    margin: auto;
  }

  .attract-subtitle {
    color: var(--cyan);
    text-align: center;
    margin: 0px !important;
  }

  .icons-container {
    display: grid;
    grid-row: 2/2;
    grid-column: 1/3;
    place-items: center;
  }

  .icons-container p {
    color: var(--blue) !important;
    margin: 0px !important;
    max-width: 65ch;
  }

  .icon-list {
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content max-content max-content;
  }

  .icon-list img {
    margin: 5%;
    max-width: 20%;
  }

  #icon-1,
  #icon-2,
  #icon-3 {
    grid-column: 1/1;
  }

  #icon-1,
  #icon-4 {
    grid-row: 1/1;
  }

  #icon-2,
  #icon-5 {
    grid-row: 2/2;
  }

  #icon-3,
  #icon-6 {
    grid-row: 3/3;
  }

  #icon-4,
  #icon-5,
  #icon-6 {
    grid-column: 2/2;
  }

  .icon-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .icon-list p {
    color: var(--black) !important;
    margin: 0px !important;
    font-weight: bold;
  }

  /* Financial Requirement Section */
  .two-col-text-container {
    background-image: url("../assets/images/backgrounds/LB_Commercial_RedMetal_Pattern.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    color: var(--white);
  }

  .list-col p {
    margin: 20px 0px 0px 0px !important;
  }

  .list-col ul li {
    line-height: 2.5ch !important;
    padding: 1% 5% !important;
  }

  /* Advertising Budget Section */
  .budget-header h2 {
    text-align: center;
    color: var(--red);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-tablet);
    padding: 5%;
  }

  .icon-column-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .opt-box {
    padding: 2.5%;
    font-weight: bold;
    text-align: center;
    margin: 2% auto;
    grid-column: 1/1;
    grid-row: 1/1;
    color: var(--red);
    font-size: var(--heading-three-desktop);
    text-transform: uppercase;
  }

  .opt1-column {
    grid-column: 1/1;
    grid-row: 1/1;
  }

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

  .opt3-column {
    grid-column: 3/3;
    grid-row: 1/1;
  }

  .opt1-column,
  .opt2-column,
  .opt3-column {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.25fr 1fr 0.25fr 1fr;
  }

  .opt-image {
    grid-column: 1/1;
    grid-row: 2/2;
    padding: 5%;
    max-width: 65%;
    margin: auto;
  }

  .opt-subtitle {
    grid-column: 1/1;
    grid-row: 3/3;
    text-align: center;
  }

  .opt1-column p,
  .opt2-column p,
  .opt3-column p {
    color: var(--black);
    grid-column: 1/1;
    grid-row: 4/4;
  }

  .opt-subtitle {
    color: var(--black);
    font-weight: bold;
    font-size: var(--heading-three-tablet);
    text-align: center;
    margin: 0px !important;
  }

  /* King of Prussia Image */
  .bottom-image {
    background-image: url("../assets/images/LB_Commercial_Photo_4.jpg");
    background-position: top !important;
  }
}

/* Desktop */
@media screen and (min-device-width: 1025px) {
  #commercial-hero-image-container {
    height: var(--hero-container-desktop);
  }

  /* Section 1 */
  .header h2 {
    font-size: var(--heading-two-desktop);
  }

  .attract-image {
    max-width: 75% !important;
  }

  /* Advertising Budget Section */
  .budget-header h2 {
    font-size: var(--heading-two-desktop);
  }

  .opt-subtitle {
    font-size: var(--heading-two-desktop);
  }

  .opt-image {
    max-width: 50%;
  }

  .icon-list img {
    max-width: 15%;
  }
}