* {
  box-sizing: border-box;
}

/* html {
  cursor: url('crosshair.png'), auto;
} */

body {
  margin: 0;
  font-family: 'Hershey-Noailles-Times-Simplex-Light', serif;
  font-size: 16px;
  background-color: rgb(0, 0, 0);
  padding: 5px;
}

@font-face {
  font-family: 'Hershey-Noailles-Times-Simplex-Light';
  src: url('Hershey-Noailles-Times-Simplex-Light.otf');
  font-weight: normal;
  font-style: normal;
}

p {
  padding: 0px;
}

img,
video {
  max-width: 100%;
}

.clickable-image {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.enlarged-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.enlarged-image img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

iframe {
  width: 100vw;
}

a:link,
a:visited {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 20px;
}

a:hover {
  text-decoration: underline;
}

/* page styles */

/* railing */

#railing img {
  margin: px;
}

body#railing main {
  margin: 0px;
  display: grid;
  grid-template-columns: 5vw 90vw 10vw;
  grid-template-areas:
    ". r1 ."
    ". r2 ."
}

.r1 {
  grid-area: r1;
}

.r2 {
  grid-area: r2;
}

/* ceiling */

body#ceiling main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "b1 b2 b3 ."
    "b4 b5 b6 b7"
    ". . . b8";
}

.video-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 0;
  margin: 0;
  border: 0;
}

.ceiling {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.video-container {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.grid-item {
  padding: 0px;
  width: auto;
  align-items: left;
  justify-content: left;
  ;
}

/* turnstile */


/* securitybar */

#securitybar img {
  margin: px;
}

body#securitybar main {
  margin: 0px;
  display: grid;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-areas:
    ". i1 ."
    ". i2 ."
}

.i1 {
  grid-area: i1;
}

.i2 {
  grid-area: i2;
}

/* glasskey */

#glasskey img {
  margin: 0px;
}

body#glasskey main {
  margin: 0px;
  display: grid;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-areas:
    ". gk1 ."
    ". gk2 ."
}

.gk1 {
  grid-area: gk1;
}

.gk2 {
  grid-area: gk2;
}

/* ibeam */


#ibeam img {
  margin: ;
}

body#ibeam main {
  margin: ;
  display: grid;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-areas:
    ". i1 ."
    ". i2 ."
    ". . ."
}

.i1 {
  grid-area: i1;
}

.i2 {
  grid-area: i2;
}


/* glass */

#glassrailing img {
  margin: ;
}

body#glassrailing main {
  margin: ;
  display: grid;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-areas:
    "gr1 . grcaption7"
    "gr2 . grcaption6"
    "gr3 gr4 gr5";
}

.gr1 {
  grid-area: gr1;
}

.gr2 {
  grid-area: gr2;
}

.grcaption6 {
  grid-area: grcaption6;
}

.grcaption7 {
  grid-area: grcaption7;
}

.gr3 {
  grid-area: gr3;
}

.gr4 {
  grid-area: gr4;
}

.gr5 {
  grid-area: gr5;
}

/* door */

#door img {
  margin: px;
}

body#door main {
  margin: ;
  display: grid;
  grid-template-columns: 25vw 25vw 25vw 25vw;
  grid-template-areas:
    ". d1 . d2"
    "d3 . d4 ."
    "dcaption1 . . ."
}

.d1 {
  grid-area: d1;
}

.d2 {
  grid-area: d2;
}

.d3 {
  grid-area: d3;
}

.d4 {
  grid-area: d4;
}

.dcaption1 {
  grid-area: dcaption1;
}

/* long fence */

body#longfence main {
  margin: px;
    display: grid;
    grid-template-columns: 33.45vw 29vw 0.5vw 35.1vw 11vw;
    grid-template-areas:
        "lf1 lf1 . . ."
        "lf1 lf1 . lf2 ."
        "lf3 . . . .";}

.lf1 {
  grid-area: lf1;
}

.lf2 {
  grid-area: lf2;
}

.lf3 {
  grid-area: lf3;
}


/* bench */

body#bench main {
  margin: px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "b1 b2 b3 ."
    "b4 b5 b6 b7"
    ". . . b8";
}

#bench img {
  margin: 0;
  vertical-align: top;
}

.b1 {
  grid-area: b1;
}

.b2 {
  grid-area: b2;
}

.b3 {
  grid-area: b3;
}

.b4 {
  grid-area: b4;
}

.b5 {
  grid-area: b5;
}

.b6 {
  grid-area: b6;
}

.b7 {
  grid-area: b7;
}

.b8 {
  grid-area: b8;
}

