/* -------------------------------------------- */
/* ------------------Reset--------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,tbody,tfoot,thead,tdvideo,tt,u,ul,var{
	background: transparent;
	border: 0 none;
	font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: top;
	color: black;
}ol, ul {list-style:none;}blockquote, q {quotes:none;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:1; padding:0; margin:0; outline: 0;}
iframe {
	border: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}



input, textarea, select {margin:1; padding:0px;}


figure{

    border-top-left-radius:7px;
	border-top-right-radius:7px;
    overflow:hidden;
	margin-top: 5px;
}


.dot {
    position: absolute;
    top: -5px;
	
    width: 30px;
    height: 30px;
    margin:0px 0 0 0px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.bounce {
 position: relative;
 right: -170px; 
 top: -23px;"
 
 




 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}


#color-tables { display: inline-block; float: left; min-width: 207px; width: 25%; white-space: nowrap ; }
#color-tables2 { display: inline-block; float: left; min-width: 350px; width: 40%; white-space: nowrap ; background-color: green;}
#input-tables  { display: inline-block; float: left; min-width: 350px; width: 45%; white-space: nowrap ; overflow: auto; padding: 10px; }

#options-tables  { background-color: white; display: inline-block; float: left; min-width: 207px; width: 65%;     min-height: 180px; margin: 0 auto;  border-style: solid; border-color: DarkGrey; border-width: 1px; }
#options-tables2  { height: auto; background-color: white; display: inline-block; float: left; min-width: 200px; width: 32%;   overflow: auto; padding: 0px;  margin: 0 auto; min-height: 180px; border-style: solid; border-color: DarkGrey; border-width: 1px; }

#color-text { font-size:70%; font-weight:bold;}

   input[type=radio] {
width:18px !important;
height:18px!important;
}


.ulclass {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.liclass {
  font: 15px/1.5 Helvetica, Verdana, sans-serif; color:white; border-bottom: 1px solid #828282; padding-top:4px; padding-bottom: 4px;
 
}

li:last-child {
  border: none;
}

.liclass a {
  text-decoration: none;
  color: #FFF;
  display: block;
  width: 165px;

	
	display: flex;
  justify-content: center;
  flex-direction: column;
 

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

.liclass a:hover {
  font-size: 17px; color:white; 
  
}

.underline {
   
  text-decoration: underline;
	
}

a:hover {
  text-decoration: underline;
  
}
#half-line {
  line-height: 1%; margin-bottom: 6px;
}

#half-line2 {
  line-height: 1%; margin-bottom: -12px; 
}

#half-line3 {
  line-height: 100%; margin-bottom: 15px; 
}

/* -------------------------------------------- */
/* ------------------Font---------------------- */

/*Add your font at here*/

