* {
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: Open Sans, Arial;
font-size: 14px;
color: #555;
outline: none;
border: none}

body {
background: #f7f7f7}

.clear  {
line-height: 0;
height: 0;
clear: both}

.last  {
margin-right: 0!important}

.hidden  {
display: none!important}

a {
color: #C60300}

a:hover {
text-decoration: none}

p {
margin: 10px 0 18px}

a.cta, #submitbutton, .ordernow {
display: inline-block;
padding: 7px 20px;
border-radius: 1px;
background: #0089B1;
text-transform: lowercase;
font-size: 13px;
color: #fff;
margin-top: 5px;
transition: .6s;
width: auto;
text-decoration: none}

.ordernow {
background-color: #C60300;}

.ordernow:hover, a.cta:hover {
transition: .2s;
background-color: #FF7900}

body#ind-product .ordernow, body#ind-accessory .ordernow {
border-radius: 3px;
padding: 10px 25px}

body#ind-product .cta, body#ind-accessory .cta {
height: 40px;
padding: 10px 0 0 42px;
color: #C60300;
text-decoration: underline;
float: right;
text-shadow: none;
background: url(../img/pdf.png) no-repeat top left}

body#ind-product .cta:hover, body#ind-accessory .cta:hover {
text-decoration: none}

button.back {
cursor: pointer;
height: 18px;
padding: 0 27px 0 0;
color: #C60300;
text-decoration: underline;
background: url(../img/back.png) no-repeat top right}

a.gallery img.thumb {
margin: 10px 0 10px 10px;
width: 30%}

/*Logo and Banner*/

div#logo {
float: left;
margin-bottom: 5px;
width: 50%}

div#logo img{
max-width: 450px;
width: 100%}

#masthead {
padding: 17px 1%;
max-width: 1100px;
margin: auto;}

img.scalable {
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom}

#contact-info {
display: inline-block;
text-align: right;
line-height: 18px;
padding-right: 10px;
margin-top: 25px;
float: right}

#banner  {
box-sizing: border-box;
border-bottom: 40px solid #DEE3E5;
width: 100%;
position: relative;
margin: auto;
margin-bottom: 20px}

#banner img {
margin: 0 auto;
display: block;
width: 100%}

#banner #bannertext {
position: absolute;
padding: 20px 30% 0 1%;
max-width: 1100px;
width: 100%;
top: 0;
margin: auto;
left: 0;
right: 0}


#banner #bannertext p{
font-family: Raleway;
margin: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 300%;
margin-top: 30px;
text-shadow: 1px 1px 1px rgba(0,0,0,.8), 0px 0px 30px #044F6B;
color: #fff}

#banner #bannertext p span {
color: #005EBF;
font-size: inherit}


#error {
min-height: 20px;
color: #C40509;
font-weight: bold}


/*products*/

.product {
border: 1px solid #ccdddc;
float: left;
background: #fff;
margin: 10px 2% 10px 0;
position: relative;
overflow: hidden;
height: 340px;
border-radius: 1px;
width: 32%}

.product img{
width: 100%;
display: block;
margin: auto;
height: 100%;
object-fit: cover}

.product .caption {
position: absolute;
bottom: 0;
text-align: center;
background: #efefef;
border-top: 1px solid #ccc;
padding: 10px;
width: 100%}

.product h3 {
font-weight: bold;
color: #444;
margin: 0;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;}

.product h3 a{
color: inherit}

#product-grid .product:nth-of-type(3n+3) {
margin-right: 0}

ul.product-info li{
font-size: 13px;
margin: 0 0 6px 15px}

.ind-product {
float: right;
width: 100%;
border: 1px solid #DEE3E5;
max-width: 400px}

/*Layout Wrapper*/
.layout, #languageswrap {
box-sizing: border-box;
max-width: 1100px;
position: relative;
padding: 0 1%;
margin: 0 auto}

.layout#header {
margin-bottom: -20px;
background: url(../img/ice-bg.png);
max-width: 100%}

#langs {
position: absolute;
right: 1.5%;
z-index: 9}

#langs img, #langs img:hover {
transition: .6s;
margin: 3px 4px;
border-radius: 3px;
width: 23px;
opacity: 1;
float: left}

#langs a img {
opacity: .4}

/*Clear Fix to Clear Floats*/
.affinity-row:after {
visibility: hidden;
display: block;
content: "\0020";
clear: both;
height: 0}


/*Strctural wrappers */
.affinity-row .column-third {
width: 33.3333333%;
float: left}

.affinity-row .column-fourth {
width: 25%;
float: left}

.affinity-row .column-fifth {
width: 20%;
float: left}

.affinity-row .column-half {
width: 50%;
float: left}

.affinity-row.sidebar-left .column-1 {
width: 76%;
float: right}

.column-1 ul  {
margin: 20px 0}

