*{
	margin: 0px;
	padding: 0px;	
	box-sizing: border-box;
	}

@viewport {
   width: device-width;
	}

h1{
	text-align:center;
	font-size: 29px;
	color: DarkseaGreen;
	}
h2{   
	
	font: bold 18px;
	padding:15px;
	}
h3{   
	color:DarkseaGreen;
	font: bold 18px;
	padding:15px;
	}
#logo-image{
	max-width::360px;
	max-height:360px;
	object-fit:cover; 
	margin:15px auto;
	pointer-events: none;
	}

img{
	max-width: 100%;
 	height: auto;
	margin:20px auto;
	pointer-events: none;
	}
body{
	text-align: center;
	color: Honeydew;
	background-color: #010A17;
	font-family:  Arial black,  NSimSun, MingLiu, Georgia, Garamond, Serif;
	font-size:100%;
	font-size-adjust: 0.55;  
	font-weight: bold;
	background-image: url(../img/background_lotus.webp); 
	background-size:100%;
	}
hr{
	color:darkseaGreen;
	}

.text_container{
	text-align: center;
	position: absolute;
	width:100%;
	left:50%;
	transform: translate(-50%, -50%);
	margin:20px auto;
	}
	

.text_container span{
	
	text-transform: uppercase;
	display:block;
	}

.text1{
	color:honeydew;
	font-size: 43px;
	font-weight:700;
	letter-spacing:8px;
	margin-bottom:22px;
	position:relative;
	animation: text 4s 1;
	}

.text2{
	font-size:25px;
	color: orange;
	
	}

@keyframes text{
	0%{
		color: #010A17;
		margin-bottom:-44px;
		}
	30%{
		letter-spacing:25px;
		margin-bottom:-44px;
	
		}
	85%{
		letter-spacing:8px;
		margin-bottom:-44px;
		}
	}

table{
	border-collapse: collapse;
	width:100%;
	}

th, td{
	text-align: center;
	font-size: 17px;
	padding:10px;
	}
a {	text-decoration: none;
	color: Honeydew;
	}
a:hover{
	color: orange;
	
	}


.description_container{
	max-width:1000px;
	margin:15px auto;
	padding: 0 20px;
	}	


	
#big_wrapper{
	width:1200px;
	margin:10px auto;
	text-align: center;
	}


#top_menu{
	background-image: url(../img/fragrance&wind.webp); 
	background-repeat:no-repeat;
	background-size:100%;
	color: Honeydew;
	}


nav {
	width:100% ;
	
	} 

ul{
	font-size: 17px;
	text-align:center;
	list-style: none;
	}
ul  li{
	display: inline; 
        line-height:;
        position: relative;
	cursor:pointer;
        }
      
ul li a {
	
	text-decoration: none;
	color: Honeydew;
	text-align: center;
	display: inline-block;
	padding:18px 10px ;
	}
ul li a:hover{
	color: orange;
	background-color: none;    
	}


.artnav{	
	overflow:hidden;
	width:80%;
	margin: auto;
	
	}
.artnav a{
	float: left;
	display:block;
	color: Honeydew;
	text-align: center;
        padding: 15px 25px 15px 45px;  
        text-decoration: none;
	font-size:16px;   
       	}


.artnav .icon{
	display:none;
	color:orange;
	text-decoration:none;
	padding:12px 16px;
	}
.dropdown{
	overflow: hidden;
	float: left;
	}
.dropdown .dropbtn{
	font-size: 16px;
	border:none;
	outline: none;
	color: honeydew;
	padding: 15px 25px 15px 45px;
	background-color: inherit;
	font-family: inherit;
	margin: auto;
	}
.dropdown-content{
	display: none;
        position: absolute;
	background-color: none;
	min-width: 120px;
	box-shadow: 0px 3px 6px 6px honeydew;
	z-index:1;
	}
	
	
	
.dropdown-content a:{
	float:none;
	text-decoration: none;
	display:block;
	text-align:left;
	padding: 8px 12px;
	}
.artnav a:hover, dropdown:hover .dropbtn{
	color: orange;
	background-color: none;
	}
.dropdown-content a:hover{
	color: orange;
	background-color:none;
	}
.dropdown:hover .dropdown-content{
	display:block;
	}
