/*On Customer's Request*/
/*
Theme Name: MeatKing
Version: 1.14.20
Author: ThemeWagon
TABLE OF CONTENTS
01 - General and Typography
02 - Header
03 - Navigation
04 - Services
05 - Parallax
06 - Food menu
07 - Special offers
08 - Reservation
09 - Chefs
10 - Footer
11 - Responsive styles
*/
/* ==========================================================================
01. General and Typography
========================================================================== */
body {
font-family:'Kreon',serif;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}
img {
max-height:100%;
max-width:100%;
}
section {
position:relative;
padding:0;
background:#F0A830;
color:#FFF;
text-align:center;
}
section::before,section::after {
position:absolute;
content: '';
}
/* Separators Styles */
.ss-style-top::before {
left:0;
width:100%;
height:30px;
-webkit-background-size:25px 100%;
-moz-background-size:25px 100%;
-o-background-size:25px 100%;
background-size:25px 100%;
top:0;
background-image:linear-gradient(315deg,#FFF 50%,transparent 50%),linear-gradient(45deg,#FFF 50%,transparent 50%);
margin-top:-30px;
z-index:100;
}
.ss-style-bottom::before {
left:0;
width:100%;
height:30px;
-webkit-background-size:25px 100%;
-moz-background-size:25px 100%;
-o-background-size:25px 100%;
background-size:25px 100%;
top:0;
background-image:linear-gradient(583deg,#FFF 50%,transparent 50%),linear-gradient(136deg,#FFF 50%,transparent 50%);
margin-top:0px;
z-index: 100;
}
/* ==========================================================================
02. Header
========================================================================== */
#header {
background-image:url(https://41.media.tumblr.com/82d8e8c4970c495ebba2ee285bb78a68/tumblr_nteg9aNhrp1ud7rr3o1_1280.jpg);
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
-moz-background-size:cover;
-o-background-size:/*@@prefixmycss->No equivalent*/;
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
position:relative;
}
.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;
}
#header .bottom {
color:white;
}
#header .center .slogan {
font-size:26px;
text-transform:uppercase;
}
#header .banner h1 {
font-size:100px;
color:white;
text-transform:uppercase;
font-weight:bold;
display:inline-block;
background:#ed0121;
padding:0px 18px;
}
#header .subtitle h4 {
display:inline-block;
background:white;
color:#ed0121;
font-size:38px;
padding:0px 15px;
}
#header .bottom {
text-align:center;
width:100%;
position:absolute;
bottom:30px;
}
#header .bottom a {
font-size:36px;
color:whitesmoke;
position:relative;
top:-5px;
}
.navbar-nav>li:nth-child(3) {
margin-right: 110px;
}
/* ==========================================================================
03. Navigation
========================================================================== */
#menu {
background:rgba(33,45,57,0.8);
margin-bottom:0;
}
.navbar-brand h2 {
margin-top:0;
font-weight:bold;
color:white;
}
.navbar-brand {
padding-top:8px;
padding-bottom:0;
}
/*logo*/
.navbar #logo {
margin-top: -15px;
background:rgba(33,45,57,0.0);
background-position: bottom;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
color: #fff;
}
.navbar #logo:hover {
background:#ed0121;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
.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:bold;
}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>.active>a {
background:#ed0121;
color:white;
text-shadow:none;
}
/* ==========================================================================
04. Services
========================================================================== */
.light-wrapper {
background:#fbfbfb;
}
.inner {
padding-top:100px;
padding-bottom:100px;
}
.section-title {
font-size:36px;
line-height:40px;
text-transform:uppercase;
margin-bottom:15px;
font-weight:600;
}
.main.lead {
margin-bottom:80px;
}
.lead {
font-size:17px;
line-height:24px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:15px;
color:#2e2e2e;
position:relative;
}
.lead:after {
position:absolute;
content:' ';
background:#ed0121;
width:80px;
height:3px;
bottom:-22px;
left:50%;
margin-left:-40px;
}
.story .col-wrapper {
padding:0 10px;
}
.story .icon-wrapper {
position:relative;
height:80px;
margin-top: 40px;
}
/* ==========================================================================
05. parallax
========================================================================== */
.parallax {
background: rgba(0,0,0,0.1);
}
.parallax { background:url(https://40.media.tumblr.com/70854822907e1f1fd71d911c16b3086b/tumblr_ntds0hCPzI1ud7rr3o1_1280.jpg) fixed no-repeat center center;
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
-moz-background-size:cover;
-o-background-size:/*@@prefixmycss->No equivalent*/;
background-size:cover;
position:relative;
color:#FFF;
}
.parallax .inner {
padding-top:130px;
padding-bottom:130px;
}
.parallax.parallax2 {
background-image:url(https://36.media.tumblr.com/6f9bcb46c216fcd2e8e1129610b5ed7b/tumblr_nte8zuS6rv1ud7rr3o1_1280.jpg);
}
.bm10 {
margin-bottom:10px !important;
}
.facts h4 {
font-size:40px;
margin-bottom:20px;
}
.parallax h1,.parallax h2,.parallax h3,.parallax h4,.parallax h5,.parallax h6 {
color:#fff;
}
.facts p {
font-size:16px;
text-transform:uppercase;
margin:0;
}
.story .icon-wrapper i {
font-size:70px;
}
.facts i {
font-size: 70px;
}
/* ==========================================================================
06. Food menu
========================================================================== */
.menu-items {
text-align:center;
margin:0 auto;
}
.menu-titles h1 {
text-shadow:none;
color:#ed0121;
text-align:center;
margin:0 auto;
padding-top:30px;
padding-bottom:15px;
}
#food-menu ul {
margin:0;
padding:0;
list-style:none;
}
.menu-images img {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid #dadada;
display:block;
margin:auto;
margin-top: 40px;
height: 200px;
}
/* ==========================================================================
07. Special offers
========================================================================== */
/*Gets the overlay*/
.bg-overlay-white {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.2);
z-index:0;
}
.hot-tag {
position:absolute;
bottom:0;
right:0;
z-index:15;
display:inline-block;
width:80px;
height:80px;
line-height:90px;
text-align:center;
font-weight:700;
color:#fff;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}
.br-red {
background-color:#ed0121 !important;
}
.br-lblue {
background-color:#32c8de !important;
}
.br-green {
background-color:#51d466 !important;
}
.pricing {
border-top:1px solid #f1f1f1;
}
/*gets tastyboxbites h2*/
.pricing h2 {
color: #000;
}
.pricing .pricing-item {
position:relative;
margin-top:40px;
margin-bottom:10px;
}
.pricing .pricing-item img {
max-width:250px;
float:left;
}
/*Gets a, p elements*/
.pricing-item-details a,.pricing-item-details p,.pricing .lead {
color:#000;
font-weight:bold;
}
.pricing .pricing-item .pricing-item-details {
margin-left:265px;
}
.pricing .pricing-item .pricing-item-details h3 {
margin-top:0;
margin-bottom:8px;
}
.pricing .pricing-item .pricing-item-details p {
color: #000;
}
.pricing .pricing-item .pricing-item-details a.btn {
margin-top:10px;
}
.pricing .pricing-item .pricing-item-details a.view-link {
display:inline-block;
margin-top:7px;
font-size:12px;
border-bottom:1px dotted #aeaeae;
}
.pricing .pricing-item .hot-tag {
top:0;
left:0;
margin-top:-15px;
margin-left:-15px;
width:55px;
height:55px;
line-height:50px;
font-size:23px;
font-weight:700;
border: 4px solid white;
}
/* ==========================================================================
08. Reservation
========================================================================== */
.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;
-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;
}
/* ==========================================================================
09. Chefs
========================================================================== */
.chefs img {
border:5px solid #e7e7e7;
width: 80%;
}
/* ==========================================================================
10. Footer
========================================================================== */
.dark-wrapper {
background:#ed0121;
color:white;
font-size:20px;
font-weight:bold;
}
.dark-wrapper .ss-style-top::before {
background-image:linear-gradient(315deg,#ed0121 50%,transparent 50%),linear-gradient(45deg,#ed0121 50%,transparent 50%);
}
.social-bar {
width:100%;
text-align:right;
}
.social-bar a {
display:inline-block;
margin-right:11px;
font-size:2.15em;
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);
}
.themeBy{
color: #ed0121;
background: white;
}
/* ==========================================================================
11. Responsive styles
========================================================================== */
@media (max-width: 991px){
.pricing .pricing-item .pricing-item-details {
margin-left: 0;
}
.pricing .pricing-item a img {
float: none;
margin-bottom: 30px;
}
.menu-titles h1 {
font-size: 25px;
}
}
@media (min-width:768px) {
.navbar-nav {
float:none !important;
width:100%;
text-align:center;
margin-left:9px;
}
.navbar-nav>li {
display:inline-block;
float:none;
}
#logo {
position:absolute;
display:block !important;
width:110px;
left:50%;
margin-left:-55px;
background:black;
-webkit-border-radius:0 0 100% 100%;
-moz-border-radius:0 0 100% 100%;
border-radius:0 0 100% 100%;
padding: 12px;
}
}
@media (max-width:767px) {
#header .banner h1 {
font-size:60px;
}
#header .subtitle h4 {
font-size: 22px;
}
.social-bar {
text-align: left;
margin-top: 30px;
}
}
!