.column-1 ul li, .column-2 ul li {
margin: 10px 0 15px 20px}

.bodyimg {
margin: 0 10px 10px 0}

.border {
border: 1px solid #ccc;
border-radius: 3px}

.alignleft {
float: left}

.alignright {
float: right}

.affinity-row.sidebar-right .column-1 {
width: 70%;
float: left;
padding-right: 10%;
box-sizing: border-box}

.affinity-row.sidebar-right .column-2 {
width: 30%;
float: left;
box-sizing: border-box}

.column-2 .column-content h2{
margin-top: 10px;
font-size: 20px}

.column-2 .column-content p{
font-size: 13px}

body#home .column-2 .column-content .feature {
padding: 10px 20px;
margin-top: 10px;
border-radius: 3px;
background: #DEE3E5 url(../img/ice-bg.png)}

ul.supplier li{
margin: 0 20px 0 0;
display: inline-block;
list-style: none}

body#home .column-2 .column-content .feature img{
width: 55%;
margin: 0 10px 10px 0;
border-radius: 3px;
border: 1px solid #ccc;
float: left;}

/*Headings*/
h1, h2, h3, h4 {
font-size: 26px;
margin: 5px 0px 10px;
font-weight: 400;
text-transform: uppercase;
color: #285387;
font-family: Raleway}

h2 {
font-size: 22px}

h3 {
font-size: 20px}

h4 {
font-size: 17px}

/*contact*/

input, textarea {
border: 1px solid #ccc;
border-radius: 3px;
transition: .6s;
width: 100%;
background: #f7f7f7;}

input:focus, textarea:focus {
background: #fff;}

label {
margin-top: 10px;
font-size: 13px;
display: block}

#submitbutton {
cursor: pointer;
margin: 20px 0}

body#contact .column-1 {
min-height: 250px}

form {
padding: 10px 30px;
border-radius: 3px;
border:1px solid #ccc;
background: url(../img/ice-bg.png);
max-width: 600px}

.error {
font-size: 12px;
font-weight: bold;
color: #BF0300}

#cont-form input.error, #cont-form textarea.error{
border: 1px solid #BF0300}

/*Footer*/

.footer {
border-top: 15px solid #9FAEB5;
margin-top: 100px;
background: #000 url(../img/ice-bg.png);
padding: 20px 0}

.footer h3, .footer h4 {
color: #BCD3F4;
font-size: 16px;
margin: 10px 0px 0px 0px}

.footer div {
text-align: center}

.footer p, .footer a {
font-size: 13px;
color: #efefef}

.footer a {
color: #BCD3F4}

a.social {
transition: 1s;
background: #9FAEB5;
border-radius: 100%;
display: inline-block;
padding: 5px 5px 0;
margin: 10px 5px 0 5px;
box-shadow: 0 0 8px rgba(255,255,255,.4);}

a.social:hover {
background: #fff}

a#p80{
text-decoration: none;
color: #dfdfdf;
font-size: inherit;
white-space: no-wrap}

a#p80>span{
font-size: inherit;
color: #69CAFF}

a#p80::before {
position: relative;
top: 6px;
content: url(https://port80services.com/img/port80-logo-sml.png)}

.footer ul.supplier li img{
height: 30px}


/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 701px) and (max-width: 990px) {
.product {
height: 350px;}

#banner #bannertext p {
font-size: 200%!important}

}
/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {

body {
margin: 0px}

.p7DMM03.p7DMM.p7dmm-left, .p7DMM03.p7DMM.p7dmm-right {
padding: 0px !important}

.layout {
padding: 0px 0 0 5%}

.column-2 {
margin-top: 30px;
padding-right: 5%}

.alignleft, .ind-product {
float:none}

.product {
width: 48%}

#product-grid .product:nth-of-type(3n+3) {
margin-right: 2%}

#product-grid .product:nth-of-type(2n+2) {
margin-right: 0}

div#logo, div#contact-info {
width: 100%;
float: none;
clear: both;
text-align: center}

div#logo img {
margin: auto;
display: block}

div#contact-info a, div#contact-info p {
font-size: 13px;
margin: -20px 0 -20px}


#banner #bannertext {
padding-top: 0;
margin-top: -15px;}

#banner #bannertext p {
padding-top: 0;
font-size: 100%!important}


.column, .column-1, .column-2, .column-3,
.column-half, .column-third, .column-fourth,
.column-fifth {
float: none !important;
width: auto !important;
box-sizing: border-box}

.caption {
background: none}

#banner  {
border-bottom: 20px solid #DEE3E5}

.navwrap {
padding: 5px 0 10px!important}


}

@media only screen and (min-width: 0px) and (max-width: 550px) {

.product {
height: 250px;
margin: 0!important;
width: 100%}

.product .cta {
display: none}

.product .caption a, .product .caption a strong {
font-size: 11px}




}