.tabloid.nowp:hover .optional {
  display: block;
}
.optional {
  display: none;
}
/* .wrap .item.product.sku {
  width: 100% !important;
  display: flex;
}
.slideBox.productList {
  display: flex;
} */


.openWebFormModal{
color: black;
    width: 100%;
    height: 20px;
    display: block;
    font-size: 0px;
    width: 0px;

}

.openWebFormModalOnhandMy {
  display: inline-block !important;
  color: black;
  width: initial;
  width: 100%;
  font-size: 14px;
  border:1px solid #fcb514;
  border-radius:4px;
  line-height: 45px;
  height: 45px;
  font-weight: 600;
  text-align: center;

}


.openWebFormModal:hover{
color:red;	

}


.open-button{
    color:#FFF;
    background:#0066CC;
    padding:10px;
    text-decoration:none;
    border:1px solid #0157ad;
    border-radius:3px;
}
 
.open-button:hover{
  /*  background:#01478e;*/
}
 
.popup {
    position:fixed;
    top:0px;
    left:0px;
  /*  background:rgba(0,0,0,0.75);*/
    width:100%;
    height:100%;
    display:none;
}
 
/* Popup inner div */
.popup-content {
    width: 250px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px;
    margin-top: 100px;
 /*   box-shadow: 0px 2px 6px rgba(0,0,0,0.01);*/
/*box-shadow:0 16px 24px rgb(68 92 130 / 14%), 0 6px 30px rgb(68 92 130 / 12%), 0 8px 10px rgb(68 92 130 / 20%);*/
/*box-shadow: 1px 2px 0 3px rgba(198, 198, 198, 0.3);*/
box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(255 255 255);

    border-radius: 3px;
    background: #fff;
    position: relative;
}
 
/* Popup close button */
.close-button {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 14px;
    right: 1px;
    border-radius: 20px;
   /* background: rgba(0,0,0,0.8);*/
/*background: url(/bitrix/templates/dresscodeV2/images/exit.png) 0 0 no-repeat transparent;*/
   /* font-size: 20px;*/
    text-align: center;
    color: black;
    text-decoration:none;
content:'★';
}
 
.close-button:hover {
  /*  background: rgba(0,0,0,1);*/
}







/* Контейнер */
.modal {


/* Трансформации прозрачности при открытии  */
-webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;
    opacity: 0;
    pointer-events: none;
    display: flex;
    top: 50%;
    left: 50%;
    margin-top: 500px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

/* Скрываем изначально */
opacity: 0;
pointer-events: none;
}

/* Показываем модальное окно */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* Содержание */
.modal > div {
width: 300px;
    height: 50px;
    background: #fff;
    position: absolute;
    /* margin: 10% auto; */
    -webkit-animation: minimise 500ms linear;
    padding: 30px;
    -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.5);
    box-shadow: 0 3px 20px rgb(0 0 0 / 50%);
    /* top: 50%; */
    /* left: 50%; */
    /* margin-left: -100px; */
    /* margin-top: -75px; */
    z-index: 111;
    -webkit-animation: minimise 500ms linear;
    padding: 30px;
    -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.5);
    box-shadow: 0 3px 20px rgb(0 0 0 / 50%);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

/* По умолчанию минимизируем анимацию */
-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */
padding: 30px;
/*-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);*/
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.5);
box-shadow: 0 3px 20px rgba(0,0,0,0.5);
/*background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(255,255,255)), color-stop(0.57, rgb(230,230,230)));
text-shadow: 0 1px 0 #fff;*/
}


/* Ссылка на кнопку Закрыть */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Сбрасываем изменения */
.modal a[href="#close"]:focus {
outline: none;
}

/* Создаем кнопку Закрыть */
.modal a[href="#close"]:after {
    content: '×';
    display: block;
    position: absolute;
    right: -15px;
    top: 5px;
    width: 1.5em;
    padding: 1px 1px 1px 2px;
    color: #000;
    font-size: 40px;
    font-family: Times;
}

