@charset "UTF-8";
/* CSS Document */

body { margin: 0; font-size: 14px; letter-spacing: 0.1em; font-family: 'Questrial', sans-serif; }
img { max-width: 100%; }


.grid-box { display: grid; grid-template-columns: 50px 250px 50px 1fr; grid-template-rows: 50px 25vh 1fr 50px; height: 100vh; grid-gap: 0px; overflow: hidden; }

.bg-image { grid-column: 1 / -1; grid-row: 1 / 2; }
.bg-image img { object-fit: cover; height: 100vh; width: 100vw; }
.logo { grid-column: 2 / 3; grid-row: 2; z-index: 2;  } 
.content { grid-column: 2 / 3; grid-row: 3; z-index: 2; display: grid; align-content: end; color: #FFFFFF; } 
.sidebar { grid-column: 1 / 4; grid-row: 1 / -1; background-color: rgba(0, 0, 0, 0.4); z-index: 1; }
address { font-style: normal; }

.wrapper { height:1000px; }


  @media only screen and (max-width: 768px)  
  {
    .grid-box { grid-template-columns: 40px 200px 40px 1fr; grid-template-rows: 40px 50vh 185px 1fr; }
    .content { align-content: center;  }  
    .sidebar { grid-column: 1 / 4; grid-row: 3 / 4; }
    }