/*
	///////////////////////////////////////////////////////////////////////////////////
	Generic
	///////////////////////////////////////////////////////////////////////////////////
*/
body{
	background-color: #DCD2C4;
}

textarea{
	font-family: Akkurat;
}

h1,
h2, 
input, 
p{
	font-family: Akkurat;
	text-align:left;
	color: #fff;
}

input, 
p{
	font-size: 25px;
}

h1, 
h2{
	font-size: 30px;
}

form input[type=email], 
form input[type=text], 
form input[type=submit], 
form textarea{
	padding: 10px 0px;
	margin: 10px 0px;
	font-size: 15px;
	resize: none;
}

form input[type=email], 
form input[type=text]{
	color:#404E57;
}

form input[type=text]{
	min-height: 205px;
}

form input[type=submit]{
	text-align:center;
	background-color: #404E57;	
	border:none;
}

span.glyphicon{
	padding-right: 20px;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
    Generic Page Layout
	///////////////////////////////////////////////////////////////////////////////////
*/
.locked-width{
	max-width: 1600px;
	padding: 70px 10px 0px 10px;
	
}

.container-fluid, .container-fluid > div {
	padding: 0;
}
.container-fluid > div:not(.header){
	padding-bottom: 70px;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
	Area colourings
	///////////////////////////////////////////////////////////////////////////////////
*/
.cream-background{
	background-color: #DCD2C4;
}

.cream-background p{
	color:#404E57;
	font-size: 30px;
}

.cream-background h1{
	font-family: Vidaloka;
	color:#404E57;
	font-size: 60px;
}

.white-background{
	background-color: #fff;
}

.white-background h1, 
.white-background h2, 
.white-background p{
	color: #404E57;
}

.blue-background{
	background-color: #404E57;
}

.patch-background{
	background-image: url(../images/light_wool.png);
}

.patch-background p, 
.patch-background a, 
.patch-background h2{
	color: #404E57;
	text-decoration: none;
}

.grey-background{
	background-color: #343434;
}

.grey-background p, 
.grey-background a, 
.grey-background h2{
	color: #fff;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
	Custom Classes
	///////////////////////////////////////////////////////////////////////////////////
*/
.portrait{
	max-height: 457px;
	width: auto;
}

.image-collage img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.image-collage{ 
	padding: 0 !important;
}

.image-container{
	display: block;
	width: 100%;
	height: 285px;
	overflow: hidden;
}

.border-right{
	padding: 0px 15px !important;
}

.border-right:last-child{
	border: none;
}

div.no-padding, 
.no-padding div{
	padding: 0;
}

iframe.map{
	width: 100%;
	height: 550px;
}

.footer img,
.footer span.glyphicon{
	display:inline-block;
	padding: 0px 5px;
	vertical-align:middle;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
	Text font sizes and colours
	///////////////////////////////////////////////////////////////////////////////////
*/
p.text-size-small, 
h1.text-size-small, 
h2.text-size-small{
	font-size: 20px;
}

p.text-size-huge, 
h1.text-size-huge, 
h2.text-size-huge{
	font-size: 50px;
}

p.text-colour-blue, 
h1.text-colour-blue, 
h2.text-colour-blue{
	color: #404E57;
}

.text-align-centre h1, 
.text-align-centre h2, 
.text-align-centre p{
	text-align:center;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
	Image Carousel
	///////////////////////////////////////////////////////////////////////////////////
*/
.carousel{
	margin-bottom: 30px;
}

/*.carousel .carousel-inner .item {
	height: 569px;
	width: 950px;
	
	overflow: hidden;
}*/

.carousel .carousel-inner > .item > img,
.carousel .carousel-inner > .item > a > img {
  width: 100%;
  margin: auto;
}
.carousel .carousel-inner .carousel-caption{
	position:absolute;
	left: 0;
	bottom: 0;
	padding-bottom: 0;
	width: 100%;
}
.carousel .carousel-inner .carousel-caption > p{
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 18px;
	padding: 2.5px 7.5px;
	margin-bottom: 0;
}

.carousel-indicators{
    left: 47.5% !important;
    width: 65% !important;
}
/*
	///////////////////////////////////////////////////////////////////////////////////
	Hero Image
	///////////////////////////////////////////////////////////////////////////////////
*/
.hero-image{
	display:block;
	height: 700px;
	background-size: cover;
    background-repeat: no-repeat;
}


/*
	///////////////////////////////////////////////////////////////////////////////////
	<div> Specific
	///////////////////////////////////////////////////////////////////////////////////
*/
#div2 form {
	width: 100%;
}

#div2 p, 
#div2 form input, 
#div2 form textarea{
	width: 100%;
}

#div2 img{
	width: 100%;
	height:auto;
	max-width:756px;
}

#div7{
	padding-top: 50px;
}

.half-width{
	position: relative;
	top: 0px;
	left: 0px;
	float: left;
	border: none !important;
	margin-bottom: 10px;
	
	width: 50%;
	
}

.half-width img{
	position: relative;
	top: -15px;
	
	padding: 25px;
	
	height: 600px;
	width: auto;
}
/*
	///////////////////////////////////////////////////////////////////////////////////
	Fonts
	///////////////////////////////////////////////////////////////////////////////////
*/
@font-face{
	font-family: Akkurat;
	src: url('../fonts/Akkurat Light Regular.otf');
}

@font-face{
	font-family: Vidaloka;
	src: url('../fonts/vidaloka/Vidaloka-Regular.otf');
}

@font-face{
	font-family: Copperplate;
	src: url('../fonts/Copperplate Gothic Regular.otf');
}

p.font-copperplate, 
h1.font-copperplate,
h2.font-copperplate{
	font-family: Copperplate;
}

p.font-vidaloka, 
h1.font-vidaloka, 
h2.font-vidaloka{
	font-family: Vidaloka;
}



/*
	///////////////////////////////////////////////////////////////////////////////////
	Media Queries
	///////////////////////////////////////////////////////////////////////////////////
*/
@media(max-width:1200px){
	#div2{
		height: auto;
	}
	#div2 img{
		margin-bottom: 50px;
	}
	#div8 >div > div:first-child{
		margin-bottom: 100px;
	}
	
	.hero-image{
		height: 400px;
	}
}

@media (min-width:998px) and (max-width:1400px){
	.header .text-align-centre p, 
	.header .text-align-centre h1{
		text-align: right;
	}
}