.materials {
    font-size: 0px;
}

.materials .material {
    width: 49%;
    border: 1px solid #e2e2e2;
    display: inline-block;
    margin: 0 1% 15px 0;
    vertical-align: top;
}

/*.materials .material:nth-child(even) {
    margin-right: 1px;
}*/

@media (max-width: 991px){
	.materials .material{
		width: 100%;
	}
}

.materials .material .title {
    background: #f3f3f3;
    text-align: center;
    font-size: 25px;
    color: #3d3941;
    font-weight: 600;
    padding: 2px 10px 4px;
    line-height: 30px;
	height: 64px;
	display: flex;
	align-items: center;
    justify-content: center;
}
.materials .material .title p {
	color: #3d3941;
	text-decoration:none;
	font-size: 25px;
	line-height: 28px;
	margin: 0;
}
.materials .material .content {
    position: relative;
    text-align: center;
    padding: 40px 0 0 0;
    height: 190px;
}


.materials .material .line1 {
    position: absolute;
    top: 15px;
    left: 20px;
    background: url("/images/2015/icons_gumbit_01-01.png") 0 0 no-repeat;
    width: 276px;
    height: 159px;
}

.materials .material .line1-prom {
  position: absolute;
bottom: 18px;
right: 143px;
background: url("/images/prompoly/png/polyflex-decor.png") 0 0 no-repeat;
width: 274px;
height: 242px;
}

.materials .material .line2-prom {
  position: absolute;
  top: 24px;
  right: 148px;
  background: url(/images/prompoly/png/polyflex-nano.png) 0 0 no-repeat;
  width: 274px;
  height: 210px;
}

.materials .material .line4-prom {
  position: absolute;
  bottom: 17px;
  right: 143px;
  background: url(/images/prompoly/png/polyplan-antistatic.png) 0 0 no-repeat;
  width: 275px;
  height: 258px;
}

.materials .material .line5-prom {
  position: absolute;
  bottom: 6px;
  background: url(/images/prompoly/png/polyflex.png) 0 0 no-repeat;
  width: 275px;
  height: 260px;
  right: 143px;
}

.materials .material .line30-prom {
  position: absolute;
  bottom: 8px;
  background: url(/images/prompoly/png/poyplan-elast.png) 0 0 no-repeat;
  width: 275px;
  height: 260px;
  right: 140px;
}

.materials .material .line31-prom {
  position: absolute;
  top: 5px;
  background: url(/images/prompoly/png/poyplan-elast.png) 0 0 no-repeat;
  width: 275px;
  height: 260px;
  right: 140px;
}

.materials .material .line35-prom {
    position: absolute;
    bottom: 20px;
    background: url(/images/prompoly/png/polyflex.png) 0 0 no-repeat;
    width: 275px;
    height: 260px;
    right: 143px;
}

.materials .material .line25-prom {
  position: absolute;
bottom: 18px;
right: 143px;
background: url("/images/prompoly/png/polyplan-variant-i.png") 0 0 no-repeat;
width: 274px;
height: 242px;
}
    
.materials .material .content-prom .text1 {
  top: 22px;
  left: 16px;
  width: 125px;
}

.materials .material .content-prom .text2 {
  top: 202px;
left: 14px;
width: 129px;
}

.materials .material .content-prom .text3 {
  top: 14px;
  right: 18px;
  width: 119px;
}

.materials .material .content-prom .text4 {
  top: 179px;
  right: 15px;
  width: 125px;
}

.materials .material .content-prom .text2-nano {
  top: 191px;
  left: 13px;
  width: 129px;
}

.materials .material .content-prom .text3-nano {
  top: 164px;
  right: 0px;
  width: 146px;
}

.materials .material .content-prom .text1-polyplan-elast {
  top: 13px;
width: 166px;
left: 18px;
}

.materials .material .content-prom .text2-polyplan-elast {
  bottom: 22px;
width: 174px;
left: 17px;
}

.materials .material .content-prom .text4-polyplan-elast {
  bottom: 22px;
    width: 165px;
    right: 0px;
}

.materials .material .content-prom .text1-polyplan-poliur {
  top: 30px;
width: 166px;
left: 18px;
}

.materials .material .content-prom .text2-polyplan-poliur {
  bottom: 8px;
  width: 174px;
  left: 17px;
}
.materials .material .content-prom .text4-polyplan-poliur {
  bottom: 2px;
  width: 165px;
  right: 0px;
}

.materials .material .content-prom .text2-polyplan-inert {
left: 14px;
width: 129px;
top: 207px;
}

.materials .material .content-prom .text3-polyplan-inert {
top: 14px;
right: 11px;
width: 126px;
}

.materials .material .content-prom-inert .text2-polyplan-inert {
left: 14px;
width: 129px;
top: 207px;
}

.materials .material .content-prom-inert .text3-polyplan-inert {
top: 14px;
right: 11px;
width: 126px;
}

.materials .material .content-prom .text1-polyplan-terracco {
  top: 14px;
  left: 16px;
  width: 125px;
}

