.MOVIEcontainer{display:grid;grid-template-columns: 1.5fr 1fr;grid-template-areas: "Mplayer Moption""Mtitle Mdate ""Mcaption Mcaption";max-height:600px;border-style:solid;border-color:silver;}
.MOVIEtitle{grid-area: Mtitle;text-align:center;font-weight:bold;padding:10px;}
.MOVIEdate{grid-area: Mdate;text-align:center;font-style:italic;padding:10px;}
.MOVIEvideo{grid-area: Mplayer;background-image: url("https://www.hegganlibrary.org/img/special/treesbgE.PNG");background-repeat:repeat;background-position:center center;background-size:auto;background-attachment:fixed;background-size: cover;position: relative;overflow: hidden;min-height:250px;}
.MOVIEcaption{grid-area: Mcaption;padding:25px;}
.MOVIEselector{grid-area: Moption;overflow:auto;background-color:#e99db2;max-height:500px;}
.MOVIEplayer{width:100%;height:100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit:contain;min-height:250px;}
.MBUTTONcontainer{display:grid;grid-template-columns: 1fr 3fr;grid-template-areas: "MBthumb MBheader";}
.MBUTTONthumbnail{grid-area: MBthumb;}
.MBUTTONheader{grid-area: MBheader;font-weight:bold;color:white;padding:5px;margin-top: auto;margin-bottom: auto;}
img.MBUTTONthumb{width:100%;}
button.MBUTTON{width:100%;background-color: #b30737;padding:2px;border-radius:0px;border-color:#ed1e58;border-width:1px;border-style:solid;}
button.MBUTTON:hover{background-color:#ed1e58;}
p:empty {display: none;}
@media(max-width:900px){
	.MOVIEcontainer{display:grid;grid-template-columns:1fr 1fr;grid-template-areas: "Mplayer Mplayer""Mtitle Mdate""Mcaption Mcaption""Moption Moption";max-height:initial;}
	.MOVIEplayer{max-height:300px;position: absolute; top: 0; left: 0; height: 100%; transform: none;}
	.MOVIEselector{max-height:250px;}
	.MOVIEvideo{padding-bottom: 56.25%;poisiton: relative;max-height:350px;}
}