@media screen and (max-width:600px){
	.artnav a, .dropdown .dropbtn{
		display:none;
		}
	.artnav  a.icon{
		float:none;
		display: block;
		}
	}

@media screen and (max-width:600px){
	.artnav.responsive {position:relative;}
	.artnav.responsive .icon {
		position: absolute;
		right: 0;
		top:0;
		}
	.artnav.responsive a {
		float: none;
		display:block;
		text-align:left;
		}
	.artnav.responsive .dropdown {float: none;}
	.artnav.responsive .dropdown-content {position:relative;}
	.artnav.responsive .dropdown .dropbtn {
		display: block;
		width:100%;
		text-align:left;
		}
	}



.container{
	position: relative;
	}	

.container .wrapper{
	width:90VW;
	height:70VH;
	margin: 25px auto;
	border:1px solid Darkseagreen;
	overflow:hidden;
	}
.container .slider-holder{
	display:grid;
	grid-template-columns: repeat(10, 100%);
	height:100%;
	font-size: 14px;
	text-align: end;
	text-decoration: none;
	animation-play-state:running;
	animation-iteration-count:2;
	animation:slide 50s ease-in-out 0.2s;
	}

.container .slider-holder .content{
	display: block;
	color:honeydew;
	top:5px;
	right:5px;
	padding:0px;
	}


/*Background Images*/

.container #slider-image-1 {
	background: url(../img/calligraphy/stone_drums_of_qin/ode_on_drums.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size:auto 550px;
	
	}
.container #slider-image-1 a:link{
	display: block;
	padding: 15px;
	text-decoration: none;
	}
.container #slider-image-1 a:hover{
	background-color: none;   
	
	}


.container #slider-image-2{
	background: url(../img/painting/bird/seeking.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-2 a:link{
	display: block;
	padding:15px;
	text-decoration: none;
	}
.container #slider-image-2 a:hover{
	background-color: none;   
	}


.container #slider-image-3{
	background: url(../img/painting/lotus/gracefulness.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-3 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-3 a:hover{
	background-color:none;   
	}


.container #slider-image-4{
	background: url(../img/calligraphy/cursive/tiger_roaring.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-4 a:link{
	display: block;
	padding:10px;
	text-decoration:none;
	}
.container #slider-image-4 a:hover{
	background-color: none;   
	}


.container #slider-image-5{
	background: url(../img/painting/landscape/hand_in_hand.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-5 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-5 a:hover{
	background-color: none;   
	}


.container #slider-image-6{
	background: url(../img/painting/bamboo/bamboo_in_rain.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-6 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-6 a:hover{
	background-color: none;   
	}


.container #slider-image-7{
	background: url(../img/painting/peony/ludlowii_recluse.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
	
	}
.container #slider-image-7 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-7 a:hover{
	background-color:none;   
	}


.container #slider-image-8{
	background: url(../img/calligraphy/seal/talent.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size:auto 550px;
	
	}
.container #slider-image-8 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-8 a:hover{
	background-color:none;   
	}


.container #slider-image-9{
	background: url(../img/painting/shrimp/happy_shrimps.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 550px;
		
	}
.container #slider-image-9 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-9 a:hover{
	background-color: none;   
	}


.container #slider-image-10{
	background: url(../img/seal_carving/cottage_waterdrop2.webp);
	background-repeat: no-repeat;
	background-position:center;
	background-size: auto 550px;
	
	}
.container #slider-image-10 a:link{
	display: block;
	padding:15px;
	text-decoration:none;
	}
.container #slider-image-10 a:hover{
	background-color: none;   
	}




@keyframes slide{
	0%{transform:translateX(0%)}
	10%{transform:translateX(0%)}
	15%{transform:translateX(-100%)}
	20%{transform:translateX(-100%)}
	25%{transform:translateX(-200%)}
	30%{transform:translateX(-200%)}
	35%{transform:translateX(-300%)}
	40%{transform:translateX(-300%)}
	45%{transform:translateX(-400%)}
	50%{transform:translateX(-400%)}
	55%{transform:translateX(-500%)}
	60%{transform:translateX(-500%)}
	65%{transform:translateX(-600%)}
	70%{transform:translateX(-600%)}
	75%{transform:translateX(-700%)}
	80%{transform:translateX(-700%)}
	85%{transform:translateX(-800%)}
	90%{transform:translateX(-800%)}
	95%{transform:translateX(-900%)}
	100%{transform:translateX(-900%)}
	}


