* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }
html, body { 
	margin:0;
	padding:0;background:#000;
	line-height:1;
	font-family:Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'quicksandlight';
    src: url('/fonts/quicksand-light-webfont.eot');
    src: url('/fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/quicksand-light-webfont.woff') format('woff'),
         url('/fonts/quicksand-light-webfont.ttf') format('truetype'),
         url('/fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

::selection {background: #ff3d86; /* Safari */}
::-moz-selection {background: #ff3d86; /* Firefox */}

.content{margin-left:-200px; margin-top:-150px; width:400px; height:300px; text-align:center; color:#ffffff; position:absolute; top:50%; left:50%;}
    .image {width:123px; height:123px; margin:0 auto;}
        .image a {width:123px; height:123px; display:block; background:url(/img/kaihusen.png) 0px 0px no-repeat; text-indent:-9999px; transition: background .2s linear; -webkit-transition: background .2s linear;}
        .image a:hover {width:123px; height:123px; display:block; background:url(/img/kaihusen.png) -124px 0px no-repeat; text-indent:-9999px; transition: background .2s linear; -webkit-transition: background .2s linear;}
    .text {font:15px/15px "quicksandlight", Arial, Helvetica, Sans-Serif; text-transform:uppercase; font-style:normal;}
        .text a {text-decoration:none; text-shadow: 1px 1px 1px #000; color:#fff; transition: color 1s; -webkit-transition: color 1s;}
        .text a:hover {text-decoration:none; text-shadow: 1px 1px 1px #000; color:rgba(255, 255, 255, 0.5); transition: color 1s; -webkit-transition: color 1s;}
        .text h1 {text-align:center; text-shadow: 1px 1px 1px #000; text-transform:uppercase; font:30px/30px "quicksandlight", Arial, Helvetica, Sans-Serif; margin-top:10px; margin:15px 0 8px; padding:0;}

    .logo {width:24px; height:25px; margin:15px auto;}
        .logo a {width:24px; height:25px; display:block; background:url(/img/logo.png) 0px 0px no-repeat; text-indent:-9999px; transition: background .2s linear; -webkit-transition: background .2s linear;}
        .logo a:hover {width:24px; height:25px; display:block; background:url(/img/logo.png) -24px 0px no-repeat; text-indent:-9999px; transition: background .2s linear; -webkit-transition: background .2s linear;}


@media(max-width: 900px){
    
    /*html, body { background:#202020 url(/img/bg-pattern.png) repeat; }*/
	html, body { background:#202020; }
    
    #big-video-wrap {display:none; background:#202020;}

    .content{margin-left:-150px; margin-top:-150px; width:300px; height:300px; text-align:center; color:#ffffff; position:absolute; top:50%; left:50%;}
        
        .image a {background:url(/img/kaihusen.png) 0px 0px no-repeat;}
        .image a:hover {background:url(/img/kaihusen.png) -124px 0px no-repeat;}
        .text h1 {text-align:center; text-shadow: 1px 1px 1px #000; text-transform:uppercase; font:20px/20px "quicksandlight", Arial, Helvetica, Sans-Serif; margin-top:10px; margin:15px 0 8px; padding:0;}
        .logo a {background:url(/img/logo.png) 0px 0px no-repeat;}
        .logo a:hover {background:url(/img/logo.png) -24px 0px no-repeat;}
    
}