/*================================== * Author : "ThemeSine" * Template Name : Listrace HTML Template * Version : 1.0 ==================================== */ /*================================== font-family: 'Roboto', sans-serif; ==================================== */ /*=========== TABLE OF CONTENTS =========== 1. General css (Reset code) 2. Header-top 3. Top-area 4. Welcome-hero 5. List-topics 6. Works 7. Explore 8. Reviews 9. Counter 10. Blog 11. Subscribe 12. Footer ==========================================*/ /*------------------------------------- 1.General css (Reset code) --------------------------------------*/ *{ padding: 0; margin: 0; } *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } body{ font-family: 'Poppins', sans-serif; font-size:14px; color:#a09e9c; text-transform:initial; max-width:1920px; margin:0 auto; overflow-x:hidden; } a,a:hover,a:active,a:focus { display:inline-block; text-decoration:none; color: #343a3f; font-size:16px; padding:0; font-weight: 500; text-transform: capitalize; } h1,h2,h3,h4,h5,h6 { margin: 0; color:#343a3f; font-size: 18px; font-weight: 500; text-transform: capitalize; } p { margin: 0; color:#767f86; font-size:14px; line-height: 1.8; text-transform: initial; } img{border:none;max-width:100%; height:auto;} ul{ padding: 0; margin: 0 auto; list-style: none; } ul li { list-style: none; } select,input,textarea,button{box-shadow:none;outline:0!important;} button {background: transparent;border: 0;font-size: 12px;} html,body{height: 100%;} [placeholder]:focus::-webkit-input-placeholder { -webkit-transition: opacity 0.3s 0.3s ease; -moz-transition: opacity 0.3s 0.3s ease; -ms-transition: opacity 0.3s 0.3s ease; -o-transition: opacity 0.3s 0.3s ease; transition: opacity 0.3s 0.3s ease; opacity: 0; } /* section-header */ .section-header{ position: relative; text-align: center; } .section-header h2{ color: #505866; font-size:24px; font-weight: 500; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1.3px; } .section-header h2 span{text-transform: lowercase;} .section-header p{ font-size:16px; } /* section-header */ .fix{position: relative;clear: both;} /*=============Style css=========*/ /*------------------------------------- 2. Header-top --------------------------------------*/ .header-top{border-bottom:1px solid #f6f8fa;} .header-top ul li {display: inline-block;} .header-top-left li,.header-top-right li {display: inline-block;} /*.select-opt*/ .select-opt,.header-top-contact{ padding: 10px 18px; border-right: 1px solid #f6f8fa; } .header-top-contact{ border-right: 0; border-left: 1px solid #f6f8fa; font-size: 12px; } .select-opt select { border: none; cursor:pointer; color:#a7b0ba; font-size: 12px; font-weight: 300; } .select-opt option{ color:#a7b0ba; text-transform: uppercase; } .select-opt a span.lnr-magnifier:before { font-size: 12px; color: #373939; } .select-opt a span.lnr-magnifier:before { font-size: 12px; color: #373939; } /*.select-opt*/ .header-top-right ul li a{ color:#a7b0ba; font-size: 12px; font-weight: 300; } /*------------------------------------- 3. Top-area --------------------------------------*/ nav.navbar.bootsnav { background-color:#fff; border-bottom: transparent; } .wrap-sticky nav.navbar.bootsnav.sticked {background-color: #fff;box-shadow: 0 2px 5px rgba(0,0,0,.2);} /*.navbar-brand*/ .navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus { display: inline-block; color: #1b1e20; font-size: 20px; font-weight: 700; padding: 34px 0px; text-transform:capitalize; } .navbar-header a.navbar-brand span{display: inline-block;color:#ff545a;text-transform:capitalize;} .wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:hover,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:focus {padding:30px 0px;} /*.navbar-brand*/ /*.nav li*/ nav.navbar.bootsnav ul.nav > li > a { color: #859098; font-size: 14px; font-weight: 500; text-transform:uppercase; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } nav.navbar.bootsnav ul.nav > li > a {padding:34px 21px;} nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus{color: #ff545a;} nav.navbar.bootsnav ul.nav > li.active>a {color: #ff545a;} nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after { content: ""; } nav.navbar.bootsnav ul.nav > li.dropdown span { font-size: 8px; margin-left: 15px; } .wrap-sticky nav.navbar.bootsnav.sticked ul.nav > li > a{padding:34px 21px;} /*.nav li*/ /*.menu-ui-design*/ .menu-ui-design{overflow-y:scroll;height: 350px;} .menu-ui-design::-webkit-scrollbar { width:5px; } .menu-ui-design::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 8px #000; } .menu-ui-design::-webkit-scrollbar-thumb { background-color: #ff545a; } /*.menu-ui-design*/ /*.navbar-toggle */ nav.navbar.bootsnav .navbar-toggle { position: relative; background-color: transparent; border: 1px solid #ff545a; padding: 10px; top: 0; } nav.navbar.bootsnav .navbar-toggle i{color: #ff545a;} /*.navbar-toggle */ /*------------------------------------- 4. Welcome-hero --------------------------------------*/ .welcome-hero { position: relative; background:url(../images/wurscht.png)no-repeat; background-position:center; background-size:cover; text-align: center; height:800px; z-index: 1; } .welcome-hero:before{ position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background:rgba(65,73,89,.65); z-index: -1; } .welcome-hero-txt { padding-top: 155px;} .welcome-hero-txt h2 { font-size: 48px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 2.4px; line-height: 1.4; } .welcome-hero-txt p { font-size: 18px; color: #fcfcfc; margin-top: 25px; } .welcome-hero-serch-box{margin-top: 78px;display: flex;} .welcome-hero-form { display: flex; background: #fff; height: 70px; border-radius: 3px; width: 85%; } .single-welcome-hero-form { position: relative; display: flex; flex-direction: row; align-items: center; width: 50%; padding: 0 30px; } .single-welcome-hero-form:first-child{border-right: 1px solid #edeff1;} .single-welcome-hero-form input { margin-left: 10px; height: 70px; width: 300px; border: 0; background: transparent; } .single-welcome-hero-form input[type="text"]{ font-size: 14px; color: #859098; text-transform: capitalize; font-weight: 500; } .welcome-hero-form-icon { position: absolute; top: 20px; right: 30px; color: #252d32; } .welcome-hero-btn { display: flex; justify-content: center; align-items: center; font-size: 14px; color: #fff; width: 170px; height: 70px; background: #ff545a; text-transform: capitalize; margin-left: 30px; border-radius: 3px; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .welcome-hero-btn:hover{/*background: #fd4043;*/background: #f43032;} .welcome-hero-btn svg { width: 14px; height: auto; margin-left: 12px; } [class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after { font-size: 20px; font-style: normal; margin-left: 0px; } /*------------------------------------- 5. List-topuics --------------------------------------*/ .list-topics-content { position: relative; top: -98px; z-index: 1; } .list-topics-content ul li { display: inline-block;} .single-list-topics-content{ display: flex; align-items: center; flex-direction: column; justify-content: center; width: 205px; height: 170px; background:#fff; border-radius: 3px; margin-right: 20px; margin-bottom: 20px; box-shadow: 0 0px 10px rgba(71,71,71,.2); -webkit-transition: .3s linear; -moz-transition:.3s linear; -ms-transition:.3s linear; -o-transition:.3s linear; transition: .3s linear; } .single-list-topics-content h2>a { margin: 13px 0;} /*.single-list-topics-content:last-child{margin-right: 0;}*/ .single-list-topics-icon [class^="icon-"]:before,.single-list-topics-icon [class*=" icon-"]:before,.single-list-topics-icon [class^="icon-"]:after,.single-list-topics-icon [class*=" icon-"]:after {font-size: 45px;color:#343a3f;} .single-list-topics-content:hover .single-list-topics-icon [class^="icon-"]:before,.single-list-topics-content:hover .single-list-topics-icon [class*=" icon-"]:before,.single-list-topics-content:hover .single-list-topics-icon [class^="icon-"]:after,.single-list-topics-content:hover .single-list-topics-icon [class*=" icon-"]:after {color:#fff;} .single-list-topics-content:hover h2>a,.single-list-topics-content:hover p{color: #fff!important;} .single-list-topics-content:hover{ color: #fff; background:#ff545a; box-shadow: 0 5px 10px rgba(71,71,71,.4); } /*------------------------------------- 6. Works --------------------------------------*/ .works{padding: 0 0 90px;} .works-content {margin-top: 73px;} .single-how-works{ text-align: center; padding:50px 42px; border-radius: 3px; box-shadow: 0 0px 5px rgba(71,71,71,.2); margin-bottom: 30px; -webkit-transition: .3s linear; -moz-transition:.3s linear; -ms-transition:.3s linear; -o-transition:.3s linear; transition: .3s linear; } .single-how-works-icon { display: inline-block; color: #50616c; width: 80px; height: 80px; line-height: 80px; background: #eef2f6; border-radius: 50%; } .single-how-works h2 a { font-size: 18px; margin: 35px 0 20px; } .single-how-works h2 a span {text-transform: lowercase;} .single-how-works p {margin-bottom: 25px;text-transform: initial;} .single-how-works-icon [class^="icon-"]:before,.single-how-works-icon [class*=" icon-"]:before,.single-how-works-icon [class^="icon-"]:after,.single-how-works-icon [class*=" icon-"]:after {font-size: 35px;} .single-how-works:hover .single-how-works-icon [class^="icon-"]:before,.single-how-works:hover .single-how-works-icon [class*=" icon-"]:before,.single-how-works:hover .single-how-works-icon [class^="icon-"]:after,.single-how-works:hover .single-how-works-icon [class*=" icon-"]:after {color:#ff545a;} .welcome-hero-btn.how-work-btn { display: inline-block; margin: 0; width: 100px; height: 35px; font-size: 12px; background: transparent; color: #767f86; border: 1px solid #d3d6d9; border-radius: 3px; } .single-how-works:hover h2 a,.single-how-works:hover p{color: #fff;} .single-how-works:hover .single-how-works-icon{background: #fff;} .single-how-works:hover .welcome-hero-btn.how-work-btn{background: #fff;color: #ff545a;} .single-how-works:hover{box-shadow: 0 0px 10px rgba(71,71,71,.4);background: #ff545a;} /*------------------------------------- 7. Explore --------------------------------------*/ .explore{ padding:117px 0 95px; background: #f8fafb; } .explore-content{margin-top: 78px;} .single-explore-item { background: #fff; border: 1px solid #edeff1; border-radius: 3px; margin-bottom: 25px; -webkit-transition: .3s linear; -moz-transition:.3s linear; -ms-transition:.3s linear; -o-transition:.3s linear; transition: .3s linear; } .single-explore-img{position:relative;overflow: hidden;} .single-explore-img:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(162,172,177,.2); } .single-explore-img-info { position: absolute; bottom:-20px; left: 0; width: 100%; opacity:0; visibility:hidden; -webkit-transition: .3s linear; -moz-transition: .3s linear; -ms-transition: .3s linear; -o-transition: .3s linear; transition: .3s linear; } .single-explore-item:hover .single-explore-img-info{ opacity:1; visibility:visible; bottom:0px } .single-explore-img-info button{ position: absolute; bottom: 15px; left: 15px; width: 83px; height: 21px; line-height: 21px; background: #ff545a; border-radius: 3px; color: #fcfcfc; text-transform: capitalize; text-align: center; font-size: 12px; } .single-explore-image-icon-box { text-align: right; position: absolute; bottom: 10px; right: 10px; } .single-explore-image-icon-box ul li { display: inline-block; width: 30px; height: 28px; line-height: 28px; background: #252d32; text-align: center; margin-left: 5px; color: #cbcccd; } .single-explore-image-icon-box ul li:hover i{color: #267dff;} .single-explore-txt { padding: 26px 25px 24px 15px; } .single-explore-txt.bg-theme-1 .explore-rating{background: #70a9ff;} .single-explore-txt.bg-theme-2 .explore-rating{background: #00c61c;} .single-explore-txt.bg-theme-3 .explore-rating{background: #ffcc5d;} .single-explore-txt.bg-theme-4 .explore-rating{background: #bd70ff;} .single-explore-txt.bg-theme-5 .explore-rating{background: #ff7a40;} .explore-rating-price,.explore-rating-price a { font-size: 12px; color: #777f85; text-transform: capitalize; font-weight: 400; margin: 15px 0 20px; } .explore-rating-price a {margin:0;} .explore-rating { display: inline-block; width: 32px; height: 20px; line-height: 20px; color: #fff; text-align: center; border-radius: 3px; font-weight: 500; margin-right: 10px; } .explore-price {color: #f63138;} .explore-price-box { display: inline-block; padding: 0 10px; margin: 0 8px; border-left: 1px solid #dde0e4; border-right: 1px solid #dde0e4; } .explore-person { padding-bottom: 28px; border-bottom: 1px solid #e1e5eb; } .explore-person-img{ width: 40px; height: 40px; border-radius: 50%; } .explore-person p {font-size: 12px;} .explore-open-close-part { margin-top: 20px; } .close-btn { color: #f63138; text-transform: capitalize; } .close-btn.open-btn {color: #00c437;} .explore-map-icon{text-align: right;} .explore-map-icon a svg { width: 12px; height: 14px; margin-left: 23px; color: #767f86; } .explore-map-icon a svg:hover{color: #f63138;} .single-explore-txt.bg-theme-2 .explore-map-icon a svg:hover{color: #00c437;} .single-explore-item:hover{box-shadow: 0 10px 20px rgba(21,19,19,.2);} /*------------------------------------- 8. Reviews --------------------------------------*/ .reviews{padding:117px 0 75px;} .reviews-content {margin-top:36px;} /*single-testimonial-box */ .single-testimonial-box { padding: 50px 30px; box-shadow: 0 0px 5px rgba(71,71,71,.2); overflow-x:hidden; -webkit-transition: .3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition: .3s; } .single-testimonial-box:hover{box-shadow:0 10px 20px rgba(21,19,19,.2);} .slick-current .single-testimonial-box{box-shadow:0 10px 20px rgba(21,19,19,.2);} /*testimonial-description*/ .single-testimonial-box{ width: 404px; background:#fff; } /* testimonial-info */ .testimonial-info { display: flex; align-items: center; text-transform:capitalize; } .testimonial-img { position: relative; top: 11px; margin-right: 5px; border-radius:50%; -webkit-transition: .3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition: .3s; } .testimonial-person { margin-left: 15px; margin-top: 11px; } .testimonial-person h2 { color: #505866; font-size: 18px; } .testimonial-person h4 { color: #a2a5ab; font-size: 14px; font-weight: 400; margin-top: 10px; } .testimonial-person-star i { color: #ffda2b; margin: 9px 4px 0 0; }/* testimonial-info */ /* testimonial-comment */ .testimonial-comment { margin-top: 18px; } .testimonial-comment p{ color: #8d939e; font-size: 14px; font-weight: 300; }/* testimonial-comment */ /*.slick-slide*/ .slick-initialized .slick-slide { display: block; padding: 40px 0; } .slick-slide.slick-cloned {outline: 0!important;} .slick-slide { margin: 0px 10px; } .slick-slide { transition: all ease-in-out .3s; opacity: .5; } .slick-active { opacity: .5; } .slick-current { opacity: 1; } /*.slick-slide*/ /*------------------------------------- 9. Counter --------------------------------------*/ .statistics{ position:relative; display: flex; align-items: center; background:url(../../assets/images/counter/counter-banner.jpg)no-repeat fixed; background-position:center; background-size:cover; padding:127px 0 120px; } .statistics:before{ position:absolute; content:''; background: rgba(75,75,75,.60); height:100%; width:100%; top:0; left:0; } /* single-ststistics-box */ .single-ststistics-box { text-align: center; margin-bottom:30px; } /* single-ststistics-box */ .statistics-content{ display: flex; justify-content: center; color:#fff; font-size:60px; } .statistics-content span { margin-left: 5px; } .single-ststistics-box h3{ color:#fff; font-size:24px; text-transform:capitalize; font-weight: 500; } /*------------------------------------- 10. Blog --------------------------------------*/ .blog{padding:120px 0 90px;} .blog-content{margin-top: 80px;} .single-blog-item{ margin-bottom: 30px; box-shadow: 0 0px 5px rgba(71,71,71,.2); -webkit-transition: .3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition: .3s; } .single-blog-item-txt {padding: 25px 28px 27px;} .single-blog-item-txt h2 a {text-transform: initial;line-height: 1.8;} .single-blog-item-txt h4 { font-size: 14px; color: #8f949d; font-weight: 400; margin: 12px 0 20px; } .single-blog-item-txt h4 a { font-size: 14px; padding-right: 14px; border-right: 1px solid #dde0e4; margin-right: 15px; text-transform: uppercase; } .single-blog-item:hover h2 a {color:#ff545a;} .single-blog-item:hover{ box-shadow: 0 10px 20px rgba(21,19,19,.4); } /*------------------------------------- 11. Subscribe --------------------------------------*/ .subscription{ background: #f8fafb; padding:150px 0; } /*subscribe-title*/ .subscribe-title {margin-bottom: 52px;} .subscribe-title h2{ font-size:24px; font-weight: 500; text-transform: uppercase; } .subscribe-title p{ color:#7b8088; font-size:16px; font-weight: 500; margin-top: 28px; }/*subscribe-title*/ /*custom-input-group*/ .subscription-input-group { position: relative; text-align: center; max-width: 630px; margin:0 auto; } .subscription-input-group .subscription-input-form{ display: inline-block; width: 630px; height: 60px; padding-left:30px; font-size: 16px; color: #a5adb3; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #fff; box-shadow: 0 0px 10px rgba(21,19,19,.1); -webkit-transition:0.3s linear; -moz-transition:0.3s linear; -o-transition:0.3s linear; transition:0.3s linear; } .subscription-input-group:hover .subscription-input-form{ box-shadow: 0 5px 20px rgba(21,19,19,.4); } /*custom-input-group*/ /*appsLand-btn*/ .appsLand-btn { position: absolute; top: 0; right: 0; background: #ff545a; display: inline-block; width: 180px; height: 60px; line-height: 60px; text-decoration: none; border-top-right-radius:3px; border-bottom-right-radius:3px; text-transform:capitalize; color: #fff; font-size: 16px; font-weight: 500; border: 0; overflow: hidden; cursor: pointer; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } .appsLand-btn:hover, .appsLand-btn:focus, .appsLand-btn:active { text-decoration: none; outline: none; } .appsLand-btn:hover { box-shadow:0 5px 10px rgba(71,71,71,.4); background: #f43032; } /*appsLand-btn*/ /*------------------------------------- 12. Footer --------------------------------------*/ .footer-menu {padding: 45px 0;} .footer-menu .navbar-header{padding:0;} .footer-menu .navbar-header a.navbar-brand,.footer-menu.footer-menu .navbar-header a.navbar-brand:hover,.footer-menu .navbar-header a.navbar-brand:focus{ padding:0; height: 0; } .footer-menu ul.footer-menu-item{text-align: right;} .footer-menu ul.footer-menu-item li{display: inline-block;} .footer-menu ul.footer-menu-item li a { color: #859098; font-size: 14px; text-transform: uppercase; padding-left: 40px; -webkit-transition:0.3s linear; -moz-transition:0.3s linear; -o-transition:0.3s linear; transition:0.3s linear; } .footer-menu ul.footer-menu-item li a:hover{color: #f43032;} .hm-footer-copyright { padding: 40px 0; border-top: 1px solid #e1e5eb; } .hm-footer-copyright p,.hm-footer-copyright p a { color: #a5adb3; font-size: 14px; font-weight: 400; text-transform: capitalize; } .footer-social {text-align: right;} .footer-social .fa-phone:before { position: relative; top: 2px; } .footer-social a ,.footer-social span { display: inline-block; color: #afb4bf; font-size: 14px; margin-left: 15px; -webkit-transition: .3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition: .3s; } .footer-social a { width: 35px; height: 35px; line-height: 35px; background: #eef2f6; text-align: center; border-radius: 50%; } .footer-social span {margin-right:15px;margin-left: 0;color: #a5adb3;} .footer-social span:hover{color: #ff545a;} .footer-social a:hover {background:#ff545a;color: #fff;} /*=============================== Scroll Top ===============================*/ #scroll-Top .return-to-top { position: fixed; right: 30px; bottom: 30px; display: none; width: 40px; line-height: 40px; height: 40px; text-align: center; font-size: 20px; cursor: pointer; color: #fff; background:#ff545a; border:1px solid #ff545a; border-radius:50%; -webkit-transition: .5s; -moz-transition:.5s; -ms-transition:.5s; -o-transition:.5s; transition: .5s; z-index: 2; } #scroll-Top .return-to-top:hover { background:#f43032; border:1px solid #ff545a; } #scroll-Top .return-to-top i{ position:relative; bottom:0; } #scroll-Top .return-to-top i{ position: relative; animation-name: example; animation-direction: alternate; animation-iteration-count: infinite; animation-duration:1s; } @keyframes example { 0% {bottom:0px;} 100% {bottom:7px;} } /*========================Thank you=================