/* Theme Name: Tempo Theme URL: https://bootstrapmade.com/tempo-free-onepage-bootstrap-theme/ Author: BootstrapMade.com Author URL: https://bootstrapmade.com */ /************************************** link & button **************************************/ .white { color:#fff !important; } h1.cta-title { font-size: 43px; } h1 { font-size: 36px; } /************************************** Header **************************************/ .section-padding { padding: 40px 0px; } .main-navigation { border-bottom: 1px solid #eee; } .navbar-default { background-color: #fff; border-color: rgba(231, 231, 231, 0.33); padding: 20px 0px; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { color: #354242; background-color: #fff; } .navbar-nav { padding-top: 5px; } .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-bottom: 2px solid #E74C3C; outline: none; } .navbar { min-height: inherit; margin-bottom: 0px; } .navbar-brand { height: inherit; font-family: 'Josefin Slab', serif; font-weight: 700; text-transform: uppercase; padding: 5px; font-size: 42px; margin-top: 5px; } .navbar-default .navbar-brand { color: #e43c5c; } .navbar-default .navbar-nav > li > a { color: #354242; font-weight: 600; text-transform: uppercase; margin: 0px 10px; padding-bottom: 5px; font-size: 14px; } .nav > li > a { padding: 0px; } .jumbotron { background-color: transparent; padding-top: 90px; } .jumbotron p.big { line-height: 21px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 6px; font-size: 15px; color: #fff; text-transform: uppercase; font-weight: 400; color: #ffffff; -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); -moz-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); -ms-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); padding-top: 10px; } a.btn-banner { border: 1px solid #cdcdcd; padding: 12px 22px; line-height: 0px; border-radius: 3px; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 11px; text-transform: uppercase; color: #ffffff; letter-spacing: 1px; display: inline-block; margin-top: 95px; } a.btn-banner i { padding-left: 10px; } a.btn-banner:hover, a.btn-banner:focus { background-color: #e43c5c; color: #fff; border-color: #E74C3C; display: inline-block; } .bold { font-weight: bold; } .bor-btm { width: 100px; height: 1px; background-color: #ddd; margin-bottom: 85px; } .jumbotron h1.small { line-height: 88px; border-width: 0px; margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 62px; letter-spacing: 6px; text-transform: uppercase; font-weight: 400; color: #ffffff; -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); -moz-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); -ms-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); } .container .jumbotron, .container-fluid .jumbotron { padding-right: 60px; padding-left: 0px; } .bgblue-dark { background-color: #2C3E50; } .bgblue-light { background-color: #3498DB; } .bgred { background-color: #E74C3C; } .wrk-title { cursor: pointer; } .cta-1, .cta2 { background-color: #e43c5c; padding: 40px 0px; } p.cta-sub-title { font-size: 28px; } .pg-titl-bdr-btm { width: 100px; height: 3px; background-color: #e43c5c; } .service-box { margin: 0 0 60px; display: inline-block; } .service-box .service-icon { width: 75px; height: 75px; border-radius: 50px; overflow: hidden; border: 1px solid #e9e9e9; line-height: 75px; text-align: center; color: #e43c5c; font-size: 30px; margin-right: 23px; float: left; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .service-box .service-text { width: 70%; float: left; margin-bottom: 20px; } .service-box .service-text h3 { margin: 0 0 20px 0; padding: 0 0 0 0; font-size: 18px; line-height: 24px; color: #333333; font-weight: 400; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .page-title { margin-bottom: 40px; } .fil-btn .active { background-color: #e43c5c; } .img-sec, .fig-caption { width: 50%; float: left; } .team-info { border: 1px solid rgba(204, 204, 204, 0.33); float: left; width: 100%; border-radius: 3px; } .fig-caption { padding: 56px 20px 0px; } .fig-caption h3 { font-size: 20px; font-family: 'Josefin Slab', serif; } .fig-caption p { font-size: 14px; } .team-social li { display: inline-block; } .team-social li { width: 30px; height: 30px; line-height: 30px; text-align: center; } .team-social li a { color: #fff; } .blue-light{ background-color: #3498DB; } .blue-dark { background-color: #2C3E50; } .red { background-color: #E74C3C; } .marb-20 { margin-bottom: 20px; } .wd75 { width: 75%; float: left; } .cta2 a { margin-top: 5px; } .fnt-24 { font-size: 24px; } /* Portfolio */ #portfolio { background: #fff; padding: 80px 0; } #portfolio #portfolio-wrapper { padding-right: 15px; } #portfolio #portfolio-flters { padding: 0; margin: 0 0 45px 0; list-style: none; text-align: center; } #portfolio #portfolio-flters li { cursor: pointer; margin: 0 10px; display: inline-block; padding: 10px 22px; font-size: 12px; line-height: 20px; color: #666666; border-radius: 4px; text-transform: uppercase; background: #f7f7f7; margin-bottom: 5px; transition: all 0.3s ease-in-out; } #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active { background: #E43C5C; color: #fff; } #portfolio .portfolio-item { position: relative; height: 200px; overflow: hidden !important; margin-bottom: 15px; transition: all 350ms ease; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #portfolio .portfolio-item a { display: block; margin-right: 15px; } #portfolio .portfolio-item img { position: relative; top: 0; transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } #portfolio .portfolio-item .details { height: 50px; background: #E43C5C; position: absolute; width: 100%; height: 50px; bottom: -50px; transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); } #portfolio .portfolio-item .details h4 { font-size: 14px; font-weight: 700; color: #fff; padding: 8px 0 2px 8px; margin: 0; } #portfolio .portfolio-item .details span { display: block; color: #fff; font-size: 13px; padding-left: 8px; } #portfolio .portfolio-item:hover .details { bottom: 0; } #portfolio .portfolio-item:hover img { top: -30px; } /* Contact Form */ .text-field-box { background: #fff; border: 1px solid #ddd; border-radius: 40px; height: 60px; line-height: 60px; text-align: left; color: #666; font-size: 14px; padding: 0 35px; margin-bottom: 30px; width: 100%; outline: none; appearance: none; -webkit-appearance: none; } .form-sec textarea { height: 220px; } .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; } .button-medium { background: #e43c5c; border-radius: 40px; color: #ffffff; cursor: pointer; display: block; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 400; height: 48px; line-height: 48px; margin: 0 auto; overflow: hidden; text-align: center; width: 200px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #e43c5c; box-shadow: none; outline: none; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .footer { background-color: #040E18; } .footer h3 { color: #fff; padding-bottom: 30px; } .footer_social ul { list-style: outside none none; margin: 0; padding: 0; } .footer_social ul li { margin: 2px; display: inline-block; } .footer_social ul li a { background: #2e3537 none repeat scroll 0 0; border: 1px solid #2e3537; box-shadow: 0 0 0 7px transparent; color: #aaa; display: block; font-size: 14px; height: 40px; line-height: 21px; padding: 9px 13px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 40px; } .footer-bottom { background: #09121B; padding: 20px 0; } .footer_copyright { color: #fff; font-size: 16px; margin-bottom: 0; } .footer_copyright a { color: #e43c5c; } #banner { background: url('../img/banner-bg.jpg') no-repeat; background-size: cover; min-height: 500px; } .cta2 .btn-default,.cta2 .btn-default:hover,.cta2 .btn-default:focus { padding: 10px 25px; background-color: #fff; border: 0px; } /************************************** cta **************************************/ /** media queries**/ @media (min-width: 480px) and (max-width: 1023px) { .img-sec, .fig-caption { width: 100%; float: left; } .fig-caption { padding: 56px 20px 20px; } } @media (min-width: 451px) and (max-width: 768px) { .filter { padding: 5px 18px; margin-bottom: 3px; } .wd75 { width: 100%; } .fig-caption { padding: 56px 20px 20px; } } @media (min-width: 301px) and (max-width: 450px) { .filter { padding: 3px 14px; margin-bottom: 3px; } .jumbotron { padding-right: 30px; padding-left: 30px; } .fig-caption { padding: 13px 20px 0px; } .team-social li { width: 20px; height: 20px; line-height: 20px; text-align: center; } .fig-caption h3 { font-size: 19px; font-family: 'Josefin Slab', serif; } .wd75 { width: 100%; } .service-box .service-text h3 { padding-top: 15px; } .jumbotron h1.small { font-size: 44px; } h1.cta-title { font-size: 30px; } p.cta-sub-title { font-size: 20px; } .button-medium { font-size: 15px; height: 40px; line-height: 40px; width: 150px; } .jumbotron { padding: 90px 0px 0px 20px !important; } } .footer_copyright a { text-decoration: none; } @media (min-width: 100px) and (max-width: 300px) { .filter { padding: 3px 14px; margin-bottom: 3px; } .img-sec, .fig-caption { width: 100%; float: left; } .fig-caption { padding: 56px 20px 20px; } .jumbotron h1.small { font-size: 44px; } h1.cta-title { font-size: 30px; } p.cta-sub-title { font-size: 20px; } .button-medium { font-size: 15px; height: 40px; line-height: 40px; width: 150px; } .jumbotron { padding: 90px 0px 0px 20px !important; } .service-box .service-text h3 { padding-top: 15px; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a{ text-align: center; } } @media (min-width: 300px) and (max-width: 768px) { .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a{ text-align: center; border: 0px; } .navbar-default .navbar-nav > li > a:hover { border: 0px; } } /************************************** form element **************************************/