/* Theme Name: Baker Theme URL: https://bootstrapmade.com/baker-free-onepage-bootstrap-theme/ Author: BootstrapMade.com Author URL: https://bootstrapmade.com */ body { line-height: 1.4; font-family: 'Roboto', sans-serif; color: #67696c; font-size: 16px; font-weight: 300; letter-spacing: 0.5px; overflow-x: hidden; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 600; } .section-padding { padding: 60px 0px; } #loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0px; opacity: 1 } } @keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0; opacity: 1 } } /*********************************** ************************************ HEADER ************************************ ***********************************/ .header { background: url('../img/bg-banner02.jpg') no-repeat fixed; background-size: cover; min-height: 650px; position: relative; } .bg-color { background-color: rgba(0, 0, 0, 0.5); min-height: 650px; } #main-header {} .navbar-default { background-color: transparent; border: 0px; padding: 20px 0; transition: all 0.3s; } @media (max-width: 768px) { .navbar-collapse { background: rgba(64, 75, 97, 0.9); border-top: 0; } } .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover { color: #002F2F; } .top-nav-collapse { padding: 0; background: rgba(64, 75, 97, 0.9); } .logo-dec { color: #be9e21; } .navbar-default .navbar-brand { color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #fff; } .navbar-brand { padding: 0px; font-size: 24px; text-transform: uppercase; padding: 15px 0px; margin-top: 6px; } .navbar-default .navbar-nav>li>a { padding: 5px 10px; font-size: 14px; line-height: 54px; font-weight: 400; text-transform: uppercase; background: transparent; color: #fff; -webkit-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #be9e21; background-color: transparent; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { background-color: transparent; color: #be9e21; } .banner-info { padding-top: 140px; color: #fff; } .bnr-title, .bnr-sub-title { font-family: 'Fira Sans', sans-serif; } h1.bnr-title { font-size: 18px; text-transform: uppercase; letter-spacing: 2px; } h2.bnr-sub-title { font-size: 45px; text-transform: uppercase; padding: 20px 0px; font-weight: 700; } .bnr-para { font-weight: 300; } .btn-download, .btn-more, .btn-download:hover, .btn-download:focus, .btn-more:focus { text-transform: uppercase; margin-top: 50px; color: #fff; border: 0; font-size: 14px; font-weight: 300; line-height: 24px; padding: 10px 30px; border-radius: 60px; margin: 50px 10px 0 0; outline: none !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s; } .btn-download { background-color: #be9e21; } .btn-more, .btn-more:focus { margin-left: 15px; border: 1px solid #be9e21; color: #be9e21; } .btn-more:hover { background: #be9e21; color: #fff; } .overlay-detail a i { text-align: center; position: absolute; bottom: 25px; font-size: 38px; color: #fff; } /*********************************** ************************************ features ************************************ ***********************************/ .title, .service-title { font-family: 'Fira Sans', sans-serif; font-size: 35px; text-transform: uppercase; } .item-img { margin-bottom: 15px; } .sub-title { font-size: 20px; } .bottom-line { margin-top: 20px; margin-bottom: 40px; border: 0; border-top: 0px; height: 3px; width: 40px; background-color: #BE9E21; } .wrap-item h3 { font-size: 24px; line-height: 25px; } .pad-bt15 { padding-bottom: 15px; } .sec-sub-title { padding-top: 30px; } .sec-sub-title { font-size: 16px; font-weight: bold; color: #002F2F; text-transform: uppercase; margin: 25px 0px; line-height: 1.7; } #service { background-color: #F3F4F8; } ul.service-list li i { color: #002F2F; padding-right: 10px; } .learn-more, .learn-more:hover, .learn-more:focus { height: 50px; width: 175px; background: #046380; display: inline-block; text-align: center; color: #ffffff; line-height: 50px; text-transform: uppercase; font-size: 16px; text-decoration: none; margin-right: 10px; margin-top: 45px; text-decoration: none; transition: all 0.3s; -webkit-transition: all 0.3s; } .visit-portfolio, .visit-portfolio:hover, .visit-portfolio:focus { height: 50px; width: 175px; display: inline-block; text-align: center; color: #495376; line-height: 50px; text-transform: uppercase; font-size: 16px; text-decoration: none; border: 1px solid #838aa1; margin-top: 45px; transition: all 0.3s; -webkit-transition: all 0.3s; } .bx-wrapper img { width: 70px; display: inline-block; border-radius: 50%; border: 5px solid #fff; margin-bottom: 15px; } .service-item h3 span { opacity: 0.7; font-size: 75px; line-height: 1; text-transform: uppercase; letter-spacing: -5px; font-weight: 900; padding-right: 6px; } .service-item h3 { font-weight: 700; } .service-item p { opacity: 0.6; color: inherit; padding: 10px 0px; } .service-item a { color: #be9e21; } .mr-btn-15 { margin-bottom: 15px; } .padding-right-zero { padding-right: 0px !important; } .bx-wrapper { margin: 0 auto 35px; } .portfolio-item { position: relative; overflow: hidden; } .portfolio-item figure { margin: 0; padding: 0; position: relative; cursor: pointer; } .portfolio-item figure img { display: block; position: relative; z-index: 10; margin: -15px 0 } .portfolio-item figure figcaption { display: block; position: absolute; z-index: 5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .portfolio-item figure h2 { font-family: 'Fira Sans', sans-serif; color: #fff; font-size: 20px; text-align: left; padding-bottom: 15px; } .portfolio-item figure p { display: block; line-height: 18px; margin: 0; color: #fff; text-align: left } .portfolio-item figure figcaption { top: 0; left: 0; width: 100%; height: 100%; padding: 59px 30px; background-color: #BE9E21; backface-visibility: hidden; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; text-align: center; } .portfolio-item figure img { backface-visibility: hidden; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s } .portfolio-item figure:hover img, figure.hover img { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg) } .portfolio-item figure:hover figcaption, figure.hover figcaption { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0) } /*********************************** ************************************ TESTIMONIAL ************************************ ***********************************/ #testimonial { background: url('../img/bg.jpg') no-repeat; background-size: cover; min-height: 390px; } .bg-testicolor { background-color: RGBA(73, 84, 105, 0.61); min-height: 390px; } .white { color: #fff !important; } .testimonial-item ul li blockquote { font-size: 18px; line-height: 32px; color: #fff; font-weight: 300; text-shadow: 1px 1px 2px #333; text-align: center; display: inline-block; width: 100%; margin: 20px 0; padding: 0 80px; position: relative; border: 0; } .testimonial-item ul li small { font-size: 16px; color: #fff; font-weight: 400; text-shadow: 1px 1px 2px #333; text-align: center; display: inline-block; width: 100%; } .bx-viewport { height: 235px !important; background-color: transparent !important; border: 0px none !important; box-shadow: none !important; } .testimonial-item ul li blockquote::before { content: '“'; left: 30px; } .testimonial-item ul li blockquote::before, .testimonial-item ul li blockquote::after { position: absolute; font-weight: 300; font-size: 3em; font-family: Georgia, serif; color: #ccc; top: 62%; } .testimonial-item ul li blockquote::after { content: '”'; right: 30px; } /*********************************** ************************************ Blog ************************************ ***********************************/ .blog-info h2 { text-transform: capitalize; font-weight: 600; font-size: 20px; letter-spacing: 1px; padding-top: 5px; } .blog-comment { margin-top: 12px; min-height: 30px; } .blog-info p, .blog-comment p { color: #949494; } .blog-comment p:first-child { float: left; } .blog-comment p:last-child { float: right; margin-right: 0; } .blog-comment p i { color: #949494; } .read-more { color: #949494; margin-top: 15px; display: inline-block; } .blog-img { position: relative; margin-bottom: 20px; overflow: hidden; } .blog-img img:hover { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .blog-img img { width: 100%; opacity: 0.8; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } /*********************************** ************************************ contact ************************************ ***********************************/ #contact { background-color: rgb(73, 84, 105); } .btn-submit, .btn-submit:hover, .btn-submit:focus { background-color: transparent; border-radius: 60px; color: #be9e21; font-weight: 400; border: 1px solid #be9e21; font-size: 14px; padding: 6px 20px; } .form-control { background-color: transparent; border-radius: 0px; color: #be9e21 !important; border-color: #be9e21; } .form-control:focus { border-color: #be9e21; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } .contact-form input.form-control { color: #fff; } .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } #sendmessage { color: green; border: 1px solid green; display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #errormessage { color: red; display: none; border: 1px solid red; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #sendmessage.show, #errormessage.show, .show { display: block; } .loction-info p { margin-bottom: 25px; } .loction-info p i { color: #be9e21; } /*********************************** ************************************ contact ************************************ ***********************************/ #footer { padding: 20px 0px; } .scrollToTop { position: fixed; bottom: 12px; right: 12px; width: 42px; height: 42px; color: #ffffff; background: #be9e21; font-size: 14px; line-height: 42px; text-align: center; z-index: 100; cursor: pointer; display: none; } .white-bg { background-color: #fff; } #footer a { color: #be9e21; font-weight: 400; } /*********************************** ************************************ Responsive media queries ************************************ ***********************************/ /*********************************** ************************************ cta ************************************ ***********************************/ .cta { background-color: rgb(73, 84, 105); } .cta .cta-info { width: 100%; float: left; padding: 30px 25px 30px 15px; border-radius: 5px; } .cta .cta-info .cta-txt h3 { font-size: 32px; margin-bottom: 10px; } .cta .cta-info .cta-btn { margin-top: 16px; background-color: rgb(190, 158, 33); padding: 20px 50px; color: #FFF; font-size: 22px; display: inline-block; transition: all 0.5s ease-in 0s; } /*********************************** ************************************ Responsive media queries ************************************ ***********************************/ @media (min-width: 768px) and (max-width: 980px) { .service-item, .blog-sec, .wrap-item, .loction-info { margin-bottom: 15px; } .portfolio-item figure figcaption { padding: 55px 30px; } .padding-right-zero { padding-right: 15px !important; } } @media (min-width: 451px) and (max-width: 767px) { .service-item, .blog-sec, .wrap-item, .loction-info { margin-bottom: 15px; } } @media (min-width: 20px) and (max-width: 450px) { .navbar-default .navbar-brand { padding-left: 16px; margin-top: 0px; } .banner-info { padding-top: 40px; } h1.bnr-title { font-size: 16px; } h2.bnr-sub-title { font-size: 33px; } body { font-size: 14px; } .btn-download, .btn-more, .btn-download:hover, .btn-more:hover, .btn-download:focus, .btn-more:focus { font-size: 12px; padding: 7px 18px; } .wrap-item h3 { font-size: 18px; } .title, .service-title { font-size: 28px; } .sub-title { font-size: 15px; } .service-item, .blog-sec, .wrap-item, .loction-info { margin-bottom: 15px; } .loction-info { padding: 0px 15px; } .portfolio-item figure figcaption { padding: 30px 30px; } .padding-right-zero { padding-right: 15px !important; } .portfolio-item figure p { font-size: 14px; } .portfolio-item figure h2 { font-size: 18px; } .testimonial-item ul li blockquote { font-size: 14px; line-height: 22px; margin: 10px 0; padding: 0 40px; } .navbar-default .navbar-nav>li>a { line-height: 22px; text-align: center; } }