/* Global CSS Document */ /* /* * Theme Name: vince onepage & Multipages Business template * File name: style.css * Theme URL: http://www.kamric.com/vince/ * Description: vince onepage & Multipages Business template * Author: Kamric * Author URL: https://themeforest.net/user/kamric * Version: 1.0 --------------------------- TABLE OF CONTENTS --------------------------- 01. General & Basic Styles 02. Demo Heading 03. BG Color 04. Top Banner,lightbox 05. Carousel 06. Newsletter 07. Benefit 08. TEAM 09. Team Box 10. Testimonials 11. Navigation 12. Mobile Apps 13. Laptop Demos Slide 14. Content Slide App Slid 15. Button 16. Owl Slide 17. Section 18. Modern Agency Services 19. Corporate Services 20. Agency Services 21. Business Services 22. About Us 23. Achivements 24. work 25. Our Team,App,Clients 26. Portfolio 27. Testimonials 28. Pricing Table 29. Price 30. Skill & Accordion 31. Chart 32. Back to top 33. Page Loader 34. Freelancing Features 35. Testimonial-area 36. Awesome Features 37. Special Features 38. Side Tab 39. Content slide 40. Top banner 41. Blog 42. Best Experience 43. Startup Services 44. Startup Top Support 45. App 46. Contact Us 47. Footer 48. Inner pages 49. Sidebar Bar blog 50. Blog 51. Pagination 52. Comments Area Blog 53. Chart 54. Particles 55. Login Page 56. Footer-Social-icon 57. Donation pop 58. SHOP product 59. Tabile 60. Demos Intro /*------------------------------------------*/ /* /* 01.General & Basic Styles /* /*------------------------------------------*/ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); @import url(https://fonts.googleapis.com/css?family=Raleway:300,900,100,600,400,500,800); body { font-family: 'Open+Sans', sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; width: 100% ; height: 100%; font-size: 14px; color: #616161; line-height: 28px; margin: 0px; padding: 0px; } #canvas { background: #000; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #333333; font-family: 'Raleway', sans-serif; font-weight: 500; text-transform: uppercase; } a {color: #fff;} a:hover, a:focus { text-decoration: none; outline: none; } a:focus {color: #fff;} ul, ol {list-style: none;} .clearfix:after { visibility: hidden; display: block; font-size: 0; clear: both; height: 0; } .clearfix {display: inline-block;} .clearfix {display: block;} ul, ol { padding: 0; webkit-padding: 0; moz-padding: 0; } clients-name .radius {border-radius: 50%;} /* img { max-width: 100%; height: auto; } */ /*------------------------------------------*/ /* /* 02.Demo Heading */ /*------------------------------------------*/ .main-area {background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff4200, #ff0035) repeat scroll 0 0;} .main-area h1 { color: #ffffff; text-align: center; font-size: 25px; text-transform: uppercase; padding: 5px; l } .main-area-div { margin-top: 40px; margin-bottom: 40px; } .main-para { text-align: center; font-size: 40px; color: #fff; font-weight: 300; font-family: 'Raleway', sans-serif; text-transform: uppercase; margin-top: 45px; } .para-tex { font-size: 20px; line-height: 30px; color: #c1c1c1; } p { line-height: 25px; padding: 1px; color: #616161; } .no-p {padding: 0px;} p.para { font-size: 16px; margin: 65px 0 65px 0; line-height: 28px; color: #616161; padding: 5px; } .main-para-i { text-align: center; font-size: 50px; color: #fff; font-weight: 200; line-height: 60px; padding-top: 25px } .main-para-bold { text-align: center; font-size: 40px; color: #fff; font-weight: 200; line-height: 50px; } .clients-name { font-size: 23px; color: #c9c9c9; } .list-demos { font-size: 16px; color: #fefefe; padding: 10px; font-family: 'Raleway', sans-serif; text-transform: uppercase; margin-top: 20px; } .demo-head { padding: 0px; margin-top: 0px; } /*------------------------------------------*/ /* /* 03. BG Color /* /*------------------------------------------*/ .light-bg {background: #f7f7f7;} .gray {color: #333;} .light-gray {color: #333;} .white {color: #ffffff;} .yellow { color: #ffde00; font-weight: 600; text-transform: uppercase; } .red { color: #ff0035; font-weight: 600; text-transform: uppercase; } .black { color: #000; font-size: 28px; } .dark {color: #f1f1f1;} .red-s { color: #ff0035; font-weight: 600; font-family: 'Open+Sans', sans-serif; } .interface-img {text-align: center;} .centered {margin: 0 auto;} /*------------------------------------------*/ /* /* 04.Top Banner,lightbox */ /*------------------------------------------*/ .bg-4 { background: url(../img/hero/landing.jpg) no-repeat scroll center center / cover; background-size: cover; } .bg-app { background: url(../img/hero/app.jpg) no-repeat scroll center center / cover; background-size: cover; } .bg-soon { background: url(../img/hero/soon.jpg) no-repeat scroll center center / cover; background-size: cover; } .bg-inner { background: url(../img/fix-inner.jpg) no-repeat scroll center center / cover; background-size: cover; } .text-con-inner { color: #fff; padding: 80px 0 0 0; } .text-con-form { color: #fff; padding: 220px 0 190px; } .pagenation-holder { background: #ff0035; padding: 5px; } .pagenation-holder {color: #fff;} .pagenation_links a:hover {color: #790e15;} .low-back-gradient-inner {position: relative;} .top-heading-inner { color: #fff; font-size: 40px; font-weight: 600; text-transform: uppercase; } .low-back-gradient-inner:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000 none repeat scroll 0 0; opacity: 0.75 } .bg-video {background: url(../img/video-bg.jpg) repeat fixed 0 0 / cover} .bg-footer { background: url(../img/footer-bg.jpg) no-repeat scroll center center / cover; background-size: cover; } .video { position: absolute; top: 0; left: 50%; bottom: 0; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: -999; padding: 0px; margin: 0px; } .text-con-video { color: #fff; padding: 100px 0 100px 0; } .mobile {padding: 35px 0 0 0;} .text-con-i { color: #fff; padding: 160px 0 0 0; } .text-con-rain { color: #000; padding: 190px 0 0 0; } .lead-rain h1 { color: #000; font-size: 30px; line-height: normal; font-family: 'Raleway', sans-serif; font-weight: 300; line-height: normal; margin-top: 100px; text-transform: uppercase; } .lead-rain { font-size: inherit; font-size: 16px; font-weight: normal; line-height: normal; margin-bottom: 70px; } .top-heading-rain { color: #000; font-size: 70px; font-weight: 100; text-transform: uppercase; } .text-con-err { color: #fff; padding: 190px 0 250px 0; } .lead { font-size: inherit; font-size: 16px; font-weight: normal; line-height: normal; margin-bottom: 50px; } .lead h1 { color: #fff; font-size: 30px; line-height: normal; font-family: 'Raleway', sans-serif; font-weight: 300; line-height: normal; margin-top: 100px; text-transform: uppercase; } .lead-fprm h1 { color: #fff; font-size: 30px; line-height: normal; font-family: 'Raleway', sans-serif; font-weight: 300; line-height: normal; margin-top: 40px; } .top-heading { color: #fff; font-size: 55px; font-family: 'Raleway', sans-serif; } .text-con-app {padding: 90px 0 90px;} .top-heading-i { color: #fff; font-size: 52px; font-weight: 100; text-transform: uppercase; } .top-heading-soon { color: #fff; font-size: 85px; font-weight: 100; text-transform: uppercase; padding: 40px 0 25px 0; font-family: 'Raleway', sans-serif; } .top-heading-creative { color: #fff; font-size: 45px; font-weight: 600; } .lead-text { color: #dfdfdf; line-height: 25px; } .lead-controls {margin-top: 0px;} .video-about {padding: 190px 0 0 0;} .video-top {padding: 20px 0 0 0;} .lead-controls-i { margin-top: 0px; display: table-cell; vertical-align: middle; margin: 0 auto; height: 600px; } .lead-laptop { margin-top: 20px; text-align: center; } .lead-controls a { margin-top: 20px; vertical-align: middle; } .play-home { font-size: 15px; display: inline-block; } .btn-lead {margin-right: 20px;} .play-home:hover {text-decoration: none;} .play-home .fa { padding: 1px; color: inherit; vertical-align: middle; margin-right: 10px; font-size: 10px; } .content { position: relative; background-color: #fff; } .low-back {position: relative;} .low-back:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .low-blue {position: relative;} .low-blue:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(16, 150, 189, 0.6); } .low-back-i {position: relative;} .low-back-i:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .low-back-gradient-r {position: relative;} .low-back-gradient-r:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; opacity: 0.93; } .low-back-gradient-i {position: relative;} .low-back-gradient-i:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000 none repeat scroll 0 0; opacity: 0.65 } .low-back-footer-r {position: relative;} .low-back-footer-r:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; opacity: 0.95 } .low-back-dark {position: relative;} .low-back-dark:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .low-back-up { position: relative; z-index: 1; } .mobile * {background-attachment: scroll!important;} .layout {overflow: hidden;} #features1 { padding: 70px 0 60px 0; background: #f1f1f1; } .column {margin-top: 10px;} .banner-f h4 {font-size: 20px;} .banner-f li { padding: 4px 43px; line-height: 28px; color: #ffffff; list-style-type: none; margin-bottom: 14px; } .banner-f ul { margin: 15px 0 0 1px; padding: 0px; } .banner-f-i h4 {font-size: 20px;} .banner-f-i li { padding: 4px 43px; line-height: 28px; color: #000000; background: url(../img/banner-icon.png) no-repeat left 4px; list-style-type: none; margin-bottom: 14px; } .banner-f-i ul { margin: 15px 0 0 1px; padding: 0px; } .video-back { position: absolute; top: 50%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .html-video { top: 0%; left: 0%; max-height: 700px; width: 100%; overflow: hidden; position: relative; } .html-video:before { content: ""; background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video-back-i { position: absolute; top: 50%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .html-video-i { top: 0%; left: 0%; max-height: 610px; width: 100%; overflow: hidden; position: relative; } .html-video-i:before { content: ""; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.90; } .content-slide { position: absolute; top: 40%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .content-slide h2 {padding-top: 100px;} .video-back { position: absolute; top: 50%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .video-back h2 {padding-top: 130px;} .video-text h2 { color: #ffffff; font-size: 25px; text-transform: uppercase; font-family: 'Raleway', sans-serif; } .video-text h1 { color: #ffffff; font-size: 55px; font-family: 'Open+Sans', sans-serif; text-transform: uppercase; } .video-text p { color: #ffffff; font-size: 14px; } video {min-width: 100%} #contact form {padding: 30px 0;} #contact .fa { color: #F4D03F; margin-bottom: 10px; } #contact .text-danger { color: #12212f; text-align: center; font-size: 20px; } .alert-danger { background: #fff; color: #FF9900; border: 1px solid #ff0035; } label { font-size: 12px; font-weight: 400; font-family: 'Open Sans', sans-serif; float: left; } #contact .form-control { display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 22px; background-color: transparent; background-image: none; border-top: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; -o-transition: none; transition: none; margin-top: 25px; border: none; } #contact .form-control:focus { border-color: inherit; outline: 0; -webkit-box-shadow: transparent; box-shadow: transparent; border: none; } .form-control::-moz-placeholder {color: #12212f;} .c-2 { background: #fff; padding: 35px; margin-bottom: 25px; } .form-control { height: 45px; border: none; border-radius: 0px; background: #aaa; color: #fff; } .left-contact {margin-top: -35px;} .contact-back { background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0; padding: 0 0 110px 0; } .contact-back-white { background: #333333; padding: 20px; } .contact-s {} .top-heding-c { background: #75af00; border-radius: 55px; padding: 12px 0 12px 0; font-size: 20px; margin-bottom: 25px; text-transform: uppercase; font-weight: 100; } .top-heding-apply { background: #ff0035; border-radius: 0px; padding: 20px; font-size: 25px; margin-bottom: 25px; text-transform: uppercase; font-weight: 300; color: #fff; } .form-group {margin-bottom: -5px;} .btn-send { display: inline-block; padding: 15px 5px; margin-top: 10px; background: none; color: #000; font-size: 16px; text-shadow: none; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; border-radius: 0px; max-width: 100%; width: 100%; margin-bottom: 15px; border: 1px solid #333; } .btn-send:hover { background-color: #333; color: #fff; border: 1px solid #000; } /*------------------------------------------*/ /* /* 05.Carousel */ /*------------------------------------------*/ .carousel-inner img {margin: 0 auto;} .carousel-indicators {bottom: 22px!important;} #carousel-example-generic { background: url(../img/laptop.png) top center no-repeat; bottom: -10px; max-width: 940px; background-size: contain; padding: 22px 85px 56px; } .carousel-inner {margin: 0 auto;} .banner h1 { text-transform: uppercase; color: #03dea8; font-size: 50px; text-shadow: 0 2px 2px #333; line-height: 35px; margin: 0 0 30px; font-weight: 400; } .banner h1 span { color: #d8e4f1; font-size: 22px; margin-top: 15px; display: block; font-weight: 400; line-height: 25px; text-transform: capitalize; } /*-----------------------------------------*/ /* /* 06.Newsletter */ /*------------------------------------------*/ .text-con-n { color: #fff; padding: 160px 0 160px 0; } .newsletter > h3 { margin-bottom: 23px; font-size: 40px; font-weight: 100; line-height: normal; } .newsletter-content > input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid #ffffff; color: #dfdfdf; font-size: 14px; height: 65px; padding: 0 19px; width: 100%; } .newsletter-content { margin-top: 38px; position: relative; } .newsletter-content .button { border: 0 none; color: #2d3e50; font-size: 18px; height: 100%; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 0; transition: all 0.3s ease 0s; width: 30%; background: #ff0035; color: #fff; border: 1px solid #fff; } .newsletter-content .button:hover { background: #fff; border: 0 none; color: #f8001d; border: 1px solid #fff; } /*------------------------------------------*/ /* /* 07.Benefit */ /*------------------------------------------*/ #benefit {background: url(../img/about/1_about.jpg) repeat fixed 0 0 / cover;} .benefit-text { display: table-cell; vertical-align: middle; height: 600px; padding: 8px; background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; } .benefit-text-o { float: left; margin-left: 10px; } .benefit-right { float: right; padding: 0px; } .benefit-i p { margin-top: 10px; margin-left: 95px; color: #999; } .benefit-orange { float: left; background: #ff0035; border-radius: 0%; color: #fff; font-size: 30px; padding: 15px; width: 65px; height: 65px; margin-right: 10px; margin-left: 5px; border: 0px solid #ffffff; margin-top: 15px; border-radius: 15px 0 0 0; } .benefit-text-i { float: left; color: #fff; font-size: 15px; padding: 5px; width: 80%; margin-left: 5px; margin-bottom: 10px; } .benefit-blue { float: left; background: #ff0035; border-radius: 0%; color: #fff; font-size: 30px; padding: 19px; width: 65px; height: 65px; margin-right: 10px; margin-left: 5px; border: 0px solid #ffffff; margin-top: 15px; border-radius: 30% 0 0 0; } .benefit-green { float: left; background: #ff0035; border-radius: 0%; color: #fff; font-size: 30px; padding: 19px; width: 65px; height: 65px; margin-right: 10px; margin-left: 5px; border: 0px solid #ffffff; margin-top: 15px; border-radius: 30% 0 0 0; } .benefit-red { float: left; background: #ff0035; border-radius: 0%; color: #fff; font-size: 30px; padding: 22px; width: 65px; height: 65px; margin-right: 10px; margin-left: 5px; border: 0px solid #ffffff; margin-top: 15px; border-radius: 30% 0 0 0; } .benefit-b i.fa { margin-right: 15px; color: #fff; font-size: 24px; margin-right: 35px; padding: 4px; } .benefit-c { float: left; color: #fff; font-size: 24px; padding: 10px; border: 1px solid #ff0035; width: 55px; height: 55px; margin-right: 31px; margin-left: 15px; } .about-c i.fa { margin-right: 15px; color: #ff0035; font-size: 24px; margin-right: 35px; padding: 4px; } .benefit-d { float: left; color: #fff; font-size: 24px; width: 55px; height: 55px; margin-right: 31px; margin-left: 15px; } .benefit-ag-a { height: 600px; margin: 0; } .benefit-ag-b { height: 600px; margin: 0; } .about-bus p { margin-top: 25px; margin-bottom: 25px; } .about-deg { float: left; color: #999; font-size: 24px; padding: 10px; border: 2px solid #ff0035; width: 55px; height: 55px; margin-right: 31px; transform: rotate(-45deg); margin-left: 15px; margin-top: 20px; } .benefit-deg i.fa { margin-right: 15px; color: #999; font-size: 20px; margin-right: 35px; padding: 4px; transform: rotate(45deg); } .benefit-heading h3 { font-size: 18px; font-weight: 500; margin-top: 10px; color: #333; } main-bane {width: 100%;} /*------------------------------------------*/ /* /* 08. TEAM */ /*------------------------------------------*/ #team { padding: 110px 0 0px 0; background: #ffffff; } .ms-staff-carousel { max-width: 1170px; overflow: hidden; position: relative; } .ms-staff-carousel .ms-view { overflow: visible; background-color: transparent; } .ms-staff-carousel .ms-nav-prev, .ms-staff-carousel .ms-nav-next { background: url(../img/arrows.png) #f1f1f1 no-repeat -7px -57px; width: 35px; height: 40px; left: -35px; margin-top: -17px; box-shadow: 0px 1px 0px 0px rgb(190, 190, 190); position: absolute; top: 50%; cursor: pointer; } .ms-staff-carousel .ms-nav-next { background-position: -6px -7px; right: -35px; left: auto; } .ms-staff-carousel .ms-staff-info { font-family: 'Roboto Condensed', sans-serif; text-align: center; max-width: 600px; margin-top: 30px; min-height: 220px; color: #222222; } .ms-staff-carousel .ms-staff-info h3 { margin: 0; padding-bottom: 10px; } .ms-staff-carousel .ms-staff-info h4 { color: #777; margin: 0; padding-bottom: 15px; text-transform: capitalize; } .ms-staff-carousel .ms-staff-info .email a { text-decoration: none; color: #a8e12a; } .ms-staff-carousel .ms-staff-info.email, .ms-staff-info p { margin: 4px; font-size: 11pt; } .ms-staff-carousel.ms-round .ms-slide-bgcont { border-radius: 5000px; border: solid 8px rgb(230, 230, 230); margin: 0 -8px; } .ms-staff-carousel.ms-round .ms-nav-prev, .ms-staff-carousel.ms-round .ms-nav-next { background-color: transparent; box-shadow: none; left: -45px; } .ms-staff-carousel.ms-round .ms-nav-next { left: auto; right: -45px } .ms-staff-carousel.ms-round .ms-slide-bgcont { border-radius: 5000px; border: solid 8px rgb(230, 230, 230); margin: 0 -8px; } .team .team-box { text-align: center; padding: 5px; border: 1px solid #eee; border-radius: 4px; } .team .team-box img { display: block; margin: 0 auto; } .team .team-box h4 { margin-bottom: 0px; text-transform: uppercase; font-weight: 800; margin-top: 15px; } .team .team-box em { display: block; margin-bottom: 15px; margin-top: 10px; } .ms-socials {} .ms-socials li {} .ms-socials li a {} .ms-socials li a i { color: #fff; display: block; font-size: 20px; height: 45px; line-height: 45px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 45px; box-shadow: 0 0 0 7px transparent; } .facebook {background: #ff0035;} .facebook:hover {box-shadow: 0 0 0 0px #5D82D1} .twitter {background: #ff0035} .twitter:hover {box-shadow: 0 0 0 0px #40BFF5} .youtube {background: #ff0035} .youtube:hover {box-shadow: 0 0 0 0px #CC181E} .linkedin {background: #ff0035} .linkedin:hover {box-shadow: 0 0 0 0px #238CC8} /*------------------------------------------*/ /* /* 09.Team Box */ /*------------------------------------------*/ #team { padding: 110px 0 80px 0; background: #fff; } .team-item { padding-left: 15px; padding-right: 15px; } .team-item h5 { padding-left: 15px; padding-right: 15px; color: #f1f1f1; font-size: 20px; line-height: normal; } .team-item p {color: #666666;} .team-item-img {position: relative;} .team-item-img > img { width: 100%; border: 5px solid #eee; } .team-item-img .team-item-detail { background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; text-align: center; color: #fff; display: -webkit-flex; display: flex; height: calc(100% - 20px); width: calc(100% - 20px); position: absolute; top: 10px; left: 10px; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .team-item:hover .team-item-detail { opacity: 1; visibility: visible; } .team-item-img .team-item-detail .team-item-detail-inner, .cent-mid-content { margin: auto; padding: 25px; } .team-item-img .team-item-detail .team-item-detail-inner .social { margin: 5px 0px 0px 0px; padding: 0px; } .team-item-img .team-item-detail .team-item-detail-inner .social li { list-style: none; display: inline-block; margin: 0px 5px; } .team-item-img .team-item-detail .team-item-detail-inner .social li a { color: #ffffff; font-size: 16px; } .team-item-img .team-item-detail .team-item-detail-inner .social li a:hover {color: #0bbae0;} .team-item-info { padding-top: 15px; text-align: center; background: #eee; } .team-item-info h5, .team-item-info h6 { margin-bottom: 5px; font-size: 18px; color: #333; font-weight: 600; } .team-item-info p { margin-bottom: 0px; font-weight: 600; font-size: 15px; color: #737373; padding: 0 0 20px 0; } #about-us {padding: 110px 0 110px 0;} #about-review {background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0;} #about-review-full { background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; padding: 60px 0 40px 0; } #about-review-full-white { background: #ff0035; padding: 80px 0 0px 0; } .review {padding: 40px;} .review-text { font-size: 17px; line-height: 26px; margin-bottom: 25px; } /*------------------------------------------*/ /* /* 10.Testimonials */ /*------------------------------------------*/ #testimonials { background-size: cover; background-attachment: fixed; color: #fff; padding: 70px 0 70px 0; font-size: 18px; } #testimonials-w { background-size: cover; background-attachment: fixed; color: #fff; padding: 110px 0; font-size: 18px; } #testimonial {padding: 0;} #testimonial .item { display: block; width: 100%; height: auto; } #testimonial .item p { font-weight: 500; margin: 30px 0; color: #ddd; } .reviewer-img { background: rgba(0, 0, 0, 0) url("../img/about/1_about.jpg") repeat fixed 0 0 / cover; height: 600px; margin: 0; } /*------------------------------------------*/ /* /* 11.Navigation */ /*------------------------------------------*/ #nav { background: #fff; text-transform: uppercase; } .navbar-custom { background: #fff; color: #fff; } .navbar-toggle { color: #333; font-size: 21px; } .navbar-brand { margin-top: 11px; background: url(../img/logo-in.png) no-repeat; width: 185px; height: 39px; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background: #333;} .navbar-nav > li:hover > a, .navbar-nav > li > a:focus { color: #ff0035; background: none; } .menu-b { color: #000; background: #000; } .navbar-nav > li > a { padding: 13px 10px; text-transform: uppercase; margin-top: 0px; font-size: 11px; letter-spacing: 1px; font-weight: 600; letter-spacing: 2px; } .navbar-nav > li.active > a {} .navbar-nav {margin: 5px 0 5px 0;} .navbar-nav > li > .dropdown-menu { margin-top: 0px; margin-left: -65px; } .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {max-height: 500px;} .dropdown-menu > li > a { line-height: 22px; font-size: 14px; border-bottom: 1px solid #f1f1f1; text-align: left; width: 250px; font-family: 'Open Sans', sans-serif; padding: 12px 16px; text-transform: uppercase; color: #ffffff; } .dropdown-menu > li > active a:hover { line-height: 38px; border-bottom: 1px solid #f1f1f1; text-align: center; width: 250px; font-family: 'Open Sans', sans-serif; } .navbar-right .dropdown-menu { right: auto; left: 0; font-size: 14px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #f8001d; ; color: #fff; font-size: 14px; width: 100%; } .button_Demo { max-width: 250px; margin: 0 auto; } .button_flat { border-radius: 0px; color: #fff; display: inline-block; font-weight: bold; margin: 7px 0 0; padding: 6px 35px; text-transform: uppercase; transition: all 300ms ease-in-out 0s; font-size: 12px; background: #ff0035; } .button_flat: hover { border-radius: 50px; color: #fff; display: inline-block; font-weight: bold; margin: 8px 0 0; padding: 10px 25px; text-transform: uppercase; transition: all 300ms ease-in-out 0s; font-size: 13px; background: #fff; } .button_flat a { border-radius: 0px; color: #fff; display: inline-block; font-weight: bold; margin: 7px 0 0; padding: 6px 35px; text-transform: uppercase; transition: all 300ms ease-in-out 0s; font-size: 12px; background: #ff0035; } .button_flat a:hover { border-radius: 0px; color: #fff; display: inline-block; font-weight: bold; margin: 7px 0 0; padding: 6px 35px; text-transform: uppercase; transition: all 300ms ease-in-out 0s; font-size: 12px; background: #fff; } .btn-donate { width: 150px; text-align: center; line-height: 24px; padding: 8px 15px; border-radius: 0px; color: #ffffff; font-size: 12px; text-transform: uppercase; font-weight: 700; font-family: 'Raleway', sans-serif; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; margin-top: 8px; letter-spacing: 1px; } .btn-donate:hover { background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff4200, #ff0035) repeat scroll 0 0; color: #000; letter-spacing: 1px; } .btn-donate a:hover {color: #fff;} .theme-btn { display: inline-block; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; font-family: 'Raleway', sans-serif; } /*------------------------------------------*/ /* /* 12.Mobile Apps */ /*------------------------------------------*/ #mobile-apps { padding: 110px 0 110px 0; background: #fff } #mobile-apps h2 { font-size: 40px; margin-bottom: 55px; } #app-download { overflow: hidden; padding: 110px 0px 110px 0px; } #app-download-i { overflow: hidden; padding: 110px 0px 110px 0px; } /*------------------------------------------*/ /* /* 13. Laptop Demo Slide */ /*------------------------------------------*/ .Demo { overflow: hidden; padding: 110px 0px 90px 0px; background: #f1f1f1; } .Demo-app h1 { font-size: 40px; font-weight: 400; padding: 15px 0 15px 0; text-transform: uppercase; } .Demo .title { margin-bottom: 70px; text-align: center; } .Demo .carousel-indicators { position: relative; bottom: 0; left: 0; margin-top: 0pxmargin-bottom: 0px; margin-left: 0px; padding: 5px; padding-bottom: 8px; width: 100%; margin-top: 45px; } .Demo .carousel-indicators .active { width: 30px; height: 5px; border: none; border-radius: 0px; background: #ff0035; } .Demo .carousel-indicators li { display: inline-block; margin: 1px; width: 30px; height: 5px; border: none; border-radius: 0px; text-indent: -999px; cursor: pointer; background: #ffffff; } /*------------------------------------------*/ /* /* 14. Content Slide App Slide */ /*------------------------------------------*/ .join-us { overflow: hidden; padding: 110px 0px 100px 0px; background: #ffffff; } .join-us-icon .ico { margin: 0 auto; font-size: 35px; color: #333; line-height: 65px; width: 60px; height: 60px; text-align: center; border: 1px solid #e1e1e1; margin-top: 9px; float: left; margin-right: 15px; } .join-us-app h1 { font-size: 45px; font-weight: 100; padding: 15px 0 15px 0; text-transform: uppercase; line-height: normal; } .join-us .title { margin-bottom: 70px; text-align: center; } .join-us .features .row {margin-bottom: 40px;} .join-us .carousel h1 { font-size: 50px; font-weight: 200; } .join-us .carousel h1, .offer p { text-align: left; font-weight: 200; text-transform: uppercase; } .list-o h4 {font-size: 20px;} .list-o i { color: #ff0035; margin-right: 7px; font-size: 15px; } .list-o li { padding: 4px 3px; line-height: 28px; color: #616161; list-style-type: none; margin-bottom: 35px; } .list-o ul { margin: 15px 0 0 1px; padding: 0px; } .join-us p { color: #616161; font-size: 15px; margin-top: 25px; line-height: 28px; } .detail .carousel-control {background: none;} .join-us .ceo { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/ceo.png') no-repeat; background-size: 100%; margin-top: -36px; } .join-us .ceo2 { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/ceo.png') no-repeat; background-size: 100%; } .join-us .ceo3 { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/ceo.png') no-repeat; background-size: 100%; } .join-us .ceo img { margin-right: auto; margin-left: auto; padding-left: 4px; width: 270px; } .join-us .carousel-indicators { position: relative; bottom: 0; left: 0; margin-bottom: 0px; margin-left: 0px; padding: 5px; padding-bottom: 8px; width: 100%; margin-top: -15px; color: #ccc; } .join-us .carousel-indicators .active { width: 30px; height: 5px; border: none; border-radius: 0px; background: #ff0035; } .join-us .carousel-indicators li { display: inline-block; margin: 1px; width: 30px; height: 5px; border: none; border-radius: 0px; text-indent: -999px; cursor: pointer; background: #ccc; } .app-slide { overflow: hidden; padding: 110px 0px 30px 0px; background: none; text-align: left; } .app-slide .title { margin-bottom: 70px; text-align: center; } .app-slide-icon .ico { margin: 0 auto; font-size: 30px; color: #333333; line-height: 65px; width: 60px; height: 60px; text-align: center; border: 2px solid #e1e1e1; margin-top: 9px; float: left; margin-right: 15px; background: #fff; } .app-slide .features .row {margin-bottom: 40px;} .app-slide .carousel h1 { font-size: 51px; font-weight: 200; margin-top: 35px; } .app-slide .carousel h1, .offer p { text-align: left; font-weight: 200; text-transform: uppercase; color: #fff; } .list-app h4 {font-size: 20px;} .list-app i { color: #fff; margin-right: 7px; font-size: 15px; } .list-app li { padding: 15px 3px; line-height: 28px; color: #fff; list-style-type: none; margin-bottom: 14px; } .list-app ul { margin: 15px 0 0 1px; padding: 0px; } .app-slide p { color: #fff; font-size: 15px; margin-top: 25px; line-height: 28px; } .detail .carousel-control {background: none;} .low-back-gradient-app {position: relative;} .low-back-gradient-app:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to left, #0c96c4, #ff0035) repeat scroll 0 0; opacity: 0.85; } .app-slide .ceo { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/app-s.png') no-repeat; } .app-slide .ceo2 { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/app-screenshots/app-s.png') no-repeat; } .app-slide .ceo3 { overflow: hidden; margin-right: auto; margin-left: auto; padding-top: 95px; height: 650px; background: url('../img/app-screenshots/app-s.png') no-repeat; } .app-slide .ceo img { margin-right: auto; margin-left: auto; padding-left: 4px; width: 270px; } .app-slide .carousel-indicators { position: relative; bottom: 0; left: 0; margin-bottom: 0px; margin-left: 0px; padding: 5px; padding-bottom: 8px; width: 100%; margin-top: -15px; color: #ccc; } .app-slide .carousel-indicators .active { width: 30px; height: 5px; border: none; border-radius: 0px; background: #ff0035; } .app-slide .carousel-indicators li { display: inline-block; margin: 1px; width: 30px; height: 5px; border: none; border-radius: 0px; text-indent: -999px; cursor: pointer; background: #ccc; } /*------------------------------------------*/ /* /* 15. Button */ /*------------------------------------------*/ .btn-top { border-radius: 10px; background: #fff; color: #ff0035; font-size: 20px; font-weight: normal; padding: 20px 50px; margin-top: 25px; text-transform: uppercase; } .top-download { padding: 30px 0 30px 0; line-height: 28px; } .top-btn-text { font-size: 23px; text-transform: uppercase; color: #ffffff !important; line-height: 28px; padding-top: 21px; } .btn-download-w { display: inline-block; border: 1px solid #ffffff; padding: 20px 30px; background-color: transparent; color: #ffffff; font-size: 18px; text-shadow: none; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; border-radius: 0px; max-width: 100#; width: 225px; } .btn-download-w:hover { background-color: #fff; border: 1px solid #ffffff; color: #333; text-decoration: none; display: inline-block; } .btn-download-send { display: inline-block; border: none; padding: 20px 30px; background-color: #000; color: #ffffff; font-size: 18px; text-shadow: none; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; border-radius: 0px; max-width: 100#; width: 225px; margin-top: 22px; } .btn-download-send:hover { background-color: #fff; border: none; color: #333; text-decoration: none; display: inline-block; } .btn-download-small { display: inline-block; border: 1px solid #ff0035; padding: 12px 30px; background: #ff0035; color: #ffffff; font-size: 16px; font-weight: 600; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 190px; margin-top: 22px; } .btn-download-small i { color: #fff; font-size: 22px; } .btn-download-small:hover i {color: #333;} .btn-download-small:hover { background-color: transparent; border: 1px solid #ff0035; color: #333; text-decoration: none; display: inline-block; } .btn-download-small:focus {color: #ffffff;} .btn-download { display: inline-block; border: 1px solid #ff0035; padding: 20px 30px; background: #ff0035; color: #ffffff; font-size: 18px; font-weight: 600; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 235px; } .btn-download i { color: #fff; font-size: 22px; } .btn-download:hover i {color: #333;} .btn-download:hover { background-color: transparent; border: 1px solid #ff0035; color: #333; text-decoration: none; display: inline-block; } .btn-download:focus {color: #ffffff;} .btn-download-app { display: inline-block; border: 1px solid #ff0035; padding: 25px 30px; background: #fff; color: #333; font-size: 18px; font-weight: 600; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 235px; margin-top: 18px; } .btn-download-app i { color: #333; font-size: 22px; } .btn-download-app:hover i {color: #fff;} .btn-download-app:hover { background-color: transparent; border: 1px solid #fff; color: #fff; text-decoration: none; display: inline-block; } .btn-download-red { display: inline-block; border: 1px solid #ff0035; padding: 15px 30px; background: #ff0035; color: #fff; font-size: 18px; font-weight: 600; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; margin-top: 18px; } .btn-download-red i { color: #fff; font-size: 22px; } .btn-download-red:hover i {color: #fff;} .btn-download-red:hover { background-color: transparent; border: 1px solid #fff; color: #fff; text-decoration: none; display: inline-block; } .btn-download-red:focus {color: #ffffff;} .btn-download-app-tr { display: inline-block; border: 1px solid #fff; padding: 25px 30px; background: none; color: #fff; font-size: 18px; font-weight: 600; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 235px; } .btn-download-app-tr i { color: #fff; font-size: 22px; } .btn-download-app-tr:hover i {color: #333;} .btn-download-app-tr:hover { background-color: #fff; border: 1px solid #fff; color: #333; text-decoration: none; display: inline-block; } .btn-download-app-tr:focus {color: #ffffff;} .btn-get { display: inline-block; padding: 20px 30px; border: 1px solid #ff0035; color: #ff0035; font-size: 18px; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; margin: 25px 10px 0; text-transform: uppercase; max-width: 100%; width: 225px; font-weight: 600; } .btn-get:hover { background-color: #ff0035; color: #ffffff; text-decoration: none; display: inline-block; } .btn-get i { color: #fff; font-size: 22px; color: #ff0035; } .btn-get:hover i { color: #fff; font-size: 22px; } .btn-get:focus {color: #ffffff;} .btn-download-black { font-weight: 600; display: inline-block; border: 1px solid #ff0035; padding: 20px 30px; background: #ff0035; color: #ffffff; font-size: 18px; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 225px; } .btn-download-black:hover { background-color: transparent; border: 1px solid #ff0035; color: #ffffff; text-decoration: none; display: inline-block; } .btn-small { border: 1px solid #c1c1c1; text-transform: uppercase; text-decoration: none; border-radius: 0px; color: #fff; font-size: 13px; font-weight: 600; margin-top: 25px; padding: 10px 20px 10px 18px; transition: all 0.5s ease 0s; background: #ff0035; } .btn-small:hover { background: #fff; color: #333; text-decoration: none; } .btn-ordernow { font-weight: 600; display: inline-block; border: 1px solid #ff0035; padding: 20px 30px; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; color: #ffffff; font-size: 18px; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 225px; } .btn-ordernow:hover { background-color: transparent; color: #333; text-decoration: none; display: inline-block; max-width: 100#; width: 225px; } .btn-ordernow-black { font-weight: 600; display: inline-block; border: 1px solid #ffffff; padding: 20px 30px; background: #333; color: #fff; font-size: 18px; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; text-transform: uppercase; max-width: 100%; width: 225px; } .btn-ordernow-black:hover { background-color: transparent; border: 1px solid #000; color: #333; text-decoration: none; display: inline-block; } .btn-ordernow-black:focus {color: #ffffff;} .btn-intro { font-weight: 600; display: inline-block; border: 1px solid #ff0035; padding: 20px 30px; background: #ff0035; color: #ffffff; font-size: 18px; text-shadow: none; border-radius: 0px; text-decoration: none; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; margin: 25px 10px 0; max-width: 245px; width: 100%; text-transform: uppercase; } .btn-intro:hover { background-color: transparent; border: 1px solid #ff0035; color: #ffffff; text-decoration: none; display: inline-block; } .btn-intro:focus {color: #ffffff;} .intro-buttons-2 > a:first-child { font-size: 15px; font-weight: 700; text-transform: uppercase; color: #fff; border-radius: 0px; padding: 14px 30px; } .intro-buttons-2 > a:first-child:hover { color: #000; background: #fff; border: 2px solid #fefefe; } .intro-buttons-2 > a > i { height: 50px; width: 50px; text-align: center; line-height: 42px; border: 4px solid #b0b0b0; border-radius: 50%; margin-right: 12px; -webkit-transition: all .3s; transition: all .3s; color: #fff; background: #ff0035; } .intro-buttons-2 > a:last-child { color: #fff; font-size: 15px; text-transform: uppercase; font-weight: 700; border: 1px solid #606060; } .about-buttons-2 > a:first-child { font-size: 15px; font-weight: 700; text-transform: uppercase; color: #fff; border-radius: 100px; padding: 14px 40px; font-size: 16px; margin-right: 20px; } .about-buttons-2 > a:first-child:hover {color: #000;} .about-buttons-2 > a > i { height: 150px; width: 150px; text-align: center; line-height: 120px; font-size: 35px; border: 15px solid #ffffff; border-radius: 50%; margin-right: 12px; -webkit-transition: all .3s; transition: all .3s; color: #fff; background: none; } .about-buttons-2 > a:hover > i { height: 150px; width: 150px; text-align: center; line-height: 120px; font-size: 35px; border: 15px solid #ffffff; border-radius: 50%; margin-right: 12px; -webkit-transition: all .3s; transition: all .3s; color: #fff; background: #ff0035; } .about-buttons-2 > a:last-child { color: #fff; font-size: 15px; text-transform: uppercase; font-weight: 700; } /* general carousel */ /*------------------------------------------*/ /* /* 16. Owl Slide */ /*------------------------------------------*/ .owl-carousel {padding-bottom: 45px;} .carousel-box { background-color: #fff; margin: 0 15px; position: relative; overflow: hidden; } .carousel-box img { -webkit-transition: transform 1s ease; -moz-transition: transform 1s ease; -o-transition: transform 1s ease; -ms-transition: transform 1s ease; transition: transform 1s ease; } .carousel-box:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .carousel-box .btn {font-weight: 800;} .carousel-box h3 { font-size: 18px; color: #2d373c; } .carousel-content { position: absolute; left: 0; bottom: 0; width: 100%; background-color: #fff; padding: 0 20px 20px; } .carousel-content p {margin-bottom: 20px;} .carousel-subtitle {padding-bottom: 10px;} .carousel-box-type { background-color: #2d373c; width: 40px; height: 40px; position: absolute; top: 10px; right: 10px; color: #fff; text-align: center; display: table; z-index: 1; } .carousel-box-type i { display: table-cell; vertical-align: middle; } /* general carousel */ .revew-carousel .owl-controls { position: absolute; right: 40px; bottom: -30px; } .revew-carousel .owl-controls .owl-buttons div { cursor: pointer; border: 2px solid #ffffff; -webkit-border-radius: 0 30% 0 0; -moz-border-radius: 0 30% 0 0; border-radius: 0 30% 0 0; width: 42px; height: 42px; text-align: center; position: absolute; top: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: transparent; z-index: 99; opacity: 1; padding: 0; } .revew-carousel .owl-controls .owl-buttons .owl-next {right: 0;} .revew-carousel .owl-controls .owl-buttons .owl-next:hover { right: 0; background: #001b24; } .revew-carousel .owl-controls .owl-buttons .owl-prev {right: 50px;} .revew-carousel .owl-controls .owl-buttons .owl-prev:hover { right: 50px; background: #001b24; } .revew-carousel .owl-controls .owl-buttons i { font-size: 18px; color: #ffffff; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; padding-top: 9px; } .general-carousel .owl-controls { position: absolute; right: 20px; bottom: -30px; } .general-carousel .owl-controls .owl-buttons div { cursor: pointer; border: 1px solid #cfcfcf; -webkit-border-radius: 0 30% 0 0; -moz-border-radius: 0 30% 0 0; border-radius: 0 30% 0 0; width: 42px; height: 42px; text-align: center; position: absolute; top: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #f1f1f1; z-index: 99; opacity: 1; padding: 0; } .general-carousel .owl-controls .owl-buttons .owl-next {right: 0;} .general-carousel .owl-controls .owl-buttons .owl-next:hover { right: 0; background: #ffffff; } .general-carousel .owl-controls .owl-buttons .owl-prev {right: 50px;} .general-carousel .owl-controls .owl-buttons .owl-prev:hover { right: 50px; background: #ffffff; } .general-carousel .owl-controls .owl-buttons i { font-size: 18px; color: #333; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; padding-top: 9px; } /*------------------------------------------*/ /* /* 17. section */ /*------------------------------------------*/ .section-title.center { padding: 10px 0 0 0; text-align: center; } .section-title.black { padding: 10px 0 0 0; text-align: center; } .section-title h2, .section-title.center h2 { font-weight: 100; margin-bottom: 35px; font-size: 45px; margin-top: -22px; padding-top: 45px; } .section-title.center hr { height: 2px; width: 90px; text-align: center; position: relative; background: #ffffff; margin: 0 auto; margin-bottom: 30px; border: 0; } .section-title.freelancer h2 { font-weight: 200; font-size: 40px; max-width: 450px; margin: 0 auto; padding: 30px; border: 3px solid #ffffff; margin-bottom: 55px; } .section-title.about hr { height: 4px; width: 90px; text-align: center; position: relative; background: #ff0035; margin: 0 auto; margin-bottom: 30px; border: 0; } .section-title.feature hr { height: 4px; width: 90px; text-align: center; position: relative; background: #ffffff; margin: 0 auto; margin-bottom: 30px; border: 0; } .section-title.white hr { height: 4px; width: 90px; text-align: center; position: relative; background: #ffffff; margin: 0 auto; margin-bottom: 30px; border: 0; } .section-title.black hr { height: 4px; width: 90px; text-align: center; position: relative; background: #ff0035; margin: 0 auto; margin-bottom: 30px; border: 0; } /*......................*/ .carousel-iphone { margin-right: auto; margin-left: auto; width: 320px; height: 672px; background: url('../img/iphone-front.png') no-repeat; background-size: 100%; } .carouse2 { position: relative; margin-right: auto; margin-left: auto; padding: 95px 0px 0px 4px; width: 282px; } .carousel-indicators .active { width: 10px; height: 10px; background: #999; } .carousel-indicators {bottom: 77px;} .carousel-indicators li { display: inline-block; margin: 1px; width: 10px; height: 10px; border: 1px solid #666666; border-radius: 10px; text-indent: -999px; cursor: pointer; } /*------------------------------------------*/ /* /* 18. Modern Agency Services */ /*------------------------------------------*/ #services-icon { background: #f1f1f1; padding: 110px 0 110px 0; } #services-icon .lead, #services-icon h2 {color: #333333;} .services-icon-wrap { padding: 40px 20px; background: #fff; border-radius: 0px; margin: 0 0 40px; } .services-icon-wrap:hover { padding: 40px 20px; background: #fff; border-radius: 0px; margin: 0 0 40px; box-shadow: 0 1px 15px 0 #cfcfcf; transition: all 300ms ease-in-out 0s; } .services-icon-wrap h3 { font-size: 18px; margin: 10px 0; text-transform: uppercase; font-weight: 600; } .services-icon-wrap .pull-left {margin-right: 20px;} /*------------------------------------------*/ /* /* 19. Corporate Services */ /*------------------------------------------*/ #services { padding: 110px 0 110px 0; background: #fff; } .service { background: #fff; border: 1px solid #eee; margin-bottom: 0px; padding: 45px 15px 45px 15px; } .service:hover { background: #f1f1f1; border: 1px solid #eee; margin-bottom: 0px; padding: 45px 15px 45px 15px; color: #fff; transition: all 0.5s ease 0s; box-shadow: 0 0 22px 0 #999; z-index: +999; } .services img { background: #fff; border: 6px solid #000; } .section-title.center hr {background: #ff0035;} #services h2 {font-size: 45px;} .services { border: 1px solid #eeeeee; margin-bottom: 55px; padding: 15px; } #services h4 { text-transform: uppercase; transition: all 0.5s; margin-top: 20px; font-size: 20px; margin-bottom: 20px; } .space {margin-top: 40px;} #services i.fa { font-size: 40px; width: 110px; height: 110px; padding: 35px 0; margin-bottom: 10px; border-radius: 10%; color: #ffffff; background: #ff0035; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #services .service:hover > i.fa {color: #ffffff;} #main-centent { background: url(../img/fixed-img.jpg) repeat fixed 0 0 / cover; padding: 110px 0 110px 0; } #main-centent-i { background: url(../img/fixed-img.jpg) repeat fixed 0 0 / cover; padding: 110px 0 110px 0; } #main-centent-ii { background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; padding: 60px 0 0px 0; } #main-centent-iii { background: url(../img/fixed-img.jpg) repeat fixed 0 0 / cover; padding: 110px 0 0px 0; } #main-centent-iv { background: url(../img/fixed-img.jpg) repeat fixed 0 0 / cover; padding: 110px 0 0px 0; } #main-bottam { background: #ff0035; padding: 75px 0 75px 0; } #main-demos { color: #ffffff; background: #f1f1f1; } /*------------------------------------------*/ /* /* 20. Agency Services */ /*------------------------------------------*/ #rotate-services { padding: 110px 0 110px 0; background: #f1f1f1; } #rotate-services-s { padding: 110px 0 110px 0; background: #fff; } .single_service { padding: 70px 0 50px 0; color: #ffffff; } .service_div h4 { font-size: 20px; font-weight: 500; text-transform: uppercase; font-family: font-family: 'Open+Sans', sans-serif; } .single_service i { position: relative; overflow: hidden; } .single_service .ico { margin: 0 auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); font-size: 40px; color: #ffffff; line-height: 130px; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; width: 150px; height: 150px; text-align: center; border: 10px solid #fff; outline: 1px solid #f1f1f1; } .single_services .ico { margin: 0 auto; font-size: 60px; color: #000; line-height: 130px; width: 120px; height: 120px; text-align: center; border: 2px solid #999; outline: 12px solid #f1f1f1; } .stock { border: 1px solid #eaeaea; padding: 15px; margin-left: 0px; } .stock:hover { border: 1px solid #eaeaea; padding: 15px; margin-left: 0px; background: #ffffff; transition: all 0.5s ease 0s; } .single_service .ico:hover { color: #ffffff; background: #ff0035; cursor: pointer; -webkit-transition: ease-out .5s; -moz-transition: ease-out .5s; -o-transition: ease-out .5s; transition: ease-out .5s; } .single_service .ico i { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .single_service .ico span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #design {padding: 110px 0 110px 0;} .uni-design {margin-top: 55px;} /*------------------------------------------*/ /* /* 21. Business Services */ /*------------------------------------------*/ #services-box { padding: 110px 0 110px 0; background: #ffffff; } .box { border: 1px solid #d3d3d3; font-weight: 300; margin: 10px 0; min-height: 265px; padding: 20px; transition: all 0.5s ease 0s; background: #ffffff; } .box h4 { text-transform: uppercase; font-size: 20px; margin-top: 25px; } .box i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #632fff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-i i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #75af22; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-i:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-ii i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #dfb30d; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-ii:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-iii i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #ff4200; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-iii:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-iv i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #a022af; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-iv:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-v i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #df0663; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-v:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } .box-vi i.fa { font-size: 30px; width: 100px; height: 100px; padding: 35px 0; margin-bottom: 10px; border-radius: 50%; color: #ffffff; background: #000; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; line-height: 8px; margin-top: 25px; border: 10px solid #f1f1f1; } .box-vi:hover > i.fa { color: #fff; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); padding: 30px 0; } /*------------------------------------------*/ /* /* 22. About Us */ /*------------------------------------------*/ #about {background: #eee;} .about-cor { padding: 30px; display: table-cell; vertical-align: middle; height: 600px; } .about-text { display: table-cell; vertical-align: middle; height: 600px; padding: 25px; } .about-i p { margin-top: 10px; margin-left: 105px; color: #fff; } .about-cor-a { background: rgba(0, 0, 0, 0) url("../img/about/1_about.jpg") repeat fixed 0 0 / cover; height: 600px; margin: 0; } .about-cor-b { background: rgba(0, 0, 0, 0) url("../img/hero/statup.jpg") repeat fixed 0 0 / cover; height: 600px; margin: 0; } .about-b { float: left; background: #ff0035; border-radius: 0%; color: #000; font-size: 24px; padding: 16px; border: 2px solid #f1f1f1; width: 65px; height: 65px; margin-right: 31px; margin-left: 15px; border-radius: 0 20px 0 0; } .about-b i.fa { margin-right: 15px; color: #ffffff; font-size: 24px; margin-right: 35px; padding: 4px; } .about-c { float: left; color: #fff; font-size: 24px; padding: 10px; border: 1px solid #ff0035; width: 55px; height: 55px; margin-right: 31px; margin-left: 15px; } .about-c i.fa { margin-right: 15px; color: #ff0035; font-size: 24px; margin-right: 35px; padding: 4px; } .about-d { float: left; color: #fff; font-size: 24px; width: 55px; height: 55px; margin-right: 31px; margin-left: 15px; } .about-ag-a { background: url(../img/about/about-ag-1.jpg) scroll center center / cover; height: 600px; margin: 0; } .about-ag-b { background: url(../img/about/about-ag-2.jpg) scroll center center / cover; height: 600px; margin: 0; } #about-i {background: #ff0035;} .about-bus p { margin-top: 25px; margin-bottom: 25px; } .about-deg { float: left; color: #999; font-size: 24px; padding: 10px; border: 5px solid #ffffff; width: 55px; height: 55px; margin-right: 31px; transform: rotate(-45deg); margin-left: 15px; margin-top: 20px; } .about-deg i.fa { margin-right: 15px; color: #fff; font-size: 20px; margin-right: 35px; padding: 4px; transform: rotate(45deg); } .about-heading h3 { padding-left: 40px; font-size: 21px; font-weight: 600; margin-top: 30px; color: #ffffff; } .about-text-bus {padding: 70px 0 0 0px;} .about-img-bus-w { background: url(../img/about/bus-bg.jpg) no-repeat scroll center center / cover; height: 600px; margin: 0; } .about-img-bus-p { background: url(../img/about/bus-bg-2.jpg) no-repeat scroll center center / cover; height: 600px; margin: 0; } .about-img-bus-f { background: url(../img/about/bus-bg-3.jpg) no-repeat scroll center center / cover; height: 600px; margin: 0; } .about-ma-a { height: 600px; margin: 0; } .about-ma-list { padding: 15px 0 0 15px; margin-top: 55px; } .about-start-up {background: #ff0035;} #about-freelancer { color: #444; background: #ffffff; padding: 110px 0 0px 0; } /*------------------------------------------*/ /* /* 23. Achivements */ /*------------------------------------------*/ #achivements { padding: 110px 0 110px 0; color: #aaa; } #achivements-i { padding: 110px 0 110px 0; color: #aaa; background: #ff0035; } .achivement-box { text-align: center; margin: 20px 0; border: 1px solid #636363; padding: 55px 0 55px 0; } .achivement-box:hover { text-align: center; margin: 20px 0; border: 1px solid #ff0035; padding: 55px 0 55px 0; } .achivement-box i.fa { font-size: 60px; font-weight: 400; color: #fff; margin-bottom: 20px; } .achivement-box .ico span { font-size: 70px; font-weight: 400; color: #B5B5B5; margin-bottom: 20px; } .achivement-box h4 { font-size: 15px; text-transform: uppercase; color: #fff; } .achivement-box span.count { font-size: 30px; color: #fff; display: block; font-family: 'Open Sans', sans-serif; font-weight: 600; } .achivement-box-i { text-align: center; margin: 20px 0; } .achivement-box-i i { font-size: 30px; background: none; padding: 20px; font-weight: 400; color: #fff; margin-bottom: 30px; border: 2px solid #fff; } .achivement-box-i h4 { font-size: 15px; text-transform: uppercase; color: #fff; } .achivement-box-i span.count { font-size: 38px; color: #fff; display: block; font-family: 'Open Sans', sans-serif; font-weight: 600; } .achivement-box-g { text-align: center; margin: 20px 0; } .achivement-box-g i { font-size: 30px; background: none; padding: 20px; font-weight: 400; color: #fff; margin-bottom: 30px; border: 2px solid #fff; } .achivement-box-g h4 { font-size: 15px; text-transform: uppercase; color: #fff; } .achivement-box-g span.count { font-size: 38px; color: #fff; display: block; font-family: 'Open Sans', sans-serif; font-weight: 600; } /*----------------------------------------*/ /* /* 24. work */ /*------------------------------------------*/ .our-best-work { padding: 110px 0 90px 0; background: #f1f1f1; } .our-best-work .col-md-3 {padding: 0;} .single-work { overflow: hidden; position: relative; } .single-work:hover a > img {transform: scale(1.2);} .single-work:hover .work-info {opacity: 1;} .single-work > a > img { cursor: crosshair; overflow: hidden; transform: scale(1); transition: all 0.3s ease 0s; margin-top: 0px; border: 10px solid #fff; margin-top: 65px; } .work-info { bottom: 0; opacity: 0; padding: 18px 0 18px 15px; position: absolute; transition: all 0.3s ease 0s; width: 100%; z-index: 5; background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; } .work-info > h5 { color: #fff; display: table; font-size: 23px; } .work-link { align-content: center; color: #fff; display: flex; flex-direction: column; height: 100%; justify-content: center; position: absolute; right: 0; text-align: center; top: 0; width: 17%; z-index: 6; background: #ff0035; } .work-link:hover {color: #eaeaea;} .work-link i { font-size: 22px; vertical-align: middle; } /*----------------------------------------*/ /* /* 25. Our Team,App,Clients */ /*------------------------------------------*/ #app-g-back {padding: 110px 0 110px 0;} #client { background: #fff; padding: 110px 0 10px 0; } #apps-screen { background: #f1f1f1; padding: 110px 0 110px 0; } .caption h3 { font-size: 20px; font-family: 'Open+Sans', sans-serif; color: #333; } /*------------------------------------------*/ /* /* 26. Portfolio */ /*------------------------------------------*/ #Portfolio { padding: 110px 0 100px 0; background: #ffffff; text-align: center; } #Portfolio-p-f { padding: 0px; background: #ffffff; text-align: center; } #works-ii { padding: 110px 0 100px 0; background: #f1f1f1; } #best-work-p { padding: 0px; margin: 0px; } /*------------------------------------------*/ /* /* 27. Testimonials */ /*------------------------------------------*/ #testimonials { background-size: cover; background-attachment: fixed; color: #fff; padding: 110px 0; font-size: 18px; } #testimonials-w { background-size: cover; background-attachment: fixed; color: #fff; padding: 110px 0; font-size: 18px; } #testimonial {padding: 0;} #testimonial .item { display: block; width: 100%; height: auto; } #testimonial .item p { font-weight: 500; margin: 30px 0; color: #ddd; } /*------------------------------------------*/ /* /* 28. Pricing Table */ /*------------------------------------------*/ #Pricing { padding: 100px 0 110px 0; background: #f1f1f1; } #price { padding: 110px 0 110px 0; background: #fff; } .pricing-area h1 { margin-top: 0; margin-bottom: 18px; margin-top: 10px; color: #fff; font-size: 26px; font-weight: 500; text-transform: uppercase; } .black span {color: #12212f;} .pricing-area h1 span { font-size: 26px; color: #fff; } .pricing-areas h3, .pricing-areas span { color: #12212f; font-size: 16px; text-transform: uppercase; } .pricing-area h3, .mid-price { color: #fff; font-size: 16px; text-transform: uppercase; } .pricing-area span { color: #fff; font-size: 16px; text-transform: uppercase; } .plan { position: relative; margin-bottom: 55px; margin-top: 55px; border: 1px solid #dfdfdf; } .plan:hover { position: relative; margin-bottom: 55px; margin-top: 55px; box-shadow: 0 0 22px 0 #333; transition: all 0.6s ease 0s; z-index: 999; } .pricing-area ul { background: #FAFAFA; padding: 0; margin: 0; } .pricing-area ul li { list-style: none; padding: 22px 0; color: #616161; font-family: 'Open Sans', sans-serif; } .pricing-area ul li:nth-child(even) {background: #f1f1f1;} .pricing-area .heading-one, .pricing-area .price-one .plan-action { background: #12212f; padding: 30px 60px; font-size: 15px; margin-top: 15px; } .pricing-area .heading-two, .pricing-area .price-two .plan-action { background: #12212f; padding: 30px 60px; font-size: 15px; margin-top: 15px; } .pricing-area .heading-three, .pricing-area .price-three .plan-action { background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; padding: 30px 60px; font-size: 15px; margin-top: 15px; } /* button orange-2 on hover dark ------------------------------ */ .btn.btn-orange-2.dark { color: #fff; background-color: #ff0035; } .btn.btn-orange-2.dark:hover { color: #fff; background-color: #242424; } /* button orange-3 ------------------------------ */ .btn.btn-orange-3 { color: #fff; background-color: #ff971c; } .btn.btn-orange-3:hover { color: #242424; background-color: #fff; } /* button white ------------------------------ */ .btn.btn-white { color: #242424; background-color: #fff; } .btn.btn-white:hover { color: #fff; background-color: #242424; } /*------------------------------------------*/ /* /* 29. Price */ /*------------------------------------------*/ .price .price-table { padding: 0 30px; position: relative; max-width: 360px; margin-left: auto; margin-right: auto; margin-bottom: 80px; background-color: #eee; margin-top: 90px; color: #222; } .price .header .underline {margin-bottom: 10px;} .price .price-list {text-align: center;} .price .price-list i {margin-right: 20px;} .price .price-list h2 { margin-top: 100px; margin-bottom: 30px; display: inline-block; } .price .price-list p { margin-bottom: 30px; text-align: left; } .price .price-list ul { padding-left: 10px; padding-bottom: 50px; text-align: left; } .price .price-list ul li { list-style: none; margin-bottom: 15px; } .price .price-list ul li i { width: 24px; height: 24px; border-radius: 100%; text-align: center; padding: 4px 0; font-size: 14px; } .price .price-list ul li i.fa-check { margin-right: 20px; border: 1px solid #333; color: #333; } .price .price-list ul li i.fa-times { margin-right: 20px; border: 1px solid #e74c3c; padding-right: 1px; color: #e74c3c; } .price .price-list .rate { background: #333333; color: #fff; font-size: 40px; text-align: center; padding: 60px 0; border-radius: 100%; width: 150px; height: 150px; position: absolute; top: -75px; left: 50%; margin-left: -75px; font-weight: 700; border: 5px solid #f1f1f1; } .price .price-list .buy-now { border: 1px solid transparent; background: #333; padding: 10px 30px; border-radius: 0; font-size: 20px; margin-bottom: 30px; color: #fff; position: absolute; left: 50%; bottom: -55px; margin-left: -75px; } .price .featured-price .rate, .price .featured-price .buy-now {background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0;} /*------------------------------------------*/ /* /* 30. Skill & Accordion */ /*------------------------------------------*/ #skill { background: #ffffff; padding: 90px 0 0px 0; } #faq { background: #ffffff; padding: 110px 0 110px 0; } .skill h2 { margin-bottom: 45px; font-size: 40px; text-align: left; } #skill-i { background: #ffffff; padding: 110px 0 110px 0; } .skill-i h2 { margin-bottom: 45px; font-size: 40px; text-align: left; } .progress-wrap {position: relative;} .progress-wrap h3 { font-size: 18px; padding-bottom: 45px; font-family: 'Open Sans', sans-serif; color: #414141; font-weight: 200; } .progress .color1, .progress .color1 .bar-width {background: #333;} .progress .color2, .progress .color2 .bar-width {background: #333;} .progress .color3, .progress .color3 .bar-width {background: #333;} .progress .color4, .progress .color4 .bar-width {background: #333;} .progress, .progress-bar { height: 2px; line-height: 15px; background: #e6e6e6; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; overflow: visible; text-align: right; } .progress {position: relative;} .progress .bar-width { position: absolute; width: 70px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; font-weight: 700; top: -30px; border-radius: 10px; margin-left: -70px; } .progress span {position: relative;} .progress span:before { content: " "; position: absolute; width: auto; height: auto; border-width: 8px 5px; border-style: solid; bottom: -16px; right: 8px; } .progress .color1 span:before {border-color: #ff0035 transparent transparent transparent;} .progress .color2 span:before {border-color: #ff0035 transparent transparent transparent;} .progress .color3 span:before {border-color: #ff0035 transparent transparent transparent;} .progress .color4 span:before {border-color: #ff0035 transparent transparent transparent;} .accordion h2 { margin-bottom: 45px; font-size: 40px; } .panel-default {border-color: transparent;} .panel-default>.panel-heading, .panel { background-color: #e6e6e6; border: 0 none; box-shadow: none; } .panel-default>.panel-heading+.panel-collapse .panel-body { background: #fff; color: #858586; } .panel-title { font-size: 16px; color: #333333; padding-bottom: 5px; } .panel-group .panel+.panel { margin-top: 0; border-top: 1px solid #d9d9d9; } .panel-group .panel {border-radius: 0;} .panel-heading { border-radius: 0; padding: 20px; } .panel-title>a {color: #333333;} .accordion-inner img {border-radius: 4px;} .accordion-inner h4 { margin-top: 0; color: #ffffff; } .panel-heading.active {background: #333;} .panel-heading.active .panel-title>a {color: #fff;} a.accordion-toggle i { width: 45px; line-height: 59px; font-size: 20px; margin-top: -10px; text-align: center; margin-right: -15px; background: #d0d0d0; border-radius: 0%; } .panel-heading.active a.accordion-toggle i { background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; color: #fff; } .panel-heading.active a.accordion-toggle.collapsed i {color: #000;} /*------------------------------------------*/ /* /* 31. Chart */ /*------------------------------------------*/ #skills { padding: 110px 0 110px 0; background-size: cover; background-attachment: fixed; } #skills p {color: #474d5d;} #skills .skill { margin-bottom: 40px; text-align: center; padding: 0px; } #skills .skill h4 { font-size: 20px; font-family: 'Open+Sans', sans-serif; } .chart { position: relative; display: inline-block; width: 192px; height: 192px; margin-bottom: 36px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; font-size: 31px; color: #ffffff; line-height: 192px; z-index: 2; } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; } /*------------------------------------------*/ /* /* 32. Back to top */ /*------------------------------------------*/ #back-to-top { transition: all 1s ease 0s; -webkit-transition: all .3s ease 0s; position: fixed; bottom: 90px; right: 10px; z-index: 9999; width: 55px; height: 55px; text-align: center; line-height: 50px; background: #ff0035; color: #fff; font-size: 20px; cursor: pointer; text-decoration: none; opacity: 0; } #back-to-top:hover { background: #ff0035; border-color: #fff; } #back-to-top.show {opacity: 1;} /*------------------------------------------*/ /* /* 33. Page Loader */ /*------------------------------------------*/ .no-js #loader {display: none;} .js #loader { display: block; position: absolute; left: 70px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../img/loading.gif) center no-repeat #fff; } /*------------------------------------------*/ /* /* 34. Freelancing Features */ /*------------------------------------------*/ #awesome-features { padding: 110px 0 110px 0; background: #ff0035; } .feature-box {margin-bottom: 45px;} .feature-center {text-align: center;} .feature-icon-left-more .feature-icon i.fa { float: left; font-size: 28px; color: #fff; margin: 10px 0 0 0; height: 55px; width: 55px; padding: 14px 0 0 0; } .feature-icon-left-more .feature-content {padding-bottom: 8px;} .feature-center .service-icon {margin-bottom: 14px;} .feature-center .service-content h4 { margin-bottom: 6px; font-weight: 500; } .feature-center .service-icon i {display: inline-block;} .feature-box h4 { margin-bottom: 9px; font-weight: 400; font-size: 24px; color: #333; font-family: 'Open+Sans', sans-serif; } .feature-box > div:first-child {padding: 0;} .feature-boxed { margin-top: 30px; padding: 0 15px 20px 15px !important; border: 1px solid #eee; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .feature-boxed:hover { border-color: #e2e2e2; box-shadow: 0 0 6px rgba(0, 0, 0, .1); -o-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .1); } .feature-boxed p {margin-bottom: 0;} /*------------------------------------------*/ /* /* 35. Testimonial-area*/ /*------------------------------------------*/ .testimonial-area {background: #ff0035 none repeat scroll 0 0;} .testimonial-list {margin-top: 30px;} .single-testi-des { background: #fff none repeat scroll 0 0; border-radius: 5px; box-shadow: 1px 1px 2px rgba(222, 222, 222, 0.32); margin-bottom: 30px; padding: 30px; position: relative; } .single-testi-des::before { background: #fff none repeat scroll 0 0; bottom: -12px; content: ""; height: 30px; left: 0; margin-left: 12px; margin-top: 0; position: absolute; transform: rotate(45deg); width: 30px; } .single-testimonial img {border-radius: 50%;} .single-testimonial {margin-right: 30px;} .single-testimonial h6 { font-size: 12px; letter-spacing: 3px; margin-top: 0; text-transform: capitalize; } .single-testimonial p { font-style: italic; margin-bottom: 20px; } .owl-theme .owl-controls {margin-top: 30px;} .owl-theme .owl-controls .owl-page span { background: #6534ff none repeat scroll 0 0; border: 1px solid #6534ff; display: block; height: 4px; margin: 5px 7px; opacity: 0.5; width: 30px; } /*------------------------------------------*/ /* /* 36. Awesome Features */ /*------------------------------------------*/ #awesome-features { padding: 110px 0 110px 0; background: #fff; } #awesome-features-freelancer { padding: 110px 0 110px 0; background: #ffffff; } #awesome-features-app { padding: 110px 0 110px 0; background: #f1f1f1; } #awesome-features-y { padding: 110px 0 110px 0; background: #f1f1f1; } .feature-icon-left-more-y .feature-icon-y i.fa { float: left; font-size: 30px; color: #fff; margin: 70px 20px 0 30px; height: 75px; width: 75px; padding: 17px 0 0 0; border: 5px solid #f1f1f1; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; } .feature-icon-left-more-y .feature-content-y { padding-left: 90px; padding-bottom: 55px; padding-top: 55px; border: 1px solid #dfdfdf; background: #ffffff; } .feature-icon-left-more-y:hover .feature-content-y { padding-left: 90px; padding-bottom: 55px; padding-top: 55px; border: 1px solid #dfdfdf; background: #eee; transition: all 0.5s ease 0s; } .feature-box {margin: 5px 0 0px 0;} .feature-center {text-align: center;} .feature-test-light { line-height: 28px; color: #333333; margin-top: 15px; font-size: 14px; } .feature-test { line-height: 28px; color: #616161; margin-top: 15px; font-size: 15px; } .feature-icon-center-more .feature-icon i.fa { float: left; font-size: 28px; color: #ff0035; margin: 30px 0 0 0; height: 55px; width: 55px; padding: 14px 0 0 0; border-radius: 10%; border: 1px solid #ff0035; } .feature-icon-center-more .feature-content { padding-left: 80px; padding-bottom: 15px; padding-top: 20px; text-align: left; } .feature-icon-center-freelancer .feature-icon i.fa { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border-color: #ff0035 #ff0035 #092b3c; border-image: none; border-radius: 0%; border-style: solid; border-width: 2px; color: #12212f; float: left; font-size: 30px; height: 65px; margin: 53px 0 0 10px; padding: 14px 0 0; width: 65px; } .feature-icon-center-freelancer .feature-content { padding-left: 96px; padding-bottom: 35px; padding-top: 40px; text-align: left; } .feature-icon-left-more .feature-icon i.fa { float: right; font-size: 30px; color: #ffffff; margin: 65px 0 0 0; height: 70px; width: 70px; padding: 22px 0 0 0; background: #ff0035; border-radius: 30% 0 0 0; border: 0px solid #f1f1f1; } .feature-icon-left-more .feature-icon:hover i.fa { float: right; font-size: 30px; color: #ffffff; margin: 65px 0 0 0; height: 70px; width: 70px; padding: 22px 0 0 0; background: #ff0035; border-radius: 30% 0 0 0; border: 0px solid #f1f1f1; } .feature-icon-left-more .feature-content { padding-right: 90px; padding-bottom: 35px; padding-top: 55px; text-align: right; } .feature-icon-left-more-app .feature-icon i.fa { float: right; font-size: 30px; color: #ffffff; margin: 50px 0 0 0; height: 65px; width: 65px; padding: 20px 0 0 0; border: 1px solid #ffffff; } .feature-icon-left-more-app .feature-content { padding-right: 90px; padding-bottom: 20px; padding-top: 35px; text-align: right; } .feature-icon-right-more .feature-icon i.fa { float: left; font-size: 30px; color: #ffffff; margin: 65px 0 0 0; height: 70px; width: 70px; padding: 22px 0 0 0; background: #ff0035; border-radius: 0 30% 0 0; border: 0px solid #f1f1f1; } .feature-icon-right-more .feature-icon:hover i.fa { float: left; font-size: 30px; color: #ffffff; margin: 65px 0 0 0; height: 70px; width: 70px; padding: 22px 0 0 0; background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff0035, #ff0035) repeat scroll 0 0; border-radius: 0 30% 0 0; border: 0px solid #f1f1f1; transition: all 0.5s ease 0s; } .feature-icon-right-more .feature-content { padding-left: 90px; padding-bottom: 35px; padding-top: 55px; text-align: left; } .feature-icon-right-more-app .feature-icon i.fa { float: left; font-size: 25px; color: #ffffff; margin: 50px 0 0 0; height: 55px; width: 55px; padding: 14px 0 0 0; border-radius: 10%; border: 1px solid #ffffff; } .feature-icon-right-more-app .feature-content { padding-left: 90px; padding-bottom: 20px; padding-top: 35px; text-align: left; } .feature-center .service-icon {margin-bottom: 14px;} .feature-center .service-content h4 { margin-bottom: 6px; font-weight: 500; } .feature-center .service-icon i {display: inline-block;} .feature-box h4 { margin-bottom: 9px; font-weight: 400; font-size: 22px; font-family: 'Open+Sans', sans-serif; } .feature-box > div:first-child {padding: 0;} .feature-boxed { margin-top: 30px; padding: 0 15px 20px 15px !important; border: 1px solid #eee; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .feature-boxed:hover { border-color: #e2e2e2; box-shadow: 0 0 6px rgba(0, 0, 0, .1); -o-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .1); } .feature-boxed p {margin-bottom: 0;} .mask-bottom {color: #ff0035} /*------------------------------------------*/ /* /* 37. Special Features */ /*------------------------------------------*/ #superb-servicess {padding: 90px 0 100px 0;} .superb-services .section-title hr {border-color: #151515;} .superb-services i { font-size: 35px; line-height: 40px; color: #333; width: 70px; height: 70px; padding: 15px; border: 1px solid #eee; border-color: #ff0035 #ff0035 #092b3c; } .superb-services h4 { font-size: 20px; margin-top: 25px; position: relative; } .superb-services .mask-top { background-color: #ffffff; padding: 65px; position: absolute; top: 0; transition: all 0.3s ease-out 0s; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .superb-services .mask-top h4:before { top: -18px; content: ""; display: block; height: 2px; left: 0; right: 0; margin: -2px auto; position: absolute; width: 40px; } .superb-services .s-feature-box:hover .mask-top { top: -200px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .superb-services .s-feature-box { overflow: hidden; position: relative; min-height: 280px; border: 1px solid #dadada; margin-bottom: 30px; cursor: pointer; background: #e4e4e4; } .superb-services .mask-bottom { color: #333333; padding: 20px 15px 20px 15px; width: 100%; position: absolute; bottom: -300px; height: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .superb-services .mask-bottom p {padding: 0px 5px;} .superb-services .mask-bottom h4 {margin: 15px 0px 17px;} .superb-services .s-feature-box:hover .mask-bottom { bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .superb-services .mask-bottom i { background: #ff0035 none repeat scroll 0 0; border: 5px solid #dedede; border-radius: 50%; color: #fff; font-size: 31px; height: 80px; line-height: 52px; padding: 10px; width: 80px; } /*------------------------------------------*/ /* /* 38. Side Tab */ /*------------------------------------------*/ .skill {padding: 75px 0 0 0;} #tab {padding: 110px 0 110px 0;} nav-tabs>li { margin-bottom: 0px; border-bottom: 1px solid #e6e6e6; } .nav-tabs {border-bottom: 1px solid #e6e6e6;} .nav-tabs>li>a { background: #f1f1f1; color: #616161; border-radius: 0; border: 0 none; line-height: 28px; margin-right: 0; padding: 35px; font-size: 18px; border: 1px solid #f1f1f1; } .nav-tabs li:last-child {border-bottom: 0 none;} .nav-stacked>li+li {margin-top: 0;} .nav-tabs>li>a:hover { background: #ff0035; color: #ffffff; transition: all 0.3s ease 0s; } .media-left, .media-right, .media-body {padding: 6px;} .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus i.fa {font-size: 18px;} .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border: 0; color: #ffffff; background: #ff0035; position: relative; } .nav-tabs>li.active>a:after { position: absolute; top: 8px; } .tab-wrap { border: 1px solid #e6e6e6; margin-bottom: 20px; margin-top: 45px; } .tab-content {padding: 0px;} .tab-content h2 {margin-top: 0;} .tab-content img {border-radius: 4px;} .testimonial h2 {margin-top: 0;} .testimonial-inner { color: #858586; font-size: 14px; } .testimonial-inner .pull-left { border-right: 1px solid #e7e7e7; padding-right: 15px; position: relative; } /*------------------------------------------*/ /* /* 39. Content slide */ /*------------------------------------------*/ #main-slider {position: relative;} .no-margin { margin: 0; padding: 0; } #main-slider .carousel .carousel-content {margin-top: 150px;} #main-slider .carousel .slide-margin {margin-top: 140px;} #main-slider .carousel h2 { color: #fff; font-size: 25px; margin: 25px 0 25px 0; } #main-slider .carousel .btn-slide { padding: 8px 20px; background: #c52d2f; color: #fff; border-radius: 4px; margin-top: 25px; display: inline-block; } #main-slider .carousel .slider-img { text-align: right; position: absolute; } #main-slider .carousel .item { background-position: 50%; background-repeat: no-repeat; background-size: cover; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; height: 910px; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; } #main-slider .carousel .item:first-child { top: auto; position: relative; } #main-slider .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; z-index: 1; } #main-slider .prev, #main-slider .next { position: absolute; top: 50%; background-color: #c52d2f; color: #fff; display: inline-block; margin-top: -25px; height: 40px; line-height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 4px; z-index: 5; } #main-slider .prev:hover, #main-slider .next:hover {background-color: #ffffff;} #main-slider .prev {left: 10px;} #main-slider .next {right: 10px;} #main-slider .carousel-indicators li { width: 20px; height: 20px; background-color: #fff; margin: 0 15px 0 0; position: relative; } #main-slider .carousel-indicators li:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background: rgba(0, 0, 0, 0); border: 1px solid #FFF; left: -3px; top: -3px; } #main-slider .carousel-indicators .active { width: 20px; height: 20px; background-color: #c52d2f; margin: 0 15px 0 0; border: 1px solid #c52d2f; position: relative; } #main-slider .carousel-indicators .active:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background: #c52d2f; border: 1px solid #c52d2f; left: -3px; top: -3px; } #main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; } #main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; } #main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; } /*------------------------------------------*/ /* /* 40. Top banner */ /*------------------------------------------*/ .forcefullwidth_wrapper_tp_banner {overflow: hidden;} /*------------------------------------------*/ /* /* 41. Blog */ /*------------------------------------------*/ #blog { padding: 110px 0 110px 0; background: #f1f1f1; } /*------------------------------------------*/ /* /* 42. Best Experience */ /*------------------------------------------*/ #resume { padding: 110px 0 110px 0; background: #f8f8f8; } .timeline { position: relative; padding: 0; list-style: none; } .timeline:before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 2px; margin-left: -521px; background-color: #eee; } .timeline>li { position: relative; margin-bottom: 50px; min-height: 50px; } .timeline>li:before, .timeline>li:after { content: " "; display: table; } .timeline>li:after {clear: both;} .timeline>li .timeline-panel { float: right; position: relative; width: 100%; padding: 0 20px 0 70px; text-align: left; } .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; border-radius: 0 30% 0 0; } .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li .timeline-image { z-index: 100; position: absolute; left: 0; width: 70px; height: 70px; margin-left: 0; border: 1px solid #eee; border-radius: 0 30% 0 0; text-align: center; background: #ff0035; border: 18px solid #ff0035; } .timeline>li .timeline-image h4 { margin-top: 20px; font-size: 14px; text-transform: uppercase; } .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 20px 0 70px; text-align: left; } .timeline>li.timeline-inverted>.timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li.timeline-inverted>.timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li:last-child {margin-bottom: 40px;} .timeline .timeline-heading h4 { margin-top: 0; text-transform: uppercase; font-size: 20px; line-height: 28px; } .timeline .timeline-heading h2 {margin-top: 30px;} .timeline .timeline-heading h4.subheading { text-transform: none; font-weight: 600; } .timeline .timeline-body>p, .timeline .timeline-body>ul {margin-bottom: 0;} /*------------------------------------------*/ /* /* 43. Startup Services */ /*------------------------------------------*/ .startup { background: #f1f1f1; background-attachment: fixed; padding: 110px 0 110px 0; } .startup .boxs h4 { font-size: 20px; font-weight: 500; margin-bottom: 20px; text-transform: uppercase; margin-top: 35px; } .startup .boxs { padding: 0 20px; font-weight: 500; min-height: 90px; } .startup .boxs a {display: inline-block;} .startup .boxs.first { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 55px 0 0 0; } .startup .boxs.second { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 55px 0 0 0; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.third { border-bottom: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 55px 0 0 0; } .startup .boxs.four { border-right: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 0 0 55px 0; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.five { border-right: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 0 0 55px 0; } .startup .boxs.six { border-right: 1px solid #ccc; background: #fff; padding: 90px 30px 90px 30px; margin: 0 0 55px 0; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.first:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.second:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.third:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.four:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.five:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .startup .boxs.six:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } /*------------------------------------------*/ /* /* 44. Startup Top Support */ /*------------------------------------------*/ #support { background: #ffffff; margin-top: -110px; } .freelancing-icon { margin: 0 auto; font-size: 70px; color: #fff; line-height: 100px; text-align: center; } .email { padding: 50px 0 50px 0; background: #eb0031; box-shadow: 0 1px 0px 0 #000; } .email:hover { background: #ff0035; box-shadow: 0 0 22px 0 #333; z-index: +999; transition: all 0.6s ease 0s; } .email h2 { color: #fff; font-size: 22px; margin-top: 15px; line-height: 35px; } .email h3 { color: #fff; font-size: 30px; margin-top: 0px; } .email i.fa { font-size: 55px; color: #fff; } .phone { padding: 50px 0 50px 0; background: #ff0035; } .phone:hover { background: #ff0035; box-shadow: 0 0 22px 0 #333; z-index: +999; transition: all 0.6s ease 0s; } .phone h2 { color: #ffffff; font-size: 22px; margin-top: 15px; line-height: 35px; } .phone h3 { color: #ffffff; font-size: 30px; margin-top: 0px; } .phone i.fa { font-size: 55px; color: #ffffff; } .money { padding: 50px 0 50px 0; background: #eb0031; box-shadow: 0 1px 0px 0 #000; } .money:hover { background: #ff0035; box-shadow: 0 0 22px 0 #333; z-index: +999; transition: all 0.6s ease 0s; } .money h2 { color: #fff; font-size: 22px; margin-top: 15px; line-height: 35px; } .money h3 { color: #fff; font-size: 30px; margin-top: 0px; } .money i.fa { font-size: 55px; color: #fff; } #support-i { background: none; margin-top: -85px; } #support -i { background: none; margin-top: 0; } .email-i { padding: 50px 0 50px 0; height: 280px; width: 280px; border: 25px solid #fff; margin: 0 auto; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; border-radius: 50%; } .email-i h2 { color: #fff; font-size: 16px; margin-top: 15px; line-height: 35px; font-weight: 600; } .email-i h3 { color: #fff; font-size: 20px; margin-top: 0px; } .email-i i.fa { font-size: 55px; color: #fff; } .phone-i { padding: 50px 0 50px 0; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; height: 280px; width: 280px; border: 25px solid #fff; margin: 0 auto; border-radius: 50%; } .phone-i h2 { color: #fff; font-size: 18px; margin-top: 15px; line-height: 35px; font-weight: 600; } .phone h3 { color: #12212f; font-size: 20px; margin-top: 0px; } .phone-i i.fa { font-size: 55px; color: #fff; } .money-i { padding: 50px 0 50px 0; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; height: 280px; width: 280px; border: 25px solid #fff; margin: 0 auto; border-radius: 50%; } .money-i h2 { color: #fff; font-size: 18px; margin-top: 15px; line-height: 35px; font-weight: 600; } .money-i h3 { color: #fff; font-size: 20px; margin-top: 0px; } .money-i i.fa { font-size: 55px; color: #fff; } .small-h { font-size: 14px; font-family: 'Open+Sans', sans-serif; color: #fff; } /*------------------------------------------*/ /* /* 45. App */ /*------------------------------------------*/ #app-store {background: #ffffff;} .iphone { padding: 75px 0 75px 0; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; } .iphone h2 { color: #fff; font-size: 22px; margin-top: 15px; line-height: 35px; } .iphone h3 { color: #fff; font-size: 25px; margin-top: 0px; } .iphone i.fa { font-size: 105px; color: #fff; } .playstore { padding: 75px 0 75px 0; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; transition: all 0.6s ease 0s; z-index: 999; border-right: 1px solid #fff; border-left: 1px solid #fff; } .playstore h2 { color: #ffffff; font-size: 22px; margin-top: 15px; line-height: 35px; } .playstore h3 { color: #ffffff; font-size: 25px; margin-top: 0px; } .playstore i.fa { font-size: 105px; color: #ffffff; } .windows { padding: 75px 0 75px 0; background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #ff0035) repeat scroll 0 0; } .windows h2 { color: #ffffff; font-size: 22px; margin-top: 15px; line-height: 35px; } .windows h3 { color: #ffffff; font-size: 25px; margin-top: 0px; } .windows i.fa { font-size: 105px; color: #ffffff; } /*-----------------------------------------*/ /* /* 46.Contact Us */ /*------------------------------------------*/ #contact { padding: 110px 0 110px 0; background: url(../img/footer-bg.jpg) no-repeat scroll center center / cover; } #contact-inner { padding: 110px 0 110px 0; background: #f1f1f1; } #contact-inner h3 { font-size: 30px; font-weight: 200; text-transform: uppercase; } #contact-inner i.fa { font-size: 30px; width: 90px; height: 90px; padding: 30px 0; margin: 20px 0 20px 0; color: #ff0035; background: #fff; border: 2px solid #e1e1e1; border-radius: 0 30% 0 0; } #contac-innert .contact-inner:hover > i.fa { color: ##12212f; background: #000000; transition: all 0.3s ease 0s; } #contact h3 { font-size: 30px; font-weight: 200; text-transform: uppercase; margin-top: 40px; } #contact-b i.fa { font-size: 30px; width: 70px; height: 70px; padding: 35px 0; margin: 20px 0 30px 0; color: #f8001d; background: none; border: 1px solid #f8001d; } #contact i.fa { font-size: 35px; width: 90px; height: 90px; padding: 25px 0; margin: 30px 0 30px 0; color: #ff0035; background: #fff; border: 3px solid #f1f1f1; border-radius: 0 30% 0 0; } #contac-send i.fa { font-size: 35px; width: 90px; height: 90px; padding: 25px 0; margin: 30px 0 30px 0; color: #ff0035; background: #fff; border: 3px solid #f1f1f1; border-radius: 0 30% 0 0; } #contact .contact:hover > i.fa { color: ##12212f; background: #000000; transition: all 0.3s ease 0s; } #contact form {padding: 30px 0;} #contact .fa { color: #F4D03F; margin-bottom: 10px; } #contact p {font-size: 16px;} #contact .text-danger { color: #fff; text-align: center; font-size: 16px; } .alert-danger { background: #fff; color: #FF9900; border: 1px solid #f8001d; } label { font-size: 12px; font-weight: 400; font-family: 'Open Sans', sans-serif; float: left; } #contact .form-control { display: block; width: 100%; padding: 9px 12px; font-size: 14px; line-height: 22px; background-color: transparent; background-image: none; color: #fff; border-radius: 2px; -webkit-box-shadow: none; border: 1px solid #fff; -webkit-transition: none; -o-transition: none; transition: none; margin-top: 25px; } #contact .form-control:focus { border-color: inherit; outline: 0; -webkit-box-shadow: transparent; box-shadow: transparent; border: 1px solid #fff; } .form-control::-moz-placeholder {color: #ffffff;} /*------------------------------------------*/ /* /* 47 .Footer*/ /*------------------------------------------*/ nav#footer { background: #080808; color: #999999; padding: 65px 0 65px 0; font-size: 16px; line-height: 28px; border: 1px solid #202020; } nav#footer .fnav { vertical-align: middle; margin-top: 25px; margin-bottom: 50px; } .bottam-brand { font-size: 40px; margin-bottom: 35px; } ul.footer-social li { display: inline-block; margin-right: 10px; } nav#footer p { font-size: 15px; margin-top: 30px; padding: 20px 0 30px 0px; color: #999; font-weight: 200; border-top: 1px solid #494949; } #footer-love i.fa { height: 30px; width: 30px; font-size: 20px; padding: 18px 5px; color: #fff; transition: all 0.5s; width: 60px; height: 60px; border: 1px solid #f8001d; border-radius: 50%; background: #f8001d; } #footer i.fa { height: 45px; width: 45px; font-size: 16px; padding: 15px 5px; color: #ffffff; transition: all 0.5s; background: #f8001d; border-radius: 0 30% 0 0; } .heart i.fa { font-size: 18px; color: #f8001d; transition: all 0.5s; border-radius: 10%; } .footer-bottom { background: #161616; padding: 11px 0 11px 0; } .f-b { color: #999; text-align: center; padding: 10px; font-family: 'Open+Sans', sans-serif; font-size: 14px; text-transform: uppercase; } #footer i.fa:hover { color: #12212f; background: #f8001d; } /*------------------------------------------*/ /* /* 48. Inner pages */ /*------------------------------------------*/ header { background-image: url(../img/fixed-portfolio-img.jpg); background-repeat: none; background-attachment: scroll; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; text-align: center; color: #fff } header .intro-text { padding-top: 140px; padding-bottom: 90px; text-align: left; } header .intro-text .intro-lead-in { font-style: italic; font-size: 20px; line-height: 22px; margin-bottom: 25px } header .intro-text .intro-heading { text-transform: uppercase; font-weight: 700; font-size: 50px; line-height: 50px; margin-bottom: 25px } /*------------------------------------------*/ /* /* 49. Sidebar Bar blog */ /*------------------------------------------*/ .sidebar-page .sidebar { position: relative; padding: 0px 0px 0px; } .sidebar .widget { position: relative; margin-bottom: 50px; } .sidebar .search-box .form-group { position: relative; margin: 0px; } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"] { position: relative; line-height: 24px; padding: 8px 50px 8px 20px; border: 1px solid #d0d0d0; background: #ffffff; color: #3a3a3a; display: block; width: 100%; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .sidebar .search-box .form-group input:focus {border-color: #0075af;} .sidebar .search-box .form-group button { position: absolute; right: 0px; top: 0px; height: 42px; width: 50px; line-height: 30px; text-align: center; display: block; font-size: 14px; color: #ffffff; background: #252525; border: none; } .sidebar .search-box .form-group input:focus + button, .sidebar .search-box .form-group button:hover { color: #ffffff; background: #ff0035; } .sidebar .sidebar-title { position: relative; margin-bottom: 30px; padding-bottom: 15px; } .sidebar .sidebar-title h3 { font-size: 20px; color: #1a1a1a; font-weight: normal; text-transform: uppercase; font-weight: 500; } .sidebar .sidebar-title:after { content: ''; position: absolute; left: 0px; bottom: 0px; width: 40px; height: 2px; background: #ff0035; } .sidebar .recent-posts .post { position: relative; font-size: 13px; margin-bottom: 20px; color: #cccccc; padding-left: 90px; } .sidebar .recent-posts .post .post-thumb { position: absolute; left: 0px; top: 0px; width: 75px; } .sidebar .recent-posts .post .post-thumb img { display: block; width: 100%; } .sidebar .recent-posts .post h4 { font-size: 14px; font-weight: 500; margin: 0px 0px 5px; line-height: 1.4em; color: #292929; } .sidebar .recent-posts .post a, .sidebar .recent-posts .post a:hover {color: #0075af;} .sidebar .recent-posts .post h4 a {color: #292929;} .sidebar .recent-posts .post-info { color: #cccccc; text-transform: capitalize; } .sidebar .recent-posts .post-info .icon {padding-right: 5px;} .sidebar-page .contact-info { position: relative; font-size: 14px; margin-bottom: 30px; } .sidebar-page .contact-info .text { position: relative; font-size: 14px; margin-bottom: 10px; color: #7f7f7f; } .sidebar-page .contact-info li { position: relative; margin-bottom: 5px; line-height: 1.8em; color: #7f7f7f; } .sidebar-page .contact-info li strong { position: relative; padding-right: 10px; font-weight: 600; color: #292929; } .sidebar-page .contact-info a { color: #0075af; transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; -moz-transition: all 300ms ease-in; } .sidebar-page .contact-info a:hover {color: #3d3d3d;} .sidebar .popular-tags a { position: relative; display: inline-block; line-height: 24px; padding: 5px 30px; margin: 0px 5px 12px 0px; border: 1px solid rgba(0, 0, 0, 0.10); background: #ffffff; color: #1a1a1a; text-align: center; font-size: 13px; border-radius: 0px; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; } .sidebar .popular-tags a:hover { background-color: #ff0035; border-color: #ff0035; color: #ffffff; } .sidebar .list {position: relative;} .sidebar .list li { position: relative; margin-bottom: 7px; line-height: 32px; } .sidebar .list li .count {position: relative;} .sidebar .list li a { position: relative; display: block; color: #3d3d3d; font-size: 14px; font-weight: 400; } .sidebar .list li a:hover {color: #ff0035;} /*------------------------------------------*/ /* /* 50. Blog */ /*------------------------------------------*/ #blog { background: #f1f1f1; padding: 88px 0 150px 0; } .blog-div-area { padding: 60px 0 65px; overflow: hidden; } .blog-div-area .blog-content-div {padding: 42px 0 0;} .blog-div-area .blog-content-div .single-blog .feature-images { position: relative; overflow: hidden; margin-bottom: 30px; border: 5px solid #ffffff; margin-top: 45px; } .blog-div-area .blog-content-div .single-blog .feature-images a {transition: all 0.3s ease 0s;} .feature-img {margin-top: 55px;} .blog-div-area .blog-content-div .single-blog .feature-images a img {width: 100%;} .blog-div-area .blog-content-div .single-blog .feature-images a img:hover {opacity: .9;} .blog-div-area .blog-content-div .single-blog .blog-content h3 { margin: 20px 0 35px; font-size: 18px; position: relative; } .blog-div-area .blog-content-div .single-blog .blog-content h3:after { background: #e0e0e0 none repeat scroll 0 0; content: ""; height: 1px; left: 0; margin: auto; position: absolute; top: 40px; width: 50px; } .blog-div-area .blog-content-div .single-blog .blog-content h3 a { display: block; text-decoration: none; color: #333333; transition: all 0.3s ease 0s; font-weight: 600; } .blog-div-area .blog-content-div .single-blog .blog-content h3 a:hover {color: #333333;} .blog-div-area .blog-content-div .single-blog .blog-content ul li { display: inline-block; transition: all 0.6s ease 0s; font-size: 13px; font-weight: 400; } .blog-div-area .blog-content-div .single-blog .blog-content ul li a { display: block; text-decoration: none; color: #ff0035; } .blog-div-area .blog-content-div .single-blog .blog-content ul li a:hover {color: #333333;} .blog-div-area .blog-content-div .single-blog .blog-content ul li.comments {float: right;} .blog-div-area .blog-content-div .single-blog .blog-content ul li.comments a {color: #000000;} .blog-div-area .blog-content-div .single-blog .blog-content p {margin: 20px 0;} .blog-div-area .blog-content-div .single-blog .blog-content .read-more { display: block; margin: 20px 0 50px; } .blog-div-area .blog-content-div .single-blog .blog-content .read-more a { display: inline-block; text-decoration: none; text-transform: uppercase; color: #4caf50; transition: all 0.3s ease 0s; font-size: 14px; font-weight: 700; border: 1px solid #4caf50; padding: 10px 20px; } .blog-div-area .blog-content-div .single-blog .blog-content .read-more a:hover { background: #4caf50; color: #ffffff; } .btn-small-blue { text-transform: uppercase; text-decoration: none; border-radius: 0px; color: #ffffff; font-size: 14px; font-weight: 400; margin-top: 25px; padding: 10px 22px; transition: all 0.5s ease 0s; background: #ff0035; } .btn-small-blue:hover { background: #333333; color: #ffffff; text-decoration: none; } /*** /*------------------------------------------*/ /* /* 51. Pagination */ /*------------------------------------------*/ .styled-pagination {position: relative;} .styled-pagination li { position: relative; display: inline-block; margin: 100px 5px 150px 0; } .styled-pagination li a { position: relative; display: block; line-height: 24px; padding: 6px 5px; font-size: 16px; text-transform: uppercase; min-width: 40px; border: 2px solid rgba(0, 0, 0, 0.10); background: #ffffff; color: #1a1a1a; text-align: center; border-radius: 3px; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; } .styled-pagination li a.next, .styled-pagination li a.prev {padding: 6px 25px;} .styled-pagination li a:hover, .styled-pagination li a.active { color: #ffffff; background: #3a3a3a; border-color: #3a3a3a; } /*** /*------------------------------------------*/ /* /* 52. Comments Area Blog */ /*------------------------------------------*/ .sidebar-page .comments-area {position: relative;} .sidebar-page .group-title { position: relative; margin-bottom: 40px; padding-bottom: 16px; } .sidebar-page .group-title h2 { font-size: 25px; color: #1a1a1a; font-family: 'Open+Sans', sans-serif; margin-bottom: 0px; text-transform: uppercase; } .sidebar-page .group-title:after { content: ''; position: absolute; left: 0px; bottom: 0px; width: 40px; height: 2px; background: #ff0035; } .sidebar-page .comments-area .comment-box {position: relative;} .sidebar-page .comments-area .comment { position: relative; margin: 0px 0px 50px 0px; padding: 0px 0px 10px 110px; } .sidebar-page .comments-area .reply-comment {margin-left: 50px;} .sidebar-page .comments-area .comment-box .author-thumb { position: absolute; left: 0px; top: 0px; width: 84px; height: 84px; border: 3px solid #ffffff; border-radius: 5px; -moz-box-shadow: 0px 0px 2px 0px #000000; -ms-box-shadow: 0px 0px 2px 0px #000000; -o-box-shadow: 0px 0px 2px 0px #000000; -webkit-box-shadow: 0px 0px 2px 0px #000000; box-shadow: 0px 0px 2px 0px #000000; } .sidebar-page .comments-area .comment-box .author-thumb img { width: 100%; display: block; border-radius: 5px; } .sidebar-page .comments-area .comment-info { margin-bottom: 10px; color: #bcbcbc; font-size: 15px; } .sidebar-page .comments-area .comment-box strong { color: #1a1a1a; font-weight: 700; text-transform: uppercase; } .sidebar-page .comments-area .reply-btn { position: absolute; right: 0px; top: 0px; color: #ffffff; padding: 5px 30px; line-height: 24px; background: #545454; border-radius: 0px; font-weight: normal; text-transform: uppercase; } .sidebar-page .comments-area .reply-btn:hover {background-color: #ff0035;} /*------------------------------------------*/ /* /* 53. Chart */ /*------------------------------------------*/ #skills { padding: 40px 0 110px 0; background: #fff; background-size: cover; background-attachment: fixed; } #skills-round { padding: 90px 0 90px 0; background: #fff; background-size: cover; background-attachment: fixed; } #skills p {color: #666666;} #skills .skill { margin-bottom: 40px; text-align: center; padding: 0px; } #skills .skill h4 { font-size: 20px; font-weight: 100; font-family: 'Open+Sans', sans-serif; } .chart { position: relative; display: inline-block; width: 192px; height: 192px; margin-bottom: 36px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; font-size: 31px; color: #12212f; line-height: 192px; z-index: 2; } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; } /*------------------------------------------*/ /* /* 54. Particles */ /*------------------------------------------*/ html, body { width: 100%!important; height: 100%!important; } canvas { display: block; vertical-align: bottom; } #particles-js { width: 100%; height: 100%; background-color: #ff0035; background-image: url(../img/hero/freelancer1.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .welcome-area {height: 100%;} #particles-js { position: absolute; width: 100%; height: 100%; top: 0; } .welcome-image-area { position: relative; height: 100%; background-size: cover; z-index: 1; } .welcome-image-area:after { position: absolute; background: rgba(0, 0, 0, .6); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .particle-bg { position: relative; height: 100%; background-size: cover; z-index: 1; } .particle-bg:after { position: absolute; background: rgba(0, 0, 0, .6); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .display-table { display: table; width: 100%; height: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; } .header-text h1 { color: #fafafa; font-size: 80px; font-weight: 600; text-transform: uppercase; } .header-text .home-arrow-down { text-align: center; position: absolute; bottom: -210px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .header-text .home-arrow-down .btn {font-size: 30px;} .header-text .home-arrow-down .fa { color: #fafafa; display: inline-block; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-name: home-arrow-down; animation-name: home-arrow-down; animation-duration: 2s; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } /*------------------------------------------*/ /* /* 55. Login Page */ /*------------------------------------------*/ .login_page { background-color: #f8f8f8; height: auto; padding-bottom: 110px; } .log_in_logo { padding-top: 90px; padding-bottom: 20px; position: relative; } input[type="radio"], input[type="checkbox"] {margin: 7px 0 3px 6px;} .log_in_logo img {} .log_in_box { width: 60%; margin: 0 auto; background: #fff; padding: 30px; position: relative; border: 10px solid #f1f1f1; box-shadow: 0 0 32px #838383; overflow: hidden; } .login_title {} .login_title h2 { font-size: 30px; font-weight: 600; color: #ff0035; letter-spacing: 1px; text-align: center; margin: 0px; margin-bottom: 20px; } .login .form-group {margin-bottom: 20px;} .login .form-control, .login .form-control:focus, .login .form-control:active, .login .form-control:visited { background-color: transparent; border: 1px solid rgba(0, 0, 0, .2); box-shadow: none; outline: 0; height: 45px; border-radius: 0px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; color: #333!important; } .login .form-control::-moz-placeholder { color: #999; opacity: 1; } .log-in-r { background: #fff none repeat scroll 0 0; border: 10px solid #f1f1f1; box-shadow: 0 0 32px #838383; margin: 0 auto; padding: 30px; position: relative; width: 80%; } .btn-login, .btn-login:active, .btn-login:focus, .btn-login:visited { background-color: #333; color: #fff; text-transform: uppercase; font-size: 23px; font-weight: 200; display: block; width: 100%; margin: 0 auto; text-align: center; border-radius: 0px; height: 65px; letter-spacing: 1px; box-shadow: none; outline: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .btn-login:hover { color: #fff; background-color: #ff0035; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .login_social {} .login_social ul { margin: 0; padding: 0; list-style: none; } .login_social ul li {display: inline;} .login_social ul li a { display: inline-block; float: left; width: 49%; text-align: center; color: #fff; font-size: 14px; padding: 10px; text-decoration: none; } .login_social ul li a.fb_login { margin-right: 1%; background-color: #3b5999 } .login_social ul li a.twitter_login { margin-left: 1%; background-color: #63c6ff; } .login .check_login { margin-top: 20px; margin-bottom: 0px; } .check_login label { font-weight: 400; font-size: 14px; color: #585858; } .check_login a { color: #585858; font-size: 14px; text-decoration: none; } .image_bg { background-size: cover; position: relative; } .image_bg:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); } .login_register_area { padding-top: 100px; padding-bottom: 100px; } .tab_login_register {padding-top: 20px;} /*------------------------------------------*/ /* /* 56. Footer-Social-icon */ /*------------------------------------------*/ footer { background-size: cover; background-position: 0 -5px; } footer h5 { color: #fff; margin: -5px 0 19px; text-transform: uppercase; font-size: 18px; } footer .main_footer { padding-bottom: 80px; padding-top: 80px; background: #202020; } footer .footer_logo p { color: #9fa7af; padding: 32px 50px 33px 0; } footer .footer_logo ul li { display: inline-block; margin-right: 3px; } footer .footer_logo ul li a { display: block; width: 55px; line-height: 55px; background: #ff0035; text-align: center; color: #fff; font-size: 22px; } footer .footer_logo ul li a:hover { display: block; width: 55px; line-height: 55px; background: #df0015; text-align: center; color: #fff; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } footer h5 { color: #fff; text-transform: uppercase; margin: -5px 0 19px 0; } footer .quick_links ul li a { font-family: 'Open Sans', sans-serif; font-weight: normal; color: #9fa7af; line-height: 35px; font-size: 14px; } footer .quick_links ul li a:hover, footer .quick_links ul li a:focus {color: #ff0035;} footer .latest_tweets .single_tweet {margin: 29px 0 -5px 0;} footer .latest_tweets .single_tweet a { font-family: 'Open Sans', sans-serif; font-weight: normal; color: #9fa7af; line-height: 26px; font-size: 14px; margin: 0px 62px 4px 0; display: block; } footer .latest_tweets .single_tweet span {font-size: 14px;} footer .subscribe_now {padding-left: 0;} footer .subscribe_now p { font-size: 14px; color: #9fa7af; margin: 26px 0 32px 0; } footer .subscribe_now form { position: relative; height: 55px; border-radius: 5px; } footer .subscribe_now form input { width: 100%; height: 100%; border: none; background: #fff; border-radius: 0px; font-style: italic; color: #333; font-size: 14px; padding-left: 10px; padding-right: 56px; letter-spacing: 0.9px; } footer .subscribe_now form button { display: block; font-size: 18px; height: 100%; width: 55px; line-height: 55px; text-align: center; color: #fff; position: absolute; top: 0; right: 0; background: #ff0035; } footer .subscribe_now form button:hover { display: block; font-size: 18px; height: 100%; width: 55px; line-height: 55px; text-align: center; color: #fff; position: absolute; top: 0; right: 0; background: #333; } footer .bottom_footer {background: #1d282e;} footer .bottom_footer p { color: #9fa7af; font-size: 14px; text-align: center; line-height: 60px; } footer .bottom_footer p a { color: #00cbd8; font-family: 'Open Sans', sans-serif; font-weight: normal; } /*------------------------------------------*/ /* /* 57. Donation pop */ /*------------------------------------------*/ .donation-div {position: relative;} .donation-plz { position: relative; padding: 50px; background: #ffffff; border-radius: 2px; font-family: 'Roboto', sans-serif; box-shadow: 0 0 32px #838383; border: 10px solid #f1f1f1; } .donation-plz h3 { font-size: 28px; font-weight: 700; margin-bottom: 30px; } .donation-plz h4 { font-size: 24px; font-weight: 800; margin-bottom: 30px; text-transform: uppercase; } .donation-plz hr { margin-bottom: 40px; border-color: #e0e0e0; } .donation-plz .form-group { position: relative; margin-bottom: 30px; } .donation-plz .form-group.other-amount {top: 5px;} .donation-plz input[type="text"], .donation-plz input[type="email"], .donation-plz input[type="tel"], .donation-plz input[type="url"], .donation-plz input[type="password"], .donation-plz select, .donation-plz textarea { position: relative; display: block; width: 100%; line-height: 34px; padding: 8px 20px; background: #ffffff; border: 1px solid #e0e0e0; height: 52px; } .donation-plz select {cursor: pointer;} .donation-plz .field-label { position: relative; display: block; font-weight: 600; font-size: 18px; color: #252525; line-height: 28px; margin-bottom: 10px; } .donation-plz .field-label .required { color: #ff0000; font-size: 14px; } .donation-plz .radio-select { position: relative; float: left; margin-right: 10px; margin-bottom: 5px; line-height: 30px; } .donation-plz .radio-select label { position: relative; display: block; height: 56px; padding: 13px 15px; text-align: center; color: #ffffff; font-size: 24px; font-weight: 600; text-transform: uppercase; background: #878787; border-radius: 0px; cursor: pointer; } .donation-plz .radio-select input[type="radio"] {display: none;} .donation-plz .radio-select input[type="radio"]:checked+label { color: #ffffff; background: #ff0035; } .donation-plz button { padding: 12px 35px; background: #ff0035; color: #fff; border: none; } .donation-plz button:hover { padding: 12px 35px; background: #cf0035; color: #fff; border: none; } /*------------------------------------------*/ /* /* 58. SHOP product */ /*------------------------------------------*/ #shop-page {padding: 110px 0 110px 0;} .product_list_area {} .product_search_details {padding-bottom: 40px;} .product_search_details ul { margin: 0; padding: 0; list-style: none; } .product_search_details ul li { display: inline-block; color: #585858; font-size: 14px; } .product_search_details ul li:first-child { width: 200px; margin-right: 10px; } .product_search_details ul li form {} .product_search_details ul li form .form-control, .product_search_details ul li form .form-control:focus { border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px; box-shadow: none; outline: 0; color: #585858; } .product_list {margin-top: 55px;} .product_list:hover { box-shadow: 0 0 22px 0 #999; z-index: +999; transition: all 0.6s ease 0s; } .product_image {position: relative;} .product_image img { width: 100%; border: 1px solid #f1f1f1; } .product_image a:hover img {opacity: .8;} .sale_label { background-color: #ff0035; border-radius: 50%; height: 80px; position: absolute; right: -15px; top: -15px; width: 80px; border: 3px solid #f1f1f1; } .sale_label h2 { margin: 0px; font-size: 22px; text-transform: uppercase; color: #fff; text-align: center; line-height: 78px; font-weight: 600; } .product_desc { text-align: center; border: 1px solid #f1f1f1; background: #eee; } .product_title { margin-top: 10px; margin-bottom: 10px; } .product_title h2 {margin: 0px;} .product_title h2 a { color: #333; font-size: 14px; text-decoration: none; font-weight: 600; letter-spacing: 1px; } .product_price {margin-bottom: 10px;} .product_price p { color: #333; font-size: 25px; margin: 0px; font-weight: 600; } .product_price p del { font-size: 13px; color: #585858; margin-right: 5px; } .product_review {} .product_review i {color: #ff0035;} .product_btn { margin-top: 10px; margin-bottom: 15px; } .btn_pr, .btn_pr:active, .btn_pr:focus, .btn_pr:visited { border: 1px solid #bfbfbf; background-color: transparent; color: #333; font-size: 12px; text-transform: uppercase; font-weight: 600; box-shadow: none; outline: 0; border-radius: 0px; padding: 15px 25px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .btn_pr:hover { background-color: #ff0035; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #ff0035; border-color: #ff0035; color: #fff; cursor: default; z-index: 2; } .btn_pr i {padding-right: 3px;} .left_prodoct_desc_single { padding-top: 20px; padding-bottom: 20px; } .left_product_heading { padding-bottom: 20px; border-bottom: 1px solid #eee; } .pr_title_review {} .pr_title_review h2 { margin: 0px; line-height: 0px; margin-bottom: 24px; } .pr_title_review h2 a { font-size: 14px; color: #333; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; } .left_reviwq_star {} .left_reviwq_star i {color: #ff0035;} .single_pr_price {text-align: right;} .single_pr_price h2 { color: #333; font-size: 35px; font-weight: 600; margin: 0; font-family: 'Open+Sans', sans-serif; } .single_pr_review { text-align: right; padding-top: 10px; } .single_pr_review p { color: #585858; font-size: 14px; margin-bottom: 0px; } .left_product_desc { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .left_product_desc p { color: #585858; font-size: 14px; line-height: 24px; } .left_product_desc h6 { color: #585858; font-size: 14px; margin-top: 20px; margin-bottom: 0px; } .left_product_desc h6 a { color: #333; font-size: 14px; text-decoration: none; } .product_size_color { padding-top: 20px; padding-bottom: 20px; } .product_size_color h3 { color: #585858; font-size: 14px; margin: 0px; margin-bottom: 10px; } .product_size { margin: 0; padding: 0; list-style: none; } .product_size li { display: inline-block; padding-right: 5px; } .product_size li label input { left: -9000px; position: absolute; } .product_size li label span { border: 1px solid rgba(0, 0, 0, .2); color: #585858; cursor: pointer; display: block; font-size: 14px; font-weight: 400; height: 35px; line-height: 33px; margin: 0; text-align: center; transition: all 0.3s ease 0s; width: 40px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .product_size li label input:checked+span { background-color: #333; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .select_color .form-control { border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px; box-shadow: none; outline: 0; color: #333; height: 35px; background: #fff; } .product_quantity {} .product_quantity h3 { color: #585858; font-size: 14px; margin: 0px; margin-bottom: 10px; } .product_quantity .input-group .form-control, .product_quantity .input-group .form-control:focus { width: 40px; height: 35px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px; box-shadow: none; outline: 0; padding: 7px; color: #585858; text-align: center; } .product_quantity .input-group { position: relative; padding-left: 40px; padding-right: 40px; } .product_quantity .sp_plus, .product_quantity .sp_plus:hover, .product_quantity .sp_plus:active, .product_quantity .sp_plus:focus, .product_quantity .sp_plus:visited { position: absolute; top: 0; right: 0; border-radius: 0px; height: 35px; box-shadow: none; outline: 0; width: 40px; background-color: #333; color: #fff; border-color: #333; } .product_quantity .sp_minus, .product_quantity .sp_minus:hover, .product_quantity .sp_minus:active, .product_quantity .sp_minus:focus, .product_quantity .sp_minus:visited { position: absolute; top: 0; left: 0; width: 40px; height: 35px; box-shadow: none; outline: 0; border-radius: 0px; background-color: #333; color: #fff; border-color: #333; } .cart_button {padding-top: 50px;} .btn_crt, .btn_crt:focus, .btn_crt:active, .btn_crt:visited, .btn_crt:hover { background-color: #ff0035; color: #fff; border-radius: 0; font-weight: 600; font-size: 14px; text-transform: uppercase; padding: 10px 20px; box-shadow: none; outline: 0; } .btn_crt i {padding-right: 5px;} .product_extra_info { padding-top: 50px; padding-bottom: 50px; } .product_extra_info {} .product_extra_info .nav-tabs > li {margin: 0px;} .product_extra_info .nav-tabs > li a, .product_extra_info .nav-tabs > li a:hover, .product_extra_info .nav-tabs > li a:focus, .product_extra_info .nav-tabs > li a:visited { color: #585858; font-size: 12px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0; margin: 0; text-transform: uppercase; background-color: transparent; border-bottom: 0px; padding: 15px 25px; font-weight: 600; letter-spacing: 1px; } .product_extra_info .nav-tabs > li.active a { background-color: #ff0035; color: #fff; } .product_extra_info .nav-tabs {border-bottom: 0px;} .product_extra_info .tab-content > .active {border: 1px solid rgba(0, 0, 0, .2);} .product_extra_info .tab-pane {padding: 20px;} .product_more_info_tab {} .product_more_info_tab h2 { color: #333; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; } .product_more_info_tab p { color: #585858; font-size: 14px; line-height: 25px; margin-bottom: 0px; padding-bottom: 10px; } .review_list {} .review_list ul { margin: 0; padding: 0; list-style: none; padding-top: 10px; padding-bottom: 10px; } .review_list ul li {margin-bottom: 20px;} .review_list ul li:last-child {margin-bottom: 0px;} .review_list ul li .media {} .review_list ul li .media .media-left {padding-right: 25px;} .review_list ul li .media .media-left a { display: block; width: 70px; height: 70px; } .review_list ul li .media .media-left img {width: 100%;} .review_list ul li .media .media-body { vertical-align: middle; position: relative; } .review_list ul li .media .media-body h4 { color: #333; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0px; margin-bottom: 5px; } .review_list ul li .media .media-body p { color: #585858; font-size: 14px; line-height: 25px; margin: 0px; } .comment_review { position: absolute; top: 0; right: 0; } .comment_review i {color: #585858;} .e_product_slider { border: 2px solid #f1f1f1; margin-top: -10px; } .e_product_slider:hover .owl-controls { opacity: 1; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .e_product_slider .owl-controls { position: absolute; top: 50%; width: 100%; margin-top: -30px; opacity: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .e_product_slider .owl-controls .owl-nav [class*=owl-], .e_product_slider .owl-controls .owl-nav [class*=owl-]:hover { background-color: #fff; font-size: 20px; border-radius: 0px; width: 40px; height: 60px; margin: 0; } .e_product_slider .owl-controls .owl-nav [class*=owl-].owl-next { position: absolute; right: -1px; } .e_product_slider .owl-controls .owl-nav [class*=owl-].owl-prev { position: absolute; left: 0; } .e_product_slider .owl-controls .owl-nav [class*=owl-] i { font-size: 30px; color: #333; line-height: 55px; } /*Sidebar*/ .sidebar {} .widget {padding-bottom: 60px;} .widget h2 { color: #333; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; position: relative; margin: 0px; padding-bottom: 15px; } .widget h2:after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 1px; background-color: #333; } .search {} .search form {} .search form .form-group {position: relative;} .search form .form-control, .search form .form-control:focus { border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px; height: 40px; box-shadow: none; outline: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .search form .form-control:focus { border: 1px solid #333; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .search form i { top: 12px; right: 15px; position: absolute; color: #585858; font-size: 16px; font-weight: bold; } .search form .form-control::-webkit-input-placeholder { color: #585858; font-size: 12px; text-transform: uppercase; line-height: 22px; } .search form .form-control:-moz-placeholder { color: #585858; font-size: 12px; text-transform: uppercase; line-height: 22px; } .search form .form-control::-moz-placeholder { color: #585858; font-size: 12px; text-transform: uppercase; line-height: 22px; } .search form .form-control:-ms-input-placeholder { color: #585858; font-size: 12px; text-transform: uppercase; line-height: 22px; } .category {} .category ul { margin: 0; padding: 0; list-style: none; padding-top: 20px; } .category ul li {} .category ul li a { color: #585858; font-size: 14px; text-decoration: none; display: block; padding-top: 5px; padding-bottom: 5px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .category ul li a:hover { color: #333; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tags {} .tags ul { margin: 0; padding: 0; list-style: none; padding-top: 20px; } .tags ul li {display: inline;} .tags ul li a { display: inline-block; color: #585858; font-size: 14px; text-decoration: none; border: 1px solid rgba(0, 0, 0, .2); padding: 6px 15px; margin-right: 5px; margin-bottom: 10px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tags ul li a:hover { color: #fff; background-color: #333; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .recent_post {} .recent_post ul { margin: 0; padding: 0; list-style: none; padding-top: 20px; } .recent_post ul li {} .recent_post ul li a { color: #585858; font-size: 14px; text-decoration: none; display: block; padding-top: 5px; padding-bottom: 5px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .recent_post ul li a:hover { color: #333; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .inner_price_filter {padding-top: 20px;} .inner_price_filter .form-group {} .inner_price_filter .form-control, .inner_price_filter .form-control:focus { border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px; box-shadow: none; height: 35px !important; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .inner_price_filter .form-control:focus { border: 1px solid #333 !important; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .btn_flt, .btn_flt:active, .btn_flt:visited, .btn_flt:focus { background-color: #333; border: 2px solid #333; border-radius: 0px; color: #fff; font-weight: 600; font-size: 12px; letter-spacing: 1px; box-shadow: none; outline: 0; display: block; padding: 10px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .btn_flt:hover { color: #333; background-color: transparent; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .lt_product {} .lt_product ul { margin: 0; padding: 0; list-style: none; padding-top: 20px; } .lt_product ul li {padding-bottom: 15px;} .lt_product ul li .product_thumb { display: inline-block; width: 70px; } .lt_product ul li .product_thumb img {width: 100%;} .product_details_sm {padding-left: 7px;} .product_details_sm h3 { margin: 0px; line-height: 15px; } .product_details_sm h3 a { color: #333; font-size: 14px; text-transform: capitalize; font-weight: 400; letter-spacing: 0; text-decoration: none; } .product_details_sm h4 { margin: 0; margin-bottom: 5px; font-size: 14px; color: #333; margin-top: 8px; } .product_details_sm h4 del { color: #585858; font-size: 13px; padding-right: 3px; } .pd_star {} .pd_star i {color: #585858;} /*Pagination*/ .pagination_area { border-top: 1px solid #eee; padding-top: 30px; padding-bottom: 30px; } .pagination_area nav { border-bottom: 0px; text-align: center; } ul.pagination {} ul.pagination li {} ul.pagination li a { border-radius: 0px; border: 1px solid #333; color: #333; font-weight: 600; font-size: 12px; padding: 8px 15px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } ul.pagination li a:hover { color: #fff; background-color: #333; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; border: 1px solid #333; } ul.pagination li.active a, ul.pagination li.active a:hover, ul.pagination li.active a:focus, ul.pagination li.active a:visited { background-color: #333; color: #fff; border-color: #333; } ul.pagination li a.prev { border-radius: 0px; border: 1px solid #333; color: #333; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; font-size: 10px; background-color: transparent; padding: 8px 20px; margin-right: 50px; } ul.pagination li a.prev:hover { background-color: #333; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } ul.pagination li a.next { border-radius: 0px; border: 1px solid #333; color: #333; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; font-size: 12px; background-color: transparent; padding: 8px 20px; margin-left: 50px; } ul.pagination li a.next:hover { background-color: #333; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } @media(max-width: 500px) {ul.pagination li a.prev} ul.pagination li a.next {margin-left: 15px;} {} @media(max-width: 420px) {ul.pagination li a} ul.pagination li a.prev {padding: 7px 20px;} ul.pagination li a.next {padding: 5px 15px;} {} @media(max-width: 350px) {ul.pagination li a.prev} ul.pagination li a.next {margin-left: 50px;} {} @media(max-width: 330px) {ul.pagination li a.prev} ul.pagination li a.next { font-size: 10px; padding: 7px 20px; } ul.pagination li a {font-size: 10px;} {} /*------------------------------------------*/ /* /* 59. Tabile */ /*------------------------------------------*/ .all-demos { background: #f1f1f1 none repeat scroll 0 0; padding: 55px 0 90px; } .data { margin: 10px 0; text-align: center; } .data table { border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; } .data table td, .data table th { border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; padding: 25px; } .data table th { background: #333 none repeat scroll 0 0; color: #ffffff; text-align: center; font-size: 16px; text-transform: uppercase; } .btn-t { padding: 12px 25px; background: #ff0035; color: #fff; font-size: 17px; } .btn-t:hover { padding: 12px 25px; background: #333; color: #fff; } .btn-t a { padding: 12px 25px; ; background: #ff0035; color: #fff; font-size: 15px; } .btn-t a:hover { padding: 12px 25px; background: #333; color: #fff; } .data tr {background: #ffffff none repeat scroll 0 0;} .data tr:nth-child(2n+1) {background: #ffffff none repeat scroll 0 0;} .data tr:nth-child(2n) {background: #f5f5f5 none repeat scroll 0 0;} .faqtabs-menu { clear: both; margin: 0; overflow: hidden; } .faqtabs-menu ul {margin-bottom: 0;} .faqtabs-menu li { background-color: #666666; border-left: 1px solid #d4d4d1; border-right: 1px solid #d4d4d1; border-top: 1px solid #d4d4d1; color: #ffffff; float: left; list-style-type: none; margin-right: 1px; } .faqtabs-menu li.current { background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 5; } .faqtabs-menu li a { color: #fff; display: block; font-size: 20px; padding: 10px; text-decoration: none; } .faqtabs-menu .current a {color: #000000;} .faqtab { background-color: #fff; border: 1px solid #d4d4d1; margin-bottom: 20px; margin-top: -1px; width: auto; } /*------------------------------------------*/ /* /* 60. Demos Intro */ /*------------------------------------------*/ .buy-theme { background: rgba(133, 178, 12, 0.9) 14px center; border-radius: 24px; position: fixed; right: -161px; top: 295px; z-index: 1000; transition-duration: 0.2s; transition-timing-function: ease-in-out; } .buy-theme i { font-size: 20px; color: #fff; padding: 5px; } .buy-theme:hover, .quick-question:hover {right: -20px;} .buy-theme span, .quick-question span { opacity: 0; padding: 8px; position: relative; top: 0px; font-size: 14px; margin-right: 8px; font-weight: bold; } .buy-theme:hover span, .quick-question:hover span {opacity: 1;} .buy-theme a, .quick-question a { color: #fff; display: block; font-size: 10px; letter-spacing: 1px; padding: 8px 15px; text-transform: uppercase; } #more-demos {padding: 80px 0 80px 0;} .demos-one-row { margin: 0 auto; text-align: center; height: auto; overflow: hidden; } .img-res { margin: 0 auto; max-width: 100%; } .img-res-demo { margin: 0 auto; max-width: 100%; margin-bottom: 65px; } .demos { margin-top: 35px; margin-bottom: 65px; } #intro-bg-app { top: 0px; left: 0px; width: 100%; text-align: center; margin: 0px; padding: 0px; background-color: #C0DEED; background: url(../img/intro-bg.jpg) no-repeat; padding-top: 140px; padding-bottom: 0px; width: 100%; animation: awan-animasi 50s linear infinite; -ms-animation: awan-animasi 50s linear infinite; -moz-animation: awan-animasi 50s linear infinite; -webkit-animation: awan-animasi 50s linear infinite; } #intro-bg { top: 0px; left: 0px; width: 100%; text-align: center; margin: 0px; padding: 0px; background-color: #C0DEED; background: url(../img/intro-bg-m.jpg) no-repeat; padding-top: 190px; padding-bottom: 130px; width: 100%; animation: awan-animasi 50s linear infinite; -ms-animation: awan-animasi 50s linear infinite; -moz-animation: awan-animasi 50s linear infinite; -webkit-animation: awan-animasi 50s linear infinite; } .intro-text .intro-lead-in { font-size: 13px; line-height: 31px; color: #ffffff; margin-bottom: 25px; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; } .container-intro { width: 1600px; margin: 0 auto } .intro-logo {padding: 0 0 20px 0;} .intro-text .intro-heading { font-size: 55px; padding: 48px 0 10px 0; color: #ffffff; font-family: 'Raleway', sans-serif; font-weight: 200; text-transform: uppercase; line-height: normal; } .low-back-gradient-intro:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff6000, #ff0035) repeat scroll 0 0; opacity: 0.85; } .intro-heading { font-size: 50px; padding: 48px 0 60px 0; color: #333; font-weight: 100; text-transform: uppercase; line-height: normal; font-family: 'Raleway', sans-serif; } .intro-heading-i { font-size: 50px; padding: 110px 0 60px 0; color: #333; font-weight: 100; text-transform: uppercase; line-height: normal; font-family: 'Raleway', sans-serif; } .intro-heading hr { background: #ffffff none repeat scroll 0 0; border: 0 none; height: 2px; margin: 0 auto 30px; position: relative; text-align: center; width: 90px; } .intro-heading-s { font-size: 30px; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 600; padding: 15px 0 15px 0; text-transform: uppercase; line-height: normal; } .o-demos { font-weight: 700; font-size: 50px; color: #ffffff; } @keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; } @-webkit-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; } @-ms-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; } ; moz-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; }