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

/* --- B O D Y  &  C O N T A I N E R -------*/

body{
 margin:0;
 color:#333333;
 font-family: 'Open Sans', sans-serif;
 background-color:#f7f8fc;
}

#container {
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
	background-color:white;
}

.topMessage::before {
  content: " ";
}

/* ------ V A R I O U S  S T Y L E S -------*/

h1, h2 {
	font-family: 'Oswald', sans-serif;;
	margin-bottom:4px;
	padding:0px;
}

img {
    max-width: 100%;
    height: auto;
}

.left {
	text-align:left;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

.noMargin {
	margin:0px;
	padding:0px;
}

.bold {
	font-weight:bold;
}

.italic {
	font-style:italic;
}

.largeText {
	font-size:180%;
}

.text120 {
font-size: 120%;
}


.lineHeight8 {
	line-height:1.6;
}

.marginAuto {
	margin-left:auto;
	margin-right:auto;
}

fullWidth {
	width:100%;
}

figure img {
	max-width:100%;
	
}

.displayFlex {
  display: -webkit-flex;	
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap: wrap;
}

.displayFlexOnly {
  display: -webkit-flex;	
  display: flex;
}


.sameSizeFlexbox {
flex-basis: 47%;
flex-grow: 0;
}

.noWrap {
flex-wrap: nowrap;
}

.left {
	text-align:left;
}

.inlineBlock {
	display:inline-block;
}

.width80 {
	width:80%;
}

.width60 {
	width:60%;
}

.marginTop3 {
	margin-top:3px;
}

.advantagesWidth {
	width:50%;
}

.floatRight {
	float:right;
}

.floatLeft {
	float:left;
}

.margin5 {
	margin:5px;
	margin-right:10px;
}

.margin8 {
	margin-top:8px;
	margin-bottom:8px;
}

.noDisplay {
	display:none;
}

.red {
	color:red;
}

.blue {
	color:blue;
}

.darkBlue {
	color:#00008B;
}

.levisGreen {
color:#04813B;
}

.levisLime {
background-color: #C2D500;
}

.greenBorderTop {
border-top-width: .5em;
border-radius: 3px;
border-top-color: #04813B;
border-top-style: solid;
width:90%;
margin-left: auto;
margin-right: auto;
padding-top:4px;
}

.white {
color: white;
}

.maroon {
	color:maroon;
}

.marginBottom12 {
	margin-bottom:12px;
}

.width30 {
	width:30%;
}

.width40 {
	width:40%;
}

.width45 {
	width:45%;
}

.width50  {
	width:50%;
}

.width60 {
	width:60%;
}

.width95 {
	width:95%;
}

.width80auto {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.width95auto {
	width:95%;
	margin-left:auto;
	margin-right:auto;
}

.maxWidth70 {
	max-width:70%;
}

.verticalAlign {
    vertical-align: middle;
}

.inlineBlock {
	display:inline-block;
}

.flexCenter {
  align-items: center;
  justify-content: center;
}

.flexColumn {
	flex-direction:column;
}

.equalSize {
	justify-content: space-between;
}

.blueBorder {
	border:solid blue 2px;
	border-radius:5px;
}

.paddingLeft5 {
	padding-left:5px;
}

.border10 {
	border-radius:10px;
}

#spacing, #alpineproducts input, select {
	text-align:center;
	margin-top:3%;
	border: 1.5px solid black;
	border-radius:2px;
	margin-left:4px;
}

#alpineProducts {
background-color: white;
}

.noBullet {
	list-style-type:none;
}

.borderAll {
	border:solid 1.5px black;
	padding:5px;
	margin-left:.1%;
	margin-right:.1%;
}

.twopercent {
	margin-left:2%;
	margin-right:2%;
	margin-top:5px;

}

.threepercent {
	margin-left:3%;
	margin-right:2%;
	margin-top:5px;
}

.padding1percent {
	padding:1%;
}

.paddingLeft1Percent {
padding-left: 2%;
}

