.modal object { width:100vw; height:100vh; overflow:scroll; }


/* ==== modal ==== */
.modal { height:100vh; }
.modal-xxl { max-width:none; margin:0; }
.modal .btn-close { cursor:url('../../i/cursors/crsr-point.png'),default; color:#000; font-size:22px; line-height:1; position:fixed; z-index:99; right:35px; top:35px; background:#FFF; border-radius:50%; padding:10px; text-align:center; opacity:1; -webkit-box-shadow:0 0 10px rgb(0,0,0,0.2); box-shadow:0 0 10px rgb(0,0,0,0.2); }
.modal .btn-close.btn-dark { color:#FFF; background-color:#000; }
.modal .btn-close i { position:relative; }
.modal-content, .modal-content blockquote { font:normal normal 11px/1.8 'JetBrains Mono',serif; }
.modal-content a { text-decoration:none; }
.modal-content a::after { content:''; background:#A7884E; height:1px; width:100%; position:absolute; bottom:3px; left:0;  }
.modal-content .source { font:normal normal 11px/1.8 'JetBrains Mono',Helvetica,Arial,sans-serif; }
.modal-content .source b { text-transform:uppercase; letter-spacing:1px; font-size:10px; color:orange; }
.modal-header .card { position:absolute; z-index:80; background-color:#000; width:400px; padding:60px; color:#fff; }
.modal-fullwidth { margin:0; }
.modal-fullwidth .modal-header { height:100vh; margin:0; padding:0; border:none; }
.modal-fullwidth .modal-header .modal-title { color:#FFF; font:normal 700 32px/1.4 'Work Sans',Helvetica,Arial,sans-serif; margin-bottom:0; }
.modal-fullwidth .modal-header h2 { font:normal normal 18px/1.4 'Palatino',serif; }
.modal-fullwidth .modal-header #pub-meta { line-height:1.4; font-size:9px; }
.modal-fullwidth .modal-header .subtitle { font:normal 700 10px/1 'Work Sans',Helvetica,Arial,sans-serif; text-transform:uppercase; margin-bottom:10px; }
.modal iframe { width:100%; height:100%; }
.modal-content { background-color:transparent; border-radius:0; border:none; color:#fff; }
.modal-content, .modal-header, .modal-footer { border:none; display:block; }
.modal-body ul { list-style:none; margin:0; padding:0; }
.modal-body ul li { list-style:none; margin:0; padding:0; }
.modal-body ul li img { width:100%; }	
	

/* ==== about ==== */
#about { height:100vh; background:#0E1919; }
#about h1 { font-size:46px; line-height:1; text-align:left; }
#about h1 .font-compendium { font-size:56px; }
#about figure { height:calc(100vh - 41px); overflow:hidden; }
#about .inner { top:50%; transform:translate(-50%,-40%); }
#about .inner { max-width:1320px; width:90%; }
#about .modal-content, #about .modal-dialog { height:100%;}
#about .modal-content h1 { font-size:32px; line-height:1.1; margin-bottom:20px; }
#about .modal-dialog, #about .modal-content h1 a { position:relative; }
#about .modal-content p { font-size:10px; line-height:2; font-family:'Work Sans',Helvetica,Arial,sans-serif; text-transform:uppercase; }


/* ==== intro ==== */
#intro h1 { font-size:44px; margin:0; padding:0; color:slategray; }
#intro h1 .font-compendium { font-size:72px; }
#intro h1 a { text-decoration:none; display:inline-block; color:#fff; }
#intro h1 a::after { content:''; display:block; height:1px; width:100%; background-color:#fff; }
#intro .modal-content { padding:70px; border-radius:10px; border-width:0.5px; border-style:solid; padding:70px; }
#intro button { position:absolute; top:25px; right:25px; color:#fff; font-size:21px; }


/* ==== animation ==== */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes rotate {
  0% {
	-webkit-transform: rotate(0deg), translate(-50%,-50%);
    transform: rotate(0deg);
  }

  100% {
	-webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}