/*
	Theme Name: JG Productions
	Author: Jesse Groen
	Author URI: jgproductions.nl
	Description: Wordpress CMS website
	Version: 1.1
	Last updated: 12-09-2017;
*/
	
	* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

		html { /*sticky footer*/
		position: relative;
		min-height: 100%;
		text-decoration: none;
		list-style: none;
		padding: 0;
		margin: 0;
	}

		body {
	    font-family: arial, helvetica, verdana;
	    font-size: 14px;
	    width: 100%;
	    height: 100%;
	    display: block;
	    color: #666;
	    background-color: #f2f2f2;
	    margin: 0 auto !important;
	    padding: 0;
	}
	
	
	h1, h2, h3, h4 {
		-webkit-font-smoothing: antialiased;
		font-weight: normal;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #2f2f2f;
		margin-bottom: 30px;
	}
	
	h1, .new_section {
		border-bottom: 1px solid #2f2f2f;
		border-top: 1px solid #2f2f2f;
		padding: 10px;
		text-align: center;
		letter-spacing: 0.2em;
		font-weight: 400;
		text-transform: uppercase;
		font-size: 36px;
	}

	h2 {
		font-size: 32px;
		margin-bottom: 30px;
		
	}

	.opening-times h3 {
		font-size: 24px;
	}
	
	a {
		color: #2f2f2f;
		text-decoration: none;
	}
	.clear-fix:after, .row:after {
		content: "";
		display: table;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

	.no-border {
		border: none !important;
	}
	
	.clear-fix {
		zoom: 1;
	}

	ul {
		padding: 0;
		list-style: none;
	}

	iframe {
		margin-bottom: 20px;
		max-width: 100%;
	}

	fieldset {
		border: none;
		padding: 0;
	}
	table {
		margin: 0;
		border-collapse: collapse;
	}

	table td {
		width: 200px;
		padding: 10px 8px;
		border-bottom: 1px solid #ddd;
	}
	
	.wrap {
		width: 100%;
		max-width: 1200px;
		height: auto;
		margin: 0 auto auto;
	}
	
	#content-right img {
		width: 100%;
		height: auto;
		display: block;
	}
	
	.row {
		margin-bottom: 20px;	
	}
	
	.col-2 {
		width: 48%;
		margin: 0 1%;
		float: left;
	}
	
	input, textarea {
		border: 1px solid #2f2f2f;
		padding: 5px;
	}
	
	.mfp-img {
		width: initial;
	}
	/*************************************************
	Header
	*************************************************/
	
	header {
	    width: 100%;
	    margin-bottom: 20px;
	    background: #2f2f2f;
	    color: #fff;
	}
	
	#slideshow {
		border: 1px solid #ddd;
	}

	
	#slideshow img {
		width: 100% !important;
		height: auto !important;
		
	}
	
	.slideshow_content {
		width: 100% !important;
	}
	
	.navigation {
		width: 100%;
		height: auto;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	nav {
	}
	
	nav li {
		display: inline-block;
		height: auto;
		transition: all 0.3s;
	}

	nav li:hover, .current_page_item {
		background: #fff;
	}

	nav li:hover a, .current_page_item a {
		color: #2f2f2f;
	}
	
	nav li a {
		display: block;
		text-align: left;
		padding: 0px 25px;
		line-height: 50px;
		color: #fff;
		text-transform: uppercase;
		font-weight: 400;
		transition: all 0.3s;
	}
	
	.menu {
		margin: 0;
	}
	
	#nav-button {
	  display: none;
	}
	
	.menu-header-menu-container {
		float: right;
	}
	
	#logo {
		float: left;
		max-width: 110px;
	}
	
	/*************************************************
	Content
	*************************************************/
	
	#main-content {
		opacity: 0;
		transition: all 3s ease-in-out;
		padding: 20px 0;
	}

	#content-container {
		border: 1px solid #ddd;
		padding: 30px 20px;
		background-color: #fff;
	}
	
	.loaded {
		opacity: 1 !important;
		transition: opacity 2s;
	}
	
	#content-left {
		float: left;
		width: 68%;
		padding-right: 20px;
		border-right: 1px solid #ddd;	
	}
	
	#content-left ul li {
		list-style: disc;
		list-style-position: inside;
	}

	#content-left img {
		max-width: 100%;
		height: auto;
	}

	#content-left p, #content-left table {
		margin-bottom: 20px;
	}
	
	
	#content-right {
		float: right;
		width: 30%;
	}
	#content-right h2 {
		padding: 10px;
		text-align: center;
		margin-bottom: 20px;
		letter-spacing: 0.2em;
		font-weight: 400;
		text-transform: uppercase;
		border: 1px solid #ddd;
		background: #f2f2f2;
		font-size: 125%;
		
	}
	
	#content-right > li, #content-right section {
		margin-bottom: 10%;
	}

	.pictures article {
		border-bottom: 0;
	}
	
	article {
		overflow: hidden;
		margin-bottom: 40px;
		border-bottom: 1px solid #ddd;
		
	}
	
	.post-date {
		margin-bottom: 30px;
	}
	
	.article-text {
		margin-bottom: 30px;
	}
	
	.read-more {
		display: block;
		padding: 7px;
		border: 1px solid #ddd;
		width: 100%;
		max-width: 150px;
		margin-top: 30px;
		font-weight: bold;
		text-align: center;
		font-size: 125%;
		transition: all 0.3s ease-in;
		color: #666;	
	} 
	
	#post-links {
		text-align: center;
		position: relative;
		margin: 5% 0;
	}
	
	#post-links .prev {
		position: absolute;
		left: 0;
		margin: 0;
	}
	
	#post-links .next {
		position: absolute;
		right: 0;
		margin: 0;
	}
	
	.page-numbers {
		display: inline-block;
		margin: 0 10px;
	}
	
	#previous-post {
		float: left;
	}
	
	#previous-post a, .prev {
		border: 1px solid #ddd;
		padding: 10px;
		transition: all 0.3s ease-in;
		color: #666;	
	}
	
	#previous-post a::before, .prev::before {
		font-family: FontAwesome;
		content: "\f100";
		margin-right: 5px;
	}
	
	
	#next-post {
		float: right;
	}
	
	#next-post a, .next, .page-numbers {
		border: 1px solid #ddd;
		padding: 10px;
		transition: all 0.3s ease-in;
		color: #666;	
	}
	
	#next-post a::after, .next::after {
		font-family: FontAwesome;
		content: "\f101";
		margin-left: 5px;
	}
	
	.read-more:hover, #search-button:hover, .wpcf7-submit:hover, #previous-post a:hover, #next-post a:hover, .page-numbers:hover {
		border-color: #2f2f2f;
		color: #fff;
		background-color: #2f2f2f;
	}
	
	 .wpcf7-submit {
		background: transparent;
		border: 1px solid #2f2f2f;
		color: #2f2f2f;
		cursor: pointer;
		transition: all 0.3s ease-in;
	}

	#search-button {
		height: 25px;
		width: 25px;
		text-align: center;
		font-size: 125%;
		background: transparent;
		cursor: pointer;
		border: 0;
	}
	
	.wpcf7-submit {
		transition: all 0.3s ease-in;
	}
	
	.article-thumbnail {
		overflow: hidden;
		margin-bottom: 30px;
	}

	.pictures .article-thumbnail {
		margin-bottom: 0;
		position: relative;
	}

	.pictures .picture-text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.3);
		text-align: center;
		font-size: 20px;
		color: #fff;
		font-weight: 700;
	}

	.pictures .picture-text a {
		display: block;
		color: #fff;
		padding: 10px;
	}
	
	.article-thumbnail img {
		width: 100%;
		height: auto;
		display: block;
	}
	
	.article-small .attachment-post-thumbnail, .portfolio-grid img, .article-small .article-thumbnail img {
		transition: all 1.3s;
		display: block;
	}
	
	.article-small .article-thumbnail img:hover {
		opacity: 0.8;
		transform: scale(1.03);
	}
	
	.current {
		background: #2f2f2f;
		color: #fff;
		border: 1px solid transparent;
	}
	
	 .widget_recent_entries ul li {
		 margin-bottom: 15px;
	 }
	
	
	/*************************************************
	Portfolio
	*************************************************/

	.portfolio-grid h2 {
		text-align: center;
		border: 1px solid #2f2f2f;
		padding: 5px;
		margin-bottom: 10px;
	}
	
	.portfolio-grid a {
		overflow: hidden;
	}

	.grid-item img {
		float: none;
		width: 100%;
		height: auto;
		border: 1px solid transparent;
	}

	.grid-item img:hover {
		border: 1px solid #2f2f2f;
	}
	
	/*************************************************
	Footer
	*************************************************/
	
	footer {
		width: 100%;
		color: #fff;
		background-color: #2f2f2f;
		border-top: 1px solid #ddd;
	}

	footer a {
		color: #fff;
	}
	
	#social-media > div {
		border-bottom: 1px solid #fff;
		display: table;
		table-layout: fixed;
		width: 100%;
		padding: 20px 0;
	}
	
	
	#social-media a {
		display: table-cell;
		color: #ddd;
		text-align: center;
	}
	
	#social-media a span {
		display: block;
		text-align: center;
	}
	
	#social-media a i {
		font-size: 32px;
		text-align: center;
		margin-bottom: 20px;
		border-radius: 20px;
	    padding-top: 8px;
	    width: 40px;
	    height: 40px;
	    text-align: center;
	    font-size: 25px;
	    transition: all 0.3s;
		border: 1px solid transparent;
	}
	
	#social-media a:hover i {
		border: 1px solid #fff;
		color: #fff;
	}

	#footer-menu ul {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	#footer-menu li {
		display: table-cell;
	}

	#footer-menu li a {
		display: block;
		padding: 0 25px;
		line-height: 50px;
		text-align: center;
	}
	
	#footer-menu > div {
		border-bottom: 1px solid #fff;
	}
	
	#copyright  > div{
		padding: 25px 0 25px 20px;
		font-size: 10px;
	}




	
	
	/*************************************************
	Images
	*************************************************/	
	
	img.alignleft {
		float: left;
		margin: 20px 20px 20px 0;
	}
	
	img.alignright {
		float: right;
		margin: 20px 0 20px 20px;
	}
	
	img.aligncenter {
		display: block;
	}
	
	
	
	/*************************************************
	Contact Form
	*************************************************/
	
	.wpcf7 p {
		margin-bottom: 20px;
	}
	
	.wpcf7-quiz-label {
		display: block;
	}
	
	.wpcf7-form-control {
		margin-top: 10px;
	}
	
	.wpcf7-response-output {
		padding: 10px !important;
	}
	
	input, textarea {
		max-width: 100%;
	}
	
	
	/*************************************************
	Media queries
	*************************************************/
	
	@media only screen and (max-width: 1239px) {
		.wrap {
			width: 95%;
		}
	}
	
	
	@media only screen and (min-width: 991px) {
		.menu-header-menu-container {
		display: block !important;
	}
	}
	
	@media only screen and (max-width: 990px)  {
		#nav-button {
		margin: 7px 20px 0 0;
		cursor: pointer;
		transition: all 0.3s;
		float: right;
		display: block;
		font-size: 30px;
		}
		
		.menu-header-menu-container {
			display: none;
			width: 100%;
		}
		
		nav {
			width: 100%;
		}
		
		nav li {
			display: block;
			width: 100%;
	
			text-align: left;
		}
		
		nav li:hover, .current-menu-item {
			background: #fff;
		}
		
		.current-menu-item a {
			border-bottom: 0;
		}
		
		#footer-menu li {
			display: block;
		}
	
	
	}
	
	@media only screen and (max-width: 639px)  {
		h1 {
			font-size: 24px;
		}
		
		h2 {
			font-size: 20px;
		}
		
		#content-left {
			width: 100%;
			float: none;
			border-right: 0;
			padding-right: 0;
		}
	
		#content-right {
			width: 100%;
			float: none;
			margin-top: 75px;
		}
		
		.row {
			margin-bottom: 0;
		}
		
		.col-2 {
			width: 100%;
			margin: 0 0 20px 0;
		}
		
		.gallery-item {
			width: 100% !important;
		  position: relative !important;
		  left: 0 !important;
		  top: 0 !important;
		}
	}

	


.article-small {
	opacity: 0;
}

body div.wpcf7-response-output {
	color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1; 
    margin: 0;
}

body div.wpcf7-mail-sent-ok {
	color: #3c763d !important;
    background-color: #dff0d8 !important;
    border: 1px solid #d6e9c6 !important;
}


div.wpcf7-response-output:before {
        font-family: FontAwesome;
        content: "\f06a";
        margin-right: 5px;
}

div.wpcf7-mail-sent-ok:before {
	font-family: FontAwesome;
	content: "\f058";
	margin-right: 5px;
}


.crunchify-link {
    padding: 5px 10px;
    color: white;
    font-size: 12px;
    display: inline-block;
}

.crunchify-link i {
	margin-right: 5px;
}

.crunchify-twitter {
    background: #41B7D8;
    transition: all 0.3s;
    margin-right: 10px;
}
 
.crunchify-twitter:hover,.crunchify-twitter:active {
    background: #279ebf;
}
 
.crunchify-facebook {
    background: #3B5997;
    transition: all 0.3s;
}
 
.crunchify-facebook:hover,.crunchify-facebook:active {
    background: #2d4372;
}
 

 
.crunchify-social {
    margin: 20px 0px 25px 0px;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    clear: both;
}