/*
Theme Name: Barwise Catering
Author: Westy
Author URI: http://www.therealwesty.com/
Description: Custom theme for Barwise Catering - made by The Real Westy 2016
*/

@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'pier_sansbold';
    src: url('fonts/pier-bold-webfont.eot');
    src: url('fonts/pier-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pier-bold-webfont.woff2') format('woff2'),
         url('fonts/pier-bold-webfont.woff') format('woff'),
         url('fonts/pier-bold-webfont.ttf') format('truetype'),
         url('fonts/pier-bold-webfont.svg#pier_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pier_sansitalic';
    src: url('fonts/pier-italic-webfont.eot');
    src: url('fonts/pier-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pier-italic-webfont.woff2') format('woff2'),
         url('fonts/pier-italic-webfont.woff') format('woff'),
         url('fonts/pier-italic-webfont.ttf') format('truetype'),
         url('fonts/pier-italic-webfont.svg#pier_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pier_sansregular';
    src: url('fonts/pier-regular-webfont.eot');
    src: url('fonts/pier-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pier-regular-webfont.woff2') format('woff2'),
         url('fonts/pier-regular-webfont.woff') format('woff'),
         url('fonts/pier-regular-webfont.ttf') format('truetype'),
         url('fonts/pier-regular-webfont.svg#pier_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
	margin:0px;
	padding:0px;
}

#nav{
	font-family: 'pier_sansregular';
	position:fixed;
	z-index:1;
	top:0px;
	height:50px;
	width:100%;
	background:#FFFFFF;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
}

#nav a{
	text-decoration:none;
	color:#000;
}

#mobileMenu{
	display:none;
	width: 34px;
    height: 34px;
    margin-top: 8px;
    margin-right: 10px;
    float: right;
}

.burgerBtn{
	width:100%;
	height:auto;
}

ul{
	list-style:none;
	float:right;
}

li{
	float:left;
	padding-right:15px;
}

#logo{
	float:left;
	height:40px;
	margin-top:5px;
	margin-left:10px;
}

.menuLogo{
	height:100%;
	width:auto;
}

#banner{
	width:100%;
	height:auto;
	margin-top: 50px;
}

.mainBanner {
    width: 100%;
    height: 50vw;
    object-fit: cover;
    object-position: center;
}

#aboutHolder{
	width:100%;
	background:#FFF212;
	margin-top:-4px;
}

#about{
	width:80%;
	margin:auto;
	padding:60px 0 60px;
}

.title{
	font-family: 'pier_sansbold';
	text-align:center;
	font-size:18px;
}

.white{
	color:#FFF!important;
}

.white a{
	color:#FFF212;
}

.italic{
	font-family: 'pier_sansitalic';
}

h1{
	font-family: 'pier_sansregular';
	text-align:center;
	font-size:14px;
	padding-top:20px;
	max-width:450px;
	margin:auto;
}

p{
	font-family: 'pier_sansregular';
	text-align:center;
	font-size:14px;
	padding-top:20px;
	max-width:450px;
	margin:auto;
}

#menusHolder{
	width:100%;
	background:#000;
	margin-top:0px;
}

#menus{
	width:80%;
	margin:auto;
	padding:60px 0 60px;
}

#menus p{
	color:#FFF;
}

#menus p a{
	color:#FFF212;
}

#menusContainer{
	width:800px;
	margin:60px auto 40px;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	column-gap:100px;
	row-gap:15px;
}

#menusContainer a{
	color:#000;
}

.menu{
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#FFF;
	height:140px;
	background-image:url(images/menuIcon.gif);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	cursor:pointer;
}

.menu.no-link{
	cursor:default;
}

.menuTitle{
	background: #FFF;
    padding: 10px;
    margin: 0;
    width: 120px;
    text-align: center;
    text-transform: uppercase;
	font-family: 'pier_sansregular';
}


#galleryHolder{
	width:100%;
	background:#FFF;
}

#gallery{
	width:80%;
	margin:auto;
	padding:60px 0 90px;
}

#innerGallery{
	margin-left:2%;
	margin-top:60px;
	overflow:auto;
}

