html,body{
	height:100%
}
body{
	color: #666;
	font-family: 'Droid Serif', serif;
	background:#aaa;
	font-size:16px;
	transiton:all 0.2s;
}
h1,h2,h3,h4{
	font-family: 'Playfair Display', serif;
	font-style:italic;
	color:#FDBA3F;
}
.well h2{
	border-bottom:1px solid;
	text-align-last:left 
}
.b{
	display: none
}
a{
	color:#FDBA3F;
}
nav a{
	color:#eee !important;
	padding:20px 0;
	width:30%;
	text-decoration:none !important;
	font-style:italic !important
}
nav a::before{
	color:#FDBA3F;
	padding-right:10px;
	font-style:normal !important
}
section{
	background-color: #f5f5f5;
	background-size: cover !important;
	overflow:hidden;
	position: relative;
}
#slide{
	background:#666 url(img/slide.jpg) center no-repeat;
	height:100vh;
	min-height:400px;
	text-align:center
}
#slide .guten{
	margin-top:30px;
	opacity: 0;
	transition:opacity 3s,margin-top 0.4s;
}
#slide .tag{
	margin-top:0px;
	opacity: 1
}
#slide .container img{
	padding:10vw 0;
	width:25vw;
	min-width:150px;
}
#slide h2{
	color:#eee;
	font-size:4vw
}
#social{
	padding-top:20px
}
#social a{
	font-size:22px;
	border:2px solid;
	text-align:center;
	color:#eee;
	width:40px;
	height:40px;
	padding:7px;
	margin:0 5px;
	border-radius:50%;
	transition:all 0.3s
}
#social a:hover
{
	text-decoration:none;
	border-color:#FDBA3F;
	background:#FDBA3F;
}
#gal img{
	width:100%
}
#about-head{
	background:url(img/bg2.jpg) center no-repeat;
	background-attachment:fixed;
	background-size: cover !important;
	height:30vw;
	min-height:100px;
	text-align:center;
	padding-top:7.5vw
}
#about-head:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(img/bg2.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#about-head img{
	width:70%;
	min-width:300px
}
#about{
	
	min-height:350px;
	background:#fff;
}
.well{
	background:none;
	border:0px solid;
	text-align:justify;
	text-align-last:center;
	width:90%;
	margin:0 auto;
	line-height:1.6em
}
#about .well img{
	padding-top:30px
}
.bakery{
	background:url(img/mbk.jpg) center no-repeat;
	background-size:cover;
	height:100%;
	min-height:350px;
	position:relative;
}
.bakery img{
	position:absolute;
	right:20px;
	bottom:20px;
	width:100px
}
#contact .well{
	width:100%
}
input,textarea , #social-foot{
	width:calc(50% - 10px);
	float:left;
	margin:10px 5px;
	box-sizing:border-box;
	padding:5px;
	font-family: 'droid serif', serif;
	font-style:italic;
	font-size:1.3em
}
input, textarea{	
	border:1px solid #ddd;
	text-align-last:left
}
input[type=submit]{
	background:#FDBA3F;
	color:#fff;
	border:0;
	transition:all 0.42s;
	text-align-last:center
}
input[type=submit]:hover{
	background:#283594;
	color:#eee
}
textarea{
	width:calc(100% - 10px);
	height:100px
}
#contact h4{
	color:#666;
	padding:30px 0
}
#social-foot{
	padding-top:2px
}
#social-foot a{
	font-size:16px;
	border:2px solid;
	text-align:center;
	width:35px;
	height:35px;
	padding:7px;
	margin:0 5px;
	border-radius:50%;
	transition:all 0.3s
}
#social-foot a:hover{
	color:#eee;
	border-color:#283594;
	text-decoration:none;
	background:#283594
}
.map{
	overflow:hidden;
}
.map iframe{
	border:0;
	margin-top:-48px
}

.perka{
	position:absolute;
	bottom:-100px;
	opacity:0;
	width:40%;
	min-width:300px;
	left:10%;
	z-index:99;
	transition:all 0.4s;
}
.perka.boo{
	bottom: 0px;
	opacity: 1;
}
.perka img{
	min-width:300px;
	width:100%
}
.perka .close{
	color:#f80;
	position:absolute;
	right:0px;
	top:0px;
	width:30px;
	height:30px;
	background:#fff;
	padding:3px;
	border:2px solid #fff;
	border-radius:50% 0 0 50%;
	z-index:9;
	opacity:1
}
.perka .close:hover{
	box-shadow: -4px 3px 3px rgba(0,0,0,0.2);
	color:#666
}
@media (max-width:700px)
{
	nav a{
		width:38%;
		padding:10px 0 1px 0
	}
	#slide {
	 height:100vw;
	}
}


@media (max-width:500px)
{
	nav a{
		width:100%;
		padding:10px 0 1px 0
	}
	#slide{
		min-height:100vh;
		height:100%
	}
	#slide h2{
		font-size:24px
	}
	#gal img{
		min-height:300px;
		max-width:800px !important;
		width:400px !important;
		transition:0.62s
	}

	.well{
		width:100%;
		padding:20px 0;
	}
	#social-foot{
		padding:0
	}
	#social-foot a{
		margin:0 -2px;
	}
	#contact{
		padding-bottom: 35px
	}
	#about-head{
		background: none
	}
	.perka{
		left:1%;
		min-width:98%
	}
}