#content_bg{
  background-image:url(../images/gallery/bg.jpg);
}

#submenu{
  /*display:none;*/
}

#submenu nav>*{
  width:30%;
}

/*.check:after{
  font-size:90%;
}*/



/*----MOVIES-----*/
#movies{
  margin:10% 0;
}

#movies .movie{
  display:block;
  float:left;
  padding:1.5%;
  background-color:rgba(255,255,255,0.8);
  text-decoration:none;
  line-height:1.3;
  text-shadow: none;
  border:1px #FFF solid;
  box-shadow:3px 3px 0 rgba(0,0,0,0.2);
  position:relative;
}


#movies .level1{
  width:99%;
  margin:0.5%;
}
#movies .level2{
  width:49%;
  margin:0.5%;
}

#movies .level3{
  width:32.3%;
  margin:0.5%;
}

#movies .movie img{
  display:block;
  width:100%;
}

#movies .movie .youtube{
  background-color:#000;
}

#movies .movie time{
  font-size:80%;
  color:#663535;
}
#movies .movie h4{
  color:#692828;
  margin:0;
  padding:0;
  margin-top:2%;
}

#movie_selecter{
  display: flex;
  flex-flow: row wrap;
  width:100%;
}

#movie_selecter a{
  display:inline-block;
  width:31.2%;
  margin:1%;
  margin-top:40px;
  font-size:80%;
  color:#111;
  text-decoration:none;
  /*overflow: hidden;*/
  text-align:center;
}
#movie_selecter a img{
  width:100%;
}
#playmovies,
#actionmovies{
  display: flex;
  flex-flow: row wrap;
  width:100%;
  font-size:80%;
}
#playmovies a,
#actionmovies a{
  margin:1%;
  display:inline-block;
  text-align:center;
  color:#000;
  text-decoration: none;
}

#playmovies a{
  width:31.2%;
}

#actionmovies a{
  width:23%;
}

/*#playmovies a.check:after,
#actionmovies a.check:after{
  font-size:50%;
  transform:rotate(-45deg) translate(-31%,-157%);
}*/

#playmovies a img,
#actionmovies a img{
  width:100%;
  display:block;
}


/*--SCREENSHOT---*/
.screenshot{
  display:flex;
  flex-flow: row wrap;
  margin:10% auto;
  font-size:80%;
}


.screenshot .ss{
  width:24.5%;
  margin:0.2%;
}
.screenshot a{
  display:block;
  width:100%;
  line-height:1.3;
  color:#111;
  margin-bottom:20px;
  font-size:90%;
}

/*.screenshot a{
  line-height:1.3;
  color:#111;
  margin-bottom:20px;
  font-size:90%;
}*/

@media screen and (max-width:640px){
  .screenshot .ss{
    width:32.9%;
  }
}

@media screen and (max-width:459px){
  .screenshot .ss{
    width:49%;
  }
}



/*-Music-*/

#musics{
	margin:120px auto 100px;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#musics .check:after{
  font-size:75%;
}

.music{
	width:32.5%;
	background-color:#000;
	border:1px #222 solid;
	margin:0.2%;
	display:block;
  text-shadow:none;
  vertical-align:bottom;
  position:relative;
  overflow:hidden;
}

.music .music_bg{
  margin:0;
  padding:0;
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  z-index:0;

  filter:grayscale(70%) contrast(180%);
  transform:scale(1);
  opacity:0.7;

  transition:filter 0.5s,opacity 0.5s,transform 0.5s;
  -ms-transition:filter 0.5s,opacity 0.5s,transform 0.5s;
}

.music .music_bg:after{
  content:"";
  display: block;
  position:absolute;
  top:0;
  left:0;bottom:0;right:0;
  box-shadow:0 0 50px rgba(0,0,0,0.7) inset;

  transition:box-shadow 0.5s;
  -ms-transition:box-shadow 0.5s;
}

.music .music_bg img{
  width:100%;
}

.active .music_bg{
  filter:grayscale(0%) contrast(100%);
  transform:scale(1.1);
  opacity:1;

  transition:filter 0.5s,opacity 0.5s,transform 0.5s;
  -ms-transition:filter 0.5s,opacity 0.5s,transform 0.5s;
}

.active .music_bg:after{
  box-shadow:none;

  transition:box-shadow 0.5s;
  -ms-transition:box-shadow 0.5s;
}


.music .display{
  padding:8px;
  position:relative;
  z-index:1;
  margin-top:45%;
}
.music .button-ui{
	display:block;
	overflow:hidden;
  background:linear-gradient(to bottom,#FFF,#888);
	position:relative;
  text-decoration:none;
  color:#000;
  text-shadow:1px 1px 0 rgba(255,255,255,0.7);
  line-height:62px;
  text-align:center;
  box-shadow:0 0 2px #FFF inset,0 0 3px rgba(0,0,0,0.4);

	width:30%;
	height:62px;
  border-radius:5px;
	float:left;
}

.active .button-ui{
  background:linear-gradient(to bottom,#FFF,#c9b77e);
}

.music .music-name{
	display:block;
	width:67%;
	float:left;
	text-align:left;
	margin-left:3%;
	margin-top:1%;

	font-size:12px;
	line-height:1.7;
	color:#CCC;
}

.music .music-name .marquee{
	font-size:150%;
	color:#FFF;
	display:block;
	margin:0;
	width:100%;
  white-space:nowrap;
  overflow:hidden;
}

.music .music-name .marquee span{
  display:block;
  white-space:nowrap;
}

.active .music-name .marquee span{
  animation: marquee 8s linear infinite;
}

@keyframes marquee{
  0%{
    margin-left:100%;
  }
  100%{
    margin-left:-100%;
  }
}






@media screen and (max-width:800px){
  #musics{
		margin:30px auto;
	}
	.music{
		width:49.3%;
    margin-bottom:2%;
	}
  .music .display{
    background-color:rgba(0,0,0,0.7);
  }
	.music .button-ui{
		height:44px;
    line-height:44px;
	}
	.music .music-name{
		font-size:10px;
		margin-top:0;
	}
}

@media screen and (max-width:480px){
	.music{
		width:100%;
	}

  .music .display{
    margin-top:30%;
  }
}