/* hide up/down arrows ("spinners") on input fields marked type="number" */
.no-spinners {
  -moz-appearance:textfield;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.showOnMobile {
	display:none;
}


.displayAsTable {
	display: table;
}

.displayAsTableHeader {
	display: table-header-group;
}

.displayAsTableRow {
	display: table-row;
}

.displayAsTableCell {
	display: table-cell;
}

.displayAsTableCaption {
	display: table-caption;
}

.samplesSpacing {
	width:45%;
}

.flexstart {
	justify-content: flex-start;
}

.justifyEven {
justify-content:space-evenly;;
}

.flex100 {
flex-basis: 100%;
}

.recaptcha-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1%;
}

#alpineProducts h1 {
color:#00e;
}

#alpineProducts #alpineContainer h2 {
color:#f18926;
}

.product-grid {
  width: 50%;
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1 fr auto;
  border: 1px solid #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.product-grid > div {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product-grid > div:nth-last-child(-n+2) {
  border-bottom: none; /* remove bottom border on last row */
}

.product-name {
  text-align: left;
}

.product-price {
  text-align: right;
  font-weight: bold;
}

/* Optional hover effect */
.product-grid > div:hover {
  background-color: #f5f5f5;
}

/* Responsive */
@media (max-width: 600px) {
  .product-grid {
    width: 90%;
    grid-template-columns: 1 fr;
  }

  .product-price {
    text-align: left;
    padding-top: 0;
  }
}



/*---------------------------------- START HEADER -------------------------------------------*/
.header{
	display:flex;
	flex-wrap:wrap;	
    background: white;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:2%;
	padding-right:0%;
	margin:4px;
}

.cart {
	height:100%;
	font-family: 'Open Sans', sans-serif;
	color:red;
}

/*----------------------------------- END HEADER -------------------------------------------*/

/*----------------------------- START NAVIGATION -------------------------------------------*/

nav{
      width: 100%;
      background: #64A0E4;
      margin: 0;
	  text-align:center; 
	  color:white;
}

/* Add a background color to the top navigation */
.topnav {
    background-color: #64A0E4;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #22329E;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: 'Open Sans', sans-serif;
	font: inherit; /* Important for vertical align on mobile phones */
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#f7f8fc;
    width: 70%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}



/* Style the links inside the dropdown */
/*.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}*/



/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdown links on hover */
/*.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-header {
	margin:0;
	padding:0;
	color:black;
	margin-top:5px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 23%;
  padding: 5px;
  background-color:#f7f8fc;
  color:black;
}


/* Style links inside the columns */
.column a {
  float: none;
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.column a:hover {
  background-color: #555;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.menuPics {
	vertical-align:middle;
	margin-right:5px;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
   .column {
    width: 100%;
    height: auto;
	padding:0;
  }
  
  .dropdown-content {
	  width:100%;
	  font-size:120%;
  }
  
    .dropdown-content a{
	  font-size:140%;
  }
  
  
  .leftMobile {
	  text-align:left;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 750px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

}

/*-------------------------------- END NAVIGATION --------------------------------------------*/

/*--------------------------------- START CONTENT --------------------------------------------*/

.main {
	padding:7px;
}

.alpineMain {
padding-left: 2%;
padding-right: 2%;
}

.shoppingCartForm {
	text-align:center;
	font-weight:bold;
}


/*--------------------------------- SNOW GUARD <strong>GRID</strong> ON HOME PAGE --------------------------------------------*/

.top2GridItem {
	  flex-grow: 1;
      flex-basis: 45%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
}

.gridItem {
	  flex-grow: 1;
      flex-basis: 20%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
	  margin-top:10px;
}

.gridItemLevis {
	  flex-grow: 1;
      flex-basis: 30%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
	  margin-top:10px;
}

.gridItem30Percent {
flex-grow: 1;
      flex-basis: 30%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
	  margin-top:5px;
	  margin-bottom: 4%;
}


.flexItemWrap {
flex-wrap: nowrap;
}

.buttonSmall {
	background-color: #64A0E4; 
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
}

#topOfGrid {
	border-bottom:solid blue 2px;
	margin-bottom:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
}

#snowGuardGrid {
	border-bottom:solid blue 2px;
	margin-bottom:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
}

