@import "webfontkit/stylesheet.css";

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		background: #000;
		color: #fff;	
		font-size: 13px;
		font-family: Arial, sans-serif;
		line-height: 16px;
		
	}
	p{
		margin-bottom: 15px;
	}
	
	a{
		color: #0093a1;
		text-decoration: none;
		border-bottom: 1px solid #007c87;
	}
	a:hover{
		color: #fff;
		border-bottom-color: #ccc;
	}
	
	.nojs{
		background-color: #fff;
		color: #000;
		padding: 5px;
		text-align: center;
		width: 450px;
		margin: auto;
		margin-bottom: 30px;
		border-radius: 5px;
	}
	
	h1{
		font-size: 50px;
		line-height: 50px;
		font-family: times;
		font-weight: normal;
	}
	h1 a{
		color: #fff;
		border-bottom: none;
	}
	h2, h3{
		font-weight: normal;
		font-family: GoudyOldStyleItalic, Times, serif;
		font-size: 50px;
		margin-bottom: 15px;
		color: #fff;
		padding-top: 2px;
		line-height: 50px;
	}
	h3{
		font-size: 30px;
		margin-bottom: 10px;
		line-height: 30px;
	}	
	
	
	#logo h1 a{
		padding-top: 10px;
		border:  none;
		display: block;
		background: url('../images/judoclub-beernem.png') no-repeat 20px 0px;
		height: 180px;
		width: 195px;
	}
	#logo span{
		position: absolute;
		left: -10000px;
	}
	
	#header{
		width: 100%;
		padding: 0;
		z-index: 99;
		background: #000 url('../images/divider.jpg') no-repeat center bottom;
		padding-top: 20px;
		padding-bottom: 20px;
		text-align: center;
	}
	#header h1{
		padding-bottom: 15px;
		background: #000 url('../images/divider.jpg') no-repeat center bottom;
	}

