body { background: #fff; font-family: "Open Sans", Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align: center; } a { text-decoration: none; } a:hover { text-decoration: underline; } img { border: none; max-width: 100%; } label { cursor: pointer; } h1,h2,h3,h4,h5,h6,p,fieldset,form,ul,ol,li,dl,dt,dd { padding: 0; margin: 0; border: none; list-style: none; } h1, h2, h3, h4, h5, h6 { line-height: 100%; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height:1%;} .clearfix {display:block;} .clear { clear: both; height: 0; line-height: 0; font-size: 0; } .container { margin: auto; max-width: 1000px; min-width: 280px; text-align: left; width: 100%; } /* Header */ header { padding: 30px 0; } header a.logotype { float: left; margin-right: 20px; max-width: 206px; } header .right, header .top { float: right; width: 70%; } .top { margin-bottom: 20px; } .area { float: left; width: 66%; } .sign { color: #d21f45; font-size: 13px; font-weight: 400; float: right; } .sign a { color: #d21f45; } .area-select { float: left; } .area ul.top-menu { float: right; } .area ul.top-menu li { color: #555555; font-size: 13px; font-weight: 400; float: left; padding-left: 25px; } .area ul.top-menu li a { color: #555; } .search { background: #fff; border: 1px solid #e2e2e2; box-sizing: border-box; -moz-box-sizing: border-box; -webkit--moz-box-sizing: border-box; float: left; height: 48px; width: 66%; } .search input { background: none; border: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit--moz-box-sizing: border-box; color: #000000; float: left; font-size: 14px; height: 46px; line-height: 46px; padding: 0 0 0 12px; width: 85%; } .search button { background: url("../images/icons/search.png") no-repeat left top; border: none; cursor: pointer; float: right; height: 32px; margin: 8px 12px 0 0; text-indent: -10000px; width: 32px; } .search button:hover { opacity: 0.8; } .cart { color: #a2a2a2; float: right; font-size: 13px; font-weight: normal; margin-top: 15px; } .cart a { color: #a2a2a2; } .cart strong { background: url("../images/icons/cart.png") no-repeat left top; color: #000; font-size: 14px; font-weight: bold; margin: 0 10px 0 0; padding: 1px 0 1px 32px; text-transform: uppercase; } /* --Menu */ .menu { background: #eae7e6; height: 60px; overflow: hidden; } .menu ul { margin: 0; padding: 0; } .menu ul li { -moz-box-sizing: border-box; color: #000; float: left; font-size: 14px; font-weight: normal; list-style: none; letter-spacing: -1px; line-height: 60px; text-transform: uppercase; text-align: center; } .menu ul li.software { width: 16.5%; } .menu ul li.laptops { width: 13%; } .menu ul li.books { width: 20%; } .menu ul li.players { width: 16%; } .menu ul li.phones { width: 18%; } .menu ul li.accessories { width: 16.5%; } .menu ul li a { color: #000; display: block; } .menu ul li a:hover, .menu ul li.active a { background: #dddad9; font-weight: bold; text-decoration: none; } .icon-menu { background: url("../images/icons/menu.png") no-repeat left top; cursor: pointer; display: none; float:right; height: 26px; margin: 15px 15px; width: 32px; } /* Main slider */ #slider { background: #faf9f9; } #slider .container { position: relative; } #slider .item { overflow: hidden; max-height: 390px; width: 100%; max-width: 1000px; } #slider img { display: block; width: 100%; } .more { background: url("../images/bg/bg-left.png") no-repeat left center, url("../images/bg/bg-right.png") no-repeat right center; display: block; margin: 10px auto 0; width: 670px; } #slider a { background: #d21f45; color: #fff; display: block; font-size: 14px; font-weight: bold; border-radius: 25px; height: 30px; line-height: 30px; margin: auto; text-align: center; width: 135px; } #slider a:hover { opacity: 0.8; text-decoration: none; } #slider .pager { text-align: center; height: 5px; width: 100%; padding: 40px 0 50px; } #slider .pager span { background: #a1a1a1; border: 1px solid #e8e7e7; border-radius: 1px; cursor: pointer; display: inline-block; height: 5px; margin: 0 1px; text-indent: -10000px; width: 37px; } #slider .pager span.cycle-pager-active { background: #d21f45; border: 1px solid #f2cdd5; } #slider .images { display: inline-block; width: 50%; vertical-align: middle; } #slider .block { display: inline-block; width: 48%; vertical-align: middle; } #slider .block h2 { color: #000000; font-size: 36px; font-weight: normal; margin: 0 0 40px; } #slider .block p { color: #565656; font-size: 16px; font-weight: normal; line-height: 140%; margin: 0; } #slider .prev { position: absolute; left: -80px; top: 50%; margin-top: -47.5px; z-index: 250; background: #f2f1f1 url("../images/bg/prev.png") no-repeat center center; height: 95px; width: 37px; display: block; opacity: 0.6; text-indent: -10000px; cursor: pointer; } #slider .next { position: absolute; right: -80px; top: 50%; margin-top: -47.5px; z-index: 500; background: #f2f1f1 url("../images/bg/next.png") no-repeat center center; height: 95px; width: 37px; display: block; opacity: 0.6; text-indent: -10000px; cursor: pointer; } #slider .prev:hover, #slider .next:hover { opacity: 1; } /* Content */ .links { margin: 35px 0 50px; } .links a { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: rgba(255, 255, 255, 0.6); float: left; font-size: 18px; font-weight: normal; height: 163px; line-height: 140%; padding: 0 4%; width: 49%; } .links .shipping { background: #50ac83; padding-top: 40px; } .links .gifts { background: #30ace8; float: right; padding-top: 25px; } .links a strong { color: #fff; display: block; font-size: 34px; font-weight: bold; text-transform: uppercase; } .links a:hover { opacity: 0.8; text-decoration: none; } .links img { display: inline-block; vertical-align: middle; } .shipping span { display: inline-block; vertical-align: middle; margin-left: 4%; } .gifts span { display: inline-block; vertical-align: middle; margin-left: 7%; } .slider { padding: 0 0 50px; } .title { background: #eae7e6; color: #333333; font-size: 24px; font-weight: 400; line-height: 120%; padding: 20px 30px; } .cycle-slideshow.slidershow { overflow: hidden; position: relative; max-width: 989px; } .itm { border-left: 1px solid #e2e2e2; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; list-style: none; margin: 30px 0; padding: 15px 35px 0; text-align: center; width: 331px; vertical-align: top; margin-left: -1px } .itm a { display: block; position: relative; white-space: normal; } .itm a h3 { color: #000; font-size: 20px; font-weight: 600; margin: 20px 0 0; text-transform: uppercase; } .itm span { color: #828282; display: block; font-size: 13px; line-height: 160%; margin: 15px 0; } .itm .price { color: #000; display: block; font-size: 20px; font-weight: 600; margin: 0; } .itm .price .old-price { color: #a3a3a3; font-size: 14px; display: inline-block; text-decoration:line-through; } .itm a:hover:before { background: rgba(255,255,255, 0.64); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 150; } .itm a:hover { text-decoration: none; } .itm button { background: #d21f45; border: none; color: #fff; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 100%; margin: 20px 0 0 0; padding: 13px 20px; } .itm button:hover { opacity: 0.8; } .slider { position: relative; } .btn { position: absolute; right: 20px; top: 25px; width: 55px; z-index: 500; } .slider .prev { background: url("../images/bg/prev.png") no-repeat left top; height: 22px; width: 13px; display: inline-block; text-indent: -10000px; margin: 0 5px; cursor: pointer; opacity: 0.2; } .slider .next { background: url("../images/bg/next.png") no-repeat left top; height: 22px; width: 13px; display: inline-block; text-indent: -10000px; margin: 0 5px; cursor: pointer; opacity: 0.2; } .slider .next:hover, .slider .prev:hover { opacity: 1; } .text { padding: 50px 0; } .text h3 { color: #000; font-size: 20px; font-weight: 600; margin: 0 0 25px; text-transform: uppercase; } .text p { color: #828282; font-size: 13px; line-height: 160%; margin: 0 0 25px; } /* Footer */ footer .boxes { background: #faf9f9; padding: 0 0 55px; } footer .social-icons { float: right; margin: 45px 0 0; width: 13%; } footer .box { float: left; margin: 45px 0 0; width: 29%; } footer .box h3, footer .social-icons h3 { color: #000; font-size: 16px; font-weight: 600; margin: 0 0 15px; text-transform: uppercase; } footer .box ul { margin: 0 130px 0 0; padding: 0; } footer .box ul li { border-top: 1px solid #e2e2e2; color: #353535; font-size: 13px; font-weight: 400; padding: 10px 0; } footer .box ul li:first-child { border: none; } footer .box ul li a { color: #353535; } footer .box ul li a:hover, footer .box ul li.active a { color: #d21f45; text-decoration: none; } footer .social-icons a { color: #353535; font-size: 13px; font-weight: 400; float: left; line-height: 38px; margin: 10px 0 0; padding: 0 0 0 55px; width: 100%; } footer .twitter { background: url("../images/icons/t.jpg") no-repeat left center; } footer .facebook { background: url("../images/icons/f.jpg") no-repeat left center; } footer .vimeo { background: url("../images/icons/v.jpg") no-repeat left center; } footer .google { background: url("../images/icons/g.jpg") no-repeat left center; } footer .social-icons a:hover { color: #d21f45; text-decoration: none; } footer .bottom { background: #c1c1c1; padding: 30px 0 50px; } footer .bottom .container { text-align: center; } footer .bottom p { color: #282828; font-size: 13px; font-weight: 400; padding: 10px 0 0; } /* Mobile */ @media (max-width: 1024px) { .container { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 15px; } .menu .container { padding: 0; } } @media (max-width: 960px) { .links { text-align: center; } .links img { width: 20%; margin: 0 auto 5px; display: block; } .links .shipping { padding-top: 30px; } .links .gifts { padding-top: 15px; } } @media (max-width: 900px) { #slider { height: auto; } footer .box ul { margin-right: 15%; } footer .box { width: 27%; } footer .social-icons { float: left; width: 18%; } } @media (max-width: 860px) { header a.logotype { max-width: 186px; } .search, .area { width: 61%; } .area ul.top-menu li { padding: 0 0 0 10px; } .itm { padding: 10px 10px 0 10px; } } @media (max-width: 767px) { header .right, header .top { float: none; width: auto; } .area { display: none; } .search { width: 66%; } .menu { height: auto; } .icon-menu { display: block; text-align: right; } .menu ul { display: none; } .menu ul li { text-align: left; width: 100%!important; } .menu ul li a { padding: 0 15px; } #slider .pager { padding: 20px 0 25px; } #slider .block { display: none; } #slider .block h2 { font-size: 32px; margin-bottom: 20px; } #slider .block p { font-size: 14px; } #slider .images { display: block; margin: auto; } #slider a { font-size: 13px; height: 25px; line-height: 25px; width: 110px; } .itm a h3 { margin-top: 10px; } .itm span { margin: 10px 0; } .itm button { margin-top: 15px; } .links { text-align: left; } .links a { width: 100%; } .links img { width: auto; margin: 0; display: inline-block; } .links .shipping { padding-top: 40px; float: left; margin-bottom: 10px; } .links .gifts { padding-top: 25px; float :left; } } @media (max-width: 700px) { .more { width: 100%; } } @media (max-width: 640px) { .search { width: 60%; } } @media (max-width: 639px) { #slider a { font-size: 12px; height: 21px; line-height: 21px; width: 100px; } footer .box, footer .social-icons { float: left; width: 100%; } footer .box ul { margin: 0; } } @media (max-width: 520px) { .search { width: 100%; } header a.logotype { display: block; float: none; margin: auto; } .links { text-align: center; } .links a { height: 150px; } .links img { width: 20%; margin: 0 auto 5px; display: block; } .links .shipping { padding-top: 30px; } .links .gifts { padding-top: 15px; } .links a strong { font-size: 30px; } .links a { font-size: 16px; } } @media (max-width: 340px) { .search input { width: 80%; } .itm { width: 280px; padding: 10px 10px 0; } }