#snowGuardGrid p, img {
	margin:0px;
}

#snowGuardGrid p {
	font-weight:bold;
	margin-bottom:5px;
	display:inline-block;
}

#snowGuardGrid form {
	display:inline-block;
	width:100%;
}

.gridButton {
	background-color: #64A0E4; 
    border: none;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	margin-top:10px;
	border-radius:5px;
	font-size:16px;
	font-weight:bold;
}

.gridButtonLevis {
	background-color: #2596be; 
    border: none;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	margin-top:0px;
	border-radius:5px;
	font-size:16px;
	font-weight:bold;
	width: 60%;
    table-layout: fixed;
    border-collapse: collapse;
}

.gridButtonSnowDefender {
	background-color: white; 
    border: none;
    color: #2596be;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	margin-top:15px;
	border-radius:5px;
	font-size:16px;
	font-weight:bold;
	width: 27%;
    table-layout: fixed;
    border-collapse: collapse;
}

#castAluminumHomePage {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
	margin-bottom:0px;
}
	

#customColorInstructions {
	background-color:#F7F3A0;
	width:80%;
	border-radius:5px;
}

#snowGripHomePage {
	border-top:solid blue 2px;
	border-bottom:solid blue 2px;
	margin-bottom:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
}

.blueBorderTop {
	border-top:solid blue 2px;
	margin-bottom:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
}
	
/* --------------------------------- START FOOTER ------------------------------------------*/
.footer{
    background: #22329E;
	color:white;
	display:flex;
	flex-wrap:wrap;	
	flex:1;
	justify-content: space-around;
	text-decoration:none;
	padding-top:5px;
	padding-bottom:5px;
}

.footerBox {
		text-align:left;
}

.footerBox a {
	color:white;
}

.paymentIcons {
	margin-top:15px;
	margin-bottom:10px;
}

#copyright {
	background: #22329E;
	color:white;
	padding-bottom:5px;
	padding-top:8px;
}

#copyright a:link {
  color: white;
}

#copyright a:visited {
  color: white;
}

#copyright a:hover  {
  color: white;
}

#copyright a:active  {
  color: white;
}

.facebook {
	margin-top:10px;
}

/* --------------------------------- COPYRIGHT YEAR ------------------------------------------*/

.copyrightYear::before {
  content: "2026 ";
}

/* --------------------------------- END COPYRIGHT YEAR ------------------------------------------*/

/* --------------------------- P R O D U C T   P A G E S ----------------------------------------*/

.testingValues {
	width:80%;
	border:solid 2px #00F;
	border-radius:
	7px;padding-top:7px;
	padding-bottom:7px;
}

#snoSafeAdvantages {
	width:45%;
}

#twoGuards {
	width:40%;
	margin-bottom:5px;
}

#twoGuards figcaption {
	width:80%;
	font-style:italic;
	margin-left:auto;
	margin-right:auto;
	font-weight:bold;
	margin-top:0;
}

.shoppingCartForm {
	font-size:18px;
	margin-bottom:7px;
}

#main table {
    border-collapse: collapse;
	width:25%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;	
}

#main table, th, td {
    border: 1px solid black;
	font-weight:bold;
	padding:4px;
}

#main table td {
	text-align:right;
}

.sameSizeForSgResourceButtons {
	flex-basis: 15%;
    flex-grow: 0;
}

.sameSizeForSgResourceButtonsSealant {
	flex-basis: 30%;
    flex-grow: 0;
}

.spaceEvenly {
	justify-content:space-evenly;
}

#cad {
	margin-top:10px;
	margin-bottom:10px;
}

.cadBack {
	background-image:url(../images/CADbackground.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}

#productPage, #alpineProducts input[type=submit], #s5 input[type=submit] {
  border: 1px solid #333;
  border-radius:5%;
  color: black;
  font-size:100%;
  padding: .70%;
  text-decoration: none;
  margin: .75%;
  cursor: pointer;
}

#productPage, #alpineProducts input[name="quantity"], #s5 input[name="quantity"]  {
  display: inline-block;
  border: 1px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
  font-size:100%;
  font-weight:bold;
  padding: 1%;
}