.container .button-holder{
	bottom:0%;
	left:45%;
	}
.container .button-holder .dots{
	display: inline-block;
	height:20px;
	width:20px;
	border-radius: 6px;
	background-color: Honeydew;
	margin:9px;
	}
.button-holder .dots:hover{
	background-color:gold;
	}







.grid_container{
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-auto-rows: minmax(160px, auto);
	margin:20px;
	}
.grid_container > div{
	font-size: 15px;
	padding:10px;
	text-align: center;
	border: DarkseaGreen solid 1px; 
	
	}
.grid_container > div:nth-child(even){
	border: DarkseaGreen solid 2px; 
	
	}
.nested{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	grid-gap:5px;
	}
.nested div{
	font-size:14px;
	padding:3px;
	text-align: center;
	}

.nested img{
	display:block;
	object fit:none;
	max-width:100%;
	}

.desc{
	padding:10px;
	text-align: center;
	
	}
.box1{
	align-self:center;
	
	}
.box1 a:link{
	text-decoration:none;
	}
.box2{
	align-self:center;
	
	}	
.box2 a:link{
	text-decoration:none;
	}
.box3{ 
	align-self:center;
	
	}
.box3 a:link{
	text-decoration:none;
	}
.box4{
	align-self:end;
	
	}
.box4 a:link{
	text-decoration:none;
	}
.box5{	
	align-self:end;

	}
.box5 a:link{
	text-decoration:none;
	}
.box6{
	align-self:start;
	
	}
.box6 a:link{
	text-decoration:none;
	}
.box7{
	align-self:center;
	
	}
.box7 a:link{
	text-decoration:none;
	}
.box8{
	align-self:start;
	
	}
.box8 a:link{
	text-decoration:none;
	}

.thumbnails{
	max-width: 720px;
	position: relative;
	background-color:#010A17;
	margin-left: auto;
	margin-right: auto;
	}
.thumbnails #image1 {
	position: relative;
	display:block;
	width: 720px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	
	}
.thumbnails #image2 {
	position: absolute;
	display:block;
	top:40%;
	left:39%;
	margin-left: auto;
	margin-right: auto;
	}


.idiom{
	height:555px;
	width: 100%;
	background-color:#010A17;
	font-size-adjust:0.5;
	overflow:hidden;
	position:relative;
	animation: idiom  infinite;
	}
	
.idiom #idiom1{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	line-height:40px;
	text-align:center;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 25s linear infinite;
	-webkit-animation: idiom 25s linear infinite;
	animation: idiom 25s linear infinite;
	}

.idiom #idiom2{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	line-height:40px;
	text-align:left;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 10s linear infinite;
	-webkit-animation: idiom 10s linear infinite;
	animation: idiom 10s linear infinite;
	}
.idiom #idiom3{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	line-height:40px;
	text-align:center;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 7s ease infinite;
	-webkit-animation: idiom 7s ease infinite;
	animation: idiom 7s ease infinite;
	}

.idiom #idiom4{
	position:absolute;
	width:100%;
	height:100%;
	margin:0px;
	line-height:40px;
	text-align:center;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 17s linear infinite;
	-webkit-animation: idiom 17s linear infinite;
	animation: idiom 17s linear infinite;
	}

.idiom #idiom5{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:10px;
	line-height:40px;
	text-align:left ;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 12s linear infinite;
	-webkit-animation: idiom 12s linear infinite;
	animation: idiom 12s linear infinite;
	}
.idiom #idiom6{
	position:absolute;
	width:100%;
	height:100%;
	margin-left: 140px ;
	line-height:40px;
	text-align:center;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 20s linear infinite;
	-webkit-animation: idiom 20s linear infinite;
	animation: idiom 20s linear infinite;
	}
.idiom #idiom7{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	line-height:40px;
	text-align:right;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 10s ease-in-out infinite;
	-webkit-animation: idiom 10s ease-in-out infinite;
	animation: idiom 10s ease-in-out infinite;
	}
.idiom #idiom8{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:27px;
	line-height:40px;
	text-align:left;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 11s ease-in infinite;
	-webkit-animation: idiom 11s ease-in infinite;
	animation: idiom 11s ease-in infinite;
	}
