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

.Home .FL {background-color:#eaeaea; height:460px; padding:10px 20px; width:calc(66.66% - 40px); float:left;}
.FL ul {list-style:square; }
div.margin { margin-left:250px; font-size:16px;}
picture img {width:33%; height:auto;}
.FL ul#NAV {list-style:none; margin:0px; padding:0px; display:table; width:190px; float:left; }
.FL ul#NAV li { display:table-row; background-color:#fff; }
.FL ul#NAV a { border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0; display:table-cell; vertical-align:middle; height:40px;padding-right:40px; padding-left:10px;  font-size:12px;letter-spacing: 2px; }
.FL ul#NAV a span {font-size:10px; color:#000; display:block;}
.FL ul#NAV a:hover {color:#BFC1C2}
.FL ul#NAV a#b1 { background-color: #aaa; color:#fff;}
.FL ul#NAV a#b2 { background:url(images/plain.jpg) 110px center no-repeat; background-size:80px auto;}
.FL ul#NAV a#b3 { background:url(images/pinpoint.jpg) 110px center no-repeat; background-size:80px auto; }
.FL ul#NAV a#b4 { background:url(images/textured.jpg) 110px center no-repeat; background-size:80px auto; }
.FL ul#NAV a#b5 { background:url(images/stripes.jpg) 110px center no-repeat; background-size:80px auto; }
.FL ul#NAV a#b6 { background:url(images/checks.jpg) 110px center no-repeat; background-size:80px auto; }
.FL ul#NAV a#b7 { background:url(images/pattern.jpg) 110px center no-repeat; background-size:80px auto; }
.FL ul#NAV a#b8 { color:#000; padding-left:inherit; }

.FL ul#NAV a#b1 span, .FL ul#NAV a#b8 span {color:#fff;}

figure {max-width:inherit; width:calc(33% - 34px); background-color:#eee; border:1px solid #ddd; padding:4px; margin:10px; display:inline-block;}
figure img {width:100%; transition: filter 0.5s ease 0s;}
figure img:hover , figure img:focus {filter: grayscale(100%);  -webkit-filter: grayscale(100%); }
figure figcaption {text-align:center; text-shadow:0px 0px 1px #888; font-size:1.5rem; padding:5px; background-color:#fafafa;}
figure figcaption div {font-size:1rem; color:#000; background-color:#fafafa; padding:5px; }
.content figure figcaption a {color:#000; text-decoration:none; text-transform:uppercase;}


div.box3 {width:calc(33.3% - 21px);padding:10px;border-left:1px solid #fff;  float:left; border-top:1px solid #fff; min-height:173px; color:#000;}
div.box3 header {text-align:center; font-size:30px; color:#c24641; text-shadow:1px 1px 1px #FFF;  }
div.box3.r2, div.box2.r2 { background-color:#dfdfdf;}
div.box3.r1, div.box2.r1 { background-color: #efefef; }
div.box3.r3, div.box2.r3 { background-color:#cfcfcf;}
div.box3 div {display:inline-block; float:right;}
div.box3 img {height:100px; width:auto;}

div.box2 {width:calc(29.33% - 1px);padding:10px 2%;border-left:1px solid #fff;  float:left; border-top:1px solid #fff; min-height:139px; line-height:normal; }
div.box2 header { font-size:30px; color:#c24641; text-shadow:1px 1px 1px #FFF;  }
div.box2 .pr {font-size:2rem; margin:15px 0px;color:#000;}
div.box2 .pr span {color:#aaa;}
div.box2 .css-button {border:2px solid #f0f0f0; border-radius:5px; float:right;}

@media (max-width: 770px) {
.Home .FL {float:none; width:inherit;height:inherit;}
.FL ul#NAV {list-style:none; margin:0px; padding:0px; display:table; width:100%; float:none; }
.FL ul#NAV a { padding-right:inherit;width:100%;  }
.FL ul#NAV a#b2 { background:url(images/plain.jpg) 100% center no-repeat;}
.FL ul#NAV a#b3 { background:url(images/pinpoint.jpg) 100% center no-repeat;  }
.FL ul#NAV a#b4 { background:url(images/textured.jpg) 100% center no-repeat;  }
.FL ul#NAV a#b5 { background:url(images/stripes.jpg) 100% center no-repeat; }
.FL ul#NAV a#b6 { background:url(images/checks.jpg) 100% center no-repeat;  }
.FL ul#NAV a#b7 { background:url(images/pattern.jpg) 100% center no-repeat;  }

.Home .FL {background-color:#eaeaea; height:auto; padding:10px; width:inherit; float:none;}
.FL ul {list-style:square; }
div.margin { margin:inherit; font-size:16px;}

picture img {width:100%; height:auto;}

div.box2 {width:calc(29.33% - 1px);padding:10px 2%;border-left:1px solid #fff;  float:left; border-top:1px solid #fff; min-height:205px; }
div.box2 header { font-size:26px; color:#c24641; text-shadow:1px 1px 1px #FFF;  }
div.box3 {min-height:286px;}
div.box3 div {display:block; text-align:center; width:100%; float:none;}
div.box3 img { display:inline-block}	


}
@media (max-width: 480px) {

figure {max-width:inherit; width:inherit; background-color:#eee; border:1px solid #ddd; padding:5px; margin:15px 0px; display:block;}

div.box2 {min-height:130px; width:auto; float:none; }
div.box3 {min-height:inherit; width:auto; float:none;}
}