/* menu */
.animate {float:left; width:100%; height:195px; margin-right:0px; margin-left:0px;}
.animate h2 {clear:left; padding:10px 0; margin:0; font:bold 14px/20px arial, sans-serif; color:#069;}
.animate img {margin:4px; width:99%; min-height:160px; max-height:185px; opacity:0.7; filter: alpha(opacity=70); }

.colorchange {display:block; float:left;
-webkit-transition:0.5s;
transition:0.5s;
filter: url(#nocolor);
-webkit-filter: grayscale(50%);
filter: gray;
}
.colorchange:hover {
-webkit-filter: grayscale(5%); opacity:1.0;
-webkit-backface-visibility: hidden;
filter: none;
}


.nav input, #togglemenu {position:absolute; left:-9999px; display:none; }
.nav label.togglemenu {display:none;}
.nav {width:100%; max-width:1000px; margin:10px auto 0 auto; }
.nav ul {position:relative; margin:0; padding:0; list-style:none; z-index:100;}

.nav > ul > li {float:left; max-width:230px; margin:0px 0px 0 0;}
.nav > ul > li:before {position:relative; top:10px; left:10px; content: ""; height:4px; width:4px; border:2px solid #900000; border-color:transparent #900000 #900000 transparent; float:left; margin:5px 0 0 0; z-index:100; 
transform:rotate(45deg); 
-webkit-transform:rotate(45deg); 
-ms-transform:rotate(45deg);
}
.nav ul > li > div {display:block; position:absolute; top:50px; left:0; max-height:0; width:100%; overflow:hidden; background:rgba(237,237,237,1.0); z-index:0;
transition:0.25s; 
-webkit-transition:0.25s;
}
.nav ul > li > div ul {display:inline-block; width:30%;  margin:0 1%; padding:20px 0px 20px 0; vertical-align:top; align:left;}
.nav ul > li > div ul:last-child {margin:0;}

.nav ul li label {display:block; font:bold 14px/14px arial, sans-serif; color:#900000; padding:16px 30px; cursor:pointer; position:relative; height:44px; border-radius:10px 10px 0 0}
.nav ul li label.openmenu {background:rgba(217,210,204,0); 
NOTE
transition:0.25s; 
-webkit-transition:0.25s;
}
.nav ul li label.opentop {background:rgba(217,210,204,0);  
/* .nav ul li label.opentop {background:rgba(255,255,255,0); */
transition:0.5s; 
-webkit-transition:0.5s;
}
.nav ul li label span {display:block; font:normal 9px/10px arial, sans-serif; color:#006000; margin:4px 0 0 -0px; text-transform:uppercase;}
.nav ul li label span  a{display:block; font:bold 10px/10px arial, sans-serif; color:#006000; margin:-10px 0 0 0; text-transform:uppercase; text-decoration:underline;}
.nav ul li label span  a:hover{display:block; font:bold 10px/10px arial, sans-serif; color:#900000; margin:10px 0 0 0; text-transform:uppercase; text-decoration:underline;}
.nav ul li label.closetop {width:100%; padding:0; height:75px; margin-top:-75px; display:none;}
.nav #closemenu {display:none; position:fixed; top:0; left:0; height:100%; width:100%; z-index:80;}

.nav ul ul li {padding:1px 0; border-top:1px solid #aaa;}
.nav ul ul li:last-child {border-bottom:1px solid #aaa;}

.nav ul ul li a {display:block; font:normal 12px/12px arial, sans-serif; padding:10px 20px; color:#555 !important; text-decoration:none; padding:5px 10px;}
.nav ul ul li.noborder {border:0; padding:0;}
.nav ul ul li.noborder img {display:block; width:80%; margin-left:40px;}

.nav ul ul li a img {display:block; margin:0 auto; border:0;}
.nav ul ul li a:hover {color:#fff !important; background:rgb(160,0,0);}
.nav ul ul li.noborder a:hover {background:transparent;}
.nav ul ul li.noborder a {padding:0 0 5px 0;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > div,
.nav #p2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > div, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > div, 
.nav #p6:checked ~ ul > li:nth-of-type(6) > div, 
.nav #p7:checked ~ ul > li:nth-of-type(7) > div {max-height:500px; z-index:1; box-shadow:0 10px 8px -8px rgba(0,0,0,0.3);
transition:0.25s 0.25s;
-webkit-transition:0.25s 0.25s;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > label.opentop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > label.opentop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > label.opentop,
.nav #p4:checked ~ ul > li:nth-of-type(4) > label.opentop, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > label.opentop,  
.nav #p6:checked ~ ul > li:nth-of-type(6) > label.opentop,  
.nav #p7:checked ~ ul > li:nth-of-type(7) > label.opentop {background:rgba(237,237,237,0.9);} 
/* .nav #p6:checked ~ ul > li:nth-of-type(6) > label.opentop {background:rgba(120,0,0,0.9);} */

.nav #p1:checked ~ ul > li:nth-of-type(1) .closetop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) .closetop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) .closetop, 
.nav #p4:checked ~ ul > li:nth-of-type(4) .closetop,
.nav #p5:checked ~ ul > li:nth-of-type(5) .closetop,
.nav #p6:checked ~ ul > li:nth-of-type(6) .closetop,
.nav #p7:checked ~ ul > li:nth-of-type(7) .closetop,
.nav #p1:checked ~ #closemenu, 
.nav #p2:checked ~ #closemenu, 
.nav #p3:checked ~ #closemenu, 
.nav #p4:checked ~ #closemenu, 
.nav #p5:checked ~ #closemenu, 
.nav #p6:checked ~ #closemenu, 
.nav #p7:checked ~ #closemenu {display:block;}


.cssplay_auto {width:100%; max-width:290px; height:180px; position:relative; margin:0px auto; overflow:hidden;}
.cssplay_auto img[id*="img"] {width:290px; height:180px; position:absolute; left:0; top:0; opacity:0;
border:0px solid #333; border-radius:20px;}

/* set the width/height of the slideshow */
.cssplay_auto img#blank {visibility:hidden;}

/* the slideshow */
.cssplay_auto #img_01 {-webkit-animation:autoplay 32s linear infinite 0s; animation:autoplay 21s linear infinite 0s;}
.cssplay_auto #img_02 {-webkit-animation:autoplay 32s linear infinite 4s; animation:autoplay 21s linear infinite 4s;}
.cssplay_auto #img_03 {-webkit-animation:autoplay 32s linear infinite 8s; animation:autoplay 21s linear infinite 8s;}
.cssplay_auto #img_04 {-webkit-animation:autoplay 32s linear infinite 12s; animation:autoplay 21s linear infinite 12s;}
.cssplay_auto #img_05 {-webkit-animation:autoplay 32s linear infinite 16s; animation:autoplay 21s linear infinite 16s;}
.cssplay_auto #img_06 {-webkit-animation:autoplay 32s linear infinite 20s; animation:autoplay 21s linear infinite 20s;}
.cssplay_auto #img_07 {-webkit-animation:autoplay 32s linear infinite 24s; animation:autoplay 21s linear infinite 24s;}
.cssplay_auto #img_08 {-webkit-animation:autoplay 32s linear infinite 28s; animation:autoplay 21s linear infinite 28s;}
.cssplay_auto #img_09 {-webkit-animation:autoplay 32s linear infinite 32s; animation:autoplay 21s linear infinite 32s;}

@keyframes autoplay {
	4%,14% {opacity:1;}
	0%,18%,100% {opacity:0;}
}
@-webkit-keyframes autoplay {
	4%,14% {opacity:1;}
	0%,18%,100% {opacity:0;}
}

/* the slide timing indicator */
.cssplay_auto #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0); 
-webkit-animation:slide 4s linear infinite; animation:slide linear 4s infinite;}

@keyframes slide {
	0% {left:-100px;}
	100% {left:100%;}
}
@-webkit-keyframes slide {
	0% {left:-100px;}
	100% {left:100%;}
}


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

.nav label {display:block; cursor:pointer;}
.nav ul li label {height:auto; border-radius:0;}

.nav label.togglemenu {float:right; display:block; cursor:pointer; position:relative; z-index:100; font:normal 24px/24px arial, sans-serif; color:#900000; margin:10px 10px 8px 0;}
.nav > ul {max-height:0; overflow:hidden; width:100%; background:#999; padding:0; clear:both; 
transition:0.5s; 
-webkit-transition:0.5s;
}
.nav ul li label.closetop {height:40px; margin-top:-40px;}

.nav > ul > li:before {border-color:transparent #fff #fff transparent;}
.nav ul li label.opentop {color:#fff; border-top:1px solid #fff; text-align:left;}
.nav ul li label span {color:#fff; display:inline; margin-left:10px;}
.nav ul li label span  a{color:#fff; display:inline; margin-left:10px; text-decoration:underline;}
.nav ul li label span  a:hover{color:#900000; display:inline; margin-left:10px; text-decoration:underline;}
.nav > ul > li {width:100%; max-width:100%; text-align:center;}
.nav ul > li > div {position:static; padding:0;}
.nav ul > li > div ul {width:100%; max-width:100%; display:block; padding:0 0 0 8px; margin:0; background: #900000;}
.nav ul div ul:last-child {display:none;}

.nav #togglemenu:checked ~ ul {max-height:700px;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > label.opentop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > label.opentop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > label.opentop, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > label.opentop, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > label.opentop, 
.nav #p6:checked ~ ul > li:nth-of-type(6) > label.opentop, 
.nav #p7:checked ~ ul > li:nth-of-type(7) > label.opentop {background: #900000;}

.nav ul ul li {border:0; padding:0; text-align:left;}
.nav ul ul li:last-child {border:0;}
.nav ul ul li a {display:block; padding:8px 20px; color:#fff !important; background:#777; border-top:1px solid #ccc;}

.nav ul ul li a:hover {background:#900000;} 
.nav ul ul li.noborder a {padding-top:3px;}

.nav ul > li:nth-of-type(1) > div, 
.nav ul > li:nth-of-type(2) > div, 
.nav ul > li:nth-of-type(3) > div, 
.nav ul > li:nth-of-type(4) > div, 
.nav ul > li:nth-of-type(5) > div, 
.nav ul > li:nth-of-type(6) > div, 
.nav ul > li:nth-of-type(7) > div {
transition:0.4s; 
-webkit-transition:0.4s;
}
.nav #p1:checked ~ ul > li:nth-of-type(1) > div, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > div, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > div, 
.nav #p6:checked ~ ul > li:nth-of-type(6) > div, 
.nav #p7:checked ~ ul > li:nth-of-type(7) > div {box-shadow:none;
transition:1.5s; 
-webkit-transition:1.5s;
}