505 lines
11 KiB
CSS
505 lines
11 KiB
CSS
/*
|
|
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(../img/principal_inicio.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.2);
|
|
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:#fde827ee;
|
|
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;
|
|
}
|
|
.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:url(../img/parallax1.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(../img/parallax2.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;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
07. Special offers
|
|
========================================================================== */
|
|
.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;
|
|
}
|
|
.pricing .pricing-item {
|
|
position:relative;
|
|
margin-top:40px;
|
|
margin-bottom:10px;
|
|
}
|
|
.pricing .pricing-item img {
|
|
max-width:250px;
|
|
float:left;
|
|
}
|
|
.pricing-item-details a,.pricing-item-details p,.pricing .lead {
|
|
color:white;
|
|
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;
|
|
font-size:22px;
|
|
}
|
|
.pricing .pricing-item .pricing-item-details p {
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
} |