.modal {
    display: none; /* hidden by default */
    position: fixed; /* stay in place */
    z-index: 1; /* sit on top */
    padding-top: 100px; /* location of the box */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* enable scroll if needed */
    background-color: rgb(0,0,0); /* fallback color */
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* add animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.close{color:white;float:right;font-size:28px;font-weight:bold;}
.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;}

.modal-header,.modal-footer{padding:2px 16px;background-color:#fff;color:#000;}
.modal-body{padding:2px 16px;text-align:center;}

.modal-button{cursor:pointer;border:none;margin:8px;}

/* instructional media */
#pianoLit01Btn{background:url(../img/video/pianolit01.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#pianoLit02Btn{background:url(../img/video/pianolit02.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#pianoLit03Btn{background:url(../img/video/pianolit03.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#pianoLit04Btn{background:url(../img/video/pianolit04.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#pianoLit05Btn{background:url(../img/video/pianolit05.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#pianoLit06Btn{background:url(../img/video/pianolit06.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#listeningSkillsBtn{background:url(../img/video/listeningskills.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#socialJusticeBtn{background:url(../img/video/socialjustice.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#prideBtn{background:url(../img/video/pridekiki.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}

/* interviews */
#artstech01Btn{background:url(../img/video/artstech01.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstech02Btn{background:url(../img/video/artstech02.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstech03Btn{background:url(../img/video/artstech03.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstech04Btn{background:url(../img/video/artstech04.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstech05Btn{background:url(../img/video/artstech05.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstech06Btn{background:url(../img/video/artstech06.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#sustainableCommunityBtn{background:url(../img/video/sustainablecommunity.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#dcUserStories1Btn{background:url(../img/video/dcuseralexander.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#dcUserStories2Btn{background:url(../img/video/dcusergarcia.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}

/* explainers */
#hyperion01Btn{background:url(../img/video/hyperion01.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#hyperion02Btn{background:url(../img/video/hyperion02.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#jblFlexBtn{background:url(../img/video/jblflex.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#lewisBTSBtn{background:url(../img/video/lewisbts.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#vsOverviewBtn{background:url(../img/video/vsoverview.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}

/* social media videos */
#beilein01Btn{background:url(../img/video/coachbeilein01.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#beilein02Btn{background:url(../img/video/coachbeilein02.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#artstechinstaBtn{background:url(../img/video/artstechinsta01.jpg) no-repeat;background-size:240px 240px;height:240px;width:240px;}
#tanager01Btn{background:url(../img/video/tanager01.jpg) no-repeat;background-size:240px 240px;height:240px;width:240px;}
#tanager02Btn{background:url(../img/video/tanager02.jpg) no-repeat;background-size:240px 240px;height:240px;width:240px;}
#tanager03Btn{background:url(../img/video/tanager03.jpg) no-repeat;background-size:240px 240px;height:240px;width:240px;}

/* live music videos */
#ragtimeBtn{background:url(../img/video/ragtime.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#tanagerLiveBtn{background:url(../img/video/tanagerlive.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#ballarioBtn{background:url(../img/video/ballario.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#moaninFrogsBtn{background:url(../img/video/moaninfrogs.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#sitpBtn{background:url(../img/video/sitp.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#fallingDownstairsBtn{background:url(../img/video/fallingdownstairs.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#thenGhostsBtn{background:url(../img/video/thenghosts.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#beastlyBtn{background:url(../img/video/beastly.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}

/* mini-docs */
#noiseVoidBtn{background:url(../img/video/noisevoid.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#newMediaCenterBtn{background:url(../img/video/newmediacenter.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}
#learningSpaceBtn{background:url(../img/video/learningspace.jpg) no-repeat;background-size:320px 180px;height:180px;width:320px;}

/* text buttons */
#strangerBtn,#serendipityBtn,#inmyshoesBtn{
background:rgba(0,0,0,0.3);
border-radius:10px;
color:#fff;
font-size:1.4rem;
font-weight:700;
margin:0 auto;
outline:none;
padding:40px;
text-align:center;
}

/* @2x FOR RETINA DISPLAYS */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #pianoLit01Btn {background-image: url(../img/video/pianolit01@2x.jpg);}
  #pianoLit02Btn {background-image: url(../img/video/pianolit02@2x.jpg);}
  #pianoLit03Btn {background-image: url(../img/video/pianolit03@2x.jpg);}
  #pianoLit04Btn {background-image: url(../img/video/pianolit04@2x.jpg);}
  #pianoLit05Btn {background-image: url(../img/video/pianolit05@2x.jpg);}
  #pianoLit06Btn {background-image: url(../img/video/pianolit06@2x.jpg);}
  #artstech01Btn {background-image: url(../img/video/artstech01@2x.jpg);}
  #artstech02Btn {background-image: url(../img/video/artstech02@2x.jpg);}
  #artstech03Btn {background-image: url(../img/video/artstech03@2x.jpg);}
  #artstech04Btn {background-image: url(../img/video/artstech04@2x.jpg);}
  #artstech05Btn {background-image: url(../img/video/artstech05@2x.jpg);}
  #artstech06Btn {background-image: url(../img/video/artstech06@2x.jpg);}
  #hyperion01Btn {background-image: url(../img/video/hyperion01@2x.jpg);}
  #hyperion02Btn {background-image: url(../img/video/hyperion02@2x.jpg);}
  #beilein01Btn {background-image: url(../img/video/coachbeilein01@2x.jpg);}
  #beilein02Btn {background-image: url(../img/video/coachbeilein02@2x.jpg);}
  #artstechinstaBtn {background-image: url(../img/video/artstechinsta01@2x.jpg);}
  #tanager01Btn {background-image: url(../img/video/tanager01@2x.jpg);}
  #tanager02Btn {background-image: url(../img/video/tanager02@2x.jpg);}
  #tanager03Btn {background-image: url(../img/video/tanager03@2x.jpg);}
}