html, body {
	margin: 0;
	padding: 0;
	height:100%;
}

body {
    color: #FFF;
	background: #f9f7f0;
}

#wrapper {
	min-height:100%;
	height: auto !important;
	height: 100%;
	border: 1px solid #000;
	width:auto;
	position:relative;
}
	
#content {
	
	
	max-width: 860px;
	margin: 0px auto 0px auto;
	padding-bottom:180px;
	border: solid 1px #f9f7f0;
	height:auto;
}

#header	{
	border: 0px solid #000;
	background-image:url(image/logo.jpg);
	background-repeat:no-repeat;
	height:90px;
	position:relative;
	margin:20px 0px 10px 0px;
}

#footer	{
	background-color:#e9e6dd;
	
	bottom:0 !important;
	width:100%;
	position:absolute;
	height:140px;
	padding:15px 0px 5px 0px;
}

#contact {
	width: 830px;
	margin: 0px auto 0px auto;
	bottom:0;
	position:relative;
	border: solid 0px #000;
}

#contact-left {
	padding:10px;
	width:250px;
	float:left;
	border: solid 0px #000;
}

#contact-right {
	padding:10px;
	width:450px;
	float:left;
	border: solid 0px #000;
}

#contact-logo {
	padding-top:50px;
	width:250px;
	float:left;
	border: solid 0px #000;
}

.clear	{
	clear:both;
}

.photo-1 {
	position:relative;
	overflow:hidden;
	width:350px;
	height:250px;
	float:left;
	margin: 5px;
	background-color:#5b5039;
}
.photo-2 {
	position:relative;
	overflow:hidden;
	width:250px;
	height:250px;
	float:left;
	margin: 5px;
	background-color:#5b5039;
}
.photo-3 {
	position:relative;
	overflow:hidden;
	width:200px;
	height:250px;
	float:left;
	margin: 5px;
	background-color:#5b5039;
}	
.photo-4 {
	position:relative;
	overflow:hidden;
	width:350px;
	height:250px;
	float:left;
	margin: 5px;
	background-color:#5b5039;
	
}	
.photo-5 {
	position:relative;
	overflow:hidden;
	width:445px;
	height:240px;
	float:left;
	margin: 5px;
	background-color:#ef9223;
	padding: 10px 0px 0px 15px;
	
}	
.photo-6 {
	position:relative;
	overflow:hidden;
	width:545px;
	height:240px;
	float:left;
	margin: 5px;
	background-color:#ef9223;
	padding: 15px 0px 0px 15px;
	
}	
	
/*.photo .heading, .photo .caption {
	position:absolute;
	background:#000;
	height:50px;
	width:350px;
	opacity:1;
}*/
		
/* HÖHE TEXT */
.photo-1 .caption {
	position:absolute;
	background:#5b5039;
	height:250px;
	width:350px;
	float:left;
	background-image:url(image/culcha_candela_2.1.jpg);
}
.photo-51 .caption {
	position:absolute;
	background:#5b5039;
	height:250px;
	width:350px;
	background-image:url(image/itchino_2.1.jpg);
	
	
}
.photo-2 .caption {
	position:absolute;
	background:#5b5039;
	height:250px;
	width:250px;
	opacity:1;
}

.photo-3 .caption {
	position:absolute;
	background:#5b5039;
	height:250px;
	width:200px;
	opacity:1;
}
.photo-4 .caption {
	position:absolute;
	background:#5b5039;
	height:250px;
	width:350px;
	background-image:url(image/itchino_2.1.jpg);
}

/* IST ZUSTAND */
.photo-1 .caption, .photo-4 .caption { 		
	bottom:0px;		
	left:0px;
}

.photo-2 .caption { 		
	bottom:-250px;		
	left:0px;
}
.photo-3 .caption { 		
	bottom:-250px;		
	left:0px;
}

.photo-1 .caption p, .photo-4 .caption p {
	color:#EEE;	
	display:block;
	padding:260px 10px 0 10px;
}

.photo-2 .caption p, .photo-3 .caption p{
	color:#EEE;	
	display:block;
	padding:10px 10px 0 10px;
}

/* BOXEN TRANSFORM --------------------------------------------- */

.box img {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s ;
-ms-transition: all 0.5s ;
transition: all 0.5s ;
}
.box .mask {
background-color: #5b5039;


-webkit-transform: translateY(-250px);
-moz-transform: translateY(-250px);
-o-transform: translateY(-250px);
-ms-transform: translateY(-250px);
transform: translateY(-250px);


-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}

.box p, .box p.headline {
color: #FFF;
padding:15px 15px 0px 15px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.box:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.box:hover img {
-webkit-transform: translateY(250px);
-moz-transform: translateY(250px);
-o-transform: translateY(250px);
-ms-transform: translateY(250px);
transform: translateY(250px);
}

.view-1 {
width: 200px;
height: 250px;
margin: 5px;

float: left;
border: 0px solid #000;
overflow: hidden;
position: relative;
text-align: left;


}

.view-2 {
width: 250px;
height: 250px;
margin: 5px;

float: left;
border: 0px solid #000;
overflow: hidden;
position: relative;
text-align: left;

}
.view-3 {
width: 350px;
height: 250px;
margin: 5px;

float: left;
border: 0px solid #000;
overflow: hidden;
position: relative;
text-align: left;
}

.view-4 {
width: 220px;
height: 235px;
margin: 5px;

float: left;
border: 0px solid #000;
overflow: hidden;
position: relative;
text-align: left;
color:#FFF;
padding:15px 15px 0px 15px;
}



.view-1 .mask, .view-1 .content {
width: 200px;
height: 250px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}

.view-2 .mask, .view-2 .content {
width: 250px;
height: 250px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}

.view-3 .mask, .view-3 .content {
width: 350px;
height: 250px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}


.view img {
display: block;
position: relative;
width:300px;
}
p {
font-family: 'Ubuntu', sans-serif;
font-size:18px;
padding:0;
margin:0;
}
p.headline {
font-family: 'Oswald', sans-serif;
text-transform:uppercase;
font-size:20px;
padding:0;
margin:0;
color:#FFF;
}



span.headline {
font-family: 'Oswald', sans-serif;
text-transform:uppercase;
font-size:26px;
line-height:50px;
}

.brown {
	color:#5b5039;
}
a img {border:0;}

a:link {
	color:#F90;
	text-decoration:none;
}

a:hover {
	color:#5b5039;
	text-decoration:none;
}
a:visited {
	color:#F90;
	text-decoration:none;
}
a.white:link {
	color:#FFFFFF;
	text-decoration:none;
}
a.white:visited {
	color:#FFFFFF;
	text-decoration:none;
}
a.white:hover {
	color:#FFFFFF;
	text-decoration:none;
}



h3 {font-family: 'Ubuntu', sans-serif;
	font-size:18px;
	font-weight:normal;
}

@media only screen and (max-width: 320px) {
	
}


