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

/*@import url('https://fonts.googleapis.com/css?family=Lato');*/


/* lato-regular - latin-ext_latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
	font-display: swap;
  font-weight: 400;
  src: url('../fonts/lato-v23-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-ext_latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Lato';
  font-style: bold;
  font-weight: 700;
 
  src: local(''),
       url('../fonts/lato-v24.woff2') format('woff2'), /* Super Modern*/
       url('../fonts/Lato-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
      
}




.spec-h1 {
	font-family: "Lato", sans-serif;
	color:#303030;
	text-align:center;
	padding-bottom: 20px;
    font-size: 30px;
	/*max-width: 80%;*/
    margin: 0 auto;	
	padding-top: 10px;
}

.home-h1 {
	font-family: "Lato", sans-serif;
	color:#303030;
	text-align:center;
	padding-bottom: 20px;
    font-size: 30px;
	/*max-width: 80%;*/
    margin: 0 auto;	
	padding-top: 10px;
	margin-top: 375px;
	padding-bottom: 0px;
	
	
}

.spec-h2 {
	font-family: "Lato", sans-serif;
	color:rgba(225,15,33,1.00);
	text-align:center;	
	font-size: 20px;
	margin-top:10px;
}
.spec-h3 {
	font-family: "Lato", sans-serif;
	color:#303030;	
	text-align:center;
	font-size: 16px;
}


.product-h2 {
	font-family: "Lato", sans-serif;
	color:#669900;
	text-align:left;	
	font-size: 20px;
	margin-top:10px;
	clear:both;
}
.product-h3 {
	font-family: "Lato", sans-serif;
	color:#303030;	
	text-align:left;
	font-size: 16px;
	margin-bottom: 20px;
	margin-top:7px;
}



.home-para {
	font-family: "Lato", sans-serif;
	font-size:15px;
	color:#303030;
	text-align: left;
    padding-bottom: 13px;
	line-height:21px;
}



.home-para-white {
	font-family: "Lato", sans-serif;
	font-size:15px;
	color: white;
	text-align: left;
    padding-bottom: 13px;
	line-height:21px;
	padding-left: 12px;
}