#productPage h4 {
	width:37%;
	margin-left:auto;
	margin-right:auto;
}

/* --------------------------- E N D  P R O D U C T   P A G E S ----------------------------------------*/

/* --------------------------------- START SAMPLES FORM ----------------------------------*/

.formOuter li {
  display: -webkit-flex;	
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap: wrap;
  align-items: center;
  margin-left:0;
  margin-bottom:8px;
   }
   
.formOuter ul {
	list-style-type:none;
}

.formOuter > li > label {
  flex: 1 0 120px;
  max-width: 220px;
  text-align:left;
  padding-left:5px;
}

.formOuter input, .formOuter textarea {
	width:60%;
}

.formOuter li button {
	display:block;
	text-align:center;
	margin-top:7px;
	margin-left:auto;
	margin-right:auto;
}

#spacingForm input {
	width:inherit;
}

.button {
    background-color: #64A0E4; 
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.white {
	text-decoration:none;
	color:white;
}

.sealantInfo {
	margin-left:auto;
	margin-right:auto;
	width:90%;
	text-align:left;
}

#sampleRequestForm td {
	text-align:left;
}

/* --------------------------------- END SAMPLES FORM ---------------------------------------------*/

/* --------------------------------- START SPACING FORM -------------------------------------------*/

#spacingTable form  { 
    display: table;      
}

#spacingTable p { 
    display: table-row;
	text-align: left;
}

#spacingTable label { 
    display: table-cell; 
	text-align: left;
}

#spacingTable input { 
    display: table-cell; 
	text-align: left;
}

.jobInfo  { 
    display: table;      
}

.jobInfo p { 
    display: table-row;      
}

.jobInfo label { 
    display: table-cell;      
}

.jobInfo input { 
    display: table-cell;      
}


#roofData th, tr {
	  text-align: center;
}

.buttonPrintSpacing {
	background-color: #64A0E4; 
    border: none;
    color: white;
	font-weight:bold;
    padding: 1% 1%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 120%;
	margin-top:2%;
	margin-bottom:2%;
}

/* --------------------------------- END SPACING FORM ---------------------------------------------*/


/* --------------------------------- START CUSTOMER SERVICE PAGE ----------------------------------*/

#customrService h3 {
	margin:0;
}

#customrService p {
	margin-top:3px;
}

/* --------------------------------- END CUSTOMER SERVICE PAGE ----------------------------------*/

/* --------------------------------- START SHEAR TESTING PAGE ----------------------------------*/

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-top:10px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}



/* --------------------------------- E N D SHEAR TESTING PAGE ----------------------------------*/

/* --------------------------------- S T A R T  S N O W   G R I P  P A G E ----------------------------------*/

.SnowGripAdvantages {
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

.width80auto {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.snowGripCalculator {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border:#22329E 3px dotted;
	border-radius:5px;
	padding:5px;
	background-color:#f7f8fc;
}

.snowGripCalculatorTitle {
	margin-top:0;
	margin-bottom:0;
}

.snowGripCalculatorCoverage {
	margin-top:2px;
}

.snowGripDocuments {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border:#22329E 3px solid;
	border-radius:5px;
	background-color:#f7f8fc;
	padding:3%;
}

.snowGripDocuments a {
	border-radius:10px;
}

.fontSize120 {
	font-size:120%;
}

.borderNone {
	border-style: none;
}

.snowGripCalculatorResultsBoxes {
	background-color:#FFC;
}

.snowGripWarranty {
	font-size:90%;
}


/* --------------------------------- E N D  S N O W   G R I P  P A G E ----------------------------------*/

/* --------------------------------- S T A R T  S-5! P A G ES ----------------------------------*/

.colorgardGridItem {
	  flex-grow: 1;
      flex-basis: 45%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
}

.description {
	font-weight:bold;
	width:70%;
}

#s5 figcaption {
	font-weight:bold;
}

.itemBottom {
	align-items:flex-end;
}

.s5ColorgardInstructionsButton {
	background-color: #64A0E4; 
    border: black solid 1px;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top:10px;
	margin-bottom:13px;
	border-radius:5px;
	font-size:16px;
	font-weight:bold;
	width:55%;
	-webkit-box-shadow: 5px 9px 10px 5px #000000; 
    box-shadow: 5px 9px 10px 5px #000000;
}

.itemDescriptionLarge {
  font-size: 1.5em;
}


.S5AllProductsGridItem {
	  flex-grow: 1;
      flex-basis: 20%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:left;
	  vertical-align:text-top;
	  font-weight:bold;
	  align-items: stretch;

}

#s5products ul {
	list-style: none;
	margin-top:5px;
	padding-top:0px;
	margin-left:0px;
    padding:0px;
}

