@charset "UTF-8";



/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}

/* ----------------- Website background and general text colour ----------------- */
body{
	background: url(../images/HG_gradient_neu1.png);
	color: #c9d401;
	background-repeat: repeat-x;
	
	position: inherit;
}

p{
	padding: 5px 0px 0px 3px;
	color: #000000;
	font-size: 16px;
}

p span{
	padding: 2px 2px 2px 2px;
	color: #fff;
	font-size: 16px;
	background-color:#504f4e;
}

p span2{
	padding: 2px 2px 2px 2px;
	color: #fff;
	font-size: 16px;
	background-color:#c9d401;
}

a{
	color: #ffffff;
	text-decoration: underlined;
	
}

a:hover{
	color: #c9d401;
	text-decoration: none;
	padding: 2px;
	background-color: #333;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}


div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word; height:auto;}

.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#919191; background-color:#232323;}
.row3{color:#666666;}
.row3 a{color:#000000; padding:2px; border-bottom:1px dotted #000000}
.row3 a:hover{color:#c9d401; padding:2px;}
.row4, .row4 a{color:#919191; background-color:#232323;}



/* ----------------- Wrapper-----------------  */
.wrapper{
	margin:0px auto;
	width:100%;
	height:auto;
}

.wrapper2{
	margin:0px auto;
	width:100%;
	height:auto;
	
}

.iframe{
	margin:7% 0% 0% 1%;
	
	
}






#top{
	height:110px;
	background-color:#ffffff;
}

#logo{
	
	text-decoration:none;
	background-color:#ffffff;
	height:110px;
}

#logoimage{
	width: 200px;
	 
	margin: 0% 20% 0% 10%;
	
}

#logoimagethird{
	width: 400px;
	float:left;
	margin:0% 0% 0% 10%;
	
}

#logoimagefirst{
	width: 150px;
	float:right;
	margin:0% 10% 0% 0%;
	
}

#logoimagesecond{
	width: 310px;
	
	margin:1% 2% 0% 0%;
	
}

#imagetext{
	width: 550px;
	
	margin:2% 0% 0% 0%;
	
}

#imagetext2{
	width: 200px;
	
	margin:2% 0% 0% 0%;
	
}

#imagepresse{
	width: 240px;
	float:left;
	margin:2% 80% 2% 0%;
	
}
.image{
	width: 900px;
	float:left;
	margin: 2% 0% 0% 26%;
	}

#logotitle{
	padding-top:20px;
	font-family: 'Comfortaa', Helvetica, sans-serif;
	font-weight:normal;
	font-size:115%;
	text-shadow: 0 1px 1px #FFF;
	text-align:center;
	color:#c9d401;
}

#logotitle a{
	color:#c9d401;
	text-decoration:none;
}

nav{
	float: right;
	width: 400px;
	display: block;
	height: 40px;
	margin: 2% 13% 0% 0%;
}

nav ul li{
	display:block;
	width:35%;
	float:left;
	text-align:center;
	font-size:80%;	
}

nav ul li a{
	font-family: Helvetica, Arial, sans-serif;
	width:80%;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:100;
	line-height:100%;
	display:block;
	color:#2d2d2d;
}

nav ul li a:hover{
	color:#c9d401;
}

nav ul li p{
	font-family: Helvetica, Arial, sans-serif;
	width:80%;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	line-height:250%;
	display:block;
	color:#f38094;
}


#header{
	width: 100%;
	margin: 0% auto 0% auto;
	clear: both;
	position: relative;
}

header h1{
	font-family: 'Helvetica', Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:130%;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:1px;
	margin-top:15px;
	color:#FFF;
	
}

h6{
	
	font-size: 16px;
	font-weight:bold;
	color: #000;
	font-family: 'Helvetica', Arial, sans-serif;
	text-align: left;
}

.calltoaction{display:block; padding:0px 0px 5px 0px; text-transform:uppercase; font-size:12px; color:#000000;}
.calltoaction div{margin-bottom:0;}
#container .calltoaction h1{
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 20px;
	text-align:left;
	color:#000;
}
#container .calltoaction h2{
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 20px;
	text-align:left;
	color:#c5d429;
	line-height:1.4em;
	
}
#container .calltoaction h2 span{
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 20px;
	text-align:left;
	color:#fff;
	line-height:1.4em;
	
}

