body{font-family:"Open Sans", sans-serif;}



/* приподнимаем меню menu1 выше к "хлебным крошкам" (app.css:310)  - слипается с заголовком с Составе дизайна 
#menu1 {
    margin-top: -15px;
}
*/

/* приподнимаем меню menu1 выше к "хлебным крошкам" (app.css:190)          padding: 5px 0 10px;       
.breadcrumbs {
    padding: 5px 0 5px;		 
}
*/


/* или это */
/* приподнимаем меню menu1 выше к "хлебным крошкам" (app.css:327) 
.mytextwithicon {
    margin-top: -10px;
}
*/

/* Заголовок H1 отступ перед выпадающее меню в "Стилях" и "Комнатах" menu1  (app.css:24) */

@import url("css/app.css"); 

h1 {
        margin-bottom: 30px;
}



/* приподнимаем выше выпадающее меню в "Стилях" и "Комнатах" menu1  (app.css:310) */

@import url("css/app.css"); 

#menu1 {
    /* background: #FFFFFF;	*/
    /* margin-bottom: 20px;	*/
    /* -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */
    margin-top: -20px;
}


/* увеличиваем отступы между кнопками выпадающего меню в "Стилях" и "Комнатах" menu1  (app.css:312) */

@import url("css/app.css"); 

ul.men li {
margin-right: 5px;	/*	margin-right: 2px;	*/
}

/* Уменьшаем заголовки h4 - Названия категорий в "Стилях" и "Комнатах" menu1  (app.css:312) */

h4 {
    font-family: 'Open Sans';
    font-size: 18px;		/*	font-size: 18px;	*/
    margin-top: 10px; 		/* margin-top: -20px;   */
	/* margin-bottom: 20px; */
}

/* Увеличиваем заголовки Названия категорий в "Стилях" (app.css:60)   -  не сработало   */
.item-proect1 {
    font-size: 18px;				/*  не сработало  */
	border: 0px solid #D8D8D8;		/*	border: 1px solid #D8D8D8;	  	убираем бордюр  у картинки со стилем	*/
	font-weight: normal;			 
}



/* Увеличиваем заголовки Названия категорий в "Стилях" и убираем жирность */
/*     */
.item-proect1 .info-proect .proect-param	 strong, b{
font-size: 17px;		/*	font-size: 16px;	*/
font-weight: normal;
}



/*убираем подчеркивание ссылок название проекта в Групповом показе (app.css:107) */
.item-proect .info-proect .proect-name a {
    text-decoration: none;		/*	text-decoration: underline;	*/
}

/* в app.css - для свайпа на iPhone добавить элементу в стилях свойство "cursor: pointer; - меняем значение в body
@import url("css/app.css");
.row {cursor:pointer;}
li { cursor: pointer; }
*/

/* в app.css стр. 27 - меняем значение header {padding: 1rem 0;}  на  padding: 0rem 0;
*/
@import url("css/app.css");
header {padding: 0.4rem 0;}

/* в app.css стр. 893 - меняем значение margin-bottom:20px; на margin-bottom:10px;
- если включить след. то отступ надо уменьшить еще с 10 до 0px 
*/ 
@import url("css/app.css");
ul.banertit {margin-bottom:5px;}

/* в app.css стр. 905 - меняем значение margin-bottom:10px; на margin-bottom:20px;  --- расстояние между иконками на Главной */
ul.banertit li {margin-bottom:20px;} 


/* в foundation.css стр. 861 Главная - Под Слайдером убираем отступ точки с top:10px до 0px  
@import url("css/foundation.css");
.orbit-bullets {top:0px;}
*/


/* в app.css стр. 903 - меняем значение width:24.5%; на none - в Адаптивной версии для Главной страницы на мобильном - не задается больший размер иконок чем 1/4 ~ 24.5% 
из-за ограничения в стиле banertit:  "width:24.5%;" 
ul.banertit li{display:inline-block;width:24.5%;padding:5px;border-radius:3px;border:1px solid #ececec;margin-bottom:10px;background-color:#f2f2f2;}
.sub-nav dt, .sub-nav dd, .sub-nav li{font-size:14px;}
*/
/*  
@import url("css/app.css");
ul.banertit li{display:inline-block;width:none;padding:5px;border-radius:3px;border:1px solid #ececec;margin-bottom:10px;background-color:#f2f2f2;}
*/

/* цвет фона меню при нажатии на Гамгургер был черный - меняем на серый .top-bar.expanded .title-area{background:#333333;}
.top-bar.expanded .title-area{background:#f2f2f2;}
*/