/* .benchgif {
  position: relative;
  top: 60vh;
  left: -5vw;
  width: 23.8vw;
} */

/* billboard */

#billboard img {
  margin: 0px;
  vertical-align: top;
}

body#billboard main {
  margin: 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "c1 c2 c4 c3";
}

.c1 {
  grid-area: c1;
}

.c2 {
  grid-area: c2;
}

.c3 {
  grid-area: c3;
}

.c4 {
  grid-area: c4;
}

/* frazada */

#frazada video {
  margin: 0;
  vertical-align: top;
}

body#frazada main {
  margin: 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ". f1 f1"
    ". f1 f1";
}

.f1 {
  grid-area: f1;
}

/* fence */

#fence img {
  margin: 0;
  vertical-align: top;
}

body#fence main {
  margin: 0;
  justify-content: center;
  align-content: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
      "f1 f4"
      "f2 f5"
      "f7 .";
}

.f1 {
  grid-area: f1;
}

.f2 {
  grid-area: f2;
}

.f3 {
  grid-area: f3;
}

.f4 {
  grid-area: f4;
}

.f5 {
  grid-area: f5;
}

.f6 {
  grid-area: f6;
}

.f7 {
  grid-area: 7;
}

/* nails */

#nails video {
  margin: 0;
  vertical-align: top;
}

body#nails main {
  width: 850px;
  margin: auto;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "n1"
    "n2"
    "n3";
}

.n1 {
  grid-area: n1;
}

.n2 {
  grid-area: n2;
}

.n3 {
  grid-area: n2;
}

/* rockingchair */

#rocking video {
  margin: 0;
  vertical-align: top;
}

body#rocking main {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "r1 r3"
    "r2 ."
    "r4 .";
}

.r1 {
  grid-area: r1;
}

.r2 {
  grid-area: r2;
}

.r3 {
  grid-area: r3;
}

.r4 {
  grid-area: r4;
}

/* key */

#key img {
  margin: px;
}

body#key main {
  margin: ;
  display: grid;
  grid-template-columns: 15vw 30vw 10vw 30vw 15vw;
  grid-template-areas:
    " . . . . ."
    ". k2 . k1 ."
    ". caption7 . caption6 .";
}

.k1 {
  grid-area: k1;
}

.k2 {
  grid-area: k2;
}

.caption6 {
  grid-area: caption6;
}

.caption7 {
  grid-area: caption7;
}

/* library */

#library img,
#library iframe {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

body#library main {
  width: 100vw;
  margin: 0;
  justify-content: center;
  align-content: center;
  display: grid;
  grid-row-gap: 10px;
  grid-template-areas:
    "l1 l3 l2"
    "l4 l5 l6";
  grid-gap: 20px;
}

#library .row-item.l1 iframe,
#library .row-item.l2 iframe,
#library .row-item.l3 iframe {
  width: 100%;
  height: 300px;
  padding: 0;
  margin: 0;
}

.l1 {
  grid-area: l1;
}

.l2 {
  grid-area: l2;
}

.l3 {
  grid-area: l3;
}

.l4 {
  grid-area: l4;
}

.l5 {
  grid-area: l5;
}

.l6 {
  grid-area: l6
}

/* antennas */

body#antennas main {
  margin: 0;
  justify-content: center;
  align-content: center;
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  grid-template-areas:
    "a4 a3 a2"
    "a6 a5 a1";

}

.a1 {
  grid-area: a1;
}

.a2 {
  grid-area: a2;
}

.a3 {
  grid-area: a3;
}

.a4 {
  grid-area: a4;
}

.a5 {
  grid-area: a5;
}

.a6 {
  grid-area: a6;
}

/* spiral */

#spiral video {
  margin: 0px;
  vertical-align: middle;
}

body#spiral main {
  margin: 0px;
  /* display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "s1"; */
}

.s1 {
  grid-area: k1;
}

/* mdpls */

#MDPLS iframe {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
}

.video-library {
  height: 60vh;
}

/* media */

@media only screen and (max-width: 600px) {

  body#longfence main,
  body#securitybar main,
  body#glasskey main,
  body#ibeam main,
  body#glassrailing main,
  body#door main,
  body#ceiling main,
  body#railing main,
  body#fence main,
  body#rocking main,
  body#nails main,
  body#library main,
  body#bench main,
  body#billboard main,
  body#key main,
  body#frazada main,
  body#mdpls main,
  body#antennas main,
  body#spiral main {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .ceiling {
    display: block;
  }

  body#nails main {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .nails video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .keys img {
    display: block;

  }

  .clickable-image {
    cursor: default;
    pointer-events: none;
  }

  */
}