/* Thames Valley Scaffolding site */ 

html,body {
margin: 0;
padding: 0;
height: 100%;
}

html {
background: url('webpics/scaffoldingprocessed.png') no-repeat center fixed;
background-color: #be1e2d;
background-size: cover;
}

ol, ul { list-style: none; }

p {
font-family: 'raleway', arial, sans serif;
color: white;
font-size: 22px;
}

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

span.black {
font-family: 'raleway', arial, sans serif;
font-weight: bold;
color: black;
font-size: 22px;
}

p.black {
font-family: 'raleway', arial, sans serif;
font-weight: bold;
color: black;
font-size: 22px;
}

p.contactnumber {
font-family: 'oxygen', arial, sans serif;
font-weight: bold;
color: #be1e2d;
font-size: 36px;
text-align: center;
}

p.contactweb {
font-family: 'oxygen', arial, sans serif;
font-weight: bold;
color: gray;
font-size: 24px;
text-align: center;
}

p.footertext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'calibri', sans serif;
color: gray;
font-size: 16px;
text-align: center;
}

span.bold {
font-family: 'raleway', arial, sans serif;
font-weight: bold;
}

h1 {
font-family: 'Oxygen', sans-serif;
color: white;
font-size: 36px;
text-align: center;
}

h1.black {
font-family: 'Oxygen', arial, sans serif;
color: black;
font-size: 36px;

}

label {
	font-family: calibri, sans-serif;
	font-size: 24px;
    display:block;
    margin-top:20px;
	padding-bottom: 10px;
	color: gray;
    }

form {
    margin: auto;
    }

input, textarea {
	font-family: calibri, sans-serif;
	width:90%;
	height:15px;
	background:#efefef;
	border:1px solid #dedede;
	padding:5px;
	margin-top:3px;
	font-size:18px;
	color:black;
}

textarea {
	height:150px;
	}

input:focus, textarea:focus {
	border:1px solid #97d6eb;
	}
	
#submit {
    width:100px;
    height:30px;
    border:none;
	border-radius: 20px;
	background-color: gray;
    margin-top:20px;
    cursor:pointer;
}

#submit:hover {
	    opacity:.9;
	}
	
#servicelist {
font-family: 'raleway', arial, sans serif;
font-weight: bold;
list-style-type: circle;
color: white;
font-size: 22px;	
}


header.large  {
box-sizing: border-box;
position: fixed;
padding-left: 30px;
padding-bottom: 20px;
width: 100%;
height: 220px;
background: linear-gradient(to bottom, rgba(87,3,38,0.8) 0%, rgba(199,101,129,0.6) 100%);
/* background-color: #bf1e2d; */
/* border-bottom: 6px double #842931; */
z-index: 10;
}

header.small  {
box-sizing: border-box;
position: fixed;
padding-left: 30px;
width: 100%;
height: 100px;
background:rgba(59,1,6,0.9);
border-bottom: 2px double #842931;
z-index: 10;
}

header.large img {
width: 300px;
height: 88px;
}


header.small img {
display: none;
}

header.large nav {
margin-top: 30px;
}

header.small nav {
margin-top: 0px;
}


header, nav, a, li {
  transition: all 0.6s;
  -moz-transition: all 0.6s; /* Firefox 4 */
  -webkit-transition: all 0.6s; /* Safari and Chrome */
  -o-transition: all 0.6s; /* Opera */
}

#logo {
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
min-width: 300px;
}

#emailtel {
box-sizing: border-box;
position: absolute;
left: 0;
width: 50%;
display: none;
}

.nav {
box-sizing: border-box;
position: relative;
margin-left: -40px; 
width: 100%;
float: left;
}

.nav ul {
	font-size: 0;
	}

.nav li{
	display: block;
	font-family: 'BenchNine', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 16px;
	color: white;
	background:rgba(59,1,6,0.5);
	}
	
.nav li:hover {
background:rgba(59,1,6,1);
}

#innernav {
margin: auto;
}


#spacer {
width: 100%;
height: 220px;
}