.idiom #idiom9{
	position:absolute;
	width:100%;
	height:100%;
	margin:40px;
	line_height:40px;
	text-align:left;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 13s ease-out infinite;
	-webkit-animation:idiom 13s ease-out infinite;
	animation:idiom 13s ease-out infinite;

	}

.idiom #idiom10{
	position:absolute;
	width:100%;
	height:100%;
	margin-right:150px;
	line_height: 40px;
	text-align:right;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 16s linear infinite;
	-webkit-animation:idiom 16s linear infinite;
	animation:idiom 16s linear infinite;

	}
.idiom #idiom11{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:300px;
	line_height: 40px;
	text-align:center;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 8s ease-in infinite;
	-webkit-animation:idiom 8s ease-in infinite;
	animation:idiom 8s ease-in infinite;
	}

.idiom #idiom12{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:100px;
	line_height: 40px;
	text-align:center;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 14s ease-in infinite;
	-webkit-animation:idiom 14s ease-in infinite;
	animation:idiom 14s ease-in infinite;
	}

.idiom #idiom13{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:300px;
	line_height: 40px;
	text-align:left;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 9s ease-in infinite;
	-webkit-animation:idiom 9s ease-in infinite;
	animation:idiom 9s ease-in infinite;
	}

.idiom #idiom14{
	position:absolute;
	width:100%;
	height:100%;
	margin-right:300px;
	line_height: 40px;
	text-align:center;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 11s ease-in-out infinite;
	-webkit-animation:idiom 11s ease-in-out infinite;
	animation:idiom 11s ease-in-out infinite;
	}

.idiom #idiom15{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:290px;
	line_height: 40px;
	text-align:center;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 13s linear infinite;
	-webkit-animation:idiom 13s linear infinite;
	animation:idiom 13s linear infinite;
	}

.idiom #idiom16{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:300px;
	line_height: 40px;
	text-align:left;

	-moz-transform:translateY(-100%);
	-webkit-transform:translateY:(-100%);
	transform:translateY(-100%);
	-moz-animation:idiom 6s linear infinite;
	-webkit-animation:idiom 6s linear infinite;
	animation:idiom 6s linear infinite;
	}
.idiom #idiom17{
	position:absolute;
	width:100%;
	height:100%;
	margin-right:600px;
	line-height:40px;
	text-align:right;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 22s ease infinite;
	-webkit-animation: idiom 22s ease infinite;
	animation: idiom 22s ease infinite;
	}
.idiom #idiom18{
	position:absolute;
	width:100%;
	height:100%;
	margin-left:300px;
	line-height:40px;
	text-align:left;
	
	/*Starting position*/
	-moz-transform:translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform:translateY(-100%);
	/*Apply animation to this element*/
	-moz-animation: idiom 9s ease infinite;
	-webkit-animation: idiom 9s ease infinite;
	animation: idiom 9s ease infinite;
	}

/*move it (define the animation)*/
@-moz-keyframes idiom1 {
	0% {
	-moz-transform:translateY(-100%);
	}
	50%{
	-moz-transform:translateY(50%);
	}
	100%{
	-moz-transform:translateY:(100%);
	}
	}
@-webkit-keyframes idiom1{
	0%{
	-webkit-transform:translateY:(-100%);
	}
	50%{
	-webkit-transform:translateY:(50%);
	}
	100%{
	-webkit-transform:translateY:(100%);
	}
	}
@keyframes idiom{
	0%{
	-moz-transform:translateY(-100%);/*Firefox bug fix*/
	-webkit-transform:translateY:(-100%);/*Firefox bug fix*/
	transform:translateY(-100%);
	}
	50%{
	-moz-transform:translateY(100%);/*Firefox bug fix*/
	-webkit-transform:translateY:(100%);/*Firefox bug fix*/
	transform:translateY(50%);
	}
	100%{
	-moz-transform:translateY(100%);/*Firefox bug fix*/
	-webkit-transform:translateY(100%);/*firefox bug fix*/
	transform:translateY:(100%);
	}
	}


footer{
	clear:both;
	position:relative;
	height:200px;
	margin-top:-200px;
	text-align:center;
	color: honeydew;
	font-size:13px;   
	}


.avatar{
	horizontal-align: middle;
	width:70px;
	height:70px;
	border-radius: 50%
	}