body.main {background: #b7bab9 url(../images/backgrounds/main.jpg) no-repeat 0 0 fixed;}

#content .center {padding-top: 50px;}

ul.product-icons {height: 57px; margin-top: 30px;}
ul.product-icons li {width: 57px; height: 57px; margin: 0 2px 2px 0; float: left;}
ul.product-icons li img {border: 1px solid #dcdcdc;}

.patterns {margin-top: 40px; clear: both;}
.patterns .pattern {width: 30%; margin: 1%; margin-bottom: 30px; padding-left: 68px; float: left; position: relative;} 
.patterns .pattern p.title {padding: 8px 0 0 7px; height: 36px; font-size: 20px; font-weight: 700; color: #322b2a; border-bottom: 1px solid #dcdcdc;} 
.patterns .pattern p.title img {border-radius: 50em; position: absolute; top: 0; left: 0;} 
.patterns .pattern p.title.slim {padding-top: 0px; font-size: 16px; line-height: 16px;}
.patterns .pattern .info {padding: 8px 0 0 7px; font-size: 15px;} 
.patterns .pattern .info strong {margin-bottom: 8px; font-weight: 600; color: #db241a; display: block;} 
.patterns .pattern .info p {line-height: 16px;}
.patterns .pattern .info p span {width: 100px; display: inline-block;}
.patterns .pattern .preview {width: 216px; height: 216px; background-color: #fff; border-radius: 50em; overflow: hidden; box-shadow: 0 5px 40px rgba(0, 0, 0, 0.5); position: absolute; top: -56px; left: -143px; z-index: 10; display: none;}
.patterns .pattern .preview img {float: right;}

.child-patterns .box {margin-top: 40px;}
.child-patterns ul.product-icons {margin-top: 10px;}

ul.symbols {min-height: 57px;}
ul.symbols li {width: 57px; height: 57px; margin: 0 2px 2px 0; background: url(../images/symbols.png) no-repeat 0 0; list-style: none; float: left;}
ul.symbols li.symbol1 {background-position: 0 0;}
ul.symbols li.symbol2 {background-position: 0 -57px;}
ul.symbols li.symbol3 {background-position: 0 -114px;}
ul.symbols li.symbol4 {background-position: 0 -171px;}
ul.symbols li.symbol5 {background-position: 0 -228px;}
ul.symbols li.symbol6 {background-position: 0 -285px;}
ul.symbols li.symbol7 {background-position: 0 -342px;}
ul.symbols li.symbol8 {background-position: 0 -399px;}
ul.symbols li.symbol9 {background-position: 0 -456px;}
ul.symbols li.symbol10 {background-position: 0 -513px;}
ul.symbols li.symbol11 {background-position: 0 -570px;}
ul.symbols li.symbol12 {background-position: 0 -627px;}
ul.symbols li.symbol13 {background-position: 0 -684px;}
ul.symbols li.symbol14 {background-position: 0 -741px;}
ul.symbols li.symbol15 {background-position: 0 -798px;}
ul.symbols li.symbol16 {background-position: 0 -855px;}
ul.symbols li.symbol17 {background-position: 0 -912px;}
ul.symbols li.symbol18 {background-position: 0 -969px;}
ul.symbols li.symbol19 {background-position: 0 -1026px;}
ul.symbols li.symbol20 {background-position: 0 -1083px;}
ul.symbols li.symbol21 {background-position: 0 -1140px;}
ul.symbols li.symbol22 {background-position: 0 -1197px;}
ul.symbols li.active {box-shadow: inset 0 0 10px #0064cc;}

/* ==========================================================
! Large desktop
========================================================== */
@media (min-width: 1200px) {
    
}
@media (min-width: 980px) and (max-width: 1199px) {
    
}
/* ==========================================================
! Portrait tablet to landscape and desktop
========================================================== */
@media (min-width: 768px) and (max-width: 979px) {
    .patterns .pattern .info p span {width: 85px;}
}
/* ==========================================================
! Landscape phone to portrait tablet
========================================================== */
@media (max-width: 767px) { 
    .patterns .pattern {width: 48%;}
}
@media (max-width: 600px) { 
    
}
/* ==========================================================
! Landscape phones and down
========================================================== */
@media (max-width: 480px) {
    .patterns .pattern {width: 98%;}
}