.materials .material .content-prom .text2-polyplan-terracco {
left: 15px;
width: 129px;
top: 197px;
}

.materials .material .content-prom .text3-polyplan-terracco {
  top: 9px;
  right: 11px;
  width: 126px;
}

.materials .material .content-prom .text1-poliplan-variant-i {
top: 22px;
left: 16px;
width: 125px;
}

.materials .material .content-prom .text2-poliplan-variant-i {
  top: 202px;
  left: 16px;
  width: 129px;
}

.materials .material .content-prom .text3-poliplan-variant-i {
  top: 14px;
  right: 9px;
  width: 143px;
}

.materials .material .content-prom .text4-poliplan-variant-i {
  top: 176px;
  left: 237px;
  width: 163px;
}

.materials .material .content-prom .content-prom-polyplan-elast .text2 {
    top: 22px;
    width: 165px;
}

.materials .material .content-prom .content-prom-polyplan-elast .text3 {
    top: 22px;
    width: 165px;
}



.materials .material5-prom .content-prom  .text1 {
    top: 22px;
    width: 165px;
}

.materials .material5-prom .content-prom .text2 {
    top: 206px;
    width: 145px;
}

.materials .material5-prom .content-prom .text3 {
    width: 126px;
    top: 24px;
    left: 265px;
}

.materials .material4-prom .content-prom  .text1 {
    top: 22px;
    width: 165px;
}

.materials .material4-prom .content-prom .text2 {
    top: 206px;
    width: 145px;
}

.materials .material4-prom .content-prom .text3 {
  width: 120px;
  top: 5px;
  left: 264px;
}

.materials .material4-prom .content-prom .text4 {
  width: 142px;
  top: 177px;
  left: 261px;
}

.content-prom img {
  padding-right: 86px;
}

.content-prom .text-group {
  padding-right: 86px;
}

.materials .material .content-prom  {
  position: relative;
  text-align: center;
  padding: 40px 0 0 0;
  height: 255px;
  margin-bottom: 42px;
}

.materials .material .content-prom-inert  {
  position: relative;
  padding: 57px 0 0 0;
  height: 255px;
  margin-bottom: 42px;
}

@media (max-width: 1199px){
	.materials .material .line1{
		top: 20px;
	}
}

.materials .material .line2 {
    position: absolute;
    top: 10px;
    left: 10px;
    background: url("/images/2015/icons_gumbit_01-03.png") 0 0 no-repeat;
    width: 275px;
    height: 161px;
}

.materials .material .line4 {
    position: absolute;
    top: 10px;
    left: 10px;
    background: url("/images/2015/icons_gumbit_01-04.png") 0 0 no-repeat;
    width: 276px;
    height: 163px;
}

.materials .material .line5 {
    position: absolute;
    top: 10px;
    left: 25px;
    background: url("/images/2015/icons_gumbit_01-05.png") 0 0 no-repeat;
    width: 260px;
    height: 167px;
}

@media (max-width: 1199px){
	.materials .material .line-all{
		width: 190px;
		background-size: 100% 100%;
	}
}

@media (max-width: 991px){
	.materials .material .line-all{
		width: 370px;
		background-size: 100% 100%;
	}
}

@media (max-width: 767px){
	.materials .material .line-all{
		display: none;
	}
}

.materials .material .text {
    font-size: 10px;
    color: #656565;
    line-height: 120%;
    text-align: left;
    position: absolute;
}

.materials .material .text strong {
    font-size: 12px;
    color: #3d3941;
    font-weight: bold;
    display: block;
}

.materials .material .text1 {
    top: 15px;
    left: 25px;
    width: 135px;
}

.materials .material .text2 {
    top: 145px;
    left: 25px;
    width: 145px;
}

.materials .material .text3 {
    top: 15px;
    right: 0px;
    width: 100px;
}

@media (max-width: 1199px){
	.materials .material .text3{
	width: 110px;
	background-color: rgba(255,255,255,0.8);
	}
}

@media(max-width: 767px){
	.materials .material .text1,
	.materials .material .text2,
	.materials .material .text3{
		display: none;
	}
}

.materials .material .price {
    padding: 10px 0;
    border-top: 1px solid #e2e2e2;
    margin: 10px 10px 0;
    font-size: 11px;
    line-height: 18px;
}

.materials .material .price:before,
.materials .material .price:after {
    content: ' ';
    display: table;
}

.materials .material .price:after {
    clear: both;
}

.materials .material .price .left {
    float: left;
    color: #656565;
    width: 40%;
}

@media(max-width: 767px){
	.materials .material .price .left{
		width: 50%;
		font-size: 12px;
		line-height: 24px;
	}
}

.materials .material .price .middle {
    float: left;
    width: 32%;
}

@media(max-width: 1199px){
	.materials .material .price .middle{
		display: none;
	}
}

@media(max-width: 991px){
	.materials .material .price .middle{
		display: block;
	}
}

