body
{
font-family: 'Lato', sans-serif;
background:#FFF;
}
html,
BODY { margin:0; height:100%; width:100%;}
#bgImage
{
position: fixed;
top:0;
bottom:0;
left:0;
right:0px;
background:url('https://www.onsitecompressedair.co.nz/splash/background.jpg') center center no-repeat;
background-size:cover;
}
#overlay
{position: fixed;top:0;bottom:0;left:0;right:0px;background:rgba(0,0,0,0.6);background: linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9));}
.header
{
position: relative;
float: left;
width:100%;
z-index:5000;
height:225px;
}
.container-fluid
{
position: relative;
float: left;
width:100%;
height:auto;
margin:-2% 0px 0px 0px;
transition: all 0.5s linear;
opacity: 0;
}
.container-fluid.loaded
{
position: relative;
float: left;
width:100%;
height:auto;
margin:0% 0px 0px 0px;
transition: all 0.5s linear;
opacity: 1;
}
a.logo
{
position: absolute;
top:-40px;
left:0px;
transition: all 0.5s ease-in;
opacity: 0;
border-radius: 4px;
overflow: hidden;
}
a.logo img
{
border-radius: 4px;
}
a.logo.loaded
{
position: absolute;
top:0px;
left:0px;
height:auto;
padding:0px;
margin:3%;
transition: all 0.5s ease-in;
opacity: 1;
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 320px) {
a.logo
{
position: absolute;
top: 0px;left: 50%;
transition: all 1s ease-in;
margin-left: -146px;
opacity: 0;
border-radius:3px;
}
a.logo.loaded
{top: 0px;left: 50%;/* transform: translate(-50%,0); */width: 295px;margin-left: -146px;/* height:auto; */padding:10px; opacity: 1;}
}
a.logo:hover
{
transition: all 0.5s ease-in;
opacity: 0.6;
}
a.logo img
{
max-width:100%;
}
p
{
text-align:center;
color:#f8f8f8;
font-size:20px;
line-height:1.4;
margin:0px 0px 18px;
}
p.leadin
{
font-size:26px;
}
p strong span#largeText
{
font-size:26px;
}
p span
{
font-weight:700;
}
p.extraMargin
{
margin-top:40px;
}
h2
{
text-align:center;
font-weight:700;
color:#f8f8f8;
font-size:42px;
margin:0px 0px 20px 0px;
line-height:1.2;
}
a
{
color:#FFF;
text-decoration: none;
}
a:hover
{
color:#FFF;
text-decoration: underline;;
}
.centerContainer
{
width:100%;
}
.centerContainerInner
{
margin:0px auto;
width:100%;
padding:0px 3%;
box-sizing:border-box;
}
.centerCol
{
float: left;
position: relative;
width: 100%;
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 544px) {
.centerContainerInner
{
width:100%;
padding:0px 3%;
}
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 768px) {
.centerContainerInner
{
width:100%;
padding:0px 3%;
}
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 992px) {
.centerContainerInner
{
width:100%;
padding:0px 4%;
}
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 1200px) {
.centerContainerInner
{
width:1100px;
padding:0px 0%;
}
}
#topContent
{
float: left;
position: relative;
width:100%;
margin:0px 0px 20px;
transition: all 0.5s ease-in;
}
#bottomContent
{
float: left;
position: relative;
width:100%;
margin:10px 0px 0px;
transition: all 1s ease-in;
}
#leftCol
{
float: left;
position: relative;
width:100%;
box-sizing:border-box;
padding:24px 20px 8px 0px;
text-align:center;
margin:0px 0px 0px;
}
#leftCol p
{
text-align:center;
font-size:20px;
transition: all 1.5s ease-in;
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 992px) {
#leftCol
{
width:50%;
padding:24px 20px 8px 0px;
text-align:left;
margin:0px 0px 20px 0;
}
#leftCol p
{
text-align:right;
}
}
#rightCol
{
float: left;
position: relative;
width:100%;
box-sizing:border-box;
height:200px;
margin:0px 0px 20px;
transition: all 1.5s ease-in;
opacity: 1;
}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 992px) {
#rightCol
{
width:45%;
height:200px;
margin:0px 0px 20px;
}
}
#rightCol a
{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
transition: all 0.5s ease-in;
background: #f0f0f0;
}
a:hover
{
transition: all 0.5s ease-in;
opacity: 0.8;
}
a.fsub
{
display: inline-block;
padding:10px 15px;
text-transform:uppercase;
background:#ffea00;
opacity: 0.7;
color: #000;
margin-top: 30px;
border: 2px solid #000;
border-radius: 3px;
transition: all 0.2s ease-in;
border-radius: 3px;
}
a.fsub:hover
{
text-decoration:none;
opacity: 0.9;
color: #fff;
background:#000;
transition: all 0.2s ease-in;
}


td,
td img
{
display: inline-block;
width: 100%;
table-layout: fixed;
margin: 0;
padding: 0;
text-align: center;
}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 600px) {

td,
td img
{
display: inline-block;
width: 50%;
table-layout: fixed;
float: left;
margin: 0;
padding: 0;
}

}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (min-width: 1000px) {

td,
td img
{
display: table-cell;
width: auto;
table-layout: fixed;
float: none;
margin: 0;
padding: 0;
}

}