#maincontent {
overflow: hidden;
position: relative;
width: 100%;
}

#contenttop {
box-sizing: border-box;
position: relative;
width: 100%;
padding: 50px;
float: left;
background:rgba(59,1,6,0.7);
}

#contentwording {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	float: left;
	} 
	
#contentpic {
	box-sizing: border-box;
	position: relative;
	padding-top: 3%;
	width: 100%;
	float: left;
}

#contentpic img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

#clients {
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
padding: 50px;
background:rgba(0,0,0,0.7);
}

#services {
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
padding: 50px;
background:rgba(15,15,40,0.7);
}

#thumbnails {
display: block;
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
padding: 50px;
background:rgba(0,0,0,0.7);
}

#thumbnails ul li { float: left; margin-right: 26px; margin-bottom: 12px; }

#thumbnails img { border-radius: 10px; height: 150px; width: 150px;}

clearfix 
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; } 
 

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }	

#contact {
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
min-height: 200px;
padding: 50px;
background:rgba(255,255,255,0.8);
}

#contactdeets {
box-sizing: border-box;
position: relative;
width: 100%;
float: left;
}

#contactdeets img {
display: block;
margin-top: 50px;
width: 80%;
max-width: 477px;
margin-left: auto;
margin-right: auto;
}

#contactform {
box-sizing: border-box;
position: relative;
width: 100%;
float: left;
}

#footer {
box-sizing: border-box;
position: relative;
width: 100%;
height: 150px;
/* background: linear-gradient(to bottom, rgba(31,31,31,1) 0%, rgba(0,0,0,1) 11%, rgba(0,0,0,1) 100%); */
background-color: black;
}

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

.nav {
box-sizing: border-box;
position: relative;
float: right;
min-width: 800px;
}

.nav li {
display: inline-block;
font-size: 24px;
}

#emailtel {
display: block;
box-sizing: border-box;
position: absolute;
left: 0;
width: 50%;
}


#navinner {
box-sizing: border-box;
position: absolute;
right: 0px;
bottom: 0px;
}

#maincontent {
min-width: 1000px;
}

#contentwording {
	box-sizing: border-box;
	position: relative;
	width: 70%;
	float: left;
	} 
	
#contentpic {
	box-sizing: border-box;
	position: relative;
	padding-top: 3%;
	width: 25%;
	float: right;
}

#logo {
box-sizing: border-box;
position: relative;
float: left;
width: 30%;
min-width: 500px;
}

#spacer {
width: 100%;
height: 250px;
}

header.large  {
box-sizing: border-box;
position: fixed;
padding-left: 30px;
width: 100%;
min-width: 1000px;
height: 250px;
/* background-color: #bf1e2d; */
/* border-bottom: 6px double #842931; */
z-index: 10;
}

header.small  {
box-sizing: border-box;
position: fixed;
padding-left: 30px;
width: 100%;
min-width: 1000px;
height: 100px;
background:rgba(59,1,6,0.9);
border-bottom: 2px double #842931;
z-index: 10;
}

header.small img {
display: block;
width: 154px;
height: 45px;
transition: all 0.6s;
  -moz-transition: all 0.6s; /* Firefox 4 */
  -webkit-transition: all 0.6s; /* Safari and Chrome */
  -o-transition: all 0.6s; /* Opera */
}


header.large img {
width: 475px;
height: 139px;
transition: all 0.6s;
  -moz-transition: all 0.6s; /* Firefox 4 */
  -webkit-transition: all 0.6s; /* Safari and Chrome */
  -o-transition: all 0.6s; /* Opera */
}

header.large nav {
margin-top: 0px;
}

header.small nav {
margin-top: 0px;
}

header.small emailtel {
display: none;
}

#thumbnails img { border-radius: 20px; height: 250px; width: 250px;}

#contactdeets {
box-sizing: border-box;
position: relative;
width: 49%;
float: left;
}

#contactform {
box-sizing: border-box;
position: relative;
width: 45%;
float: right;
}

}