.wpb_image_grid_ul{
    padding-bottom: 60px;
}

.wpb_image_grid_ul li{
	float:left;
	width:32%;
	padding-right:0px;
	
}

.wpb_image_grid_ul li a img{
	float:left;
	width:100%;
	height:auto;
	cursor:pointer;
}

.barwise-lightbox{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.9);
	z-index:100;
}

.barwise-lightbox.is-open{
	display:flex;
	align-items:center;
	justify-content:center;
}

.barwise-lightbox-img{
	max-width:90%;
	max-height:90%;
}

.barwise-lightbox-close{
	position:fixed;
	top:20px;
	right:30px;
	color:#FFF;
	font-size:40px;
	line-height:1;
	cursor:pointer;
}

#contactHolder{
	width:100%;
	background:#FFF212;
}

#contact{
	width:80%;
	margin:auto;
	padding:60px 0 60px;
}

.phone{
	font-family: 'pier_sansbold';
	font-size:18px;
}

.address{
	font-family: 'pier_sansitalic';
	font-size:18px;
}

.email{
	font-family: 'pier_sansregular';
	font-size:18px;
}

.email a{
	color:#000;
}

#contactForm{
	margin-top:60px;
}

input{
	width:94%;
	padding:1%;
	color:#9F9F9F;
	font-family: 'pier_sansregular';
	font-size:18px;
	margin-bottom:30px;
	margin-left:2%;
	border:none;
}

.wpcf7-form p{
	width:100%;
	max-width:none;
}

textarea{
	width:94%;
	min-height:200px;
	padding:1%;
	color:#9F9F9F;
	font-family: 'pier_sansregular';
	font-size:18px;
	margin-bottom:30px;
	margin-left:2%;
	border:none;
}

.wpcf7-submit{
	color:#FFF;
	background-color:#000;
	width:96%;
	padding:1%;
	cursor:pointer;
}

#footerHolder{
	width:100%;
	background:#000;
}

#footer{
	width:80%;
	margin:auto;
	padding:20px 0 30px;
}

#socialMedia{
	width:100px;
	margin:auto;
	margin-top:20px;
	overflow:auto;
}

#fb{
	float:left;
	width:40px;
	margin-right:20px;
}

#twitter{
	float:left;
	width:40px;
}

.smImage{
	width:100%;
	height:auto;
}

ul.topnav li.icon {
	display: none;
}

.icon{
	font-size: 25px;
    line-height: 20px;
}

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

	#menusContainer{
		width:90%;
		margin:30px auto 0;
		grid-template-columns:repeat(2, 1fr);
		column-gap:2%;
		row-gap:2%;
	}
}

	
@media screen and (max-width: 600px) {
	
	.topnav{
		width:100%;
		background:#FFF;
	}
	
	ul.topnav li{
		display: none;
	}
    
	ul.topnav li.icon {
		float: right;
		display: inline-block;
  	}
	
	ul.topnav li.icon {
		position: fixed;
		right: 0;
		top: 16px;
	}
	
	ul.topnav.responsive {
		position: relative;
		top: -11px;
	}
	
	ul.topnav.responsive li.icon {
		position: fixed;
		right: 0;
		top: 16px;
	}
  	
	ul.topnav.responsive li {
		float: none;
		display: inline;
  	}
	
	ul.topnav.responsive li a {
		display: block;
		text-align: center;
	}

	.wpb_image_grid_ul li{
		width:100%;
	}
	
	.wpb_image_grid_ul {
		padding:0px;
    	padding-bottom: 60px;
	}
	
}

@media screen and (max-width: 450px) {
	#menusContainer{
		width:90%;
		margin:30px auto 0;
		grid-template-columns:1fr;
		row-gap:4%;
	}

	.menu {
		height: 70px;
	}

	.menuTitle {
		width: 220px;
	}
	
}

@media screen and (min-width: 1000px) {
	
	.title {
    	font-size: 22px;
	}
	
	h1{
		font-size: 18px;
		max-width: 725px;
	}
	
	p {
		font-size: 18px;
		max-width: 725px;
	}
	
}

@media screen and (min-width: 1400px) {

	.title {
    	font-size: 26px;
	}

}