/* Открываем модальное окно */
a.openModal {
margin: 1em auto;
display: block;
width: 200px;
background: #ccc;
text-align: center;
padding: 10px;
-moz-border-radius: 7px;
border-radius: 7px;
background: -moz-linear-gradient(#fff, #ddd);
background: -webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
text-shadow: 0 1px 0 #fff;
border: 1px solid rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

a.openModal:hover,
a.openModal:focus {
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(200,200,200)));
}



input:focus, a{
	outline: none;
text-decoration: none;
}


/*css для  кнопок мессенджеров - Вотсап, Телеграм, Вайбер и др*/

#link{
right: 0;
bottom: 0;	
text-align: center;
color: white;
text-decoration: blink;
position: fixed;
background: red;
border-radius: 50%;
width: 40px;
line-height: 40px;
margin-right: 10px;
margin-bottom: 15px;
   animation-duration: 3s;
   animation-delay: 2s;
   animation-iteration-count: 3;			
		}
		
      #okno {
        width: 40px;
        /*height: 50px;
        text-align: center;
        padding: 15px;
        border: 3px solid #0000cc;
        border-radius: 10px;
        color: #0000cc;*/
        display: none;
        position: fixed;
		text-align: center;
  		color: white;
  		cursor: pointer;
		right: 0;
    	bottom: 0;
		margin-right: 10px;
		margin-bottom: 15px;
		z-index: 100;
		background: white;
		  
		 
      }
      #okno:target {display: block;}


    .close1 {
        display: inline-block;
background: url(/bitrix/templates/dresscodeV2/images/exit.png) 0 0 no-repeat transparent;
    height: 21px;
    width: 20px;
    float: right;
    margin-right: 20px;
        /*border: 1px solid #0000cc;*/
        color: #0000cc;
        /*padding: 0 12px;*/
        margin-top: 20px;
        text-decoration: none;
        /*background: #f2f2f2;*/
        font-size: 14pt;
        cursor:pointer;
      }


/* .close:hover {background: #e6e6ff;}*/

/*конец css для  кнопок мессенджеров - Вотсап, Телеграм, Вайбер и др*/

/* css для всплывающей доставки */

.fig{margin: 3px;
    border: 3px;
    border-style: ridge;}	

.up{align-content: center; z-index: 1}
	
.hover-block{
max-width:650px;
/*background:#176387;*/
background:#fbae17;
font-size:18px;
border:3px solid #2BA2DB;
padding:2px;
margin:auto;
/*margin-bottom:20px;*/
text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	
	
}
.hidden-block-initial{
position: absolute;
margin-top: 120px;
width:530px;
background:#176387;
font-size:14px;
border:3px solid #2BA2DB;
padding:2px;
margin:auto;
text-align:center;
opacity:0; /*Элемент полностью прозрачный (невидимый)*/
/*transition: 0.5s; Скорость перехода состояния элемента*/
}	
	.hidden-block{opacity:0; position: absolute; z-index: 0; font-size:14px; border: 3px;
    border-style: ridge; width: 631px;}
		
	.hb1{margin-top: 150px;}
	.hb2{margin-top: 150px;}
	.hb3{margin-top: 150px;}
	.hb4{margin-top: 320px;}
	.hb5{margin-top: 320px;}
	.hb6{margin-top: 320px;}
	
	
	.even{
	/*position: absolute;*/
		
	background: gray; 
	
    display: inline-flex;
    height: auto; }
	
	
	.leftblock{
	width: 300px; display: inline-block; margin: 10px;	
		
	}
	.rightblock{width: 300px; display: inline-block; margin: 10px; border-left: thick; border-left-style: dashed; border-left-width: 2px; border-left-color: aliceblue;}
	
	
	
/*прошлый селектор
.on-hover:hover .hidden-block0{
opacity:1;
position: absolute;
margin-top:120px;
transition: 0.5s;
}
*/
	
	
.mar:hover+ .hidden-block{
position: absolute;
z-index: 2;
opacity:1;
transition: 0.5s;}
	
.up:hover+ .hb1{margin-top: 160px;}
	
