/* 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_Municipal_Photo_1_Hero_IndigoLayer.jpg") url("../assets/images/LB_Municipal_Photo_5.JPG"); 
}

/* All Screen Sizes */
p {
  color: var(--black);
}

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

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

  /* Attraction Section */
  .attraction {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    place-content: center;
  }
  .attract-header h2 {
    text-align: center;
    color: var(--blue);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-mobile);
    padding: 5%;
  }

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

  .here-column,
  .municipality-column,
  .cultural-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

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

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

  p.uk-padding-small {
    margin: 0px !important;
    color: var(--black) !important;
    font-size: var(--para-mobile) !important;
  }

  /* Directional Street Signs Section */
  .two-col-text-container {
    background-image: url("../assets/images/backgrounds/LB_Municipal_IndigoMetal_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);
  }

  .header-col p,
  .list-col p {
    color: var(--white);
  }

  .two-col-text-container p {
    margin: 0px !important;
  }

  .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);
  }

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

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

  .opt1-column,
  .opt2-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;
  }

  /* Strafford Image */
  .bottom-image {
    background-image: url("../assets/images/LB_Municipal_Photo_5.JPG");
  }
}

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

  /* Attraction Section */
  .attraction {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    place-content: center;
  }
  .attract-header h2 {
    text-align: center;
    color: var(--blue);
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-tablet);
    padding: 5%;
  }

  .image-column-container {
    grid-column: 1;
    grid-row: 2/2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content max-content;
  }

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

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

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

  .here-column,
  .municipality-column,
  .cultural-column {
    display: flex;
    flex-direction: column;
    padding-bottom: 5%;
  }

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

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

  p.uk-padding-small {
    margin: 0% !important;
    color: black !important;
    font-size: var(--para-tablet) !important;
  }

  /* Directional Street Signs Section */
  .two-col-text-container {
    background-image: url("../assets/images/backgrounds/LB_Municipal_IndigoMetal_Pattern.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
  }

  .header-col p,
  .list-col p {
    color: var(--white);
  }

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

  .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(--blue);
    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;
    grid-template-rows: 1fr;
  }

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

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

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

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

  .opt-box {
    grid-column: 1/1;
    grid-row: 1/1;
  }

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

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

  .opt1-column p,
  .opt2-column p {
    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;
  }

  /* Strafford Image */
  .bottom-image {
    background-image: url("../assets/images/LB_Municipal_Photo_5.JPG");
  }
}

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

  .attract-header h2 {
    font-size: var(--heading-two-desktop);
  }

  p.uk-padding-small {
    font-size: var(--para-desktop) !important;
  }

  /* Advertising Budget Section */
  .budget-header h2 {
    font-size: var(--heading-two-desktop);
  }
  .opt-subtitle{
    font-size: var(--heading-two-tablet);
  }
  .opt-image {
    max-width: 40%;
  }

}