body { margin: 0; padding: 0; border: 0; } iframe { width: 100%; height: 100%; border: none; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: auto; margin-top: 2%; /* 15% from the top and centered */ padding: 10px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ min-height: 50px; } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } #epTitle{ text-align: center; } .showDiv{ margin: 5px; } .myBtn { width: 19vw; } .myBtn:hover { filter: brightness(30%); } @media only screen and (max-width: 768px) { .myBtn { height:auto; width: 45vw; } } .video_player{ width: 60%; width: calc(60% - 5px); margin-left: 20%; } .showEpUl{ display: none; list-style-type: none; padding: 0; margin: 0; } .epButton{ border: none; width: 100%; margin: 0; padding: 0; background-color: #F0F0F0; } .epButton:hover { background-color: #999999; } .nextEpDiv { width: 100%; text-align: center; } .nextEpButton { margin: 0 auto; display: inline-block; } .prevEpButton { margin: 0 auto; display: inline-block; } .autoButtonLabel { margin: 0 auto; display: inline-block; } .autoButton { } #wrapper { display: flex; flex-wrap: wrap; justify-content: space-around; } #paddingDiv { content: ""; width: 0px; height: 0px; }