#container .calltoaction h3{
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 18px;
	font-weight:bold;
	text-align: left;
	color: #000;
	line-height:1.4em;
}


.calltoaction p{margin:0; padding:0px 0px 5px 0px; line-height:1.4em; text-transform:none;}
.calltoaction .button{display:block; text-align:center; line-height:1.4em;}

.calltoaction img{display:block; padding-bottom:8px; padding-top:25px; padding-right:10px;}

.post-image{
	margin-bottom:5px;
	
}


main{
	width:100%;
	margin:5% 0 5% 0;
}
	
	






.clearfix {
	float: none;
	clear: both;
	
}

.clearfixsec {
	float: none;
	clear: both;
	border-bottom: 1px dotted #000;
	with:80%;
	margin-bottom:1%;
}

.right{
	margin:1% 20% 1% 30%;
	padding:2% 2% 2% 2%;
	width:40%;
	background-color:#FFF;
	
	
}

.left{
	margin: 0% 10% 0% 0%;
	padding: 3% 1% 2% 1%;
	width: 220px;
	height: auto;
	float: right;
	background-color: #CCC;
	background: url(../images/news.png);
	word-wrap: break-word;
	background-repeat: no-repeat;
	background-size: 100% !important;
}

.left h3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: normal;
	background-color: #000;
	color: #fff;
	margin-bottom: 5%;
	padding-left:4%;
	padding-top:3%;
	padding-bottom:3%;
	text-shadow: 0 1px 1px #dadada;
	
}

.left h4{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: normal;
	background-color: #e30613;
	color: #fff;
	margin-bottom: 5%;
	padding-left:4%;
	padding-top:3%;
	padding-bottom:3%;
	text-shadow: 0 1px 1px #dadada;
	
}

.left h6{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	color: #c8d200;
	margin-bottom: 1%;
	padding-bottom:1%;
	padding-left:4%;
	border-bottom:dotted 1px #c8d200;
	text-shadow: 0 1px 1px #dadada;
}

.left p{
	font-family: Arial, Helvetica, sans-serif;
	font-size:90%;
	line-height:110%;
	color:#000;
	word-wrap: break-word;
	padding-left:4%;
	padding-bottom:1%;
}

.left p span{
	font-family: Arial, Helvetica, sans-serif;
	font-size:90%;
	line-height:130%;
	color:#fff;
	word-wrap: break-word;
	font-weight:bold;
	background-color: #c8d200;
	padding:1%;
	
}

.left p a{
	color:#fff;
	text-decoration:underlined;
}
	

/* ----------------------- WORK LINKS START ------------------------- */
#work{
	width:980px;
	margin:3% auto 3% auto;
}

.item{
	width: 480px;
	height: 400px;
	float: left;
	margin-top: 5px;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 0px;	
}

.itemsec{
	
	width:620px;
	height:400px;
	margin:20px 0px 10px 0px;
	padding:0px 0px 0px 0px;

	float:left;
	
}	

.item img{
	display:block;
	width:100%;
	
	
}

.item img:hover{
	opacity:1;
}

#work h2{
	font-family: 'Helvetica', Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	letter-spacing:1px;
	margin-bottom:9px;
	margin-top:15px;
	color:#c9d401;
	float:left;
	
}

#work h3{
	font-family:'Helvetica', Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	
	padding:5px 0 10px 8px;
	color:#000;
	text-decoration:none;

}

.item h3 a{
	text-decoration:none;
	color:#fff;
	background-color:#c9d401;
}

#item p{
	font-family:'Comfortaa', Arial, Helvetica, sans-serif;
	font-size:82%;
	font-weight:normal;
	padding:0 0 0 8px;
	color:#2d2d2d;
	text-decoration:none;
	background-color:#c9d401;
}
/* ----------------------- WORK LINKS END ------------------------- */


#bottom h3{
	margin:4% 0 3% 0;
	font-family:'Comfortaa', Arial, Helvetica, sans-serif;
	font-size:190%;
	font-weight:normal;
	text-align:center;
	color:#2d2d2d;
	text-shadow: 0 1px 1px #c1c1c1;
}


.footer{
	width:100% !important;
	height:40px;
	padding:2px 0;
	background-color:#fff;
	
}



.adress{
	text-align:center;
	
	padding:15px 0px 2px 0px;

	
}




/* ----------------------------- FORM ----------------------------------- */

