/* Template 2083 Steak House http://www.tooplate.com/view/2083-steak-house */ body { background: #ffffff; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; } html,body { width: 100%; overflow-x: hidden; } html { font-size: 100%; } /* Typography */ h1,h2,h3, .btn { font-family: 'Montserrat', sans-serif; font-weight: 400; letter-spacing: 1px; } h1 { font-weight: bold; font-size: 100px; } h2 { color: #333; font-size: 40px; letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; } #contact h2 { color: #ffffff; } h3 { color: #444; font-size: 20px; line-height: 26px; letter-spacing: 1px; padding-bottom: 10px; } #menu h3 { color: #555; } h3.line { color: #444; font-size: 20px; line-height: 35px; letter-spacing: 1px; } h4 { font-size: 12px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; font-weight: 400; } p { font-size: 18px; letter-spacing: 0.8px; line-height: 28px; } p.jp1 { font-size: 16px; letter-spacing: 0.8px; line-height: 28px; } p.jp2 { font-size: 12px; letter-spacing: 0.8px; line-height: 28px; } p.minn { font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-left: -20px; margin-top: -20px; } a { text-decoration: none !important; } a:visited, a:focus { outline: none; text-decoration: none !important; } .parallax-section { background-attachment: fixed !important; background-size: cover !important; } /* hover min css */ .hvr-bounce-to-bottom:before, .hvr-bounce-to-top:before { background-color: #ffffff; } /* All Section styles */ #about, #feature, #video, #menu, #team, #gallery, #contact { color: #656565; padding-top: 100px; padding-bottom: 100px; } #feature, #video, #team, #gallery, #contact { text-align: center; } #feature, #team { background: rgb(240,240,240); } /* section title */ .section-title { padding-bottom: 70px; } #about .section-title, #menu .section-title { text-align: center; } #contact .section-title { color: #f0f0f0; } /* section title */ .section-titleadd { margin-bottom: -40px; } /* Preloader section */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: none repeat scroll 0 0 #ffffff; } .sk-spinner-pulse { width: 60px; height: 60px; background-color: #222; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; } @-webkit-keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* Home section */ #home { color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; height: 100vh; overflow: hidden; position: relative; } #home .gradient-overlay { background: #c21500; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ opacity: 0.8; position: absolute; top: 0; width: 100%; height: 100vh; } #home .btn { background: transparent; border: 3px solid #ffffff; color: #ffffff; font-size: 12px; letter-spacing: 2px; padding: 13px 30px; margin-top: 34px; text-transform: uppercase; } #home .btn:hover, #home .btn:focus { color: #c21500; } /* Navigation section */ .navbar-default { background: #ffffff; border: none; box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.04); margin: 0 !important; } .navbar-default .navbar-brand { color: #505050; font-size: 28px; font-weight: 600; letter-spacing: 2px; line-height: 40px; margin: 0; } .navbar-default .navbar-nav li a { color: #757575; font-size: 19px; font-weight: 300; line-height: 50px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .navbar-default .navbar-nav > li a:hover { color: #c21500 !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #606060; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #c21500; background-color: transparent; } .navbar-default .navbar-toggle { border: none; padding-top: 10px; } .navbar-default .navbar-toggle .icon-bar { border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } /* Feature section */ #feature .feature-thumb { background-color: #ffffff; position: relative; padding: 40px; margin-top: 32px; } #feature .feature-icon { background-color: #222; width: 85px; height: 85px; margin: 0 auto; top: 0; margin-top: -70px; margin-bottom: 30px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: table; text-align: center; transition: all 0.4s ease-in-out; } #feature .feature-icon:hover { background-color: #c21500; } #feature .feature-icon span { display: table-cell; vertical-align: middle; } #feature .feature-icon .fa { color: #ffffff; font-size: 36px; margin: 0; padding: 0; } #feature h3 { padding-top: 14px; padding-bottom: 10px; } /* About section */ #about .col-md-4 ul { padding-top: 4px; padding-left: 28px; } #about .col-md-4 ul li { color: #777; font-size: 18px; font-weight: 400; padding-top: 2px; padding-bottom: 2px; } /* Video section */ #video { background: url('../images/video-bg.jpg') 50% 0 repeat-y fixed; -webkit-background-size: cover; background-size: cover; background-position: center center; position: relative; color: #999; } #video .overlay { background: rgba(03,03,03,0.6); width: 100%; height: 100%; position: absolute; top: 0; } #video h2 { color: #ffffff; padding-top: 20px; padding-bottom: 16px; } #video .fa { position: relative; border: 2px solid #ffffff; border-radius: 100px; color: #ffffff; font-size: 28px; width: 80px; height: 80px; line-height: 80px; text-align: center; vertical-align: middle; margin-top: 22px; } /* Menu section */ #menu .media { padding-bottom: 20px; } #menu .media-object img { width: 220px; padding-right: 12px; position: relative; } #menu .media-object span.menu-price { position: absolute; background-color: #ffffff; color: #222; font-size: 20px; font-weight: bold; padding: 6px 20px; top: 50%; left: 3%; } /* Team section */ #team h3 { padding-bottom: 0px; } #team .team-des h4 { color: #666; padding-top: 0px; padding-bottom: 10px; } #team img { width: 100%; } #team .team-thumb { width: 100%; position: relative; } #team .team-des { background: #ffffff; box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.04); position: absolute; bottom: 0px; width: 100%; height: 90px; overflow: hidden; transition: height 450ms; } #team .team-thumb:hover .team-des { color: #ffffff; height: 100%; background-color: #c21500; padding-top: 30%; opacity: 0.9; } #team .team-thumb:hover h3, #team .team-thumb:hover h4, #team .team-thumb:hover .social-icon li a { color: #eee; } #team .join-team { background-color: #c21500; color: #f0f0f0; padding: 30px 20px; text-align: center; width: 100%; height: 100%; box-sizing: border-box; display: block; } #team .join-team .fa { font-size: 32px; padding-bottom: 14px; } #team .join-team .btn { background-color: transparent; border: 3px solid #ffffff; color: #ffffff; font-size: 18px; padding: 6px 26px; margin-top: 18px; } #team .join-team .btn:hover { color: #222; } #team .col-md-6 { padding-top: 62px; } #team .col-md-6 h2 { padding-bottom: 16px; } /* Gallery section */ #gallery .gallery-thumb { position: relative; overflow: hidden; margin: 0; } #gallery .gallery-thumb .gallery-overlay { background: #c21500; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #gallery .gallery-thumb:hover .gallery-overlay { opacity: 0.9; } #gallery .gallery-thumb .gallery-overlay .gallery-item { text-align: center; position: absolute; top:50%; left: 50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } #gallery .gallery-thumb .fa { background: #ffffff; border-radius: 100%; font-size: 24px; color: #222; width: 60px; height: 60px; line-height: 60px; text-align: center; vertical-align: middle; } /*filter css*/ .filter-wrapper { width: 100%; margin-bottom: 42px; overflow: hidden; } .filter-wrapper li { display: inline-block; margin: 4px; } .filter-wrapper li a { color: #666; font-size: 16px; font-weight: 600; letter-spacing: 2px; padding: 8px 17px; margin-right: 2px; margin-left: 2px; text-transform: uppercase; display: block; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .filter-wrapper li a:hover, .filter-wrapper li a:focus { color: #C21500; } /*isotope box css*/ .iso-box-section { width: 100%; } .iso-box-wrapper { width: 100%; padding: 0; clear: both; position: relative; } .iso-box { position: relative; min-height: 50px; float: left; overflow: hidden; margin-bottom: 30px; } .iso-box > a { display: block; width: 100%; height: 100%; overflow: hidden; } .fluid-img { width: 100%; display: block; } /* Contact section */ #contact { background: url('../images/contact-bg.jpg') 50% 0 repeat-y fixed; -webkit-background-size: cover; background-size: cover; background-position: center center; position: relative; } #contact .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0; } #contact .form-control { background: transparent; border: none; border-bottom: 1px solid #666; border-radius: 0px; box-shadow: none; color: #ffffff; font-size: 18px; margin-bottom: 16px; transition: all 0.4s ease-in-out; } #contact .form-control:hover { border-color: #ddd; } #contact input {height: 45px;} #contact input[type='submit'] { background: #ffffff; border-radius: 4px; color: #c21500; font-size: 20px; font-weight: 600; letter-spacing: 2px; height: 50px; margin-top: 20px; transition: all 0.4s ease-in-out; } #contact input[type='submit']:hover { background-color: #c21500; border-color: transparent; color: #ffffff; } /* Footer section */ footer { background-color: #141414; color: #757575; padding-top: 100px; padding-bottom: 100px; } footer h3 { color: #ffffff; text-transform: uppercase; padding-bottom: 14px; } footer strong { color: #f0f0f0; font-size: 20px; display: block; padding-top: 6px; padding-bottom: 2px; } #copyright p { padding: 20px; } .gototop { background-color: #242424; color: #ffffff; font-size: 40px; padding: 20px 32px; text-align: right; transition: all 0.4s ease-in-out; } .gototop:hover { background-color: #c21500; color: #fff; } /* social icon section */ .social-icon { padding: 0; margin: 0; } .social-icon li { list-style: none; display: inline-block; } .social-icon li a { border-radius: 100px; color: #626262; font-size: 18px; text-decoration: none; transition: all 0.4s ease-in-out; width: 35px; height: 35px; line-height: 35px; text-align: center; margin-bottom: 12px; margin-right: 10px; } .social-icon li a:hover { background: #111; color: #ffffff; } /* Mobile Responsive */ @media (max-width: 980px) { #home { height: 65vh; } #feature .col-md-4:last-child, #about .col-md-4 { margin-top: 42px; } #team .team-thumb { margin-top: 20px; margin-bottom: 20px; } #team .join-team { padding: 71px 50px; margin-top: 20px; } } @media (max-width: 900px) { h1 {font-size: 70px;} } @media (max-width: 768px) { .navbar-default .navbar-brand { line-height: 46px; } } @media (max-width: 767px) { .navbar-default .navbar-brand { line-height: 15px; } .navbar-default .navbar-nav li a { line-height: 30px; } #feature .col-md-4, #about .col-md-5, footer .col-md-4 { padding-top: 20px; padding-bottom: 20px; } .filter-wrapper { padding: 0px; } } @media (max-width: 650px) { #home { height: 100vh; } h1 { font-size: 60px; } h2 { font-size: 30px; } #feature { padding-top: 80px; padding-bottom: 80px; } #about, #feature, #video, #menu, #team, #gallery, #contact { padding-top: 80px; padding-bottom: 80px; } #menu .media-object img { width: 100%; padding-bottom: 14px; } #menu .media-object span.menu-price { top: 30%; left: 6%; } footer {text-align: center;} }