html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style: none;}header,footer,section,aside,nav,article{display: inline-block; width: 100%;}input:focus,select:focus,textarea:focus{outline: none;}
body{
font-family: 'latoregular';
background: #fff;
font-size: 14px;
color: #242424;
}
.inner{width: 1200px; margin: 0 auto;}
header{position: relative; background: url("../img/bg_head.png") 50% 0 no-repeat; padding: 7px 0 0; color: #242424;}
header .social{float: left; margin: 15px 0 0;}
header .phones{float: right; text-align: right;}
header .phones p{display: inline-block; padding: 0 0 0 27px; background: url("../img/phone.png") 0 50% no-repeat; line-height: 20px; margin: 13px 30px 0 0;}
header .phones a{font-size: 24px; color: #242424; position: relative; top: 2px;}
header .logo{float: left; position: relative; z-index: 2; margin: 30px 0 0 30px;}
header .site-info{position: absolute; top: 110px; left: 0; text-align: center; z-index: 1; width: 100%; font-size: 18px; line-height: 1.3;}
header .site-info h1{font-size: 24px; font-weight: normal; font-family: 'latoblack';}
header .site-info b{font-weight: normal; font-family: 'latoblack'; display: block;}
header .cart{float: right; position: relative; z-index: 2; font-size: 12px; margin: 55px 0 0;}
header .cart div{padding: 0 0 0 44px; background: url("../img/cart.png") 0 50% no-repeat; min-height: 35px; line-height: 1.5; margin-bottom: 5px;}
header .cart b{font-weight: normal; font-family: 'latoblack';}
header .cart .btn{width: 100%; color: #fff; font-family: 'latoblack'; height: 30px; line-height: 30px; border-radius: 30px; background: url("../img/btn_blue.png") 50% 50% no-repeat; width: 170px;}
header .cart .btn:hover{opacity: 0.85}
header nav{height: 72px; background: url("../img/bg_nav.png") 0 0 repeat-x; margin: 55px 0 0;}
header nav .pull{display: none;}
header nav ul{display: inline-block; width: 100%; text-align: center; padding: 16px 0 0;}
header nav ul li{display: inline-block; margin: 0 16px;}
header nav ul li a{height: 40px; line-height: 40px; padding: 0 22px; font-size: 18px; color: #242424; display: inline-block;}
header nav ul li a span{border-bottom: 1px solid #242424; margin-top: 0px;}
header nav ul li.active a/*,header nav ul li:hover a*/{color: #fff; background: #242424; border-radius: 40px;}
header nav ul li:hover a{color: #fff;}
header nav ul li:hover a span{border-color: #fff;}
header nav ul li.active a span/*,header nav ul li:hover a span*/{border-color: transparent;}
#promo{height: 695px; background: url("../img/bg_promo.jpg") 50% 0 no-repeat; color: #fff;}
#promo .info{float: right; padding: 125px 0 0;}
#promo .info h2{font-weight: normal; font-size: 36px; font-family: 'latoblack'; line-height: 1.3;}
#promo .info h2 span{color: #ffc600}
#promo .info ul{font-style: italic; font-size: 24px; font-family: 'latomedium'; margin: 50px 0 45px 30px;}
#promo .info ul li{padding: 0 0 0 53px; line-height: 30px; margin-bottom: 10px;}
#promo .info ul li:nth-child(1){background: url("../img/ls_p1.png") 0 50% no-repeat;}
#promo .info ul li:nth-child(2){background: url("../img/ls_p2.png") 0 50% no-repeat;}
#promo .info ul li:nth-child(3){background: url("../img/ls_p3.png") 4px 50% no-repeat;}
#promo .btn{background: url("../img/btn_select.png") 50% 50% no-repeat; border-radius: 70px; box-shadow: 0px -3px 18px 0px rgba(0, 0, 0, 0.2); width: 300px; height: 70px; line-height: 70px; color: #242424; font-size: 22px; font-family: 'latoblack'; margin-left: 50px;}
#promo .btn:hover{box-shadow: 0px -3px 18px 0px rgba(0, 0, 0, 0.75);}
#repost{font-family: 'latoblack'; height: 387px; background: url("../img/bg_repost.jpg") 50% 0 no-repeat; margin: 55px 0 0;}
#repost span{font-size: 95px; position: absolute; top: -10px; right: 0;}
#repost p{position: relative; display: inline-block; font-size: 36px; line-height: 1.3; padding: 0 205px 0 0; margin: 130px 0 0 308px}
#select{padding: 45px 0 70px; background: url("../img/bg_select.jpg") 50% 100% no-repeat;}
#select .block-title{font-size: 36px; padding-bottom: 10px; text-align: center; display: inline-block; width: 100%; background: url("../img/bt.png") 50% 100% no-repeat; font-family: 'latoblack'; margin-bottom: 80px;}
#select .sorting{padding: 0 0 20px; margin: 0 0 35px; border-bottom: 1px solid #b2b2b2}
#select .sorting p{display: inline-block; color: #b4b4b4; font-family: 'latoblack';}
#select .sorting a{color: #b4b4b4; display: inline-block; padding: 0 0 0 20px; margin: 0 0 0 15px;}
#select .sorting a.active{color: #242424; font-family: 'latoblack';}
#select .sorting a.date{background: url("../img/date.png") 0 50% no-repeat;}
#select .sorting a.popular{background: url("../img/like.png") 0 50% no-repeat;}
#select a.like{position: relative; top: 3px; background: url("../img/like_b.png") 0 50% no-repeat; color: #242424; display: inline-block; padding: 5px 0 2px 25px; font-family: 'latoblack'; float: left;}
#select li a.btn{float: right; color: #242424; font-family: 'latoblack'; height: 25px; border-radius: 25px; padding: 0 30px; border: 3px solid #242424; line-height: 25px;}
#select li a.btn:hover{background: #ffc80a; border-color: #ffc80a;}
#select p.title{font-size: 24px; font-family: 'latoblack'; text-align: center;}
#select ul{display: inline-block; width: 100%; margin-bottom: 30px;}
#select ul li{width: 31%; margin: 0 1% 5px; float: left; padding: 35px 12px; box-sizing: border-box;}
#select ul li:hover{background: #fff;}
#select .template{margin: 15px 0;}
#select .template img{max-width: 100%;}
#select span{font-size: 20px; font-family: 'latoblack'; float: left; position: relative; top: 5px; margin-left: 20px;}
#breadcrumbs{font-family: 'latoblack'; margin-bottom: 33px;}
#breadcrumbs ul{border-bottom: 1px solid #b4b4b4; padding: 17px 0; display: inline-block; width: 100%;}
#breadcrumbs li{float: left;}
#breadcrumbs li span{display: inline-block; width: 13px; height: 9px; background: url("../img/breadcrumbs_arr.png") 50% 50% no-repeat; margin: 0 7px;}
#breadcrumbs li a{color: #b4b4b4;}
#edit{background: url("../img/edit.jpg") 50% 0 no-repeat; background: url("../img/bg_order.jpg") 50% -430px no-repeat;}
#edit h1{font-weight: normal; font-size: 24px; font-family: 'latoblack'; margin-bottom: 55px;}
#edit .template{float: left; width: 800px; text-align: center;}
#edit .template .btn{margin-top: 30px;}
#edit .info{float: right; width: 350px;}
#edit .info label{display: inline-block; width: 100%; padding: 0 0 10px 15px; box-sizing: border-box; font-size: 18px; font-family: 'latoblack';}
#edit .info input[type="text"]{height: 40px; border: 1px solid #b4b4b4; border-radius: 40px; box-sizing: border-box; width: 100%; padding: 0 15px;}
#edit .info input[type="text"].full{width: 100%;}
#edit .info input[type="text"].code{float: right; width: 70px; text-align: center;}
#edit .info input[type="text"].number{float: right; width: 290px; margin-left: 10px;}
#edit .info input[type="text"],#edit .info select,#order select{margin-bottom: 16px; -webkit-appearance: none;}
#edit .info select,#order select{height: 40px; border-radius: 40px 0 0 40px; border: 1px solid #b4b4b4; float: left; padding: 0 0 0 15px; width: 140px; box-sizing: border-box; font-size: 18px; font-family: 'latoblack'; background: url("../img/arr.png") 94% 50% no-repeat;}
#edit .info select.size{border-radius: 0 40px 40px 0; width: 60px; border-left: none; background-position: 85% 50%;}
#order select{width: 70px; text-align: center; border-radius: 40px; float: right; background-position: 85% 50%;}
#edit .info a{display: inline-block; height: 40px; width: 40px; border-radius: 50%; text-align: center; line-height: 40px; color: #242424; font-size: 18px; background: #f2f3f5; margin-left: 10px; float: left;}
#edit .info a.active,#edit .info a:hover{background: #b4b4b4}
#edit .info a.bold{font-family: 'latoblack';}
#edit .info a.italic{font-style: italic;}
#edit .info a.under{text-decoration: underline;}
#edit a.color-back{display: inline-block; width: 200px; height: 40px; background: url("../img/color_back.png") 50% 50% no-repeat; border-radius: 0; margin-bottom: 16px;}
#edit a.color-font{display: inline-block; width: 200px; height: 40px; background: url("../img/color_font.png") 50% 50% no-repeat; border-radius: 0; margin-bottom: 16px;}
#edit span{font-size: 18px; font-family: 'latoblack'; float: left; position: relative; top: 12px; left: 15px;}
#edit .car{text-align: center; margin: 60px 0 25px;}
#edit .content{font-size: 18px; line-height: 1.3;}
#edit .content p{margin-bottom: 20px;}
#order{font-size: 18px; font-family: 'latoblack'; background: url("../img/bg_order.png") 50% 0 no-repeat; padding: 145px 0 70px;}
#order table{display: block; margin: 0 auto; width: 750px;}
#order table img{width: 200px;}
#order table td{padding-bottom: 10px; vertical-align: middle; position: relative;}
#order table td:nth-child(1){width: 105px; text-align: right;}
#order table td:nth-child(2){width: 225px; padding-left: 40px;}
#order table td a.btn{position: absolute; top: -9px; left: 0}
#order .orders{width: 880px; margin: 0 auto;}
#order .orders label{margin-bottom: 10px; display: inline-block; width: 100%;}
#order .orders .preview{width: 200px; float: left;}
#order .orders .preview img{width: 200px;}
#order .orders .count{width: 100px; float: left; padding-left: 20px;}
#order .orders .summ{float: left; width: 100px; padding-left: 50px;}
#order .orders .summ label{margin-bottom: 23px;}
#order .orders .button{float: left; padding-left: 20px; text-align: center;}
#order .orders .button a.cart{display: block; font-size: 16px; color: #242424; margin-top: 10px; line-height: 1.3; text-decoration: underline;}
#order .orders .button a.cart:hover{text-decoration: none;}
input[type="text"]{font-size: 18px; font-family: 'latoblack';}
footer{background: url("../img/bg_footer.png") 0 0 repeat; color: #fff; padding-bottom: 80px;}
footer a{color: #fff;}
footer .top{height: 10px; width: 100%; background: url("../img/bg_f_top.png") 50% 0 repeat-x; margin-bottom: 75px;}
footer .info{float: left; font-size: 18px; margin: 0 110px 0 0;}
footer .info a{font-size: 24px; font-family: 'latoblack'; margin-bottom: 30px; display: inline-block;}
footer .info b{font-size: 24px; font-weight: normal; display: block; font-family: 'latoblack'; margin-bottom: 5px;}
footer .navigation{float: left; font-size: 18px;}
footer .navigation li{margin-bottom: 13px}
footer .navigation li a:hover{text-decoration: underline;}
footer .vk{float: right;}
footer .in{float: right; margin-left: 20px;}
.center{width: 100%; display: inline-block; text-align: center;}
.clearfix{display: inline-block; width: 100%; height: 0px;}
a{text-decoration: none; transition: all 0.5s ease-out;}
a:hover{transition: all 0.5s ease-out;}
.btn{display: inline-block; text-align: center; cursor: pointer; border: none; transition: all 0.5s ease-out;}
.btn:hover{transition: all 0.5s ease-out;}
.btn-load{font-size: 22px; transition: all 0s ease-out; color: #242424; font-family: 'latoblack'; box-shadow: 0px -3px 18px 0px rgba(0, 0, 0, 0.2); width: 300px; height: 70px; line-height: 70px; border-radius: 70px; background: url("../img/btn_load.png") 50% 0 no-repeat;}
.btn-load:hover{transition: all 0s ease-out; background: url("../img/btn_load.png") 50% 100% no-repeat; box-shadow: 0px -3px 30px 0px rgba(0, 0, 0, 0.35);}
/*responsive*/
@media screen and (max-width: 1240px){
.inner{width: 98%; padding: 0 1%;}
header .site-info h1{font-size: 16px;}
header .site-info{font-size: 14px;}
header nav ul li{margin: 0}
header nav ul li a{font-size: 16px;}
#repost p{margin-left: 240px; font-size: 22px;}
#repost span{font-size: 65px;}
#select .block-title{font-size: 24px;}
#select li a.btn{padding: 0 15px;}
footer{text-align: center;}
footer .info{width: 100%; margin: 0 0 20px; text-align: center;}
footer .info b{display: inline-block;}
footer .navigation{width: 100%; margin: 0 0 20px; text-align: center;}
footer .navigation li{display: inline-block; margin: 0 10px; font-size: 16px;}
footer .in,footer .vk{float: none; display: inline-block; margin: 0 0 20px;}
#edit .template{width: 60%;}
#edit .template img{max-width: 100%;}
#edit .info{width: 38%;}
#edit .car{margin: 0;}
#edit .car img{max-width: 100%;}
}
@media screen and (max-width: 960px){
header nav ul li a{font-size: 14px; padding: 0 10px;}
#promo .info h2{font-size: 22px; text-align: center;}
#promo .info ul{width: auto; display: block; margin: 10px 0;}
#promo .info ul li{font-size: 14px; text-align: center; padding: 0; background: none!important}
#promo .btn{margin: 10px 0; width: 100%; background-size: 100% 100%;}
#edit .template{width: 100%; margin-bottom: 20px; text-align: center;}
#edit .info{width: 100%;}
#edit .info input[type="text"].code,#edit .info input[type="text"].number{float: none; margin-left: 10px;}
#edit .info input[type="text"].number{margin-left: 30px;}
#order .orders .preview,#order .orders .count,#order .orders .summ,#order .orders .button{width: 100%; text-align: center; padding: 5px 0;}
#order select{float: none;}
}
@media screen and (min-width: 768px){
header nav ul{display: inline-block!important;}
}
@media screen and (max-width: 768px){
header .social,header .phones,header .logo,header .site-info,header .cart{width: 100%; text-align: center; line-height: normal; margin: 5px 0 0}
header{background: none}
header .phones p{margin: 0}
header .phones a{font-size: 14px; top: 0; font-family: 'latoblack';}
header .site-info{position: relative; display: inline-block; top: 0; margin: 10px 0; line-height: 1.4;}
header .cart{margin: 0}
header .cart div{display: inline-block;}
header .cart .btn{display: block; margin: 0 auto}
header .social,header .phones,header .cart,header .site-info{display: none;}
header nav{margin: 0;}
header .logo{top: -10px;}
header nav ul{display: none; background: #fff;}
header nav .pull{display: block; width: 100%; height: 40px; line-height: 40px; color: #242424; box-sizing: border-box; padding: 0 2%; font-family: 'latoblack'; font-size: 18px; background: url("../img/pull.png") 98% 50% no-repeat;}
header nav{height: 40px;}
header nav ul li{width: 100%; padding: 0; margin: 0; box-sizing: border-box;}
header nav ul li a{width: 100%; padding: 0 2%; border-bottom: 1px solid #242424; border-radius: 0!important; box-sizing: border-box; margin: 0; text-decoration: none; height: 35px; line-height: 35px; text-align: left; background: none!important; color: #242424!important}
header nav ul li a span{text-decoration: none; border: none;}
/*header nav .pull{font-size: 0px!important; width: 40px; height: 40px;}*/
#promo .info{width: 250px; float: none; margin: 0 auto; background: #fff; border-radius: 10px; padding: 15px; color: #242424; margin-top: 150px;}
#repost p{margin-left: 0px; font-size: 16px; text-align: center; padding: 0; width: 100%;}
#repost span{font-size: 40px; position: relative; top: ; display: inline-block; width: 100%; text-align: center; margin-top: 15px;}
#select ul li{width: 48%;}
.btn-load{width: 270px;}
#order table td{display: inline-block; width: 100%!important; text-align: center!important; padding: 0 0 5px!important}
#order table{width: 100%;}
#order table td a.btn{position: relative; top: 0;}
#order table tr{width: 100%; display: inline-block;}
#order select{float: none;}
}
@media screen and (max-width: 560px){
#select ul li{width: 98%;}
#select p.title{font-size: 20px;}
}
@media screen and (max-width: 460px){
header .phones a{display: inline-block; width: 100%; margin-top: 10px;}
}
/*responsive*/