/*NAVIGATION*/

		#nav{
		   	padding-top: 15px;
		   	margin: auto;
		   	display: inline-block;
		   	text-transform: lowercase;
		}
		#nav a{
			color: #fff;
			padding: 5px;
			padding-top: 3px;
			padding-bottom: 4px;
			display: block;
			border: none;
			font-size: 17px;
			line-height: 17px;
			font-family: GoudyOldStyleRegular, Times, serif;
			font-weight: normal;
			border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		#nav a:hover, #nav .open a{
			color: #fff;
			background: #00646e;
		}
		#nav ul li{
			float: left;
			position: relative;
			margin-right: 15px;
		}
		#nav ul li.last{
			margin-right: 0;
		}
		#nav a.selected{
			background: #fff;
			color: #333;
		}
		

	
	#slider{
		height: 600px;
		z-index: 0;
		width: 100%;
		max-width: 1140px;;
		position: relative;
		overflow: hidden;
		margin: auto;
	}

	#slider #inner{
		width: 100% !important;
		line-height: 0;
		text-align: center;
	}
	#slider #inner p{
		width: 100%;
	}
	#slider #inner img{
		max-height: 757px;
	}
	#slider #leftbg, #slider #rightbg{
		background: url('../images/leftbg.png') repeat-y left top;
		width: 83px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 50;
		height: 750px;
	}
	#slider #viviane{
		position: absolute;
		left: 60px;
		bottom: 240px;
		/*background:  url('../images/viviane-audenaert.png') no-repeat left top;
		padding-left: 320px;*/
		height: 80px;
		z-index: 55;
	}
	#viviane h1{
		float: left;
		line-height: 35px;
	}
	#viviane h2{
		margin-top: 45px;
		margin-left: 5px;
		float: left;
		text-shadow: 1px 1px 0 #000;
	}
	#slider #rightbg{
		background: url('../images/rightbg.png') repeat-y right top;
		right: 0;
		left: auto;
	}
	#slider .fancybox, .image .fancybox{
		border: none;
	}
	#slider #inner p span{
		display: none;
	}
	#slider #pager{
		position: absolute;
		bottom: 2px;
		z-index: 100;	
		padding-bottom: 5px;
	} 
	#pager a{
		border-bottom: none;
	}
	#pager img{
		margin: 2px;
		opacity: 0.5;
	}
	#pager a:hover img{
		opacity: 1;
	}
	#pager .activeSlide img{
		margin: 0;
		border: 2px solid #fff;
		opacity: 1;
	}
	
	#container{
		z-index: 98;
		position: absolute;
		top: 740px;
		width: 100%;
		left: 0;
		background: #000 url('../images/divider.jpg') no-repeat center top;
		padding-top: 50px;
	}
	#container.notop{
		top: 144px;
		background: none;
	}
	
	.gallery .fancybox, .photobox {
		display: block;
		float: left;
		margin-right: 5px;
		margin-bottom: 5px;
		border: none;
		line-height: 0;
	}
	.photobox{
		width: 99%;
		height: 99%;
		margin-right: 1%;
		margin-bottom: 1%;
	}
	.fancybox:hover, .photobox:hover{
		border: none;
	}
	
	
	.homebox{
		width: 46%;
		text-align: center;
		padding: 2%;
		margin-top: -80px;
	}
	.homebox img{
		margin-top: -100px;
	}
	.homebox h2{
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	.homebox .readmore{
		text-align: right;
		margin-bottom: 0;
	}

	.hyperbox:hover{
		background: #fff;
		color: #000;
		border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
	}
	.hyperbox:hover h2, .hyperbox:hover .readmore a{
		color: #000;
	}
	
	
	.content .left, .content .right{
		width: 70%;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.content .right{
		margin-left: 30%;
	}
	.content .left .lFloat, .content .right .lFloat{
		width: 70%;
	}
	.content .left .image, .content .right .image{
		width:24%;
		margin: 1%;
		position: relative;
	}
	.content .image .overlay{
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.button{
		margin: 10px;
		padding: 15px;
		padding-top: 12px;
		background: #fff;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		font-size: 30px;
		line-height: 30px;
		font-family: GoudyOldStyleBold, Times, serif;
		border: none;
		display: inline-block;
	}
	.button:hover{
		background: #00646e;
		color: #fff;
	}
	
	
	#realisaties .realisatie{
		width: 48%;
		margin-bottom: 2%;
		margin-right: 2%;
		float: left;
	}
	#realisaties .realisatie h4{
		
		font-size: 15px;
		color: #00646e;
		margin-bottom: 10px;
	}
	#realisaties .realisatie .fancybox, #photos .fancybox{
		border: 3px solid #FFF;
		display: inline-block;
		margin-bottom: 5px;
		margin-right: 5px;
		line-height: 0;
	}
	#realisaties .realisatie .fancybox:hover, #photos .fancybox{
		border-color: #ccc;
	}
	
	
	
	
	
	/*CONTACT*/
		.notop h2{
			text-align: center;
		}
	
		form label{
			display: block;
			float: left;
			width: 17%;
			margin-right: 5%;
			padding-top: 8px;
			text-align: right;
		}
		form input, form textarea, form select{
			float: left;
			background-color: #efefef;
			padding: 6px;
			padding-bottom: 7px;
			border: 2px solid #efefef;
			margin-bottom: 15px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			color: #50423A;
			border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			width: 13%;
		}
		form input[type='radio'], form input[type='checkbox']{
			background: none;
			border: none;
			padding: 0;
			padding-right: 2%;
			width: auto;
		}
		form textarea{
			width: 76%;
			height: 70px;
		}
		form .large{
			width: 76%;
		}
		form .medium{
			width: 51%;
		}
		form select{
			width: 77%;
			height: 36px;
		}
		form br{
			clear: both;
		}
	
		form input[type='submit']{
			margin-right: 6px;
			float: right;
			padding: 10px;
			cursor: pointer;
			background-color: #00646e;
			color: #fff;
			width: 140px;
			text-transform: uppercase;
			font-size: 11px;
			font-weight: bold;
			border: 2px solid #004d54;
			text-shadow: 1px 1px 0 #004d54;
			height: 35px;
		}form input[type='submit']:hover{
			text-shadow: 1px 1px 0 #00363b;
			background-color: #004d54;
			border: 2px solid #00363b;
		}
		
		form input:focus,form textarea:focus{
			border-color: #00646e;
		}
		form input.error, form textarea.error{
			border-color: #bd3737;
		}
	
		form .rd_ch{
			display: inline;
			float: none;
			margin-right: 5%;
		}
		form .rd_ch input{
			float: none;
		}
		
		.list2col > div{
			width: 200px;
		}
		.list2col{
			width: 73%;
		}
		.list2col .rd_ch{
			margin-right: 15%;
		}
	
		form .extra{
			display: none;
		}
		.fiche p{
			padding-left: 22%;
			font-family: times, serif;
			font-style: italic;
			font-size: 18px;
		}
		.fiche{
			padding-right: 20px;
			padding-top: 20px;
			margin-bottom: 20px;
			border: 1px dotted #fff;
		}
		.fiche h3{
			padding-left: 22%;
		}
		
		
		form #adres .lFloat{
			display: inline;
			float: none;
		}
		
		form .row{
			position: relative;
		}
		
		form label.error{
			position: absolute;
			right: -1px;
			top: 8px;
			z-index: 100;
			background-color: #bd3737;
			text-align: right;
			margin-right: 20px;
			width: auto;
			padding: 5px;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			-moz-border-radius-topleft: 3px;
			-moz-border-radius-topright: 3px;
			-webkit-border-top-left-radius: 3px;
			-webkit-border-top-right-radius: 3px;
		}
		.mobile form label.error{
			position: absolute;
			right: -4px;
		}
	
		#error{
			padding-left: 22%;
			width: 88%;
			margin-bottom: 20px;
		}
		#error li{
			margin-bottom: 12px;
		}
		#error li span{
			padding: 5px;
			border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			background-color: #bd3737;
		}
		#error .succes span{
			background-color: #00646e;
		}
	
	
	#footer .row{
		font-family: GoudyOldStyleRegular, Times, serif;
		padding-top: 20px;
		line-height: 25px;
	}
	a.image{
		border: none;
	}