a.productlink:link {color:#303030; text-decoration: none; }
a.productlink:visited {color:#303030; text-decoration: none; }
a.productlink:hover { color:#303030; text-decoration: none; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05), 0 0 15px 0 rgba(0, 0, 0, 0.25); transition: 0.1s ease; cursor:pointer; transform: scale(1.01);}

.productlink {
	/*margin:10px;*/
border: 1px solid #E6E0DE;
border-radius: 5px;
padding: 0px 20px 0px 20px;
width: 100%;
display: inline-table;
	min-height: 511px;

  
}


a.productlink-two-col:link {color:#303030; text-decoration: none; }
a.productlink-two-col:visited {color:#303030; text-decoration: none; }
a.productlink-two-col:hover { color:#303030; text-decoration: none; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05), 0 0 15px 0 rgba(0, 0, 0, 0.25); transition: 0.1s ease; cursor:pointer; transform: scale(1.01);}

.productlink-two-col {
	/*margin:10px;*/
border: 1px solid #E6E0DE;
border-radius: 5px;
padding: 0px 20px 0px 20px;
width: 100%;
display: inline-table;
min-height: 511px;
grid-column: span 2;
  
}

@media only screen and (max-width: 768px ) {
	
	.productlink-two-col {grid-column: auto!important;}



}





.content1 {
width: 100%;
  
}

.installation-solutions {
border: 1px solid #E6E0DE;
border-radius: 5px;
background-color:rgba(227, 6, 19);
text-align:center;
font-family: "Lato", sans-serif;
height:200px;
padding:0px 20px 0px 20px;
  
}

a.installation-solutions:link {color:#FFF; text-decoration: none; }
a.installation-solutions:visited {color:#FFF; text-decoration: none; }
a.installation-solutions:hover { color:#FFF; text-decoration: none; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05), 0 0 15px 0 rgba(0, 0, 0, 0.25); transition: 0.1s ease; cursor:pointer; transform: scale(1.01); }

ul.bulletone {
	margin-left:20px;
	margin-bottom:10px;
	font-family: "Lato", sans-serif;
	font-size:15px;
	color:#303030;
	}
ul.bulletone li { margin-bottom:7px;
	 
}


.mobile-email {
	color:#FFF;
		
}

a.mobile-email {
	text-decoration:none;
	color:#FFF;
	display:initial;
	font-size:14px;
	padding:initial;
}

a.mobile-email:hover {
	text-decoration:underline;
	
}

a.header-email-address {
text-decoration:none;
color:#fff;


}

a.header-email-address:hover {
	text-decoration:underline;
	
}

a.footer-email {
text-decoration:none;
color:#303030;


}

a.footer-email:hover {
	text-decoration:underline;
	
}

a.footer-email:visited {color: #303030!important;}





.hero-image {
width: 100%;
}

.hero-image img {
	width: 100%;
}




.formitemcontainer {

	/*width: 23.5%;*/
	width:270px;
	/*min-width:150px;*/
	float:left;
	min-height:80px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin:7px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	padding: 7px;
	text-align:left;
	background:#fdfcfc;
}

.enquiry_with_info {
	margin: 0px 0px 13px 0px;
	float:left;
	font-size:12px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	text-align:left;
	font-weight:bold;
}

.enquiry_no_info {
	margin: 0px;
	font-size:13px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	text-align:left;
	font-weight:bold;
}

.enquiry {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(enquiry_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.enquiry:hover { background:#E6E0DE;
background-image:url(enquiry_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }
	 
	 
.buy {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(buyonline.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.buy:hover { background:#E6E0DE;
background-image:url(buyonline.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	 

.request {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(request.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.request:hover { background:#E6E0DE;
background-image:url(request.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	
	 
	 
.datasheet {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(datasheet.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.datasheet:hover { background:#E6E0DE;
background-image:url(datasheet.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }		 


.container .content div .hscroll .sealants .elements {
	background-color: #bedda7;
}

.hero-image1 {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/hero1.png);
  height:350px;


  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top:20px;
  margin-bottom:20px;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-35%, -50%);
  color: white;
}

.hero-text h1 {
	font-size:36px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:500;
	line-height:50px;
	/*text-shadow: 0px 2px 2px #000;*/
}

.hero-text h2 {
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:200;
	line-height:30px;
	/*text-shadow: 0px 2px 2px #000;*/
}

a.general:link {color:#669900; text-decoration: none; }
a.general:visited {color:#669900; text-decoration: none; }
a.general:hover { text-decoration: underline; }

.zoom {

  transition: transform .2s; /* Animation */
  margin: 0 auto;
  transform: translateX(0px);
}

.zoom:hover {
  transform: scale(1.3) translateX(-60px);
   /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
 
}

.footer-enquiry {
	height: 27px; 
	font-family: inherit; 
	padding: 5px; 
	margin-bottom:7px;
	background-color:#EFEFEF;
	resize:none;
	font-size:13px;
}

.enquiry-form {
	height: 27px; 
	font-family: inherit; 
	padding: 5px; 
	margin-bottom:7px;
	;
	resize:none;
	font-size:13px;
}


/*DROPDOWN MULTI-LEVEL MENU*/
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            /*padding-top: 10px;*/
        }

        .dropdown {
            margin: -10px;
            padding: 0;
            list-style: none;
                       
  font-size: 0.9rem;
        }

        .dropdown li {
            position: relative;
        }

        .dropdown li a {
            
            text-align: center;
            text-decoration: none;
            display: block;
            padding: 10px;
        }

        .dropdown li ul {
            position: absolute;
            top: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            display: none;
            line-height: normal;
            background-color: #333;
        }

        .dropdown li ul li a {
            text-align: left;
            color: #cccccc;
            font-size: 14px;
            padding: 10px;
            display: block;
            white-space: nowrap;
        }

        .dropdown li ul li a:hover {
            background-color: #818181;
            color: white;
        }


        .dropdown li ul li ul {
            /*left: 100%;*/
            top: 0;
        }

        ul li:hover>a {
            background-color: white;
            color: black;
        }

        ul li:hover>ul {
            display: block;
        }
.triangle {color: rgb(225, 15, 33); font-size: 10px; margin-right: 5px;}
		
/*END OF MULTI-LEVEL MENU*/



.techdata {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}
.techdata th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 6px;border-style: solid;border-color: #999;text-align:centre; vertical-align:central;}
.techdata tr {background-color:#bedda7;}
.techdata td {font-size:11px;border-width: 1px;padding: 6px;border-style: solid;border-color: #999; text-align:center; vertical-align:central;}
/*.techdata tr:hover {background-color:#ffffff;}*/

.tabcontent {
  position: relative;
}

.hscroll {
  overflow-x: auto;
  position: relative;
}



.hscroll::-webkit-scrollbar {
  width: 10px; /* Adjust the width of the scrollbar */
}

.hscroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* Adjust the color of the scrollbar track */
}

.hscroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Adjust the color of the scrollbar thumb */
}




/*.techdata tr:hover {background-color:#ffffff;}*/


.sealants {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.sealants th {font-size:12px;background-color:#E6E0DE;border-width: 1px;padding: 7px;border-style: solid;border-color: #729ea5; text-align:center; vertical-align:central;}
.sealants tr {background-color:#fff;}
.sealants td {font-size:12px;border-width: 1px;padding: 5px;border-style: solid;border-color: #729ea5; vertical-align:central; text-align:center;}
.sealants tr:hover {background-color:#ffffff;}





  .diaDiv{display:none;}
	.capDiv{display:none;}

  #showOpening{}
  #showZero{}
  #showOne{}
  #showTwo{}
  #showThree{}
  #showFour{}
  #showFive{}
#showBcap{}
	
	.size{ }
	.none{ }
    .zero{ }
    .one{ }
    .two{ }
	.three{ }
	.four{ }
	.five{ }
	.Bcap{ }




.button-1 {
  background-color: white;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: rgb(225, 15, 33);;
  cursor: pointer;
  display: inline-block;

  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin-left: 10px;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
	margin-top: 5px;
}

.button-1:hover,
.button-1:focus {
  background-color: #EFEFEF;
	color: black;
	
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    display: none;
    z-index: 999;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 1000;
}

.popup-content {
    text-align: center;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}

.popup-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.popup-button:hover {
    background-color: #0056b3;
}

.open-popup-button {
    padding: 8px 8px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	margin-bottom: 14px;
}

.open-popup-button:hover {
    background-color: #0056b3;
}

.call-to-action {
margin-top: 5px; text-align: center; width: 320px; padding: 15px; border-radius: 10px; position: absolute; right: 5px; color: rgb(225, 15, 33); border: 1px solid #E6E0DE;
	}


.iframe-selection {width: 100%; height: auto;}


/* MEDIA QUERIES FOR STYLES IN THIS FILE */


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

	.mail-icon {display: none;}
	
	.header-email-address {display: none;}
	
	.header-email {margin-top: 0px;}
	
	.nav-wrapper {margin-top: 14px;}
	
	#separator {display: none;}
	

}


@media (max-width: 768px) {
  #Additionalinfo {float: none !important; clear: left;}
	
	.call-to-action {display: none;}	
	
	.header {display: none;}
	
	.red-band-top {display: none;}
	
	.hero-background {display: none;}
	
	.container {grid-template-rows: 1px auto auto 0px;}
	
	.home-h1 {margin-top: 0px;}
	
	.iframe-selection {height: 215px;}
		
}


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

h3 {font-size: 14px;}
	
	.hero-image {width: 350px; height: 100%; overflow-y: hidden; overflow-x: scroll;}

	.hero-image img {width: 1500px;}
	
	.content1 {width: 80%;}	
	
	#additional-info {display: none;}	
	
	
}


@media (min-width: 768px) {
	.mobile-header {display: none;}
		
}