.wrapper {
  display: grid;
  grid-template-columns: auto 90vw auto;
  grid-template-rows: auto 45vw auto;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.wrapper > div {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.wrapper > div:nth-last-of-type(-n+3) {
  border-bottom: none;
}

.wrapper > div:nth-of-type(3n+0) {
  border-right: none;
}

.main {
  grid-column: 2;
  grid-row: 2;
  display: grid; 
  grid-template-columns: repeat(6, 15vw);
  grid-template-rows: repeat(17, 15vw);
  overflow-y: scroll;
  grid-template-areas: 
    "home logo logo title title title"
    "desc ov ov ch ch ch"
    "desc ov ov ch ch ch"
    "desc pic1 pic1 vi vi pic2"
    "desc pic1 pic1 vi vi bl1"
    "bl2 bl2 bl2 pic3 pic3 pic3"
    "bl3 br br pic3 pic3 pic3"
    "bl3 br br bl4 bl4 bl4"
    "bl3-1 bl3-1 bl3-1 bl4-1 bl4-1 pic4"
    "pic5 pic5 bl3-2 ex ex bl4-2"
    "pic5 pic5 bl3-2 ex ex bl4-2"
    "pic5 pic5 bl3-6 pic6 pic6 pic6"
    "bl3-3 bl3-3 bl3-3 pic6 pic6 pic6"
    "bl3-3 bl3-3 bl3-3 bl5 bl5 bl5"
    "bl3-4 bl3-4 pic7 pic7 pic7 bl5-1"
    "pic8 bl3-5 pic7 pic7 pic7 bl5-1"
    "ad ad ad ad ad ad";
}

.main::-webkit-scrollbar {
  display: none;
}

.home,
.logo,
.back,
.next,
.desc,
.ov,
.pic1,
.vi {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.title,
.ch,
.pic2, 
.bl1 {
  border-bottom: 1px solid black;
}

.home {
  grid-area: home;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vw;
  background-color: #f6f5ef;
}

.home:hover {
 background-color: #00a6ef;
 color: #ffffff;
}

/* .back  {
  grid-area: back;
  position: relative;
}

.back > p {
  position: absolute;
  left: 2.5vw;
  bottom: 2.5vw;
}

.back > .arrow {
  transform: rotateY(180deg);
  width: 4.5vw;
  position: absolute;
  left: 2.5vw;
  bottom: 7vw;
  z-index: 1;
} */

.logo  {
  grid-area: logo;
  position: relative;
  display: flex;
}

.logo img {
  width: 100%;
}

.logo .hov {
  display: none;
}

.logo:hover > .hov {
  display: block;
}

.logo:hover > .def {
  display: none;
}

.title  {
  grid-area: title;
  position: relative;
  display: flex;
  align-items: center;
  padding: 2.5vw;
}

.title > p {
  position: absolute;
  bottom: 2.5vw;
  font-family: 'Object Sans Regular';
}

/* .next  {
  grid-area: next;
  position: relative;
}

.next > p {
  position: absolute;
  right: 2.5vw;
  bottom: 2.5vw;
}

.next > .arrow {
  width: 4.5vw;
  position: absolute;
  right: 2.5vw;
  bottom: 7vw;
  z-index: 1;
} */

.desc  {
  grid-area: desc;
  padding: 2.5vw 2.5vw;
}

.desc-pair {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5vw;
}

.desc-pair h5 {
  margin-bottom: 0.9vw;
}

.desc-pair a {
  font-size: 0.9vw;
}

.desc-pair a:hover {
  text-decoration: underline;
}

.desc-pair a:after {
  padding-left: 2px;
  content: "\2197"; /* Unicode hex for » */
}

.ptnr-pair {
  display: flex;
  flex-direction: column;
  margin-bottom: 1vw;
}

.ptnr-pair h4 {
  margin-bottom: 0.4vw;
}

.ov {
  grid-area: ov;
}

.ov, 
.ch, 
.vi,
.br,
.ex {
  padding: 3.3vw 2.5vw;
}

.ov h2,
.ch h2,
.vi h2,
.br h2,
.ex h2 {
  margin-bottom: 3.3vw;
}

.ov p,
.ch p,
.vi p,
.br p,
.ex p {
  margin: 2vw 0 0 0;
}

p a:hover {
  text-decoration: underline;
}

p a:after {
  padding-left: 2px;
  content: "\2197"; /* Unicode hex for » */
}

.ch {
  grid-area: ch;
}

.pic1  {
  grid-area: pic1;
  background-image: url("../images/skydeck/Skydeck_Photo\ 2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.vi {
  grid-area: vi;

}

.pic2  {
  grid-area: pic2;
  background-image: url("../images/skydeck/Skydeck_Photo\ 1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bl {
  background-color: #1f1e1f;
}

.bl1 {
  grid-area: bl1;
}

.bl2  {
  grid-area: bl2;
  border-bottom: 1px solid white;
}

.pic3  {
  grid-area: pic3;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bl3  {
  grid-area: bl3;
}

.bl3-1  {
  grid-area: bl3-1;
  border-right: 1px solid #ffffff;
}

.bl3-2  {
  grid-area: bl3-2;
  border-right: 1px solid #ffffff;
}

.bl3-3  {
  grid-area: bl3-3;
}

.bl3-6 {
  grid-area: bl3-6;
}

.bl3-4  {
  grid-area: bl3-4;
}

.bl3-5  {
  grid-area: bl3-5;
}

.br {
  grid-area: br;
  color: #ffffff;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

.bl4  {
  grid-area: bl4;
}

.bl4-1  {
  grid-area: bl4-1;
  border-bottom: 1px solid #ffffff;
}

.bl4-2  {
  grid-area: bl4-2;
}

.pic4  {
  grid-area: pic4;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.pic5  {
  grid-area: pic5;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.ex {
  grid-area: ex;
  color: #ffffff;
  border-right: 1px solid #ffffff;
}

.pic6  {
  grid-area: pic6;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bl5  {
  grid-area: bl5;
  border-left: 1px solid #ffffff;
}

.bl5-1  {
  grid-area: bl5-1;
}

.pic7  {
  grid-area: pic7;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 5.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.pic8  {
  grid-area: pic8;
  background-image: url("../images/skydeck/Skydeck_Portfolio\ 6.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.ad {
  grid-area: ad;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header"
    "bw np"
    "cs blank";
}

.ad > div,
.ad > a {
  display: flex;
  align-items: center;
  padding-left: 2.5vw;
}

.ad > a {
  position: relative;
}

.ad > a:hover h3 {
  font-family: 'Agrandir Grand Light';
  color: #ff4800;
}

.wld {
  display: none;
  position: absolute;
  right: 2.5vw;
}

.wld h6 {
  color: #ff4800;
  border: 1px solid #ff4800;
  background: rgba(246, 245, 239, 0.5);
  padding: .6vw;
  border-radius: 2.5em;
  float: right;
  box-sizing: border-box;
  margin: 0 1vw 0 0;
  text-transform: uppercase;
}

.ad > a:hover .wld {
  display: block;
  transition: all 0.5s ease-in-out;
}

.header {
  grid-area: header;
  border-bottom: 1px solid #000000;
  border-top: 1px solid black;
}

.bw {
  grid-area: bw;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  background-color:#f6f5ef;
}

.np {
  grid-area: np;
  border-bottom: 1px solid black;
  background-color:#f6f5ef;
}

.cs {
  grid-area: cs;
  border-right: 1px solid black;
  background-color:#f6f5ef;
}

.blank {
  grid-area: blank;
  background-color:#f6f5ef;
}

.six {
  position: relative;
}

.copyright {
  position: absolute;
  transform: rotate(90deg);
  width: 11.5vw;
  right: -2vw;
  bottom: 3vw;
  font-family: 'Object Sans Thin';
  font-size: .9vw;
  line-height: 1.5vw;
}