.publications #slider{
	display: none;
}	
		
/*medium screen*/	
	
@media only screen and (max-width: 1280px) {

}
	
/* Smaller screens */

@media only screen and (max-width: 1023px) {
	#container{
		top: 600px;
	}
	#slider #viviane {
		bottom: 190px;
	}
	#slider{
		height: 495px;
	}
	#slider #inner img{
		max-height: 580px;
	}
	.homebox{
		margin-top: -50px;
	}

	form input {
		width: 9%;
	}
}
	
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 768px) {
	h1{
		font-size: 30px;
		line-height: 30px;
	}
	.content .left, .content .right{
		width: 100%;
		margin-left: 0;
	}
	#slider #viviane {
		padding-left: 0;
		padding-top: 80px;
		width: 310px;
		height: auto;
		bottom: 150px;
	}
	#viviane h1{
		float: none;
	}
	#viviane h2 {
		margin-top: 0;
		font-size: 30px;
		line-height: 30px;
	}
	#slider{
		height: 416px;
	}
	#slider #inner img{
		max-height: 510px;
	}
	#container{
		top: 490px
	}
	#container.notop{
		top: 127px
	}

	form label{
		text-align: left;
		padding-bottom: 6px;
	}
	form label, form .large,
	form input, form textarea, form .large, form .medium{
		float: none;
		width: 96%;
		
	}
	form .small {
		width: 91%;
	}
	form select{
		float: none;
		width: 100%;
	}
	.fiche{
		padding: 20px;
	}
	
	form #adres .lFloat{
		display: block;
		float: left;
		width: 25%;
	}
	form #adres .lFloat.big{
		width: 70%;
		padding-right: 2%;
	}
	form #adres .lFloat.cty{
		padding-left: 2%;
		padding-right: 0;
	}
		
}
@media only screen and (max-width: 715px) {
	#realisaties .realisatie .fancybox, #photos .fancybox{
		width: 45%;
	}
}
@media only screen and (max-width: 650px) {
	#slider{
		height: 356px;
	}
	#container{
		top: 430px
	}
	.homebox{
		width: 44%;
		margin-bottom: 100px;
		margin-top: 0;
	}
	#slider #viviane{
		bottom: 100px;
	}
	
}
@media only screen and (max-width: 550px) {
	#slider{
		height: 315px;
	}
	#slider #inner img{
		max-height: 400px;
	}
	#container{
		top: 390px
	}
	#pager{
		display: none;
	}
	.content .left .lFloat, .content .right .lFloat {
		width: 64%;
	}
	.content .left .image, .content .right .image {
		margin: 3%;
		width: 30%;
	}
	#viviane{
		display: none;
	}
	
	.homebox{
		width: 88%;
		margin-left: 4%;
		margin-right: 4%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	h2{
		font-size: 35px;
		line-height: 35px;
	}
	h3{
		font-size: 25px;
		line-height: 25px;
	}
	
}
@media only screen and (max-width: 530px) {	
	#nav{
		width: 285px;
	}
	#container.notop{
		top: 150px;
	}
	
	
	form #adres .lFloat.big{
		width: 68%;
		padding-right: 4%;
	}
	form #adres .lFloat.cty{
		padding-left: 4%;
		padding-right: 0;
	}
	#realisaties .realisatie{
		width: 100%;
	}
	#realisaties .realisatie .fancybox, #photos .fancybox{
		width: 30%;
	}
}
@media only screen and (max-width: 479px) {
	#slider{
		height: 275px;
	}
	#slider #inner img{
		max-height: 340px;
	}
	#container{
		top: 360px
	}
	form label.error{
		right: 0;
		margin-right: 0px;
	}

}

@media handheld, only screen and (max-width: 320px) {
	
	#realisaties .realisatie .fancybox, #photos .fancybox{
		width: 45%;
	}
}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
	#header h1 a .cufon{
		opacity: 0;
	}
	#header h1 a{
		display: inline-block;
		width: 285px;
		height: 21px;
		background: #00f url('../images/viviane-audenaert.jpg') no-repeat left center;
		background-size: 285px 21px;
	}
}


.cAlign{
	text-align: center;
}
.rAlign, .readmore{
	text-align: right;
}
.lFloat{
	float: left;
}
.rFloat{
	float: right;
}
.marginBottom{
	margin-bottom: 20px;
}
img.lFloat{
	margin-right: 30px;
	margin-bottom: 10px;
}


/*
 * Select style (color + background) 
 */
::selection{
	background: #fff;
	color: #000;
} 
::-webkit-selection{
	background: #fff;
	color: #000;
}
::-moz-selection {
	background: #fff;
	color: #000;
}
/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */