/**//**/
/*  
Theme Name: MeatKing
Version:	1.14.20
Author:	 ThemeWagon


TABLE OF CONTENTS
	01 - General and Typography
	02 - Header
	03 - Navigation
	04 - Story
	05 - Parallax
	06 - Crew
	07 - Special
	08 - Contact
	09 - Inspiration
	10 - Footer
	11 - Responsive styles
*/

body[data-simply-edit] #menu {
	top: 66px;
}
body[data-simply-edit] #sections {
	margin-top: 66px;
}
#navbar *[data-simply-list-item]:before {
    margin-top: -5px;
    margin-left: 0;
    right: -15px;
    z-index: 10;
}
#navbar .simply-empty[data-simply-list]:before,
#navbar .simply-empty[data-simply-list]:after {
    width: auto;
    display: inline-block
}
.social-bar *[data-simply-list-item]:before {
    margin-left: 0;
    right: -15px;
    z-index: 10;
}

/* ==========================================================================
	01. General and Typography 
========================================================================== */
body {
	font-family: 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	line-height: 1.5em;
	color: #414042;
}
img {
	max-height: 100%;
	max-width: 100%;
}
a, a:hover {
	color: #414042;
	text-decoration: none;
}
a:link {
	color: #be1e2d;
}
a:link:hover {
	text-decoration: underline;
}
a:visited {
	color: #841520;
}
.simply-image-align-left {
	margin-right: 1em;
}
.simply-image-align-right {
	margin-left: 1em;
}
:target:before {
	content: '';
	display: block;
	height: 3em;
	margin: -3em 0 0;
}
/* ==========================================================================
	02. Header 
========================================================================== */
#header {
	background-image: url('/graphics/banner-site-design.jpg');
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	position: relative;
	height: 100vh;
}
.bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(44,33,5,0.5);
	z-index: 0;
}
#header .center {
	position: relative;
	z-index: 1;
	color: white;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#header .bottom {
	color: white;
}
#header .center .slogan {
	font-size: 26px;
	text-transform: uppercase;
}
#header .banner h1 {
	font-size: 75px;
	font-weight: 400;
	display: inline-block;
	padding: 0px 18px;
	text-shadow: #333 0px 3px 3px;
}
#header .subtitle h4 {
	display: inline-block;
	color: #be1e2d; /* muze rood */
	font-size: 38px;
}
#header .banner,
#header .subtitle {
	position: relative;
}
#header .bottom {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 30px;
}
#header .bottom a {
	font-size: 36px;
	color: whitesmoke;
	position: relative;
	top: -5px;
}
#navbarToggleClose,
#navbarToggleOpen {
    position: absolute;
    top: 0px;
    right: 25px;
}
#navbar:target ~ #navbarToggleOpen {
    display: none !important;
}
#navbar:target ~ #navbarToggleClose {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================================
	03. Navigation 
========================================================================== */
#menu {
	background: rgba(33,45,57,0.8);
	margin-bottom: 0;
}
#pagedown {
	position: absolute;
	top: 100vh;
}
.navbar-brand h2 {
	margin-top: 0;
	font-weight: 300;
	color: white;
	padding-left: 10px;
	line-height: 26px;
}
.navbar-brand img {
	margin-right: 5px;
	height: 38px;
	margin-top: -1px;
}
.navbar-brand {
	padding: 8px 0 0;
}
.navbar-inverse .navbar-nav>li>a {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	color: white;
	font-weight: normal;
	text-transform: lowercase;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
	background: #be1e2d; /* if background-color is used, it will not override a background set by bootstrap */
	color: white;
}