/* -------------------------------------------- */
/* ------------------Style--------------------- */
html, body {width:100%; padding:0; margin:0;}
body {background: #999999 url("../images/backgroundgif.png");color: #ffffff;font: 14px/25px Arial, Helvetica, sans-serif;}

a{color: black;text-decoration: none;}

a:hover {
	color: #000000;
}

a.button{cursor: pointer;color: #ffffff;line-height: 14px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;	background: #3F3F3F;border:1px solid #ffffff; -webkit-border-radius: 4px;-moz-border-radius: 4px;-khtml-border-radius: 4px;border-radius: 4px;}
a.button {	display: inline-block;	text-decoration: none;	padding: 6px 12px 6px 12px;}
a.button:hover{}


fieldset {width: 460px;}
legend {font-size: 20px;}
label.field {text-align: right; background-color: #DDDDDD;
			width: 200px;
			float: left;
			font-weight: bold;
			margin-right: 2px;}
input.texbox-300 {width: 300px; float: left;}
fieldset p {clearL: both; padding 5px;}

.body2 A:link {color: #000000; text-decoration: underline}
.body2 A:visited {color: #000000; text-decoration: underline}
.body2 A:active {color: #000000; text-decoration: underline}
.body2 A:hover {color: #000000; text-decoration: underline; color: green;}
.body2 {align:right; font-size: .8em;}

.body3 A:link {color: #000000; text-decoration: underline}
.body3 A:visited {color: #000000; text-decoration: underline}
.body3 A:active {color: #000000; text-decoration: underline}
.body3 A:hover {color: #000000; text-decoration: underline; color: green;}


.clear{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }




/* -------------------------------------------- */
/* ------------------Header-------------------- */


/* -------------------------------------------- */
/* ------------------Featured---------------- */

.featured{margin:15px 0px; }
.featured .wrap-featured{position: relative; background:#141414; z-index: 15;


    
    border: 1px solid #000000;    
     border-radius: 15px;
    -moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .3), inset -2px -2px 2px rgba(0, 0, 0, .4), 5px 5px 10px rgba(0,0,0,0.3);





}
.featured .wrap-featured .slider{ position: relative; z-index: 16; padding: 20px;}

/* -------------------------------------------- */
/* ------------------Content------------------- */
#content {margin:15px 0px;}

table tbody tr td {
    margin: 10px;
}

.block01 {padding: 10px;}
.block01 .box{background: #8C001A; padding: 20px 10px;
box-shadow: inset 2px 4px 9px -2px black;
}
.block01 h2{font-size:23px; line-height:30px; font-weight:normal;}
.block01 p{font-size:16px;}
.block01 .more{text-align: right;}


.block02 { margin:10px; color: #red;}
.block02 article{ box-shadow: inset 2px 4px 9px -2px black; color: #575757; clear: both; margin:0px 0px 12px 0px;background: #FFFFFF;}
.block02 article h2{position: relative; z-index: 300; font-size:20px; color: black; line-height:25px; font-weight:normal;}
.block02 article .info{
	position: relative;
	z-index: 300;
	font-style: italic;
	background: #131313;
	padding: 0px 0px;
	margin-top: 15px;
	background-color: #2C2C2C;
}
.block02 article img{position: relative; z-index: 300; margin:0px;}
.block02 .box{position: relative; z-index: 300; margin-bottom:20px; box-shadow: inset 2px 4px 9px -2px black;}
.block02 .heading{position: relative; z-index: 300; padding:0px 0px; border-bottom:7px ridge blue; border-bottom}
.block02 .heading h1{position: relative; font-size:23px; font-weight:normal; display:inline; color: white; z-index: 300; }
.block02 .heading h2{position: relative; font-size:23px; font-weight:normal; display:inline; color: white; z-index: 300; padding-left: 5px; }


.block02 .content{ margin: 15px 0px ;padding:15px; background: #2C2C2C ;}
.block02 .content .list{background: #2C2C2C; padding: 10px;}
.block02 .content ul{ font-size:14px; list-style-type:circle; margin-left:20px;}
.block02 .content ul li{padding:5px;}

.block03 { margin:10px; color: #2C2C2C;}
.block03 article{ clear: both; margin:20px 0px;background: #2C2C2C; padding: 20px;}
.block03 article h2{font-size:25px; line-height:30px; font-weight:normal;}
.block03 article .info{font-style:italic; padding: 10px 0px;}
.block03 article img{ margin-bottom:10px; width: 100%;}
.block03 .box{margin-bottom:20px;}
.block03 .heading{padding:5px 0px; border-bottom:7px ridge #8C001A;}
.block03 .heading h2{font-size:24px; font-weight:normal; display:inline; color: #ffffff;}
.block03 .content{ margin: 15px 0px ;padding:15px; background: #040404;}
.block03 .content .list{background: #1E1E1E; padding: 10px;}
.block03 .content ul{ font-size:14px; list-style-type:circle; margin-left:20px;}
.block03 .content ul li{padding:5px;}

/* -------------------------------------------- */
/* ------------------Footer-------------------- */
#footer {margin-top: 15px; }


.copyright{text-align:center;

background: -webkit-linear-gradient(#0033CC, #001F7A); 
  background: -o-linear-gradient(#0033CC, #001F7A); 
  background: -moz-linear-gradient(#0033CC, #001F7A); 
  background: linear-gradient(#0033CC, #001F7A); 



 padding:10px 0px;

border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-bottom:1px solid rgba(0,0,0,1); border-right:1px solid rgba(0,0,0,1);

 
 
 
    border-right-style: 1px solid #000000;
    border-bottom-style:  1px solid #000000;
    border-left-style:  1px solid #000000;
     
    -moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .3), inset -2px -2px 2px rgba(0, 0, 0, .4), 5px 5px 10px rgba(0,0,0,0.3);

 
    -moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .3), inset -2px -2px 2px rgba(0, 0, 0, .4), 5px 5px 10px rgba(0,0,0,0.3);
	
	
}
.copyright a{text-decoration:underline;}


/* -------------------------------------------- */
/* ------------------Components-------------------- */
.photos{}
.photos:after{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.photos a{display: block; float:left; margin: 0px 4px 10px 4px;position: relative;}
.photos a img{display:block; border:1px solid #CCC;}

#pagi{margin: 50px auto; padding: 20px 0px;list-style: none;width: 250px;}
#pagi li {float: left;margin-right: 10px;}
#pagi li a {display: block;	text-decoration: none; color: #717171;font: bold 16px Arial, sans-serif;padding: 7px; background: #ffffff;}


.comment{font-weight:bold; margin:50px 0px; width: auto;}
.comment div{margin-bottom: 20px; vertical-align:middle; }
.comment input{border: 2px solid #999999;padding: 8px 10px;width:250px;}
.comment textarea{border: 2px solid #999999;padding: 8px 10px;width:95%;}
.comment input[type="submit"] {cursor: pointer; width:100px; float:right;
	background: -webkit-linear-gradient(top, #efefef, #ddd);background: -moz-linear-gradient(top, #efefef, #ddd);
	background: -ms-linear-gradient(top, #efefef, #ddd);background: -o-linear-gradient(top, #efefef, #ddd);
	background: linear-gradient(top, #efefef, #ddd);
	color: #333;text-shadow: 0px 1px 1px rgba(255,255,255,1);	border: 2px solid #999999;}
.comment input[type="submit"]:hover {
	background: -webkit-linear-gradient(top, #eee, #ccc);	background: -moz-linear-gradient(top, #eee, #ccc);
	background: -ms-linear-gradient(top, #eee, #ccc);	background: -o-linear-gradient(top, #eee, #ccc);
	background: linear-gradient(top, #eee, #ccc);	border: 2px solid #bbb;}
.comment input[type="submit"]:active {
	background: -webkit-linear-gradient(top, #ddd, #aaa);	background: -moz-linear-gradient(top, #ddd, #aaa);
	background: -ms-linear-gradient(top, #ddd, #aaa);	background: -o-linear-gradient(top, #ddd, #aaa);
	background: linear-gradient(top, #ddd, #aaa);	border: 2px solid #999;}