/* Template Name: Fable - Restaurant Site Template Author URI: http://themeforest.net/user/bogdan_09 Author Name: Bogdan Version: 1.0 */ /* --- TABLE OF CONTENT 01. GENERAL LAYOUT 02. HEADER 03. FOOTER 1. Footer General Styles 2. Footer Social Icons 3. Footer Gallery 4. Footer List 04. HERO SECTIONS 05. MENU 06. BLOG 07. REGISTER 08. CONTACT 09. MOBILE DEVICES --- */ /* ========================================================== */ /* 01. GENERAL LAYOUT */ /* ========================================================== */ ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; color:#777; font-size: 14px; line-height:24px; margin-bottom:20px; } ul li, ol li{ font-size: 14px; line-height: 28px; } ul li i{ vertical-align: middle; } ul.features-list li{ float:left; font-size:14px; line-height:24px; margin:10px 0; } ul.features-list li img{ max-width:55px; margin-right:20px; float:left; } p { font-size: 14px; line-height: 24px; font-weight: 400; color: #777; margin-bottom:25px; } p.hero-text{ position:relative; text-align:center; font-size: 18px; line-height: 30px; padding:30px 0; color:#eee; } p.hero-text:before{ position: absolute; content: ""; background-color: #F2B410; height: 3px; width: 50px; top: 0px; left:50%; margin-left:-25px; } a, a:hover, a:focus { text-decoration: none; outline: 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2; letter-spacing:2px; margin-bottom:20px; color: #454545; } h1 { font-size: 42px; } h2 { font-size: 34px; } h3 { font-size: 28px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } h2.section-title{ color: #252525; text-transform:uppercase; font-size: 42px; line-height: 50px; margin: 0 0 20px 0; } h3.section-title{ color: #252525; text-transform:uppercase; font-size: 36px; line-height: 42px; letter-spacing:2px; margin: 0 0 30px 0; } h2.section-title.white, h3.section-title.white{ color:#fff; } h2.section-title.small-margin, h3.section-title.small-margin{ margin: 0 0 20px 0; } h2.section-title.no-margin, h3.section-title.no-margin{ margin-bottom:0; } span.comic-text{ font-size:80px; line-height:60px; color:#F2B410; font-family: 'Tangerine', cursive; } p.section-subtitle{ font-size:16px!important; } p.section-subtitle.grey{ color:#bbb; } .separator_wrapper, .separator_wrapper_white { margin-bottom:10px; } .separator_wrapper::after, .separator_wrapper::before { background-color: #E74C3C; display: inline-block; vertical-align: middle; content: ""; width: 60px; height: 1px; margin-top: -6px; } .separator_wrapper_white::after, .separator_wrapper_white::before { background-color: #ddd; display: inline-block; vertical-align: middle; content: ""; width: 60px; height: 1px; margin-top: -6px; } h3.medium-text { font-size: 32px; margin-top:10px; } h3.large-text { font-size: 48px; line-height:1.1; font-weight:400; } iframe{ max-width:100%; border:none; } .width-100 { width: 100%; } .medium { font-weight: 400; } .bold { font-weight: 700; } .lyla { color: #9E5FBA; } .green { color: #16A085; } .blue { color: #3498db; } .red{ color:#E74C3C; } .grey{ color:#ddd; } .white{ color:#fff; } .section-white{ background-color:#fff; padding:90px 0; } .section-grey{ background-color: #f5f5f5; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; padding:90px 0; } .section-grey.small-padding, .section-white.small-padding{ padding:50px 0; } .section-grey.no-padding-bottom, .section-white.no-padding-bottom, .section-dark.no-padding-bottom, .section-blue.no-padding-bottom{ padding:90px 0 0 0; } .section-grey.small-padding-bottom, .section-white.small-padding-bottom, .section-dark.small-padding-bottom, .section-blue.small-padding-bottom{ padding:90px 0 60px 0; } .section-grey.no-padding, .section-white.no-padding, .section-dark.no-padding, .section-blue.no-padding{ padding:0; } .section-white.about-padding{ padding:85px 0 100px 0; } .section-dark.portfolio-padding{ padding:60px 0 75px 0; } .section-dark{ background-color:#393f43; padding:90px 0; } .section-blue{ background-color:#34b1c4; padding:90px 0; } /* margin and padding classes */ .margin-right-25 { margin-right: 25px !important; } .margin-top-110 { margin-top: 110px !important; } .margin-top-100 { margin-top: 100px !important; } .margin-top-90 { margin-top: 90px !important; } .margin-top-80 { margin-top: 80px !important; } .margin-top-70 { margin-top: 70px !important; } .margin-top-60 { margin-top: 60px !important; } .margin-top-50 { margin-top: 50px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-top-5 { margin-top: 5px !important; } .margin-top-0 { margin-top: 0px !important; } .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-50 { margin-bottom: 50px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-70 { margin-bottom: 70px !important; } .margin-bottom-80 { margin-bottom: 80px !important; } .margin-bottom-90 { margin-bottom: 90px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .margin-bottom-110 { margin-bottom: 110px !important; } .margin-bottom-120 { margin-bottom: 120px !important; } .margin-bottom-130 { margin-bottom: 120px !important; } .margin-bottom-140 { margin-bottom: 140px !important; } .padding-top-0 { padding-top: 0px !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-40 { padding-top: 40px !important; } .padding-top-50 { padding-top: 50px !important; } .padding-top-60 { padding-top: 60px !important; } .padding-top-70 { padding-top: 70px !important; } .padding-top-80 { padding-top: 80px !important; } .padding-top-90 { padding-top: 90px !important; } .padding-top-100 { padding-top: 100px !important; } .padding-top-110 { padding-top: 110px !important; } .padding-bottom-110 { padding-bottom: 110px !important; } .padding-bottom-100 { padding-bottom: 100px !important; } .padding-bottom-90 { padding-bottom: 90px !important; } .padding-bottom-80 { padding-bottom: 80px !important; } .padding-bottom-70 { padding-bottom: 70px !important; } .padding-bottom-60 { padding-bottom: 60px !important; } .padding-bottom-50 { padding-bottom: 50px !important; } .padding-bottom-40 { padding-bottom: 30px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-0 { padding-bottom: 0px !important; } /* carousel */ .carousel.carousel1 .carousel-indicators { position: inherit; right: 0px; } .carousel.carousel1 .item .lead { font-size: 20px; } .carousel.carousel1 .carousel-indicators li { background-color: transparent; border:2px solid #F2B410; width: 14px; height: 14px; } .carousel.carousel1 .carousel-indicators li.active { background-color: #F2B410; } .carousel.carousel3 .carousel-indicators { position: inherit; right: 0px; } .carousel.carousel3 .item .lead { font-size: 20px; } .carousel.carousel3 .carousel-indicators li { background-color: #f9f9f9; border:3px solid #e0e0e0; width: 14px; height: 14px; } .carousel.carousel3 .carousel-indicators li.active { background-color: #e0e0e0; } .carousel.carousel-fade .item { -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; opacity:0; } .carousel.carousel-fade .active.item { opacity:1; } .carousel.carousel-fade .active.left, .carousel.carousel-fade .active.right { left: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .carousel.carousel-fade .next, .carousel.carousel-fade .prev { left: 0; z-index: 1; } .carousel.carousel-fade .carousel-control { z-index: 3; } .carousel-indicators { bottom: auto; left: auto; margin: 0; right: 16px; top: 16px; width: auto; line-height: 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .carousel-indicators li { vertical-align: top; border: none; width: 8px; height: 8px; margin: 0 0 0 6px; background-color: #2c3e50; background-color: rgba(44, 62, 80, 0.5); } .carousel-indicators li.active { background-color: #fff; width: 8px; height: 8px; margin: 0 0 0 6px; } /* end carousel */ /* ----- Photos Hover Animations ----- */ .popup-wrapper{ display:block; position:relative; overflow:hidden;} .popup-gallery{ display:inline-block; position:relative; } .popup-gallery::after { display: block; content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid rgba(255, 255, 255, 0.7); } .first-gallery{ margin-bottom:15px; } .popup-gallery img { z-index:10; width: 100%; height: auto; } .popup-gallery:hover img { opacity: 0.25; } .popup-gallery a span.eye-wrapper, .popup-gallery a span.eye-wrapper2 { background-color:rgba(0, 0, 0, 0.4); position: absolute; display: block; overflow:hidden; z-index: 2; height:100%!important; top: 0%; margin-top: 0px; left: 0%; right: 0%; color:#fff; text-align: center; font-weight:300; opacity: 0; } .popup-gallery a span.eye-wrapper i.eye-icon, .popup-gallery a span.eye-wrapper2 i.eye-icon{ position: absolute; display: inline-block; font-size:48px; z-index: 3; top: 50%!important; margin-top: -24px!important; left: 0%; right: 0%; } .popup-gallery a:hover span{ opacity: 1; } .popup-gallery img, .popup-gallery a span { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .image-wrapper { display: inline-block; position: relative; } .image-wrapper:before { display: block; content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid rgba(255, 255, 255, 0.7); } /* ----- Instagram Feed ----- */ #instafeed { position:relative; display:block; overflow:hidden; } #instafeed a{ position:relative; display:inline-block; width:12.5%; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #instafeed a img{ display:inline-block; width:100%; } #instafeed a:hover:before { background-color: rgba(0,0,0, 0.3); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #instafeed a:before { position: absolute; content: ""; height: 100%; width: 100%; left: 0; background-color: rgba(0,0,0, 0.6); z-index: 1; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .instagram-text{ position:absolute; z-index:100; top:158px; left:50%; margin-left:-158px; width:100%; max-width:315px; padding:26px 0 29px 0; text-align:center; background-color:#000; } .instagram-text a.instagram-icon{ color:#fff; font-size:32px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .instagram-text a.instagram-icon:hover{ color:#f8bf2c; } .instagram-text p{ color:#fff; margin:10px 0 0 0; } /* ----- Buttons ----- */ .btn, btn:hover{ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn-margin { display: inline-block; margin: 10px 10px; } .btn-white-transparent { color: #fff; background-color: transparent; border-color: #fff; font-family: 'Montserrat', sans-serif; font-weight:700; padding:16px 32px; font-size:13px; letter-spacing:2px; } .btn-white-transparent:hover, .btn-white-transparent:focus, .btn-white-transparent:active, .btn-white-transparent.active, .open .dropdown-toggle.btn-white-transparent { color: #F2B410; background-color: #fff; border-color: #fff; } .btn-yellow, .btn-yellow-small, .btn-yellow-x-small { position:relative; color: #fff; background-color: #F2B410; border-color: #F2B410; font-family: 'Montserrat', sans-serif; font-weight:700; padding:18px 32px; font-size:13px; line-height:20px; letter-spacing:2px; } .btn-yellow-small { padding:14px 28px; font-size:12px; line-height:18px; letter-spacing:1px; } .btn-yellow-x-small { color: #fff!important; padding:12px 26px; font-size:12px; line-height:18px; letter-spacing:1px; } .btn-yellow:before, .btn-yellow-small:before { display: block; content: ''; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border: 1px solid #fff; } .btn-yellow-x-small:before { display: block; content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border: 1px solid #fff; } .btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active, .btn-yellow.active, .open .dropdown-toggle.btn-yellow, .btn-yellow-small:hover, .btn-yellow-small:focus, .btn-yellow-small:active, .btn-yellow-small.active, .open .dropdown-toggle.btn-yellow-small, .btn-yellow-x-small:hover, .btn-yellow-x-small:focus, .btn-yellow-x-small:active, .btn-yellow-x-small.active, .open .dropdown-toggle.btn-yellow-x-small { color:#fff; background-color: #F39C12; } /* ----- Page Loader ----- */ #loader{ background:#eeece3; height: 100%; width: 100%; position: fixed; z-index: 90000; left: 0%; top: 0%; } .sk-three-bounce { position:absolute; top:50%; margin-top:-10px; left:50%; margin-left:-40px; width: 80px; text-align: center; } .sk-three-bounce .sk-child { width: 20px; height: 20px; background-color: #cf564b; border-radius: 100%; display: inline-block; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .sk-three-bounce .sk-bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* ========================================================== */ /* 02. HEADER */ /* ========================================================== */ #navbar-collapse-02 li.selected a{ color: #F2B410!important; } #navbar-collapse-02 .current a { color: #F2B410!important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-fixed-top { background-color: transparent!important;transition: background-color 1s ease 0s;} .navbar-fixed-top.opaque { background-color: rgba(17, 17, 17, 0.95)!important;transition: background-color 1s ease 0s;} .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-default .navbar-nav > li > a.purchase{ position:relative; color:#454545; background-color:#f8bf2c; border:2px solid #f8bf2c; margin-left:15px; margin-right:15px; padding:8px 20px; font-weight:700!important; text-transform:none; webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; } .navbar-default .navbar-nav > li > a.purchase:hover{ color:#fff!important; background-color: transparent; border:2px solid #fff; } .navbar-default .navbar-nav > li.social > a { padding-left:10px; padding-right:10px; } .navbar-default .navbar-nav > li.social > a.first { border-left:1px solid rgba(255, 255, 255, 0.7); padding-left:30px; margin-left:15px; } .navbar-default .navbar-nav > li.social > a.last { padding-right:15px; } .navbar-default .navbar-nav > li.social > a i{ font-size:18px; line-height: 22px!important; color: #fff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-default .navbar-nav > li.social > a:hover i{ color: #f8bf2c; } /* ========================================================== */ /* 03. FOOTER */ /* ========================================================== */ /* ----- 1. Footer General Styles ----- */ .footer{ width:100%; position:relative; background: url(../images/footer-bg.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; margin: 0 auto; } .footer-top{ padding:65px 0 15px 0; border-bottom:2px dotted #999; } .footer-bottom{ padding:30px 0 20px 0; } a.top-scroll { position:relative; padding:7px 14px; font-size:20px; line-height:20px; color:#fff!important; background-color: #F2B410; border-color: #F2B410; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } a.top-scroll:before { display: block; content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border: 1px solid #fff; } a.top-scroll:hover { background-color: #F39C12; } .footer h4{ font-size:16px; position:relative; padding-bottom:20px; color: #fff; } .footer h4::after{ position: absolute; content: ""; background-color: #F2B410; height: 3px; width: 40px; bottom: -1px; left: 0; } .footer p, .footer a { color: #ddd; } .footer-bottom p { color: #999; } .footer-bottom p a { font-size: 16px; color: #999; text-decoration:underline; } .footer p a:hover { color: #F2B410; } p.contact_info{ margin-bottom:8px; font-size:14px; line-height:20px; } p.contact_info a{ margin-bottom:8px; font-size:14px; line-height:20px; } p.contact_info i{ font-size:18px; padding-right:5px; vertical-align: middle; } /* ----- 2. Footer Social Icons ----- */ ul.footer_social{ display:block; float:right; margin:0; } ul.footer_social li{ display:inline-block; margin: 0 0 10px 10px; color: #999; line-height:100%!important; } ul.footer_social li a i { display: inline-block; padding:0; font-size:22px!important; line-height: 22px!important; color: #999; transition: all .5s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } ul.footer_social li a i:hover { transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; color:#F2B410; } /* ----- 3. Footer Gallery ----- */ ul.footer-gallery{ position:relative; display:block; margin:0; } ul.footer-gallery li{ display:inline-block; border:5px solid #292929; margin:5px 2px 2px 2px; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } ul.footer-gallery li.popup-gallery::after{ display:none; } ul.footer-gallery li a img{ position:relative; display:inline-block; width:71px; } /* ----- 4. Footer List ----- */ ul.footer-list{ display:block; margin:0; } ul.footer-list li { padding:5px 0; border-bottom:1px solid #999; } ul.footer-list li.first { padding-top: 0; } ul.footer-list li a:hover{ color:#F2B410; } /* ========================================================== */ /* 04. HERO SECTIONS */ /* ========================================================== */ .menu-hero-section{ width:100%; position:relative; background: url(../images/bg3.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .menu-hero-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .about-hero-section{ width:100%; position:relative; background: url(../images/bg0.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .about-hero-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .gallery-hero-section{ width:100%; position:relative; background: url(../images/bg5.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .gallery-hero-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .reservation-hero-section{ width:100%; position:relative; background: url(../images/bg6.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .reservation-hero-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .hero-gallery-section{ width:100%; position:relative; background: url(../images/bg10.html) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .hero-gallery-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .contact-hero-section{ width:100%; position:relative; background: url(../images/bg6.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 210px 0 90px 0; } .contact-hero-section .image-overlay{ background: rgba(17, 17, 17, 0.75); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .contact2-hero-section{ width:100%; position:relative; background: url(../images/content.jpg) 50% top no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 90px 0 90px 0; } .contact2-hero-section .image-overlay{ background: rgba(255, 255, 255, 0.95); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .image-section{ width:100%; position:relative; background: url(../images/bg4.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; margin: 0 auto; padding:190px 0 140px 0; } .image-section .image-overlay{ background: rgba(34, 34, 34, 0.40); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .image-section-inside{ position:relative; z-index:100; } /* ========================================================== */ /* 05. MENU */ /* ========================================================== */ /* ----- 1. Featured Menu ----- */ .featured-menu-section{ width:100%; position:relative; background: url(../images/a3.jpg) 50% 0 no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 120px 0 80px 0; } .featured-menu-section .image-overlay{ background: rgba(0, 0, 0, 0.50); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } /* ----- 2. Menu Homepage ----- */ .home-menu-section{ width:100%; position:relative; background: url(../images/bg8.jpg) 50% 0 no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 120px 0; } .home-menu-section .image-overlay{ background: rgba(0, 0, 0, 0.40); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .menu-wrapper { } .home-menu-list { display:block; clear:both; } .home-menu-list h5 { font-size: 18px; line-height: 24px; vertical-align: bottom; font-family: 'Lora', serif; font-weight: 700; color: #FFF; float: left; letter-spacing: 2px; max-width: 70%; padding-right:10px; margin-bottom:10px; } .home-menu-list p.price{ color: #F2B410; font-size: 18px; line-height: 30px; font-weight:700; display: inline-block; vertical-align: bottom; float: right; padding-top: 8px; padding-left:10px; margin-bottom:10px; } .dot-line{ border-bottom:2px dotted #fff; height: 29px; overflow: hidden; display: block; } p.home-menu-ingredients{ display:block; clear:both; width:100%; color:#eee; } /* ----- 3. Menu First Version ----- */ .first-menu-section{ width:100%; position:relative; background: url(../images/a7.html) 50% 0 no-repeat fixed; background-size: cover; color: white; margin: 0 auto; padding: 120px 0; } .first-menu-section .image-overlay{ background: rgba(0, 0, 0, 0.60); position: absolute; z-index:10; top: 0; bottom: 0; right: 0; left: 0; } .menu-wrapper { display:inline-block; padding-right:20px; margin-bottom:10px; } h2.menu-section-title{ font-size:28px; position:relative; margin-bottom:50px; margin-right:40px; padding-bottom:20px; border-bottom:1px solid #ddd; } h2.menu-section-title::after{ position: absolute; content: ""; background-color: #f8c12c; height: 3px; width: 50px; bottom: -1px; left: 0; } .menu-list h5 { font-size: 18px; line-height: 22px; vertical-align: bottom; font-family: 'Lora', serif; font-weight: 700; float: left; letter-spacing: 2px; max-width: 70%; padding-right:12px; margin:5px 0; } .menu-list p.price{ color: #F2B410; font-size: 18px; line-height: 18px; font-weight:700; display: inline-block; vertical-align: bottom; float: right; padding-top: 7px; padding-left:12px; margin-bottom:5px; } .menu-dot-line{ border-bottom:2px dotted #F2B410; height: 22px; overflow: hidden; display: block; } p.menu-ingredients{ float:right; } .menu-image { float: left; width: 18% !important; } .menu-image a img{ width: 80px; height: 65px; object-fit: cover; } .menu-list h5 { white-space: nowrap; } .menu-wrapper { width: 100%; } .menu-description { float: left; padding-left: 3%; width: 82%; } .menu-list h5 { float: none; max-width: 100%; padding-right: 0px; } .menu-list { display:block; clear:both; } /* ========================================================== */ /* 06. BLOG */ /* ========================================================== */ .blog-item{ position:relative; text-align:center; margin-bottom:30px; background-color: #fff; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } .blog-item-pic { display: inline-block; position: relative; } .blog-item-pic:before { display: block; content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid rgba(255, 255, 255, 0.7); } .blog-item-inner{ padding:1px 25px 20px 25px; } .blog-item-inner p{ margin:10px 0 20px 0; } h3.blog-title{ margin-top:20px; margin-bottom:1px; } h3.blog-title a{ font-family: 'Montserrat', sans-serif; font-weight: 700; font-size:21px; color:#252525; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } h3.blog-title a:hover{ color:#F2B410; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } /* ========================================================== */ /* 07. REGISTER */ /* ========================================================== */ .register-inner{ padding:40px 0; } #register-form{ padding:25px 0 20px 0; } input.register-input{ width:100%; height:52px; padding-left:4%; padding-right:4%; margin-bottom:20px; color: #999; border: 1px solid #e1e1e1; background-color: transparent; font-size:14px; } select.register-input{ width:100%; height:52px; padding-left:4%; padding-right:4%; margin-bottom:20px; color: #999; border: 1px solid #e8e8e8; background-color: transparent; font-size:14px; } input.register-submit{ position:relative; display: inline-block; color: #fff; border: 1px solid #F2B410; background-color: #F2B410; cursor: pointer; font-size: 14px; font-weight:700; width:100%; padding: 16px 0; text-transform: uppercase; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.register-submit:hover{ color:#fff; background-color: #F39C12; border:1px solid #F39C12; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.white-input::-webkit-input-placeholder, select.white-input::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } input.white-input:-moz-placeholder, select.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; } input.white-input::-moz-placeholder, select.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999; } input.white-input:-ms-input-placeholder, select.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#999; } #register-form input.register-input:focus, #register-form select.register-input:focus { border-color:#e8e8e8; outline: none; } p.register_success_box{ text-align:center; display:inline-block; color:#454545; font-size:16px; font-style:italic; margin:20px 0 30px 0; padding:20px 20px; border:1px solid #fff; webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ========================================================== */ /* 08. CONTACT */ /* ========================================================== */ #contact-form{ margin:0 auto; width:100%; max-width:960px; text-align:center; padding:30px 0 10px 0; } input.contact-input{ width:100%; height:55px; padding-left:2%; padding-right:2%; margin-bottom:20px; color: #656565; border: 2px solid #454545; background-color: transparent; font-size:14px; float:left; } textarea{ height:205px; margin-bottom:20px; width:100%; padding-left:2%; padding-right:2%; padding-top:10px; padding-bottom:10px; color: #656565; border: 2px solid #454545; background-color: transparent; font-size:14px; float:left; } input.contact-submit{ color: #fff; border: 2px solid #F2B410; background-color: #F2B410; cursor: pointer; display: inline-block; font-size: 14px; font-weight:700; margin-top:10px; padding: 16px 30px; position: relative; text-transform: uppercase; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.contact-submit:hover{ color:#F2B410; background-color: transparent; border:2px solid #F2B410; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.white-input::-webkit-input-placeholder, textarea.white-input::-webkit-input-placeholder { /* WebKit browsers */ color:#656565; } input.white-input:-moz-placeholder, textarea.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#656565; } input.white-input::-moz-placeholder, textarea.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#656565; } input.white-input:-ms-input-placeholder, textarea.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#656565; } #contact-form input.contact-input:focus, #contact-form textarea.contact-commnent:focus { border-color:#F2B410; outline: none; } p.contact_success_box{ text-align:center; display:inline-block; color:#454545; font-size:20px; font-style:italic; padding:20px 20px; } .wow:first-child { visibility: hidden; } /* ========================================================== */ /* Background Images - max-width: 1024px */ /* ========================================================== */ @media only screen and (max-width: 1024px) { .image-section, .featured-menu-section, .home-menu-section, .first-menu-section, .menu-hero-section, .about-hero-section, .gallery-hero-section, .reservation-hero-section, .hero-gallery-section, .contact-hero-section, .contact2-hero-section, .footer { background-attachment: scroll!important; background-size: cover!important; background-repeat: no-repeat!important; } } /* ========================================================== */ /* 19. MOBILE DEVICES */ /* ========================================================== */ @media handheld, only screen and (max-width: 800px) { .footer{ text-align:center; } .footer h4::after{ left: 50%; margin-left:-20px; } ul.footer_social{ float:none; margin-top:25px; } .instagram-text{ display:none; } } /* Theme Name: QuickFood Theme URI: http://www.ansonika.com/quickfood/ Author: Ansonika Author URI: http://themeforest.net/user/Ansonika/ [Table of contents] 1. SITE STRUCTURE and TYPOGRAPHY - 1.1 Typography - 1.2 Buttons - 1.3 Structure 2. CONTENT - 2.1 Home all versions - 2.2 List page - 2.3 Restaurant menu - 2.4 Order process - 2.5 Restaurant detail page - 2.6 About - 2.7 Contacts 3. COMMON 3.1 Preloader 3.2 Parallax bg 3.4 Login/Register modals 3.5 Spacing 3.6 Map 3.7 Password strength 3.8 Input form style 3.9 Collapse 3.10 Tabs 3.11 Tooltips 3.12 Blockquote 4. UPDATES 4.1 Strip list home 4.2 Grid list 4.3 General 4.4 Map listing 4.5 Search modal 4.6 Restaurant menu 4.7 Work with us section /*============================================================================================*/ /* 1. SITE STRUCTURE and TYPOGRAPHY */ /*============================================================================================*/ /*Google Fonts*/ @import url('https://fonts.googleapis.com/css?family=Lobster&display=swap'); /* font-family: 'Lobster', cursive; */ /*-------- Allert for old browsers IE8 and below --------*/ .chromeframe{background:#ddd;color:#000;padding: 0.2em;position: fixed; top: 0; left: 0; text-align: center; z-index:9999; width: 100%;} .chromeframe a{color:#ed1c24;} /*-------- 1.1 Typography --------*/ html * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} body {font-size:13px; line-height:1.4; color:#555;background-color:#f5f5f5; font-family:"Lato","Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, label {color:#333;} h1, h2 {font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;} /** Layes slider typography **/ h3.slide_typo {font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;letter-spacing:-2px; font-size: 60px; white-space:nowrap; color:#fff !important; font-weight:300;} h3 .slide_typo strong {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;} .slide_typo_2{color:#fff; font-size:18px; white-space:nowrap} #search-heading{ font-family: 'Lobster', cursive; } .box_style_2 h2.inner { background-color:#09c94d; color:#fff; margin:-25px -25px 25px -25px; padding:12px 15px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:22px; font-weight:600; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .main_title{ text-align:center; margin-bottom:45px; } .main_title h2{ font-size:46px; letter-spacing:-1px; font-weight:300; margin-bottom:0;} .main_title p{ font-size:18px; color:#555; line-height:1.2; margin-bottom:30px; font-weight:300;} .feature h3{margin-top:0;} .feature h3 span{color:#ec008c;} /*General links color*/ a {color:#ec008c;text-decoration: none;-webkit-transition: all 0.2s ease;transition: all 0.2s ease; outline:none;} a:hover,a:focus {color: #111;text-decoration: none; outline:none;} hr.more_margin { margin-top: 60px; margin-bottom:40px; border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #fff; } hr.styled { border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #fff; } /*-------- 1.2 Buttons --------*/ a.btn_1, .btn_1{ border: none; font-family: inherit; font-size: inherit; color:#fff; background: #09c94d; cursor: pointer; padding: 10px 20px; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:600; display:inline-block; text-align:center; } a.btn_1:hover, .btn_1:hover{ background:#333; } a.btn_full, .btn_full{ border: none; font-family: inherit; font-size: inherit; color:#fff; width:100%; background: #85c99d; cursor: pointer; padding: 12px 20px; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:bold; display:block; text-align:center; margin-bottom:5px; } a.btn_full:hover, .btn_full:hover{ background:#333; } a.btn_1.medium, .btn_1.medium{ padding: 10px 20px; font-size:14px; text-transform:none; } a.btn_map{ border: none; font-family: inherit; font-size: inherit; color:#fff; background:#555; cursor: pointer; padding: 10px 20px; display: inline-block; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:bold; display:block; text-align:center; margin-bottom:25px; } a.btn_map:hover{ background:#333; } a.btn_side{ border: none; font-family: inherit; font-size: inherit; color:#fff; background:#555; cursor: pointer; padding: 10px 20px; display: inline-block; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:bold; display:block; text-align:center; margin-bottom:25px; } a.btn_side:hover{ background:#333; color:#fff; } a.btn_full_outline, .btn_full_outline{ border: none; font-family: inherit; font-size: inherit; color:#85c99d; background:none; width:100%; border:2px solid #85c99d; cursor: pointer; padding: 10px 20px; display: inline-block; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:bold; display:block; text-align:center; } a.btn_full_outline:hover, .btn_full_outline:hover{ border:2px solid #333; color:#333; } a.button_intro, .button_intro { border: none; font-weight:normal; font-style:normal; color:#fff !important; background: #85c99d; cursor: pointer; padding: 12px 25px; display: inline-block; outline: none; font-size:13px; text-align:center; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; min-width:110px; font-weight:bold; } a.button_intro:hover, .button_intro:hover { background: #fff; color:#85c99d !important; } a.button_intro.outilne, .button_intro.outline { border: 2px solid #fff; color:#fff; background: none; padding: 10px 23px; } #cart_box a.btn_full, #cart_box .btn_full{ background: #ec008c; font-size:15px; } #cart_box a.btn_full:hover, #cart_box .btn_full:hover{ background: #333; } #cart_box a.btn_full_outline{ color:#ec008c; background:none; border:2px solid #ec008c; } #cart_box a.btn_full_outline:hover{ color:#333; background:none; border:2px solid #333; } /*-------- 1.3 Structure --------*/ /* Header */ header{ width:100%; position:fixed; padding:2px 0px; top:0; left:0; z-index:99999; } header.sticky{ background-color: #09c94d; -webkit-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.41); -moz-box-shadow:0px 2px 10px -2px rgba(0, 0, 0, 0.41); box-shadow:0px 2px 10px -2px rgba(0, 0, 0, 0.41); } #subheader{ color:#fff; text-align:center; display: table; width:100%; height:470px; background: rgba(0,0,0,.7); } #home #subheader{ height:550px; } #short #subheader{ height:350px; } #subheader a{ color: #FF9; } #subheader a:hover{ text-decoration:underline; } /* Footer */ footer{ background-color:#fff; border-top: 1px solid #ededed; padding:35px 0; } footer h3{ font-size:16px; font-weight:600; } footer a{ color:#555; } footer a:hover{ color:#ec008c; } footer ul{ margin:0; padding: 0 0 20px 0; list-style:none; } footer .btn_1{ text-transform:none; padding:8px 15px; background:#555; } #social_footer{ text-align:center; border-top:1px solid #ededed; padding-top:30px; margin-top:30px; } #social_footer p{ font-size:12px; color:#8c8c8c; } #social_footer ul{ margin:0; padding:0 0 10px 0; text-align:center; } #social_footer ul li{ display:inline-block; margin:0 5px 10px 5px; } #social_footer ul li a{ color:#666; text-align:center; line-height:34px; display:block; font-size:16px; width:35px; height:35px; background-color:#f2f2f2; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #social_footer ul li a:hover{ background:#fff; color:#111; } a#promote{ display:inline-block; position:relative; background:#ec008c; position:relative; color:#fff; padding:10px 15px 10px 42px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position:relative; margin-top:10px; font-weight:600; } a#promote:hover{ background-color:#333; } a#promote:before{ content: "\e003"; font-family: 'ElegantIcons'; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size:24px; position:absolute; left:10px; top:6px; } /* Drop down select footer */ footer .styled-select select { background: transparent; width:115%; padding:7px 5px 5px 15px; border: 0; border-radius: 0; height: 37px; margin:0; font-weight:400; -moz-appearance: window; -webkit-appearance: none; cursor: pointer; color:#444; box-shadow:none; } footer .styled-select { width: 100%; overflow:hidden; height: 40px; background: #f8f8f8 url(../img/arrow_down.svg) no-repeat right center ; border:none; margin-bottom:15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .styled-select select::-ms-expand {display: none;} .styled-select select:focus { outline:none;} /* Menu 2 */ .main-menu-2 ul{ list-style:none; margin:0 0 17px 0; padding:0; float:right; font-size:14px; font-weight:500; } .main-menu-2 ul li{ display:inline-block; margin-left:15px; } .main-menu-2 ul li a{ color:#fff; } /*============================================================================================*/ /* 2. CONTENT */ /* 2.1 Home */ #custom-search-input { margin:0; top: 10px; padding: 0; width:650px; margin:auto; position:relative; } #custom-search-input .search-query { width:650px; padding:15px 30px; border:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75); font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:600; color:#444; } #custom-search-input input.btn_search{ position:absolute; right:20px; top:13px; border:0; width:25px; height:25px; background: url(../img/search.svg) no-repeat center right; cursor:pointer; } #custom-search-input input.btn_search:focus, #custom-search-input .search-query:focus{outline:none;} #custom-search-input input.btn_search:focus, #custom-search-input .search-query:focus{outline:none;} #count{ background-color:rgba(0,0,0,0.25); width:100%; position:absolute; bottom:0; left:0; padding:15px 0; color:#fff; font-size:18px; z-index:99; border-top: 1px solid rgba(255,255,255,0.15) } #count ul{ list-style:none; padding:0; margin:0; text-align:center; } #count ul li{ display:inline-block; text-align:center; margin:0 10px; padding-left:20px; background:url(../img/dots_vert.png) center left no-repeat; } #count ul li:first-child{ margin-left:0; padding-left:0; background:none; } #count ul li:last-child{ margin-right:0; } #count .number{ width:auto; display:inline-block; margin-right:5px; font-weight:600; text-align:right; font-size:24px; } .header-video { position: relative; overflow: hidden; background: #000; } #hero_video { position: relative; background-size: cover; color:#fff; width: 100%; font-size:16px; display:table; height:100%; z-index:99; text-align:center; } #hero_video > div{ display: table-cell; vertical-align: middle; text-align:center; padding:0 10%; } #hero_video > div h1{ margin-top:-60px; } video { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity:0.5; } iframe { height: 100%; width: 100%; } video { width: 100%; } .teaser-video { width: 100%; height: auto; } .header-video--media { width: 100%; height: auto; } .box_home{ background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ededed; margin-bottom:25px; padding:120px 25px 25px 25px; text-align:center; position:relative; font-size:14px; color:#666; min-height:235px; } .box_home span{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #ededed; background-color:#fff; position:absolute; top:-20px; display:block; width:40px; height:40px; line-height:38px; font-weight:bold; font-size:16px; left:50%; margin-left:-20px; } .box_home#one{ background:#fff url(../img/icon_home_1.svg) no-repeat center 40px; } .box_home#two{ background:#fff url(../img/icon_home_2.svg) no-repeat center 40px; } .box_home#three{ background:#fff url(../img/icon_home_3.svg) no-repeat center 40px; } .box_home#four{ background:#fff url(../img/icon_home_4.svg) no-repeat center 40px; } .box_home h3{ font-size:16px; margin-bottom:3px; font-weight:bold; } #delivery_time{ width:500px; margin:auto; text-align:center; margin-top:25px; } #delivery_time strong span{ background:url(../img/time_panel.svg) no-repeat 0 0; display: inline-block; width:80px; margin-left:10px; height:120px; font-size:72px; line-height:120px; text-shadow: 1px 1px 2px rgba(255, 255, 255, 1); } .high_light{ padding:60px 0 60px 0; background:#09c94d; color:#fff; font-size:16px; } .high_light p{ margin-bottom:0; } .high_light > div{ position:relative; } .high_light h3{ font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; color:#fff; font-weight:300; font-size:42px; margin:0; padding:0; } .high_light a{ border: none; font-family: inherit; font-size: inherit; color:#fff; background:none; border:2px solid #fff; cursor: pointer; padding: 15px 30px; outline: none; font-size:14px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform:uppercase; font-weight:bold; display: inline-block; margin-top:15px; text-align:center; position:absolute; right:15px; top:0; } .high_light a:hover{ background:#333; color:#fff; border:2px solid #333; } /* 2.2 List page*/ #map{ width:100%; height:450px; border-bottom:1px solid #ddd; } #filters_col{ background-color:#fff; padding:20px; border: 1px solid #ededed; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:25px; } #filters_col label{ font-weight:normal; } a#filters_col_bt { display:block; color:#444; font-weight:600; } a#filters_col_bt .icon_set_1_icon-65{ font-size:20px; position:relative; top:0; margin-right:5px; } .filter_type h6{ border-top: 1px solid #ddd; margin:15px 0; padding:15px 0 0 0; } .filter_type ul{ list-style:none; padding:0; margin:0 0 15px 0; } .filter_type ul li .rating{ font-size:16px; left:-7px; position:relative; top:3px; color:#ccc; } .filter_type ul li .color_1, .filter_type ul li .color_2, .filter_type ul li .color_3, .filter_type ul li .color_4, .filter_type ul li .color_5, .filter_type ul li .color_6, .filter_type ul li .color_7, .filter_type ul li .color_8{ width:8px; height:8px; margin:5px 5px 0 0; float:right; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .filter_type ul li .color_1{ background-color:#7dccc7; } .filter_type ul li .color_2{ background-color:#f29bc1; } .filter_type ul li .color_3{ background-color:#8494c8; } .filter_type ul li .color_4{ background-color:#8dc63f; } .filter_type ul li .color_5{ background-color:#84c99e; } .filter_type ul li .color_6{ background-color:#f5977d; } .filter_type ul li .color_7{ background-color:#72d0f4; } .strip_list{ background-color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:20px; position:relative; border: 1px solid #ededed; min-height:152px; margin-bottom:30px; line-height:1.3; display:block; } .strip_list.last{ margin-bottom:25px; } a.strip_list:hover h3{ color:#ec008c; } .desc{ padding-left:135px; position:relative; } .desc .rating{ color:#ccc; padding-top:0; } .desc h3{ margin:0; padding:0; } .desc h3 a{ color:#333; } .desc h3 a:hover{ color:#EC008C; } .desc .type{ font-size:12px; font-style:italic; color:#777; margin-bottom:12px; margin-top:5px; } .desc .opening{ color:#C33; } .desc ul{ list-style:none; margin:3px 0 0 0; padding:0; } .desc ul li{ display:inline-block; margin-right:15px; } .desc ul li i.ok{ color:#6C3; position:relative; top:2px; left:5px; font-size:14px; } .desc ul li i.no{ color: #09c94d; position:relative; top:2px; left:5px; font-size:14px; } .thumb_strip{ position:absolute; left:0; top:0; width:110px; height:110px; overflow:hidden; border:1px solid #ededed; padding:5px; text-align:center; box-sizing: border-box; } .thumb_strip img{ width:98px; height:auto; } .strip_list .go_to{ display:table; height:112px; text-align:right; width:100%; } .strip_list .go_to div{ display: table-cell; vertical-align:middle; } .ribbon_1{ position:absolute; text-indent:-9999px; top:-5px; left:-5px; background:url(../img/ribbon_popular.png) no-repeat 0 0; width:81px; height:80px; z-index:3; } /* 2.3 Restaurant menu*/ .box_style_1{ background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ededed; margin-bottom:30px; } .box_style_2, #cart_box{ background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ededed; margin-bottom:25px; padding:25px; } .box_style_2#main_menu, .box_style_2.info{ padding-bottom:10px; } .box_style_2#help{ text-align:center; } .box_style_2#help i{ font-size:52px; display:inline-block; color:#999; } .box_style_2#help a.phone{ font-size:26px; display:block; margin-bottom:0; color:#85c99d; } #cart_box{ background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ededed; margin-bottom:25px; padding:15px; } #cart_box h3{ background:#f8f8f8; margin:-15px -15px 15px -15px; padding:15px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-size:18px; } a.remove_item{ color:#C33; font-size:14px; } /*a.remove_item:hover{ color: #C33; }*/ #cart_box hr { margin-left:-15px; margin-right:-15px; border-color:#ededed; } #main_menu hr { margin-left:-25px; margin-right:-25px; margin-top:10px; border-color:#ededed; } #order_process hr { margin-left:-25px; margin-right:-25px; margin-top:10px; border-color:#ededed; } #main_menu h3 { text-transform:uppercase; font-size:20px; } ul#cat_nav{ list-style:none; margin: 0; padding:0; } ul#cat_nav li{ border-bottom: 1px solid #ededed; } ul#cat_nav li a{ position:relative; color:#555; } ul#cat_nav li a span{ font-size:11px; color:#999; } ul#cat_nav li a:after{ font-family: "fontello"; content: "\e89b"; position:absolute; right:15px; top:15px; } ul#cat_nav li:last-child{ border-bottom: 0; padding-bottom:0; } ul#cat_nav li:first-child a:hover, ul#cat_nav li:first-child a.active{ -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } ul#cat_nav li:last-child a:hover, ul#cat_nav li:last-child a.active{ -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } ul#cat_nav li a{ display:block; padding:15px 10px; } ul#cat_nav li a:hover, ul#cat_nav li a.active{ background:#f9f9f9; color:#111; } #sub_content{ display: table-cell; padding:0 15%; vertical-align: middle; text-align:center; font-size:16px; } #sub_content #thumb{ width:130px; height:130px; overflow:hidden; text-align:center; padding-top:5px; box-sizing: border-box; margin:auto; margin-bottom:15px; background-color:#fff; } #sub_content #thumb img{ width:120px; height:auto; } #sub_content h1{ margin:0 0 10px 0; font-size:60px; font-weight:300; color:#fff; } .rating{ color:#fff; padding-top:10px; } .rating .voted{ color: #FC0; margin-right:3px; } ul.additional_links{ list-style:none; margin:0; padding:0; } ul.additional_links li{ display:inline-block; border-left: 1px solid #ededed; margin-left:3px; padding-left:5px; } ul.additional_links li:first-child{ border-left: none; padding-left:0; margin-left:0; } .table.cart-list td h5{ margin-bottom:0; font-weight:600; } .table.cart-list{ margin-bottom:0; } .table.cart-list td{ vertical-align:middle; } .table.table_summary td { border-top:0 } .table.table_summary td.total{ font-weight:bold; font-size:18px; } .table td.total_confirm{ font-weight:bold; font-size:18px; background-color:#333; color:#fff; } .options i{ font-size:26px; } .row#options_2{ margin-bottom:-10px; margin-top:-5px; } #options_2 label{ font-size:12px; } .thumb_cart{ border: 1px solid #ddd; overflow:hidden; width:60px; height:60px; margin-right:10px; float:left; } .thumb_cart img{ padding:1px; width:58px; height:auto; } .item_cart{ display: inline-block; margin-top:20px; } /* 2.4 Order process */ .bs-wizard { width:90%;margin:auto;} .bs-wizard > .bs-wizard-step {padding: 0; position: relative;} .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {font-size: 16px; margin-bottom: 5px;} .bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;} .bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -11px; margin-left: -15px; border-radius: 50%;} .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #e04f67; border-radius: 50px; position: absolute; top: 8px; left: 8px; } .bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 23px 0;} .bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;} .bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;} .bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;} .bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;} .bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;} .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;} .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;} .bs-wizard > .bs-wizard-step:first-child > .progress {left: 50%; width: 50%;} .bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;} .bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; } #confirm{ text-align:center; margin-bottom:25px; } #confirm i{ font-size:140px; color: #85c99d; display:inline-block; } /*2.5 Restaurant detail page*/ #Img_carousel .sp-selected-thumbnail {border-bottom: 2px solid #ec008c;} #summary_review{ margin:30px 0 40px 0; padding:25px 25px 10px 25px; background-color:#f1fafa; } #general_rating{ margin:0 0 20px 0; font-weight:600; font-size:16px; } #general_rating .rating{ display:inline; color:#ddd; font-size:20px; } #rating_summary ul{ list-style:none; margin:0 0 0 0; padding:0; } #rating_summary ul li{ font-size:14px; margin-bottom:5px; } #rating_summary ul li .rating{ display:inline-block; float:right; padding:0; color:#ddd; } .review_strip_single{ position:relative; padding:30px 0 20px 0; margin:30px 0 25px 0; border-bottom:1px solid #ededed; } .review_strip_single .rating{ color:#ddd; font-size:12px !important; } .review_strip_single.last{ margin-bottom:0; border-bottom:0; } .review_strip_single img{ top:-15px; position:absolute; left:0; border:4px solid #ededed; } .review_strip_single h4{ font-size:18px; margin:-12px 0 35px 90px; padding:0; } .review_strip_single small{ float:right; font-size:12px; margin-top:-10px; font-style:italic; } .review_strip_single .rating{ font-size:16px; } ul.opening_list{ list-style:none; margin:0; padding:0; } ul.opening_list{ list-style:none; margin:20px 0 0 0; padding:0; } ul.opening_list li{ margin-bottom:8px; font-weight:600; } ul.opening_list li span{ float:right; font-weight:400; } /*2.6 About*/ .features-bg { position: relative; min-height: 400px; background: url(../img/features-intro-01.jpg) no-repeat center center; background-size: cover; } .features-img { width: 100%; height: 400px; text-align: center; line-height: 400px; } .features-content { position: relative; padding: 11% 100px 10% 100px; height: 400px; background-color: #09c94d; color:#fff; font-size:16px; } .features-content h3{ font-family: "Gochi Hand", cursive; color:#fff; font-size:32px; line-height:34px; text-transform:uppercase; } .feature { padding:30px 30px 20px 120px; position:relative; background:#fff; margin-bottom:30px; color:#666; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); } .feature i{ margin:0; position:absolute; top:30px; left:30px; padding:0; margin:0; width:65px; height:65px; line-height:60px; text-align:center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border:1px dashed #ccc; font-size:34px; color:#6dcff6; } /*2.7 Contacts*/ #contacts a{ font-size:18px; } /*============================================================================================*/ /* 3. COMMON */ /*============================================================================================*/ /*3.1 Preloader*/ #preloader { position: fixed; top:0; left:0; right:0; width:100%; height:100%; bottom:0; background-color:#09c94d; z-index:999999; } .sk-spinner-wave.sk-spinner { margin:-15px 0 0 -25px; position:absolute; left:50%; top:50%; width: 50px; height: 30px; text-align: center; font-size: 10px; } .sk-spinner-wave div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } .sk-spinner-wave .sk-rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;} .sk-spinner-wave .sk-rect3 {-webkit-animation-delay: -1s;animation-delay: -1s;} .sk-spinner-wave .sk-rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;} .sk-spinner-wave .sk-rect5 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;} @-webkit-keyframes sk-waveStretchDelay { 0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);} 20% { -webkit-transform: scaleY(1);transform: scaleY(1);} } @keyframes sk-waveStretchDelay { 0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);} 20% { -webkit-transform: scaleY(1);transform: scaleY(1);} } /* 3.2 Parallax bg */ .parallax-window { min-height: 470px; background:transparent; position:relative; } .parallax-window#home { min-height: 550px; } .parallax-window#short { height: 350px; min-height:inherit; } .parallax-content{ color:#fff; text-align:center; display: table; width:100%; height:470px; } .parallax-content .sub_content{ display: table-cell; padding:0 15%; vertical-align: middle; text-align:center; font-size:16px; } .parallax-content .sub_content h3{ margin:0 0 10px 0; font-size:60px; font-weight:300; color:#fff; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; } .parallax-content .sub_content i{ font-size:60px; } .parallax-window-2 { height:auto; background: url(../img/bg_office.jpg) no-repeat center center; background-attachment:fixed; background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position:relative; } .parallax-content-2 { display: table; width:100%; height:auto; } .parallax-content-2 > div{ display: table-cell; padding:10% 15%; vertical-align: middle; text-align:center; color:#fff; font-size:16px; } .parallax-content-2 div h3{ margin:0 0 10px 0; font-size:60px; font-weight:300; color:#fff; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; } .parallax-content-2 div p{ margin-bottom:0; } .parallax-content-2 div i{ font-size:60px; } /* 3.3 Position breadcrumbs */ #position { background-color:#fff; border-bottom:1px solid #ededed; padding:10px 0; font-size:11px; } #position ul li:first-child{ padding-left:20px; } #position ul li:first-child:before{ content:"\eaf4"; font-style: normal; font-weight: normal; font-family: "fontello"; position:absolute; left:0; top:1px; color:#999; } #position ul{ margin:0; padding:0; color:#888; } #position ul li a{ color:#252525; opacity:0.7; } #position ul li a:hover{ color:#252525; opacity:1; } #position ul li{ display:inline-block; padding-right:8px; margin-right:3px; position:relative; } #position ul li:after{ content:"\e9ee"; font-style: normal; font-weight: normal; font-family: "fontello"; position:absolute; right:0; top:1px; } #position ul li:last-child:after{ content:''; } .margin_fix { margin-top:60px; } /*3.4 Login/Register modals*/ #message-review .error_message{ color:#FF9; position:relative; top:-30px; } .form-control.form-white { color: #fff; font-size: 16px; height:42px; position: relative; border-radius: 0; border: 1px solid white; line-height:42px; background: transparent; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; box-shadow: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.form-control.form-white{ -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; box-shadow:0; border-radius: 0; height:42px; line-height:28px; } .modal-dialog #review .form-control.form-white{ margin-bottom:0; } .form-control.form-white::-webkit-input-placeholder { color: #fff; } .form-control.form-white:-moz-placeholder { opacity: 1; color: #fff; } .form-control.form-white::-moz-placeholder { opacity: 1; color: #fff; } .form-control.form-white:-ms-input-placeholder { color: #fff; } .form-control.form-white:focus { background: rgba(255,255,255,0.2); -webkit-box-shadow: none; box-shadow: none; } .login_icon { color:#fff; font-size:60px; opacity:0.5; } .modal-backdrop { z-index:999999; } .modal { padding: 0 25px !important; z-index:9999999; } .modal-dialog { width: 100%; max-width: 560px; margin: 0 auto; } .modal-dialog #review { width: 100%; max-width: 650px; } .modal-popup { position: relative; padding:1px 30px 10px 30px; text-align: center; background: #09c94d; border-radius: 0px; border:none; } .modal-popup a{ color:#fff; } .modal-popup a:hover{ color:#fff; text-decoration:underline; } .modal-popup a.close-link { font-size: 22px; position: absolute; top: 20px; right: 30px; color: #fff; } .modal-popup a.close-link:hover { color: #333; text-decoration:none; } .popup-form { width: 90%; max-width: 375px; margin: 60px auto; } .popup-form .form-control { margin: 20px 0; } s.checkbox-holder { white-space: nowrap; } .checkbox { position: relative; display: block; } .checkbox { position: relative; } .checkbox label:before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; cursor: pointer; border: 2px solid white; background: transparent; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .checkbox input[type=checkbox]:focus + label:before { background: rgba(255,255,255,0.2); } .checkbox label:after { content: ''; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; opacity: 0; background: white; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .checkbox input[type=checkbox] { opacity: 0; position: absolute; width: 0; height: 0; } .checkbox input[type=checkbox]:checked + label:after { opacity: 1; } .checkbox-holder span { position: relative; display: inline-block; margin: 0 0 0 10px; white-space: normal; color: #fff; } .btn.btn-submit { width: 100%; margin-top: 30px; color: #85c99d; padding:10px; background: #fff; font-weight:600; outline:none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; font-size:16px; } .btn.btn-submit:focus { outline:none; } .btn.btn-submit:hover { color: #fff; background: #444; } /*3.5 Spacing*/ .add_bottom_15 {margin-bottom:15px;} .add_bottom_30 {margin-bottom:30px;} .add_bottom_45 {margin-bottom:45px;} .add_bottom_60 {margin-bottom:60px;} .add_bottom_75 {margin-bottom:75px;} .add_top_20 {padding-top:20px;} .add_top_60 {padding-top:60px;} .margin_60 {padding-top:60px; padding-bottom:60px;} .margin_60_35 {padding-top:60px; padding-bottom:35px;} .margin_30 {margin-top:30px; margin-bottom:30px;} .nomargin_top {margin-top:0;} .nopadding {margin: 0 !important;padding: 0 !important;} .nomargin {margin: 0 !important;} /* 3.6 Map */ .marker_info { width: 250px; height: 280px; padding:20px; border-radius: 3px; text-align:center; background: #FFF; background: rgba(255, 255, 255, 0.9); position: relative; z-index: 9999999; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; } .marker_info img { display: block; margin:auto; } .marker_info h3 { font-size:16px; line-height:18px; text-transform:uppercase; margin-bottom:3px; } .marker_info em { margin-bottom:10px; display:inline-block; font-size:13px; color:#999; } .marker_info span { display: block; padding: 0; font-size: 12px; line-height:16px; color:#555; margin-bottom:15px; } .marker_info:after{ right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: rgba(255, 255, 255, 0.9); border-width: 10px; margin-top: -10px; } /* 3.7 Password strength */ #pass-info{ width: 100%; margin-bottom:15px; color: #829CBD; text-align: center; font: 12px/25px Arial, Helvetica, sans-serif; } #pass-info.weakpass{ border: 1px solid #FF9191; background: #FFC7C7; color: #94546E; text-shadow: 1px 1px 1px #FFF; } #pass-info.stillweakpass { border: 1px solid #FBB; background: #FDD; color: #945870; text-shadow: 1px 1px 1px #FFF; } #pass-info.goodpass { border: 1px solid #C4EEC8; background: #E4FFE4; color: #51926E; text-shadow: 1px 1px 1px #FFF; } #pass-info.strongpass { border: 1px solid #6ED66E; background: #79F079; color: #348F34; text-shadow: 1px 1px 1px #FFF; } #pass-info.vrystrongpass { border: 1px solid #379137; background: #48B448; color: #CDFFCD; text-shadow: 1px 1px 1px #296429; } /* 3.8 Input form style */ .loader { margin-left:5px; position:absolute;} .error_message { color:#F33; font-weight:600; margin-bottom:4px;} .form-control { color: #333; height:40px; border-radius: 3px; box-shadow:none; border:1px solid #ddd; box-shadow: 0; } .form-group { margin-bottom:20px; } footer .form-group { margin-bottom:15px; } .payment_select{ background-color:#f0f0f0; padding:15px 15px 10px 15px; margin-bottom:20px; border-radius: 3px; } .payment_select label{ font-size:16px; } .payment_select i{ float:right; font-size:24px; } .payment_select#paypal{ background:#f0f0f0 url(../img/paypal.svg) center right no-repeat; } /*3.9 Collapse*/ .panel { border-radius: 3px; -webkit-box-shadow: none; box-shadow:none; border-color:#ededed; } .panel-title a {display:block; color:#444;} .panel-default > .panel-heading { background-color: #f9f9f9; padding:20px; border-bottom:1px solid #ddd; } .panel-heading { border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-group .panel { border-radius: 3px; } .panel-body { padding:30px; line-height:1.6 !important; } .panel-title a .indicator{ color:#ec008c; } .panel-title a:hover .indicator{ color:#333; } /*3.10 Tabs*/ .tab-content{ padding:30px; background-color:#fff; border:1px solid #ddd; border-top:none; margin-bottom:25px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /*3.11 Tooltips*/ .tooltip_styled { display: inline; position: relative; z-index: 999; } .tooltip-item { cursor: pointer; display: inline-block; } .tooltip-item::after { content: ''; position: absolute; width: 180px; height: 20px; bottom: 100%; left: 50%; pointer-events: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tooltip_styled:hover .tooltip-item::after { pointer-events: auto; } .tooltip-content { position: absolute; z-index: 9999; width: 180px; left: 50%; margin: 0 0 20px -90px; bottom: 100%; text-align: left; line-height:1.2; display: block; padding: 15px; font-size:13px; text-align:center; font-weight:600; color: #fff; box-shadow: -5px -5px 15px rgba(48,54,61,0.2); background: #333; opacity: 0; cursor: default; pointer-events: none; } .tooltip-effect-1 .tooltip-content { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .tooltip-effect-2 .tooltip-content { -webkit-transform-origin: 50% calc(100% + 10px); transform-origin: 50% calc(100% + 10px); -webkit-transform: perspective(1000px) rotate3d(1,0,0,45deg); transform: perspective(1000px) rotate3d(1,0,0,45deg); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; } .tooltip-effect-3 .tooltip-content { -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg); transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .tooltip-effect-4 .tooltip-content { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale3d(0.7,0.3,1); transform: scale3d(0.7,0.3,1); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; } .tooltip_styled:hover .tooltip-content { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); transform: translate3d(0,0,0) rotate3d(0,0,0,0); } .tooltip_styled.tooltip-effect-2:hover .tooltip-content { -webkit-transform: perspective(1000px) rotate3d(1,0,0,0deg); transform: perspective(1000px) rotate3d(1,0,0,0deg); } .tooltip-content::after { content: ''; top: 100%; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #333; border-width: 10px; margin-left: -10px; } .tooltip-content .label { margin-left:10px; } .tooltip-content i{ font-size:20px !important; top:3px !important; left:-3px !important; position:relative; } .tooltip-content h4 { display:block; margin: 0 0 10px 0; line-height:14px; font-size:14px; color:#fff; text-transform:uppercase; } .tooltip-content a { font-weight: bold; } /*3.12 Blockquote*/ blockquote.styled { font-family:Georgia, "Times New Roman", Times, serif; } .white_bg{ background-color:#fff; } /*============================================================================================*/ /* 4. UPDATES */ /*============================================================================================*/ /*4.1 Strip list home*/ a.strip_list{ color:#555; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; } a.strip_list:hover{ transform: translate(0, -5px); -webkit-transform: translate(0, -5px); -ms-transform: translate(0, -5px); -webkit-box-shadow: 0px 2px 0px 0px #ebedef; -moz-box-shadow: 0px 2px 0px 0px #ebedef; box-shadow: 0px 2px 0px 0px #ebedef; } /*4.2 Grid list*/ .strip_list.grid .desc{ padding-left:0; text-align:center; } .strip_list.grid .thumb_strip{ display:block; position:static; margin:auto; margin-bottom:15px; width:140px; height:140px; } .strip_list.grid .thumb_strip img{ width:128px; height:auto; } .strip_list.grid .desc ul{ margin:10px 0 0 0; } /*4.3 General*/ a.load_more_bt{ display:block; padding:10px; text-align:center; border:3px solid #fff; color:#555; font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.load_more_bt:hover{ background-color:#fff; color:#ec008c; } #tools{ background:#fff; margin-bottom:25px; height:38px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #ededed; } a.bt_filters{ height:36px; width:36px; color:#555; display:inline-block; text-align:center; line-height:36px; float:right; font-size:16px; border-left: 1px solid #ededed; } #tools .styled-select select { background: transparent; width:115%; padding:7px 5px 5px 15px; border: 0; border-radius: 0; height: 31px; margin:0; font-weight:600; font-size:11px; -moz-appearance: window; -webkit-appearance: none; cursor: pointer; color:#444; box-shadow:none; } #tools .styled-select { width: 100%; overflow:hidden; height: 36px; background: url(../img/arrow_down.svg) no-repeat right center ; border:none; border-right: 1px solid #ededed; } .infoBox {padding-right:30px !important;} /*4.4 Map listing */ header#map_listing_header{ background-color: #09c94d; position:fixed; -webkit-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.41); -moz-box-shadow:0px 2px 10px -2px rgba(0, 0, 0, 0.41); box-shadow:0px 2px 10px -2px rgba(0, 0, 0, 0.41); } .full-height {height:100%;} .row-height{ height:100%; min-height:100%; } .map-right{ height:100%; min-height:100%; padding:0px; } .content-left{ height:100%; min-height:100%; overflow-y:scroll; padding:50px 30px 30px 30px; background-color:#fff; border-right: 1px solid #ededed; } #map_listing{ width:100%; height:100%; } #collapseFiltesmap .filter_type{ clear:both; width:100%; border-top: 1px solid #ddd; } #collapseFiltesmap .filter_type .range_wp{ float:left; width:80%; padding-left:30px; padding-bottom:20px; padding-top:5px; } #collapseFiltesmap .filter_type h6{ float:left; width:20%; border:0; padding-top:10px; } #collapseFiltesmap .filter_type ul{ float:left; width:80%; margin:0 0 15px 0; padding:0; padding-top:20px; } #collapseFiltesmap .filter_type ul li { display:inline-block; min-width:190px; margin-left:45px; } #collapseFiltesmap .filter_type ul li label{ font-weight:normal; font-size:13px; } #filters_map{ border-bottom:1px solid #ededed; margin:0 -30px 30px -30px; background-color:#f8f8f8; padding:15px 30px 0 30px; } a.btn_filter{ padding:5px; background-color:#fff; border:1px solid #ededed; display:inline-block; line-height:1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:15px; } a.btn_filter:before{ font-size:30px; color:#999; padding:0; } a.btn_filter#open_filters:before{ font-family: "ElegantIcons"; content: "\66"; } a.btn_filter#list:before{ font-family: "ElegantIcons"; content: "\64"; font-size:20px; } a.btn_filter#grid, a.btn_filter#list{ margin-top:5px; } a.btn_filter#grid:before{ font-family: "ElegantIcons"; content: "\e025"; font-size:20px; } a.btn_filter#grid{ margin-right:5px; } a.btn_listing{ border: none; font-family: inherit; font-size: inherit; color:#777; cursor: pointer; font-weight:500; background-color:#f0f0f0; padding: 10px 20px; margin-top:5px; outline: none; font-size:12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight:500; display:inline-block; text-align:center; } a.btn_listing:hover{ background-color:#333; color:#fff; } a.load_more_bt_2{ display:block; padding:10px; text-align:center; border:none; background-color:#f0f0f0; color:#555; font-weight:500; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.load_more_bt_2:hover{ background-color:#333; color:#fff; } /*4.5 Search modal */ #position { background-color:#fff; border-bottom:1px solid #ededed; padding:12px 0; font-size:13px; } #position ul{ display:inline-block; } a.search-overlay-menu-btn { display: inline-block; padding: 0 0 0 10px; color:#999; font-size:13px; } a.search-overlay-menu-btn:hover { color: #ec008c; } a.btn_filter#search_bt{ padding:7px; margin:0 4px 0 0; position:relative; top:-3px; } a.btn_filter#search_bt:before{ font-family: "fontello"; content: "\ee33"; font-size:17px; } .search-overlay-menu { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s; -moz-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s; -ms-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s; -o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s; opacity: 0; visibility: hidden; z-index: 999999; text-align: center; } .search-overlay-menu.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; } .search-overlay-menu form { height: 70px; position: absolute; top: 50%; left: 0; margin: -35px auto 0; width: 60%; left: 20%; transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } .search-overlay-menu.open form { transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); -webkit-transform: translateY(0px); } .search-overlay-menu input[type="search"] { height: 100%; width: 100%; color: #fff; background: transparent; border-top: 0px solid transparent; border-bottom: 2px solid #909090 !important; border-left: 0px solid transparent; border-right: 0px solid transparent; font-size: 42px; font-weight: 300; outline: none; padding: 10px 0 10px 0; } .search-overlay-menu form button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; font-size: 3rem; position: absolute; right: 0; top: 15px; color: #c6c6c6; outline: none; } .search-overlay-menu .search-overlay-close { position: absolute; top: 5px; right: 20px; opacity: 1; font-size: 40px; color: #fff; } .search-overlay-menu .search-overlay-close:hover { color: #ec008c; cursor: pointer; } /*4.6 Restaurant menu */ .thumb_menu_list{ width:60px; height:60px; overflow:hidden; text-align:center; display:inline-block; float:left; margin-right:15px; border:1px solid #fff; border-radius:3px; } .thumb_menu_list img{ width:60px; height:auto; } .dropdown-options .dropdown-menu{ border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 5px 20px 10px 20px; width:200px; font-size:12px; font-weight: normal; text-shadow:none; text-transform:none !important; border-top: 2px solid #ec008c; margin-left:-86px; } .dropdown-options .dropdown-menu:before{ bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ec008c; border-width: 7px; margin-left: -7px; } .dropdown-options .dropdown-menu{ margin-top:10px; } .dropdown-options .dropdown-menu h5{ border-bottom:1px solid #ededed; padding-bottom:5px; margin-bottom:5px !important; font-size:13px; } .dropdown-options .dropdown-menu label{ font-weight:500; color:#555 !important; } .dropdown-options .dropdown-menu label{ font-weight:500; color:#555 !important; width:100%; } .dropdown-options .dropdown-menu label input{ margin-right:5px; } .dropdown-options .dropdown-menu label span{ float:right !important; display:inline-block; text-align:right; } .dropdown-options .dropdown-menu a.add_to_basket{ background-color:#f8f8f8; border-radius:3px; display:block; font-weight:500; text-align:center; padding:5px 10px; margin-top:15px; color:#ec008c } .dropdown-options .dropdown-menu a.add_to_basket:hover{ background-color:#ec008c; color:#fff; } /*Drop-down menu options position */ .dropdown-options.dropup .dropdown-menu{ border-top:0; border-bottom: 2px solid #ec008c; margin-bottom: 10px; } .dropdown-options.dropup .dropdown-menu:before{ top: 100%; left: 50%; border-color: #ec008c transparent transparent transparent; border-bottom-color: #ec008c; border-width: 7px 7px 0 7px; margin-left: -7px; } /*4.7 Work with us section */ a.box_work{ text-align:center; background-color:#fff; padding:30px; font-size:14px; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; color:#666; margin-bottom:30px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display:block; } a.box_work:hover{ transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-box-shadow: 0px 3px 0px 0px #ebedef; -moz-box-shadow: 0px 3px 0px 0px #ebedef; box-shadow: 0px 3px 0px 0px #ebedef; } a.box_work h3{ font-size:24px; } a.box_work h3 span{ display:block; font-size:18px; margin-top:3px; color:#999; font-weight:300; } a.box_work .btn_1{ margin-top:30px; } ul.list_ok { list-style: none; margin: 0 0 20px 0; padding: 0; line-height: 22px; } ul.list_ok li { position: relative; padding-left: 30px; margin-bottom:15px; } ul.list_ok li:before { font-style: normal; font-weight: bold; font-family: "ElegantIcons"; font-size: 18px; content: "\e052"; color: #fff; position: absolute; left: 0; top: 0; } .features-bg.img_2 { position: relative; min-height: 400px; background: url(../img/delivery_2.jpg) no-repeat center center; background-size: cover; } .feature_2 h3{margin-top:0; font-size:21px;} .feature_2 { padding:30px 30px 20px 100px; position:relative; background:#fff; margin-bottom:30px; color:#666; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); } .feature_2 i{ margin:0; position:absolute; top:20px; left:20px; padding:0; margin:0; width:65px; height:65px; line-height:60px; text-align:center; font-size:38px; color:#6dcff6; } label.margin_left{ margin-left:15px !important; } /*Pricing tables*/ .plans { margin: 0px auto 50px; zoom: 1; } .plans:before, .plans:after { content: ''; display: table; } .plans:after { clear: both; } .plan { margin: 10px 0; padding: 20px; text-align: center; background: #fafafa; background-clip: padding-box; border: solid #dddddd; min-height: 380px; border-width: 1px 0 1px 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .col-md-4.plan:first-child { margin-right: -30px; margin-left: 30px; } .plan:last-child { border-width: 1px; } .plan-title { position: relative; margin: -20px -10px 20px; padding: 20px; text-transform:uppercase; line-height: 1; font-size: 18px; color:#555; font-weight: bold; border-bottom: 1px dotted #ccc; } .plan-title:before { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; } .plan-price { margin: 0 auto 20px; width: 110px; height: 110px; line-height: 110px; font-size: 30px; font-weight: bold; color: white; background: #4b4b4b; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; display: inline-block; text-align: center; font-family: "Helvetica Neue", Arial; } .plan-price > span { font-size: 12px; font-weight: normal; color: rgba(255, 255, 255, 0.9); } .plan-features { margin-bottom: 20px; line-height: 2; font-size: 12px; text-align: center; } ul.plan-features { padding: 0; margin: 0 0 15px 0; } .plan-features li { list-style: none; } .plan-tall { margin: 0; background: #fff; border-width: 1px; border-radius: 10px; margin-right: -30px; position: relative; z-index: 100; border: solid #83c99f; position: relative; } .ribbon_table { width: 99px; height: 97px; position: absolute; left: -7px; top: -7px; display: block; background: url(../img/ribbon.png) no-repeat 0 0; z-index: 101; } .plan-tall > .plan-title { font-size: 18px; } .plan-tall > .plan-price { margin: 0 auto 20px; height: 130px; width: 130px; line-height: 130px; font-size: 36px; font-weight: bold; color: white; background: #ec008c; border-radius: 130px; -webkit-border-radius: 130px; -moz-border-radius: 130px; display: inline-block; text-align: center; } .plan-tall > .plan-features { font-size: 14px; } .plan-tall > .plan-button { padding: 0 16px; line-height: 32px; } .plan-tall + .plan { border-left: 0; } .menu-dot-line { height: auto;; display: block; margin: 10px 0px; } .menu-list p.price { float: left; padding-top: 0px; padding-left: 0px; margin-bottom: 5px; } p.menu-ingredients { font-weight: 600; } @media only screen and (max-width:479px){ .menu-list p.price, p.menu-ingredients { float: none; } .menu-image a img { height: auto; width:100%; } .menu-image { width: 30% !important; } .menu-description { width: 69%; } .menu-list h5 { white-space: normal; margin-top: 0px; } .menu-list p.price, p.menu-ingredients {font-size: 16px;} p.menu-ingredients { font-size: 16px !important; } h2.menu-section-title { font-size: 23px; } .custom-item .thumbnail > img{ height: auto; } } .custom-item .thumbnail > img{ height: 133px; }