/* в app.css стр. 887 - создаем стиль btnMail для рамки кн. "Задать вопрос" в Проект подробно */
@import url("css/app.css");
.btnMail{padding:5px 10px;color:#6b6b6b;border:1px solid #c3c3c3;border-radius:3px;font-size:14px;margin-top:50px;cursor:pointer;}
.btnMail:hover{color:#000000;border:1px solid #060606;}

/* в app.css стр. 974 - меняем значение margin-top: 10px; на 0px - убрали верхний отступ на картинкие планировки при групповом показе проекта  */
@import url("css/app.css");
.dynamic {
    margin-top: 0px;
}

/* не пригодилось */
/* в app.css - создаем стиль для кн. "Редактор планировок" по подобию zerkal_butt в Проект подробно 
@import url("css/app.css");
.editor_butt{display:inline-block;font-size:14px;padding:10px 20px;border:1px solid #bdbdbd;}
.editor_butt:hover{border:1px solid #008cba;}
#planEditor h2{font-size:34px;}
#ShopForm{padding:15px;margin-bottom:20px;border:1px solid #E8EDF1;border-radius:5px;}
*/


/* app.css: 255 - выстраиваем в ряд хлебные крошки - добавляем display: inline-flex;   / был вариант с   display: inline-block;  */
@import url("css/app.css");
.breadcrumbs {
    display: inline-block;
}


/*  
! Добавили условие для того что бы Лупа открывалась и на маленьком экране 
по подобию с foundation.css cnh 618
@media only screen and (min-width:40.0625em){.top-bar{background:#333333;overflow:visible;}
.....
}
*/



@media only screen and (min-width:280px) and (max-width:768px){
 
.top-bar {background:#f2f2f2;overflow:visible;} 
 
.top-bar:before, .top-bar:after{content:" ";display:table;}
.top-bar:after{clear:both;}
.top-bar .toggle-topbar{display:none;}
.top-bar .title-area{float:left;}
.top-bar .name h1 a,
.top-bar .name h2 a,
.top-bar .name h3 a,
.top-bar .name h4 a,
.top-bar .name h5 a,
.top-bar .name h6 a{width:auto;}
.top-bar input,
.top-bar select,
.top-bar .button,
.top-bar button{font-size:0.875rem;height:1.75rem;position:relative;top:0.53125rem;}
.top-bar.expanded{background:#333333;}
.contain-to-grid .top-bar{margin-bottom:0;margin:0 auto;max-width:62.5rem;}

.top-bar-section{transition:none 0 0;left:0 !important;}
/* .top-bar-section ul{display:inline;height:auto !important;width:auto;} */
.top-bar-section ul{display:inline;height:auto !important;width:100%;} 
.top-bar-section ul li{float:left;}
.top-bar-section ul li .js-generated{display:none;}
.top-bar-section li.hover > a:not(.button){background-color:#555555;background:#222222;color:#FFFFFF;}
/* кнопки Меню становятся черными:  .top-bar-section li:not(.has-form) a:not(.button){background:#333333;line-height:2.8125rem;padding:0 0.9375rem;}   */
.top-bar-section li:not(.has-form) a:not(.button):hover{background-color:#555555;background:#222222;}
.top-bar-section li.active:not(.has-form) a:not(.button){background:#008CBA;color:#FFFFFF;line-height:2.8125rem;padding:0 0.9375rem;}
.top-bar-section li.active:not(.has-form) a:not(.button):hover{background:#0078a0;color:#FFFFFF;}

.top-bar-section .has-dropdown > a{padding-right:2.1875rem !important;}
.top-bar-section .has-dropdown > a:after{border:inset 5px;content:"";display:block;height:0;width:0;border-color:rgba(255, 255, 255, 0.4) transparent transparent transparent;border-top-style:solid;margin-top:-2.5px;top:1.40625rem;}
.top-bar-section .has-dropdown.moved{position:relative;}
.top-bar-section .has-dropdown.moved > .dropdown{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px;display:block;}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{position:static !important;height:auto;width:auto;overflow:visible;clip:auto;display:block;position:absolute !important;}
.top-bar-section .has-dropdown > a:focus + .dropdown{position:static !important;height:auto;width:auto;overflow:visible;clip:auto;display:block;position:absolute !important;}
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after{border:none;content:"\00bb";top:0.1875rem;right:5px;}
.top-bar-section .dropdown{left:0;background:transparent;min-width:100%;top:auto;}
.top-bar-section .dropdown li a{background:#333333;color:#FFFFFF;line-height:2.8125rem;padding:12px 0.9375rem;white-space:nowrap;}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button){background:#333333;color:#FFFFFF;}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button){background-color:#555555;color:#FFFFFF;background:#222222;}
.top-bar-section .dropdown li label{background:#333333;white-space:nowrap;}
.top-bar-section .dropdown li .dropdown{left:100%;top:0;}
.top-bar-section > ul > .divider,
.top-bar-section > ul > [role="separator"]{border-right:solid 1px #4e4e4e;border-bottom:none;border-top:none;clear:none;height:2.8125rem;width:0;}
.top-bar-section .has-form{background:#333333;height:2.8125rem;padding:0 0.9375rem;}
.top-bar-section .right li .dropdown{left:auto;right:0;}
.top-bar-section .right li .dropdown li .dropdown{right:100%;}
.top-bar-section .left li .dropdown{right:auto;left:0;}
.top-bar-section .left li .dropdown li .dropdown{left:100%;}
.no-js .top-bar-section ul li:hover > a{background-color:#555555;background:#222222;color:#FFFFFF;}
.no-js .top-bar-section ul li:active > a{background:#008CBA;color:#FFFFFF;}
.no-js .top-bar-section .has-dropdown:hover > .dropdown{position:static !important;height:auto;width:auto;overflow:visible;clip:auto;display:block;position:absolute !important;}
.no-js .top-bar-section .has-dropdown > a:focus + .dropdown{position:static !important;height:auto;width:auto;overflow:visible;clip:auto;display:block;position:absolute !important;}


/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - уменьшаем сдвиг с bottom: 305px; до 235pх; (right: -20; до -10;)   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
     /* bottom: 240px; */
    top: 10px;
    right: -10px;
    }
    
    /* "Дизайн" - уменьшаем сдвиг с bottom: 270px; до 235pх; (right: -18; до ;) */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 210px; */
    top: 40px;
    right: -10px;
    }
    
    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }

}




/* ! Тест с Меню */
/*
nav{
    margin:auto;
    width: 800px;
    height: 50px;
}

.topnav{
    background-color: #fff; 
    font-style: 14px;  
    margin-top: 40px;   
}
 
.topnav a{
    color: #000;
    text-align: center;
    padding: 14px 16px;
    font-style: 15px;
}

.topnav a:hover{
    border-bottom: 2px solid #000;
} 
.topnav .icon{
    display: none;    
}


@media screen and (max-width: 768px){
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon{
        float: right;
        margin-top: -17px;
        display: block;
        color: black;
    }
    nav{
        width: 100%;
        height: 100px;
    }
    .topnav.responsive{
        position: relative;
    }
    .topnav.responsive a.icon{
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align-last: left;
    }
}
*/ 


nav{
    /*  margin:auto;  */ 
    /*      width:1024px;     */ 
    height: 50px;
}

.topnav{
    /* background-color: #fff; */ 
    font-style: 14px;  
    margin-top: 10px;   
}
 
.topnav a{
    color: #000;
    text-align: left;
    padding: 4px 9px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-style: 15px;
}

.topnav a:hover{
    border-bottom: 2px solid #000;
}

.topnav .icon{
    display: none;    
}


@media screen and (min-width: 1200px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - уменьшаем сдвиг с bottom: 305px; до 235pх; (right: -20; до -10;)   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 240px; */
    /* top: 10px; */
    right: -20px;
    }
    
    /* "Дизайн" - уменьшаем сдвиг с bottom: 270px; до 235pх; (right: -18; до ;) */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 210px; */
    top: 40px;
    right: -18px;
    }
    
    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }
    
}



@media screen and (max-width: 1200px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - уменьшаем сдвиг с bottom: 305px; до 235pх; (right: -20; до -10;)   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
     /* bottom: 240px; */
    top: 10px;
    right: -10px;
    }
    
    /* "Дизайн" - уменьшаем сдвиг с bottom: 270px; до 235pх; (right: -18; до ;) */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 210px; */
    top: 40px;
    right: -10px;
    }
    
    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }
}



@media screen and (max-width: 1024px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228   */
    /* "Скидка -10%/-30%" - уменьшаем сдвиг с bottom: 305px; до 235pх; (right: -20; до -10;)   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 270px; */
    top: 10px;
    right: -10px;
    }
    /*"Дизайн" - уменьшаем сдвиг с bottom: 270px; до 235pх; (right: -18; до ;) */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 240px; */
    top: 40px;
    right: -10px;
    }
     
    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }
}



@media screen and (max-width: 768px){
    
    .topnav a:not(:first-child) {
        display: none;
		background-color: #f2f2f2; 		/* добавлен фон выпадающим строкам меню: серый  */
    }
	/*
    .topnav a.icon{
        float: right;
        margin-top: 0px;
        margin-right: 0px;
		font-size: 17px;
        display: block;
        color: black;
    }
	*/
	.topnav a.icon{
        float: right;
        margin-top: -12px;
        margin-right: 0px;
		font-size: 1.5rem;
        display: block;
        color: black;
    }
    nav{
        width: 100%;
        height: 50px;
    }
    .topnav.responsive{
        position: relative;
    }
    .topnav.responsive a.icon{
	
		position: static;  			/*	<!-- Положение иконки. Сдвигается влево при нажатии. Ранее:   position: sticky; -->	   */  
        text-align-last: right;
        right: 0;
        top: 0;
    }
    .topnav.responsive a{
        float: none;               
        display: block;
        text-align-last: left;		/*	<!-- text-align-last: right;  Позиция выпадающего текста. Ранее:   text-align-last: left; -->	*/
    /*  margin-left: 15px;             	<!-- отступ выпадающего меню -->      */
    /*  background-color: #f2f2f2;     	<!-- фон выпадающего меню серый (перекрывает всю строку: кнопку "Подобрать" и Лупу)  / Ранее был откл. -->   */
    }
		

/* уменьшаем шрифт кнопки Подобрать (не помещвется иконка бургера на iPhone5 (320px) и экране 280px   */
    .top-bar-section li:not(.has-form) a.cd-dropdown-trigger {
        padding-right: 38px;
        font-size: 0.95rem;
    }	

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - Было: bottom: 305px; right: -20;   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 230px; */
    top: 10px;
    right: -10px;
    }
    /* "Дизайн" - Было: bottom: 270px; right: -18; */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 200px;  */
    top: 40px;
    right: -10px;
    }

    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }
}



