@import url('../../../css/information.css');

@font-face {
	font-family: 'Poppins';
	src: url('../../../fonts/Poppins/Poppins-Light.ttf') format('truetype');
}

.information-page-title {
    color: var(--information-mobile-title-text-color);
    text-align: center;
    font-size: 1.85rem;
}

.information-page-content {
    height: 90vh;
    display: grid;
    grid-template-columns: 69% 31%;
}

.information-page-content .information-page-content-info {
    grid-column: 1;
    padding: 7%;
}

.information-page-content .information-page-content-photo {
    grid-column: 2;
}

.information-page-content .information-page-content-info .information-page-content-support {
    font-size: 1.3em;
    font-weight: 800;
}

.information-page-content .information-page-content-info .information-page-content-text {
    color: var(--information-mobile-text-color);
    text-align: center;
    font-size: 1.2em;
}

/* information-page-content column 2 */
.information-page-content .information-page-content-photo {
  width: 100%;
  margin-top: 4%;
  margin-bottom: 4%;
  display: grid;
  grid-template-columns: 6.65% 86.7% 6.65%;
}

/* information-page-content-photo center column */
.information-page-content .information-page-content-photo .information-page-photo {
  grid-column: 2;
  height: 34.5cqi;
  color: var(--information-post-img-photo-text-color);
  padding: 1%;
  margin: 0%;
  border-radius: 6.4px;
  display: grid;
  grid-template-rows: 70% 10% 20%;
  border-left: 1px solid var(--information-mobile-post-img-photo-bcolor);
  border-bottom: 1px solid var(--information-mobile-post-img-photo-bcolor);
  border-top: 1px solid var(--information-mobile-post-img-photo-bcolor);
  border-right: 1px solid var(--information-mobile-post-img-photo-bcolor);
}

/* information-page-photo row 1 */
.information-page-content .information-page-content-photo .information-page-photo .post-img-photo {
  font-size: 2.4em;
  padding: 0.2px;
  border-radius: 7px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}
/* information-page-photo row 2 */
.information-page-content .information-page-content-photo .information-page-photo .post-img-footer {
  font-size: 1cqi;
  padding: 5.22px !important;
  text-align: center;
  color: var(--information-mobile-post-img-photo-footer-text-color);
}

.information-page-content .information-page-content-photo .information-page-photo .post-img-footer .post-fp-dot {
  color: var(--fp-dot);
  font-size: 16.18px !important;
}

/* information-page-photo row 3 */
.information-page-content .information-page-content-photo .information-page-photo .post-content-text {
  font-size: 1cqi;
  padding: 5.22px;
  text-align: center;
}