.adress h4{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: normal;
	color: #c9d401;
	margin-bottom: 10px;
	
}

.adress h5{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: normal;
	color: #41403f;
	margin-bottom: 3px;
	
}

/* ---------------------- container css overview---------------------- */


ul.demo_li_space li{display:inline-block; *display:inline; margin:0 5px 10px 0; padding:0;}
ul.demo_li_space .button{*margin-bottom:8px;}
ul.demo_li_space li:last-child{margin-right:0;}
code{word-wrap:break-word;}
code.code{display:block; width:100%;}

div.columncolor div{color:inherit; background-color:#EFEFEF;}
div.columncolor div.columncolor{color:inherit; background-color:#333333;}
div.columncolor div.columncolor div{margin-bottom:0; background-color:#666666;}
div.columncolor p.emphasise{display:block; clear:both; margin:0 0 30px 0; padding:15px; font-size:1.6em; font-weight:bold; color:#000; background-color:#EFEFEF; text-align:center; text-transform:uppercase;}


/* ---------------------- container css explain---------------------- */
.one_half, 
.one_third, .two_third, 
.one_quarter, .three_quarter, 
.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:inline; float:left; margin:10px 0 20px 3%; list-style:none;}

.one_half:first-child, 
.one_third:first-child, .two_third:first-child, 
.one_quarter:first-child, .two_quarter:first-child, .three_quarter:first-child, 
.one_fifth:first-child, .two_fifth:first-child, .three_fifth:first-child, .four_fifth:first-child, 
.one_sixth:first-child, .two_sixth:first-child, .three_sixth:first-child, .four_sixth:first-child, .five_sixth:first-child{margin-left:0;}

.two_quarter{display:inline; float:left; margin:30px 0 20px 3%; list-style:none;}

.first{margin-left:0; clear:left;}

.one_third first{margin-left:0; clear:left;}

.full_width{
	display: block;
	width: 70%;
	clear: both;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 18%;
}

.fullsecond_width{
	display: block;
	width: 90%;
	clear: both;
	margin-top: 10;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 10%;
}

body.boxed .wrapper{max-width:90%; padding:0 1.6%; margin:0 auto;}

/*----------------------------------------------Half Grid-------------------------------------*/

/*
.one_half{width:570px;} => 570 ÷ 1200 = 0.475 * 100 = 47.5
*/

.one_half{width:47.5%;}

/*----------------------------------------------Third Grid-------------------------------------*/

/*
.one_third{width:360px;} => 360 ÷ 1200 = 0.3 * 100 = 30
.two_third{width:780px} => 780 ÷ 1200 = 0.65 * 100 = 65
*/

.one_third{width:30%;}
.two_third{width:65%;}


/*----------------------------------------------Quarter Grid-------------------------------------*/

/*
.one_quarter{width:255px;} => 255 ÷ 1200 = 0.2125 * 100 = 21.25
.two_quarter{width:570px} => 570 ÷ 1200 = 0.475 * 100 = 47.5
.three_quarter{width:885px} => 885 ÷ 1200 = 0.7375 * 100 = 73.75
*/

.one_quarter{width:21.25%;}
.two_quarter{width:47.5%;} /* Same as one_half */
.three_quarter{width:73.75%;}


/*----------------------------------------------Fifth Grid-------------------------------------*/

/*
.one_fifth{width:192px;} => 192 ÷ 1200 = 0.16 * 100 = 16
.two_fifth{width:444px} => 444 ÷ 1200 = 0.37 * 100 = 37
.three_fifth{width:696px} => 696 ÷ 1200 = 0.58 * 100 = 58
.four_fifth{width:948px} => 948 ÷ 1200 = 0.79 * 100 = 79
*/

.one_fifth{width:16%;}
.two_fifth{width:37%;}
.three_fifth{width:58%;}
.four_fifth{width:79%;}


/*----------------------------------------------Sixth Grid-------------------------------------*/

/*
.one_sixth{width:150px;} => 150 ÷ 1200 = 0.125 * 100 = 12.5
.two_sixth{width:360px;} => 360 ÷ 1200 = 0.3 * 100 = 30
.three_sixth{width:570px;} => 570 ÷ 1200 = 0.475 * 100 = 47.5
.four_sixth{width:780px;} => 780 ÷ 1200 = 0.65 * 100 = 65
.five_sixth{width:990px;} => 990 ÷ 1200 = 0.825 * 100 = 82.5
*/

.one_sixth{width:12.5%;}
.two_sixth{width:30%;} /* Same as one_third */
.three_sixth{width:47.5%;} /* Same as one_half */
.four_sixth{width:65%;} /* Same as two_third */
.five_sixth{width:82.5%;}


/*----------------------------------------------Content Area-------------------------------------*/

#container{
	clear: both;
	font-size: 1em;
	line-height: 1.4em;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{margin:10 0 10px 0; padding:0; font-size:1.4em;line-height:1.2em;}
#container section{
	margin-bottom: 10px;
	margin-top: 10px;
}
#container section.last{margin-bottom:0;}

/*----------------------------------------------Portfolio Overview-------------------------------------*/

#portfolio ul{margin:0; padding:0; list-style:none;}
#portfolio ul li{margin-bottom:30px;}


/*----------------------------------------------Site Wide Shared Classes Figure class-------------------------------------*/



.blog-post-title a{color:#000; background-color:#FFFFFF;}
.blog-post-title a:hover{color:#c8d200; background-color:#FFFFFF;}
.read-more{text-align:right;}




.video iframe{display:block; position:absolute; width:100%; height:100%; margin:0; padding:0;}

/* ---------------------- RESPONSIVE STUFF - ONLY TOUCH IF YOUR'E CONFIDENT WITH CSS ---------------------- */


@media only screen and (max-width: 1279px) {
	.wrapper{
		width:90%;
	}
	
		
	#work{
		width:900px;
}

	.item{
		width:364px;
		
		margin:8px 10px 10px 0px;
	}
	
	.itemsec{
		width:364px;
		
		margin:8px 0px 0px 0px;
	}
	
	.left{
		width:110px;
		float:left;
	}
		
}

@media only screen and (max-width: 1105px) {
	
	#work{
		width:70%;
}

	.item{
		width:364px;
		margin:8px 10px 10px 0px;
	}
	
	.itemsec{
		width:364px;
		
		margin:8px 0px 0px 0px;
	}
	
	.left{
		display:none;
		
	}
	
.item img{
	display:block;
	width:100%;
	

}

@media only screen and (max-width: 999px) {
	
	#work{
		width:750px;	
}

	.item{
		width:364px;
		height:144px;
		margin:7px;
	}
	
	.itemsec{
		width:364px;
		
		margin:8px 0px 0px 0px;
	}
	
	.item img{
	display:block;
	width:100%;
	

}
	
	
	.item h3{
		font-size:90%;
	}
	
	.item p{
		font-size:60%;
	}
	
	.left{
		display:none;
		
	}
}

@media only screen and (max-width: 835px) {
	
	#work{
		width:650px;	
}

	.item{
		width:364px;
		height:121px;
		margin:7px;
	}
	
	.itemsec{
		width:250px;
		
		margin:8px 0px 0px 0px;
	}
	
	.item img{
	display:block;
	width:100%;
	

}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:40%;
	}
	
	.left{
		display:none;
		
	}
}

@media only screen and (max-width: 860px) {
	header h1{
		font-size:110%;
	}
	
	header h2{
		font-size:80%;
	}
	.left{
		display:none;
		
	}
}

@media only screen and (max-width: 720px) {
	
	#logo{
	width: 150px;
	display: block;
	margin: auto;
	margin-bottom: 3%;
	}
	
	nav{
		width:100%;
	}
	
	header h1{
		font-size:100%;
		margin-bottom:5%;
	}
	
	header h2{
		font-size:60%;
	}
	
	.left{
		display:none;
		
	}

	
	#work{
		width:460px;	
}

	.item{
	width: 400px;
	height: 300px;
	margin: 0px;
	}
	
	.itemsec{
		width:100%;
		
	}
	.item img{
	display:block;
	width:100%;

}
	
	.item h3{
		font-size:130%;
	}
	
	.item p{
		font-size:90%;
	}
}

@media only screen and (max-width: 510px) {
	
	#work{
		width:300px;	
	}

	.item{
		width:136px;
		height:140px;
		margin:7px;
	}
	
	.itemsec{
		width:100%;
		
	}
	.item img{
	display:block;
	width:100%;

}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:40%;
	}
	
	.left{
		display:none;
		
	}
}