@media only screen and (max-width:480px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - Было: bottom: 305px; right: -20;   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 190px; */
    top: 10px;
    right: -10px;
    }
    /* "Дизайн" - Было: bottom: 270px; right: -18; */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 160px; */
    top: 40px;
    right: -10px;
    }

    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }
}

 
@media only screen and (max-width:320px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - Было: bottom: 305px; right: -20;   */
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 150px; */
    top: 10px;
    right: -10px;
    }
    /* "Дизайн" - Было: bottom: 270px; right: -18; */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 120px; */
    top: 40px;
    right: -10px;
    }

    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }

}


@media screen and (max-width: 280px){

/* На моб. иконки "Скидка -10%/-30%" и "Дизайн" излишне смещаются на верх. / app.css:228 стр. 228   */
    /* "Скидка -10%/-30%" - Было: bottom: 305px; right: -20;   */  
    @import url("css/app.css");
    .main-proect figure .sale-image {
    position: absolute;
    /* bottom: 125px; */
    top: 10px;
    right: -8px;
    }
    /* "Дизайн" - Было: bottom: 270px; right: -18; */    
    .main-proect figure .diz-image {
    position: absolute;
    /* bottom: 100px;  */ 
    top: 40px;
    right: -8px;
    }

    .item-proect figure .sale-image {
    position: absolute;
    bottom: 5px;
    right: -10px;
    }
    .item-proect figure .diz-image {
    position: absolute;
    top: 5px;
    right: -10px;
    }

}




/*  Menu-gamburger js  
@import url("js/");
menu.onclick = function myFunction() {
  var x = document.getElementById("myTopnav");

  if(x.className === "topnav") {
    x.className += " responsive";
  } else{
    x.className = "topnav";
  }
}

*/ 


/* в jquery.sidr.light.css стр. 1 - меняем значение width: 300px; на width: 265px;
*/
@import url("css/jquery.sidr.light.css");
.sidr {width: 265px;}
/*
.sidr {
    display:none;
    position:absolute;
    position:fixed;
    top:0;
    height:100%;
    z-index:0;
    width:265px;
    overflow-x:none;
    overflow-y:auto;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size:15px;
    background:#f8f8f8;
    color:#333333;
    -webkit-box-shadow:inset 0 0 5px 5px #ebebeb;
    -moz-box-shadow:inset 0 0 5px 5px #ebebeb;
    box-shadow:inset 0 0 5px 5px #ebebeb;
}
*/


/* foundation.css:437 стр. 437 - в выпадающем Меню "Лупа" - подраздел "Характеристики" выровниваем чексбоксы с их метками в одну строку
добавляем display: inline;
*/
@import url("css/foundation.css");
.showharacter input[type="checkbox"] + label, input[type="radio"] + label {
display: inline;
}