/* ==========================================================================
	04. Story 
========================================================================== */
.light-wrapper {
	background-color: #fbfbfb;
}
.inner {
	padding-top: 75px;
	padding-bottom: 75px;
	position: relative;
	z-index: 1;
}
.section-title {
	font-family: 'Quicksand', 'Segoe UI', sans-serif;
	font-size: 36px;
	line-height: 40px;
	margin-bottom: 15px;
}
.main.lead {
	margin-bottom: 50px;
}
.lead {
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	margin-bottom: 15px;
	color: #2e2e2e;
	position: relative;
}
.lead:after {
	position: absolute;
	content: ' ';
	background-color: #be1e2d; /* muze rood */
	width: 80px;
	height: 3px;
	bottom: -22px;
	left: 50%;
	margin-left: -40px;
}
#story p {
	font-size: 18px;
}
.story-icons .col-wrapper {
	padding: 0 10px;
}
.story-icons .icon-wrapper {
	position: relative;
	height: 80px;
	margin-top: 40px;
}
.story-icons .icon-wrapper i {
	font-size: 70px;
}
i.icon:empty:before {
	content: "\f013";
}
.list {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
/* ==========================================================================
	05. parallax (concerning the screen-wide backgrounds)
========================================================================== */
.parallax,
.parallax2,
.parallax3 {
	color: #FFF;
}
/* + after */
.parallax {
	background: url('/graphics/BG_Code.png') fixed no-repeat center center;
	-moz-background-size: cover;
	background-size: cover;
}
/* + after */
.parallax3 {
	background: url('/graphics/bg-ligtbulb.jpg') fixed no-repeat center center;
	-moz-background-size: cover;
	background-size: cover;
	padding-bottom: 160px;
}
/* + after */
.parallax2 {
	background: #414042;
	-moz-background-size: cover;
	background-size: cover;
}
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6 {
	color: #fff;
}
.parallax a:link,
.parallax2 a:link {
	color: #A29A9B;
}
.parallax a:visited,
.parallax2 a:visited {
	color: #C7C2C3;
}
.parallax a:link:hover,
.parallax2 a:link:hover,
.parallax a:link:active,
.parallax2 a:link:active {
	color: #A29A9B;
}
/* ==========================================================================
	05.1. Products
========================================================================== */
.products {
	padding-top: 150px;
}
.products .col-wrapper {
	text-align: center;
}
.products .icon-border {
	display: inline-block;
}
.products h4 {
	color: white;
	font-size: 40px;
	margin-bottom: 20px;
}
.products p {
	color: white;
	margin: 1em;
	text-align: center;
	line-height: 1.5em;
	text-shadow: 0px 3px 3px #333;
	font-size: 18px;
}
.products a {
	color: white;
}
.products .icon-border a {
    min-height: 214px;
    display: block;
    border: 5px solid #fff;
    background: #e5d9be;
    background: -moz-linear-gradient(top, #e5d9be 2%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#e5d9be), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #e5d9be 2%,#ffffff 100%);
    background: -o-linear-gradient(top, #e5d9be 2%,#ffffff 100%);
    background: -ms-linear-gradient(top, #e5d9be 2%,#ffffff 100%);
    background: linear-gradient(to bottom, #e5d9be 2%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5d9be', endColorstr='#ffffff',GradientType=0 );
    height: 214px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: table-cell;
    width: 342px;
    vertical-align: middle;
	text-align: center;
}
/* ==========================================================================
	06. Crew 
========================================================================== */
.crew-description {
	text-align: center;
	margin: 0 auto;
}
.crew-name h1,
.crew-name h3 {
	text-shadow: none;
	color: #be1e2d; /* muze rood */
	text-align: center;
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 15px;
	font-size: 26px;
}
.crew ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.crew-avatar {
	border: 5px solid #dadada;
	display: block;
	margin: auto;
	margin-top: 40px;
	border-radius: 150px;
	width: 150px;
	height: 150px;
	transform: translate3d(0px, 0px, 0);
}

/* ==========================================================================
	07. Special
========================================================================== */
.special .lead {
	color: white;
}

/* ==========================================================================
	08. Contact 
========================================================================== */
.form-group {
	margin-bottom: 24px;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	cursor:not-allowed;
	background-color: transparent;
}
.form-control {
	height: 38px;
	font-size: 14px;
	vertical-align: middle;
	background-color: transparent;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
.form p {
	margin: 10px 0 30px 0;
}
.contactbtn {
	border-radius: 0;
}

/* ==========================================================================
	09. News / inspiration
========================================================================== */
.news {
	color: #414042;
	text-align: left;
	border-top: 1px solid #f1f1f1;
	position: relative;
}
.news .bg-overlay {
	background: rgba(255,255,255,0.5);
}
.news .section-title {
	text-shadow: #fff 0 0 5px;
}
.news .articles {
	display: flex;
	flex-flow: row wrap;
}
.news-item {
	height: auto;
	margin: 20px 0 0;
	text-align: right;
	overflow: hidden;
	flex: 1 0 0;
	width: 50%;
	min-width: 300px;
}
.news-item-details {
	text-align: left;
}
.news-item .news-item-details h3 {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 22px;
}
.news .news-item .news-item-details a.view-link {
	color: #414042;
	display: inline-block;
	margin-top: 5px;
	font-size: 12px;
	border-bottom: 1px dotted #414042;
	text-decoration: none;
}
.date-tag {
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	color: #fff;
	background-color: #be1e2d;
    float: left;
 	   margin-right: 0.5em;
    padding-top: 5px;
}
.date-tag-large {
	width: 80px;
	height: 80px;
}
.date-tag .article-day,
.date-tag .article-month,
.date-tag .article-year {
	display: block;
}
.article-day {
	font-size: 26px;
	font-weight: 700;
}
.article-month {
	font-style: italic;
	font-weight: 400;
}
.article-month,
.article-year {
	font-size: 16px;
}

/* ==========================================================================
	10. Footer 
========================================================================== */
.dark-wrapper {
	background-color: rgba(33,45,57,0.8);
	border-bottom: 25px solid #be1e2d;
	color: white;
	font-size: 12px;
	font-weight: bold;
}
#footer .inner {
	padding-top: 20px;
	padding-bottom: 20px
}
.social-bar {
	width: 100%;
	text-align: right;
}
.social-bar a {
	display: inline-block;
	margin-right: 11px;
	font-size: 2em;
	text-decoration: none;
	color: #fff;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: opacity 350ms ease;
	-moz-transition: opacity 350ms ease;
	-o-transition: opacity 350ms ease;
	transition: opacity 350ms ease;
}
.social-bar a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.social-bar li {
	display: inline-block;
}
/* ==========================================================================
	11. Responsive styles 
========================================================================== */

@media (max-width: 991px){ /* this is col-md or desktop width */
	#news .news-item .news-item-details {
		margin-left: 0;
	}

	#news .news-item a img {
		float: none;
		margin-bottom: 30px;
	}
}

@media (min-width:768px) { /* this is col-sm or tablet width */
	.navbar-nav {
		float: none !important;
		width: 100%;
		text-align: right;
		margin-left: 13px;
	}
	.navbar-nav>li {
		display: inline-block;
		float: none;
	}
	#logo {
	   background-color: #be1e2d; /* muze rood */
		padding: 0;
	}
	#logo img {
		max-height: 50px;
	}
}

@media (max-width:767px) { /* this is col-xs or telephone width */
	.container { /* overriding bootstrap paddings to make reading on telephone easier */
		padding-left: 25px;
		padding-right: 25px;
	}
	#header .banner h1 {
		font-size: 50px;
	}
	#header .subtitle h4 {
		font-size: 22px;
	}
	.social-bar {
		text-align: left;
		margin-top: 30px;
	}
	.news-item {
		clear: both;
		padding-top: 1em;
	}
	.news-item-date {
		min-width: 75px;
	}
	#navbar:target {
		display: block;
		visibility: visible;
	}
}

/* ipad */
@media screen and (device-width:768px) and (device-height:1024px ) {
	.parallax, .parallax2, .parallax3,
	#header {
		background-size: auto 100%;
		background-attachment: scroll;
	}
}
@media screen and (device-width:768px) and (device-height:1024px ) and (orientation:landscape) {
	.vedor-editor #header {
		height: 500px !important;
	}
}
@media screen and (device-width:768px) and (device-height:1024px ) and (orientation:portrait) {
	.vedor-editor #header {
		height: 800px !important;
	}
}
/* iphone */
@media screen and (device-width:375px) and (device-height:667px) {
	.parallax, .parallax2, .parallax3,
	#header {
		background-size: auto 100%;
		background-attachment: scroll;
	}
}
@media screen and (device-width:375px) and (device-height:667px) and (orientation:landscape) {
	.vedor-editor #header {
		height: 250px !important;
	}
}
@media screen and (device-width:375px) and (device-height:667px) and (orientation:portrait) {
	.vedor-editor #header {
		height: 450px !important;
	}
}
/* ========================================================================
	12. for the pages in the back
======================================================================= */
.page-summary {
	margin-top: 20px;
}
.page-content {
	margin-top: 20px;
}

/* Iframe for google maps */
address iframe {
	height: 220px;
	width: 100%;
	border: 0px;
}

/* ======= Croppie ======= */
div.cropper {
    overflow: hidden;
    position: relative;
}
.croppie-container {
    padding: 0;
}
.croppie-container .cr-viewport {
    border: 0;
}
body[data-simply-edit] [data-simply-cropper]:before {
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    content: "\f125";
    font-family: FontAwesome;
    z-index: 10;
    border-radius: 0px;
    background-color: white;
    border: 2px solid #999;
    border-radius: 40px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}
    
body:not([data-simply-edit]) [data-simply-cropper] img {
    z-index: 2;
}