/**

**/
@media only screen and (min-width: 1921px) {
   #menu {
	   max-width: 2560px;
	   width: 100%;
	   margin: 0px auto;
	   padding: 10px 0px;
	   letter-spacing: -1em;
	   height:40px;
	}
	
	#menu li {
	  height: 30px;
	  line-height: 30px;
	  text-align: center;
	  letter-spacing: 0;
	  font-weight:bold;
	}
	.d{
		min-width:500px;
		height:350px;
	}
		
	#menu li a{
		font-size:24px;
	}
		
	h1{
		font-size:50px;
	}
	
	h3{
		font-size:35px;
	}
}


html{
	margin 0;
}

.mainImage{
	background-color:#fff;
}


#menu {
    width: 98%;
    margin: 0% auto 0% 2%;
    padding: 10px 0px;
    letter-spacing: -1em;
    height:30px;
}

#menu li {
    height: 25px;
    line-height: 25px;
    text-align: center;
    letter-spacing: 0;
    font-size:17px;
    font-weight:bold;
}

.categorys-label{
	float:left;
	width:15%;
	display: inline-block;
}
.artistMenu{
	float:left;
	width:65%;
	margin-left:5%;
	display: inline-block;
}

.artist-title{
	width:10%;
	font-size:19px;
	display: inline-block;

}

#not-link-title{
	width:3%;
	font-size:19px;
	display: inline-block;
}

#component-label{
	display: inline-block;
	margin-left:1%;
}

#component-label a{
	padding: 0px 10px;
	display: inline-block;
}

#menu li a {
    display: block;
    color: #333333;
    text-decoration: none;
    background: #FFF;
}

#menu li a:hover {
    background: #CCC;
}

#toggle {
    display: none;
}

.guid{padding-top:40px;}

	.content{
		float:left;
		width:90%;
		padding:0% 1% 1% 5%;
		margin:0% 1% 1% 5%;
	}

  .shotTextBox{
  	width:90%;
  	margin:0 5%;
  }
  
	.shotTextBox > h4{
		font-size:25px;
		font-weight:bold;
	}
	
	.shotTextBox > p{
		font-size:20px;
		font-weight:bold;
	}
	
  .SubContents{
		width:100%;
	}
	
	.SubContent_1 {
		margin-left:1.75%;
	}
	
	.SubContent > .SubImage{
		max-width: 100%;
	    width: auto;
	    max-height: 100%;
	    height: auto;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index:1;
	}
	
	.SubContent_4{
		margin-right:1.75%;
	}

	.SubText:hover{
		background-color:rgba(255,255,255,0.2);
		-webkit-backdrop-filter: white(12px); 
		backdrop-filter: white(12px);
	}

	.SubContents{
		width:100%;
	}

	.SubContent{
		float:left;
		width:23%;
		margin:1% 0.75%;
		background-color:#ccc;
		height:200px;
		position: relative;
	}

	.SubContent > .SubImage{
		max-width: 100%;
	    width: auto;
	    max-height: 100%;
	    height: auto;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index:1;
	}
	
	h3{
		font-size:20px;
		margin:0px;
	}


	h2{
		font-size:25px;
		text-align:center;
		float:left;
		width:100%;
	}

	.SubContent .SubText{
		position: absolute;
		top:-20px;
		left:0%;
		Width:100%;
		font-weight: bold;
	  	font-size: 1.1em;
	  	letter-spacing: 1px;
	    color: #fff;
	    z-index:5;
	    height : -webkit-calc(100% + 20px) ;
	   	height : calc(100% + 20px) 
	}

	.SubText p{
		margin:0;
		font-size:20px;
		background-color:rgba(32,32,32,0.9);
	}

	.SubText:hover p{
		width:auto;
		margin-top:0px;
		color:#fff;
		font-size:24px;
		font-family: "cursive","sans-serif";
	}
	
	span{
		text-decoration: line-through;
	}
	
	.Tail {
	  float:left;
	  width: 100%;
	  height: 40px; 
	  text-align: left;
	  background-color: #002;
	  bottom: 0;
	}

	.TailText {
	  color: #ffffff;
	  margin:12px 0px 0px 20px;
	}
	
	@media only screen and (max-width: 1300px) {
		.mainImage{
			max-width:900px;
			width:30%;
		}
	
		.SubText p{
			font-size:17px;
		}

		.SubText:hover p{
			font-size:20px;
		}
		
}


@media only screen and (max-width: 1100px) {
	.SubContent{
		float:left;
		width:44.5%;
		margin:2% 1.75%;
		background-color:#ccc;
		height:200px;
		position: relative;
	}
}
		


@media only screen and (max-width: 1080px) {
	

	.artist-title{
		width:10%;
		display: inline-block;
	}
	
	.artistMenu{
		margin-left:4%;
	}
	
	.categorys-label{
		width:12%;
	  margin-left:3%
	}

	.artistMenu{
		float:left;
		width:65%;
		margin-left:4%;
		display: inline-block;
	}
}


@media only screen and (max-width: 980px) {
		.c2ImgStyle{
			width:120px;
			height;100px;
		}
			
		.mainImage{
			max-width:300px;
			width:90%;
		}

	.artistMenu{
		margin:0%;
	}
	
	.categorys-label{
		margin:0%;
	}


    #menu {
        display: none;
    }
    
    #toggle {
    	float:right;
        display: block;
        line-height: 36px;
        text-align: left;
        width:36px;
        margin-right:20px;
    }
    
    #toggle a {
        display: block;
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        background: #444;
    }
    
    .fa-align-justify {
        margin-left:8px;
    }
    
    #menu{
    	margin-top:20px;
    }
    
    #menu li {
        height: 40px;
        line-height: 40px;
        text-align: left;
        border-bottom: 1px solid #ccc;
    }
    
    #menu li a {
        color: #444;
        padding-left: 20px;
        background-color: rgba(200, 200, 200, 0.1);
		-webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    }
    
    #not-link-title{
		display: none;
	}
	
	.artistMenu{
		width:100%;
		margin-left:0%;
	}

	.artist-title{
		width: 100%;
	}

	#component-label{
		width: 99%;
	}

	#component-label a{
		margin-left:20px;
	}

	.categorys-label{
		width: 100%;
	}
	
	.topSpace{
		padding-top:34px;
	}
	
	
	.d{
		margin-top: 5px;
	}

	.d > h1{
		font-size:2em;
		margin-bottom:0px;
	}

	
	body{
		width:100%;
		height:auto;
		margin-left:0px;
		margin-right:0px;
	}
	

	
	.contentBody{
		width:100%;
	}
	
	.content_1{
		float:left;
		width:100%;
	}
	
	.content_2{
		float:left;
		width:100%;
	}
}


.contentImg{
	text-align: center;
}


.c2ImgStyle{
	width:120px;
	height;100px;
}


@media only screen and (max-width: 768px) {
	.mainImage{
		max-width:200px;
		width:90%;
	}
}

@media only screen and (max-width: 560px) {
	.mainImage{
		margin-top:30px;
		max-width:200px;
		width:90%;
	}
	
	.SubContent{
		float:left;
		width:96.5%;
		margin:2% 1.75%;
		background-color:#ccc;
		height:200px;
		position: relative;
	}
	
}

@media only screen and (max-width: 400px) {
	.d > h1{
		text-align: left;
		font-size:16px;
	}
}