#s5products ul li {
	line-height:1.8;
}

#s5ProductIndex a {
  text-decoration: underline;
  color:#333333;
}

.s5ProductsPageButton {
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}


/* --------------------------------- E N D  S-5!  P A G ES ----------------------------------*/

/* --------------------------------- S T A R T  L E V I S   P A G ES ----------------------------------*/



.gridItemSnowDefender {
	  flex-grow: 1;
      width: 48%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:left;
	  vertical-align:text-top;
	  margin-top:1px;
}

.leviBlue {
background-color: #2596be;
}


.leviRed {
background-color: #CC142C;
}

.leviGreen {
background-color: #54AC48;
}

.leviOrange {
background-color: #EB8B04;
}

.leviYellow {
background-color: #EBAB04;
}

.leviAqua {
background-color: #13BFD7;
}

.leviPurple {
background-color: #19106e;
}

#levispages input[type=submit] {
  background-color: #ff9900;
  border: 1px solid #333;
  border-radius:5%;
  color: black;
  font-size:100%;
  padding: .70%;
  text-decoration: none;
  margin: .75%;
  cursor: pointer;
}

#levispages fieldset {
border:1 solid white;
margin-top:3%;
padding:2%;
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius:5px;
}

#levispages,#alpineProducts select {
text-align: left;
}


/* --------------------------------- E N D  L E V I S   P A G ES ----------------------------------*/

/* -------ALPINE PAGES -webkit-------------------------------------- */
.product-grid {
  width: 40%;
  margin: 3px auto;
  display: grid;
  grid-template-columns: 1 fr auto;
  border: 1px solid #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.product-grid > div {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product-grid > div:nth-last-child(-n+2) {
  border-bottom: none; /* remove bottom border on last row */
}

.product-name {
  text-align: left;
}

.product-price {
  text-align: right;
  font-weight: bold;
}

/* Optional hover effect */
.product-grid > div:hover {
  background-color: #f5f5f5;
}

/* Responsive */
@media (max-width: 600px) {
  .product-grid {
    width: 90%;
    grid-template-columns: 1 fr;
  }

  .product-price {
    text-align: left;
    padding-top: 0;
  }
}

.highlight-box {
  width: 40%;
  margin: 5px auto;
  padding: 25px 30px;
  text-align: left;
  background: linear-gradient(135deg, rgba(0,0,238,0.06), rgba(241,137,38,0.06));
  border-left: 6px solid #f18926;
  border-radius: 10px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}


/* Responsive */
@media (max-width: 768px) {
  .highlight-box {
    width: 90%;
    padding: 20px;
  }
}






/* ---------------------------M E D I A  Q U E R Y ----------------------------------------*/

@media screen and (min-width: 799px) {

.noShowDesktop {
	display:none;
}

}

@media screen and (max-width: 600px) {
  
#snowGripHomePage, #castAluminumHomePage {
	flex-wrap:wrap;
}

.wrapOnMobile {
		flex-wrap:wrap;
}

#snowGripHomePage figure {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#snowGripHomePage figcapton {
	display:block;
	text-align:center;
	width:100%;
}

#snowGripHomePage, #castAluminumHomePage ul {
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.noShowMobile {
	display:none;
}


.colorgardGridItem {
	  flex-basis: 95%;
	  border-bottom:solid blue 2px;
	  margin-bottom:7px;
}


.maxWidth70 {
	width:100%;
}

.description {
	width:100%;
}

#originalWidePic {
	margin-bottom:15px;
}

