@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,p{margin:0;padding:0;font-weight: normal;}
body {font-family:'Microsoft Yahei',Arial;font-size:16px; position:relative;}
ul li{list-style:none;}
a{text-decoration:none; outline:none; color:#0064b3;  cursor:pointer; }
img{max-width:100%; display:block;border: none;}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}
.clear{clear:both;display:block;height:0;overflow:hidden;}


*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a img { border: 0; }
/* Clearing */
.clear:before, .clear:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, [class*="site"]:after { content: ''; display: table; }
.clear:after, [class*="content"]:after, [class*="site"]:after { clear: both; }
/* LINKS */
a { text-decoration: none; color: #2980b9;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;

}

/* ALIGNMENT */

/*demo page*/

/* Selection */
::selection { background: #EF4836; color: #fff; }
::-moz-selection { background: #EF4836; color: #fff; }

/*STRUCTURE*/


/*animation*/
#timing {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

/*style for the demo*/
#testbox { width: 30%; position: relative; z-index: 11; height: auto; }
#testbox #retrobox { width: 100px; height: 100px; left: 12%; position: fixed; z-index: 12; top: 200px; text-align: center; line-height: 100px; font-size: 2em; border: 2px solid #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);
}
#testbox #timing { width: 100px; height: 100px; left: 12%; position: fixed; top: 200px; z-index: 13; text-align: center; line-height: 100px; font-size: 2.4em; background: #000; color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#cssoptions { width: 70%; padding: 60px 4%; float: right; position: relative; }
#cssoptions h3 { font-weight: 100; color: #fff; }
#cssoptions .btn { display: block; float: left; margin: 10px 10px 10px 0; padding: 12px 18px; background: #333; background: rgba(0,0,0,0.3); border: 2px solid #fff; color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}
#cssoptions .btn:hover { background: #333; background: rgba(0,0,0,0.6); }
a.gitbtn { display: block; float: left; margin: 10px 10px 10px 0; padding: 12px 18px; background: #000; color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
a.gitbtn:hover { background: #333; }

/*youtube commands*/
.tubular-play {  }
.btnmute { width: 30px; height: 30px; font-size: 1em; color: #fff; position: absolute; z-index: 9999; top: 10px; right: 10px; }

/*MEDIA QUERIES*/
@media (max-width:1214px) {
}

@media (max-width:1025px) { /* big landscape tablets, laptops, and desktops */
}

@media (max-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (max-width:786px) { /* for google ads responsive new code 2014 */
#head { min-height: 40px; }
a#logo { width: 40px; height: 40px; font-size: 14px; line-height: 40px; }
#cssoptions { top: 160px; padding: 60px 4% 200px 4%; }
#testbox { width: 100%; float: none; height: 160px; position: fixed; background: #333; background: rgba(0,0,0,0.6); }
#testbox #retrobox { width: 20%; height: 80px; left: auto; top: 60px; left: 40%; line-height: 80px; font-size: 1.8em; }
#testbox #timing { width: 20%; height: 80px; left: auto; top: 60px; left: 40%; line-height: 80px; font-size: 1.8em; }
#cssoptions { width: 100%; float: none; top: 100px; text-align: center; }
}

@media (max-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
#cssoptions .btn { float: none; }
}

@media (max-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
#head { display: none; }
#cssoptions { top: 160px; }
#cssoptions .btn { margin: 6px 6px 6px 0; padding: 6px 9px; }
a.gitbtn { float: none; margin: 10px auto; }
}

@media (max-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
}