@charset "utf-8";
/* CSS Document */

#prezzi {margin-bottom: 20px;}
#prezzi td, #prezzi th{padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000;}
#prezzi tr:first-child td, #prezzi tr:first-child th{border-top: 1px solid #000;}
#prezzi td:first-child, #prezzi th:first-child{border-left: 1px solid #000;}
#prezzi th{vertical-align: middle; text-align: center; background-color: #f8f7f7;}
#prezzi td:first-child{padding-left: 40px;}
#prezzi .no-first-padding td:first-child{padding-left: 5px;}
#prezzi td.header{padding-left: 5px;}
#prezzi td img{float: left; margin: 0 3px 3px 0;}
#prezzi td img.img-right{float: right;}
#prezzi .no-img-float td img{float: none;}
#prezzi td .more{margin-top: 3px; font-weight: bold;}
#prezzi td .more a{font-weight: normal;}


.how-to-use {max-width:100%;}
@media screen  and (max-width: 320px) {
.how-to-use {max-width:296px;}
}

@media screen  and (max-width: 360px) {
	 #prezzi.no-first-padding td:first-child{padding-left: 50%; border-left:none; border-top:none; font-weight:bold; margin-top:20px; white-space:pre-line;}
		.good-card .how-to-use .block-body {font-size: 14px; font-size: 0.75rem;}
		.how-to-use .block-body {font-size: 14px; font-size: 0.75rem;}
}

@media screen  and (max-width: 799px) {
 
    /* Таблица больше не обычная таблица */
#pricelist table{
        display: block;
    }
 #pricelist thead {
        display: block;
    }
	#pricelist tbody{
        display: block;
    }
	#pricelist th{
        display: block;
    }
	#pricelist td {
        display: block;
    }
		#pricelist tr {
        display: block;
    }
    /* Скрываем заголовки */
#pricelist thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
#pricelist tr { border: 1px #ccc; }
 
#pricelist td {
        /* Ведет себя как строка */
        border: none;
        border-bottom: 1px #eee;
        position: relative;
        padding-left: 50%;
    }
 #pricelist.no-first-padding td:first-child{padding-left: 50%; border-left:none; border-top:none; font-weight:bold; margin-top:20px;}


#pricelist td:before {
        /* Теперь как заголовок таблицы */
        position: absolute;
        /* Отступы сверху и слева */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: normal;
								
    }



    /* Таблица больше не обычная таблица */
#prezzi table{
        display: block;
    }
 #prezzi thead {
        display: block;
    }
	#prezzi tbody{
        display: block;
    }
	#prezzi th{
        display: block;
    }
	#prezzi td {
        display: block;
    }
		#prezzi tr {
        display: block;
    }
    /* Скрываем заголовки */
#prezzi thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
#prezzi tr { border: 1px #ccc; }
 
#prezzi td {
        /* Ведет себя как строка */
        border: none;
        border-bottom: 1px #eee;
        position: relative;
        padding-left: 50%;
		word-wrap:break-word; 
    }
 #prezzi.no-first-padding td:first-child{padding-left: 50%; border-left:none; border-top:none; font-weight:bold; margin-top:20px;}

#prezzi td:before {
        /* Теперь как заголовок таблицы */
        position: absolute;
        /* Отступы сверху и слева */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: normal;
    }

.good-card .how-to-use .block-body{padding: 10px 3% 10px;}
    /*
    Заголовки
    */

#pricelist td:nth-of-type(1):before { content: "Полотно"; }
#pricelist td:nth-of-type(2):before { content: "Толщина"; }
#pricelist td:nth-of-type(3):before { content: "Цвет"; }
#pricelist td:nth-of-type(4):before { content: "Ширина"; white-space: normal; }
#pricelist td:nth-of-type(5):before { content: "Намотка"; white-space: normal; }
#pricelist td:nth-of-type(6):before { content: "Пропитка"; white-space: pre-wrap;}
#pricelist td:nth-of-type(7):before { content: "Вес, г/м2"; }
#pricelist td:nth-of-type(8):before { content: "Прочность"; white-space: normal}
#pricelist td:nth-of-type(9):before { content: "Нетоксичность"; }

#prezzi td:nth-of-type(1):before { content: "Цвет и тип покрытия"; white-space:  pre-wrap; }
#prezzi td:nth-of-type(2):before { content: "Полотно"; }
#prezzi td:nth-of-type(3):before { content: "Багет"; }
#prezzi td:nth-of-type(4):before { content: "Монтаж от 15 кв.м"; white-space: pre-line; }
#prezzi td:nth-of-type(5):before { content: "Монтаж 8-15 кв.м"; white-space: pre-line; }
#prezzi td:nth-of-type(6):before { content: "Монтаж до 8 кв.м"; white-space: pre-wrap;}

}