/* =================================================== Apppick Layout Stylesheet TOC: 01. General & Global Styles 02. Section Common Styles 03. Preloader Styles 04. Header Styles 05. Banner Styles 06. Welcome / Features Styles 07. Why-This-App Styles 08. Awesome-Feature Styles 09. App-Brief Styles 10. Statistics Styles 11. Screenshot Styles 12. Video Styles 13. Testimonial Styles 14. Pricing-Table Styles 15. Offer Styles 16. Download Styles 17. Team Styles 18. Blog Styles 19. News-Letter Styles 20. Twitter Styles 21. Map Styles 22. Contact Styles 23. Footer Styles 24. Some Helper Styles ====================================================== */ /* ==================================================== General & Global Styles =======================================================*/ .container .row { margin: 0px; margin-left: -15px; margin-right: -15px; } .col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; } .visible-xxs { display: none !important; } @media (max-width: 600px) { .col-xxs-12 { width: 100%; } .col-xxs-11 { width: 91.66666667%; } .col-xxs-10 { width: 83.33333333%; } .col-xxs-9 { width: 75%; } .col-xxs-8 { width: 66.66666667%; } .col-xxs-7 { width: 58.33333333%; } .col-xxs-6 { width: 50%; } .col-xxs-5 { width: 41.66666667%; } .col-xxs-4 { width: 33.33333333%; } .col-xxs-3 { width: 25%; } .col-xxs-2 { width: 16.66666667%; } .col-xxs-1 { width: 8.33333333%; } .hidden-xxs { display: none !important; } .visible-xxs { display: block !important; } } @-webkit-keyframes fadeInUpSmall{ 0%{ opacity:0; filter: alpha(opacity=0); -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0) } 100%{ opacity:1; filter: alpha(opacity=100); -webkit-transform:none; transform:none } } @keyframes fadeInUpSmall{ 0% { opacity:0; filter: alpha(opacity=0); -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0) } 100% { opacity:1; filter: alpha(opacity=100); -webkit-transform:none; transform:none } } .fadeInUpSmall { -webkit-animation-name:fadeInUpSmall; animation-name:fadeInUpSmall } @-webkit-keyframes fadeOutUpSmall{ 0% { opacity:1; filter: alpha(opacity=100); } 100% { opacity:0; filter: alpha(opacity=0); -webkit-transform:translate3d(0,-20px,0); transform:translate3d(0,-20px,0); } } @keyframes fadeOutUpSmall{ 0% { opacity:1; filter: alpha(opacity=100); } 100% { opacity:0; filter: alpha(opacity=0); -webkit-transform:translate3d(0,-20px,0); transform:translate3d(0,-20px,0); } } .fadeOutUpSmall { -webkit-animation-name:fadeOutUpSmall; animation-name:fadeOutUpSmall; } html, button, input, select, textarea { color: #666; } body, html { font-size: 14px; line-height: 2; color: #666; width: 100%; height: 100%; font-family: "Roboto", sans-serif; } p { margin: 0px; margin-bottom: 25px; } img { max-width: 100%; } a, a:hover, a:visited, a:focus, a:active { text-decoration: none; outline: none !important; } a { -webkit-transition: all .3s ease; transition: all .3s ease; } .bg-white { background-color: #fff !important; } .text-center { text-align: center; } h1, h2, h3 { line-height: 1.2; margin: 0px; } h4, h5, h6 { line-height: 1.5; margin: 0px; } ul, ol { margin: 0px; padding: 0px; } iframe { border: none; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /*=============== A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images, videos, audio and canvas and the bottom of * their containers: h5bp.com/i/440 */ audio, canvas, img, video { vertical-align: middle; } /* ================ Remove default fieldset styles */ fieldset { border: 0; margin: 0; padding: 0; } /* ================ Allow only vertical resizing of textareas */ textarea { resize: vertical; } /* ========================== Browse Happy prompt */ .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ======================================= buttons */ .th-btn { outline: none; display: inline-block; line-height: 1; border: none; border-radius: 0; font-size: 16px; height: auto; } .th-btn-default { color: #fff !important; border-color: #fff; background: #666; } .th-btn-big { padding: 17px 43px 16px; } .th-btn-medium { padding: 16px 30px 15px; font-size: 14px; text-transform: uppercase; } .th-btn-small { padding: 11px 16px 10px; font-size: 13px; } .btn-plain { background: #fff; box-shadow: none !important; padding-left: 0px; font-weight: 700; } .btn-plain:hover { padding-left: 16px; color: #fff !important; } blockquote { margin: 0px; padding: 0px; border: none; } main.main { position: relative; z-index: 888; } /* ==================================================== Section Common Styles =======================================================*/ .hidden-overflow { overflow: hidden; } .overlay { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .overlay-content { position: relative; z-index: 1; } .section-head { margin-bottom: 83px; line-height: 2.2; } .section-head.only-title { margin-bottom: 66px; } .section-title { font-size: 36px; line-height: 1.2; } .section-title.title-1 { margin-bottom: 33px; color: #222; font-weight: 900; text-transform: uppercase; } .section-title.title-2 { margin-bottom: 28px; color: #333; font-weight: 300; } .section-title.white { color: #fff; } .section-space { padding: 115px 0px; } .section-space-top { padding-top: 120px; } .section-space-bottom { padding-bottom: 120px; } .parallux-bg { background-attachment: fixed; background-size: cover !important; background-repeat: no-repeat; } .section-bg-01 { background-color: #f7f7f7; } .section-bg-02 { background-color: #fff; } .color-white { color: #fff !important; } .color-black { color: #666 !important; } .container-width { width: 1420px; max-width: 100%; position: relative; margin: 0 auto; padding: 0px 45px; } .container-width .container { max-width: 100%; } .slider-arrow { position: absolute; font-size: 30px; color: #d0d0d0; width: 40px; height: 40px; line-height: 40px; text-align: center; top: 50%; margin-top: -20px; } .slider-arrow.right-arrow { right: 0px; } .slider-arrow.left-arrow { left: 0px; } /* ==================================================== Preloader Styles =======================================================*/ #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background-color: #fff; } .loader-content { text-align: center; position: relative; top: 50%; margin-top: -50px; height: 103px; } .loading-title { color: #333; } #loader .preloader-wrapper { margin-bottom: 30px; } /* ==================================================== Header Styles =======================================================*/ .main-header { position: fixed; width: 100%; z-index: 999; top: 0px; left: 0px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); height: auto !important; } .header-big-screen { background-color: #fff; } .main-header.mobileBG .full-height { height: 100%; } .logo { float: left; display: inline-block; max-width: 100px; padding: 22px 0px; } .menu { float: right; background: transparent; width: auto; height: auto; line-height: inherit; box-shadow: none; } .menu li { list-style: none; position: relative; background: none !important; display: inline-block; margin-left: 15px; float: none; } .menu li a { display: block; outline: none !important; font-size: 13px; color: #727272; padding: 30px 8px 26px; line-height: 1; text-transform: uppercase; border-bottom: 6px solid transparent; } .menu li.has-sub a { border-color: transparent !important; } .menu li.has-sub > a:after { content: "\f107"; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; margin-left: 10px; } .menu li .sub-menu { position: absolute; background: #fff; width: 200px; right: 0px; box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .3s; transition: all .3s; border-top: 6px solid transparent; top: 100%; margin-top: -6px; padding-top: 6px; } .menu li .sub-menu li { width: 100%; margin: 0px; } .menu li .sub-menu li a { padding: 17px 25px 15px; border: none; } .menu li:hover .sub-menu { visibility: visible; opacity: 1; filter: alpha(opacity=100); } /*---- Header Mobile Screen ----*/ .mobileBG .header-mobile-screen .header-inner { padding-bottom: 63px; } .main-header.mobileBG { top: 0px !important; height: auto !important; } .header-mobile-screen .logo-area { padding: 0px 35px; background: #fff; } .header-mobile-screen .logo-area .logo { margin-bottom: 0px; } .header-mobile-screen .bar-area { margin-top: 22px; } .header-mobile-screen .bar-area a { font-size: 25px; line-height: 1; display: block; } .header-mobile-screen .bar-area a.close-menu { display: none; } .header-mobile-screen .menu { text-align: left; display: none; overflow: auto; overflow-x: hidden; max-height: 100%; padding-left: 15px; padding-right: 15px; margin-top: 15px; padding-bottom: 15px; } .header-mobile-screen .menu li { display: block; margin-left: 0px; padding-left: 20px; padding-right: 20px; } .header-mobile-screen .menu li:hover, .header-mobile-screen .menu li.current { background-color: #fff !important; } .header-mobile-screen .menu li:last-child { border-bottom: none; } .header-mobile-screen .menu li a { color: #fff; font-size: 14px; padding: 21px 0px 18px; border: none; position: relative; } .header-mobile-screen .sub-menu li a { padding: 14px 0px 13px; font-size: 13px; } .header-mobile-screen .menu li.has-sub > a:after { position: absolute; right: 0px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .header-mobile-screen .menu li.has-sub.active > a:after { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .header-mobile-screen .menu li .sub-menu { position: relative; border-top: none; width: 100%; padding: 0px 0px 20px; display: none; visibility: visible; opacity: 1; filter: alpha(opacity=100); margin: 0px; } .header-mobile-screen .menu li .sub-menu li { padding: 0px; } /* ==================================================== Banner Styles =======================================================*/ .banner { position: relative; min-height: 100%; padding-top: 189px; padding-bottom: 90px; } .banner-bg { background-image: url('../../img/banner_bg.jpg'); } .banner .heading { font-size: 50px; color: #fff; line-height: 1.18; margin-bottom: 25px; letter-spacing: 2px; font-weight: bold; } .banner .banner-content { margin-top: 8%; margin-bottom: 15%; } .banner .button-area { display: table; width: 100%; } .banner .button-area a { margin: 10px; } .banner .sub-heading { width: 100%; color: #fff; word-spacing: 3px; font-size: 17px; font-weight: 300; line-height: 1.9; } .banner .sub-heading a { color: #fff; font-weight: 400; } .home-bottom-content { position: absolute; width: 100%; bottom: 0px; text-align: center; border-bottom: 1px solid #e9e9e9; overflow: hidden; } .single-section { display: inline-block; padding: 32px 0px 28px; border-right: 1px solid #E9E9E9; width: 300px; } .single-section:last-child { border-right: none; } .single-section i { margin-left: 10px; } .single-section a { color: #666; } .banner-feature { color: #fff; } .banner-feature-list { display: inline-block; width: 9%; min-width: 175px; margin-bottom: 50px; } .banner-feature-list i { font-size: 30px; color: #FFF; margin-bottom: 25px; display: inline-block; line-height: 1; } .banner-feature-list .title { font-size: 13px; font-weight: 300; } .call-to-section { background: #FFFFFF; position: relative; z-index: 2; } /* ==================================================== Why-This-App Styles =======================================================*/ .why-this-app .section-space {} .why-this-app .section-title { margin-bottom: 38px; } .why-section-col { display: table-cell; float: none; vertical-align: middle; max-width: 50% !important; } .why-this-app p { margin-bottom: 20px; } .why-slider { width: 556px; position: relative; overflow: hidden; margin-top: 10px; } .why-slider > * { margin-top: 0px !important; position: absolute !important; width: 100%; top: 0px; left: 100%; overflow: hidden; } .why-this-app .thumb-area img:nth-child(2) { -webkit-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 1s; transition: all 1s; } .why-this-app .thumb-area.active img:nth-child(2) { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .why-this-app .thumb-area.inactive img:nth-child(2) { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } .owl-carousel .owl-item { overflow: hidden; } .app-reasion-lists li { list-style: none; margin-bottom: 30px; min-height: 60px; } .app-reasion-lists li:last-child { margin-bottom: 0px; } .app-reasion-lists li a { display: block; position: relative; padding-left: 80px; } .app-reasion-lists li a .left-area, .app-reasion-lists li a:focus .left-area { font-size: 24px; overflow: hidden; width: 60px; height: 60px; display: inline-block; background: #fff; border-radius: 50%; border: none; text-align: center; line-height: 58px; position: absolute; top: 0px; left: 0px; padding: 0px; -webkit-transition: all .3s ease; transition: all .3s ease; } .app-reasion-lists li a .right-area { color: #666; } .app-reasion-lists li a:hover .left-area i, .app-reasion-lists li.active a .left-area i, .app-reasion-lists li.active a:hover .left-area i { color: #fff; } /* ==================================================== Awesome-Feature Styles =======================================================*/ .amazing-feature.section-space { padding-bottom: 90px; } .feature-lists-style-one .feature-list { position: relative; margin-bottom: 23px; } .feature-lists-style-one .icon-area { width: 60px; color: #fff; height: 60px; line-height: 60px; border-radius: 50%; font-size: 24px; text-align: center; -webkit-transition: .3s; transition: .3s; float: left; margin-right: 20px; } .feature-lists-style-one .icon-area i {} .feature-lists-style-one .f-content-area { overflow: hidden; } .feature-lists-style-one .title { font-size: 18px; margin-bottom: 13px; font-weight: 400; color: #333; margin-top: 2px; } /* ==================================================== App-Brief Styles =======================================================*/ .app-brief.owl-carousel { background-color: #fff; padding-bottom: 100px; } .thumb-area { position: relative; height: 474px; margin-top: 10px; } .thumb-area img { position: relative; top: 0px; } .app-brief-article .content, .app-brief-article .thumb-area { -webkit-transition: all 1.5s ease; transition: all 1.5s ease; } .app-brief.owl-theme .owl-controls .owl-pagination .owl-page span { width: 50px; height: 5px; margin: 0px 2px; opacity: 1; filter: alpha(opacity=100); border-radius: 0px; background: #ddd; } .left-item .app-brief-article .thumb-area { -webkit-transform:translateX(-500px); -ms-transform:translateX(-500px); transform:translateX(-500px); } .right-item .app-brief-article .content { -webkit-transform:translateX(500px); -ms-transform:translateX(500px); transform:translateX(500px); } .active .app-brief-article .thumb-area { -webkit-transform:translateX(0%); -ms-transform:translateX(0%); transform:translateX(0%); } .active .app-brief-article .content { -webkit-transform:translateX(0%); -ms-transform:translateX(0%); transform:translateX(0%); } .app-brief-article { padding-bottom: 110px; } .owl-item .app-brief-article { padding-bottom: 40px; } .app-brief-article .section-title { margin-bottom: 40px; } .app-brief-article p { margin-bottom: 20px; } .thumb-area img:nth-child(1) { left: 76px; z-index: 2; } .thumb-area img:nth-child(2) { right: 76px; position: absolute; top: 21px; } .content a {} .content ul { margin: 0px; padding: 0px; margin-bottom: 30px; } .content ul li:before { list-style: none; content: "\f474"; margin-right: 20px; display: inline-block; font-family: "Ionicons"; speak: none; font-size: 18px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; } .content ol { padding: 0px; margin: 0px; padding-left: 23px; } .content ol li { -webkit-padding-start: 12px; -moz-padding-start: 12px; } .content li { margin-bottom: 5px; } .content ul li { list-style: none; } /* ==================================================== Statistics Styles =======================================================*/ .statistics-01 {} .statistics-bg { background-image: url('../../img/bg-02.jpg'); } .statistics-01 .section-space { padding: 118px 0px 64px; } .statistic-area { position: relative; margin: 0px 30px; } .statistics-01 .statistic-area { margin: 0px; margin-bottom: 50px; padding: 0px !important; } .statistics-01 .top { line-height: 1; margin-bottom: 16px; } .statistics-01 i { font-size: 50px; color: #fff; vertical-align: middle; margin-right: 16px; } .statistics-01 .number { font-size: 40px; display: inline-block; vertical-align: middle; font-weight: 900; } .statistics-01 .text { font-size: 16px; color: #fff; margin: 0px; font-weight: 300; } /* ==================================================== Screenshot Styles =======================================================*/ .screenshot { background-color: #fff; } .screenshot.section-space { padding-bottom: 108px; } .screenshoot-wrapper { margin-top: 52px; } .screenshoot-area { position: relative; } .screenshoot-area .mobile-bg { position: absolute; top: -52px; left: 50%; margin-left: -122px; z-index: 3; } .screenshoot-slider { z-index: 2; } .screenshoot-slider .owl-wrapper-outer { margin-bottom: 100px; } .screenshoot-slider .owl-item { -webkit-transition: all .2s ease; transition: all .2s ease; } .screenshoot-slider .owl-item img { width: auto; display: inline-block; } .screenshoot-slider .owl-item { -webkit-transition: all .5s ease; transition: all .5s ease; } .screenshoot-slider .owl-item.left-item { padding-right: 24px; text-align: left; } .screenshoot-slider .owl-item.center-item { padding: 0px 12px; text-align: center; } .screenshoot-slider .owl-item.right-item { padding-left: 24px; text-align: right; } .screenshoot-slider .owl-item img { max-width: 100%; } .owl-theme .owl-controls .owl-pagination { text-align: center; } .owl-theme .owl-controls .owl-pagination .owl-page { display: inline-block; } .owl-theme .owl-controls .owl-pagination .owl-page span { width: 12px; height: 12px; margin: 3px; opacity: 1; filter: alpha(opacity=100); border-radius: 50%; background: #bbb; display: block; } .screenshoot-arrow { margin-top: -88px; } /* ==================================================== Video Styles =======================================================*/ .video-section.section-space { padding-bottom: 120px; } .video-section .section-head { margin-bottom: 0px; } .video-buttons { margin: -3px; margin-top: 40px; } .video-buttons a { margin: 3px; } /* ==================================================== Testimonial Styles =======================================================*/ .testimonial { color: #ccc; } .testimonial-bg { background-image: url('../../img/bg-03.jpg'); } .testimonial .section-space { padding-bottom: 111px; } .section-relative { position: relative; } .single-testimonial { text-align: center; } .single-testimonial .tes-thumbnail-area { position: relative; display: table; margin: 0px auto 34px; } .single-testimonial .tes-thumbnail-outer { width: 184px; height: 184px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background-color: #fff; } .single-testimonial .tes-thumb-img { width: 100%; } .single-testimonial .thumb-icon-area { position: absolute; top: 20px; right: -6px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; font-size: 20px; background-color: #fff; } .single-testimonial blockquote { padding: 0; margin: 0; border: none; line-height: 1.7; } .single-testimonial blockquote .blockquote-text { font-size: 18px; font-style: italic; color: #fff; margin-bottom: 18px; } .single-testimonial blockquote .blockquote-text p {} .single-testimonial blockquote cite { color: #fff; font-style: normal; font-size: 16px; } .tes-thumb-ctrl-area { margin-top: 45px; } .tes-thumb-ctrl-lists { display: table; margin: 0px auto; } .tes-thumb-ctrl-lists li { width: 52px; height: 52px; border: 1px solid #fff; border-radius: 50%; overflow: hidden; display: inline-block; margin-right: 15px; z-index: 2; position: relative; background-color: #fff; } .tes-thumb-ctrl-lists li a { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .tes-thumb-ctrl-lists li a img { position: relative; width: 100%; border-radius: 50%; } .tes-thumb-ctrl-lists li a .tes-thumb-overlay { position: absolute; opacity: 0; filter: alpha(opacity=0); top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 50%; -webkit-transition : opacity .5s ease; transition : opacity .5s ease; } .tes-thumb-ctrl-lists li.active a .tes-thumb-overlay { opacity: .5; filter: alpha(opacity=50); } /* ==================================================== Pricing-Table Styles =======================================================*/ .pricing-table { position: relative; background-color: #fff; } .pricing-table.section-space, .pricing-table .section-space { padding-bottom: 90px; } .single-pricing-table { background-color: #fff; margin-bottom: 30px; box-shadow: 0px 1px 5px rgba(0,0,0,.2); } .pricing-table-style-one .pricing-container > * { padding: 0px 40px; position: relative; } .pricing-table-style-one .pricing-container .p-t-header { padding-top: 60px; margin-bottom: 30px; } .pricing-table-style-one .th-btn-parent { color: #fff; } .pricing-table-style-one .pricing-container .p-t-header .pricing-title { font-size: 36px; margin: 0px; margin-left: -3px; font-weight: 300; } .pricing-table-style-one .best-tag { width: 60px; height: 47px; background-color: #fff; text-align: center; padding: 15px 5px; line-height: 16px; font-size: 14px; position: absolute; top: -2px; right: 20px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); } .pricing-table-style-one .pricing-container .p-t-body { margin-bottom: 40px; } .pricing-table-style-one .pricing-container .p-t-body ul { margin: 0px; padding: 0px; } .pricing-table-style-one .pricing-container .p-t-body ul li { list-style: none; margin-bottom: 22px; color: #999; } .pricing-table-style-one .pricing-container .p-t-body ul li.not-include { text-decoration: line-through; } .pricing-table-style-one .pricing-container .p-t-footer { padding-bottom: 40px; } .pricing-table-style-one .pricing-container .p-t-footer .price { float: left; font-size: 36px; line-height: 1; font-weight: 300; } .pricing-table-style-one .pricing-container .p-t-footer .price .currency { font-size: 25px; line-height: 1; display: inline-block; font-weight: 400; margin-right: 3px; } .pricing-table-style-one .pricing-container .p-t-footer .price span { vertical-align: middle; } .pricing-table-style-one .pricing-container .p-t-footer .button { float: right; } .pricing-table-style-one.best { color: #fff; } .pricing-table-style-one.best .th-btn { background-color: #fff !important; } .pricing-table-style-one.best .pricing-container .p-t-body ul li { color: #fff; } /* ==================================================== Offer Styles =======================================================*/ .special-offer {} .offer-content-wrapper { position: relative; min-height: 610px; } .offer-left-area, .offer-right-area { float: left; width: 50%; min-height: 1px; } .offer-image-area { text-align: center; position: absolute; bottom: 0px; width: inherit; padding: 0px 20px; } .offer-content { margin-top: 16%; margin-bottom: 50px; position: relative; padding-left: 15px; } .offer-content .offer-abs-bg { position: absolute; top: 0px; right: 0px; } .offer-content .offer-abs-bg .big-font { font-size: 300px; opacity: .1; filter: alpha(opacity=10); margin-top: -30px; } .offer-content h2 { font-size: 30px; font-weight: 400; line-height: 1.13; margin-bottom: 47px; color: #333; } .offer-content h2 span { display: block; margin-left: 80px; font-size: 39px; font-weight: 500; text-transform: uppercase; } .offer-content h3 { color: #333; margin-bottom: 42px; font-size: 24px; font-weight: 400; } .offer-content h3 span { } .offer-content p:last-of-type { margin-bottom: 41px; } .offer-content a {} /* ==================================================== Download Styles =======================================================*/ .download { } .download-bg { background-image: url('../../img/bg-04.jpg'); } .download-buttons { margin-top: 66px; } .download-buttons a { display: inline-block; background: #fff; padding: 19px 33px; line-height: 1; margin: 5px; text-align: left; color: inherit; height: auto; border-radius: 0px; } .download-buttons a * { letter-spacing: 0px; } .download-buttons .left-area { font-size: 25px; float: left; margin-right: 17px; } .download-buttons .right-area { float: right; } .download-buttons .right-area * { } .download-buttons .top-area { display: block; font-size: 11px; margin-bottom: 3px; color: #666; } .download-buttons .bottom-area { display: block; color: #333; font-size: 16px; } .download-buttons a:hover * { color: #fff; } .download-buttons a:active { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5) inset; } /* ==================================================== Team Styles =======================================================*/ .team-member { background-color: #fff; } .team-member.section-space { padding-bottom: 28px; } .single-team-wrap { padding: 0px 20px; padding-bottom: 160px; } .single-team { position: relative; } .single-team .team-member-img { position: relative; z-index: 2; } .single-team .team-member-img img { width: 100%; max-width: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: gray; filter: gray; -webkit-transition: all .4s ease; transition: all .4s ease; } .single-team .team-member-info { position: absolute; width: 100%; left: 0px; top: 100%; padding-top: 26px; } .single-team .info-area-top { margin-bottom: 20px; } .team-theme-01 .single-team .info-area-top { -webkit-transform: translateY(-66px); -ms-transform: translateY(-66px); transform: translateY(-66px); -webkit-transition: all .4s ease; transition: all .4s ease; } .team-theme-01:hover .single-team .info-area-top { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .team-theme-01:hover .single-team .team-member-img img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); } .team-theme-01 .single-team .info-area-bottom { -webkit-transform: translateY(-66px); -ms-transform: translateY(-66px); transform: translateY(-66px); -webkit-transition: all .4s ease; transition: all .4s ease; } .team-theme-01:hover .single-team .info-area-bottom { -webkit-transform: translateY(06px); -ms-transform: translateY(06px); transform: translateY(06px); } .single-team .info-area-bottom .t-m-name { font-size: 18px; color: #333; margin-bottom: 5px; text-transform: uppercase; font-weight: 500; } .single-team .info-area-bottom .t-m-designation { font-size: 14px; } .social { padding: 0px; margin: 0px; display: table; width: 100%; margin-bottom: -5px; } .social li { list-style: none; display: inline-block; margin: 5px; } .social li a { display: block; width: 35px; height: 35px; border-radius: 50%; line-height: 35px; font-size: 15px; text-align: center; padding: 0; } .team-theme-01 .single-team:hover .area-top img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); } /* ==================================================== Blog Styles =======================================================*/ .blog-section { background-color: #f7f7f7; padding-bottom: 120px; } .blog-section .home-blog-posts { margin-bottom: 25px; } .single-post { padding-top: 4px; } .comment-link { color: #333; } .blog-posts { overflow: hidden; } .single-blog-post.theme01 { background: #fff; padding: 20px; } .single-blog-post { margin-bottom: 30px; width: 100%; } .blog-post-thumb-container { position: relative; margin-bottom: 15px; line-height: 1; width: 100%; overflow: hidden; } .blog-post-thumb-container .blog-post-thumb-permalink { display: block; position: relative; } .blog-post-thumb-container .blog-post-thumb-permalink:after { position: absolute; content: "\f08e"; font: normal normal normal 15px/33px FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 1px solid #fff; color: #fff; left: 50%; top: 50%; width: 35px; height: 35px; text-align: center; margin-left: -17px; margin-top: -17px; -webkit-transition: all .3s ease; transition: all .3s ease; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .blog-post-thumb-container .blog-post-thumbnail { max-width: 100%; width: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: gray; filter: gray; -webkit-transition: all .4s ease; transition: all .4s ease; } .blog-post-thumb-container:hover .blog-post-thumbnail { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); } .blog-post-thumb-container .blog-post-thumb-permalink:hover:after { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .blog-post-thumb-container .jwlogo { display: none !important; } .single-blog-post .blog-post-title-permalink { display: table; color: #333; } .single-blog-post .blog-post-title { font-size: 20px; margin-bottom: 4px; text-transform: uppercase; font-weight: 900; } .single-blog-post .blog-post-meta, .single-blog-post .blog-post-meta a { font-size: 13px; color: #bbbbbb; } .single-blog-post .blog-post-meta { margin-bottom: 13px; } .single-blog-post .blog-post-content { color: #666; margin-bottom: 18px; max-height: 137px; overflow: hidden; } .single-blog-post .blog-post-content *:last-child { margin-bottom: 0px; } .single-blog-post .blog-post-bottom-meta { } .single-blog-post .blog-post-bottom-meta a.favorite-link { color: #a3a3a3; } .single-blog-post .blog-post-bottom-meta.read-more .favorite-link { margin-top: 6px; } .blog-post-thumb-container > iframe { width: 100% !important; border: none; height: 100% !important; } .thumb-slides-controller {} .thumb-slides-controller a { font-size: 16px; width: 25px; height: 25px; line-height: 25px; text-align: center; display: block; position: absolute; top: 5px; left: 5px; color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .thumb-slides-controller a.right-arrow { left: 35px; } .thumb-slides-controller a:hover { background-color: #444; } /* ==================================================== News-Letter Styles =======================================================*/ .news-letter {} .news-letter-bg { background-image: url('../../img/bg-05.jpg'); } .news-letter .section-space { padding-bottom: 111px; } .newsletter-form-area form { display: inline-block; position: relative; width: 530px; max-width: 100%; } .newsletter-form-area .mail-icon { width: 25px; position: absolute; left: 0px; top: 0px; height: 100%; padding: 0px; margin: 0px; line-height: 39px; color: #ADADAD; font-size: 17px; text-align: left; } .newsletter-form-area form input[type="email"] { border: none; max-width: 100%; color: #ddd; border-bottom: 1px solid #fff; margin: 0px; padding-right: 30px; padding-left: 30px; text-align: center; display: block; box-sizing: border-box; font-weight: 300; font-size: 14px; } .newsletter-form-area form input[type="submit"] { outline: none; text-indent: -99999px; background: url('../../img/go-btn.png') transparent no-repeat; width: 25px; background-position: center right; border: none; position: absolute; right: 0px; top: 0px; height: 100%; padding: 0px; margin: 0px; } .newsletter-form-area input::-webkit-input-placeholder { line-height: 1.9; color: #bbb; } .newsletter-form-area input:-moz-placeholder { line-height: 1.9; color: #bbb; } .newsletter-form-area input::-moz-placeholder { line-height: 1.9; color: #bbb; } .newsletter-form-area input:-ms-input-placeholder { line-height: 1.9; color: #bbb; } .mailchimp-form-message { display: table; margin: 30px auto 0px; color: #333; font-size: 13px; padding: 7px 15px; font-weight: 400; background-color: #fff; } .mailchimp-form-message.error { color: #FF5F5F; } .mailchimp-form-message * { margin: 0px; } /* ==================================================== Twitter Styles =======================================================*/ .tweet-section { background-color: #fff; } .tweet-section.section-space { padding-bottom: 108px; } .twitter-header { margin-top: 5px; } .twitter-header .twitter-icon { font-size: 50px; margin-bottom: 18px; display: inline-block; } .twitter-header .twitter-title { font-size: 30px; } #allTweets {} #allTweets .single-tweet {} #allTweets .single-tweet .tweet-date { font-size: 15px; color: #999; margin-bottom: 18px; line-height: 1; } #allTweets .single-tweet .tweet-text { margin-bottom: 25px; font-size: 15px; } #allTweets .single-tweet .tweet-text a:hover {} #allTweets .single-tweet .tweet-controlls { margin-bottom: 22px; } #allTweets .single-tweet .tweet-controlls a { color: #999; margin-left: 15px; margin-right: 15px; } #allTweets .single-tweet .tweet-controlls a i { display: inline-block; margin-right: 5px; font-size: 14px; vertical-align: middle; } #allTweets .single-tweet .tweet-controlls a.relpy-btn i { font-size: 22px; } #allTweets .single-tweet .tweet-controlls a.retweet-btn i { font-size: 16px; } #allTweets .single-tweet .tweet-controlls a.favorite-btn i { font-size: 16px; } .slider-arrow.tweets-arrow { margin-top: 20px; } /* ==================================================== Map Styles =======================================================*/ .map-section { position: relative; } .map-header-area { text-align: center; color: #fff; padding: 36px 0px; width: 100%; z-index: 1; } .map-header-area h2 { font-size: 24px; text-transform: uppercase; font-weight: 900; } .map-header-area h2 .location-icon { display: inline-block; background: #fff; color: #666; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; margin-right: 18px; } .map { width: 100%; height: 450px; } .map #map { display: block; width: 100%; height: 100%; } #map img { max-width: inherit; } /* ==================================================== Contact Styles =======================================================*/ .contact { position: relative; bottom: 0px; width: 100%; background-color: #fff; border-top: 1px solid rgba(0,0,0,.1); } .contact .contact-location-toggle-btn { display: block; width: 66px; height: 66px; line-height: 66px; text-align: center; border-radius: 50%; color: #fff; padding: 0px; position: absolute; top: 0px; left: 50%; margin-left: -33px; margin-top: -33px; z-index: 333; } .contact .contact-location-toggle-btn i { font-size: 30px; } .contact .contact-content-wrapper { padding-top: 110px; display: none; padding-bottom: 120px; } .contact-title { font-size: 20px; color: #777; margin-bottom: 35px; } .contact-info .contact-info-lists li { list-style: none; margin-bottom: 20px; } .contact-info .contact-info-lists li a { font-size: 14px; color: #777; display: inline-block; position: relative; padding-left: 47px; min-height: 35px; padding-top: 4px; } .contact-info .contact-info-lists li a span { display: inline-block; width: 35px; height: 35px; line-height: 36px; background: #fff; border-radius: 50%; text-align: center; font-size: 12px; padding: 0px; position: absolute; top: 0; left: 0; } .contact-info .contact-info-lists li a span i { font-size: 17px; } .contact-info .contact-info-lists li a:hover span i { color: #fff !important; } .cu-form input, .cu-form textarea { margin-bottom: 23px; border-bottom-color: #ececec; height: 30px; } .cu-form input:focus, .cu-form textarea:focus { color: #444; font-size: 14px; } .cu-form input[type="submit"] { width: auto; font-size: 14px; color: #fff; border: none; padding: 15px 30px; height: auto; margin-bottom: 30px; margin-top: 20px; } .cu-form .input-field label { color: #bbb; left: 0px; top: 0px; } .cu-form .input-field label.active { font-size: 13px; color: #727272; -webkit-transform: translateY(-94%); -ms-transform: translateY(-94%); transform: translateY(-94%); } .cu-form .form-message { padding: 10px; font-size: 13px; background: #fff; } .cu-form .form-message * { margin: 0px; } .cu-form .form-message.error { color: #FF5F5F; } /* ==================================================== Footer Styles =======================================================*/ .main-footer { position: relative; z-index: 111; } .main-footer { text-align: center; } .main-footer .top { background-color: #1e1e1e; color: #fff; padding: 85px 0px 50px; } .main-footer .footer-logo { margin-bottom: 50px; } .main-footer .bottom { background-color: #171717; color: #666; font-size: 13px; padding: 13px 0px; border-top: 1px solid #222222; } .main-footer .bottom p { margin: 0px; } .main-footer .footer-social li {} .main-footer .footer-social li a { font-size: 17px; border: none; width: 50px; height: 50px; padding: 0px; line-height: 50px; background-color: #fff; } .main-footer .footer-social li a:hover { color: #fff; } /* ==================================================== Some Helper Styles =======================================================*/ /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } .nobgimage { background-image: inherit !important; } .opaciry30 { opacity: .3 !important; filter: alpha(opacity=30); } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* * Print styles. * Inlined to avoid required HTTP connection: h5bp.com/r */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }