@media only screen and (max-width: 1200px) {
	.grid{ padding: 0 25px; }

		.grid .grid{ padding: 0 !important; }
	
	/* timeline */
	.yearsection{
		height: 400px;
	}

	.item-content{ padding: 10px; }
		.item-content h3{ font-size: 19px; line-height: 23px;}
		.item-content ul li{
			font-size: 15px;
		}


}

@media only screen and (max-width: 1080px) {
	.item-content{
		max-width: 300px;
	}

	#main-nav ul li a{ padding: 10px 6px 9px 6px; }
	#social ul li a{ padding: 10px 5px 9px 5px; }

	/* Homepage blokken */

	.latestcomp .item-thumb, .latestcomp .item-desc, .latestvid .item-thumb, .latestvid .item-desc{
		height: 250px;
	}

	#latestall .latestpost{
		height: 500px;
	}
	


}

@media only screen and (max-width: 960px) {

	#menu-logo{
	margin: 0 5px 0 0;
	}

	#main-nav ul li a{
		padding: 10px 8px 9px 8px;
	}

	#social ul li a{
		padding: 10px 5px !important;
	}

	/* Homepage latest news */
	.latestvid .item-desc,
	.latestcomp .item-desc {
		height: 280px !important;
	}
	
	.latestvid .item-thumb,
	.latestcomp .item-thumb {
		height: 120px !important;
	}

	.latestpost{
		height: 400px !important;
	}

	.fs h1{
		font-size: 50px;
		line-height: 52px;
	}

	.fs > p{
		font-size: 24px;
		line-height: 30px;
	}

	.item-desc li,
	.footer-section .contact,
	.footer-section p,
	.twitter-cont ul li {
		font-size: 14px;
		line-height: 22px;
	}

	.item-desc span{
		min-width: 85px;
	}

	.footer-section .contact{
		width: 100%;
		padding: 0 !important;
	}
	
	/* Social view more buttons */
	.socialitems{
		width: 40px;
		position: absolute;
		right: 0px;
		top: 46px;
		background-color: #72cbf2;
		opacity: 0;
		height: 0;
	}
	
		.socialitems li{
			width: 100%;
			float: left;
		}
		
			.socialitems li a{
				padding: 0;
				margin: 0;
				width: 100%;
				text-align: center;
			}
			
				.socialitems li a:hover{
					background-color: #fff !important;
					color: #72cbf2;
				}
	
	#showsocial{ display: block; }

}

@media only screen and (max-width: 768px) {
	
	/* =================================
	FONTS
	==================================*/

	#form p,
	.entry-content p {
		font-size: 15px;
		line-height: 20px;
	}
		
		#hpint-cont h1{
		font-size: 50px;
		line-height: 52px;
		}

		#hpint-cont p{
			font-size: 33px;
			line-height: 43px;
		}

		.fs h1{
			margin-bottom: 10px;
			font-size: 40px;
			line-height: 48px;
		}

		.fs > p{
			font-size: 18px;
			line-height: 24px;
		}

	.bio-content h2,
	.entry-content h2 {
		font-size: 30px;
		line-height: 32px;
	}

		.entry-content h2{
			margin-bottom: 10px;
		}

	.wpcf7-textarea, .wpcf7-text{
		font-size: 13px;
		padding: 10px 10px;
	}


	h1{
		font-size: 35px;
		line-height: 40px;
	}

	h2{
		font-size: 22px;
		line-height: 28px;
	}

	.intro > p{
		font-size: 22px !important;
		line-height: 28px  !important;
	}


	* {
	  box-sizing: border-box;
	}
	
	html, body { min-height: 100%; }
	a { text-decoration: none; }
	
	#main-nav{
		display: none;
	}

	#topnav{
		background-color: transparent !important;
		right: 0;
		width: 100px;
	}

	#menu-logo{ display: none; }
	
	.main-header {
		background: rgba(0,0,0, 0.8);
		padding: 0px;
		text-align: center;
		color: white;
		position: fixed;
		width: 100%;
		left: 0px;
		top: 0px;
		z-index: 9998;
		transition: all 0.3s ease;
		height: 50px;
		line-height: 50px;
	}
	
	.main-header h1 {
		font-size: 1em;
		margin: 0;
		color: white;
	}
	
	.main-header a {
		position: absolute;
		left: 12px;
		top: 0px;
		color: white;
		font-size: 30px;
	}
	
	.mobile-menu-holder {
		height: 50px;
		float: right;
		width: 100%;
		transition: width 0.3s ease;
	}
	
	/* navigation */
	#mobile-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background: #72cbf2;
		overflow-y: auto;
		transition: width 0.3s ease;
		z-index: 9999;
	}
	
	#mobile-menu ul {
		padding: 0;
		background-color: inherit;
		overflow: inherit;
		zoom: inherit;
		margin: 0;
	}
	
	#mobile-menu ul li {
		width: 100%;
		margin: 0;
	}

		#mobile-menu ul li a{
			display: block;
			font-size: 15px;
			padding: 11px 10px;
		}

		#mobile-menu ul li:hover, #mobile-menu .current_page_item{
			background-color: white;
		}

			#mobile-menu .current_page_item a{
				color: #000;
			}

			#mobile-menu ul li:hover a{
				color: #000;
			}
	
	.main-nav-2 a {
		display: block;
		color: white;
	}

		.main-nav-2 a:hover{
			background-color: red;
		}

	#repsonsive-logo{
		margin: 0px auto;
	}

		#repsonsive-logo img{
			max-height: 40px;
		}

	/* social */
	
	#languageswitcher,
	#showsocial {
		height: 50px;
	}
	
	.socialitems{
		top: 50px;
	}

	
	.close-menu {
		display: none;
	}
	
	#mobile-menu.open {
		width: 200px;
		-webkit-overflow-scrolling: touch;
		z-index: 9999 !important;
		-webkit-box-shadow: 6px 0 6px -2px rgba(0,0,0, 0.2);
        box-shadow: 6px 0 6px -2px rgba(0,0,0, 0.2);
	}
	
	.mobile-menu-holder.open .main-header { left: 200px; }
	.mobile-menu-holder.open .open-menu { display: none; }
	.mobile-menu-holder.open .close-menu { display: block; }
	
	/* classes */
	
	.section{ margin: 0; }
	.third{ width: 100%; }
	.half{ width: 100%; }
	
	/* Homepage */
	
	.latestvid .item-desc, .latestcomp .item-desc{
		height: auto !important;
		padding: 25px 25px 50px 25px;
	}

	.latestpost{
		height: auto !important;
	}

	#latestall .latestpost h3{
		padding: 100px 25px;
	}

	/* Biografie */

	.bio-item.odd > .bio-content:first-child.third,
	.bio-item.odd > .bio-thumb.half {
		width: 100%;
	}

	.bio-item.odd > .bio-content:last-child.third{ position: relative; }
	
	.bio-item.odd > .bio-thumb.half, .bio-item.even > .bio-thumb.half,
	.bio-item.even > .bio-thumb.half,
	.bio-item > .bio-thumb.third,
	.bio-thumb {
		position: relative;
		width: 100%;
		height: 250px;
		left: 0;
	}

	.fifth {
		width: 33%;
		width: calc(100%/3);
	}
	
	/* =======================
	======== Homepage ========== */

	#latestall article{
		margin: 0 0 35px 0;
	}

	/* =======================
	======== WEDSTRIJDAGENDA ========== */

	#wedstrijdagenda .item{
		margin: 0 0 25px 0;
	}

	/* =======================
	======== Timeline ========== */
	.yearsection{
		float: left;
		position: relative;
		width: 100%;
		height: auto;
	}

	.timeline-item{
		width: 100%;
		position: relative;
		float: left;
		top: 0 !important;
		height: auto !important;
		margin: 50px 0 !important;
	}

	.item-content{
		width: 100%;
		position: relative;
		max-width: 100% !important;
		z-index: 1;
		float: left;
	}

		.line-left .item-content:after, .line-right .item-content:after{
			position: absolute;
			width: 0px;
			height: 0px;
			content: '';
			z-index: 3;
			border-left: 15px solid transparent;
			border-bottom: 20px transparent;
			border-right: 15px solid transparent;
			top: -20px;
			left: 50%;
			margin-left: -15px;
		}

			.line-left .blue.item-content:after, .line-right .blue.item-content:after{
				border-left: 15px solid transparent;
				border-bottom: 20px solid #6dc7ef;
				border-right: 15px solid transparent;
			}

			.line-left .pink.item-content:after, .line-right .pink.item-content:after{
				border-left: 15px solid transparent;
				border-bottom: 20px solid #f2acb7;
				border-right: 15px solid transparent;
			}

			.line-left .grey.item-content:after, .line-right .grey.item-content:after{
				border-left: 15px solid transparent;
				border-bottom: 20px solid #b9b2a9;
				border-right: 15px solid transparent;
			}

		.timeline-item:after{
			display: none;
		}

	.timeline-item:before{
	width: initial;

	}
	
	/* =======================
	======== FORMS ========== */
	
	.form-left, .form-right{
		width: 100%;
	}
	
	/* =======================
	======== BLOGS ========== */

	.entry-content{
		width: 100%;
	}

	.entry-thumb{
		width: 100%;
		position: relative;
		float: left;
		height: 250px;
	}

		.entry-content:after{
			position: absolute;
			width: 0px;
			height: 0px;
			left: 50%;
			top: -5px;
			margin-left: -15px;
			content: '';
			z-index: 3;
			border-bottom: 20px solid #6dc7ef;
			border-right: 15px solid transparent;
			border-left: 15px solid transparent;
			border-top: none;
		}

			.blog-entry:nth-child(3n+0) > .entry-content:after{
				border-bottom: 20px solid #eec6c5;
				border-right: 15px solid transparent;
				border-left: 15px solid transparent;
			}

			.blog-entry:nth-child(3n+1) > .entry-content:after {
				border-bottom: 20px solid #dddddd;
				border-right: 15px solid transparent;
				border-left: 15px solid transparent;
			}
		
		/* single post */

		.single-txt{
			width: 50%;
		}

		 .single-thumb{
		 	width: 50%;
		 	float: left !important;
		 	position: relative;
		 }

	/* =======================
	======== CONTACT ========== */

	.detail-left, #mapright{
		width: 100%;
		position: relative;
	}

	#detail-map .detail-left{
		min-height: 0 !important;
	}

	/* =======================
	======== FOOTER ========== */

	/* sponsors */
	#socialfooter{
	margin: 47px 0;
	}

	#socialfooter ul li a{
	margin: 0 10px;
	font-size: 25px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	}

	#sponsors{
		width: 100%;
		padding: 0 25px;
		margin: 0;
		float: left;
	}
	
	.sponsortitle{ margin: 0 0 25px 0; }

	#sponsors ul li{
		float: left;
		width: 33.33%;
		margin: 10px 0;
	}

		#sponsors ul li img{
			text-align: center;
		}
	
	/* footer items */
	.footer-section{
		width: 100% !important;
		margin: 0;
		padding: 0 25px;
	}

		.footer-section .contact{
			width: 100%;
			padding: 0;
		}

		.footer-section .contact:nth-child(odd){
			padding: 0;
		}
		
	#wpcf7-f63-o2{
		width: 100%;
		margin: 0;
		padding: 0;
	}

}

@media only screen and (max-width: 480px) {
	
	/* =======================
	======== Homepage ========== */
	#homepageintro{
		height: 300px;
	}
	.ranomi{
		bottom: 0;
		position: absolute;
		z-index: -1;
	}
	.ranomi img{
		width: 70%;
		float: right;
	}

	.homepagelogo{
		top: -50px;
	}

		.homepagelogo img{
			max-width: 100px;
			max-height: 100px;
		}
	
	/* fonts */
	#hpint-cont h1,
	.fs h1 {
		font-size: 30px;
		line-height: 36px;
	}
	
	h2,
	#hpint-cont p,
	#competition header h2,
	#homesocial header h2,
	.bio-content h2,
	.entry-content h2 {
		font-size: 24px;
		line-height: 27px;
		margin-bottom: 10px;
	}
	

	#latestall .latestpost h3{
		font-size: 28px;
		line-height: 27px;
	}
	
	h3,
	.footer-section h3 {
		font-size: 18px;
		line-height: 22px;
		text-align: left;
	}

	p,
	.item-desc li,
	.twitter-cont ul li,
	.footer-section p,
	.footer-section .contact,
	.bio-content p,
	.item-content {
		font-size: 14px;
		line-height: 22px;
	}

	#wedstrijdagenda .item{
		width: 100%;
	}
	
	/* =======================
	======== CLASSES ========== */

	.fifth {
		width: 50%;
		width: calc(100%/2);
	}
	
	/* =======================
	======== CONTACT ========== */
	
	.detail-left{ width: 100%; }
	#mapright{ width: 100%; position: relative; float: left; }
	
	/* =======================
	======== SINGLE POST ========== */

	.single-txt, .single-thumb{
		width: 100%;
	}

	/* =======================
	======== FOOTER ========== */

	#sponsors ul li{
		float: left;
		width: 50%;
		margin: 10px 0;
		height: 80px;
	}

	.creator{
		float: left;
		width: 100%;
	}

}