/* Scss Document */
ul, li {
  list-style: none;
  padding: 0;
  margin: 0; }

img {
  vertical-align: bottom; }

.main-wrapper {
  max-width: 600px;
  margin: 0 auto; }

.main-image-wrapper {
  max-width: 600px;
  padding: 0 10px; }
  .main-image-wrapper .main-image {
    width: 100%;
    margin-bottom: 16px; }

.flexbox {
  display: flex;
  justify-content: space-around; }

.nav-btn-wrapper {
  max-width: 600px;
  margin-bottom: 16px; }
  .nav-btn-wrapper .nav-btn {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin: 0 10px;
    font-weight: 700;
    cursor: pointer;
    user-select: none; }
    .nav-btn-wrapper .nav-btn:hover {
      background-color: #F1D411; }
  .nav-btn-wrapper .play {
    width: 280px; }
  .nav-btn-wrapper .next, .nav-btn-wrapper .prev {
    width: 140px; }

.thumbnails {
  max-width: 600px;
  flex-wrap: wrap; }
  .thumbnails .thumb-list {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    opacity: .5; }
    .thumbnails .thumb-list:hover {
      opacity: 1; }
  .thumbnails .current {
    opacity: 1; }
  .thumbnails .thumb-images {
    width: 100%; }