@font-face {
    font-family: 'Walkway';
    src: url('./fonts/Walkway Expand.ttf') format('truetype');
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
}
body{
	background: url(images/ateliermooi_bg.jpg) no-repeat; 
	background-position:left top; 
	background-size: 100% auto;
	width: 100%;
	height: 100%;
	font-family: "Walkway";
	font-size: 14px;
	font-weight: bolder;	
	color: #444444;
}
html {
    height: 100%;
    width: 100%;
    background: url(images/ateliermooi_bg.jpg) no-repeat;
    background-position:left top;  
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}

a{
	text-decoration: none;
	color: #444444;
}

a.link_to{
	text-decoration: underline;
	font-weight: bolder;
}

#head{
	float:left;
	align-content: left;
	width:15%;
}

#menu{
	height: 25px;
}

#menu ul {
  list-style-type: none;
}
 
#menu li {
  float: left;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}
 
#menu li:last-child {
  border-right: none;
}
 
#menu li a {
  text-decoration: none;
  color: #ccc;
  font: 25px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#menu li a:hover {
  color: #666;
}
 
#menu li.active a {
  font-weight: bold;
  color: #333;
}

#content{
	width:60%;
	align-content: left;
	margin-left:50px;
	padding-top:50px;
	display:inline-block;

}

#content-body{
	width:85%;
	text-align: left;
	margin-top:50px;
}

#footer{
	margin-top:50px;
	text-align: left;
}
#footer-icons{
	margin-top:30px;
	margin-right:170px;
	text-align:right;
}

#icon{
	width:40px;
}

#logo{
	width:200px;
	margin-top:10px;
}

#logotxt{
	padding-left:20px;
	padding-top:20px;
	display:block;
}

#logotxt p{
	font-size: 12px;
}

#behandelingen {
	width:100%;
}

#behandelingen tr {
	height:30px;
}

#behandelingen tr a{
	display:block;
	background:url("images/line_tr1.png") no-repeat;
	height:30px;
	padding-left:50px;
}

#behandelingen tr a:hover{
	background:url("images/line_hover.png") no-repeat;
}

.detail tr{
	background-image:none !important;
}
.detail :hover{
	background-image: none !important;
}
.detail td {
	padding: 10px;
}

#producten {
	width:100%;
}

#producten tr {
	height:30px;
}

#producten tr a{
	display:block;
	background:url("images/line_tr1.png") no-repeat;
	height:30px;
	padding-left:50px;
}

#producten tr a:hover{
	background:url("images/line_hover.png") no-repeat;
}

#producten #productdetail{
	border:1px solid #ededed;
	width:270px !important;
	height:240px !important;
	display:inline-grid;
	margin:10px;
	padding:10px;
	vertical-align: top;
}

.productimage{
	height: 80px;
	display:block;
	align-content: center;
}

.producttitel{
	font-size: 13px;
	font-weight: bold;
	display:block;
}

.productomschr{
	font-size: 10px;
	word-wrap: break-word;
	font-family: Arial;
}

.productprijs{
	display:inline;
	font-weight: bold;
	text-align: left;
	width:30px;
}

.bestel {
	background-image:none !important;
	display:inline;
	text-align: right;
	align:center;
}

.zoom {
  transition: transform .2s; /* Animation */
  height: 80px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(2.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#button {
  color:#08233e;
  font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
  font-size:70%;
  padding:10px;
  background:url(overlay.png) repeat-x center #ffcc00;
  background-color:rgba(255,204,0,1);
  border:1px solid #ffcc00;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border-bottom:1px solid #9f9f9f;
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  cursor:pointer;
 }
 #button:hover {
  background-color:rgba(255,204,0,0.8);
 }

 form #website{ display:none; }