﻿@font-face
{
 font-family:'w3dcf';
 src:url('/media/w3dcf.woff') format('woff');
}
@font-face
{
 font-family:'icons';
 src:url('/media/icons.woff') format('woff');
}
*
{
 font-family:sans-serif;
 outline:0;
}
html
{
 height:100%;
 background:url('http://cdn.w3dcf.com/img/body.png') no-repeat center center fixed; 
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
 overflow-y:scroll;
}
body
{
 position:relative;
 min-height:100vh;
 margin:0;
 padding-bottom:120px;
 color:#ffffff;
 text-align:center;
 font-size:1em;
/* box-sizing:border-box;*/
}
h1
{
 margin:0;
 font-family:w3dcf,sans-serif;
 font-weight:bold;
 font-size:2.4em;
}
h2
{
 font-family:w3dcf,sans-serif;
 text-align:center;
}
p
{
 font-family:sans-serif;
}
ul
{
 margin:0;
 padding:0;
 list-style-type:none;
}
.w
{
 display:none;
 padding:20px 0;
}
.main
{
 position:relative;
 display:block;
 padding-bottom:120px;
}
.head #btnmnu
{
 position:absolute;
 height:38px;
 width:38px;
 top:12px;
 right:12px;
 background-color:#000000;
 font-size:2.2em;
 line-height:1.1em;
 cursor:pointer;
}
.head input[type=checkbox]
{
 display:none;
 -webkit-appearance:none;
}
.head input[type=checkbox]:checked ~ .bar > .nav
{
 display:block;
 width:calc(100% - 20px);
}
.head input[type=checkbox]:checked ~ .bar
{
 width:100%;
}
.head #tikmnu
{
 display:none;
 -webkit-appearance:none;
} 
.head .bar
{
 height:68px;
 width:-webkit-calc(50% - 130px);
 width:-moz-calc(50% - 130px);
 width:calc(50% - 130px);
 background:#000000;
 border-bottom:2px #ff0000 solid;
}
.head #nav01
{
 height:360px; 
 left:0;
}
.head #nav02
{
 top:360px; 
 left:0;
 height:-webkit-calc(100% - 340px);
 height:-moz-calc(100% - 340px);
 height:calc(100% - 340px);
 margin-top:-18px;
}
.head .nav
{
 position:absolute;
 display:none;
 background:#000000;
 text-align:left;
 padding-left:20px;
 z-index:6;
}
.head .rel
{
 position:relative;
 width:100%;
 height:100%;
}
.head .mnu
{
 position:absolute;
 margin:0;
 padding:0;
}
.head #mnu01
{
 bottom:0;
}
.head #mnu02
{
 top:0;
}
.head li a
{
 display:block;
 margin:12px;
 color:#ffffff;
 text-decoration:none;
 font-family:w3dcf;
 font-size:2.8em;
 line-height:1.6em;
}
.head .w3dcf
{
 display:inline-block;
 width:260px;
 padding-top:20px;
 background:url('http://cdn.w3dcf.com/img/w3dcf.png') no-repeat top center;
}
.head .w3dcf img
{
 height:160px;
 margin-top:12px;
}
#join p
{
 text-align:left;
}
#shop .shelf
{
 display:inline-block;
 padding:0;
 text-align:center;
}
#shop .shelf li
{
 float:none;
 display:inline-block;
 width:240px;
 margin:4px;
 margin-bottom:8px;
 padding-top:2px;
 background:#181818;
 text-align:center;
}
#shop .title:hover
{
 text-decoration:underline;
}
#shop .pic
{
 position:relative;
 text-align:center;
}
#shop .pic img
{
 width:80%;
 margin-bottom:12px;
 border:1px #ffffff solid;
 cursor:pointer;
}
#shop .price
{
 position:absolute;
 bottom:24px;
 right:12%;
 padding:4px;
 background-color:#000000;
 font-size:1.4em;
}
#shop .details
{
 position:absolute;
 width:100vw;
 margin-top:-62px;
 padding:12px 40px;
 box-sizing:border-box;
 background-color:#000000;
 z-index:2;
}
#shop .imgs
{
 float:right;
 width:750px;
 padding:12px;
 border:1px #ffffff solid;
}
#shop .thum
{
 width:140px;
 height:140px;
 text-align:center;
 background:#3c3c3c;
 border:1px #ffffff solid;
 cursor:pointer;
}
#shop .thum img
{
 height:140px;
}
#shop .big
{
 position:relative;
 float:left;
 height:420px;
 margin-left:22px;
 background:#3c3c3c;
 border:2px #ffffff solid;
}
#shop .big img
{
 height:420px;
}
#shop .opts h2
{
 padding-left:22px;
 text-align:left;
}
#shop .quantity
{
 float:left;
 margin-bottom:40px;
}
#shop .quantity button
{
 width:40px;
 height:46px;
 color:#ffffff;
 background:#aa0000;
 border:0;
 font-family:'icons';
 font-size:1.4em;
}
#shop .quantity input
{
 width:40px;
 height:42px;
 border:0;
 font-size:1.4em;
 text-align:center;
}
#checkout ul
{
 padding:4px;
}
#checkout .itm
{
 margin:2px;
 background:#181818;
}
#checkout .nfo
{
 display:inline-block;
 width:23%;
 margin:4px auto;
 padding-bottom:4px;
 text-align:center;
 font-size:0.8em;
}
#checkout .quant
{
 float:right;
 margin-bottom:-12px;
 text-align:center;
}
#checkout .quant div
{
 width:16px;
 height:16px;
 margin-left:16px;
 vertical-align:bottom;
 cursor:pointer;
}
#checkout .more
{
 background:url('http://cdn.w3dcf.com/img/more.svg') no-repeat center center;
}
#checkout .less
{
 background:url('http://cdn.w3dcf.com/img/less.svg') no-repeat center center;
}
#checkout .num
{
 width:24px;
 height:24px;
 margin:8px;
 padding:2px;
 text-align:center;
 color:#ffffff;
 background-color:transparent;
 border:1px #ffffff solid;
}
#checkout img
{
 height:60px;
 margin:4px;
 padding:0;
}
#contact #soc
{
 float:none;
 margin:40px;
 padding:24px;
 background-color:#232323;
 text-align:center;
}
#contact #soc img
{
 height:48px;
 margin:12px;
}
#contact .soc
{
 display:inline;
}
.foot
{
 position:absolute;
 bottom:0;
 width:100%;
 height:120px;
 margin-top:68px;
 color:#ffffff;
 background:#000000;
 font-size:0.6em; 
}
.foot .w3dcf
{
 float:left;
 height:60px;
 margin:6px;
}
.foot ul
{
 padding:0;
 text-align:left;
}
.foot .nav>li
{
 float:left;
 width:96px;
 color:#ffffff;
}
.foot .nav div
{
 padding-bottom:2px;
 margin:8px;
 margin-left:0;
 font-size:1.2em;
 font-weight:bold;
 border-bottom:1px #ffffff solid;
}
.foot .nav>li
{
 height:88px;
 border-bottom:1px #ffffff solid;
}
.foot .mnu>li
{
 padding:0;
 text-align:justify;
}
.foot .mnu a
{
 color:#ffffff;
 text-decoration:none;
}
.foot .socs img
{
 float:right;
 height:32px;
}
.foot .copy
{
 padding:20px;
 font-size:0.88em;
 clear:both;
}
.foot .chek
{
 display:none;
}
.kill
{
 float:right;
 width:20px;
 height:20px;
 margin-top:18px;
 background:url('http://cdn.w3dcf.com/img/kill.png');
 cursor:pointer;
}
.news
{
 width:100%;
 padding:40px 20px;
 background:#ff0000;
 border:2px #ffffff solid;
 box-sizing:border-box;
}
.news p
{
 font-family:sans-serif;
}
.news a
{
 color:#ffffff;
 font-family:sans-serif;
}
.news a:hover
{
 color:#cccccc;
}
.account
{
 position:sticky;
 position:-webkit-sticky;
 top:0;
 right:0;
 box-sizing:border-box;
 text-align:right;
 background:rgba(0,0,0,0.8);
 border-bottom:2px #ff0000 solid;
 z-index:4;
}
.account .trolley
{
 display:inline-block;
 width:44px;
 height:38px;
 color:#30a74b;
 font-weight:bold;
 text-align:center;
 background-image:url('http://cdn.w3dcf.com/img/trolley.svg');
 background-position:left center;
 background-repeat:no-repeat;
 vertical-align:top;
 cursor:pointer;
}
.account .profile
{
 display:inline-block;
 width:44px;
 height:38px;
 background-image:url('http://cdn.w3dcf.com/img/profile.svg');
 background-position:left center;
 background-repeat:no-repeat;
 vertical-align:top;
 cursor:pointer;
}
.msg
{
 float:left;
 padding-left:40px;
 font-weight:bold;
 text-align:left;
}
.form
{
 width:100%;
 text-align:center;
}
.form .txt
{
 width:94%;
}
.form .send
{
 width:94%;
 margin:auto;
 padding:8px;
}
.form .send button
{
 margin-right:-8px;
 background:#ff0000;
}
.form #valid
{
 padding:4px;
}
.text
{
 width:80%;
 margin-top:20px;
 padding:20px 12% 40px 8%;
 background:#ffffff;
 color:#000000;
 text-align:left;
}
.text p
{
 font-family:sans-serif;
}
.text a
{
 color:#555555;
 text-decoration:none;
}
.text a:hover
{
 color:#000000;
 text-decoration:underline;
}
.text ol
{
 list-style-type:none;
 counter-reset:item;
 margin:0;
 padding:0;
}
.text ol>li
{
 display:table;
 counter-increment:item;
 line-height:1.6em;
 font-size:1.4em;
 font-weight:bold;
 font-family:w3dcf,sans-serif;
}
.text ol>li:before 
{
 content:counters(item,'.')'. ';
 display:table-cell;
 padding-right:0.6em;    
}
.text li ol>li
{
 margin-bottom:8px;
 line-height:1em;
 font-family:sans-serif;
 font-weight:normal;
 font-size:0.68em;
}
.text li ol>li:before
{
 content:counters(item,'.')' ';
}
.text li ol>li ol
{
 margin-top:8px;
}
.text li ol>li ol>li
{
 margin-bottom:8px;
 line-height:1em;
 font-size:1em;
}
.text li ol>li ol>li:before
{
 content:counter(item,upper-roman)".";
}
.text .title
{
 padding-bottom:20px;
 text-align:center;
}
.select
{
 display:inline-block;
 width:100%;
 margin-bottom:28px;
 padding:.6em 1.4em .5em .8em;
 box-shadow:0 1px 0 1px rgba(0,0,0,.04);
 box-sizing:border-box;
 border-radius:.5em;
 -moz-appearance:none;
 -webkit-appearance:none;
 appearance:none;
 background-image:url('http://cdn.w3dcf.com/img/dwn.svg'),linear-gradient(to bottom,#ffffff 0%,#dddddd 100%);
 background-repeat:no-repeat,repeat;
 background-position:right .7em top 50%,0 0;
 background-size:.80em auto,100%;
}
.select:hover
{
 border-color: #888888;
}
.select:focus 
{
 border-color:#aaaaaa;
 box-shadow:0 0 1px 3px rgba(59,153,252,.7);
 box-shadow:0 0 0 3px -moz-mac-focusring;
 color:#222222; 
 outline:none;
}
.slc
{
 width:100%;
 border:0;
 padding-left:12px;
 font-size:1.4em;
 background:transparent;
 -webkit-appearance:none;
 -moz-appearance:none;
}
.txt
{
 width:460px;
 height:40px;
 margin-top:20px;
 padding:4px 8px;
 color:#ffffff;
 font-family:w3dcf;
 font-size:1.2em;
 background-color:rgba(0,0,0,0.6);
 border:0;
}
.txta
{
 height:360px;
}
.btn
{
 float:right;
 padding:8px 20px;
 background-color:#ff0000;
 color:#ffffff;
 font-family:w3dcf;
 font-size:1.2em;
 text-align:center;
 border:0;
}
.box
{
 background-color:rgba(0,0,0,0.8);
 padding:40px;
 border:1px #999999 solid;
 text-align:left;
}
.box h1
{
 text-align:center;
}
.box a
{
 color:#aaaaaa;
 text-decoration:none;
}
.box a:hover
{
 color:#ffffff;
 text-decoration:underline;
}
.box img
{
 float:left;
 margin:0 12px 20px 12px;
 padding:12px;
 border:1px #ffffff solid;
}
.nobox
{
 margin:20px;
 padding:40px;
 padding-top:0;
 text-align:left;
}
.nobox a
{
 color:#aaaaaa;
 text-decoration:none;
}
.nobox a:hover
{
 color:#ffffff;
 text-decoration:underline;
}
.show
{
 display:block;
}
.hide
{
 display:none;
}
.left
{
 float:left;
}
.rite
{
 float:right;
}
.clr
{
 clear:both;
}