.up:hover+ .hb2{margin-top: 160px;}
	
.up:hover+ .hb3{margin-top: 160px;}
	
.up:hover+ .hb4{margin-top: 320px;}

.up:hover+ .hb5{margin-top: 320px;}
	
.up:hover+ .hb6{margin-top: 320px;}	
	
	
	
	
@media screen and (max-width: 670px) 
{
.hover-block{
max-width:450px;
	background:#fbae17
/*background:#176387;*/
/*background:green;*/
font-size:16px;
border:3px solid #2BA2DB;
padding:2px;
margin:auto;
/*margin-bottom:20px;*/
text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
	
.hidden-block{opacity:0; position: absolute; z-index: 0; font-size:13px; border: 3px;
    border-style: ridge; width: 440px;}
	
.leftblock{width: 200px; display: inline-block; margin: 10px;}
.rightblock{width: 200px; display: inline-block; margin: 10px; border-left: thick; border-left-style: dashed; border-left-width: 2px; border-left-color: aliceblue;}	
	
.hb1{margin-top: 150px;}
.hb2{margin-top: 150px;}
.hb3{margin-top: 320px;}
.hb4{margin-top: 320px;}
.hb5{margin-top: 440px;}
.hb6{margin-top: 440px;}
	
.up:hover+ .hb1{margin-top: 160px;}
.up:hover+ .hb2{margin-top: 160px;}
.up:hover+ .hb3{margin-top: 330px;}
.up:hover+ .hb4{margin-top: 330px;}
.up:hover+ .hb5{margin-top: 450px;}
.up:hover+ .hb6{margin-top: 450px;}		
	
	}
	
	
	
@media screen and (max-width: 480px) 
{
	
.hover-block{
max-width:370px;
	background:#fbae17
/*background:#176387;*/
/*background:violet;*/
font-size:16px;
border:3px solid #2BA2DB;
padding:2px;
margin:auto;
/*margin-bottom:20px;*/
text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}	

	
	.even{
	/*position: absolute;*/
		
	background: gray; 
	height:auto;
    display: grid;
    }
	.hidden-block{width: 280px;}
	
	
.rightblock{width: 250px; border-top: thick; border-top-style: dashed; border-top-width: 2px; border-top-color: aliceblue; border-left:none;}
.leftblock{width: 250px;}	
	
	
.hb1{margin-top: 150px;}
.hb2{margin-top: 290px;}
.hb3{margin-top: 450px;}
.hb4{margin-top: 600px;}
.hb5{margin-top: 750px;}
.hb6{margin-top: 900px;}

.up:hover+ .hb1{margin-top: 160px;}
.up:hover+ .hb2{margin-top: 315px;}
.up:hover+ .hb3{margin-top: 475px;}
.up:hover+ .hb4{margin-top: 635px;}
.up:hover+ .hb5{margin-top: 790px;}
.up:hover+ .hb6{margin-top: 945px;}	
	
	}

/* конец css для всплывающей доставки */


/* начало css для формы быстрого заказа */

/* конец css для формы быстрого заказа */




/* начало css разворачивание текста оплат */
/* Убираем стандартный маркер Chrome */
details summary::-webkit-details-marker {
  display: none
}
/* Убираем стандартный маркер Firefox */
details > summary {color: blue; cursor: pointer;
 /* list-style: none; */
}

/* Добавляем собственный маркер для закрытого состояния 
details summary:before {
  content: '\f0fe';
  font-family: "Font Awesome 5 free";
  margin-right: 7px;
}*/

/* Добавляем собственный маркер для открытого состояния 
details[open] summary:before {
  content: '\f107';
}*/
	
	
	
	
	
	
	
	
	
	

input+div.content {
display: none;
position: absolute;
background-color: white;
border: 1px solid;
border-block-style: groove;
z-index: 10;
padding: 10px;
border-collapse: initial;
}
	
input:focus + div.content {
  display: block;
 outline: none !important;
    box-shadow: none !important;
border: none;
}

	div.content:hover {
  display: block;
}

/* конец css разворачивание текста оплат */