/* ДИЗАЙН */
html {
scroll-behavior: smooth;
}
body, td {font: 12px Arial, Helvetica, sans-serif; text-align:justify;}
body { margin:0; padding:0;}
.cover {
width: 100%;
width: calc(100% - 10px);
padding:0px 5px 0px 5px;
max-width: 1000px;
margin: 0 auto;
}
.top {
text-align:right;
display: flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-end;
width: 100%;
height: 40px;
}
.top_lite {
text-align:center;
display: flex; flex-wrap:wrap; justify-content:center; align-items:center;
width: 100%;
height: 40px;
background-color:#dddddd;
}
.header {
width:100%;
background-image:url('design/header.jpg');
background-size: cover;
}
.menu_but {
position: fixed;
width: 40px;
height: 40px;
top:0;
left: 50%;
margin-left: -50%;
background-size: cover;
background-image:url('design/menu.svg');
cursor:pointer;
z-index:6000;
}
.content {
width: 100%;
margin:20 0 20 0;
min-height: 700px;
}
.footer {
width: 100%;
min-height: 31px;
margin-top: 50px;
background-color:#dddddd;
}
hr {
width:90%;
border: 0;
height: 1px;
background: #000;
background-image: -webkit-linear-gradient(left, #fff, #000, #fff);
background-image: -moz-linear-gradient(left, #fff, #000, #fff);
background-image: -ms-linear-gradient(left, #fff, #000, #fff);
background-image: -o-linear-gradient(left, #fff, #000, #fff);
}
.img_menu{
text-align:center;
margin:20 0 20 0;
}
.img_menu img{
margin:10px;
width:300px;
height: 225px;
border: 1px solid #000;
box-shadow: 0 0 5px;
opacity:1;
}
.img_menu img:hover { opacity:0.8; animation: img_menu_hover 0.4s 1 forwards; }
/* img menu */
.i_menu img {
width: 99%;
max-width: 400px;
margin-bottom: 5px;
border: 1px solid #000;
border-radius: 10px;
}
.i_menu div {
margin-bottom: 30px;
}
.i_menu div div {
text-align:center;
border: 1px solid #000;
border-radius: 10px;
background-color:#63acfd;
background: linear-gradient(to top, #4ea2ff, #c3dffe);
}
.i_menu div div a {
display: block;
font-size: 22px;
padding: 10 0 10 0;
}
.i_menu div:hover div a {
color: #fff;
text-shadow: #000 0 0 7px;
}
/* img menu */
@keyframes img_menu_hover{
0% { opacity:1; }
100% { opacity:0.8; box-shadow: 0 0 15px; }
}
.case_l, .case_r{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
margin-bottom: 50px;
}
.box_kat {
width: 100%;
max-width: 380px;
text-align:center;
padding: 20 0 20 0;
}
.img img {
width: 100%;
max-width: 600px;
animation: img 4s infinite step-end;
}
@keyframes img{
0% {opacity:1;}
50% {opacity:0;}
}
.img {background-size: cover;}
.case_l .img {background-image:url('3d/shkaf/600x450/k-ks4-0011.jpg');}
.case_r .img {background-image:url('photos/600x450/photos_0064.jpg');}
/* ДИЗАЙН */
/* ОФОРМЛЕНИЕ */
.fb { display:flex; }
.f-c { flex-direction:column; }
.f-r { flex-direction:row; }
.f-w { flex-wrap:wrap; }
/*Главная ось*/
.j-s { justify-content:flex-start; }
.j-c { justify-content:center; }
.j-e { justify-content:flex-end; }
.j-sb { justify-content:space-between; } /*По краям*/
.j-sa { justify-content:space-around; } /*Равномерно*/
/*Поперечная ось*/
.a-s { align-items:flex-start; }
.a-c { align-items:center; }
.a-e { align-items:flex-end; }
.box_flex { display:flex; flex-direction:column; justify-content:center; align-items:center;}
.content_flex { display:flex; flex-direction:column; justify-content:space-between; margin:5px;}
.content_flex div { width:100%;}
.content_flex_wrap { display: flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-start;}
p {
width: calc(100% - 10px);
padding: 0px 5px 0px 5px;
}
h1 {font-size:105%;}
h2 {font-size:104%;}
h3 {font-size:103%;}
h4 {font-size:102%;}
h5 {font-size:101%;}
.but_mob {
width:70%;
max-height: 40px;
min-width: 250px;
max-width: 500px;
text-align:center;
background-color:#e9e9e9;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
text-transform: uppercase;
font-weight:bold;
color:#000;
border: 1px solid #000;
background: linear-gradient(to top, #dd8a02, #fff25d);
}
.but_mob a {
display: block;
height: 100%;
max-height: 40px;
margin: 10;
}
.cat_price {
height: 45px;
width: 300px;
text-align:center;
border: 1px solid #000;
background: linear-gradient(to top, #dd8a02, #fff25d);
margin: 0 auto; margin-bottom: 20; margin-top: 20;
}
.cat_price a {
display: block;
height: 100%;
padding: 15 0 15 0;
text-decoration: none;
font-weight:bold;
font-size:16px;
}
.nobr {white-space:pre;}
.shad1 {box-shadow: 5px 5px 15px #676767;}
.bg1 {background-color:#fdff04;} /*Желтый Яркий*/
.bg2 {background-color:#259a19;} /*Зеленый*/
/* ШРИФТЫ */
a {color:#000;}
.fs11 {font-size:11px;}
.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}
.fs17 {font-size:17px;}
.fs18 {font-size:18px;}
.fs19 {font-size:19px;}
.fs20 {font-size:20px;}
.fs25 {font-size:25px;}
.fs30 {font-size:30px;}
.fs40 {font-size:40px;}
.fs50 {font-size:50px;}
.fs_big {font-size:30px;}
.fs100 {font-size:1em;}
.fs115 {font-size:1.05em;}
.fs110 {font-size:1.1em;}
.fs120 {font-size:1.2em;}
.fs150 {font-size:1.5em;}
.fs200 {font-size:2em;}
.cl0 {color:#000;} /*Черный*/
.cl1 {color:#fff;} /*Белый*/
.cl3 {color:#f64202;} /*Красный*/
.cl4 {color:#33cc33;} /*Зеленый*/
.cl5 {color:#b0b0b0;} /*Серый*/
.cl6 {color:#0078ff;} /*Синий*/
.b {font-weight:bold;}
.b_no {font-weight:normal;}
.tup {text-transform: uppercase;} /*Верхний регистр*/
.dno {text-decoration: none;} /*Убираем подчеркивание*/
/* ШРИФТЫ */
.but-h:hover {opacity:0.6; cursor:pointer;}
.f0 {float:none; clear:both;}
.right {text-align:right;}
.left {text-align:left;}
.center {text-align:center;}
.justify{text-align:justify;}
.w100 {width:100%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w70 {width:70%;}
.w60 {width:60%;}
.w50 {width:50%;}
.w45 {width:45%;}
.w40 {width:40%;}
.w30 {width:30%;}
.w25 {width:25%;}
.w20 {width:20%;}
.mg5 {margin:5px;}
.mg10 {margin:10px;}
.mg20 {margin:20px;}
.mg50 {margin:50px;}
.marg1 {margin:10 0 10 0;}
.marg2 {margin:20 0 20 0;}
.marg3 {margin:30 0 30 0;}
.marg5 {margin:50 0 50 0;}
.mg_t5 {margin-top: 5;}
.mg_t10 {margin-top: 10;}
.mg_t20 {margin-top: 20;}
.mg_t30 {margin-top: 30;}
.mg_t50 {margin-top: 50;}
.mg_t100 {margin-top: 100;}
.mg_t300 {margin-top: 300;}
.mg_b5 {margin-bottom: 5;}
.mg_b10 {margin-bottom: 10;}
.mg_b20 {margin-bottom: 20;}
.mg_b30 {margin-bottom: 30;}
.mg_b50 {margin-bottom: 50;}
.mg_b100 {margin-bottom: 100;}
.mg_b300 {margin-bottom: 300;}
.pd5 { padding: 5px; }
.pd10 { padding: 10px; }
.pd20 { padding: 20px; }
.pd30 { padding: 30px; }
.w_max300 {width:100%; max-width: 300px;}
.w_max350 {width:100%; max-width: 350px;}
.w_max400 {width:100%; max-width: 400px;}
.w_max450 {width:100%; max-width: 450px;}
.w_max500 {width:100%; max-width: 500px;}
.w_max600 {width:100%; max-width: 600px;}
.in_bl {display: inline-block;}
.text {margin-right:10 ; text-align: center;}
.text_1 { color: #FD0202; font-size: 14px; }
.text_2 { font-size: 16px; text-align: center; }
.text_3 { font-size: 30px; text-align: center; }
.text_size_1 { font-size: 10px; }
.oracal {vertical-align: bottom; height:45px; width:150px; text-align: right; margin-bottom:5px ;padding: 5px;}
.attention_1 { color: #12ff00; font-size: 20px; }
.attention_2 { color: #12ff00; font-size: 14px; }
.attention_3 { color: #f6a828; font-size: 17px; }
.attention_4 { color: #12ff00; font-size: 11px; }
ul.pik {
list-style-type: none;
list-style-position:inside;
margin-left:-30px;
}
ul.link {
margin-left:-20px;
margin-bottom: 10;
}
ul.link li {
margin-bottom: 5px;
}
ul.link a {
font-size:14px;
color:#0078ff;
}
.p1 {
width:5px;
height:10px;
border:none;
}
.p2 {
width:5px;
height:5px;
border:none;
margin-left:10
}
.p3 {
width:199px;
height:22px;
border:none;
}
.red {color:FD0202; font-size: 14px;}
.new {font-size: 12px;}
.green_form {color:10cd02; font-weight:bold;}
.green_15 {color:00AE00; font-size: 15px;}
.green_18 {color:00AE00; font-size: 18px;}
.green_20 {color:00AE00; font-size: 20px;}
.rigiy {color:f6a828;}
.box_select {
position: fixed;
left: 50%;
margin-left:-400px;
min-height: 80px;
top: 70px;
width:320px;
background-color:#dddddd;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
}
.desktop {display: none;}
.caption {
width: 90%;
max-width: 450px;
margin:30 0 30 0;
border: 1px solid #000;
border-radius: 8px;
display: inline-block;
padding: 10px;
box-shadow: 10px 10px 20px #7c7c7c;
}
.box_price {
position:absolute;
bottom: 3px;
left: 3px;
border-radius: 8px;
border: 1px solid #000;
background-color:#fff;
box-shadow: 0 0 20px #fff;
}
.box_price a {
display: block;
text-decoration: none;
padding: 2 7 2 7;
}
.butt_calck_2 {
position:absolute;
bottom: 5px;
right: 5px;
width: 35px;
animation: butt_calck_2 3.5s 7s 1;
}
.butt_calck_2:hover {
transform: rotate(-360deg);
transition: 0.4s linear;
width:45px;
}
@keyframes butt_calck_2{
20% { width: 250px; bottom:50%; margin-bottom:-125px; right: 50%; margin-right:-125px; transform: rotate(360deg);}
80% { width: 250px; bottom:50%; margin-bottom:-125px; right: 50%; margin-right:-125px; transform: rotate(360deg);}
}
/* Сообщение фикс */
#mess_top {
/*background-color:#d60000;*/
background-color:#259a19;
text-align:center;
color:#fff;
font-size:27px;
padding: 3px;
}
.mess_top {
width: 100%;
position: fixed;
top: 0; left: 0;
z-index:2;
}
.but_mess{
text-align:center;
width:230px;
border-radius: 5px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 10px;
background-color: #fff;
animation: swing2 6s linear 2s 4;
}
.button_mess_a{
color:#000;
padding:2px;
display: block;
font-size: 18px;
text-decoration: none;
}
@keyframes swing2 {
10% {transform: rotate3d(0, 0, 1, 0deg);}
12% {transform: rotate3d(0, 0, 1, 15deg);}
14% {transform: rotate3d(0, 0, 1, -10deg);}
16% {transform: rotate3d(0, 0, 1, 5deg);}
18% {transform: rotate3d(0, 0, 1, -5deg);}
20% {transform: rotate3d(0, 0, 1, 0deg);}
25% {transform: rotate3d(0, 0, 1, 0deg);}
27% {transform: rotate3d(0, 0, 1, 15deg);}
29% {transform: rotate3d(0, 0, 1, -10deg);}
31% {transform: rotate3d(0, 0, 1, 5deg);}
33% {transform: rotate3d(0, 0, 1, -5deg);}
35% {transform: rotate3d(0, 0, 1, 0deg);}
}
/* Сообщение фикс *
/* Кнопки */
.cur_p:hover {cursor:pointer;}
.button_1{
text-align:center;
width:250px;
border-radius: 2px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
background-color: #c8efff;
background: linear-gradient(to top, #a3e3fe, #c8efff);
}.button_1 a{
padding:7px;
display: block;
font-size: 17px;
text-decoration: none;
}
.button_2{
width:110px;
border-radius: 2px;
border: 1px solid #000;
background-color: #c8efff;
background: linear-gradient(to top, #a3e3fe, #c8efff);
text-align:center;
}.button_2 a{
padding: 3 0 3 0;
display: block;
text-decoration: none;
}
.button_3{
border-radius: 2px;
border: 1px solid #000;
display: inline-block;
margin: 10 0 10 0;
background-color: #c8efff;
background: linear-gradient(to top, #a3e3fe, #c8efff);
}.button_3 a{
padding: 4 10 4 10;
display: block;
text-decoration: none;
}.button_3 a:hover{
background-color: #fdff04;
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
}
.button_4{
text-align:center;
width:250px;
border-radius: 2px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #6afb5b;
background: linear-gradient(to top, #6afb5b, #a3fa9a);
}.button_4 a{
padding:7px;
display: block;
font-size: 17px;
text-decoration: none;
}
.knopka_1 {
height: 30px;
width: 210px;
text-align:center;
border: 1px solid #000;
background: linear-gradient(to top, #dd8a02, #fff25d);
margin: 0 auto; margin-bottom: 15; margin-top: 15;
}
.knopka_1 a {
display: block;
height: 100%;
padding: 8 0 8 0;
text-decoration: none;
font-weight:bold;
font-size:16px;
}
.knopka_2 {
display: table;
height: 50px;
width: 250px;
text-align:center;
border: 1px solid #000;
background: linear-gradient(to top, #dd8a02, #fff25d);
margin: 0 auto; margin-bottom: 15; margin-top: 15;
}
.knopka_2 a {
display: table-cell;
vertical-align: middle;
height: 100%;
text-decoration: none;
font-size:18px;
}
.knopka_3 {
height: 22px;
width: 140px;
text-align:center;
border: 1px solid #000;
background: linear-gradient(to top, #dd8a02, #fff25d);
margin: 0 auto; margin-bottom: 15;
}
.knopka_3 a {
display: block;
height: 100%;
padding: 3 0 3 0;
text-decoration: none;
font-weight:bold;
font-size:14px;
}
.butt_discont {
text-align:center;
border: 1px solid #000;
border-radius: 10px;
display: inline-block;
padding: 5px;
box-shadow: 5px 5px 15px #000;
}
.butt_discont:hover {
background-color: #fdff04;
}
/* Кнопки */
/* Двери купе */
.box_dx, .box_dy{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
.box_dx > div{width: 300px;}
.box_dy > div{width: 225px;}
.box_dx > div, .box_dy > div {
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
border: 1px solid #959595;
border-radius: 5px;
margin-bottom: 50px;
text-align:center;
}
.box_dx > div div, .box_dy > div div {
margin-bottom: 10;
}
.box_dx > div > b, .box_dy > div > b {
color:#f64202;
font-size:16px;
}
.box-butt {
width: 145px; margin: 0 auto;
margin-top: 10px;
margin-bottom: 15px;
background-color: #fdff04;
border: 1px solid #000;
border-radius: 5px;
}
.box-butt a {
display: block;
font-size: 13px;
text-decoration: none;
margin:5px;
}
.box-butt:hover {box-shadow: 0 0 15px 2px #959595;}
.mat a{color:#0078ff; white-space:pre;}
/* Двери купе */
/* Кнопка */
.butt {
color:#000;
padding: 4 12 4 12;
margin: 0 5 0 5;
border: none;
position: relative;
border-radius: 5px;
border: 1px solid #000;
font-weight:bold;
background-color:#fc821f;
background: linear-gradient(to top, #dddddd, #757575);
text-decoration:none;
text-transform: uppercase;
}
.butt:hover {
background: linear-gradient(to top, #757575, #dddddd);
}
/* Кнопка */
.menu_door {
height: 50px;
width:400px;
display: flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
/* ОФОРМЛЕНИЕ */
/* КАРТИНКИ */
.butt_akciya:hover { box-shadow: 0 0 10px 2px;}
.view {width:100%; max-width:600px;}
.window {width:100%; max-width:600px; background-size: cover;}
.bordr {border: 1px solid #000; border-radius: 5px;}
.bord0 {border: 1px solid #000;}
.bord0:hover {opacity:0.8;}
.bord1 {border: 2px solid #000; cursor:pointer;}
.photo {height:160px;}
.photo_y {height:200px; width:150px;}
.photo_x {height:160px; width:215px;}
.photo_y2 {height:200px; width:150px; box-shadow: 4px 4px 15px rgba(122,122,122,0.8);}
.photo_x2 {height:150px; width:200px; box-shadow: 4px 4px 15px rgba(122,122,122,0.8);}
.shkaf_y {width:170px;}
.photopechat {height:120px;}
.material {height:180px;}
.photopechat, .material {margin: 10px; cursor:pointer;}
.photo, .photo_y, .photo_x, .photo_y2, .photo_x2,.shkaf_y {
margin: 10px;
border: 1px solid #000;
cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.photo:hover, .photo_y:hover, .photo_x:hover, .photo_y2:hover, .photo_x2:hover, .shkaf_y:hover, .photopechat:hover, .material:hover {
margin:8 12 12 8;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
}
.view_animate{
display: flex;
flex-wrap:wrap;
text-align: center;
margin-bottom: 50px;
}
.view_animate div{
width: 100%;
margin-bottom: 30px;
}
.flash {width:300px; height:225px;}
@media screen and (min-width: 400px) and (max-width: 799px) {
.flash {width:400px; height:300px;}
}
@media screen and (min-width: 800px) and (max-width: 999px) {
.view_animate div {width: 50%;}
}
@media screen and (min-width: 1000px) {
.flash {width:500px; height:375px;}
}
.video_furn {width:230px; height:173px; margin:10;}
.box_photo { text-align:center; }
.box_photo img {
margin: 10px;
border: 1px solid #000;
cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
}
.box_photo img:hover {
margin:8 12 12 8;
box-shadow: 15px 15px 15px rgba(122,122,122,0.8);
}
.box_photo .y {width: 225px;}
.box_photo .x {width: 300px;}
.f_box {width:100%; text-align:center;}
.f_box img {
border: 1px solid #000;
border-radius: 7px;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
margin: 30 0 30 0;
background-size: cover;
cursor:pointer;
}
.f_box .y { width:100%; max-width:300px; }
.f_box .x { width:100%; max-width:600px; }
.img_profil {width:170px;}
/* КАРТИНКИ */
/* МЕНЮ */
#menu {display: none; padding: 0; z-index: 1000; text-align: center;}
#menu a {
text-decoration: none;
color:#000;
}
#menu a:hover, #menu label:hover {
background-image:url('design/menu-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
}
.l_1 {
text-align: center;
margin: 20 0 20 0;
font-weight: bold;
font-size: 14px;
}
.l_2 {
display: flex;
flex-direction:column;
text-align: center;
margin: 10 0 10 0;
font-weight: normal;
font-size: 12px;
display: none;
z-index: 4000;
padding: 5px;
background-color: #fff;
text-align: center;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
}
.l_1 a { color: #000; }
.l_2 a { color: #0206ad; }
.l_2 div { margin: 10 0 10 0; }
.l_2 div a:hover{ color: #f64202; }
#menu label { cursor:pointer; }
#menu input { position: absolute; visibility: hidden; }
#menu input[type=radio]:checked ~ .l_2 { display: block; }
@media screen and (min-width: 768px) and (max-width: 1199px) {
.top_lite { background-color:#fff; }
.menu_cover {
position: fixed;
top: 0px;
width: 100%;
max-width: 1000px;
background-color:#ddd;
z-index:5000;
}
.cover {
padding-top: 60px;
}
#menu {
display: flex;
flex-wrap:wrap;
justify-content:space-around;
padding:10 0 10 0;
}
.f_box { margin-top: 100px; }
.l_1 { font-size: 13px; margin: 5 0 5 0;}
.l_2 { position: absolute; text-align: left; }
.logo, .skidka {display: none;}
}
@media screen and (min-width: 1200px) {
#menu {
display:block; text-align:center;
position: fixed;
left: 50%;
margin-left:-600px;
top: 40px;
width:200px;
}
}
/* Кнопка каталог с ценами */
a.but_cat {
position: fixed;
top: 70px;
padding: 10 20 10 20;
background-color:#aae953;
background: linear-gradient(to top, #77ac2f, #aae953);
border: 1px solid #000;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
animation: swing 0.5s linear 4s 5;
}
a.but_cat:hover { background: linear-gradient(to bottom, #77ac2f, #aae953); }
/* Кнопка каталог с ценами */
/* МЕНЮ */
/* Горизонтальный блок фото */
.box_photo_horizont {
display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: auto;
position:relative;
}
.box_photo_horizont > div {
flex: 0 0 auto;
margin:5px;
background-size: cover;
background-repeat: no-repeat;
text-align:center;
}
.box_photo_horizont img {
border: 1px solid #959595;
border-radius: 5px;
height: 130px;
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
}
/* Горизонтальный блок фото */
/* Анимированные фото */
/* Фотогалерея маленькие фото */
.box_foto_x {width: 300px;}
.box_foto_y {width: 225px;}
.box_foto_x, .box_foto_y{
margin-bottom: 50px; text-align:center;
border: 1px solid #959595;
border-radius: 5px;
margin-bottom: 50px;
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
}.box_foto_x div:hover, .box_foto_y div:hover{
cursor: pointer;
opacity:0.8;
}
.box_foto_x img, .box_foto_y img, .box_screen .door {
animation: box_foto 6s infinite;
}@keyframes box_foto{
10% {opacity:1;}
40% {opacity:1;}
60% {opacity:0;}
90% {opacity:0;}
}
/* Фотогалерея маленькие фото */
/* Фотогалерея средняя */
.box_foto{
position: relative;
width: 100%; max-width: 450px;
border: 1px solid #959595;
border-radius: 5px;
margin-bottom: 50px;
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
}.box_foto .out{
background-size: contain;
}.box_foto .out:hover{
cursor: pointer;
opacity:0.99;
}
.box_foto > div{
background-size: cover;
}
.box_foto img {
width: 100%; max-width: 450px;
}
.box_foto img, .box_screen .door {
animation: box_foto 6s -1.5s infinite;
}@keyframes box_foto{
10% {opacity:1;}
40% {opacity:1;}
60% {opacity:0;}
90% {opacity:0;}
}
/*
.box_photo {
border: 1px solid rgba(122,122,122,0.8);
border-radius: 5px;
background-color:#fff;
box-shadow: 4px 4px 15px rgba(122,122,122,0.8);
margin-bottom: 50px;
}
*/
.mr_x {margin: 0px 5px 0px 5px;}
/* Фотогалерея средняя */
/* BIG фото */
.box_fon{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;
background-color:#fff;
opacity: 0.85;
}
.box_screen {
position: fixed;
top: 50%;
left: 50%;
z-index: 10000;
background-color:#fff;
box-shadow: 0 0 20px;
}
.box_screen_sub{
position:relative;
background-size: cover;
}
.close{
position: absolute;
top: 3;
right: 3;
margin-bottom: 0px;
width: 35px;
cursor: pointer;
opacity:0;
animation: close 0.5s 1s 1 forwards;
}@keyframes close{
100% {opacity:1;}
}
/* BIG фото */
/* Анимированные фото */
/* БЛОК (Каталог) */
#cat a {line-height: 2; color:#0078ff;}
#cat {
background-color:#dddddd;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 10px 10px 15px rgba(122,122,122,0.8);
margin-bottom: 150;
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
#cat {animation: cat_1000 1s 10s 1 forwards;}
@keyframes cat_1000{
0% {position: fixed; top: -300px; left: 50%; margin-left: -450px;}
100% {position: fixed; top: 150px; left: 50%; margin-left: -450px;}
}
}
@media screen and (min-width: 1200px) {
#cat {animation: cat_1200 1s 10s 1 forwards;}
@keyframes cat_1200{
0% {position: fixed; top: -300px; left: 50%; margin-left: -350px;}
100% {position: fixed; top: 150px; left: 50%; margin-left: -350px;}
}
}
.cap {animation: swing 0.6s linear 30s 10;}
/* БЛОК (Каталог) */
/* Формы */
.button{
width:150px;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
padding:7px;
background:#80b438;
color:#FFF;
font-size: 15px;
cursor:pointer;
font-weight:bold;
}
.select{
width:65px;
border-radius:3px;
border:1px solid #000;
padding:3px;
background:#fff;
font-size: 15px;
cursor:pointer;
font-weight:bold;
}
.button_submit{
width:250px;
border-radius: 5px;
border:rgba(0,0,0,.3) 0px solid;
padding:15px;
background:#259a19;
color:#FFF;
font-size: 15px;
cursor:pointer;
}
.button_submit:hover {
box-shadow: 5px 5px 15px #b4b4b4;
}
.input_mail{
height:40px;
width:250px;
}
.form_calck .form-group{padding:1em;margin:1em}
.form_calck input[type=file]{outline:0;opacity:0;pointer-events:none;user-select:none}
.form_calck .label{width:120px;border:2px dashed grey;border-radius:5px;display:block;padding:1.2em;transition:border 300ms ease;cursor:pointer;text-align:center}
.form_calck .label i{display:block;font-size:42px;padding-bottom:16px}
.form_calck .label i,.form_calck .label .title{color:grey;transition:200ms color}
.form_calck .label:hover{border:2px solid #000}
.form_calck .label:hover i,.form_calck .label:hover .title{color:#000}
/* Формы */
/* БЛОК (Каталог новый) */
.butt_cat{
width: 140px;
height: 40px;
border-spacing: 0;
border-collapse: separate;
background-size: cover;
background-image:url('img/bg_cat.svg');
z-index: 100;
}
.butt_cat .t1{
width: 40px;
text-align:center;
}
.t1i {
width: 32px;
animation: t1i 1.2s infinite;
}
@keyframes t1i{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@media screen and (max-width: 1000px) {
.butt_cat{
animation: butt_cat 1s 8s 1 forwards;
}
@keyframes butt_cat{
0% {position: fixed; left: 3px; bottom: 100%;}
100% {position: fixed; left: 3px; bottom: 3px;}
}
}
@media screen and (min-width: 1000px) {
.butt_cat{
margin-left: 100px;
animation: butt_cat 1.2s 8s 1 forwards;
}
@keyframes butt_cat{
0% {position: fixed; top: 50%; margin-top: -60%;}
100% {position: fixed; top: 50%; margin-top: -20px; transform: rotate(720deg);}
}
}
/* БЛОК (Каталог новый) */
/* Страницы с каталогом */
.fl_box {
display: flex;
flex-direction:row;
justify-content:center;
align-items:flex-start;
}
.box_left {
min-width:200px;
max-width:400px;
margin-right:10px;
}
.box_right {
width:100%;
max-width:600px;
}
@media screen and (max-width: 600px) {
.fl_box {
flex-direction:column;
align-items:center;
}
.box_left {
width: 100%;
max-width: 100%;
margin-right:0;
}
}
.f_cover { margin: 5 0 35 0;}
.box_x {
position:relative;
max-width: 600px;
margin: 5 0 5 0;
border: 1px solid #000;
background-size: cover;
}
.box_x:hover .box_price{
background-color:#fdff04;
}
.box_x img {
width: 100%;
max-width: 600px;
}
.box_2_foto {
display: flex;
flex-direction:row;
justify-content:center;
}
@media screen and (max-width: 600px) {
.box_2_foto { flex-direction:column; }
}
.box_y {
position:relative;
max-width: 450px;
margin: 5 5 5 5;
border: 1px solid #000;
background-size: cover;
}
.box_y:hover .box_price{
background-color:#fdff04;
}
.box_y img {
width: 100%;
max-width: 450px;
}
/*.box_x:hover .box_price span, .box_y:hover .box_price span{font-weight:bold;}*/
.shkaf_close {
position:absolute;
top: 0;
left: 50%;
margin-left:-50%;
animation: shkaf_close 4s infinite;
}
@keyframes shkaf_close{
0% { z-index: 0; }
49% { z-index: 0; }
50% { z-index: -1; }
99% { z-index: -1; }
}
.lsh{
position:absolute;
top: 0;
width: 100%;
height: 25px;
background-position: center center;
background-image:url('img/lsh.png');
}
.shkaf_door {
width: 100%;
animation: shkaf_door 4s infinite;
}
@keyframes shkaf_door{
2% { opacity: 1; }
48% { opacity: 1; }
52% { opacity: 0; }
98% { opacity: 0; }
}
/* Страницы с каталогом */
/* АДАПТАЦИЯ */
@media screen and (max-width: 767px) {
.content {margin:1 0 5 0;}
.box_select {left:50%; margin-left:-160px; top: 0px;}
.header {background-image:url('design/header_m.jpg');}
.menu_door {
position: fixed;
left: 50%;
margin-left:-50%;
top: 50%;
margin-top:-75px;
height: 150px;
width:100px;
flex-direction:column;
justify-content:space-between;
}
.menu_img img { animation: swing 0.5s linear 2s 5; }
.photo { height:130px;}
.but-h {width: 150px;}
.fs_big {font-size:20px;}
}
@media screen and (min-width: 768px) {
.box_flex {flex-direction:row; justify-content:center; align-items:flex-start;}
.desktop {display: block;}
.mobile {display: none;}
.box_select {margin-left:-49%; top: 50px;}
.menu_but {display:none;}
.top { background: transparent; }
.header {
background-image:url('design/header.jpg');
background-image:url('design/header.gif'), url('design/header.jpg');
}
.menu_img img {width:20%;}
.but_mob {
width: 200px;
min-width:0;
text-align:left;
background:transparent;
border: none;
padding:0;
margin:0;
margin-top: 5px;
margin-bottom: 5px;
}
@supports (display: flex) {
.content_flex {display:flex; flex-direction:row; justify-content:space-between;}
.content_flex div {width:50%; margin:5px;}
}
h1 {font-size:110%; text-transform: uppercase}
h2 {font-size:109%;}
h3 {font-size:108%;}
h4 {font-size:107%;}
h5 {font-size:106%;}
.box_photo_horizont img { height: 165px; } /* Горизонтальный блок фото */
}
@media screen and (max-width: 1000px) {
.case_l {
flex-direction:column-reverse;
margin-bottom: 80px;
}
.case_r {
flex-direction:column;
margin-bottom: 20px;
}
.box_kat {
width: 100%;
border: none;
}
}
@media screen and (min-width: 1200px) {
.logo {display:block;}
.cover {
position:absolute;
left: 50%;
margin-left:-400px;
top: 0px;
width:1000px;
}
.top_lite { margin-top: 15px; }
.box_select {margin-left:-400px;}
.f_box img { margin: 30 10 30 10; }
.f_box img:hover {
margin:28 12 32 8;
box-shadow: 15px 15px 15px rgba(122,122,122,0.8);
}
}
@media screen and (min-width: 760px) and (max-width: 1199px) {
.baner-3d-calck {display:none;}
}
/* АДАПТАЦИЯ */
.swing {animation: swing 1.2s linear 2s 2;}
.swing_2 {animation: swing 0.3s linear 1s 8;}
.swing_3 {animation: swing 0.3s linear 4s 8;}
.swing_4 {animation: swing 0.3s linear 1s 3;}
.swing_5 {animation: swing 1.5s linear 3s 5;}
.swing_post {animation: swing 1.2s linear 2s infinite;}
@keyframes swing {
50% {transform: rotate3d(0, 0, 1, 0deg);}
60% {transform: rotate3d(0, 0, 1, 15deg);}
70% {transform: rotate3d(0, 0, 1, -10deg);}
80% {transform: rotate3d(0, 0, 1, 5deg);}
90% {transform: rotate3d(0, 0, 1, -5deg);}
100% {transform: rotate3d(0, 0, 1, 0deg);}
}
.m_anim {animation: m_anim 1.25s infinite;}
@keyframes m_anim{
0% {color: #000;}
100% {color: #0078ff;}
}