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

/* Stylesheet for Specialist Thermal Supplies - by Wattage Media 2018 */


body

{background-color:rgb(249, 249, 249);}

body p
{font-size:1.5rem;
color: #226325;}


h1
{
color: rgb(48, 121, 51);
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-bottom: 3px solid rgb(52, 133, 56);
    padding-bottom: 20px;
    font-weight: 400;
    font-size: 4.5rem;
    letter-spacing: 0.04rem;
    text-shadow: 3px 2px 7px rgba(2, 2, 2, 0.23);
}


h2

{
color: rgb(48, 121, 51);
}



a img
{
max-width: 100%;
height: auto;
display: block;
border: 0;
}

img
{
max-width: 100%;
height: auto;
display: block;
border: 0;
}


/* Buttons */

button.darkbutton 
{
border:white solid 1px;
margin-top: 20px;
background-color: rgba(43, 43, 43, 0.43);
border: 1px solid #bbb;
text-align: center;
}

button.darkbutton a
{
color: white;
text-shadow: 1px 1px 2px rgba(2, 2, 2, 0.48);
text-align: center;
padding: 30px 40px;
}

.darkbutton a:hover
{
color: white;
}

button.darkbutton:hover
{
background-color: rgba(74, 74, 74, 0.43);
color: white;
}

button

{
	display: inline-block;
    height: 48px;
    padding: 0 0px;
    color: #255f27;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;	
	transition: background .60s ease-in-out;
   -moz-transition: background .60s ease-in-out;
   -webkit-transition: background .60s ease-in-out;
  
}

button a

{
text-decoration: none;
color:#255f27;
font-size: 1.3rem;
	transition: background .60s ease-in-out;
   -moz-transition: background .60s ease-in-out;
   -webkit-transition: background .60s ease-in-out;
text-align: left;
padding-top: 30px;
padding-left: 20px;
padding-right: 50px;
padding-bottom: 30px;
	
  
}


button:hover
{
background-color:
rgba(54,115,13,0.84)}


button a:hover
{
color:white;
}

button a:after

{
content:' >';
}


/* Header */

header.topheader
{
	width: 100%;
	min-height: 160px;
	background-color:white;
	padding-top: 30px;
}


header p

{
	border-bottom:#a8c9a2 solid 4px;
	padding-bottom: 1.2rem;
	letter-spacing: 0.1rem;
	 font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


#mainlogo
{
	transition: background 1s ease-in-out;
   -moz-transition: background 1s ease-in-out;
   -webkit-transition: background 1s ease-in-out;

}


#mainlogo:hover
{
	opacity:0.75;
	
}

#headersubtitle
{
	margin-bottom: 0;
	font-size: 1.4rem;
	letter-spacing: normal;
	border-bottom: none;

}

/* Navigation */


nav 
{
	width: 100%;
	height: auto;
	line-height: 0;
	display: inline-block;
	background-color:#a8c9a2;

	background: #a8c9a2; /* Old browsers */

	background: -moz-linear-gradient(top,  #a8c9a2 0%, #1d8e29 100%); /* FF3.6-15 */

	background: -webkit-linear-gradient(top,  #a8c9a2 0%,#1d8e29 100%); /* Chrome10-25,Safari5.1-6 */

	background: linear-gradient(to bottom,  #a8c9a2 0%,#1d8e29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8c9a2', endColorstr='#1d8e29',GradientType=0 ); /* IE6-9 */

}

nav ul

{list-style: none;
display: inline-block;
margin-bottom: 0;}

nav li
{text-transform: uppercase;
display: inline-block;
width: auto;
margin-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
letter-spacing: 0.08rem;
transition: background .30s ease-in-out;
   -moz-transition: background .30s ease-in-out;
   -webkit-transition: background .30s ease-in-out;
    text-shadow: 1px 1px 2px rgba(2, 2, 2, 0.48);
}


nav a

{color: white;
text-decoration: none;
font-size: 1.8rem;
font-weight: 550;
line-height: 2;}


nav li:hover

{color: white;
background-color: rgba(29,55,10,0.42);}


@media (max-width: 600px) {
	
nav li
	{width:100%;
	margin-bottom: 10px;}
	
}


@media (max-width: 1200px) {
	
header .four.columns
{width: 100%;}
	
header .seven.columns
{width: 100%;}
	
header img
{margin-left: auto;
margin-right: auto;
max-width: 380px;
width: 100%;
}
	
.headerlogo
{display:block;
text-align: center;
max-width:100% !important;}
	
.headerinfo
{width:100%;
display: block;
text-align: center;
max-width: 100% !important;
	margin-bottom: 50px;}
	
}



/* Page Header */

.pageheader
{
background-color:
rgba(25,25,25,1.00);
/*background-image:url(../images/headerbackground.jpg);*/
background-image:url(../images/liverpoolone.jpg);
background-size: cover;
background-position: center;
position: relative
}



.pageheader h1
{
color: white;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
border-bottom: 3px solid rgb(59, 152, 63);
padding-bottom: 20px;
font-weight: 400;
font-size: 4.5rem;
letter-spacing: 0.04rem;
text-shadow: 1px 1px 2px rgba(2, 2, 2, 0.48);
}


.pageheader p

{
line-height: 3.7rem;
color: white;
font-size: 1.6rem;
font-family: 'Open Sans', sans-serif;
}

.overlay
{
opacity: 0.85;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
background-color: #001b01;
background-image: url(../images/headerlogosemitransback.png);
background-size: contain;
}


.pageheader .container

{
padding-right:15%;
padding-top:50px;
padding-bottom:50px;
z-index: 10;
}



/* Main Content */


.imagetextblock p

{
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #255f27;
font-size: 1.4rem;
margin-top: 30px;
}

.yearsexpbackground img

{max-width: 100%;
height: 550px;
border: 0;
display: block;
}

.imagetextblock .container
{
-webkit-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
-moz-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
margin-top: 100px;
background-color: white;

}

.imagetextblock button
{margin-bottom: 40px;
margin-top: 20px;}

.imagetextblock h2.animated

{
animation-delay:0.5s;
}


.imagetextblock p

{
animation-delay:1.2s;
}

.imagetextblock button

{
animation-delay:1.8s;
}


.imagetextblock h2

{
	font-family: kremlin-pro, sans-serif;
    font-style: normal;
    letter-spacing: 0.2rem;
    border-bottom: 3px solid #a7c9a2;
	font-size: 3.75rem;
    padding-bottom: 15px;
    color: #3b983f;
}

@media (max-width: 890px){
.imagetextblock div
{width:100%;}
	
.imagetextblock .container
{margin-top: 0;}

}

/* Call to actions */


.ctabox
{
-webkit-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
-moz-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
margin-top: 100px;
background-color: white;
transition: background 3s ease-in-out;
-moz-transition: background 3s ease-in-out;
-webkit-transition: background 3s ease-in-out;
}

.ctabox:hover
{opacity: 0.95;}


.ctabox a
{text-decoration:none;}

.ctabox h4

{
text-transform: uppercase;
display: block;
font-size: 2.5rem;
padding-left: 20px;
padding-top: 20px;
padding-bottom:20px;
background-color:#a7c9a2;
font-weight: 400;
letter-spacing: 0.05rem;
color: #255f27;
}


.ctabox p
{
padding-left: 20px;
font-size: 1.5rem;
color:rgb(127, 127, 127)}


.ctabox img

{
width:100%;
height: auto;
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

@media (min-width: 831px){
#calltoactions .container
{display:flex;}
}

@media (max-width: 830px){
.ctabox.four.columns
{width:100%;
margin-left: 0;
margin-top: 50px;}
}



/* Further Text Row */


#furthertext

{margin-top: 60px;}

#furthertext button a
{text-align: left;
padding-top: 30px;
padding-left: 20px;
padding-right: 50px;
padding-bottom: 30px;}

h3
{ font-family: kremlin-pro, sans-serif;
font-style: normal;
font-size: 3.75rem;
color: #226325;
letter-spacing: 0.1rem;}

.subheading

{font-size:1.6rem;
font-weight: bold;}

.fadelogos

{width:400px;
max-width: 100%;
height:300px;
background-color: white;
border:3px rgba(134, 134, 134, 0.24) solid;
margin-top: 15px;
}


/* Fading Logos */

.minislide
{
max-width:350px;
width: 100%;
height: auto;
min-height: 120px;
padding-bottom: 50%;
overflow:hidden; position:relative;
background-color: white;
background-image:url('images/kingspan-logo.jpg');
border:solid 5px rgba(102, 102, 102, 0.15);
margin-bottom: 50px;
margin-top: 20px;
}

.minislide img{ position:absolute; animation:minislide 40s infinite; opacity:0; width: 100%; height: auto;}

@keyframes minislide{12.5%{opacity:1;} 20%{opacity:0;}} 


.minislide img:nth-child(8){animation-delay:0s;}
.minislide img:nth-child(7){animation-delay:5s;}
.minislide img:nth-child(6){animation-delay:10s;}
.minislide img:nth-child(5){animation-delay:15s;}
.minislide img:nth-child(4){animation-delay:20s;}
.minislide img:nth-child(3){animation-delay:25s;}
.minislide img:nth-child(2){animation-delay:30s;}
.minislide img:nth-child(1){animation-delay:35s;}





/* Footer */


footer
{width: 100%;}


.topfooter .bottomfooter
{width: 100%;}


.topfooter
{
background-color:#D9D9D9;
min-height: 75px;
margin-top: 100px;
}

.topfooter ul

{list-style: none;
display: inline-block;
margin-bottom: 0;}

.topfooter li
{text-transform: uppercase;
display: inline-block;
width: auto;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 15px;
margin-bottom: 0;
margin-top: 15px;
}

.topfooter a
{font-size: 1.2rem;
color: rgb(138, 138, 138);}

.topfooter a:hover
{
color:rgb(55, 55, 55);
}

.topfooter li:after
{
content:'//';
padding-left:20px;
text-decoration: none;
}

.bottomfooter
{
background-color:#6b6b6b;
min-height: 100px;
padding-top: 30px;
}

.bottomfooter p
{font-size: 1.4rem;
color:#b7b7b7;}

.bottomfooter a

{text-decoration: none;
color:#b7b7b7;
}

@media (max-width: 550px) {
	
.bottomfooter p
	
	{font-size:1.2rem;}
	
.bottomfooter p span
	{margin-left: 5px !important;}
	
	
.topfooter
	{display: none;}
	
	.bottomfooter a#wattagemedia
	{width: 100%;
	margin-left: 0;
	margin-top: 15px;
	display: inline-block;}
	
	.bottomfooter #wattagemedia span
	{margin-left: 0;}
	
}




/* Products Page */


.productsmain img

{max-width: 100%;
height: 660px;
border: 0;
display: block;
}


.productslist li
{margin-bottom: 0;
padding-left: 15px;}

#roofingimagetextblock

{
padding-left: 5%;
padding-right: 3%;
padding-top: 50px;
}



#claddingimagetextblock

{
padding-left: 2%;
padding-right: 3%;
padding-top: 50px;
}


#structuralimagetextblock

{
	padding-left: 2%;
padding-right: 8%;
padding-top: 110px;

}

#structural

{margin-bottom: 100px;}


.prodimagerow img

{ border: 4px solid #80808038;}


/* Manufacturers Page */


.manfbox
{
-webkit-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
-moz-box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
box-shadow: 3px 10px 31px 0px rgba(0,0,0,0.18);
margin-top: 100px;
background-color: white;
transition: background 3s ease-in-out;
-moz-transition: background 3s ease-in-out;
-webkit-transition: background 3s ease-in-out;
}

.manfbox:hover
{opacity: 0.95;}


.manfbox a
{text-decoration:none;}

.manfbox p.manftitle

{
text-transform: uppercase;
display: block;
font-size: 2.5rem;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom:20px;
background-color:#f9f9f9;;
font-weight: 400;
letter-spacing: 0.05rem;
color: #9bc295;
}


.manfbox p
{
padding-left: 15px;
padding-right: 15px;
font-size: 1.5rem;
color:rgb(127, 127, 127)}


.manfbox img

{
width:100%;
height: auto;
}


@media (min-width: 831px){
.manfrow .container
{display:flex;}
}

@media (max-width: 830px){
.manfbox.four.columns
{width:100%;
margin-left: 0;
margin-top: 50px;}
}




/* Contact Page */

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }


.contactustext p
{font-size: 1.6rem;
font-family: "Open Sans", sans-serif;}

.contactustext h2

{font-size: 3.0rem;}






/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}