/* =================================== Crafto - Restaurant ====================================== */ /* font */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap'); /* variable */ :root { --base-color: #ffa000; --base-color-1: #ec1e25; --medium-gray: #8d8987; --black: #282725; --dark-gray: #383632; --red: #d51f0f; --green: #46b57e; --very-light-gray: #f6f6f6; --yellow: #ECBA23; --alt-font: 'Bebas Neue', cursive; --primary-font: 'Schibsted Grotesk', sans-serif; } body { font-size: 17px; line-height: 30px; background-image: url(../imgs/header-bg.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* header */ header .navbar-brand img { max-height: 49px; } .navbar .navbar-nav .nav-link { font-size: 20px; } header .btn.btn-switch-text.btn-small > span { padding: 11px 25px 9px; } .sticky .header-transparent .header-button .btn { background-color: var(--dark-gray); border-color: rgba(23, 23, 23, 0.20); color: var(--white); } .sticky .header-transparent .header-button .btn:hover { background-color: var(--dark-gray); color: var(--white); border-color: var(--dark-gray); } /* heading */ h1, .h1 { line-height: 4rem; } h2 { line-height: 3.2rem; } /* btn */ [class*="btn-transparent"], [class*=" btn-transparent"] { font-weight: 500; } .btn i { top: 0px; } .btn.btn-switch-text.btn-extra-large > span { font-size: 18px; padding: 19px 32px 16px; } .btn.btn-switch-text.btn-large > span { font-size: 17px; padding: 17px 28px 14px; } .btn.btn-switch-text.btn-medium > span { font-size: 16px; padding: 15px 24px 12px; } .btn.btn-switch-text.btn-small > span { font-size: 14px; padding: 13px 20px 11px; } .btn.btn-switch-text.btn-very-small > span { font-size: 13px; padding: 10px 18px 7px; } .btn.btn-link { padding: 0 0 2px; } .btn.btn-hover-animation-switch .btn-icon i { font-size: 24px; line-height: 0; top: -2px; } .btn.btn-hover-animation-switch .btn-icon { margin-left: 5px; } /* page title */ .page-title-extra-large h1 { font-size: 5rem; line-height: 5rem; } .page-title-extra-large h2 { font-size: 15px; line-height: 26px; } /* border color */ .border-color-extra-medium-gray { border-color: #c7c2bf !important; } /* bg color transparent */ .bg-base-color-transparent { background: rgba(211,145,33,0.9); } .text-outline-base-color-background { -webkit-text-fill-color: var(--base-color); } .subscribe-popup .newsletter-style-05 .submit { font-size: 17px; } /* portfolio */ .portfolio-filter li { padding: 0 35px; } /* top right bottom left */ .top-minus-35px { top: -35px; } /* review */ .review-star-icon i { letter-spacing: 1px; } /* categories */ .categories-btn { line-height: 21px; letter-spacing: 0; padding: 3px 14px 4px; } /* blog comment */ .blog-comment li .btn-reply { padding: 6px 20px 7px; } /* footer */ footer .footer-logo img { max-height: 49px; } footer .elements-social li { margin: 0 22px 0 0; } footer .social-icon-style-08 ul li a:hover { opacity: 1; } footer .facebook{ color:#3b5998; } footer .twitter { color: #00aced; } footer .elements-social ul li:last-child { margin-right: 0; } /* team style */ .team-style-05:hover img { filter: grayscale(100%); } /* margin */ .mt-minus-2px { margin-top: -2px; } /* map */ .infowindow .mb-3 { font-weight: 500; font-size: 18px; letter-spacing: 0; } .infowindow p { font-size: 17px; letter-spacing: 0; } .google-maps-link a { font-size: 13px; letter-spacing: 1px; } /* media query responsive */ @media (max-width: 1199px) { header .btn.btn-switch-text.btn-small > span { padding: 10px 15px 8px; } } @media (max-width: 991px) { header .btn.btn-transparent-white-light { background-color: var(--dark-gray); border-color: rgba(23, 23, 23, 0.20); color: var(--white); } header .btn.btn-transparent-white-light:hover { background-color: var(--dark-gray); color: var(--white); } } @media (max-width: 767px) { .portfolio-filter li { padding: 0; margin-bottom: 5px; } .sm-text-outline-width-1px { -webkit-text-stroke-width: 1px; } } @media (max-width: 575px) { .video-icon-large .video-icon { width: 75px; height: 75px; } .video-icon .video-icon-sonar .video-icon-sonar-bfr { top: -30px; left: -30px; } .xs-w-320px { width: 320px !important } .xs-h-320px { height: 320px !important; } .btn.btn-switch-text.btn-extra-large > span { font-size: 17px; padding: 14px 22px 11px; } }