.container {
  display: flex;
	
  .thumbnail, .thumbnail2 {
    cursor: pointer;
	border: solid 1px #000000;
  }

  .thumbnail2 {
	width: 95%;
  }
	
  .thumbnail:hover, .thumbnail2:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
  }
	
  .thumbnail2:first-child {
    margin-right: 10px;
  }
	
  .thumbnail2:last-child {
    margin-left: 10px;
  }
	
  #modal-video {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    transition: .5s;
    &.close {
      filter: opacity(0);
      visibility: hidden;
    }
    &.open {
      filter: opacity(1);
      visibility: visible;
    }
    iframe {
      width: 64vw;
      height: 36vw;
    }
	}
}

	
@media screen and (max-width:767px) {
	
.container {
  display: flex;
	
  .thumbnail, .thumbnail2 {
    cursor: pointer;
	border: solid 1px #000000;
  }

  .thumbnail2 {
	width: 100%;
  }
	
  .thumbnail:hover, .thumbnail2:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
  }
  #modal-video {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    transition: .5s;
    &.close {
      filter: opacity(0);
      visibility: hidden;
    }
    &.open {
      filter: opacity(1);
      visibility: visible;
    }
    iframe {
      width: 100vw;
      height: 56vw;
    }
}
	
}