@media(max-width: 767px){
	.materials .material .price .middle{
		display: none;
	}
}

.materials .material .price .middle img {
    display: block;
    width: 100%;
    margin: 7px 0 0 0;
}

.materials .material .price .right {
    float: left;
    text-align: right;
    color: #cacaca;
    width: 28%;
}

@media(max-width: 1199px){
	.materials .material .price .right{
		width: 60%;
	}
}

@media(max-width: 991px){
	.materials .material .price .right{
		width: 28%;
		line-height: 24px;
	}
}

@media(max-width: 767px){
	.materials .material .price .right{
		width: 50%;
		font-size: 12px;
	}
}

.materials .material .price .right span {
    color: #00adef;
}

.materials .material:hover .title, .materials .material:hover .title p {
    background: #fec002;
    color: #fff;
    font-size: 25px;
    line-height: 22px;
    margin: 0;
}

.materials .material2 .text1 {
    left: 15px;
    top: 10px;
}

.materials .material2 .text2 {
    left: 15px;
    top: 140px;
}

.materials .material2 .text3 {
    width: 110px;
    top: 10px;
}

.materials .material2 .text4 {
    top: 10px;
    left: 160px;
    width: 120px;
}

@media(max-width: 767px){
	.materials .material2 .text6,
	.materials .material2 .text5,
	.materials .material2 .text4, 
	.materials .material2 .text3, 
	.materials .material2 .text2, 
	.materials .material2 .text1{
		display: none;
	}
}

@media(max-width: 1199px){
	.materials .material2 .text4{
		left: 113px;
	}
}

@media(max-width: 991px){
	.materials .material2 .text4{
		left: 215px;
	}
}

.materials .material2 .text5 {
    right: 0px;
    width: 110px;
    top: 113px;
}

.materials .material2 .text6 {
    right: 0px;
    width: 110px;
    top: 150px;
}

.materials .material4 .text1 {
    left: 15px;
    top: 10px;
    width: 115px;
}

.materials .material4 .text2 {
    left: 15px;
    top: 105px;
    width: 115px;
}


@media(max-width: 767px){
	.materials .material4 .text1,
	.materials .material4 .text2,
	.materials .material4 .text3,{
		display: none;
	}
}

.materials .material4 .text3 {
    width: 105px;
    top: 10px;
    right: 5px;
}

.materials .material5 .text1 {
    left: 30px;
    top: 10px;
    width: 165px;
}

.materials .material5 .text2 {
    left: 30px;
    top: 135px;
    width: 145px;
}

.materials .material5 .text3 {
    width: 110px;
    top: 10px;
    right: 0px;
}

.materials .material5 .text4 {
    width: 110px;
    top: 135px;
    right: 0px;
}

@media(max-width: 767px){
	.materials .material5 .text1,
	.materials .material5 .text2,
	.materials .material5 .text3,
	.materials .material5 .text4{
		display: none;
	}
}

/************
* new price *
*************/

.price-item {
    width: 100%;
    font-size: 11px;
}

.new-price-left {
    width: 40%;
    font-size: inherit;
    color: #656565;
    line-height: 1.1;
    padding: 3px;
}

.new-price-center {
    width: 32%;
}

.new-price-right {
    width: 28%;
    font-size: inherit;
    color: #cacaca;
    text-align: right;
}

.new-price-right span {
    color: #00adef;
}

.price-table {
    width: 100%;
}

/************
* old price *
*************/

.materials .material .image-container-prom {
    position: relative;
    width: 100%;
    height: 100%;
}

.materials .material .image-prom {
    position: absolute;
    height: 100%;
    width: 100%;
}

.materials .material .content-prom {
    height: 350px !important;
    padding: 0 0 0 0 !important;
    margin-bottom: 0 !important;
}

.price-line-container {
	background: url('images/bg.png');
	background-size: 100% auto;
	width: 32% !important;
    padding-top: 4px;
}

.price-line {
	width: 100%;
	height: 6px;
	position: relative;
}

.price-line .price-line-bg {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	background: #6baee2;
}
.price-line .price-line-bg.bg-gray {
	background: #e7e7e7;
}
.price-sep {
	height: 6px;
	width: 100%;
}


.xsd-text {
	width: 110px;
}
@media (max-width: 768px) {
	.xsd-text {
		width: 90px;
		font-size: 9.5px !important;
		line-height: 11px !important;
	}
	.materials .material .content-prom {
    	height: 280px !important;
	}
	.left.price-line-container {
		display: none;
	}
    .new-price-center {
        display: none;
    }
    .content-prom .text-group {
        padding-right: 0;
        position: absolute;
        left: -10px;
        right: 4px;
        top: -36px;
        bottom: -36px;
        transform: scale(0.8);
    }
}
@media (max-width: 400px) {
    .content-prom .text-group {
        padding-right: 0;
        position: absolute;
        left: -28px;
        right: -32px;
        top: -50px;
        bottom: -42px;
        transform: scale(0.75);
           }
}
