.district-pro-font {
font-family: district-pro,sans-serif;
color: #322f31;
}
.product-page-banner {
position: relative;
}
.product-page-banner > img {
display: block;
width: 100%;
}
.product-page-banner::after {
content: "";
position: absolute;
background-color: rgba(0,0,0,0.5);
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.product-page-title {
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
color: #fff;
z-index: 1;
letter-spacing: 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 4.5vw;
vertical-align: middle;
margin-top: 11%;
}
/*Middle Page*/
.product-page-middle
{
padding-top: 70px;
}
.product-page-middle h1
{
font-size: 55.1071px;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.14em;
color:rgb(65,64,66);
margin-bottom: 5px;
}
.product-page-middle span
{
font-size: 30.86px;
font-family: sans-serif;
color: rgb(65,64,66);
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.1em;
}
/*Bottom1 Page*/
.product-page-bottom1
{
margin-top: 160px;
}
span.number
{
width: 70px;
line-height: 70px;
background:rgb(65,64,66);
display: inline-block;
color:#fff;
text-align: center;
font-size: 27.0132px;
font-family: sans-serif;
font-weight: bold;
vertical-align: top;
margin-right: 15px;

}
.bottom-header
{
font-size: 47.7417px;
font-family: sans-serif;
font-weight: bold;
color:rgb(65,64,66);
text-transform: uppercase;
letter-spacing: 0.14em;
display: inline-block;
vertical-align: top;
margin: 0;
     
}
.header-span
{
font-size: 20.6026px;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgb(65,64,66);
display: block;
font-weight:normal;
}
.header-span small
{
font-size: 23px;
font-family: calibri;
font-weight: 300 !important;
color:rgb(65,64,66);
}
.product-bottom1-image
{
padding-top: 65px;
padding-bottom: 140px;
}
.product-bottom1-img
{
display: inline-block;
}
.product-bottom1-img div.small
{
display: block;
text-align: center;
font-size: 20.6026px;
font-weight: 100!important;
font-style: italic;
color:rgb(65,64,66);
padding-top: 7px;
}

.product-bottom1-image1
{
width: 111px;
}
.product-bottom1-image2
{
width: 96px;
margin-left:10px;
}
.product-bottom1-image3
{
width: 82px;
margin-left:10px;
}
/*Bottom2 Page*/
.product-page-bottom2 
{
margin-top: 182px;
}
.small-space 
{
margin: 0 19px;
}
.bottom2-hex-font
{
font-size: 21.0305px;
text-transform: uppercase;
font-weight: bold;
padding-left: 32px;
padding-bottom: 9px;
}
.bottom2-hex-font2 
{
font-size: 21.0305px;
text-transform: uppercase;
font-weight: bold;
padding-left: 0;
text-align: center;
font-weight: 400;
padding-top: 16px;
}
.product-bottom2-img-main
{
display:inline-block;
vertical-align: top;
margin: 0 28px;
width: 22%;
}
.product-bottom2-img-main1
{
margin-left:0px;
}
.product-bottom2-img-main3
{
margin-right:0px;
}
.product-bottom2-img
{
display: block;
vertical-align: top;
padding-bottom: 33px;
}
.product-bottom2-img1
{
display: block;
text-align: center;
}
.product-bottom2-img1 span
{
font-size: 15.7729px;
font-family: sans-serif;
text-transform: uppercase;
font-style: italic;

}

[class^="product-bottom2-image"]
{
max-width: 64%;
min-height: 292px;
}

[class^="product-hexagon-image"]
{
max-width: 90%;
min-height: 250px;
}

[class^="product-circle-image"]
{
max-width: 100%;
min-height: 282px;
}

[class^="product-triangle-image"] {
max-width: 100%;
min-height: 335px;
}

[class^="product-plaque-image"] {
max-width: 87%;
min-height: 315px;
}

.product-bottom2-image1
{
}
.product-bottom2-image2
{
margin-left:10px;
}
.product-bottom2-image3
{
margin-left:10px;
}
.display-block
{
display:block;
}
.product-bottom2-image
{
padding-top: 46px;
display: block;
}
/*Bottom3 Page*/
.product-page-bottom3 {
margin-top: 194px;
}
.product-bottom3-colors {
margin-top: 64px;
margin-bottom: 51px;
}
.product-bottom3-colors small{
font-size: 16.7564px;
font-family: sans-serif;
color:rgb(128,127,128);
text-transform:uppercase;
display:block;
}
.product-bottom3-colors small.sizetwo{
font-size: 16.7564px;
}

.product-bottom3-colorpick
{
display: inline-block;
vertical-align: top;
text-align:center;
margin-right: 6px;
}
.product-bottom3-colorpick span {
display: block;
width: 45px;
height: 45px;
border-radius: 50%;
}
.PK { background-color: rgb(246,162,188);}
.RD { background-color: rgb(234,10,42); }
.LR { background-color: rgb(226,33,28);}
.OR { background-color:rgb(253,130,4);}
.YW {background-color:rgb(241,229,0);}
.LG {background-color:rgb(147,213,10);}
.GR {background-color:rgb(22,105,56);}
.DT {background-color:rgb(18,116,120);}
.LT {background-color:rgb(67,196,176);}
.LB {background-color:rgb(0,130,203);}
.CB {background-color:rgb(11,76,129);}
.MB {background-color:rgb(1,22,137);}
.BL {background-color:rgb(6,47,135);}
.PU {background-color:rgb(105,72,143);}
.GD {background-color:rgb(132,117,79);}
.BL2 {background-color:rgb(35,31,32);}
.WH {background-color:rgb(255,255,255); border: 1px solid rgb(65,64,66);}
.SV {background-color:rgb(136,140,141);}
.CG {background-color:rgb(179,175,172);}
.FrostedAcrylic {background-color:rgb(179,175,172);}

.bottom3-box1 h2 {
font-size: 29.4633px;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
color: rgb(65,64,66);
}
.bottom3-box1 h2 span {
display: block;
font-size: 29.4633px;
font-family: calibri;
font-weight: 300;
font-style: italic;
letter-spacing: 0.01em;
}
.bottom-main {
   
}
.bottom3-sub1 {
display: block;
margin-bottom: 22px;
}
.bottom3-sub2, .bottom3-sub3
{
display:inline-block;
vertical-align:top;
}
.bottom3-sub2
{
margin-right:117px;
}
.bottom3-sub3
{

}
/*Bottom4 Page*/
.bottom4-header {
text-align: center;
}
.product-page-bottom4 {
margin-top: 188px;
}

.bottom4-header span {
width: 70px;
line-height: 38px;
background:rgb(65,64,66);
color:#fff;
display: block;
text-align: center;
font-size: 18.7328px;
font-family: sans-serif;
font-weight: bold;
margin-bottom: 29px;
}

.bottom4-header [class^="bottom4-box"]
{
display: inline-block;
vertical-align: top;
margin: 30px 14px 0;
width:22%;
}
.bottom4-header .bottom4-box1 , .bottom4-header .bottom4-box5
{
margin-left:0;
}
.bottom4-header .bottom4-box4 , .bottom4-header .bottom4-box8
{
margin-right:0;
}
.bottom4-header [class^="bottom4-box"] img {
max-width:100%;
}
.product-page-bottom5 {
margin-top: 200px;
}
/*Bottom5 Page*/

.product-page-bottom5 {
margin-top: 200px;
}
.bottom5-table {
padding-top: 36px;
}
.bottom5-table th {
width: 17%;
}
.bottom5-table th:first-child {
width: 25%;
}
.tr1 th
{
font-weight:normal;
font-size: 22.7115px;
font-family: sans-serif;
text-transform: uppercase;
}
.tr2
{
background-color:rgb(77,77,79);
}
.tr2 td 
{
font-weight:normal;
font-size: 19.8726px;
font-family: sans-serif;
color:#fff;
text-transform:uppercase;
font-weight: bold;
}
.tr3
{
background-color:rgb(220,221,222);
}
.tr3 td ,  .tr4 td ,  .tr5 td , .tr6 td
{
font-size: 19.8726px;
text-transform:uppercase;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 3px 10px;
}
td.size
{
padding-left: 50px;
}
td.price
{
font-size: 19.8726px;
font-family: monospace!important;
}
/*Bottom6 Page*/
.product-page-bottom6
{
margin-top: 217px;
}
.product-bottom6-size1 , .product-bottom6-size2, .product-bottom6-size3{
max-width:100%;
}
.product-bottom6-rec1
{
max-width:20%;
}

.product-bottom6-rec3
{
max-width:24%;
}

.product-bottom6-hex1 {
    max-width: 31%;
}
.product-bottom6-hex2 {
    max-width: 27%;
}
.product-bottom6-hex3 {
    max-width: 14%;
}
.product-bottom6-circle1
{

}
.product-bottom6-circle2
{
max-width: 29%;
}
.product-bottom6-circle3
{
max-width: 25%;
}
.product-bottom6-triangle1
{
max-width: 19%;
}
.product-bottom6-triangle2
{

}
.product-bottom6-triangle3
{
max-width: 25%;
}

.product-bottom6-plaque1
{
max-width: 23%;
}
.product-bottom6-plaque2
{
max-width: 27%;
}
.product-bottom6-plaque3
{

}

.product-bottom6-img {
display: inline-block;
vertical-align:top;
margin-right: 30px;
width: 31%;
}
.product-bottom6-img:last-child
{
margin-right: 0px;
}
.product-bottom6-image
{
padding-top: 65px;
padding-bottom: 140px;
text-align:center;
}

@media only screen and (max-width: 1200px) {
.product-bottom6-img {
width: 30%;
}
}

/*1000 Responsive*/
@media only screen and (max-width: 1000px) {
.bottom4-header [class^="bottom4-box"] {
width: 20%;
}
.bottom-header {
font-size: 38px;
}
.product-bottom2-image {
text-align: center;
}
.product-bottom2-img-main {
margin: 0 15px;
}
.product-bottom6-rec2
{
max-width:32%;
}
.product-bottom6-img {
width: 47%;
margin: 30px auto 0;
}

.product-hex-img {
    width: 47%;
    margin: 30px 20px 0;
}

[class^="product-bottom2-image"] {
    max-width: 100%;
    min-height: 360px;
}

[class^="product-hexagon-image"] {
    max-width: 90%;
    min-height: 200px;
}

.product-circle-img {
    width: 31%;
    margin: 30px 20px 0;
}
.product-plaque-img {
    width: 31%;
    margin: 30px 20px 0;
}
}

/*800 Responsive*/
@media only screen and (max-width: 800px) {
.bottom5-table {
overflow-y: scroll;
position: relative;
}

.product-circle-img {
    width: 28%;
}

}


/*600 Responsive*/
@media only screen and (max-width: 600px) {

.product-circle-img {
margin: 30px auto 0;
}

.product-page-middle h1 {
font-size: 30px;
}
.product-page-middle span {
font-size: 17px;
}
span.number {
width: 45px;
line-height: 45px;
display:block;
}
.bottom-header {
font-size: 19px;
}
.header-span {
font-size: 15px;
}
.product-bottom1-img {
display: block;
text-align: center;
margin: 30px auto 0;
}
.header-span small {
font-size: 15px;
}
.small-space {
margin: 0;
}
.product-bottom2-image {
text-align: center;
}
.bottom2-hex-font {
padding-left: 0;
}
.product-bottom2-img-main {
display: block;
margin: 30px auto 0;
width: 100%;
}
.product-bottom2-image2 , .product-bottom2-image3 {
margin-left: 0;
}
.bottom3-box1 h2 {
font-size: 20px;
}
.bottom3-box1 h2 span {
font-size: 20px;
}
.bottom3-sub2 {
margin-right: 0;
}
.bottom4-header [class^="bottom4-box"] {
width: 43%;
}
.bottom4-header [class^="bottom4-box"]:nth-child(odd)
{
    margin-left:0;
}
.bottom4-header [class^="bottom4-box"]:nth-child(even)
{
    margin-right:0;
}

.product-bottom6-img {
width: 100%;
display: block;
text-align: center;
max-width: 100%;
margin: 30px auto 0;
}



.product-hex-img {
width: 100%;
margin: 30px auto 0;
}

}
@media only screen and (max-width: 400px) {
.bottom4-header [class^="bottom4-box"] {
margin: 30px auto 0;
width: 100%;
}
}