.S5AllProductsGridItem {
      flex-basis: 48%;
}

#s5ProductIndex {
  width:93%;
  margin-left:auto;
  margin-right:auto;
  padding:0px;
}

.noShowOnMobile {
	display:none;
}

.flexItemWrap {
flex-wrap: wrap;
}

.gridButtonSnowDefender {
width: 80%;
}

.reverseCol {
display: flex;
flex-wrap: wrap-reverse;
}

.whiteBorderOnMobile {
border: solid white 2px;
border-radius: 5px;
margin: 1%;
padding-bottom: 1%;
}


}

@media screen and (max-width: 800px) {
  

.showOnMobile {
	display:inline;
}

.largeText {
	font-size:115%;
}

.width90Moblie {
	width:90%;
}

.footerBox {
	width:100%;
	margin-bottom:7px;
    font-size:80%;
	padding-left:10px;	
}

#copyright {
	font-size:80%;
}

li{
  font-size:100%;
 }
 
.flexGrow {
  flex-grow: 1; 
  margin-left: 3%;
}

.flexShrink {
    flex-shrink: 0;
}

.sameSizeForSgResourceButtons {
	flex-basis: 45%;
	margin-bottom:10px;
}

.sameSizeForSgResourceButtonsSealant {
	flex-basis: 45%;
	margin-bottom:10px;
}

.advantagesWidth {
	width:95%;
}

#snoSafeAdvantages, #twoGuards {
	width:100%;
}

#twoGuards figcaption {
	width:100%;
	margin-bottom:5px;
}

.gridItem {
	  flex-grow: 1;
      flex-basis: 43%;
}

.gridItemLevis {
	  flex-grow: 1;
      flex-basis: 65%;
}

.width100 {
	width:100%;
	text-align:center;
}

.width100percent {
width: 50%;
}


.width100Mobile {
width: 100%;
}

.width60 {
	width:95%;
}

.width95Mobile {
	width:95%;
}

.width75Mobile {
	width:77%;
}

#advantages li {
	width:100%;
}

.sameSizeFlexbox {
flex-basis: auto;
}

#samples input, #comments, table {
	width:90%;
}

#productPage input[type=submit] {
  background-color: #ff9900;
  border: 1px solid #333;
  border-radius:5%;
  color: black;
  font-size:100%;
  padding: 1%;
  text-decoration: none;
  margin-top:8px;
  margin-bottom:4px;
  cursor: pointer;
  width:80%;
}


#substrates ul {
	margin:0;
	padding:0;
	width:95%;
}

.samplesSpacing {
	width:95%;
}

.blueBorderTopMobile {
	border-top:solid blue 2px;
	margin-bottom:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	margin-top:7px;
}

#productPage h4 {
	width:62%;
	margin-left:auto;
	margin-right:auto;
}

.s5ColorgardInstructionsButton {
	width:80%;
}

.gridItemSnowDefender {
width:95%;
}

.reverseWrap {
flex-wrap: wrap-reverse;
}

.justifyStart {
justify-content: flex-start;
}

.gridItem30Percent {
flex-grow: 1;
      flex-basis: 90%;
	  padding-left:1%;
	  padding-right:1%;
	  padding-top:0;
	  padding-bottom:0;
	  text-align:center;
	  vertical-align:text-top;
	  margin-top:5px;
}

.blueBorderTop {
margin-top: 2%;
}

}

@media print {
	
@page {
margin: 0.5cm;
}

nav, footer {
display: none;
}

#quality {
display: none;
}

.footer  {
display: none;
}

#container {
	border:white 0px solid;
}

.pageBreak {
	page-break-after: always;
} 

.shoppingCartForm {
		page-break-after: always;
} 

#copyright {
display: none;
}

.doubleBorder {
	border:#FFF 0px solid;
}

#contactInfo {
	display:block;
	margin-top:5px;
}

img {
max-width: 500px;
}

body {
font: 12pt;
line-height: 1.3;
}

h2 {
font-size: 14pt;
}

.videoWrapper {
	display:none;
}

.alpineMain {
padding-left: 1%;
}

}