/* ---- Style Sheet for Video Indices on Beetle63.com ---- */
html {box-sizing: border-box}
body {
   width: 100%;
   background-image: url('https:///beetle63.com/images/bkgs/rim15.jpg');
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
}
#content {
   position: relative;
   top:30px;
   width: 80%;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 120px;
}
h1 {
   margin: 0;
	margin-left: auto;
   margin-right: auto;
   width: 60%;
   padding: 2px 12px;
   font: normal small-caps 2.5vw "Georgia", serif;
	background-color:#007171; 
	color: #ff0;
	text-align: center;
	border: 4px double #ff0;
  	box-shadow: 4px 6px #666;
}
h2 {
   margin-top: 20px;
   width: 30%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;   
   padding: 4px 20px;
   font: 1.8vw "Georgia", serif;
   background-color:#ccc; 
	color: #000;
	text-align: center;
	border: 2px solid #000;
  	box-shadow: 4px 6px #666;
}
p {
   margin: 0;
   padding: 14px 40px 0 40px;
   font: 1.8vw "Georgia", serif;   
	color: #000;
	text-align: justify;
}
.row {
   width: 80%;
   height: auto;
   margin-top: 0;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0;
   padding: 0;
   background-color: #ddd;
   border-left: 2px solid #000;
   border-right: 2px solid #000;
   box-shadow: 4px 0 #666;
}
.row p {font-size: 1.6vw;}
.row:first-child {
   border-top: 2px solid #000;
   padding-top: 4px;
   box-shadow: 4px 0 #666;
}
.row:last-child {
   border-bottom: 2px solid #000;
   padding-bottom: 4px;
  	box-shadow: 4px 6px #666;
}
.avatar {
   float: left;
   margin: 2px 20px 2px 6px;
   width: 170px;
   height: 120px;
   cursor: pointer;
   border: 2px solid #000;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
#modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
}
#modal-content {
   margin-top: 40px;
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
}
video {
   width: 100%;
   height: auto;
}
@media only screen and (max-width: 800px) {
   #modal-content {margin-top: 100px;}
}

.closer {
   position: absolute;
   top: 10px;
   right: 35px;
   color: #f00;
   font-size: 60px;
   font-weight: normal;
   animation-name: zoom;
   transition: 1s; z-index: 5;
}
.closer:hover {
   color: white;
   text-decoration: none;
   font-weight: bold;
   cursor: pointer;
}
.animated {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 1s;
  animation-name: zoom;
  animation-duration: 1s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* For Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
   #content {width: 100%;}
   p {font-size: 3vw;}
}


footer {  
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    text-align: center;
    color: yellow;
    background-color: #000;
    border-top: 3px double yellow;
}