@media ( orientation: portrait ) {
    body {
        font-family: Poppins !important;
        background-color: var(--landing-background-color) !important;
        color: var(--landing-text-color) !important;
        overflow-x: hidden;
        display: grid;
        grid-template-rows: 8% 92%;
        justify-items: center;
	    align-items: center;
        text-align: center;
    }

    /* body row 1 */
    .landing-page-title {
        grid-row: 1;
        font-size: 1.5rem;
        text-transform: uppercase;
        color: var(--landing-title-text-color);
        text-align: center;
    }

    /* body row 2 */
    .landing-page-content {
        grid-row: 2;
        vertical-align: middle;
        grid-template-rows: 60% 40%;
        justify-items: center;
	    align-items: center;
    }

    /* landing-page-content: row 1 */
    .landing-page-content .landing-page-content-info {
        grid-row: 1;
        line-height: 2;
        padding: 10px;
        text-align: center;
    }

    .landing-page-content .landing-page-content-info .landing-page-content-text{

    }

    .landing-page-content .landing-page-content-info .landing-page-content-buttons{
        display: grid;
        grid-template-columns: 60% 40%;
        justify-items: center;
	    align-items: center;
        margin: 15px 0px 15px 0px;
    }

    .landing-page-content .landing-page-content-info .landing-page-content-buttons .btn{
        font-family: inherit;
        font-size: 1em;
        padding: 5px 7px 5px 7px;
        border: 1px solid var(--landing-btn-bcolor);
        border-radius: 7px;
        background-color: var(--landing-btn-icon-color);
        color: var(--landing-btn-text-color);
    }

    /* landing-page-content: row 2 */
    .landing-page-content .landing-page-content-photo {
        grid-row: 2;
        width: 100%;
        border-radius: 6.4px;
        display: grid;
        grid-template-columns: 15% 70% 15%;
    }

    /* landing-page-content-photo: row 2 - landing-page-content-photo empty rows: 1, 3 */
    .landing-page-content .landing-page-content-photo .landing-page-photo {
        grid-column: 2;
        padding: 1%;
        background-color: var(--landing-post-img-photo-background-color);
        border: 1px solid var(--landing-post-img-photo-bcolor);
        color: var(  --landing-post-img-photo-text-color  );
        height: 72cqi;
        text-align: center;
        display: grid;
        grid-template-rows: 64% 10% 26%;
    }

    /* landing-page-photo row 1 */
    .landing-page-content .landing-page-content-photo .landing-page-photo .post-img-photo {
        grid-row: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* landing-page-photo row 2 */
    .landing-page-content .landing-page-content-photo .landing-page-photo .post-img-footer {
        font-size: 0.7em !important;
        color: var(--landing-post-img-photo-footer-text-mobile-color)
    }

    .landing-page-content .landing-page-content-photo .landing-page-photo .post-img-footer .post-fp-dot {
        color: var(--fp-dot);
        font-size: 16.18px !important;
    }

    /* landing-page-photo row 3 */
    .landing-page-content .landing-page-content-photo .landing-page-photo .post-content-text {
        font-size: 3cqi !important;
    }
    
}

@media ( orientation: landscape ) {
    body {
        font-family: Poppins !important;
        background-color: var(--landing-background-color) !important;
        color: var(--landing-text-color) !important;
        overflow-x: hidden;
        display: grid;
        grid-template-rows: 8% 92%;
        justify-items: center;
	    align-items: center;
        text-align: center;
    }

    /* body row 1 */
    .landing-page-title {
        grid-row: 1;
        font-size: 1.5rem;
        text-transform: uppercase;
        color: var(--landing-title-color);
        text-align: center;
    }

    /* body row 2 */
    .landing-page-content {
        grid-row: 2;
        display: grid;
        grid-template-columns: 61.618% 38.382% !important;
    }

    /* landing-page-content column 1  */
    .landing-page-content .landing-page-content-info {
        grid-col: 1;
        line-height: 2;
        padding: 10px;
        text-align: left;
    }

    .landing-page-content .landing-page-content-info .landing-page-content-text{
        font-size: 0.96em ;
    }

    .landing-page-content .landing-page-content-info .landing-page-content-buttons{
        display: grid;
        grid-template-columns: 60% 40%;
        justify-items: center;
	    align-items: center;
        margin: 15px 0px 15px 0px;
    }

    .landing-page-content .landing-page-content-info .landing-page-content-buttons .btn{
        font-family: inherit;
        font-size: 1em;
        padding: 5px 7px 5px 7px;
        border: 1px solid var(--landing-btn-bcolor);
        border-radius: 7px;
        background-color: var(--landing-btn-icon-color);
        color: var(--landing-btn-text-color);
    }

    /* landing-page-content column 2  */
    .landing-page-content .landing-page-content-photo {
        grid-col: 2;
        width: 80% !important;
        height: 70vh !important;
        background-color: var(--landing-post-img-photo-background-color);
        border: 1px solid var(--landing-post-img-photo-bcolor);
        color: var(--landing-post-img-photo-text-color);
        padding: 1%;
        margin-left: 6%;
        margin-bottom: 8%;
        border-radius: 6.4px;
        text-align: center;
        display: grid;
        grid-template-rows: 67% 11% 22%;
    }

    .landing-page-content .landing-page-content-photo .landing-page-photo {
        
    }

    .landing-page-content .landing-page-content-photo .post-img-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .landing-page-content .landing-page-content-photo .post-img-footer {
        font-size: 1.2cqi !important;
        color: var(--landing-post-img-photo-footer-text-mobile-color);
    }

    .landing-page-content .landing-page-content-photo .post-img-footer .post-fp-dot {
        color: var(--fp-dot);
        font-size: 16.18px !important;
    }

    .landing-page-content .landing-page-content-photo .post-content-text {
        font-size: 1.2cqi !important;
    }

    .footer{
        display: none;
    }
}