FM Shell v3
| user: iis apppool\cms1 | host: TEST-IIS | ps: 5.1.14393.3053 | pid: 9336
cwd:
C:\inetpub\wwwroot\css
[..]
go
mkdir
run
upload
edit: C:\inetpub\wwwroot\prabhutifinance.com\style.css
/*------------------------------------------------------------------ [Master Stylesheet] Project: Fekra Version: 1 Last change: 10/25/2015 [no Change] Primary use: Fekra Multi Purpose -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1-1. agency page Styles 2-1. creative page Styles 3-1. croporate page Styles 4-1. minimal page Styles 5-1. personal page Styles 6-1. photographer page Styles 7-1. freelancer page Styles 8-1. wedding page Styles 9-1. shop page Styles 10-1. restaurant page Styles 11-1. architecture page Styles 12-1. construction page Styles 13-1. realestate page Styles 14-1. travel page Styles 15-1. yoga page Styles 16-1. blog page Styles 17-1. portfolio page Styles 18-1. app landing page Styles 19-1. one page Styles 20-1. shop inner page Styles 21-1. blog full width page Styles -------------------------------------------------------------------*/ #wrapper, #main, .banner, .price-section, .counter-section, .pie-section, .joinus-section, .video-section, .personal-banner, .lancer-banner, .wedding-banner, .love-story, .invite-text, .wedding-photos, .archi-projects, .safety-section, .const-services, .realestate-services, .events-mainbanner, .app-banner, .app-mainbanner, .appsub-section, .appshowcase-banner, .map, .blog-mainbanner, .blog-container { width: 100%; overflow: hidden; position: relative; } .client-box img, .personal-exper.style3 .img-box img, .product-article .alignleft img, .realestate-services img { max-width: 100%; display: block; height: auto; } .happy-couple .img-box img, .collection-col img, .new-product .product-img img, .deal-gallery .deal-img img, .chef-carousel .img-box img, .blog-over .author-info .author-img img { width: 100%; display: block; height: auto; } .lancer-do .list-do, .realestate-section .tabset, .realestate-services .star-list, .travel-section .tabset { list-style: none; margin: 0; padding: 0; } .banner:after, .team-block .over, .team-box .over, .testimon-section:after, .portfolio-block .title:after, .portfolio-block .text-box:after, .isotop-controls2 a:after, .isotop-controls2 li:after, .isotop-controls3 a:after, .isotop-controls3 li:after, .isotop-controls4 a:before, .isotop-controls4 .view-all:before, .price-section:after, .blog-section .beans-stepslider .slick-dots button:after, .blog-m-post.style2 .icon:before, .facts-section .num:after, .counter-section:after, .counter-section .num:after, .banner-img:after, .pie-section:after, .joinus-section:after, .counter-container .num:after, .clients-section3 .list li:after, .video-section:after, .nav-tabs > li > a:before, .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:hover:before, .nav-tabs > li.active > a:focus:before, .personal-exper .p-holder:after, .love-story .row-holder:before, .shop-features h2:before, .resturant-heading:before, .our-menu-nav li a:before, .archi-columns h2:after, .archi-projects:after, .archi-projects h3:after, .safety-section .more:before, .events-mainbanner .wedding-nav .countdown-section .countdown-amount:before, .events-mainbanner .stretch:before, .app-mainbanner .stretch:before, .appshowcase-banner .container:before, .tabset-onepage li a:before, .process-nav:before, .shop-widget:before, .widget:before, .comment-box .box .img-box .reply .txt-over:after { content: ''; position: absolute; } .business-block:after, .love-story .row-holder:after, .features-box:after, .shop-widget:after, .shop-widget ul:after, .description-block .buttons-block:after, .comment-box .box:after { content: " "; display: block; clear: both; } .team-block .over, .team-box .over, .portfolio-block .over, .portfolio-block.style5 .holder, .portfolio-text .holder, .pie-section .parallax-holder, .joinus-section .parallax-holder, .video-section .video-area, .welcom-banner .beans-fadeslider, .welcom-banner .beans-fadeslider .slideset, .welcom-banner .beans-fadeslider .slick-track, .welcom-banner .beans-fadeslider .slick-list, .wedding-banner .banner-over, .wedding-photos .over, .collection-over, .product-over, .slide-over, .architecture-gallery .slick-arrow:after, .archi-columns .more:after, .const-services .box .over, .realestate-services .box .over, .blog-over { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .testimon-section, .price-section, .counter-section, .banner-img, .header { -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; } body { color: #8f8f8f; background: white; } @media only screen and (max-width: 767px) { body { font-size: 14px; } } /*------------------------------------------------------------------ 1-1. agency page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1-2. page wrapper Styles / #wrapper 1-3. page w1 Styles / .w1 1-4. mainslider Styles / .mainslider 1-5. main slider Styles / .main-slider 1-6. main Styles / #main 1-7. history section Styles / .history-section 1-8. f iconbox Styles / .f-iconbox 1-9. banner Styles / .banner 1-10. team block Styles / .team-block 1-11. team box Styles / .team-box 1-12. testimon section Styles / .testimon-section 1-13. work section Styles / .work-section 1-14. portfolio block Styles / .portfolio-block 1-15. porto nav Styles / .porto-nav 1-16. portfolio text Styles / .portfolio-text 1-17. work slider Styles / .work-slider 1-18. isotop controls Styles / .isotop-controls 1-19. isotop controls2 Styles / .isotop-controls2 1-20. isotop controls3 Styles / .isotop-controls3 1-21. isotop controls4 Styles / .isotop-controls4 1-22. more feature Styles / .more-feature 1-23. price section Styles / .price-section 1-24. blog section Styles / .blog-section 1-25. blog m post Styles / .blog-m-post 1-26. facts section Styles / .facts-section 1-27. client box Styles / .client-box 1-28. team lightbox Styles / .team-lightbox 1-29. about section Styles / .about-section 1-30. counter section Styles / .counter-section 1-31. banner img Styles / .banner-img -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 1-2. page wrapper Styles / #wrapper -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 1-3. page w1 Styles / .w1 -------------------------------------------------------------------*/ .w1 { position: relative; -webkit-transition: margin 0.4s ease; -moz-transition: margin 0.4s ease; -o-transition: margin 0.4s ease; transition: margin 0.4s ease; } .tp-loader.spinner4 { display: none !important; } .img-responsive{ height:auto; display:block; } /*------------------------------------------------------------------ 1-4. mainslider Styles / .mainslider -------------------------------------------------------------------*/ .mainslider { color: white; overflow: hidden; position: relative; } .mainslider .title { display: block; letter-spacing: 2px; text-transform: uppercase; font-size: 21px !important; font-weight: 300 !important; line-height: 25px !important; } @media only screen and (max-width: 991px) { .mainslider .title { font-size: 18px !important; } } @media only screen and (max-width: 767px) { .mainslider .title { font-size: 16px !important; line-height: 20px !important; margin: -30px 0 0 -10px !important; } } .mainslider .title2 { font: 24px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } @media only screen and (max-width: 991px) { .mainslider .title2 { font-size: 18px !important; } } @media only screen and (max-width: 767px) { .mainslider .title2 { font-size: 16px !important; line-height: 20px !important; } } .mainslider .heading { text-align: center; text-transform: uppercase; letter-spacing: 0.4px !important; font: 500 54px/56px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } @media only screen and (max-width: 1219px) { .mainslider .heading { font-size: 40px !important; line-height: 50px !important; } } @media only screen and (max-width: 767px) { .mainslider .heading { font-size: 25px !important; line-height: 30px !important; } } .mainslider .heading .add { font-weight: 300; } .mainslider .heading2 { text-align: center; text-transform: uppercase; letter-spacing: 0.6px !important; font: 700 60px/65px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } @media only screen and (max-width: 1219px) { .mainslider .heading2 { font-size: 40px !important; line-height: 50px !important; } } @media only screen and (max-width: 767px) { .mainslider .heading2 { font-size: 25px !important; line-height: 30px !important; } } .mainslider .btn-box { overflow: hidden; text-align: center; cursor: default !important; } @media only screen and (max-width: 767px) { .mainslider .btn-box { margin: 80px 0 0 !important; } } .mainslider .btn-box .btn { margin: 0 3px 0 5px; font-size: 12px !important; } @media only screen and (max-width: 767px) { .mainslider .btn-box .btn { margin: 0 3px; padding: 10px !important; border-width: 1px !important; } } .mainslider .tp-bullets { display: none !important; } .mainslider .slideset { position: relative; } /*------------------------------------------------------------------ 1-5. main slider Styles / .main-slider -------------------------------------------------------------------*/ .main-slider { overflow: hidden; position: relative; text-transform: uppercase; } .main-slider .beans-fadeslider { height: 80px; overflow: visible; } @media only screen and (max-width: 767px) { .main-slider .beans-fadeslider.text-rotator h1 { font-size: 30px; line-height: 30px; } } .main-slider .caption { z-index: 99; width: 100%; color: white; min-height: 600px; text-align: center; position: relative; padding: 130px 0 0; white-space: nowrap; } .main-slider .caption .holder { display: inline-block; white-space: normal; vertical-align: middle; } .main-slider .caption:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .main-slider .caption { min-height: 400px; padding: 110px 0 0; } } .main-slider .caption .holder { width: 99%; padding: 0 0 11px; } @media only screen and (max-width: 767px) { .main-slider .caption .holder { padding: 90px 0 0; } } .main-slider .title { display: block; font-size: 21px; font-weight: 300; margin: 0 0 41px; line-height: 25px; text-transform: uppercase; } @media only screen and (max-width: 991px) { .main-slider .title { font-size: 18px; } } @media only screen and (max-width: 767px) { .main-slider .title { font-size: 16px; line-height: 20px; } } .main-slider .title2 { display: block; margin: 0 0 41px; text-transform: capitalize; font: 24px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 991px) { .main-slider .title2 { font-size: 18px; } } @media only screen and (max-width: 767px) { .main-slider .title2 { font-size: 16px; line-height: 20px; } } .main-slider .heading, .main-slider .heading2 { margin: 0 0 29px; text-align: center; text-transform: uppercase; font: 700 60px/65px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 1219px) { .main-slider .heading, .main-slider .heading2 { font-size: 40px; line-height: 50px; } } @media only screen and (max-width: 767px) { .main-slider .heading, .main-slider .heading2 { font-size: 25px; margin: 0 0 15px; line-height: 30px; } } .main-slider .btn-box { overflow: hidden; text-align: center; } @media only screen and (max-width: 767px) { .main-slider .btn-box { margin: 40px 0 0; } } .main-slider .btn-box .btn { margin: 0 3px 0 5px; } @media only screen and (max-width: 767px) { .main-slider .btn-box .btn { margin: 0 0 15px; } } .main-slider .slick-arrow { right: 0; top: 50%; border: 0; opacity: 0; z-index: 99; padding: 0; width: 20px; height: 50px; font-size: 0; color: white; background: none; text-align: left; margin: -46px 0 0; visibility: hidden; position: absolute; text-indent: 9999px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .main-slider .slick-arrow { margin: -20px 0 0; right: 15px; } } .main-slider .slick-arrow:hover:after { opacity: 0.8; } .main-slider .slick-arrow:after { top: 0; left: 3px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .main-slider .slick-prev { left: 0; right: auto; } .main-slider .slick-prev:after { content: "\f104"; } .main-slider .slick-dots { bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .main-slider .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .main-slider .slick-dots button { margin: 0; padding: 0; display: block; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 12px; height: 12px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .main-slider .slick-dots button:hover { text-decoration: none; } .main-slider .slick-track .caption > .holder { transition: all 2.5s ease; position: relative; bottom: -50px; opacity: 0; } .main-slider .slick-track .slick-active .caption > .holder { transition: all 1s ease 1s; opacity: 1; bottom: 0; } .main-slider .stretch { z-index: auto !important; } @media only screen and (max-width: 767px) { .main-slider.style3 .caption { min-height: 600px; } } .main-slider.style3 .caption .holder { padding: 140px 0 11px; } .main-slider.style3 .title { color: white; margin: 0 0 3px; font: 32px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .main-slider.style3 h1 { color: white; margin: 0 0 11px; font: 700 60px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .main-slider.style3 h1 { font-size: 30px; line-height: 45px; } } .main-slider:hover .slick-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .main-slider:hover .slick-next { right: 15px; } } .main-slider:hover .slick-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .main-slider:hover .slick-prev { right: auto; left: 15px; } } .main-slider:hover .slick-dots { opacity: 1; bottom: 20px; visibility: visible; } /*------------------------------------------------------------------ 1-6. main Styles / #main -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 1-7. history section Styles / .history-section -------------------------------------------------------------------*/ .history-section { font-size: 16px; line-height: 26px; padding: 88px 0 0; } @media only screen and (max-width: 767px) { .history-section { line-height: 20px; padding: 30px 0 0; } } .history-section .text-box { max-width: 840px; color: #666666; font-style: italic; text-align: center; margin: 0 auto 53px; } @media only screen and (max-width: 767px) { .history-section .text-box { margin: 0 auto 30px; } } .history-section .img-box { font-size: 0; overflow: hidden; letter-spacing: -4px; } @media only screen and (max-width: 767px) { .history-section .img-box { text-align: center; } } .history-section .img-box img { width: 100%; } .history-section .img-box .img1 { margin: 5px 10px 0 0; display: block; max-width: 100%; height: auto; max-width: 287px; display: inline-block; vertical-align: bottom; } @media only screen and (max-width: 1219px) { .history-section .img-box .img1 { max-width: 225px; } } @media only screen and (max-width: 991px) { .history-section .img-box .img1 { max-width: 185px; } } @media only screen and (max-width: 767px) { .history-section .img-box .img1 { max-width: 100%; } } .history-section .img-box .img2 { margin: 5px 10px 0 0; display: block; max-width: 100%; height: auto; max-width: 569px; display: inline-block; vertical-align: bottom; } @media only screen and (max-width: 1219px) { .history-section .img-box .img2 { max-width: 470px; } } @media only screen and (max-width: 991px) { .history-section .img-box .img2 { max-width: 330px; } } @media only screen and (max-width: 767px) { .history-section .img-box .img2 { max-width: 100%; } } .history-section .img-box .img3 { display: block; max-width: 100%; height: auto; max-width: 287px; display: inline-block; vertical-align: bottom; } @media only screen and (max-width: 1219px) { .history-section .img-box .img3 { max-width: 225px; } } @media only screen and (max-width: 991px) { .history-section .img-box .img3 { max-width: 185px; } } @media only screen and (max-width: 767px) { .history-section .img-box .img3 { max-width: 100%; } } .history-section .img-center { display: block; margin: 0 auto 20px; } .history-section .title { display: block; margin: 0 0 20px; font-weight: 700; } .history-section.style2 { font-size: 18px; font-weight: 300; } @media only screen and (max-width: 767px) { .history-section.style2 { font-size: 16px; } } .history-section.style2 p { margin: 0 0 57px; } /*------------------------------------------------------------------ 1-8. f iconbox Styles / .f-iconbox -------------------------------------------------------------------*/ .f-iconbox { z-index: 5; font-size: 14px; line-height: 24px; position: relative; padding-left: 96px; } .f-iconbox .icon { left: 0; top: 7px; font-size: 25px; padding: 20px 0 0; text-align: center; border-radius: 50%; position: absolute; width: 68px; height: 68px; border: 2px solid transparent; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 1219px) { .f-iconbox .icon { margin: 0 8px 0 0; } } .f-iconbox .title { color:#eb5300; display: block; margin: 0 0 9px; font-size: 18px; font-weight: 500; letter-spacing: 0px; text-transform: capitalize; } .dark .f-iconbox .title { color: white; } .f-iconbox p { margin: 0; font-size: 14px; text-align: justify; color: #111; } .f-iconbox.large { font-size: 15px; } .f-iconbox.large .title { font-size: 16px; } .f-iconbox.right { padding-left: 0; text-align: right; padding-right: 96px; } .f-iconbox.right .icon { right: 0; left: auto; } .f-iconbox.light .icon { color: #dddddd; border-color: #dddddd; } .dark .f-iconbox.light .icon { color: #8f8f8f; border-color: #494949; } .f-iconbox.light:hover .icon { color: white; } .f-iconbox.radius-zero .icon { border-radius: 0; } .f-iconbox.noicon { padding-right: 0; } .f-iconbox.noicon .icon { display: none; } .f-iconbox:hover .icon { color: white; } .f-iconbox:hover .icon.border-zero { color: inherit; } /*------------------------------------------------------------------ 1-9. banner Styles / .banner -------------------------------------------------------------------*/ .banner { color: white; text-align: center; position: relative; padding: 89px 0 95px; font: 300 italic 32px/54px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .banner:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: transparent; } .banner:after { background: rgba(55, 63, 69, 0.7); } .banner p { margin: 0 0 34px; } @media only screen and (max-width: 1219px) { .banner { font-size: 30px; line-height: 50px; } } @media only screen and (max-width: 767px) { .banner { font-size: 20px; line-height: 25px; } } .banner.style2:after { background: rgba(0, 0, 0, 0.1); } .banner.style3:after { background: rgba(0, 0, 0, 0.5); } .banner .parallax-holder { z-index: -1; } /*------------------------------------------------------------------ 1-10. team block Styles / .team-block -------------------------------------------------------------------*/ .team-block { font-size: 11px; font-weight: 700; overflow: hidden; line-height: 20px; text-align: center; position: relative; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; } .team-block .img-box { position: relative; margin: 0 0 25px; } .team-block .img-box img { width: 100%; } .team-block .over { opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-block .social-network { top: 50%; left: 0; right: 0; opacity: 0; color: white; font-size: 21px; margin: -11px 0 0; position: absolute; visibility: hidden; } .team-block .social-network li { opacity: 0; position: relative; visibility: hidden; padding: 0 7px 0 14px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-block .social-network a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-block .social-network a:hover { opacity: 0.85; text-decoration: none; } .team-block .social-network .add { -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } .team-block .social-network .add2 { -webkit-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); } .team-block .heading { margin: 0; color: #2a2a2a; letter-spacing: 2px; text-transform: uppercase; font: 700 14px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .team-block .heading a { color: #2a2a2a; } .dark .team-block .heading a { color: white; } .team-block .heading a:hover { opacity: 0.85; text-decoration: none; } .dark .team-block .heading { color: white; } .team-block:hover .social-network, .team-block:hover .over { opacity: 0.85; visibility: visible; } .team-block:hover .add, .team-block:hover .add2 { opacity: 1; visibility: visible; transform: translateY(0); } .team-block.style2 { text-transform: lowercase; background: #f8f8f8; } .dark .team-block.style2 { background: #191919; } .team-block.style2 .heading { text-transform: lowercase; text-transform: capitalize; } .team-block.style2 .title { display: block; padding: 5px 0 20px; text-transform: uppercase; } .team-block.style2 .block { overflow: hidden; padding: 0 8% 24px; } .team-block.style2:hover { background: #2a2a2a; } .team-block.style2:hover .heading { color: white; } /*------------------------------------------------------------------ 1-11. team box Styles / .team-box -------------------------------------------------------------------*/ .team-box { color: #8f8f8f; font-size: 11px; font-weight: 700; overflow: hidden; line-height: 20px; text-align: center; position: relative; background: #f8f8f8; text-transform: uppercase; } .dark .team-box { background: #191919; } @media only screen and (max-width: 991px) { .team-box { margin-bottom: 20px; } } .team-box .plus { top: 50%; left: 50%; opacity: 0; color: white; font-size: 150px; font-weight: 100; visibility: hidden; position: absolute; margin: -10px 0 0 -32px; font-family: "Raleway", Georgia, "Times New Roman", Times, serif; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-box .plus:hover { opacity: 0.8; text-decoration: none; } .team-box .img-box { position: relative; margin: 0 0 25px; } .team-box .img-box img { width: 100%; } .team-box .over { opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-box p { margin: 0 0 26px; letter-spacing: 1px; } .team-box .social-network { margin: 0; color: #8f8f8f; font-size: 17px; padding: 15px 0 14px; border-top: 1px solid white; } .dark .team-box .social-network { border-color: #494949; } .team-box .social-network li { position: relative; padding: 0 12px 0 10px; } .team-box .social-network a { color: #8f8f8f; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-box .social-network a:hover { opacity: 0.85; text-decoration: none; } .team-box .heading { color: #2a2a2a; margin: 0 0 9px; letter-spacing: 2px; text-transform: uppercase; font: 700 14px/20px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 1219px) { .team-box .heading { font-size: 12px; } } .dark .team-box .heading { color: white; } .team-box .heading a { color: #2a2a2a; } .dark .team-box .heading a { color: white; } .team-box .heading a:hover { opacity: 0.85; text-decoration: none; } .team-box .info-box { font-size: 11px; font-weight: 700; overflow: hidden; padding: 5px 0 0; } .team-box .info-box .add-text { float: left; margin: 0 30px 0 0; } @media only screen and (max-width: 1219px) { .team-box .info-box .add-text { margin: 0 10px 0 0; } } .team-box .info-box .add-text:first-child { margin: 0; float: right; } .team-box:hover { background: #2a2a2a; } .team-box:hover .heading { color: white; } .team-box:hover .social-network a { color: white; } .team-box:hover .over { opacity: 0.9; visibility: visible; } .team-box:hover .plus { opacity: 1; visibility: visible; } .team-box.style2 { font-size: 13px; margin: 0 0 27px; overflow: hidden; text-align: left; line-height: 24px; font-weight: normal; text-transform: inherit; background: #f8f8f8; border: 1px solid #f2f2f2; } .dark .team-box.style2 { background: #191919; border-color: #494949; } @media only screen and (max-width: 1219px) { .team-box.style2 { font-size: 11px; line-height: 20px; } } .team-box.style2.right { text-align: right; } @media only screen and (max-width: 991px) { .team-box.style2.right { text-align: left; } } .team-box.style2.right .img-box { float: right; } @media only screen and (max-width: 991px) { .team-box.style2.right .img-box { float: none; } } .team-box.style2.right .block { padding: 30px 28px 0 30px; } @media only screen and (max-width: 1219px) { .team-box.style2.right .block { padding: 15px 10px 0; } } @media only screen and (max-width: 991px) { .team-box.style2.right .block { padding: 25px 15px; } } .team-box.style2.right .social-network li { padding: 0 1px 0 21px; } @media only screen and (max-width: 991px) { .team-box.style2.right .social-network li { padding: 0 21px 0 1px; } } .team-box.style2.right .info-box .add-text:first-child { margin: 0; float: right; } .team-box.style2 p { margin: 0 0 20px; } @media only screen and (max-width: 1219px) { .team-box.style2 p { margin: 0 0 10px; } } .team-box.style2 .block { overflow: hidden; padding: 30px 28px 0 28px; } @media only screen and (max-width: 1219px) { .team-box.style2 .block { padding: 15px 10px 0; } } @media only screen and (max-width: 991px) { .team-box.style2 .block { padding: 25px 15px; } } .team-box.style2 .img-box { margin: 0; float: left; max-width: 270px; } @media only screen and (max-width: 1219px) { .team-box.style2 .img-box { max-width: 200px; } } @media only screen and (max-width: 991px) { .team-box.style2 .img-box { float: none; max-width: 100%; } } .team-box.style2 .heading { margin: 0 0 3px; } .team-box.style2 .subtitle { display: block; font-size: 11px; margin: 0 0 18px; text-transform: uppercase; } @media only screen and (max-width: 1219px) { .team-box.style2 .subtitle { margin: 0 0 9px; } } .team-box.style2 .social-network { padding: 0; border-top: 0; font-size: 16px; } .team-box.style2 .social-network li { padding: 0 22px 0 0; } .team-box.style2:hover h3 { color: #2a2a2a; } .dark .team-box.style2:hover h3 { color: white; } .team-box.style2:hover .social-network { background: transparent; } .team-box.style2:hover .social-network a { color: #8f8f8f; } .team-box.style3 .img-box { margin: 0; } .team-box.style3 .over { background: rgba(0, 0, 0, 0.95) !important; } .team-box.style3 .social-network { margin: 0 0 25px; border-bottom: 1px solid white; } .dark .team-box.style3 .social-network { border-color: #494949; } .team-box.style3 .social-network a { color: white; } /*------------------------------------------------------------------ 1-12. testimon section Styles / .testimon-section -------------------------------------------------------------------*/ .testimon-section { overflow: hidden; position: relative; padding: 90px 0 80px; position: relative; z-index: 1; } .testimon-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.4); } .testimon-section .icon { color: white; display: block; font-size: 21px; padding: 17px 0 0; text-align: center; border-radius: 50%; margin: 0 auto 24px; width: 63px; height: 63px; } .testimon-section .img { display: block; border-radius: 50%; margin: 0 auto 29px; } .testimon-section blockquote { padding: 0; color: white; border-left: 0; max-width: 885px; text-align: center; margin: 0 auto 60px; font: 300 italic 21px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .testimon-section blockquote a { color: white; } .testimon-section blockquote a:hover { opacity: 0.8; text-decoration: none; } .testimon-section q { display: block; margin: 0 0 23px; } .testimon-section q:after, .testimon-section q:before { font-size: 30px; } .testimon-section cite { display: block; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .testimon-section .name { display: block; font-weight: 400; font-weight: 600; margin-bottom: 6px; letter-spacing: 2px; text-transform: uppercase; color:#fff; } .testimon-section .comp-name { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .testimon-section .slick-dots li { margin: 0 3px; display: inline-block; vertical-align: top; } .testimon-section .slick-dots button { margin: 0; border: 0; padding: 0; display: block; background: none; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .testimon-section .slick-dots button:hover { text-decoration: none; } .testimon-section .parallax-holder { z-index: -1; } .testimon-section.alt-version blockquote { color: #8f8f8f; } .testimon-section.alt-version blockquote a { color: #8f8f8f; } .testimon-section.alt-version blockquote q { margin: 0 0 49px; } .testimon-section.alt-version blockquote q:before, .testimon-section.alt-version blockquote q:after { display: none; } .testimon-section.alt-version blockquote .fa { display: block; margin: 0 0 27px; } .testimon-section.alt-version blockquote .name { color: #2a2a2a; } .dark .testimon-section.alt-version blockquote .name { color: white; } .testimon-section.alt-version .slick-dots button { border-color: #dddddd; width: 12px; height: 12px; } .market h4{ font-size:20px; color:#330466; text-align:center; padding-bottom:15px; } /*------------------------------------------------------------------ 1-13. work section Styles / .work-section -------------------------------------------------------------------*/ .work-section { overflow: hidden; } .work-section .icotop-holder { overflow: hidden; position: relative; } .work-section .slick-dots { bottom: 24px; } .work-section .slick-dots li { float: none; padding: 0 4px; display: inline-block; vertical-align: top; } .work-section .slick-dots li.slick-active button { background: white; } .work-section .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .work-section .slick-dots li button:hover { background: white; text-decoration: none; } .work-section.space { padding-left: 30px; } @media only screen and (max-width: 767px) { .work-section.space { padding-left: 0; } } .work-section.space #work-filter { padding-right: 30px; } @media only screen and (max-width: 767px) { .work-section.space #work-filter { padding-right: 0; } } /*------------------------------------------------------------------ 1-14. portfolio block Styles / .portfolio-block -------------------------------------------------------------------*/ .portfolio-block { float: left; width: 100%; overflow: hidden; letter-spacing: 2px; } .portfolio-block a { color: #8f8f8f; } .portfolio-block a:hover { text-decoration: none; } .portfolio-block .box { position: relative; margin: 0 30px 30px 0; } @media only screen and (max-width: 767px) { .portfolio-block .box { margin: 0 0 30px; } } .portfolio-block .box:hover .over { opacity: 1; visibility: visible; } .portfolio-block .box:hover .over-frame { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .portfolio-block .box-holder { padding-top: 100%; } .portfolio-block .box-holder.half { padding-top: 50%; } @media only screen and (max-width: 767px) { .portfolio-block .box-holder.half { padding-top: 100%; } } .portfolio-block .holder { width: 100%; height: 100%; display: table; vertical-align: middle; } .portfolio-block .frame { padding: 19px 0 0; width: 100%; height: 100%; display: table-cell; vertical-align: middle; } .portfolio-block .over { opacity: 0; z-index: 99; text-align: center; visibility: hidden; text-transform: uppercase; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .portfolio-block .over .plus { height: 40px; display: block; font-size: 120px; font-weight: 100; margin: 0 0 16px; font-family: "Raleway", Georgia, "Times New Roman", Times, serif; } .portfolio-block .over .plus.small { font-size: 80px; height: 36px; margin: -17px 0 12px; } .portfolio-block .over:hover { text-decoration: none; } .portfolio-block .over.capitalize { text-transform: lowercase; text-transform: capitalize; } .portfolio-block .over-frame { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); display: block; } .portfolio-block .over-frame.no-animate { -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .portfolio-block .title { color: white; display: block; margin: 0 0 10px; padding: 0 0 14px; position: relative; text-transform: capitalize; font: 600 18px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .portfolio-block .title:after { bottom: 0; left: 50%; margin: 0 0 0 -14px; width: 28px; height: 4px; } .portfolio-block .title.upper { text-transform: uppercase; } .portfolio-block .heading { color: white; display: block; margin: 0 0 15px; text-transform: capitalize; font: italic 300 48px/50px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 1219px) { .portfolio-block .heading { font-size: 30px; line-height: 40px; } } .portfolio-block .heading.upper { text-transform: uppercase; } .portfolio-block img { width: 100%; } .portfolio-block .search { bottom: 0; right: 57px; color: white; font-size: 26px; padding: 13px 0 0; text-align: center; position: absolute; width: 57px; height: 57px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .portfolio-block .search:hover { color: #2a2a2a; background: #f8f8f8; } .portfolio-block .link { right: 0; bottom: 0; color: #2a2a2a; font-size: 25px; padding: 16px 0 0; text-align: center; position: absolute; width: 57px; height: 57px; background: #f8f8f8; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .portfolio-block .link:hover { color: white; text-decoration: none; background: #e74c3c; } .portfolio-block .btn { border-width: 2px; font-weight: 700; } .portfolio-block .btn:hover { color: black; background: white; border-color: white; } .portfolio-block .text-box { z-index: 100; position: relative; padding: 11px 18px 6px; background: #f8f8f8; } .dark .portfolio-block .text-box { background: #191919; } .portfolio-block .text-box:after { left: 21px; top: -14px; width: 0; height: 0; border-style: solid; border-width: 0 7px 16px 7px; border-color: transparent transparent #f8f8f8 transparent; } .dark .portfolio-block .text-box:after { border-color: transparent transparent #191919 transparent; } .portfolio-block .img-box { overflow: hidden; position: relative; } .portfolio-block.style2 .over { top: 100%; opacity: 1; visibility: visible; } .portfolio-block.style2 .box:hover .over { top: 0; } .portfolio-block.style3 .box:hover .over { top: 10px; left: 10px; right: 10px; bottom: 10px; } .portfolio-block.style4 .link, .portfolio-block.style4 .search { right: 50%; bottom: 50%; } .portfolio-block.style4 .link { margin: 0 -37px -30px 0; } .portfolio-block.style4 .search { margin: 0 20px -30px 0; } .portfolio-block.style4 .search.center { margin: 0 -28px -30px 0; } .portfolio-block.style5 .title { color: #2a2a2a; } .portfolio-block.style5 .over { opacity: 1; background: none; visibility: visible; } .portfolio-block.style5 .holder { top: auto; height: auto; display: block; } .portfolio-block.style5 .frame { padding: 0; display: block; } .portfolio-block.style5 .over-frame { background: white; transition: all 0.25s linear; padding: 28px 20px 29px 28px; transform: translateY(160px); -ms-transform: translateY(160px); -webkit-transform: translateY(160px); position: relative; } .portfolio-block.style5 .over-frame:before { position: absolute; content: ""; top: -14px; bottom: auto; left: 28px; right: auto; } .portfolio-block.style5 .over-frame:before { width: 0; height: 0; border-style: solid; border-width: 0 14px 14px 14px; border-color: transparent transparent white transparent; } @media only screen and (max-width: 1219px) { .portfolio-block.style5 .over-frame { transform: translateY(190px); -ms-transform: translateY(190px); -webkit-transform: translateY(190px); } } .portfolio-block.style5 img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .portfolio-block.style5 .box:hover .studio-over { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .portfolio-block.style5 .box:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); } .portfolio-block.style6 .title { color: #000101; } .dark .portfolio-block.style6 .title { color: #8f8f8f; } .portfolio-block.style6 .title a { color: #000101; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .portfolio-block.style6 .title a { color: #8f8f8f; } .portfolio-block.style6 .title a:hover { color: white; text-decoration: none; } .portfolio-block.style6 .box:hover .text-box { background: #2a2a2a; } .portfolio-block.style6 .box:hover .text-box:after { border-color: transparent transparent #2a2a2a transparent; } .portfolio-block.style6 .box:hover .title { color: white; } .portfolio-block.style6 .box:hover .title a { color: white; } .portfolio-block.style6 .box:hover .title a:hover { color: #000101; } /*------------------------------------------------------------------ 1-15. porto nav Styles / .porto-nav -------------------------------------------------------------------*/ .porto-nav { margin: 0; color: #8f8f8f; font-size: 11px; line-height: 14px; overflow: hidden; text-transform: uppercase; } .porto-nav li { padding: 0; position: relative; } .porto-nav li:after { position: absolute; content: ""; top: 0; bottom: auto; left: 0; right: auto; } .porto-nav li:before { content: "/"; } .porto-nav li:first-child:before { display: none; } .porto-nav a { color: #8f8f8f; } /*------------------------------------------------------------------ 1-16. portfolio text Styles / .portfolio-text -------------------------------------------------------------------*/ .portfolio-text { float: left; width: 100%; color: white; background: #2a2a2a; position: relative; font: 300 24px/44px "Raleway", Georgia, "Times New Roman", Times, serif; } .dark .portfolio-text { background: #191919; } @media only screen and (max-width: 1219px) { .portfolio-text { font-size: 18px; line-height: 22px; } } .portfolio-text .box-holder { padding-top: 50%; position: relative; } @media only screen and (max-width: 991px) { .portfolio-text .box-holder { padding-top: 35%; } } @media only screen and (max-width: 767px) { .portfolio-text .box-holder { padding-top: 100%; } } @media only screen and (max-width: 479px) { .portfolio-text .box-holder { padding-top: 80%; } } .portfolio-text .holder { display: block; text-align: center; } .portfolio-text .frame { margin: 0 auto; max-width: 290px; display: table; vertical-align: top; } .portfolio-text .block { max-width: 500px; overflow: hidden; padding: 80px 0 0; width: 100%; height: 100%; } @media only screen and (max-width: 1480px) { .portfolio-text .block { padding: 40px 0 0; } } @media only screen and (max-width: 991px) { .portfolio-text .block { padding: 80px 0 0; } } .portfolio-text p { margin: 0 0 16px; } .portfolio-text .btn { color: #8f8f8f; border-color: #8f8f8f; } .portfolio-text .btn:hover { color: white; } .coll-2 { width: 50%; } @media only screen and (max-width: 500px) { .coll-2 { width: 100%; } } .coll-3 { width: 33.333%; } @media only screen and (max-width: 991px) { .coll-3 { width: 50%; } } @media only screen and (max-width: 500px) { .coll-3 { width: 100%; } } .coll-4 { width: 25%; } @media only screen and (max-width: 991px) { .coll-4 { width: 50%; } } @media only screen and (max-width: 500px) { .coll-4 { width: 100%; } } .coll-5 { width: 20%; } @media only screen and (max-width: 1400px) { .coll-5 { width: 25%; } } @media only screen and (max-width: 1219px) { .coll-5 { width: 33.333%; } } @media only screen and (max-width: 991px) { .coll-5 { width: 50%; } } @media only screen and (max-width: 500px) { .coll-5 { width: 100%; } } .coll-6 { width: 16.6666%; } @media only screen and (max-width: 1219px) { .coll-6 { width: 25%; } } @media only screen and (max-width: 991px) { .coll-6 { width: 33.33%; } } @media only screen and (max-width: 767px) { .coll-6 { width: 50%; } } @media only screen and (max-width: 500px) { .coll-6 { width: 100%; } } .coll3-holder { margin: 0 -1px 0 0; } .nospace .box { margin: 0; } /*------------------------------------------------------------------ 1-17. work slider Styles / .work-slider -------------------------------------------------------------------*/ .work-slider .slick-arrow { left: 79%; border: 0; z-index: 6; font-size: 0; color: #2a2a2a; bottom: -68px; background: #ddd; position: absolute; border-radius: 50%; text-indent: 9999px; width: 40px; height: 40px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; vertical-align: top; } @media only screen and (max-width: 1605px) { .work-slider .slick-arrow { left: 80%; } } @media only screen and (max-width: 1120px) { .work-slider .slick-arrow { left: auto; right: 100px; } } @media only screen and (max-width: 479px) { .work-slider .slick-arrow { right: 5px; } } .work-slider .slick-arrow:hover { color: white; text-decoration: none; } .dark .work-slider .slick-arrow { color: white; background: #191919; } .work-slider .slick-arrow:after { top: 6px; left: 14px; line-height: 1; text-indent: 0; font-size: 25px; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .work-slider .slick-prev { left: 76.5%; } @media only screen and (max-width: 1120px) { .work-slider .slick-prev { left: auto; right: 150px; } } @media only screen and (max-width: 479px) { .work-slider .slick-prev { right: 50px; } } .work-slider .slick-prev:after { content: "\f104"; } .work-slider .slick-dots { bottom: 24px; } .work-slider .slick-dots li { float: none; padding: 0 4px; display: inline-block; vertical-align: top; } .work-slider .slick-dots li.slick-active button { background: white; } .work-slider .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .work-slider .slick-dots li button:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 1-18. isotop controls Styles / .isotop-controls -------------------------------------------------------------------*/ .isotop-controls { margin: 0 0 62px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .isotop-controls { margin: 0 0 20px; } } .isotop-controls li { margin: 0 -8px; vertical-align: top; } @media only screen and (max-width: 767px) { .isotop-controls li { margin: 0 0 5px; } } .isotop-controls li.active a { color: white; } .isotop-controls a { color: #222222; display: block; padding: 7px 20px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .isotop-controls a { color: white; } .isotop-controls a:hover { color: white; text-decoration: none; } .isotop-controls.leftalign { text-align: left; } .isotop-controls.rightalign { text-align: right; } /*------------------------------------------------------------------ 1-19. isotop controls2 Styles / .isotop-controls2 -------------------------------------------------------------------*/ .isotop-controls2 { margin: 0 0 62px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .isotop-controls2 { margin: 0 0 20px; } } .isotop-controls2 a { color: #2a2a2a; display: block; padding: 0 0 14px; position: relative; } .dark .isotop-controls2 a { color: white; } .isotop-controls2 a:after { left: 50%; opacity: 0; bottom: 1px; overflow: hidden; visibility: hidden; margin: 0 0 0 -18px; width: 0; height: 4px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .isotop-controls2 a:hover { text-decoration: none; } .isotop-controls2 a:hover:after { opacity: 1; width: 35px; visibility: visible; } .isotop-controls2 li { position: relative; vertical-align: top; padding: 0 35px 0 13px; } .isotop-controls2 li.active a:after { opacity: 1; width: 35px; visibility: visible; } .isotop-controls2 li:after { top: 11px; left: -10px; width: 4px; height: 4px; } .isotop-controls2 li:first-child:after { display: none; } .isotop-controls2.leftalign { text-align: left; } .isotop-controls2.rightalign { text-align: right; } /*------------------------------------------------------------------ 1-20. isotop controls3 Styles / .isotop-controls3 -------------------------------------------------------------------*/ .isotop-controls3 { margin: 0 0 62px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .isotop-controls3 { margin: 0 0 20px; } } .isotop-controls3 a { color: #2a2a2a; display: block; padding: 0 0 14px; position: relative; } .dark .isotop-controls3 a { color: white; } .isotop-controls3 a:after { left: 50%; bottom: 1px; overflow: hidden; margin: 0 0 0 -18px; width: 0; height: 4px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .isotop-controls3 a:hover { text-decoration: none; } .isotop-controls3 a:hover:after { opacity: 1; width: 35px; visibility: visible; } .isotop-controls3 li { position: relative; vertical-align: top; padding: 0 35px 0 13px; } .isotop-controls3 li.active a:after { width: 35px; } .isotop-controls3 li:after { top: 11px; left: -10px; background: #8f8f8f; width: 4px; height: 4px; } .isotop-controls3 li:first-child:after { display: none; } .isotop-controls3.leftalign { text-align: left; } .isotop-controls3.rightalign { text-align: right; } /*------------------------------------------------------------------ 1-21. isotop controls4 Styles / .isotop-controls4 -------------------------------------------------------------------*/ .isotop-controls4 { overflow: hidden; letter-spacing: 2px; text-transform: uppercase; background: #f8f8f8; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .isotop-controls4 { background: #191919; } .isotop-controls4 ul { float: left; margin: 0 0 0 -2px; } .isotop-controls4 li.active a { color: white; } .isotop-controls4 a { z-index: 5; color: #8f8f8f; display: block; position: relative; padding: 14px 11px 15px 27px; } @media only screen and (max-width: 991px) { .isotop-controls4 a { padding: 14px 7px 15px 16px; } } .isotop-controls4 a:before { top: 0; bottom: 0; z-index: -1; left: -12px; right: -12px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .isotop-controls4 a:before { background: #191919; } .isotop-controls4 a:hover { color: white; text-decoration: none; } .isotop-controls4 .view-all { z-index: 5; float: right; color: white; font-size: 12px; position: relative; padding: 16px 27px 16px 14px; } .isotop-controls4 .view-all:before { top: 0; bottom: 0; z-index: -1; left: -12px; right: -12px; color: white; background: #222222; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .isotop-controls4 .view-all:before { background: #191919; } .isotop-controls4 .view-all:hover { text-decoration: none; } /*------------------------------------------------------------------ 1-22. more feature Styles / .more-feature -------------------------------------------------------------------*/ .more-feature .img { display: block; margin: -120px 0 0 -46px; } @media only screen and (max-width: 1219px) { .more-feature .img { margin: -120px 0 0 -15px; } } @media only screen and (max-width: 991px) { .more-feature .img { margin: 88px 0 0 -36px; } } @media only screen and (max-width: 767px) { .more-feature .img { margin: 0; display: block; max-width: 100%; height: auto; } } .more-feature.style2 img { margin: -8px 0 0 -103px; } @media only screen and (max-width: 1219px) { .more-feature.style2 img { margin: 102px 0 0 -40px; } } .more-feature.style3 img { margin: -144px 0 0 0; } @media only screen and (max-width: 1219px) { .more-feature.style3 img { margin: -84px 0 0 -70px; } } .more-feature.style4 { padding-top: 88px; padding-bottom: 60px; } .more-feature.style4 img { margin: 0; } /*------------------------------------------------------------------ 1-23. price section Styles / .price-section -------------------------------------------------------------------*/ .price-section { padding: 87px 0 100px; position: relative; z-index: 1; } .price-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); } .price-section .box { color: #8f8f8f; font-size: 13px; overflow: hidden; text-align: center; background: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .price-section .box { background: #191919; } @media only screen and (max-width: 991px) { .price-section .box { margin: 0 0 20px; } } .price-section .box .heading { font: 600 18px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 2px; background: #2a2a2a; padding: 26px 5px; margin: 0 0 20px; display: block; color: white; } .price-section .box:hover .btn:hover, .price-section .box.active .btn:hover { background: #2a2a2a; border-color: #2a2a2a; } .price-section .price { color: #2a2a2a; display: block; margin: 0 0 -10px; font: 700 60px/65px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .price-section .price { color: white; } .price-section .price sup { top: -19px; font-size: 34px; font-weight: 300; margin: 0 -7px 0 -3px; } .price-section .month { display: block; font-size: 12px; margin: 0 0 20px; font-weight: 700; line-height: 24px; text-transform: uppercase; } .price-section .price-list { margin: 0 0 7px; overflow: hidden; } .price-section .price-list li { padding: 0 5px; margin: 0 0 17px; } .price-section .btn { color: white; margin: 0 0 33px; background: #2a2a2a; border-color: #2a2a2a; } .price-section .parallax-holder { z-index: -1; } .price-section.style2 { padding: 101px 0 100px; } .price-section.style2:after { display: none; } .price-section.style2 .box { background: #f8f8f8; } .dark .price-section.style2 .box { background: #191919; } .price-section.style2 .box .heading { color: #2a2a2a; margin: 0 0 12px; padding: 33px 5px; background: transparent; } .dark .price-section.style2 .box .heading { color: white; } .dark .price-section.style2 .box .price { color: white; } .price-section.style2 .box.active, .price-section.style2 .box:hover { background: #2a2a2a; } .price-section.style2 .box.active .price, .price-section.style2 .box.active .heading, .price-section.style2 .box:hover .price, .price-section.style2 .box:hover .heading { color: white; } .price-section.style2 .box.active .btn:hover, .price-section.style2 .box:hover .btn:hover { opacity: 0.7; } .price-section.style2 .box.active .heading, .price-section.style2 .box:hover .heading { background: none; } .price-section.style3 { padding: 93px 0 100px; } .price-section.style3 .box { background: white; padding: 23px 0 15px; border: 1px solid #dddddd; } .dark .price-section.style3 .box { border-color: #494949; background: #191919; } .dark .price-section.style3 .box .price { color: white; } .price-section.style3 .box .heading { color: white; font-size: 18px; margin: 0 0 19px; line-height: 22px; padding: 20px 10px; background: #2a2a2a; } .price-section.style3 .box .month { margin: 0 0 16px; } .price-section.style3 .box.active, .price-section.style3 .box:hover { background: none; } .price-section.style3 .box.active .price, .price-section.style3 .box:hover .price { color: #2a2a2a; } .dark .price-section.style3 .box.active .price, .dark .price-section.style3 .box:hover .price { color: white; } .price-section.style3 .price-list { margin: 0 0 12px; } .price-section.style3 .price-list li { margin: 0 0 16px; } .price-section.style3 .btn-purchase { margin: 0 0 15px; } .price-section.style4 .box .heading { margin: 0; } .price-section.style4 .box img { width: 100%; margin: 0 0 16px; } .price-section.style4 .box .btn { margin: 0 0 22px; } /*------------------------------------------------------------------ 1-24. blog section Styles / .blog-section -------------------------------------------------------------------*/ .blog-section .beans-slider { padding: 0 0 80px; } @media only screen and (max-width: 991px) { .blog-section .beans-slider { padding: 0 0 50px; } } .blog-section .beans-slider .slick-dots { bottom: -38px; } .blog-section .beans-slider .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .blog-section .beans-slider .slick-dots li.slick-active button { background: #191919; } .blog-section .beans-slider .slick-dots button { border: 0; margin: 0; padding: 0; display: block; overflow: hidden; background: #ddd; border-radius: 50%; text-indent: -9999px; width: 12px; height: 12px; } .dark .blog-section .beans-slider .slick-dots button { background: #8f8f8f; } .blog-section .beans-slider .slick-dots button:hover { background: #191919; } .blog-section .beans-stepslider { padding: 0 0 50px; } .blog-section .beans-stepslider img { width: 100%; margin: 0 0 18px; } .blog-section .beans-stepslider .slick-dots { bottom: -50px; } .blog-section .beans-stepslider .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .blog-section .beans-stepslider .slick-dots li.slick-active button:after { display: block; } .blog-section .beans-stepslider .slick-dots button { border: 0; margin: 0; padding: 0; display: block; background: #ddd; overflow: hidden; position: relative; border-radius: 50%; text-indent: -9999px; width: 14px; height: 14px; border: 2px solid #ddd; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .blog-section .beans-stepslider .slick-dots button { border-color: #494949; background: #494949; } .blog-section .beans-stepslider .slick-dots button:hover { text-decoration: none; } .blog-section .beans-stepslider .slick-dots button:hover:after { display: block; } .blog-section .beans-stepslider .slick-dots button:after { top: 50%; left: 50%; display: none; border-radius: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; } .blog-section .btn { margin: 0 4px; } /*------------------------------------------------------------------ 1-25. blog m post Styles / .blog-m-post -------------------------------------------------------------------*/ .blog-m-post { overflow: hidden; } @media only screen and (max-width: 767px) { .blog-m-post { margin-bottom: 20px; } } .blog-m-post .blog-txt { position: relative; padding: 0 0 20px 123px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 991px) { .blog-m-post .blog-txt { padding: 0 0 0 58px; } } .blog-m-post img { width: 100%; margin: 0 0 18px; } @media only screen and (max-width: 991px) { .blog-m-post img { margin: 0 0 8px; } } .blog-m-post h3 { color: #2a2a2a; margin: 0 0 10px; font: 500 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 991px) { .blog-m-post h3 { margin: 0; font-size: 14px; line-height: 18px; } } .dark .blog-m-post h3 { color: white; } .blog-m-post h3 a { color: #2a2a2a; } .dark .blog-m-post h3 a { color: white; } .blog-m-post a { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-m-post a:hover { text-decoration: none; } .blog-m-post .meta { margin: 0; color: #8f8f8f; font-size: 12px; line-height: 21px; } @media only screen and (max-width: 991px) { .blog-m-post .meta { font-size: 10px; line-height: 18px; } } .blog-m-post .meta li { padding: 0 12px 0 0; } @media only screen and (max-width: 991px) { .blog-m-post .meta li { padding: 0 6px 0 0; } } .blog-m-post .meta a { color: #8f8f8f; } .blog-m-post .box-holder { left: 13px; bottom: 16px; position: absolute; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 991px) { .blog-m-post .box-holder { left: 3px; } } .blog-m-post time { color: white; display: block; font-size: 12px; font-weight: 700; line-height: 21px; padding: 19px 0 0; text-align: center; background: #2a2a2a; letter-spacing: 2px; margin: -5px auto 0; width: 74px; height: 74px; text-transform: uppercase; } .dark .blog-m-post time { background: #191919; } @media only screen and (max-width: 991px) { .blog-m-post time { font-size: 10px; padding: 4px 0 0; line-height: 18px; width: 40px; height: 40px; } } .blog-m-post time .add { display: block; font-size: 22px; font-weight: 700; } @media only screen and (max-width: 991px) { .blog-m-post time .add { font-size: 16px; } } .blog-m-post .fa { margin: 0 3px 0 0; position: relative; } .blog-m-post .icon { color: white; display: block; font-size: 32px; text-align: center; padding: 12px 0 0 2px; width: 84px; height: 84px; border: 5px solid white; } .dark .blog-m-post .icon { border-color: #191919; } @media only screen and (max-width: 991px) { .blog-m-post .icon { font-size: 22px; padding: 4px 0 0 2px; width: 50px; height: 50px; } } .blog-m-post .blog-text { font-size: 14px; overflow: hidden; padding: 2px 0 0; line-height: 24px; position: relative; } @media only screen and (max-width: 991px) { .blog-m-post .blog-text { width: 100%; display: block; } } @media only screen and (max-width: 767px) { .blog-m-post .blog-text { padding: 0 0 0 10px; } } .blog-m-post .blog-box { float: left; width: 74px; margin: 0 14px; } @media only screen and (max-width: 1219px) { .blog-m-post .blog-box { width: 100%; float: none; margin: 0 0 10px; overflow: hidden; } } .blog-m-post .blog-box .icon { border: 0; width: 74px; height: 74px; } @media only screen and (max-width: 1219px) { .blog-m-post .blog-box .icon { float: left; } } @media only screen and (max-width: 991px) { .blog-m-post .blog-box .icon { width: 40px; height: 40px; } } .blog-m-post .blog-box time { margin: 0; height: 74px; } @media only screen and (max-width: 1219px) { .blog-m-post .blog-box time { float: left; } } @media only screen and (max-width: 991px) { .blog-m-post .blog-box time { height: 40px; } } .blog-m-post.accordion { margin: 0 0 15px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-m-post.accordion .box-holder { left: 19px; top: -85px; bottom: auto; } @media only screen and (max-width: 991px) { .blog-m-post.accordion .box-holder { top: -50px; } } @media only screen and (max-width: 767px) { .blog-m-post.accordion .box-holder { display: none; } } .blog-m-post.accordion .icon { border-bottom: 0; } .blog-m-post.accordion time { margin: 0 auto; } .blog-m-post.accordion .blog-txt { border: 1px solid transparent; padding: 16px 20px 20px 113px; } @media only screen and (max-width: 991px) { .blog-m-post.accordion .blog-txt { padding: 10px 20px 20px 80px; } } @media only screen and (max-width: 767px) { .blog-m-post.accordion .blog-txt { padding: 10px 10px 20px; } } .blog-m-post.accordion img { margin: 0; } .blog-m-post.accordion p { margin: 0 0 23px; } .blog-m-post.accordion .blog-slide { padding-top: 30px; } .blog-m-post.accordion .btn { border-width: 2px; } .dark .blog-m-post.accordion .btn { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .dark .blog-m-post.accordion .btn:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .blog-m-post.accordion.active { margin: 0 0 30px; background: white; } .dark .blog-m-post.accordion.active { background: #191919; } .blog-m-post.accordion.active .blog-txt { border-color: #dddddd; padding: 26px 20px 34px 113px; } @media only screen and (max-width: 991px) { .blog-m-post.accordion.active .blog-txt { padding: 10px 10px 20px 80px; } } @media only screen and (max-width: 767px) { .blog-m-post.accordion.active .blog-txt { padding: 10px 10px 20px; } } .dark .blog-m-post.accordion.active .blog-txt { border-color: #494949; } .blog-m-post.accordion.active .blog-slide { position: static !important; } .dark .blog-m-post.accordion.active time { background: #2a2a2a; } .blog-m-post.style2 img { margin: 0; } .blog-m-post.style2 .blog-txt { color: #8f8f8f; font-size: 12px; position: relative; padding: 7px 0 20px 95px; border-top: 5px solid transparent; } .blog-m-post.style2 .blog-txt h3 { margin: 0 0 2px; } .blog-m-post.style2 .blog-txt p { text-transform: uppercase; } .blog-m-post.style2 .icon { border: 0; top: -14px; left: 11px; font-size: 24px; overflow: hidden; position: absolute; padding: 12px 10px 0 0; background: transparent; width: 80px; height: 60px; } .blog-m-post.style2 .icon:before { top: 0; bottom: 0; left: -12px; right: 12px; background: #222222; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .blog-m-post.style2 .icon:before { background: #191919; } /*------------------------------------------------------------------ 1-26. facts section Styles / .facts-section -------------------------------------------------------------------*/ .facts-section .fa { left: 0; top: 10px; font-size: 60px; position: absolute; } @media only screen and (max-width: 1219px) { .facts-section .fa { font-size: 40px; } } .facts-section p { margin: 0 0 39px; } .facts-section .box { color: #2a2a2a; font-size: 14px; font-weight: 700; letter-spacing: 2px; position: relative; padding: 0 0 0 99px; text-transform: uppercase; } .dark .facts-section .box { color: white; } @media only screen and (max-width: 1219px) { .facts-section .box { padding: 0 0 0 70px; } } .facts-section .num { display: block; position: relative; margin: 0 0 23px -7px; font: 700 70px/90px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 1219px) { .facts-section .num { font-size: 50px; line-height: 60px; margin: 0 0 8px -7px; } } .facts-section .num:after { left: 5px; bottom: -7px; width: 52px; height: 4px; } @media only screen and (max-width: 1219px) { .facts-section .num:after { bottom: -1px; } } @media only screen and (max-width: 767px) { .facts-section .num:after { bottom: 0; } } .facts-section .img { margin: 8px 0 0 0; } @media only screen and (max-width: 767px) { .facts-section .img { margin: 0 auto; } } /*------------------------------------------------------------------ 1-27. client box Styles / .client-box -------------------------------------------------------------------*/ .client-box { width: 100%; height: 115px; display: block; overflow: hidden; text-align: center; border: 1px solid #ddd; white-space: nowrap; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .client-box .img { display: inline-block; white-space: normal; vertical-align: middle; } .client-box:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .dark .client-box { border-color: #494949; } @media only screen and (max-width: 767px) { .client-box { margin: 0 0 10px; } } .client-box .img { opacity: 0.5; max-width: 99.99%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .client-box:hover { border-color: #8f8f8f; text-decoration: none; } .client-box:hover .img { opacity: 1; } .client-box.large { height: 160px; } .client-box.dark { border-color: #535353; } .clients-section .beans-stepslider { overflow: visible; } .clients-section .beans-stepslider .beans-slide { padding: 0 15px; } .clients-section .beans-stepslider .slick-arrow { top: 63px; border: 0; margin: 0; padding: 0; left: -56px; color: #535353; font-size: 20px; padding: 2px 0 0; background: none; border-radius: 50%; position: absolute; text-indent: 9999px; width: 40px; height: 40px; border: 2px solid #535353; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 1219px) { .clients-section .beans-stepslider .slick-arrow { left: -35px; } } @media only screen and (max-width: 991px) { .clients-section .beans-stepslider .slick-arrow { left: -25px; } } @media only screen and (max-width: 767px) { .clients-section .beans-stepslider .slick-arrow { display: none; } } .clients-section .beans-stepslider .slick-arrow:hover { color: white; text-decoration: none; } .clients-section .beans-stepslider .slick-arrow:after { top: 3px; left: 11px; line-height: 1; text-indent: 0; font-size: 30px; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .clients-section .beans-stepslider .slick-next { left: auto; right: -56px; } @media only screen and (max-width: 1219px) { .clients-section .beans-stepslider .slick-next { right: -35px; left: auto; } } @media only screen and (max-width: 991px) { .clients-section .beans-stepslider .slick-next { right: -25px; left: auto; } } .clients-section .beans-stepslider .slick-next:after { content: "\f105"; } /*------------------------------------------------------------------ 1-28. team lightbox Styles / .team-lightbox -------------------------------------------------------------------*/ .team-lightbox { width: 817px; color: #8f8f8f; font-size: 14px; overflow: hidden; line-height: 26px; background: white; padding: 36px 40px 30px; border: 1px solid #dddddd; } @media only screen and (max-width: 991px) { .team-lightbox { width: 700px; } } @media only screen and (max-width: 767px) { .team-lightbox { width: 280px; padding: 15px; } } .team-lightbox .img-box { float: left; max-width: 248px; margin: 3px 39px 0 0; } @media only screen and (max-width: 767px) { .team-lightbox .img-box { float: none; margin: 0 0 20px; } } .team-lightbox img { width: 100%; } .team-lightbox .holder { overflow: hidden; } .team-lightbox .title { color: #222222; display: block; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; font: 700 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .team-lightbox .subtitle { color: #8f8f8f; display: block; margin: 0 0 19px; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/16px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .team-lightbox p { margin: 0 0 8px; } .team-lightbox .socialnetworks { padding: 6px 0 0; } .team-lightbox .socialnetworks li { margin: 0 2px 0 0; display: inline-block; vertical-align: top; } .team-lightbox .socialnetworks a { color: white; display: block; font-size: 18px; padding: 5px 0 0; text-align: center; border-radius: 50%; background: #3f3f3f; width: 40px; height: 40px; } .team-lightbox .socialnetworks a:hover { text-decoration: none; } .team-lightbox .close { top: 15px; opacity: 1; float: none; right: 21px; color: #222222; font-size: 35px; text-shadow: none; line-height: 35px; position: absolute; font-weight: normal; } /*------------------------------------------------------------------ 1-29. about section Styles / .about-section -------------------------------------------------------------------*/ .about-section { font-size: 14px; line-height: 26px; color: #666666; } .about-section h3 { color: #2a2a2a; margin: 0 0 3px; position: relative; padding: 0 0 0 15px; text-transform: uppercase; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .about-section h3 { color: white; } .about-section .box { margin: 0 0 28px; overflow: hidden; } .about-section p { margin: 0; } .about-section .fa { left: 0; top: 3px; position: absolute; } .about-section .fa.small { top: 8px; font-size: 6px; font-weight: 400; } .about-section .know-more { margin: 10px 0 0; } @media only screen and (max-width: 991px) { .about-section .know-more { margin: 0 0 20px; } } .dark .about-section .know-more { color: rgba(143, 143, 143, 0.6) !important; border-color: rgba(143, 143, 143, 0.6); background: transparent !important; } .about-section .know-more:hover { background: transparent; border-color: #222222; color: #222222; } .dark .about-section .know-more:hover { border-color: #8f8f8f; color: #8f8f8f; color: #8f8f8f !important; } .about-section .img-box { overflow: hidden; margin: 5px 2px 28px -1px; } .about-section .img-box img { width: 100%; } .about-section .beans-slider .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .about-section .beans-slider .slick-dots li.slick-active button { background: white; } .about-section .beans-slider .slick-dots button { margin: 0; padding: 0; padding: 0; display: block; background: none; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 14px; height: 14px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .about-section .beans-slider .slick-dots button:hover { background: white; } /*------------------------------------------------------------------ 1-30. counter section Styles / .counter-section -------------------------------------------------------------------*/ .counter-section { color: white; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; position: relative; letter-spacing: 2px; padding: 84px 0 99px; text-transform: uppercase; position: relative; z-index: 1; } .counter-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(55, 63, 69, 0.6); } .counter-section .txt { display: block; } .counter-section .num { display: block; padding: 0 0 7px; margin: 0 0 18px; position: relative; font: 700 80px/90px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .counter-section .num:after { bottom: 0; left: 50%; margin: 0 0 0 -20px; width: 40px; height: 3px; } .counter-section .parallax-holder, .counter-section .stretch { z-index: -1; } .counter-section.small { padding: 100px 0; } .counter-section.small .counter { font-size: 33px; line-height: 60px; } @media only screen and (max-width: 1219px) { .counter-section.small .txt { margin: 0 0 20px; } } .counter-section.small .num { font-size: 70px; margin: 0 0 25px; line-height: 90px; padding: 0 0 25px; display: inline-block; } .counter-section.small .num:after { margin: 0 0 0 -10px; width: 20px; height: 3px; } .counter-section.large { color: #222222; font-weight: 900; background: url(images/icons/map4.png) no-repeat 50% 50% #222222; } .counter-section.large:after { display: none; } .counter-section.large .num { padding: 0; font-size: 70px; font-weight: 700; margin: 0 0 10px; } /*------------------------------------------------------------------ 1-31. banner img Styles / .banner-img -------------------------------------------------------------------*/ .banner-img { color: white; margin: 0 0 119px; text-align: center; position: relative; padding: 89px 0 0; font: 300 21px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .banner-img:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(55, 63, 69, 0.4); } .banner-img .img { margin: 0 auto -56px; } .banner-img .title { display: block; font-weight: 300; margin: 0 0 -6px; } .banner-img h3 { margin: 0 0 36px; font: 600 36px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .banner-img h3 { font-size: 22px; line-height: 30px; } } .banner-img .parallax-holder { z-index: -1; } .banner-img.style3 { margin: 0 0 32px; } .banner-img.style3 .img { margin: 0 auto -116px; } .banner-img.style3:after { background: rgba(0, 0, 0, 0.4); } /*------------------------------------------------------------------ 2-1. creative page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 2-2. intro section Styles / .intro-section 2-3. features section Styles / .features-section 2-4. core section Styles / .core-section 2-5. pie section Styles / .pie-section 2-6. twitter section Styles / .twitter-section -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 2-2. intro section Styles / .intro-section -------------------------------------------------------------------*/ .intro-section { font-size: 21px; font-weight: 300; line-height: 32px; padding-top: 90px; text-align: center; font-style: italic; } @media only screen and (max-width: 767px) { .intro-section { font-size: 16px; line-height: 25px; padding-top: 40px; } } .intro-section .img { margin: 0 auto; } .intro-section .text-box { max-width: 870px; margin: 0 auto 52px; } /*------------------------------------------------------------------ 2-3. features section Styles / .features-section -------------------------------------------------------------------*/ .features-section { font-size: 14px; padding-top: 95px; line-height: 24px; text-align: center; padding-bottom: 89px; } @media only screen and (max-width: 767px) { .features-section { padding-top: 45px; padding-bottom: 45px; } } .features-section h3 { color: #2a2a2a; margin: 0 0 19px; padding: 27px 0 0; letter-spacing: 2px; text-transform: uppercase; font: 600 13px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .features-section h3 { color: white; } .features-section .fa { font-size: 32px; } /*------------------------------------------------------------------ 2-4. core section Styles / .core-section -------------------------------------------------------------------*/ .core-section { font-size: 15px; overflow: hidden; line-height: 26px; padding-top: 90px; padding-bottom: 90px; } .core-section h2 { margin: 0 0 20px; font: 600 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .btn-learn{ color: #dd7633; border: 1px solid #dd7633; } .btn-learn:hover{ color:fff; background:#dd7633 !important; border: 1px solid #dd7633 !important; transition:.5s ease-in-out; -webkit-transition:.5s ease-in-out; } @media only screen and (max-width: 767px) { .core-section h2 { font-size: 30px; line-height: 40px; } } .core-section p { margin: 0 0 19px; } .core-section .list { margin: 0; padding: 0 0 0 7px; } .core-section .list li { font-size: 12px; margin: 0 0 12px; font-weight: 500; line-height: 20px; position: relative; padding: 0 0 0 25px; letter-spacing: 2px; text-transform: uppercase; } .core-section .list li:after { top: 0; left: 7px; content: "\f058"; position: absolute; font-family: 'FontAwesome'; } .core-section .img { margin: 11px 0 0; } @media only screen and (max-width: 991px) { .core-section .img { margin: 131px 0 0; } } @media only screen and (max-width: 767px) { .core-section .img { margin: 30px 0 0; } } .core-section.style2 h2 { color: #222222; } .dark .core-section.style2 h2 { color: white; } .core-section.style2 .img { margin: -38px 0 0; } @media only screen and (max-width: 1219px) { .core-section.style2 .img { margin: 38px 0 0; } } .core-section.style3 h2 { color: #330466 !important; margin: 0 0 28px; text-transform: uppercase; text-align: center; font-weight: 500; } .core-section.style3 h2 span{ color:#dd7733; } .dark .core-section.style3 h2 { color: white; } .core-section.style3 .holder { padding-top: 95px; font: 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 1219px) { .core-section.style3 .holder { padding-top: 0; } } .core-section.style3 p { margin: 0 0 30px; text-align: justify; color: #111; line-height: 30px; } /*------------------------------------------------------------------ 2-5. pie section Styles / .pie-section -------------------------------------------------------------------*/ .pie-section { z-index: 2; color: white; font-size: 16px; line-height: 26px; text-align: center; padding: 87px 0 95px; position: relative; z-index: 1; } .pie-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 767px) { .pie-section { font-size: 14px; line-height: 20px; } } .pie-section .parallax-holder { z-index: -1; } .pie-section .pie-chart { position: relative; margin: 0 auto 10px; text-align: center; } .pie-section .pie-chart canvas { top: 0; left: 0; z-index: 1; width: 100%; display: block; position: absolute; } .pie-section .pie-chart .pie-chart-percent { left: 0; top: 70px; width: 100%; z-index: 10; color: white; display: block; text-align: center; position: absolute; font: 700 30px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .pie-section .pie-chart .pie-chart-percent span { font-size: 50px; line-height: 60px; } .pie-section .pie-chart img { max-width: 100%; vertical-align: middle; } .pie-section .pie-description { display: block; font-size: 18px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font: 600 14px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .pie-section .pie-block { width: 297px; display: inline-block; vertical-align: top; } @media only screen and (max-width: 1219px) { .pie-section .pie-block { width: 227px; } } @media only screen and (max-width: 991px) { .pie-section .pie-block { width: 49%; } } @media only screen and (max-width: 767px) { .pie-section .pie-block { width: 100%; } } /*------------------------------------------------------------------ 2-6. twitter section Styles / .twitter-section -------------------------------------------------------------------*/ .twitter-section { color: #2a2a2a; font-size: 21px; font-weight: 300; padding-top: 70px; line-height: 32px; font-style: italic; text-align: center; padding-bottom: 92px; } .dark .twitter-section { color: #8f8f8f; } .twitter-section .block { max-width: 900px; margin: 0 auto; position: relative; padding: 122px 0 0; } .twitter-section .icon-twitter, .twitter-section .fa { top: 0; left: 50%; font-size: 60px; position: absolute; margin: 20px 0 0 -28px; } .twitter-section span { display: block; margin: 0 0 20px; } .twitter-section .btn-prev { padding: 0; top: 113px; left: -56px; color: #535353; font-size: 20px; text-align: center; border-radius: 50%; position: absolute; width: 40px; height: 40px; border: 2px solid #535353; } .twitter-section .btn-prev:hover { opacity: 0.8; text-decoration: none; } .twitter-section .btn-next { padding: 0; top: 113px; right: -56px; color: #535353; font-size: 20px; text-align: center; border-radius: 50%; position: absolute; width: 40px; height: 40px; border: 2px solid #535353; } .twitter-section .btn-next:hover { opacity: 0.8; text-decoration: none; } .twitter-section small, .twitter-section time { color: #8f8f8f; display: block; font-size: 11px; font-weight: 700; line-height: 20px; } .twitter-section small a, .twitter-section time a { color: #8f8f8f; } .twitter-section.style2 .time { color: #8f8f8f; font-style: normal; text-transform: uppercase; } .twitter-section.style3 .block { padding: 130px 0 0; } /*------------------------------------------------------------------ 3-1. croporate page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 3-2. croporate slider Styles / .croporate-slider 3-3. wedo section Styles / .wedo-section 3-4. joinus section Styles / .joinus-section 3-5. counter container Styles / .counter3 3-6. services section Styles / .services-section 3-7. clients section3 Styles / .clients-section3 3-8. video section Styles / .video-section 3-9. whatwedo section Styles / .whatwedo-section 3-10. process section Styles / .process-section 3-11. progress holder Styles / .progress-holder -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 3-2. croporate slider Styles / .croporate-slider -------------------------------------------------------------------*/ .croporate-slider .caption { z-index: 5; width: 100%; color: white; padding: 90px 0 0; text-align: center; position: relative; background: rgba(0, 0, 0, 0.3); white-space: nowrap; font: 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .croporate-slider .caption .holder { display: inline-block; white-space: normal; vertical-align: middle; } .croporate-slider .caption:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .croporate-slider .caption { font-size: 14px; line-height: 16px; } } .croporate-slider .caption .holder { padding: 0 0 9px; } @media only screen and (max-width: 767px) { .croporate-slider .caption .holder { padding: 60px 0 0; } } .croporate-slider p { margin: 0 0 40px; } @media only screen and (max-width: 767px) { .croporate-slider p { margin: 0 0 20px; } } .croporate-slider .heading { margin: 0 0 27px; letter-spacing: 0.4px; text-transform: uppercase; font: 700 60px/65px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .croporate-slider .heading { font-size: 25px; line-height: 30px; } } .croporate-slider .heading-slim { margin: 0 0 27px; letter-spacing: 0.4px; font: 300 60px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .croporate-slider .heading-slim { font-size: 25px; line-height: 30px; } } .croporate-slider .btn-box { overflow: hidden; } .croporate-slider .btn-box .btn { margin: 0 2px 0 3px; } .croporate-slider .caption > .holder { transition: all 2.5s ease; position: relative; bottom: -50px; opacity: 0; } .croporate-slider .slick-active .caption > .holder { transition: all 1s ease 1s; opacity: 1; bottom: 0; } .croporate-slider .slick-dots { bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .croporate-slider .slick-dots li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .croporate-slider .slick-dots li.slick-active button { background: white; } .croporate-slider .slick-dots button { margin: 0; padding: 0; display: block; overflow: hidden; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .croporate-slider .slick-dots button:hover { background: white; text-decoration: none; } .croporate-slider .slick-arrow { right: 0; top: 50%; border: 0; opacity: 0; z-index: 99; padding: 0; width: 20px; height: 50px; font-size: 0; color: white; background: none; text-align: left; margin: -46px 0 0; visibility: hidden; position: absolute; text-indent: 9999px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .croporate-slider .slick-arrow { margin: -20px 0 0; right: 15px; } } .croporate-slider .slick-arrow:hover { text-decoration: none; } .croporate-slider .slick-arrow:hover:after { opacity: 0.8; } .croporate-slider .slick-arrow:after { top: 0; left: 3px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .croporate-slider .slick-prev { left: 0; right: auto; } .croporate-slider .slick-prev:after { content: "\f104"; } .croporate-slider:hover .slick-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .croporate-slider:hover .slick-next { right: 15px; } } .croporate-slider:hover .slick-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .croporate-slider:hover .slick-prev { right: auto; left: 15px; } } .croporate-slider:hover .slick-dots { opacity: 1; bottom: 33px; visibility: visible; } /*------------------------------------------------------------------ 3-3. wedo section Styles / .wedo-section -------------------------------------------------------------------*/ .wedo-section { font-size: 14px; line-height: 24px; text-align: center; padding-top: 100px; } @media only screen and (max-width: 767px) { .wedo-section { padding-top: 60px; } } .wedo-section h3 { color: #10a0e6; margin: 0 0 9px; text-transform: capitalize; font-size: 21px; font-weight: 500; text-shadow: 1px 1px 1px #cccccca1; } .dark .wedo-section h3 { color: white; } .wedo-section .coll { margin-bottom: 60px; } .wedo-section .coll:hover .icon { color: white; } .wedo-section .coll:hover .btn { color: white; } .wedo-section .coll:hover .btn:hover { background: transparent; color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .wedo-section .icon { display: block; font-size: 30px; text-align: center; border-radius: 50%; margin: 0 auto 28px; width: 110px; height: 110px; border: 1px solid #8f8f8f; white-space: nowrap; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .wedo-section .icon .fa { display: inline-block; white-space: normal; vertical-align: middle; } .wedo-section .icon:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .wedo-section .icon:hover { color: white; } .wedo-section p { margin: 0 0 24px; font-size: 14px; color: #111; padding: 10px 0 0 0; text-align: justify; } .wedo-section .img { margin: 0 auto; } /*------------------------------------------------------------------ 3-4. joinus section Styles / .joinus-section -------------------------------------------------------------------*/ .joinus-section { z-index: 2; color: white; font-size: 16px; line-height: 26px; text-align: center; padding: 87px 0 0; position: relative; z-index: 1; } .joinus-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 767px) { .joinus-section { font-size: 14px; line-height: 20px; } } .joinus-section h3 { margin: 0 0 22px; font: 600 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .joinus-section h3 { font-size: 30px; line-height: 40px; } } .joinus-section .box { max-width: 660px; margin: 0 auto; } .joinus-section p { margin: 0 0 53px; } .joinus-section .img { margin: 0 auto; } .joinus-section .parallax-holder { z-index: -1; } /*------------------------------------------------------------------ 3-5. counter container Styles / .counter-container -------------------------------------------------------------------*/ .counter-container { font-size: 16px; padding-top: 98px; line-height: 20px; text-align: center; position: relative; } @media only screen and (max-width: 767px) { .counter-container { margin: 0 auto 40px; } } .counter-container .txt { display: block; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/16px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .counter-container .txt { margin: 0 0 30px; } } .counter-container .fa { display: block; font-size: 30px; margin: 0 0 11px; } .counter-container .num { color: #2a2a2a; display: block; margin: 0 0 18px; padding: 0 0 12px; position: relative; font: 700 70px/90px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .counter-container .num { color: white; } .counter-container .num:after { bottom: 0; left: 50%; margin: 0 0 0 -20px; width: 40px; height: 3px; } /*------------------------------------------------------------------ 3-6. services section Styles / .services-section -------------------------------------------------------------------*/ .services-section .box { z-index: 88; margin: 0 0 49px; overflow: hidden; line-height: 24px; position: relative; } @media only screen and (max-width: 767px) { .services-section .box { margin: 0 0 20px; } } .services-section h3 { color: #2a2a2a; margin: 0 0 27px; position: relative; padding: 0 0 0 40px; letter-spacing: 2px; text-transform: uppercase; font: 700 14px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .services-section h3 { color: white; } .services-section h3 .icon, .services-section h3 .fa { left: 0; top: 1px; font-size: 20px; position: absolute; } .services-section .img { display: block; margin: -18px 0 0 -342px; } @media only screen and (max-width: 991px) { .services-section .img { margin: -18px 0 0 -42px; } } @media only screen and (max-width: 767px) { .services-section .img { display: block; max-width: 100%; height: auto; } } .services-section.style3 { padding: 99px 0 0; } .services-section.style3 .img { margin: 5px 0 0 26px; } @media only screen and (max-width: 1219px) { .services-section.style3 .img { margin: 5px 0 0 -50px; } } .services-section.style4 { padding-top: 92px; padding-bottom: 34px; } .services-section.style4 h2 { font-weight: 700; font-size: 32px; line-height: 38px; margin: 0 0 23px; } .services-section.style4 .holder { position: relative; z-index: 1; } .services-section.style4 .holder:before { position: absolute; content: ""; top: 0; bottom: auto; left: 50%; right: auto; } .services-section.style4 .holder:before { z-index: -1; margin: -36px 0 0 -470px; width: 940px; height: 527px; background: url(images/one-page/img37.png) no-repeat; } .services-section.style4 .img { margin: 34px auto 0; } @media only screen and (max-width: 991px) { .services-section.style4 .img { margin: 0; } } .services-section.style5 { padding-top: 90px; } .services-section.style5 .img { margin: -41px 0 0 -201px; } @media only screen and (max-width: 1219px) { .services-section.style5 .img { margin: 0 0 0 -201px; } } .services-section.style6 { padding-top: 100px; padding-bottom: 60px; } .services-section.style6 .text-box { text-align: left; margin: 0 auto 43px; font: 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .services-section.style6 h2 { color: #222222; margin: 0 0 25px; text-align: left; font: 700 32px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .services-section.style6 h2 { color: white; } .services-section.style6 h3 { margin: 0 0 20px; } .services-section.style6 .box { margin: 0 0 23px; } .services-section.style6 .img { margin: -154px 0 -147px -20px; } .services-section.style7 { padding-top: 88px; padding-bottom: 8px; } .services-section.style7 h2 { margin: 0 0 13px; } .services-section.style7 .text-box { margin: 0 auto 65px; } .services-section.style7 .holder { position: relative; z-index: 1; } .services-section.style7 .holder:before { position: absolute; content: ""; top: 0; bottom: auto; left: 50%; right: auto; } .services-section.style7 .holder:before { z-index: -1; margin: -36px 0 0 -470px; width: 940px; height: 527px; background: url(images/one-page/img37.png) no-repeat; } .services-section.style7 .img { margin: 34px auto 0; } @media only screen and (max-width: 991px) { .services-section.style7 .img { margin: 0; } } /*------------------------------------------------------------------ 3-7. clients section3 Styles / .clients-section3 -------------------------------------------------------------------*/ .clients-section3 .list { margin: 0; font-size: 0; overflow: hidden; letter-spacing: -4px; border: solid #dddddd; border-width: 1px 1px 1px 0; } .dark .clients-section3 .list { border-color: #494949; } @media only screen and (max-width: 767px) { .clients-section3 .list { margin: 0 -10px; } } .clients-section3 .list li { float: left; height: 131px; width: 16.666%; letter-spacing: 0; text-align: center; position: relative; white-space: nowrap; border-bottom: 1px solid #dddddd; } .clients-section3 .list li .box { display: inline-block; white-space: normal; vertical-align: middle; } .clients-section3 .list li:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .dark .clients-section3 .list li { border-color: #494949; } @media only screen and (max-width: 1219px) { .clients-section3 .list li { width: 25%; } } @media only screen and (max-width: 767px) { .clients-section3 .list li { width: 50%; } } .clients-section3 .list li:after { top: 0; left: 0; bottom: 0; width: 1px; background: #dddddd; } .dark .clients-section3 .list li:after { background: #494949; } .clients-section3 .list img { display: block; } .clients-section3 .list a { opacity: 0.5; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .clients-section3 .list a:hover { opacity: 1; text-decoration: none; } /*------------------------------------------------------------------ 3-8. video section Styles / .video-section -------------------------------------------------------------------*/ .video-section { color: white; font-size: 16px; line-height: 26px; text-align: center; position: relative; z-index: 1; } .video-section:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: transparent; } .video-section:after { z-index: 1; background: rgba(0, 0, 0, 0.6); } .video-section .container { position: relative; z-index: 100; } .video-section h2 { color: white; margin: 0 0 23px; text-align: center; font: 600 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .video-section h2 { font-size: 30px; line-height: 40px; } } .video-section .play-icon { display: block; font-size: 50px; overflow: hidden; text-align: center; margin: 0 auto 47px; padding: 25px 0 0 10px; width: 100px; height: 100px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; background: url(images/icons/icon1.png) no-repeat; } .video-section .play-icon .fa-pause { display: none; } .video-section .play-icon.video-playing { font-size: 40px; padding: 30px 0 0; } .video-section .play-icon.video-playing .fa-play { display: none; } .video-section .play-icon.video-playing .fa-pause { display: block; } .video-section .play-icon:hover { opacity: 0.8; text-decoration: none; } .video-section .video-area { z-index: -1; } .video-section .buttonBar { display: none; } /*------------------------------------------------------------------ 3-9. whatwedo section Styles / .whatwedo-section -------------------------------------------------------------------*/ .whatwedo-section { font-size: 16px; line-height: 26px; } .whatwedo-section p { margin: 0 0 25px; } .whatwedo-section.style2 { color: #666666; line-height: 24px; } .whatwedo-section.style2 h2 { margin: 0 0 24px; font-weight: 700; font-size: 24px; line-height: 28px; text-transform: uppercase; } .whatwedo-section.style2 p { margin: 0 0 46px; } .whatwedo-section.style2 .img-holder { position: relative; } .whatwedo-section.style2 .img-holder .img { display: block; margin: 0 0 0 -54px; } .whatwedo-section.style2.add-style { padding-bottom: 71px; } .whatwedo-section.style2.add-style p { margin: 0 0 23px; } .whatwedo-section.style3 { color: #666666; line-height: 24px; font-weight: 300; } .whatwedo-section.style3 h2 { margin: 0; font-weight: 700; font-size: 24px; line-height: 28px; text-transform: uppercase; } .whatwedo-section.style3 p { margin: 0 0 20px; } .whatwedo-section.style3 .title { display: block; margin: 0 0 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; } .whatwedo-section.style3 .progress-holder.style2 .title { margin: 0 0 7px; } /*------------------------------------------------------------------ 3-10. process section Styles / .process-section -------------------------------------------------------------------*/ .process-section { font-size: 16px; line-height: 26px; } .process-section .icon-block { margin: 0 0 100px; } @media only screen and (max-width: 1219px) { .process-section .icon-block { margin: 0 0 60px; } } .process-section .icon { z-index: 5; position: relative; margin: 0 0 16px 19px; width: 100px; height: 100px; } @media only screen and (max-width: 1219px) { .process-section .icon { margin: 0 auto 10px; } } .process-section .icon .fa { color: #2a2a2a; font-size: 30px; } .dark .process-section .icon .fa { color: #8f8f8f; } .process-section .icon .num { color: white; z-index: -1; top: 30px; right: -34px; padding: 6px 0 0; border-radius: 50%; position: absolute; width: 40px; height: 40px; } .process-section .icon-holder { background: white; border-radius: 50%; text-align: center; width: 100px; height: 100px; border: 1px solid #dddddd; white-space: nowrap; } .process-section .icon-holder .fa { display: inline-block; white-space: normal; vertical-align: middle; } .process-section .icon-holder:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .dark .process-section .icon-holder { background: #191919; border-color: #494949; } .process-section .txt { color: #2a2a2a; display: block; text-align: center; padding: 0 37px 0 0; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .process-section .txt { color: #8f8f8f; } @media only screen and (max-width: 1219px) { .process-section .txt { padding: 0 0 25px; } } /*------------------------------------------------------------------ 3-11. progress holder Styles / .progress-holder -------------------------------------------------------------------*/ .progress-holder { margin: 14px 0 0 -2px; } .progress-holder li { height: 30px; margin: 0 0 20px; position: relative; background: #f8f8f8; } .dark .progress-holder li { background: #191919; } .progress-holder .progress-bar-outer { top: 0; left: 0; bottom: 0; height: 30px; display: block; position: absolute; } .progress-holder .text { top: 6px; left: 12px; color: white; position: absolute; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/18px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .progress-holder .progress-bar { height: 30px; width: 100%; margin-bottom: 0; box-shadow: none; border-radius: 0; overflow: visible; position: relative; background-color: transparent; } .progress-holder .counter { top: 5px; right: 16px; color: #2a2a2a; font-size: 13px; line-height: 18px; position: absolute; } .dark .progress-holder .counter { color: white; } .progress-holder.style2 { margin: 0; padding: 0 17.4% 0 0; } .progress-holder.style2 li { height: auto; margin: 0 0 12px; overflow: hidden; } .dark .progress-holder.style2 li { background: none; } .progress-holder.style2 .progress-bar { height: 12px; background: #ebebeb; } .dark .progress-holder.style2 .progress-bar { background: #191919; } .progress-holder.style2 .progress-bar-outer { height: 12px; overflow: visible !important; } .progress-holder.style2 .title { display: block; font-size: 12px; font-weight: 600; margin: 0 0 15px; color: #666666; letter-spacing: 2px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .progress-holder.style2 .counter { padding: 0; left: 100%; top: -26px; width: 31px; right: auto; color: white; font-size: 11px; background: #222222; margin: 0 0 0 1px; text-align: center; position: relative; position: absolute; } .progress-holder.style2 .counter:before { position: absolute; content: ""; top: 100%; bottom: auto; left: 0; right: auto; } .progress-holder.style2 .counter:before { width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 0; border-color: #222222 transparent transparent transparent; } /*------------------------------------------------------------------ 4-1. minimal page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 4-2. welcom banner Styles / .welcom-banner 4-3. about post Styles / .about-post 4-4. nav tabs Styles / .nav-tabs 4-5. create business Styles / .create-business 4-6. partners nav Styles / .partners-nav -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 4-2. welcom banner Styles / .welcom-banner -------------------------------------------------------------------*/ .welcom-banner { z-index: 5; overflow: hidden; position: relative; position: relative; } .welcom-banner:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .welcom-banner:before { z-index: 9; pointer-events: none; background: rgba(0, 0, 0, 0.4); } .welcom-banner .vimeo { top: 0; left: 0; right: 0; bottom: 0; position: absolute; } @media only screen and (max-width: 767px) { .welcom-banner .vimeo { left: -340px; right: -340px; } } .welcom-banner .slick-dots { bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .welcom-banner .slick-dots li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .welcom-banner .slick-dots li.slick-active button { background: white; } .welcom-banner .slick-dots button { margin: 0; padding: 0; border: 0; background: none; display: block; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .welcom-banner .slick-dots button:hover { background: white; text-decoration: none; } .welcom-banner .slick-arrow { right: 0; top: 50%; border: 0; padding: 0; opacity: 0; z-index: 9; width: 32px; color: white; font-size: 60px; background: none; margin: -46px 0 0; position: absolute; visibility: visible; text-indent: -9999px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .welcom-banner .slick-arrow { margin: -20px 0 0; right: 15px; } } .welcom-banner .slick-arrow:hover { opacity: 0.8; } .welcom-banner .slick-arrow:after { top: 0; left: 3px; line-height: 1; text-indent: 0; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .welcom-banner .slick-prev { left: 0; right: auto; } .welcom-banner .slick-prev:after { content: "\f104"; } .welcom-banner:hover .slick-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .welcom-banner:hover .slick-next { right: 15px; } } .welcom-banner:hover .slick-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .welcom-banner:hover .slick-prev { right: auto; left: 15px; } } .welcom-banner:hover .slick-dots { opacity: 1; bottom: 33px; visibility: visible; } .welcom-banner .beans-fadeslider .slick-track, .welcom-banner .beans-fadeslider .slick-list { z-index: -1; } .welcom-banner.style4 .welcome-heading { letter-spacing: 1px; font: 400 14px/24px "Lato", Georgia, "Times New Roman", Times, serif; } .banner-section { z-index: 999; min-height: 533px; padding-top: 20px; position: relative; padding-bottom: 40px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; white-space: nowrap; } .banner-section .welcome-heading { display: inline-block; white-space: normal; vertical-align: middle; } .banner-section:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .welcome-heading { margin: 0; width: 100%; color: white; padding: 160px 0 0; text-align: center; letter-spacing: 5px; font: 600 18px/22px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .welcome-heading br { display: none; } } .welcome-heading h1 { margin: 0 0 27px; overflow: hidden; letter-spacing: 6px; padding: 19px 25px 21px; border: 5px solid white; text-transform: uppercase; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; vertical-align: top; font: 700 60px/64px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 991px) { .welcome-heading h1 { font-size: 50px; } } @media only screen and (max-width: 767px) { .welcome-heading h1 { font-size: 26px; line-height: 40px; } } .welcome-heading p { margin: 0 0 26px; } .welcome-heading .buttons-box { overflow: hidden; } .welcome-heading .btn { margin: 0 3px; border-width: 2px; } .welcome-heading .main-text { width: 509px; color: white; display: block; margin: 0 auto 25px; letter-spacing: 6px; text-transform: uppercase; font: 600 48px/60px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .welcome-heading .main-text { width: 100%; font-size: 22px; line-height: 30px; } .welcome-heading .main-text br { display: none; } } .welcome-heading .main-text .rotate-text { display: block; padding: 12px 0; font-size: 60px; font-weight: 700; margin: 10px 0 0; } @media only screen and (max-width: 767px) { .welcome-heading .main-text .rotate-text { font-size: 30px; line-height: 50px; } } .welcome-heading.style5 h1 { border: 0; padding: 0; letter-spacing: 0; text-transform: lowercase; text-transform: capitalize; font: 70px/100px "Great Vibes", "Helvetica Neue", Helvetica, Arial, sans-serif; } /*------------------------------------------------------------------ 4-3. about post Styles / .about-post -------------------------------------------------------------------*/ .about-post { color: #8f8f8f; font-size: 14px; line-height: 26px; margin-bottom: 30px; } .about-post .img-box { overflow: hidden; margin: 0 0 26px; } .about-post h3 { color: #222222; margin: 0 0 22px; letter-spacing: 2px; text-transform: uppercase; font: 600 16px/21px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .about-post h3 { color: white; } .about-post h3 a { color: #222222; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .about-post h3 a { color: white; } .about-post h3 a:hover { text-decoration: none; } .about-post h3 *.large { font-size: 18px; } .about-post p { margin: 0 0 23px; } .about-post .btn { color: #8f8f8f; border-color: #dddddd; } .dark .about-post .btn { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .about-post .btn:hover { color: white; } .dark .about-post .btn:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .features-col { color: #222222; margin-bottom: 30px; } .dark .features-col { color: white; } .features-col h2 { margin: 0 0 39px; letter-spacing: 2px; text-transform: uppercase; font: 600 21px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .features-col.style2 h2 { font-weight: 700; } .features-col.style3 .panel-title a { padding: 12px 10px 15px 29px; } .features-col.style4 .panel-title a { color: white; line-height: 2; font-size: 14px; overflow: hidden; font-weight: 600; text-transform: uppercase; padding: 15px 37px 15px 42px; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .features-col.style4 .panel-title a.collapsed { background: #222222; } .features-col.style4 .list-events { margin: -22px 0 0; } .features-col.style4 .list-events li { margin: 0 0 0 17px; padding: 37px 0 32px; border-top: 1px solid #ededed; } .features-col.style4 .list-events li:first-child { border-top-color: transparent; } @media only screen and (max-width: 1219px) { .features-col.style4 .list-events li { margin: 0; } } .features-col.style4 .list-events p { margin: 0; } .features-col.style4 .list-events .title { color: #222222; display: block; margin: 0 0 16px; position: relative; padding: 0 17px 0 22px; letter-spacing: 1.5px; text-transform: uppercase; font: 600 14px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .features-col.style4 .list-events .title { color: white; } .features-col.style4 .list-events .fa { top: 0; left: 0; font-size: 17px; position: absolute; } .features-col.style4 .list-events time { float: right; position: relative; padding: 0 0 0 28px; } .tabs-block { overflow: hidden; } /*------------------------------------------------------------------ 4-4. nav tabs Styles / .nav-tabs -------------------------------------------------------------------*/ .nav-tabs { font-size: 14px; line-height: 16px; text-transform: capitalize; border-bottom: 0; } .nav-tabs > li { margin: 0; } .nav-tabs > li > a { color: #222222; margin: 11px 0 0; border-radius: 1px; background: white; letter-spacing: 1px; padding: 11px 29px 12px; border: solid #ececec; border-width: 1px 1px 0 1px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; z-index: 1; position: relative; } .nav-tabs > li > a:before { top: 0; z-index: -1; bottom: auto; left: -1px; right: -1px; background: transparent; } .nav-tabs > li > a:after { position: absolute; content: ""; top: 4px; bottom: auto; left: 50%; right: auto; } .dark .nav-tabs > li > a { color: white; background: #191919; border-color: #494949; } @media only screen and (max-width: 991px) { .nav-tabs > li > a { padding: 11px 15px 12px; } } @media only screen and (max-width: 767px) { .nav-tabs > li > a { padding: 11px 12px 12px; } } .nav-tabs > li > a:before { top: -1px; opacity: 0; height: 5px; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .nav-tabs > li > a:after { opacity: 0; margin: 0 0 0 -3px; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: transparent transparent transparent transparent; } .nav-tabs > li > a:hover { margin: 0; background: white; padding: 18px 29px 16px; } .dark .nav-tabs > li > a:hover { background: #191919; } @media only screen and (max-width: 991px) { .nav-tabs > li > a:hover { padding: 18px 20px 16px; } } @media only screen and (max-width: 767px) { .nav-tabs > li > a:hover { padding: 18px 8px 16px; } } .nav-tabs > li > a:hover:after, .nav-tabs > li > a:hover:before { opacity: 1; visibility: visible; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { margin: 0; border-radius: 0; background: white; border: solid #ececec; border-width: 1px 1px 0 1px; padding: 18px 29px 16px; position: relative; z-index: 1; position: relative; } .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:hover:before, .nav-tabs > li.active > a:focus:before { top: 0; z-index: -1; bottom: auto; left: -1px; right: -1px; background: transparent; } .nav-tabs > li.active > a:after, .nav-tabs > li.active > a:hover:after, .nav-tabs > li.active > a:focus:after { position: absolute; content: ""; top: 4px; bottom: auto; left: 50%; right: auto; } .dark .nav-tabs > li.active > a, .dark .nav-tabs > li.active > a:hover, .dark .nav-tabs > li.active > a:focus { border-color: #494949; background: #191919; } @media only screen and (max-width: 991px) { .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { padding: 18px 20px 16px; } } @media only screen and (max-width: 767px) { .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { padding: 18px 12px 16px; } } .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:hover:before, .nav-tabs > li.active > a:focus:before { top: -1px; opacity: 1; height: 5px; visibility: visible; } .nav-tabs > li.active > a:after, .nav-tabs > li.active > a:hover:after, .nav-tabs > li.active > a:focus:after { opacity: 1; margin: 0 0 0 -3px; visibility: visible; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: transparent transparent transparent transparent; } .tab-content { overflow: hidden; } .tab-pane { color: #8f8f8f; font-size: 14px; overflow: hidden; line-height: 26px; background: white; border: 1px solid #ececec; padding: 24px 5% 22px 5.3%; } .dark .tab-pane { background: #191919; border-color: #494949; } @media only screen and (max-width: 1219px) { .tab-pane { padding: 20px 3%; } } .tab-pane .alignleft { float: left; margin: 7px 34px 0 0; } @media only screen and (max-width: 1219px) { .tab-pane .alignleft { margin: 7px 14px 0 0; } } @media only screen and (max-width: 991px) { .tab-pane .alignleft { float: none; margin: 0 0 20px; } .tab-pane .alignleft img { width: 100%; } } .tab-pane .text-box { overflow: hidden; } .tab-pane .text-box p { margin: 0; } .panel-group { overflow: hidden; } .panel-group .panel { border-radius: 0; box-shadow: none; margin-bottom: 9px; background: white; border-color: #ececec; } .dark .panel-group .panel { background: #191919; border-color: #494949; } .panel-default > .panel-heading { border-radius: 0; } .features-col .panel-default > .panel-heading { padding: 0; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-color: #ececec; } .panel-default > .panel-heading { background: none; } .panel-title { color: white; font: 14px/18px "Lato", Georgia, "Times New Roman", Times, serif; text-transform: capitalize; } .panel-title a { color: white; display: block; position: relative; letter-spacing: 1px; padding: 12px 10px 15px 44px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .panel-title a:hover { color: white; text-decoration: none; } .panel-title a.collapsed { color: #2a2a2a; background: white; } .dark .panel-title a.collapsed { color: white; background: #191919; } .panel-title a.collapsed:hover { color: white; } .panel-title .fa { top: 50%; left: 20px; margin: -7px 0 0; font-size: 15px; line-height: 12px; position: absolute; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .panel-body { color: #8f8f8f; line-height: 26px; padding: 23px 20px 24px 29px; } .panel-body dl { margin: 0; letter-spacing: 2px; } .panel-body dl dt { float: left; color: #222222; width: 129px; font-size: 14px; font-weight: 600; } .dark .panel-body dl dt { color: white; } .panel-body dl dd { margin: 0; overflow: hidden; } /*------------------------------------------------------------------ 4-5. create business Styles / .create-business -------------------------------------------------------------------*/ .business-block { position: relative; } .business-block:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .business-block:before { z-index: 9; background: rgba(255, 255, 255, 0.92); } .dark .business-block:before { background: rgba(34, 34, 34, 0.92); } .business-block.dark:before { background: rgba(255, 255, 255, 0.85); } .dark .business-block.dark:before { background: rgba(34, 34, 34, 0.85); } .create-business { line-height: 26px; position: relative; z-index: 999; } .create-business h2 { color: #222222; margin: 0 0 23px; letter-spacing: 2px; text-transform: uppercase; font: 600 21px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .create-business h2 { color: white; } .create-business p { margin: 0; } .create-business .busines-col { padding-top: 30px; } @media only screen and (max-width: 1219px) { .create-business .busines-col { padding-top: 0; } } .create-business .img-box { overflow: hidden; margin: -30px 0 -43px; } @media only screen and (max-width: 1219px) { .create-business .img-box { margin: 40px 0 -43px; } } @media only screen and (max-width: 991px) { .create-business .img-box { margin: 192px 0 -30px; } } @media only screen and (max-width: 767px) { .create-business .img-box { margin: 0 0 -30px; } } .create-business .buttons-box { padding: 24px 0; overflow: hidden; } .create-business .btn { margin: 0 8px 0 0; border: 2px solid transparent; } @media only screen and (max-width: 767px) { .create-business .btn { margin: 0 8px 10px 0; } } .create-business .btn-f-info { color: #2a2a2a; background: none; border-color: #2a2a2a; } .create-business .btn-f-info:hover { color: white; } .dark .create-business .btn-f-info { color: white; border-color: white; } .create-business .btn-f-default:hover { color: #2a2a2a; border-color: #2a2a2a; background: none; } .dark .create-business .btn-f-default:hover { color: white; border-color: white; } .create-business .video-block { overflow: hidden; } /*------------------------------------------------------------------ 4-6. partners nav Styles / .partners-nav -------------------------------------------------------------------*/ .partners-block { overflow: hidden; } .partners-nav { margin: 0; text-align: center; overflow: hidden; } .partners-nav li { margin: 0 17px; } .partners-nav li img { display: block; } .partners-nav a { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .partners-nav .frame { height: 70px; white-space: nowrap; } .partners-nav .frame .box { display: inline-block; white-space: normal; vertical-align: middle; } .partners-nav .frame:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .partners-nav .frame a:hover { opacity: 0.7; } .partners-nav .frame.add a { opacity: 0.4; } .partners-nav .frame.add a:hover { opacity: 1; } .partners-nav.large li { margin: 0 60px; } .partners-nav.medium li { margin: 0 30px; } /*------------------------------------------------------------------ 5-1. personal page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 5-2. personal banner Styles / .personal-banner 5-3. personal about Styles / .personal-about 5-4. p skill section Styles / .p-skill-section 5-5. personal process Styles / .personal-process 5-6. personal exper Styles / .personal-exper 5-7. p skills Styles / .p-skills -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 5-2. personal banner Styles / .personal-banner -------------------------------------------------------------------*/ .personal-banner .text-box { z-index: 55; color: #2a2a2a; position: relative; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; font: 600 16px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .personal-banner .text-box .box { display: inline-block; white-space: normal; vertical-align: middle; } .personal-banner .text-box:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .personal-banner .box { margin: 4px 0 0 -1px; } .personal-banner h1 { color: #2a2a2a; margin: 0 0 20px; text-transform: initial; font: 600 76px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .personal-banner h1 { font-size: 55px; line-height: 60px; } } /*------------------------------------------------------------------ 5-3. personal about Styles / .personal-about -------------------------------------------------------------------*/ .personal-about { font-size: 18px; font-weight: 300; line-height: 32px; text-align: center; font-style: italic; padding: 90px 0 99px; } .personal-about .block { padding: 0 17px; } .personal-about p { margin: 0 0 52px; } .personal-about.style2 { font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; } /*------------------------------------------------------------------ 5-4. p skill section Styles / .p-skill-section -------------------------------------------------------------------*/ .p-skill-section { overflow: hidden; } .p-skill-section .img-box { width: 50%; float: left; height: 600px; overflow: hidden; position: relative; } @media only screen and (max-width: 767px) { .p-skill-section .img-box { float: none; width: 100%; height: 300px !important; } } .p-skill-section .block { color: #8f8f8f; font-size: 16px; max-width: 550px; overflow: hidden; line-height: 27px; padding: 69px 0 0 29px; } @media only screen and (max-width: 767px) { .p-skill-section .block { max-width: 100%; padding: 40px 15px 0; } } .p-skill-section .block p { margin: 0 0 18px; } .p-skill-section .chart-block { overflow: hidden; margin: 0 -45px 0 -33px; } @media only screen and (max-width: 767px) { .p-skill-section .chart-block { margin: 0; } } .p-skill-section .box { width: 197px; margin: 0 0 44px; font-weight: 400; font-style: normal; display: inline-block; vertical-align: top; } @media only screen and (max-width: 1219px) { .p-skill-section .box { width: 176px; } } @media only screen and (max-width: 767px) { .p-skill-section .box { width: 100%; display: block; } } .p-skill-section .pie-chart { line-height: 20px; position: relative; margin: 0 auto 9px; text-align: center; } .p-skill-section .pie-chart canvas { top: 0; left: 0; z-index: 1; width: 100%; display: block; position: absolute; } .p-skill-section .pie-chart .pie-chart-percent { left: 0; top: 50px; width: 100%; z-index: 10; color: #2a2a2a; display: block; text-align: center; position: absolute; font: 700 15px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .p-skill-section .pie-chart .pie-chart-percent { color: white; } .p-skill-section .pie-chart img { max-width: 100%; vertical-align: middle; } .p-skill-section .pie-description { color: #2a2a2a; display: block; font-size: 12px; font-weight: 600; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .p-skill-section .pie-description { color: white; } .p-skill-section.style2 .img-box { float: right; height: 640px; } @media only screen and (max-width: 767px) { .p-skill-section.style2 .img-box { float: none; height: 300px !important; } } .p-skill-section.style2 .page-heading { text-align: left; } .p-skill-section.style2 .form-block { width: 50%; float: right; overflow: hidden; position: relative; } @media only screen and (max-width: 767px) { .p-skill-section.style2 .form-block { float: none; width: 100%; height: auto !important; } } .p-skill-section.style2 .page-heading { margin: 0 0 20px; } .p-skill-section.style2 .block { z-index: 99; float: right; width: 63.3%; max-width: 100%; position: relative; padding: 87px 34px 40px 10px; } @media only screen and (max-width: 1219px) { .p-skill-section.style2 .block { width: 100%; padding: 87px 20px 40px; } } .p-skill-section.style2 .facts-section .box { display: block; width: 100%; margin: 0; } .p-skill-section.style2 .facts-section .box .num { font-size: 50px; line-height: 70px; } /*------------------------------------------------------------------ 5-5. personal process Styles / .personal-process -------------------------------------------------------------------*/ .personal-process { overflow: hidden; padding: 90px 0 20px; } @media only screen and (max-width: 767px) { .personal-process { padding: 50px 0 20px; } } .personal-process .beans-slider { color: #8f8f8f; margin: 0 auto; font-size: 18px; max-width: 730px; overflow: hidden; line-height: 32px; font-style: italic; text-align: center; } .personal-process .beans-slider .slick-dots { position: static; overflow: hidden; padding: 12px 0 60px; } .personal-process .beans-slider .slick-dots li { margin: 0 4px; vertical-align: top; display: inline-block; } .personal-process .beans-slider .slick-dots button { margin: 0; padding: 0; display: block; background: none; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 12px; height: 12px; border: 1px solid #dedede; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .personal-process .beans-slider .slick-dots button:hover { text-decoration: none; } .personal-process .icon { color: white; display: block; font-size: 39px; padding: 39px 0 0; text-align: center; border-radius: 50%; margin: 0 auto 33px; width: 120px; height: 120px; } .personal-process .title { color: #2a2a2a; display: block; font-size: 21px; font-weight: 700; margin: 0 0 23px; line-height: 25px; font-style: normal; text-transform: uppercase; } .dark .personal-process .title { color: white; } /*------------------------------------------------------------------ 5-6. personal exper Styles / .personal-exper -------------------------------------------------------------------*/ .personal-exper { color: #8f8f8f; padding: 91px 0 24px; } .personal-exper .p-holder { font-size: 14px; overflow: hidden; padding: 0 0 74px; line-height: 20px; position: relative; } @media only screen and (max-width: 767px) { .personal-exper .p-holder { padding: 0 0 40px; } } .personal-exper .p-holder:after { top: 0; bottom: 0; left: 584px; width: 2px; background: #ededed; } @media only screen and (max-width: 1219px) { .personal-exper .p-holder:after { left: 470px; } } @media only screen and (max-width: 991px) { .personal-exper .p-holder:after { left: 359px; } } @media only screen and (max-width: 767px) { .personal-exper .p-holder:after { display: none; } } .dark .personal-exper .p-holder:after { background: #494949; } .personal-exper .p-holder:last-child:after { bottom: 74px; } .personal-exper .p-holder .box { float: left; width: 532px; padding: 23px 0 0; text-align: right; margin: 0 22px 0 0; } @media only screen and (max-width: 1219px) { .personal-exper .p-holder .box { width: 416px; } } @media only screen and (max-width: 991px) { .personal-exper .p-holder .box { width: 306px; } } .personal-exper .p-holder .title { color: #2a2a2a; display: block; font-size: 16px; margin: 0 0 24px; line-height: 20px; } .dark .personal-exper .p-holder .title { color: white; } .personal-exper .p-holder .title a { color: #2a2a2a; font-size: 12px; text-transform: uppercase; } .dark .personal-exper .p-holder .title a { color: white; } .personal-exper .p-holder time { float: left; color: #2a2a2a; width: 200px; font-size: 16px; line-height: 20px; padding: 22px 0 0 21px; } .dark .personal-exper .p-holder time { color: white; } .personal-exper .p-holder .icon { color: white; z-index: 5; float: left; font-size: 24px; padding: 20px 0 0; position: relative; text-align: center; border-radius: 50%; margin: 0 auto 33px; width: 62px; height: 62px; } .personal-exper .p-holder p { margin: 0; } .personal-exper .p-holder:nth-child(even) .box { float: right; text-align: left; margin: 0 0 0 22px; } .personal-exper .p-holder:nth-child(even) time { float: right; text-align: right; padding: 22px 21px 0 0; } .personal-exper .p-holder:nth-child(even) .icon { float: right; } .personal-exper.style3 { padding-top: 0; } .personal-exper.style3 .img-box { overflow: hidden; margin: 0 0 20px; } .personal-exper.style3 h2 { color: #2a2a2a; display: block; font-size: 16px; margin: 0 0 10px; line-height: 20px; text-transform: uppercase; } .dark .personal-exper.style3 h2 { color: white; } .personal-exper.style3 h2 a { color: #2a2a2a; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .personal-exper.style3 h2 a { color: white; } .personal-exper.style3 h2 a:hover { text-decoration: none; } .personal-exper.style3 .p-holder { padding: 0 0 34px; } .personal-exper.style3.sidebar .p-holder:after { left: 434px; } @media only screen and (max-width: 1219px) { .personal-exper.style3.sidebar .p-holder:after { left: 350px; } } @media only screen and (max-width: 991px) { .personal-exper.style3.sidebar .p-holder:after { display: none; } } .personal-exper.style3.sidebar .p-holder .box { width: 382px; } @media only screen and (max-width: 1219px) { .personal-exper.style3.sidebar .p-holder .box { width: 296px; } } @media only screen and (max-width: 991px) { .personal-exper.style3.sidebar .p-holder .box { width: 377px; } } @media only screen and (max-width: 767px) { .personal-exper.style3.sidebar .p-holder .box { width: 100%; } } @media only screen and (max-width: 991px) { .personal-exper.style3.sidebar .p-holder time { display: none; } } /*------------------------------------------------------------------ 5-7. p skills Styles / .p-skills -------------------------------------------------------------------*/ .p-skills { padding: 91px 0 80px; } .p-skills .heading-v5 { margin: 0 0 2px; } .p-skills .title { display: block; margin: 0 0 19px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; font: 600 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .p-skills .progress-right { text-align: right; } .p-skills .progress-right .progress-holder .progress-bar-outer { background: #2a2a2a; left: auto; right: 0; } .p-skills .progress-right .progress-holder .text { left: auto; right: 21px; } .p-skills .progress-right .progress-holder .counter { left: 9px; right: auto; } .p-skills .progress-holder { margin: 0; } .p-skills .progress-holder .counter { color: #8f8f8f; } .p-skills .progress-holder .text { text-transform: uppercase; } /*------------------------------------------------------------------ 6-1. photographer page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 6-2. w7 Styles / .w7 6-3. showcase gallery Styles / .showcase-gallery 6-4. photo heading Styles / .photo-heading -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 6-2. w7 Styles / .w7 -------------------------------------------------------------------*/ .w7 { position: relative; padding: 0 0 0 260px; } @media only screen and (max-width: 991px) { .w7 { padding: 0; -webkit-transition: margin 0.4s ease; -moz-transition: margin 0.4s ease; -o-transition: margin 0.4s ease; transition: margin 0.4s ease; } } @media only screen and (min-width: 992px) { .w7.shop { padding: 0 0 0 240px; } .w7.shop .container { width: 750px; } } @media only screen and (min-width: 1100px) { .w7.shop .container { width: 854px; } } @media only screen and (min-width: 1299px) { .w7.shop { border: 20px solid white; } .w7.shop .container { width: 1035px; } } @media only screen and (min-width: 1469px) { .w7.shop .container { width: 1200px; } } /*------------------------------------------------------------------ 6-3. showcase gallery Styles / .showcase-gallery -------------------------------------------------------------------*/ .showcase-gallery .beans-slide { position: relative; padding: 0 0 0 112px; white-space: nowrap; } .showcase-gallery .beans-slide .heading { display: inline-block; white-space: normal; vertical-align: middle; } .showcase-gallery .beans-slide:before { content: ''; vertical-align: middle; display: inline-block; min-height: inherit; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .showcase-gallery .beans-slide { padding: 0 0 0 30px; } } .showcase-gallery .beans-slide .heading { transition: all 2.5s ease; position: relative; margin: -7px 0 0; bottom: -50px; color: white; opacity: 0; z-index: 99; } .showcase-gallery .beans-slide .heading h2 { margin: 0; letter-spacing: 10px; text-transform: capitalize; font: italic 100px/100px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 767px) { .showcase-gallery .beans-slide .heading h2 { font-size: 30px; line-height: 35px; } } .showcase-gallery .slick-active .heading { transition: all 1s ease 1s; opacity: 1; bottom: 0; } .showcase-gallery .slick-dots { bottom: 80px; } @media only screen and (max-width: 767px) { .showcase-gallery .slick-dots { bottom: 53px; } } .showcase-gallery .slick-dots li { float: none; padding: 0 4px; display: inline-block; vertical-align: top; } .showcase-gallery .slick-dots li.active button { background: white; } .showcase-gallery .slick-dots li button { border: 0; margin: 0; padding: 0; display: block; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .showcase-gallery .slick-dots li button:hover { text-decoration: none; } .showcase-gallery .slick-dots li button:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 6-4. photo heading Styles / .photo-heading -------------------------------------------------------------------*/ .photo-heading { margin: 0; color: #2a2a2a; text-transform: capitalize; font: italic 48px/50px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 991px) { .photo-heading { font-size: 30px; line-height: 40px; } } @media only screen and (max-width: 767px) { .photo-heading { font-size: 20px; line-height: 30px; } } /*------------------------------------------------------------------ 7-1. freelancer page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 7-2. lancer banner Styles / .lancer-banner 7-3. lancer about Styles / .lancer-about 7-4. lancer do Styles / .lancer-do -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 7-2. lancer banner Styles / .lancer-banner -------------------------------------------------------------------*/ .lancer-banner { color: white; } .lancer-banner .container { z-index: 99; position: relative; } .lancer-banner .text-box { float: right; width: 571px; letter-spacing: 1.8px; white-space: nowrap; font: 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .lancer-banner .text-box .frame { display: inline-block; white-space: normal; vertical-align: middle; } .lancer-banner .text-box:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .lancer-banner .text-box { width: 100%; } } .lancer-banner h1 { margin: 0 0 17px; letter-spacing: 0; font: 700 68px/70px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .lancer-banner h1 { font-size: 40px; line-height: 50px; } } .lancer-banner .btn { border-width: 2px; margin: 0 0 30px 2px; } .lancer-banner p { margin: 0 0 28px; } /*------------------------------------------------------------------ 7-3. lancer about Styles / .lancer-about -------------------------------------------------------------------*/ .lancer-about { color: #8f8f8f; font-size: 15px; line-height: 32px; padding-top: 89px; font-style: italic; padding-bottom: 84px; } .lancer-about .txt { width: 48%; float: left; margin: 0 2.5% 0 0; } @media only screen and (max-width: 767px) { .lancer-about .txt { width: 100%; float: none; margin: 0 0 20px; } } .lancer-about .txt p { margin: 0; } .lancer-about .chart-block { width: 53%; float: left; margin: 0 -12% 0 0; } @media only screen and (max-width: 767px) { .lancer-about .chart-block { margin: 0; width: 100%; float: none; } } .lancer-about .box { width: 31.53%; margin: 0 0 13px; font-weight: 400; font-style: normal; display: inline-block; vertical-align: top; } @media only screen and (max-width: 767px) { .lancer-about .box { width: 49%; } } .lancer-about .pie-chart { line-height: 20px; position: relative; margin: 0 auto 6px; text-align: center; } .lancer-about .pie-chart canvas { top: 0; left: 0; z-index: 1; width: 100%; display: block; position: absolute; } .lancer-about .pie-chart .pie-chart-percent { left: 0; top: 50px; width: 100%; z-index: 10; color: #2a2a2a; display: block; text-align: center; position: absolute; font: 700 15px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .lancer-about .pie-chart .pie-chart-percent { color: white; } .lancer-about .pie-chart img { max-width: 100%; vertical-align: middle; } .lancer-about .pie-description { color: #2a2a2a; display: block; font-size: 11px; font-weight: 600; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .lancer-about .pie-description { color: white; } .lancer-about strong.title { font-style: normal; letter-spacing: 2px; text-transform: uppercase; } /*------------------------------------------------------------------ 7-4. lancer do Styles / .lancer-do -------------------------------------------------------------------*/ .lancer-do { text-align: center; } .lancer-do .list-do { font-size: 14px; overflow: hidden; line-height: 22px; border: solid #dddddd; border-width: 1px 1px 0 0; } .dark .lancer-do .list-do { border-color: #494949; } .lancer-do .list-do li { width: 25%; float: left; border: solid #dddddd; border-width: 0 0 1px 1px; } .dark .lancer-do .list-do li { border-color: #494949; } @media only screen and (max-width: 767px) { .lancer-do .list-do li { width: 50%; } } @media only screen and (max-width: 479px) { .lancer-do .list-do li { width: 100%; } } .lancer-do .list-do p { max-height: 0; overflow: hidden; margin: 0 25px 0 29px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .lancer-do .list-do a { color: #8f8f8f; height: 270px; display: block; white-space: nowrap; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .lancer-do .list-do a .frame { display: inline-block; white-space: normal; vertical-align: middle; } .lancer-do .list-do a:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .dark .lancer-do .list-do a { color: white; } .lancer-do .list-do a:hover { background: #2a2a2a; text-decoration: none; } .lancer-do .list-do a:hover .text { color: white; } .lancer-do .list-do a:hover p { max-height: 99px; margin: 22px 25px 6px 29px; } .lancer-do .fa { display: block; font-size: 23px; margin: 5px 0 26px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .lancer-do .text { color: #2a2a2a; display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .lancer-do .text { color: white; } .lancer-do.style2 .fa { text-shadow: none; } .lancer-do.style2 .list-do a:hover { color: white; } .lancer-do.style2 .list-do a:hover .fa, .lancer-do.style2 .list-do a:hover .text { color: white; } /*------------------------------------------------------------------ 8-1. wedding page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 8-2. wedding banner Styles / .wedding-banner 8-3. wedding header Styles / .wedding-header 8-4. wedding nav Styles / .wedding-nav 8-5. happy couple Styles / .happy-couple 8-6. memories text Styles / .memories-text 8-7. love story Styles / .love-story 8-8. invite text Styles / .invite-text 8-9. wedding photos Styles / .wedding-photos -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 8-2. wedding banner Styles / .wedding-banner -------------------------------------------------------------------*/ .wedding-banner .banner-over { z-index: 5; } .wedding-banner .slick-list, .wedding-banner .slick-track, .wedding-banner .slideset { height: 100vh; } .wedding-banner .slick-arrow { top: 50%; margin: 0; border: 0; padding: 0; left: 30px; z-index: 999; color: white; margin: 54px 0 0; background: none; position: absolute; text-indent: -9999px; transition: all 0.25s ease; } .wedding-banner .slick-arrow:after { top: 0; left: 3px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .wedding-banner .slick-arrow:hover { text-decoration: none; } .wedding-banner .slick-next { left: auto; right: 30px; } .wedding-banner .slick-next:after { content: "\f104"; } .wedding-banner .slick-dots { bottom: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .wedding-banner .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .wedding-banner .slick-dots button { margin: 0; padding: 0; display: block; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 12px; height: 12px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .wedding-banner .slick-dots button:hover { background: white; text-decoration: none; } .wedding-content { min-height: 719px; } /*------------------------------------------------------------------ 8-3. wedding header Styles / .wedding-header -------------------------------------------------------------------*/ .wedding-header { color: white; text-align: center; font: 21px/25px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; } .wedding-header .holder { display: inline-block; white-space: normal; vertical-align: middle; } .wedding-header:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .wedding-header { font-size: 15px; line-height: 18px; height: 600px !important; } } .wedding-header h1 { margin: 0 0 18px; font: 74px/86px "Great Vibes", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .wedding-header h1 { font-size: 30px; line-height: 35px; } } .wedding-header p { margin: 0 0 38px; } .wedding-header .holder { padding-top: 135px; padding-bottom: 20px; } @media only screen and (max-width: 767px) { .wedding-header .holder { padding-top: 40px; } } /*------------------------------------------------------------------ 8-4. wedding nav Styles / .wedding-nav -------------------------------------------------------------------*/ .wedding-nav { margin: 0; text-align: center; font: italic 16px/20px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .wedding-nav .countdown-row { display: block; } .wedding-nav .countdown-section { display: inline-block; vertical-align: top; padding: 15px 10px 10px; margin: 0 7px; border-radius: 50%; width: 100px; height: 100px; overflow: hidden; } .wedding-nav .countdown-section .countdown-amount { display: block; font-weight: 700; font-size: 32px; line-height: 34px; margin: 0 0 7px; } .wedding-nav .countdown-section .countdown-period { display: block; } .couple-block { padding-top: 63px; padding-bottom: 95px; } /*------------------------------------------------------------------ 8-5. happy couple Styles / .happy-couple -------------------------------------------------------------------*/ .happy-couple { color: #8f8f8f; font-size: 14px; line-height: 28px; text-align: right; } .happy-couple .img-box { overflow: hidden; margin: 0 0 27px; } .happy-couple h3 { color: #2a2a2a; margin: 0 0 19px; text-transform: uppercase; font: 700 24px/28px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .happy-couple h3 { color: white; } .happy-couple h3 a { color: #2a2a2a; transition: all 0.25s ease; } .dark .happy-couple h3 a { color: white; } .happy-couple h3 a:hover { text-decoration: none; } .happy-couple .title { display: block; margin: 0 0 36px; font: 32px/38px "Great Vibes", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .happy-couple .title { margin: 0 0 16px; } } .happy-couple p { margin: 0 0 28px; } .happy-couple .social { margin: 0; font-size: 18px; padding: 2px 0 0; } @media only screen and (max-width: 767px) { .happy-couple .social { margin: 0 0 20px; } } .happy-couple .social li { padding: 0 0 0 19px; } .happy-couple .social a { color: #8f8f8f; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .happy-couple .social a:hover { text-decoration: none; } .happy-couple.bride { text-align: left; } .happy-couple.bride .social li { padding: 0 19px 0 0; } /*------------------------------------------------------------------ 8-6. memories text Styles / .memories-text -------------------------------------------------------------------*/ .memories-text { overflow: hidden; text-align: center; position: relative; padding: 151px 0 143px; position: relative; } .memories-text:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .memories-text:before { background: rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 767px) { .memories-text { padding: 50px 0 40px; } } .memories-text .parallax-holder { z-index: -1; } .memories-text blockquote { border: 0; margin: 0; color: white; padding: 0 17%; font: 27px/40px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .memories-text blockquote { padding: 0; font-size: 20px; line-height: 30px; } } /*------------------------------------------------------------------ 8-7. love story Styles / .love-story -------------------------------------------------------------------*/ .love-story { padding: 94px 0 66px; } .love-story .row-holder { position: relative; } .love-story .row-holder time { top: 85px; left: 50%; width: 140px; color: white; font-size: 13px; font-weight: 900; text-align: center; position: absolute; margin: 0 0 0 -69px; padding: 16px 10px 14px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .love-story .row-holder time { display: none; } } .love-story .row-holder:before { top: 0; bottom: 0; left: 50%; width: 5px; background: #f8f8f8; margin: -14px 0 0 -3px; } .dark .love-story .row-holder:before { background: #191919; } @media only screen and (max-width: 767px) { .love-story .row-holder:before { display: none; } } .love-story .row-holder:last-child:before { bottom: 80px; } .love-story h3 { color: #2a2a2a; margin: 0 0 10px; font: 18px/20px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .love-story h3 { color: white; } .love-story h3 a { color: #2a2a2a; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .love-story h3 a { color: white; } .love-story h3 a:hover { text-decoration: none; } .love-story .row-holder .box { float: left; width: 370px; margin-left: 116px; margin-bottom: 37px; background: #f8f8f8; border-radius: 2px 2px 0 0; } .dark .love-story .row-holder .box { background: #191919; } @media only screen and (max-width: 1219px) { .love-story .row-holder .box { margin-left: 20px; } } @media only screen and (max-width: 991px) { .love-story .row-holder .box { margin-left: 10px; width: 270px; } } @media only screen and (max-width: 767px) { .love-story .row-holder .box { float: none; margin: 0 auto 10px; } } .love-story .row-holder .box.right { float: right; margin-top: 90px; margin-right: 114px; } @media only screen and (max-width: 1219px) { .love-story .row-holder .box.right { margin-right: 20px; } } @media only screen and (max-width: 991px) { .love-story .row-holder .box.right { margin-right: 10px; } } @media only screen and (max-width: 767px) { .love-story .row-holder .box.right { float: none; margin: 0 auto 10px; } } .love-story .row-holder .box img { width: 100%; border-radius: 2px 2px 0 0; } .love-story .row-holder .box .text-box { color: #8f8f8f; font-size: 14px; overflow: hidden; line-height: 20px; padding: 26px 10px 25px 30px; } .love-story .row-holder .box p { margin: 0; } .love-story.sidebar .row-holder .box { width: 355px; margin-left: 0; } @media only screen and (max-width: 1219px) { .love-story.sidebar .row-holder .box { width: 270px; } } @media only screen and (max-width: 767px) { .love-story.sidebar .row-holder .box { width: 100%; margin: 0 auto 10px; } } .love-story.sidebar .row-holder .box.right { margin-right: 0; } @media only screen and (max-width: 991px) { .love-story.sidebar .row-holder .box.right { margin-top: 37px; } } @media only screen and (max-width: 991px) { .love-story.sidebar .row-holder time { top: auto; left: auto; clear: left; z-index: 99; display: block; margin: 0 auto; max-width: 280px; position: relative; } } @media only screen and (max-width: 991px) { .love-story.sidebar .row-holder:before { display: none; } } /*------------------------------------------------------------------ 8-8. invite text Styles / .invite-text -------------------------------------------------------------------*/ .invite-text { color: white; text-align: center; padding: 145px 0 152px; font: 35px/40px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; } .invite-text:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .invite-text:before { background: rgba(0, 0, 0, 0.4); } .invite-text .parallax-holder { z-index: -1; } .invite-text p { margin: 0 0 27px; } .invite-text .btn { margin: 0 6px; } /*------------------------------------------------------------------ 8-9. wedding photos Styles / .wedding-photos -------------------------------------------------------------------*/ .wedding-photos .holder { width: 105%; margin: 0 0 29px; overflow: hidden; } .wedding-photos .box { float: left; width: 22%; position: relative; margin: 0 2.6% 30px 0; } @media only screen and (max-width: 991px) { .wedding-photos .box { margin: 0 2.6% 18px 0; } } @media only screen and (max-width: 767px) { .wedding-photos .box { margin: 0 2.6% 8px 0; } } .wedding-photos .box.half { width: 46.2%; } .wedding-photos .box:hover .over { top: 0; } .wedding-photos img { width: 100%; } .wedding-photos .over { overflow: hidden; transition: all 0.6s ease; background: rgba(0, 0, 0, 0.8); top: 100%; } .wedding-photos .over a { top: 50%; left: 50%; color: white; font-size: 30px; position: absolute; margin: -15px 0 0 -15px; } .wedding-photos .over a:hover { text-decoration: none; } /*------------------------------------------------------------------ 9-1. shop page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 9-2. shop gallery Styles / .shop-gallery 9-3. collection block Styles / .collection-block 9-4. product section Styles / .product-section 9-5. product nav Styles / .product-nav 9-6. new product Styles / .new-product 9-7. special block Styles / .special-block 9-8. best seller Styles / .best-seller 9-9. other services Styles / .other-services 9-10. shop features Styles / .shop-features 9-11. deal gallery Styles / .deal-gallery 9-12. product article Styles / .product-article 9-13. links nav Styles / .links-nav -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 9-2. shop gallery Styles / .shop-gallery -------------------------------------------------------------------*/ .shop-gallery .shop-content { min-height: 667px; padding-top: 240px; padding-bottom: 20px; white-space: nowrap; } .shop-gallery .shop-content .shop-heading { display: inline-block; white-space: normal; vertical-align: middle; } .shop-gallery .shop-content:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .shop-gallery .shop-content.add { text-align: right; } .shop-gallery .shop-content.add .shop-heading { color: white; font-size: 14px; text-align: left; max-width: 580px; line-height: 24px; } .shop-gallery .shop-content.add .shop-heading h1 { color: white; font-size: 43px; margin: 0 0 20px -2px; } .shop-gallery .shop-content.add .shop-heading p { margin: 0 0 20px; } .shop-gallery .shop-content.add .button-slider { overflow: hidden; } .shop-gallery .shop-content.add .button-slider .btn { color: white; border-color: white; } .shop-gallery .shop-content.add .button-slider .btn:hover { border-color: #2a2a2a; } .shop-gallery .shop-content.add2 .shop-heading { color: white; font-size: 14px; max-width: 640px; line-height: 24px; } .shop-gallery .shop-content.add2 .shop-heading h1 { color: white; font-size: 43px; margin: 0 0 20px -2px; } .shop-gallery .shop-content.add2 .shop-heading p { margin: 0 0 20px; } .shop-gallery .shop-content.add2 .button-slider { overflow: hidden; } .shop-gallery .shop-content.add2 .button-slider .btn { color: white; border-color: white; } .shop-gallery .shop-content.add2 .button-slider .btn:hover { border-color: #2a2a2a; } .shop-gallery .shop2-content { height: 700px; padding-top: 250px; padding-bottom: 20px; } @media only screen and (max-width: 767px) { .shop-gallery .shop2-content { height: 480px; padding-top: 200px; padding-bottom: 20px; } } .shop-gallery .shop-heading { z-index: 999; max-width: 570px; position: relative; margin: 2px 0 0 2px; } .shop-gallery .shop-heading h1 { color: #2a2a2a; letter-spacing: 2px; margin: 0 0 33px -2px; text-transform: uppercase; font: 700 53px/56px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .shop-gallery .shop-heading h1 { font-size: 35px; line-height: 40px; } } .shop-gallery .shop-heading h1 .txt { display: block; font-size: 60px; font-weight: 100; margin: 0 0 4px -3px; } @media only screen and (max-width: 767px) { .shop-gallery .shop-heading h1 .txt { font-size: 40px; } } .shop-gallery .button-slider { overflow: hidden; } .shop-gallery .button-slider .btn { color: #2a2a2a; border-width: 2px; margin: 0 8px 0 0; border-color: #2a2a2a; } @media only screen and (max-width: 767px) { .shop-gallery .button-slider .btn { width: 200px; margin: 0 0 15px; } } .shop-gallery .button-slider .btn:hover { border-color: #2a2a2a; background: #2a2a2a; color: white; } .shop-gallery .add-text { display: block; font-size: 45px; font-weight: 500; text-transform: uppercase; } .shop-gallery .slick-dots { opacity: 0; bottom: 10px; visibility: hidden; text-align: center; } .shop-gallery .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .shop-gallery .slick-dots button { margin: 0; padding: 0; display: block; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .shop-gallery .slick-dots button:hover { background: white; text-decoration: none; } .shop-gallery .slick-arrow { left: 0; top: 50%; margin: 0; border: 0; padding: 0; opacity: 0; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: -23px 0 0; line-height: 30px; position: absolute; visibility: hidden; text-indent: -9999px; width: 58px; height: 58px; background: rgba(0, 0, 0, 0.85); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .shop-gallery .slick-arrow { top: auto; margin: 0; bottom: 40px; } } .shop-gallery .slick-arrow:after { top: 0; left: 15px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .shop-gallery .slick-next { right: 0; left: auto; } .shop-gallery .slick-next:after { content: "\f105"; } .shop-gallery:hover .slick-dots, .shop-gallery:hover .slick-arrow { opacity: 1; visibility: visible; } .shop-gallery:hover .slick-prev { left: 14px; } .shop-gallery:hover .slick-next { right: 14px; } .shop-gallery.fitness { padding: 137px 0 0; } .shop-gallery.fitness .shop-content { min-height: 603px; } .shop-gallery.fitness .shop-content.add .shop-heading { max-width: 561px; margin: 17px 0 0; } .shop-gallery.fitness .shop-content.add .shop-heading h1 { font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: 0; margin: 0 0 28px -2px; } .shop-gallery.fitness .shop-content.add2 .shop-heading h1 { font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: 0; margin: 0 0 28px -2px; } .shop-gallery.finance { padding: 137px 0 0; } .shop-gallery.finance .anim-top { transition: all 2.5s ease 0.5s; position: relative; top: -50px; opacity: 0; } .shop-gallery.finance .slick-active .anim-top { transition: all 1s ease 0.5s; opacity: 1; top: 0; padding-bottom: 15px; } .shop-gallery.finance .btn, .shop-gallery.finance .anim-bottom { transition: all 2.5s ease 0.75s; position: relative; bottom: -50px; opacity: 0; } .shop-gallery.finance .slick-active .btn, .shop-gallery.finance .slick-active .anim-bottom { transition: all 1s ease 0.75s; opacity: 1; bottom: 0; } .shop-gallery.finance p { transition: all 2.5s ease 1s; position: relative; left: -50px; opacity: 0; } .shop-gallery.finance .slick-active p { transition: all 1s ease 1s; opacity: 1; left: 0; } .shop-gallery.finance .shop-content { min-height: 603px; } .shop-gallery.finance .shop-content.add2 .shop-heading p { color: #8f8f8f; } .shop-gallery.finance .shop-content.add2 .shop-heading h1 { color: #2c6393; font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: 0; margin: 0 0 28px -2px; } @media only screen and (max-width: 767px) { .shop-gallery.shop2 .btn { width: 147px; } } .shop-gallery.shop2 .shop-content { padding-left: 115px; } @media only screen and (max-width: 767px) { .shop-gallery.shop2 .shop-content { padding-left: 25px; } .shop-gallery.shop2 .shop-content .btn { width: 147px; } } .shop-gallery.shop2 .shop-heading h1 { font-weight: 700; font-size: 112px; line-height: 100px; letter-spacing: 31px; } @media only screen and (max-width: 767px) { .shop-gallery.shop2 .shop-heading h1 { font-size: 40px; line-height: 40px; letter-spacing: 20px; } } .shop-gallery.shop2 .shop-heading h1 .txt { font-size: 48px; font-weight: 500; line-height: 56px; letter-spacing: 1px; } @media only screen and (max-width: 767px) { .shop-gallery.shop2 .shop-heading h1 .txt { font-size: 20px; line-height: 30px; } } .shop-gallery.shop2 .shop-heading h1 .text2 { display: block; font-size: 29px; font-weight: 500; line-height: 56px; letter-spacing: 0.3px; } @media only screen and (max-width: 767px) { .shop-gallery.shop2 .shop-heading h1 .text2 { font-size: 12px; line-height: 30px; } } /*------------------------------------------------------------------ 9-3. collection block Styles / .collection-block -------------------------------------------------------------------*/ .collection-block { padding-top: 104px; padding-bottom: 50px; } @media only screen and (max-width: 767px) { .collection-block { display: none; } } .collection-block.style2 .collection-over .box h2 .txt { font-size: 14px; line-height: 14px; } .collection-col { position: relative; overflow: hidden; } .collection-col.women { margin-bottom: 29px; } @media only screen and (max-width: 1219px) { .collection-col.women { margin-bottom: 21px; } } @media only screen and (max-width: 991px) { .collection-col.women { margin-bottom: 14px; } } .collection-over { z-index: 5; padding: 10px; background: rgba(0, 0, 0, 0.2); } .collection-over:after { z-index: -1; background: rgba(0, 0, 0, 0.35); transition: all 0.25s ease; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; position: absolute; content: ''; bottom: 10px; right: 10px; left: 0; top: 10px; } .collection-over:hover:after { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); left: 10px; } .collection-over .frame { border: 2px solid white; width: 100%; height: 100%; display: table; } .collection-over .box { display: table-cell; vertical-align: middle; padding: 10px 10px 10px 35px; } .collection-over .box h2 { color: white; text-transform: uppercase; font: 700 34px/43px "Lato", Georgia, "Times New Roman", Times, serif; margin: -5px 0 10px; } @media only screen and (max-width: 991px) { .collection-over .box h2 { margin: 0 0 5px; font-size: 25px; line-height: 35px; } } .collection-over .box h2 .txt { display: block; font-weight: 300; } .collection-over.add .box { padding-bottom: 28px; vertical-align: bottom; } @media only screen and (max-width: 991px) { .collection-over.add .box { padding-bottom: 8px; padding-right: 20px; } } .collection-over.add .box h2 { font-size: 24px; line-height: 34px; } @media only screen and (max-width: 991px) { .collection-over.add .box h2 { font-size: 20px; line-height: 25px; } } .collection-over.add2 .box { padding-bottom: 28px; vertical-align: bottom; } /*------------------------------------------------------------------ 9-4. product section Styles / .product-section -------------------------------------------------------------------*/ .product-section { padding-top: 45px; padding-bottom: 38px; } .product-section.seller { padding-top: 95px; padding-bottom: 40px; } .product-nav-holder { margin-bottom: 60px; } /*------------------------------------------------------------------ 9-5. product nav Styles / .product-nav -------------------------------------------------------------------*/ .product-nav { border: 1px solid #dddddd; margin: 0; text-transform: uppercase; text-align: center; letter-spacing: -4px; font-size: 0; } .dark .product-nav { border-color: #494949; } .product-nav li { display: inline-block; vertical-align: top; padding: 0; letter-spacing: 0; font-size: 14px; } .product-nav li.active a { color: white; } .product-nav a { color: #222222; display: block; padding: 13px 20px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .product-nav a { color: #8f8f8f; } .product-nav a:hover { color: white; text-decoration: none; } .products-holder { overflow: hidden; width: 105%; } @media only screen and (max-width: 767px) { .products-holder { width: 100%; } } /*------------------------------------------------------------------ 9-6. new product Styles / .new-product -------------------------------------------------------------------*/ .new-product { width: 22%; float: left; text-align: center; margin: 0 3% 58px 0; } @media only screen and (max-width: 991px) { .new-product { margin: 0 2.3% 30px 0; } } @media only screen and (max-width: 767px) { .new-product { width: 50%; margin: 0 0 30px; } } @media only screen and (max-width: 479px) { .new-product { width: 100%; } } .new-product .product-img { position: relative; overflow: hidden; margin: 0 0 15px; } .new-product .title { color: #8f8f8f; display: block; margin: 0 0 2px; font-size: 11px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; } .new-product h2 { margin: 0 0 7px; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .new-product h2 a { color: #2a2a2a; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .new-product h2 a { color: #8f8f8f; } .new-product h2 a:hover { text-decoration: none; } .new-product .amount { display: block; margin: -2px 0 0; font-size: 21px; line-height: 24px; font-weight: 900; } .new-product .amount sub { font-size: 16px; font-weight: 700; display: inline-block; vertical-align: middle; margin: -9px 0 0; } .new-product .btn-cart { display: none; text-transform: uppercase; font-size: 12px; line-height: 16px; color: #2a2a2a; margin: 4px 0 2px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .new-product .btn-cart { color: #8f8f8f; } .new-product .btn-cart:hover { text-decoration: none; } .new-product:hover .product-over { top: 0; } .new-product:hover .btn-cart { display: inline-block; vertical-align: top; } .new-product:hover .amount { display: none; } .new-product.active .product-over { top: 0; } .new-product.active .btn-cart { display: inline-block; vertical-align: top; } .new-product.active .amount { display: none; } .product-over { transition: all 0.6s ease; background: rgba(0, 0, 0, 0.8); top: 100%; } .product-over .frame { width: 100%; height: 100%; display: table; } .product-over .box { display: table-cell; vertical-align: middle; padding: 10px; } .rattings-nav { overflow: hidden; margin: 0 0 15px; font-size: 11px; line-height: 14px; } .rattings-nav li { padding: 0; display: inline-block; vertical-align: top; } .rattings-nav li.add .fa { color: #cfcfcf; } /*------------------------------------------------------------------ 9-7. special block Styles / .special-block -------------------------------------------------------------------*/ .special-block { position: relative; overflow: hidden; position: relative; } .special-block:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .special-block:before { background: rgba(0, 0, 0, 0.2); z-index: 1; } .special-block.style2:before { display: none; } .special-block .beans-slider { position: relative; } .special-block .beans-slider:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .special-block .beans-slider:before { background: rgba(0, 0, 0, 0.4); } .special-block .slick-arrow { top: 50%; border: 0; margin: 0; padding: 0; left: 14px; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: -23px 0 0; line-height: 30px; position: absolute; text-indent: -9999px; width: 58px; height: 58px; background: rgba(0, 0, 0, 0.85); } @media only screen and (max-width: 991px) { .special-block .slick-arrow { display: none; } } .special-block .slick-arrow:after { top: 0; left: 18px; line-height: 1; text-indent: 0; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .special-block .slick-next { left: auto; right: 14px; } .special-block .slick-next:after { content: "\f105"; } .special-content { padding-top: 20px; padding-bottom: 20px; min-height: 400px; position: relative; z-index: 999; white-space: nowrap; } .special-content .special-box { display: inline-block; white-space: normal; vertical-align: middle; } .special-content:before { content: ''; vertical-align: middle; display: inline-block; min-height: inherit; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .special-box { color: white; margin: -6px 0 0; padding: 0 38% 0 0; line-height: 24px; } @media only screen and (max-width: 767px) { .special-box { padding: 0; } } .special-box h2 { margin: 0 0 26px; text-transform: uppercase; font: 600 32px/36px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .special-box h2 { font-size: 20px; line-height: 1.4; } } .special-box p { margin: 0 0 36px; } /*------------------------------------------------------------------ 9-8. best seller Styles / .best-seller -------------------------------------------------------------------*/ .best-seller { margin-bottom: 56px; } @media only screen and (max-width: 991px) { .best-seller { margin-bottom: 30px; } } .best-seller .new-product { float: none; overflow: hidden; margin: 0; width: 100%; min-height: 340px; } @media only screen and (max-width: 1219px) { .best-seller .new-product { min-height: 280px; } } @media only screen and (max-width: 991px) { .best-seller .new-product { min-height: 240px; } } @media only screen and (max-width: 767px) { .best-seller .new-product { margin: 0 0 40px; } } .best-seller .new-product h2 { margin: 0 0 15px; } .best-seller .new-product .product-img { margin: 0 0 12px; } .best-seller .new-product .rattings-nav { display: none; padding: 3px 0 0; } .best-seller .new-product:hover h2 { display: none; } .best-seller .new-product:hover .rattings-nav { display: block; width: 100%; } .best-seller .new-product.active h2 { display: none; } .best-seller .new-product.active .rattings-nav { display: block; width: 100%; } /*------------------------------------------------------------------ 9-9. other services Styles / .other-services -------------------------------------------------------------------*/ .other-services { overflow: hidden; background: white; border: 1px solid #dddddd; padding: 72px 15px 15px; text-align: center; line-height: 24px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .other-services { margin: 0 0 20px; } } .dark .other-services { background: #191919; border-color: #494949; } .other-services .fa { color: #2a2a2a; position: absolute; left: 50%; top: -41px; font-size: 32px; line-height: 20px; margin: 0 0 0 -16px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .other-services .fa { color: white; } .other-services .fa-money { margin: 0 0 0 -18px; } .other-services .fa-phone { margin: 2px 0 0 -13px; } .other-services h2 { color: #2a2a2a; margin: 0 0 15px; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .other-services h2 { color: white; } .other-services h2 a { color: #2a2a2a; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .other-services h2 a { color: white; } .other-services h2 a:hover { text-decoration: none; opacity: 0.6; } .other-services p { margin: 0 0 10px; } .other-services:hover { color: white; } .other-services:hover .fa { color: white; } .other-services:hover h2 a { color: white; } /*------------------------------------------------------------------ 9-10. shop features Styles / .shop-features -------------------------------------------------------------------*/ .shop-features h2 { color: #222222; margin: 0 0 61px; padding: 0 0 13px; text-transform: uppercase; font: 700 18px/21px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .shop-features h2:before { top: auto; z-index: -1; bottom: 0; left: 0; right: auto; background: transparent; } .shop-features h2:before { width: 40px; height: 3px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .shop-features h2 { color: white; } .shop-features.hot h2 { max-width: 200px; } .shop-features:hover h2:before { width: 60px; } /*------------------------------------------------------------------ 9-11. deal gallery Styles / .deal-gallery -------------------------------------------------------------------*/ .deal-gallery { overflow: visible; } .deal-gallery .deal-img { overflow: hidden; position: relative; border: 1px solid #dddddd; margin: 0 0 17px; } .deal-gallery .deal-box { overflow: hidden; } .deal-gallery .deal-row { overflow: hidden; margin: 0 0 14px; } .deal-gallery .name { float: left; color: #2a2a2a; font-size: 16px; line-height: 18px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .deal-gallery .name { color: white; } .deal-gallery .name:hover { text-decoration: none; } .deal-gallery .rattings-nav { float: right; margin: 3px 0 0; } .deal-gallery .price { float: right; font-size: 18px; line-height: 20px; font-weight: 700; } .deal-gallery .price.cancel { float: left; color: #2a2a2a; text-decoration: line-through; } .dark .deal-gallery .price.cancel { color: white; } .deal-gallery .btn-sale { top: 9px; left: 10px; color: white; font-size: 12px; line-height: 14px; padding: 2px 10px; position: absolute; text-transform: uppercase; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; vertical-align: top; } .deal-gallery .btn-sale:hover { text-decoration: none; background: #222222; color: white; } .deal-gallery .slick-arrow { border: 0; margin: 0; padding: 0; top: -95px; right: 2px; z-index: 99; font-size: 18px; overflow: hidden; color: #dddddd; line-height: 20px; margin: 0 0 0 3px; border-radius: 50%; position: absolute; background: white; text-indent: 9999px; width: 28px; height: 28px; border: 1px solid #dddddd; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; vertical-align: top; } .dark .deal-gallery .slick-arrow { border-color: #494949; background: #191919; color: white; } .deal-gallery .slick-arrow:after { top: 4px; left: 9px; line-height: 1; text-indent: 0; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .deal-gallery .slick-arrow:hover { text-decoration: none; } .deal-gallery .slick-next { right: 35px; } .deal-gallery .slick-next:after { content: "\f104"; } /*------------------------------------------------------------------ 9-12. product article Styles / .product-article -------------------------------------------------------------------*/ .product-article { color: #8f8f8f; margin: 0 0 21px; font-size: 12px; line-height: 18px; overflow: hidden; } .product-article .alignleft { float: left; width: 36.9%; margin: 0 10px 0 0; border: 1px solid #dddddd; } .dark .product-article .alignleft { border-color: #494949; } .product-article .alignleft img { width: 100%; } .product-article .alignleft a { display: block; } .product-article .txt-box { overflow: hidden; } .product-article h3 { color: #2a2a2a; margin: 0 0 3px; text-transform: capitalize; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .product-article h3 { color: #8f8f8f; } .product-article h3 a { color: #2a2a2a; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .product-article h3 a { color: #8f8f8f; } .product-article h3 a:hover { text-decoration: none; } .product-article .rattings-nav { margin: 0 0 18px; } .product-article .price { color: #2a2a2a; display: block; font-size: 18px; line-height: 20px; font-weight: 700; } .dark .product-article .price { color: #8f8f8f; } .product-article p { margin: 0; } .product-article time { display: block; margin: 0 0 11px -2px; } .product-article.blog { margin: 0 0 19px; } .product-article.blog .alignleft { margin: 0 13px 0 0; } .product-article.blog h3 { margin: -5px 0 2px -2px; } .features-box.links h3 { color: #2a2a2a; margin: -5px 0 17px; text-transform: uppercase; font: 700 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .features-box.links h3 { color: white; } /*------------------------------------------------------------------ 9-13. links nav Styles / .links-nav -------------------------------------------------------------------*/ .links-nav { font-size: 13px; line-height: 16px; margin: 0 0 22px; padding: 0 0 0 12px; } .links-nav li { padding: 0 0 8px; } .links-nav a { color: #8f8f8f; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .links-nav a:hover { padding: 0 0 0 5px; text-decoration: none; } .links-nav .fa { position: absolute; left: -12px; top: 1px; } .shop2-container { overflow: hidden; text-align: center; font: 300 16px/26px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .shop2-container h2 { color: white; margin: 0 0 53px; padding: 0 0 27px; position: relative; font: 42px/50px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .shop2-container h2:after { background: #515151; margin: 0 0 0 -50px; position: absolute; width: 100px; content: ""; height: 3px; right: 50%; bottom: 0; } .shop2-container p { margin: 0 0 50px; } .shop2-container img { width: 100%; } .shop2-container .shop-box { margin: 0 0 30px; position: relative; } .shop2-container .shop-box .txt-box { vertical-align: middle; background: white; display: table; height: 227px; width: 100%; } .shop2-container .shop-box h3 { margin: 0; color: #222222; display: table-cell; vertical-align: middle; text-transform: uppercase; font: 300 26px/33px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .shop2-container .shop-box h3 span { font-weight: 600; display: block; font-size: 37px; } .shop2-container .shop-box.arrow.top:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 20px; margin-left: -20px; } .shop2-container .shop-box.arrow.right:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-left-color: #fff; border-width: 20px; margin-top: -20px; } .shop2-container .shop-box.arrow.bottom:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 20px; margin-left: -20px; } .shop2-container .shop-box.arrow.left:after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 20px; margin-top: -20px; } .shop2-container .shop-box a:hover { text-decoration: none; } /*------------------------------------------------------------------ 10-1. restaurant page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 10-2. resturant gallery Styles / .resturant-gallery 10-3. about chef Styles / .about-chef 10-4. chef quotes Styles / .chef-quotes 10-5. menu block Styles / .menu-block 10-6. our menu nav Styles / .our-menu-nav 10-7. menu article Styles / .menu-article 10-8. book block Styles / .book-block 10-9. finest chef Styles / .finest-chef 10-10. chef carousel Styles / .chef-carousel -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 10-2. resturant gallery Styles / .resturant-gallery -------------------------------------------------------------------*/ .resturant-gallery { overflow: hidden; position: relative; } .resturant-gallery .beans-slide { overflow: hidden; } .resturant-gallery .slick-arrow { top: 50%; margin: 0; border: 0; left: 20px; padding: 0; width: 21px; z-index: 999; color: white; font-size: 60px; background: none; margin: -33px 0 0; line-height: 20px; position: absolute; text-indent: -9999px; transition: all 0.25s ease; } .resturant-gallery .slick-arrow:hover { text-decoration: none; } .resturant-gallery .slick-arrow:after { top: 0; left: 3px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .resturant-gallery .slick-next { left: auto; right: 20px; } .resturant-gallery .slick-next:after { content: "\f105"; } .resturant-gallery .video-area { top: 0; left: 0; right: 0; bottom: 0; position: absolute; } .resturant-gallery .video-area .mejs-offscreen { display: none; } @media only screen and (max-width: 767px) { .resturant-gallery.video-bg .chef-icon, .resturant-gallery.video-bg p { display: none; } .resturant-gallery.video-bg .win-height { height: auto !important; } .resturant-gallery.video-bg .resturant-heading h1 { font-size: 28px; line-height: 30px; } .resturant-gallery.video-bg .resturant-heading { padding: 30px 0 20px; } } .resturant-content { max-height: 1079px; position: relative; z-index: 99; white-space: nowrap; } .resturant-content .resturant-heading { display: inline-block; white-space: normal; vertical-align: middle; } .resturant-content:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .resturant-heading { width: 100%; font-size: 18px; line-height: 28px; color: white; text-align: center; padding: 30px 20px 20px; position: relative; z-index: 1; } .resturant-heading:before { top: -9999px; z-index: -1; bottom: -9999px; left: -9999px; right: -9999px; background: rgba(0, 0, 0, 0.64); } @media only screen and (max-width: 767px) { .resturant-heading { font-size: 14px; line-height: 20px; } } .resturant-heading .beans-fadeslider { position: relative; overflow: visible; height: 80px; } .resturant-heading h1 { margin: 0 0 25px; text-transform: uppercase; font: 700 74px/78px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .resturant-heading h1 { font-size: 30px; line-height: 40px; } } .resturant-heading h1 .top-text { display: block; font-size: 54px; font-weight: normal; text-transform: initial; } @media only screen and (max-width: 767px) { .resturant-heading h1 .top-text { font-size: 20px; } } .resturant-heading p { margin: 0 0 35px; } .resturant-heading .btn { border-width: 2px; } .chef-icon { margin: 0 auto 23px; display: block; } .header { overflow: hidden; height: 80px; } /*------------------------------------------------------------------ 10-3. about chef Styles / .about-chef -------------------------------------------------------------------*/ .about-chef .txt-box { padding-top: 141px; padding-bottom: 167px; } @media only screen and (max-width: 1219px) { .about-chef .txt-box { padding-top: 80px; padding-bottom: 40px; } } .about-chef .img-box { position: relative; } .about-chef.style2 .img2 { margin: -49px 0 0 36px; } @media only screen and (max-width: 991px) { .about-chef.style2 .img2 { margin: -19px 0 0 0; } } .about-chef.style2 .txt-box { padding-top: 90px; padding-bottom: 117px; } @media only screen and (max-width: 1219px) { .about-chef.style2 .txt-box { padding-top: 40px; padding-bottom: 40px; } } @media only screen and (max-width: 991px) { .about-chef.style2 .txt-box { padding-top: 40px; padding-bottom: 0; } } .about-chef.style2 .chef-quotes cite { background: url(images/one-page/img03.png) no-repeat; } @media only screen and (max-width: 991px) { .about-chef.style2 .chef-quotes cite { display: none; } } .about-chef.style3 { padding-top: 100px; } .about-chef.style3 .img2 { margin: -49px 0 0 36px; } .about-chef.style3 .txt-box { padding-top: 90px; padding-bottom: 117px; } .about-chef.style3 .chef-quotes cite { background: url(images/icons/sign.png) no-repeat; } /*------------------------------------------------------------------ 10-4. chef quotes Styles / .chef-quotes -------------------------------------------------------------------*/ .chef-quotes { margin: 0; border: 0; color: #2a2a2a; text-align: center; display: block; font-size: 16px; line-height: 30px; font-weight: 300; font-style: italic; padding: 0; } .dark .chef-quotes { color: white; } .chef-quotes q { display: block; margin: 0 0 54px; quotes: none; } .chef-quotes cite { width: 231px; height: 88px; margin: 0 auto; text-indent: -9999px; display: block; background: url(images/restaurant/signature.png) no-repeat; } /*------------------------------------------------------------------ 10-5. menu block Styles / .menu-block -------------------------------------------------------------------*/ .menu-block { position: relative; overflow: hidden; } .menu-block .nav-holder { margin-bottom: 60px; } .menu-frame { padding-top: 100px; padding-bottom: 100px; } /*------------------------------------------------------------------ 10-6. our menu nav Styles / .our-menu-nav -------------------------------------------------------------------*/ .our-menu-nav { margin: 0; text-align: center; padding: 23px 10px 0; text-transform: capitalize; font: 700 18px/22px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; } .our-menu-nav:before { position: absolute; content: ""; top: 0; bottom: 0; left: -9999px; right: -9999px; } @media only screen and (max-width: 767px) { .our-menu-nav { padding: 0; } } .our-menu-nav:before { border: solid #2b2b2b; border-width: 2px 0; } .our-menu-nav li { float: none; padding: 0 18px; display: inline-block; vertical-align: top; } @media only screen and (max-width: 767px) { .our-menu-nav li { padding: 0 1px; } } .our-menu-nav li a { color: white; display: block; padding: 0 0 26px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; z-index: 1; } .our-menu-nav li a:before { top: auto; z-index: -1; bottom: 0; left: 0; right: 0; background: transparent; } .our-menu-nav li a:before { height: 2px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .our-menu-nav li a:hover { text-decoration: none; } .our-menu-nav li a:hover:before { opacity: 1; visibility: visible; } .our-menu-nav li.active a:before { opacity: 1; visibility: visible; } .menus-holder { width: 105%; margin: 0 0 2px; overflow: hidden; } @media only screen and (max-width: 991px) { .menus-holder { width: 100%; } } .hold-backery { padding: 25px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; font: 300 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .hold-backery { padding: 15px; } } .hold-backery .frm-backery { overflow: hidden; padding: 59px 35px 7px; border: 11px solid rgba(255, 255, 255, 0.5); } @media only screen and (max-width: 767px) { .hold-backery .frm-backery { padding: 40px 20px 7px; border-width: 5px; } } .hold-backery .menu-article { width: 48.6%; color: white; margin: 0 2.8% 0 0; } @media only screen and (max-width: 991px) { .hold-backery .menu-article { margin: 0; width: 100%; } } @media only screen and (max-width: 767px) { .hold-backery .menu-article { margin: 0 0 40px; } } .hold-backery .menu-article h2 { font-size: 16px; } .hold-backery .menu-article .alignleft { width: 28.2%; margin: 0 4.4% 59px 0; } @media only screen and (max-width: 767px) { .hold-backery .menu-article .alignleft { width: 100%; margin: 0 0 20px; } } .hold-backery .menu-article .alignleft img { border-radius: 20px; } .hold-backery .menu-article .txt-box { padding: 5px 0 0; } .hold-backery .menu-article .btn { font-size: 14px; border-width: 2px; border-radius: 15px; } .hold-backery .menu-article .btn:hover { color: white !important; } .hold-backery .menu-article:nth-child(2n) { margin-right: 0; } /*------------------------------------------------------------------ 10-7. menu article Styles / .menu-article -------------------------------------------------------------------*/ .menu-article { float: left; color: #8f8f8f; width: 46.4%; margin: 0 2.5% 0 0; } @media only screen and (max-width: 991px) { .menu-article { margin: 0; width: 100%; } } @media only screen and (max-width: 767px) { .menu-article { margin: 0 0 40px; } } .menu-article .alignleft { float: left; width: 29.8%; position: relative; margin: 0 5.6% 59px 0; } @media only screen and (max-width: 767px) { .menu-article .alignleft { float: none; width: 100%; margin: 0 0 20px; } } .menu-article .alignleft a:hover { text-decoration: none; } .menu-article .alignleft a:hover img { opacity: 0.6; } .menu-article .alignleft a:hover .fa { opacity: 1; visibility: visible; } .menu-article .alignleft img { width: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .menu-article .alignleft .fa { top: 50%; left: 50%; opacity: 0; color: white; font-size: 20px; visibility: hidden; position: absolute; margin: -10px 0 0 -10px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .menu-article .txt-box { overflow: hidden; } .menu-article .heading-box { overflow: hidden; margin: 0 0 4px; } .menu-article h2 { float: left; color: white; margin: 0 12px 0 0; text-transform: capitalize; font: 700 18px/22px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .menu-article h2 a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .menu-article h2 a:hover { text-decoration: none; } .menu-article .price { float: right; color: white; font: 24px/28px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: -5px 0 0 0; } .menu-article .price sub { display: inline-block; vertical-align: middle; margin: 0; bottom: -2px; left: -3px; font-size: 17px; } .menu-article .rattings-nav { margin: 0 0 9px; font-size: 14px; line-height: 18px; } .menu-article p { margin: 0 0 11px; } .menu-article .btn { font-size: 9px; line-height: 13px; text-transform: uppercase; } /*------------------------------------------------------------------ 10-8. book block Styles / .book-block -------------------------------------------------------------------*/ .book-block { position: relative; overflow: hidden; position: relative; } .book-block:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .book-block:before { z-index: 9; background: rgba(0, 0, 0, 0.2); } .book-section { color: white; position: relative; z-index: 999; padding-top: 10px; padding-bottom: 10px; min-height: 480px; white-space: nowrap; } .book-section .book-heading { display: inline-block; white-space: normal; vertical-align: middle; } .book-section:before { content: ''; vertical-align: middle; display: inline-block; min-height: inherit; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .book-heading { font: 300 italic 16px/28px "Lato", Georgia, "Times New Roman", Times, serif; text-align: center; overflow: hidden; padding: 67px 10% 0; } @media only screen and (max-width: 767px) { .book-heading { padding: 20px 10px; } } .book-heading h2 { margin: 0 0 26px; text-transform: uppercase; font: 700 42px/46px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .book-heading p { margin: 0 0 40px; } /*------------------------------------------------------------------ 10-9. finest chef Styles / .finest-chef -------------------------------------------------------------------*/ .finest-chef { padding-top: 90px; padding-bottom: 90px; } /*------------------------------------------------------------------ 10-10. chef carousel Styles / .chef-carousel -------------------------------------------------------------------*/ .chef-carousel { margin: 0 -20px 0 0; } @media only screen and (max-width: 767px) { .chef-carousel { margin: 0 auto; max-width: 280px; } } .chef-carousel .beans-slide { float: left; color: #8f8f8f; position: relative; text-align: center; padding: 0 10px 36px; margin: 0 0 20px 20px; border: 1px solid #dddddd; } .dark .chef-carousel .beans-slide { background: #191919; border-color: #494949; } @media only screen and (max-width: 767px) { .chef-carousel .beans-slide { margin: 0 0 20px; } } .chef-carousel .beans-slide:hover .slide-over { opacity: 1; } .chef-carousel .img-box { overflow: hidden; margin: 0 -10px 24px; } .chef-carousel h3 { color: #2a2a2a; margin: 0 0 6px; text-transform: capitalize; font: 700 24px/28px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .chef-carousel h3 { color: white; } .chef-carousel .title { display: block; margin: 0 0 25px; text-transform: uppercase; font-weight: 400; } .chef-carousel .slick-dots { position: static; } .chef-carousel .slick-dots li { padding: 0 2px; display: inline-block; vertical-align: top; } .chef-carousel .slick-dots li.slick-active button { background: #2a2a2a; } .chef-carousel .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; text-indent: -9999px; border-radius: 50%; background: white; border: 1px solid #2a2a2a; width: 12px; height: 12px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .chef-carousel .slick-dots li button:hover { background: #2a2a2a; text-decoration: none; } .slide-over { text-align: center; opacity: 0; background: #2b2b2b; transition: all 0.6s ease; } .slide-frame { display: table; width: 100%; height: 100%; padding: 20px 10%; } .slide-frame .slide-box { color: white; display: table-cell; vertical-align: middle; font-size: 13px; line-height: 24px; } .slide-frame .slide-box h3 { margin: 0 0 4px; text-transform: capitalize; font: 700 24px/28px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .slide-frame .slide-box h3 a { color: white; transition: all 0.25s ease; } .slide-frame .slide-box h3 a:hover { text-decoration: none; } .slide-frame .slide-box p { margin: 0 0 10px; } .slide-frame .slide-box .title { display: block; margin: 0 0 20px; text-transform: uppercase; font-weight: 400; } .slide-frame .slide-box .slide-socials { margin: 0 0 50px; } .slide-frame .slide-box .slide-socials a { color: white; } .slide-socials { margin: 0; text-align: center; } .slide-socials li { display: inline-block; vertical-align: top; float: none; padding: 0 11px; } .slide-socials a { color: #515151; font-size: 14px; line-height: 12px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .slide-socials a:hover { text-decoration: none; } /*------------------------------------------------------------------ 11-1. architecture page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 11-2. architecture gallery Styles / .architecture-gallery 11-3. archi columns Styles / .archi-columns 11-4. archi projects Styles / .archi-projects 11-5. archi whyus Styles / .archi-whyus -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 11-2. architecture gallery Styles / .architecture-gallery -------------------------------------------------------------------*/ .architecture-gallery { color: white; font-size: 24px; line-height: 30px; text-align: center; font-style: italic; } @media only screen and (max-width: 767px) { .architecture-gallery { font-size: 16px; line-height: 20px; } } .architecture-gallery .holder { padding: 90px 0; white-space: nowrap; } .architecture-gallery .holder .frame { display: inline-block; white-space: normal; vertical-align: middle; } .architecture-gallery .holder:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .architecture-gallery .title { display: block; text-transform: uppercase; font: 900 100px/120px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .architecture-gallery .title { font-size: 70px; line-height: 100px; } } .architecture-gallery .subtitle { display: block; padding: 0 8px; font-size: 16px; line-height: 20px; font-style: normal; margin: -12px 0 34px; letter-spacing: 4.5px; text-transform: uppercase; display: inline-block; vertical-align: top; } @media only screen and (max-width: 767px) { .architecture-gallery .subtitle { font-size: 7px; } } .architecture-gallery p { margin: 0 0 33px; } .architecture-gallery .slick-arrow { left: 0; top: 50%; border: 0; width: 79px; z-index: 999; height: 71px; color: white; font-size: 32px; background: none; margin: -35px 0 0; line-height: 32px; position: absolute; text-indent: -9999px; padding: 15px 13px 0 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .architecture-gallery .slick-arrow { display: none; } } .architecture-gallery .slick-arrow:hover { text-decoration: none; } .architecture-gallery .slick-arrow:hover:after { background: white; } .architecture-gallery .slick-arrow:after { z-index: -1; content: ""; left: -20px; right: 13px; transform: skewX(20deg); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .architecture-gallery .slick-arrow:before { top: 19px; left: -2px; width: 53px; line-height: 1; text-indent: 0; font-size: 32px; content: "\f104"; overflow: hidden; position: absolute; transform: skewX(14deg); -ms-transform: skewX(14deg); -webkit-transform: skewX(14deg); font-family: 'FontAwesome'; } .architecture-gallery .slick-next { right: 0; left: auto; padding: 15px 0 0 13px; } .architecture-gallery .slick-next:after { left: 13px; right: -20px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); } .architecture-gallery .slick-next:before { content: "\f105"; left: 19px; } .architecture-gallery .btn-history:after { transform: skewX(15deg); -ms-transform: skewX(15deg); -webkit-transform: skewX(15deg); } /*------------------------------------------------------------------ 11-3. archi columns Styles / .archi-columns -------------------------------------------------------------------*/ .archi-columns { z-index: 999; color: #2a2a2a; font-size: 14px; margin: -56px 0 0; line-height: 21px; position: relative; padding: 0 0 100px; } .dark .archi-columns { color: #8f8f8f; } .archi-columns .coll { float: left; width: 33.333%; background: #f8f8f8; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .archi-columns .coll { background: #191919; } @media only screen and (max-width: 767px) { .archi-columns .coll { float: none; width: 100%; } } .archi-columns .coll:hover { color: white; margin: -20px 0 0; } @media only screen and (max-width: 1219px) { .archi-columns .coll:hover { margin: -16px 0 0; } } @media only screen and (max-width: 991px) { .archi-columns .coll:hover { margin: -15px 0 0; } } @media only screen and (max-width: 767px) { .archi-columns .coll:hover { margin: 0; } } .archi-columns .coll:hover h2 { color: white; } .archi-columns .coll:hover h2 a { color: white; } .archi-columns .coll:hover h2 a:hover { color: #222222; } .archi-columns .coll:hover h2:after { background: white; } .archi-columns .coll:hover img { height: 230px; max-height: 230px; } @media only screen and (max-width: 1219px) { .archi-columns .coll:hover img { height: 185px; max-height: 185px; } } @media only screen and (max-width: 991px) { .archi-columns .coll:hover img { height: 142px; max-height: 142px; } } @media only screen and (max-width: 767px) { .archi-columns .coll:hover img { height: auto; max-height: 9999px; } } .archi-columns img { width: 100%; max-height: 210px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 1219px) { .archi-columns img { max-height: 169px; } } @media only screen and (max-width: 991px) { .archi-columns img { max-height: 129px; } } @media only screen and (max-width: 767px) { .archi-columns img { max-height: 9999px; } } .archi-columns .block { overflow: hidden; position: relative; padding: 11px 20px 43px 22px; } .archi-columns h2 { color: black; padding: 0 0 8px; margin: 0 0 25px; position: relative; letter-spacing: 2px; text-transform: uppercase; font: 600 18px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .archi-columns h2 { color: white; } .archi-columns h2 a { color: black; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .archi-columns h2 a { color: white; } .archi-columns h2 a:hover { text-decoration: none; } .archi-columns h2:after { left: 0; bottom: 0; width: 36px; height: 4px; } .archi-columns .more { right: 0; bottom: 0; color: white; width: 40px; height: 42px; font-size: 20px; position: absolute; padding: 8px 0 0 15px; } .archi-columns .more:after { left: 0; z-index: -1; content: ""; right: -20px; background: #222222; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .archi-columns.decoration { margin: 0; position: static; } .archi-columns.decoration .container { margin-top: -209px; } @media only screen and (max-width: 1219px) { .archi-columns.decoration .container { margin-top: -167px; } } @media only screen and (max-width: 991px) { .archi-columns.decoration .container { margin-top: -129px; } } @media only screen and (max-width: 767px) { .archi-columns.decoration .container { margin-top: 0; } } .archi-columns.decoration .coll { width: 100%; background: white; } .dark .archi-columns.decoration .coll { background: #191919; } .archi-columns.decoration .block { padding: 16px 20px 20px; } /*------------------------------------------------------------------ 11-4. archi projects Styles / .archi-projects -------------------------------------------------------------------*/ .archi-projects { line-height: 28px; padding: 78px 0 100px; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .archi-projects:after { top: 0; z-index: -1; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.85); } .dark .archi-projects:after { background: rgba(42, 42, 42, 0.85); } .archi-projects .stretch { z-index: -1; } .archi-projects .heading-v2 h2 { margin: 0 0 10px; } .archi-projects .img-box { float: right; max-width: 668px; } @media only screen and (max-width: 1219px) { .archi-projects .img-box { max-width: 600px; } } @media only screen and (max-width: 991px) { .archi-projects .img-box { float: none; max-width: 100%; } } .archi-projects .img-box img { width: 100%; } .archi-projects .text { overflow: hidden; background: rgba(255, 255, 255, 0.85); padding: 32px 40px 54px 39px; border: 1px solid #dddddd; } @media only screen and (max-width: 767px) { .archi-projects .text { padding: 32px 20px 54px; } } .dark .archi-projects .text { border-color: #494949; background: rgba(42, 42, 42, 0.95); } .archi-projects .text p { margin: 0 0 32px; } .archi-projects .btn-history { color: white; background: black; padding: 11px 67px 11px 22px; } .archi-projects .title { color: black; display: block; font-size: 16px; margin: 0 0 -7px; font-weight: 300; text-transform: uppercase; } .dark .archi-projects .title { color: white; } .archi-projects .subtitle { color: #222222; display: block; font-size: 13px; margin: 0 0 21px; text-transform: uppercase; } .dark .archi-projects .subtitle { color: white; } .archi-projects h3 { color: black; margin: 0 0 33px; padding: 0 0 19px; position: relative; text-transform: uppercase; font: 300 42px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .archi-projects h3 { color: white; } .archi-projects h3 .add { display: block; font-weight: 400; } .archi-projects h3:after { left: 0; bottom: 0; width: 36px; height: 4px; } .archi-projects .beans-slider .slick-dots { bottom: 5px; width: 473px; text-align: right; } @media only screen and (max-width: 991px) { .archi-projects .beans-slider .slick-dots { width: 100%; text-align: center; } } .archi-projects .beans-slider .slick-dots li { float: none; padding: 0 5px; display: inline-block; vertical-align: top; } .archi-projects .beans-slider .slick-dots li button { border: 0; margin: 0; padding: 0; display: block; background: none; overflow: hidden; border-radius: 50%; text-indent: 9999px; width: 10px; height: 10px; border: 2px solid #c4c4c4; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .archi-projects .beans-slider .slick-dots li button:hover { text-decoration: none; } /*------------------------------------------------------------------ 11-5. archi whyus Styles / .archi-whyus -------------------------------------------------------------------*/ .archi-whyus { color: #7d7d7d; padding: 90px 0 113px; font: 300 italic 15px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .archi-whyus h2 { margin: 0 0 17px; text-transform: uppercase; font: 300 32px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .archi-whyus h2 .add { font-weight: 600; } .archi-whyus p { margin: 0 0 29px; } .archi-whyus .text-box { width: 50%; padding: 10px 0 0; display: inline-block; vertical-align: middle; } @media only screen and (max-width: 991px) { .archi-whyus .text-box { width: 100%; display: block; } } .archi-whyus .img-box { width: 48.5%; margin: 0 0 0 1%; display: inline-block; vertical-align: middle; } @media only screen and (max-width: 991px) { .archi-whyus .img-box { width: 100%; border-left: 0; display: block; } } .archi-whyus .btn { color: white; background: black; padding: 11px 66px 11px 19px; } /*------------------------------------------------------------------ 12-1. construction page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 12-2. construct gallery Styles / .construct-gallery 12-3. safety section Styles / .safety-section 12-4. const services Styles / .const-services 12-5. const partners Styles / .const-partners -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 12-2. construct gallery Styles / .construct-gallery -------------------------------------------------------------------*/ .construct-gallery { color: white; font-size: 16px; line-height: 30px; text-transform: uppercase; } .construct-gallery .holder { padding: 180px 0 40px; white-space: nowrap; } .construct-gallery .holder .frame { display: inline-block; white-space: normal; vertical-align: middle; } .construct-gallery .holder:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .construct-gallery .holder .frame { max-width: 280px; } } .construct-gallery .txt { display: block; margin: 0 0 14px; font: 32px/56px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .construct-gallery .title { display: block; margin: 0 0 7px; padding: 0 0 0 9px; font: 48px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; border-left: 10px solid #ffb600; } @media only screen and (max-width: 767px) { .construct-gallery .title { font-size: 30px; } } .construct-gallery .title .add { display: block; font-size: 60px; margin: 0 0 5px; font-weight: 900; } .construct-gallery p { margin: 0 0 23px; } .construct-gallery .btn { color: white; font-size: 14px; background: #222222; font-style: normal; padding: 10px 61px 11px 24px; } .construct-gallery .btn:before { background: #222222; } .construct-gallery .btn:hover:before { background: #222222; } .construct-gallery .slick-dots li { padding: 0 5px; float: none; display: inline-block; vertical-align: top; } .construct-gallery .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; overflow: hidden; border-radius: 50%; text-indent: 9999px; width: 10px; height: 10px; border: 2px solid #c4c4c4; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .construct-gallery .slick-dots li button:hover { text-decoration: none; } /*------------------------------------------------------------------ 12-3. safety section Styles / .safety-section -------------------------------------------------------------------*/ .safety-section { padding: 87px 0 100px; background: white url(images/icons/map2.png) 50% 0 no-repeat; } .dark .safety-section { background-color: #2a2a2a; } .safety-section .about-box { color: #8f8f8f; margin: 0 auto 100px; overflow: hidden; max-width: 707px; text-align: center; font: 300 italic 16px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .safety-section h2 { color: #222222; margin: 0 0 29px; font: 38px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .safety-section h2 .add { font-weight: 700; } .dark .safety-section h2 { color: white; } .safety-section h3 { color: white; max-width: 257px; background: #222222; position: relative; margin: -34px 0 0 10px; text-transform: uppercase; padding: 12px 80px 12px 19px; font: 15px/16px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .safety-section h3 { width: 90%; } } .safety-section h3 .add { display: block; font-size: 21px; font-weight: 700; } .safety-section .btn { color: white; font-size: 14px; background: #222222; font-style: normal; padding: 10px 61px 11px 24px; } .safety-section .btn:before { background: #222222; } .safety-section .btn:hover:before { background: #222222; } .safety-section img { width: 100%; } .safety-section p { margin: 0 0 26px; } .safety-section .more { top: -11px; right: -10px; color: white; font-size: 25px; overflow: hidden; position: absolute; padding: 15px 0 0 42px; width: 84px; height: 57px; } .safety-section .more:before { top: 0; bottom: 0; left: 12px; right: -11px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .safety-section .more .fa { position: relative; } .safety-section .more:hover:before { background: #222222; } /*------------------------------------------------------------------ 12-4. const services Styles / .const-services -------------------------------------------------------------------*/ .const-services { color: white; font-size: 14px; line-height: 24px; text-align: center; padding: 87px 0 100px; } .const-services .container { z-index: 2; position: relative; } .const-services .slick-list { border: 1px solid #424242; } .const-services .box { width: 25%; float: left; overflow: hidden; position: relative; border-left: 1px solid #424242; } @media only screen and (max-width: 767px) { .const-services .box { border: 0; width: 100%; } } .const-services .box:first-child { border: 0; } .const-services .box .over { z-index: 5; background: #2c2c2c; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .const-services .box .frame { width: 100%; height: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: table; vertical-align: middle; } .const-services .box .block { width: 100%; height: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: table-cell; vertical-align: middle; } .const-services .box .text-box { max-height: 0; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .const-services .box .icon { display: block; font-size: 40px; margin: 0 0 23px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .const-services .box .title { display: block; margin: 0 0 10px; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; font: 600 12px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .const-services .box:hover .over { background: rgba(0, 0, 0, 0.6); } .const-services .box:hover .text-box { max-height: 100px; padding: 10px 0 0; } .const-services .slick-arrow { border: 0; color: white; font-size: 25px; padding: 7px 0 0; position: relative; border-radius: 50%; background: #2c2c2c; text-indent: -9999px; margin: 0 50px 32px 0; width: 40px; height: 40px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; vertical-align: top; } .const-services .slick-arrow:after { top: 7px; left: 15px; line-height: 1; text-indent: 0; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .const-services .slick-prev:after { content: "\f104"; } .const-services .slick-next { top: 0; left: 50%; margin: 0 0 0 4px; position: absolute; } .const-services .box-block { padding: 16px 23px 20px 18px; border: 1px solid #ededed; border-top: 0; } .dark .const-services .box-block { border-color: #494949; } .const-services .box-block h3 { color: #222222; margin: 0 0 17px; letter-spacing: 2px; text-transform: uppercase; font: 700 21px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .const-services .box-block h3 { color: white; } .const-services.style2 { padding: 93px 0 100px; } .const-services.style2 .box .fa { font-size: 34px; margin: 0 0 23px; } .const-services.style2 .box:hover .over .fa { color: white; margin: 0 0 8px; } .const-services.style3 .slick-list { border: 0; color: #8f8f8f; text-align: left; } /*------------------------------------------------------------------ 12-5. const partners Styles / .const-partners -------------------------------------------------------------------*/ .const-partners { text-align: center; padding: 95px 0 95px; } .const-partners a { display: inline-block; vertical-align: top; } .const-partners a:hover { opacity: 0.8; } .const-partners.style3 a { opacity: 0.4; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .const-partners.style3 a:hover { opacity: 1; } /*------------------------------------------------------------------ 13-1. realestate page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 13-2. realestate slider Styles / .realestate-slider 13-3. realestate section Styles / .realestate-section 13-4. realestate services Styles / .realestate-services -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 13-2. realestate slider Styles / .realestate-slider -------------------------------------------------------------------*/ .realestate-slider { z-index: 2; color: white; position: relative; font: 14px/24px "Lato", Georgia, "Times New Roman", Times, serif; } .realestate-slider .caption { z-index: 55; height: 839px; position: relative; padding: 354px 0 0; background: rgba(0, 0, 0, 0.5); white-space: nowrap; } .realestate-slider .caption .caption-holder { display: inline-block; white-space: normal; vertical-align: top; } .realestate-slider .caption:before { content: ''; vertical-align: top; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .realestate-slider .caption { height: 900px; padding: 280px 0 0; } } .realestate-slider .caption-holder { width: 100%; } .realestate-slider .holder { max-width: 635px; overflow: hidden; letter-spacing: 0.4px; background: rgba(0, 0, 0, 0.8); padding: 26px 50px 30px 41px; } .realestate-slider h1 { margin: 0 0 11px; position: relative; vertical-align: top; display: inline-block; text-transform: uppercase; font: 500 32px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .realestate-slider h1 .info { top: 3px; right: -62px; position: absolute; background: #2ecc71; padding: 1px 11px 2px 10px; font: 12px/18px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 767px) { .realestate-slider h1 .info { right: -45px; } } .realestate-slider p { margin: 0 0 28px; } .realestate-slider footer { overflow: hidden; margin: 0 -10px 0 0; } .realestate-slider footer .price { float: left; margin: -10px 0 0; font: 900 42px/56px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .realestate-slider footer .price .add { font-size: 21px; font-weight: 400; } .realestate-slider .btn { float: right; border-width: 2px; } .realestate-slider .slick-arrow { left: 0; top: 50%; border: 0; opacity: 0; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: 38px 0 0; line-height: 30px; position: absolute; visibility: hidden; text-indent: -9999px; width: 58px; height: 58px; background: rgba(0, 0, 0, 0.85); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .realestate-slider .slick-arrow:after { top: 0; left: 19px; line-height: 1; text-indent: 0; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .realestate-slider .slick-next { right: 0; left: auto; } .realestate-slider .slick-next:after { content: "\f105"; } .realestate-slider:hover .slick-arrow { opacity: 1; visibility: visible; } .realestate-slider:hover .slick-prev { left: 14px; } .realestate-slider:hover .slick-next { right: 14px; } /*------------------------------------------------------------------ 13-3. realestate section Styles / .realestate-section -------------------------------------------------------------------*/ .realestate-section { z-index: 56; position: relative; } .realestate-section .tabset { float: left; width: 100%; font-size: 14px; line-height: 20px; margin: -45px 0 0; text-transform: uppercase; } .realestate-section .tabset li { float: left; margin: 0; } @media only screen and (max-width: 767px) { .realestate-section .tabset li { float: none; } } .realestate-section .tabset li.active { margin: -8px 0 0; } .realestate-section .tabset li.active a { color: white; padding: 17px 29px; text-decoration: none; } .realestate-section .tabset li:hover { margin: -8px 0 0; } .realestate-section .tabset li:hover a { color: white; padding: 17px 29px; text-decoration: none; } .realestate-section .tabset a { color: #222222; display: block; padding: 13px 29px; border-left: 1px solid #e6e2de; background: rgba(255, 255, 255, 0.9); } .realestate-section .tab-content { float: left; width: 100%; margin: 0 0 51px; } .realestate-section .tab-form { overflow: hidden; padding: 39px 0 38px 40px; } @media only screen and (max-width: 767px) { .realestate-section .tab-form { padding: 30px; } } .realestate-section .search-box { float: left; width: 65.8%; position: relative; background: white; } @media only screen and (max-width: 767px) { .realestate-section .search-box { width: 100%; margin: 0 0 10px; } } .realestate-section .search-box input[type="search"] { margin: 0; border: 0; color: #848484; width: 100%; float: left; height: 50px; outline: none; background: transparent; padding: 10px 65px 10px 20px; font: italic 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .realestate-section .search-box .fa { top: 12px; color: #c5c5c5; right: 20px; font-size: 26px; position: absolute; } .realestate-section .jcf-select { border: 0; float: left; height: 50px; width: 16.9%; min-width: 0; margin: 0 0 0 1.8%; } @media only screen and (max-width: 767px) { .realestate-section .jcf-select { width: 100%; margin: 0 0 10px; } } .realestate-section .jcf-select .jcf-select-opener { background: transparent; } .realestate-section .jcf-select .jcf-select-opener:before { top: 16px; right: 22px; color: #8f8f8f; content: "\f107"; position: absolute; font-family: 'FontAwesome'; } .realestate-section .jcf-select .jcf-select-text { margin: 13px 35px 0 20px; } .realestate-section .btn-submit { color: white; float: left; width: 10%; border-radius: 0; margin: 0 0 0 2%; background: #222222; padding: 14px 5px; } @media only screen and (max-width: 767px) { .realestate-section .btn-submit { width: 100%; } } .realestate-section .btn-submit:hover { opacity: 0.8; } .realestate-section .text-box { color: #8f8f8f; font-size: 18px; font-weight: 300; line-height: 32px; font-style: italic; text-align: center; max-width: 730px; margin: 0 auto 52px; } .realestate-section h2 { color: #222222; margin: 0 0 40px; font: 300 40px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .realestate-section h2 { color: white; } /*------------------------------------------------------------------ 13-4. realestate services Styles / .realestate-services -------------------------------------------------------------------*/ .realestate-services { color: white; font-size: 14px; line-height: 24px; text-align: center; padding: 90px 0 93px; } @media only screen and (max-width: 991px) { .realestate-services { font-size: 12px; line-height: 20px; } } .realestate-services .beans-slider { overflow: visible; } .realestate-services .box { float: left; width: 23.2%; color: #8f8f8f; overflow: hidden; margin: 0 0 0 2.4%; position: relative; font: 500 12px/18px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .realestate-services .box { width: 100%; } } .realestate-services .box:first-child { margin: 0; } .realestate-services .box .over { z-index: 5; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .realestate-services .box .frame { width: 100%; height: 100%; display: table; vertical-align: middle; } .realestate-services .box .block { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } .realestate-services .box h2 { color: #2a2a2a; margin: 0 0 9px; letter-spacing: 2px; text-transform: uppercase; font: 600 14px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .realestate-services .box h2 { color: white; } @media only screen and (max-width: 991px) { .realestate-services .box h2 { font-size: 14px; line-height: 18px; } } .realestate-services .box.active .over, .realestate-services .box:hover .over { opacity: 1; visibility: visible; } .realestate-services .box.active .txt, .realestate-services .box:hover .txt { display: none; } .realestate-services .box.active .txt2, .realestate-services .box:hover .txt2 { display: block; } .realestate-services .box.active .img-box a, .realestate-services .box:hover .img-box a { right: 0; opacity: 1; visibility: visible; } .realestate-services .box.active .img-box a:last-child, .realestate-services .box:hover .img-box a:last-child { left: 0; right: auto; } .realestate-services .img-box { margin: 0 0 11px; overflow: hidden; position: relative; } .realestate-services .img-box a { color: white; opacity: 0; right: -50px; width: 44px; height: 36px; margin: 0 3px; font-size: 21px; padding: 5px 0 0; text-align: center; position: relative; visibility: hidden; vertical-align: top; display: inline-block; border: 1px solid white; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .realestate-services .img-box a:last-child { right: auto; left: -50px; } .realestate-services img { margin: 0 auto; } .realestate-services p { margin: 0; letter-spacing: 2px; text-transform: uppercase; } .realestate-services .text-box { overflow: hidden; text-transform: uppercase; } .realestate-services .txt { min-height: 70px; } .realestate-services .txt2 { display: none; min-height: 70px; } .realestate-services .star-list { font-size: 11px; margin: 0 0 17px; } .realestate-services .star-list li { vertical-align: top; display: inline-block; } .realestate-services .star-list a { color: #cfcfcf; } .realestate-services .star-list a:hover { text-decoration: none; } .realestate-services .sale { color: white; padding: 2px 10px; background: #f39c12; vertical-align: top; display: inline-block; text-transform: uppercase; font: 12px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .realestate-services .price { display: block; font: 700 21px/30px "Lato", Georgia, "Times New Roman", Times, serif; } .realestate-services .price .add { font-size: 16px; font-weight: 900; } .realestate-services .price .p-text { color: #8f8f8f; font-size: 14px; font-weight: 400; line-height: 25px; } .realestate-services .slick-arrow { padding: 0; margin: 0; border: 0; right: 2px; top: -75px; z-index: 9999; font-size: 20px; color: #dddddd; position: absolute; border-radius: 50%; text-indent: -9999px; width: 28px; height: 28px; background: #f8f8f8; border: 1px solid #dedede; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .realestate-services .slick-arrow { color: white; background: #191919; border-color: #494949; } .realestate-services .slick-arrow:after { top: 2px; left: 10px; line-height: 1; text-indent: 0; content: "\f105"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .realestate-services .slick-prev { right: 36px; } .realestate-services .slick-prev:after { content: "\f104"; } .realestate-services .tab-content { overflow: visible; } .realestate-services.style2 .img-box { margin: 0 0 14px; } .realestate-services.style2 .txt2, .realestate-services.style2 .txt { min-height: 31px; } .realestate-services.style2 .price { font-size: 25px; } .realestate-services.style2 .box h2 { margin: 0; font-size: 15px; text-transform: lowercase; text-transform: capitalize; } .realestate-services.style2 .beans-slider { padding: 50px 0 0; } .realestate-services.style2 .slick-arrow { right: 50%; margin: 0 -20px 0 0; background: #222222; border-color: #222222; } .realestate-services.style2 .slick-prev { margin: 0 20px 0 0; } /*------------------------------------------------------------------ 14-1. travel page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 14-2. travel slider Styles / .travel-slider 14-3. travel section Styles / .travel-section -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 14-2. travel slider Styles / .travel-slider -------------------------------------------------------------------*/ .travel-slider .caption { width: 100%; color: white; text-align: center; position: relative; white-space: nowrap; font: 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .travel-slider .caption .holder { display: inline-block; white-space: normal; vertical-align: middle; } .travel-slider .caption:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .travel-slider .caption { font-size: 14px; line-height: 16px; min-height: 600px; } } .travel-slider .caption .holder { z-index: 5; padding: 0 0 9px; position: relative; } @media only screen and (max-width: 767px) { .travel-slider .caption .holder { padding: 80px 0 0; } } .travel-slider p { margin: 0 0 40px; } @media only screen and (max-width: 767px) { .travel-slider p { margin: 0 0 20px; } } .travel-slider .heading2 { margin: 0 0 27px; letter-spacing: 0.4px; text-transform: uppercase; font: 700 60px/65px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .travel-slider .heading2 { font-size: 25px; line-height: 30px; } } .travel-slider .title2 { display: block; margin: 0 0 41px; text-transform: capitalize; font: 24px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 991px) { .travel-slider .title2 { font-size: 18px; } } @media only screen and (max-width: 767px) { .travel-slider .title2 { font-size: 16px; line-height: 20px; } } .travel-slider .btn { margin: 0 3px 10px; } .travel-slider .slick-arrow { left: 0; top: 50%; margin: 0; border: 0; padding: 0; opacity: 0; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: -23px 0 0; line-height: 30px; position: absolute; visibility: hidden; text-indent: -9999px; width: 58px; height: 58px; background: rgba(0, 0, 0, 0.85); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .travel-slider .slick-arrow { top: auto; margin: 0; bottom: 40px; } } .travel-slider .slick-arrow:after { top: 0; left: 15px; line-height: 1; text-indent: 0; font-size: 60px; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .travel-slider .slick-next { right: 0; left: auto; } .travel-slider .slick-next:after { content: "\f105"; } .travel-slider .caption > .holder { transition: all 2.5s ease; position: relative; bottom: -50px; opacity: 0; } .travel-slider .slick-active .caption > .holder { transition: all 1s ease 1s; opacity: 1; bottom: 0; } .travel-slider:hover .slick-arrow { opacity: 1; visibility: visible; } .travel-slider:hover .slick-prev { left: 14px; } .travel-slider:hover .slick-next { right: 14px; } /*------------------------------------------------------------------ 14-3. travel section Styles / .travel-section -------------------------------------------------------------------*/ .travel-section { z-index: 56; position: relative; } .travel-section .tabset { float: left; width: 100%; font-size: 0; margin: -46px 0 0; text-align: center; letter-spacing: -4px; text-transform: uppercase; } .travel-section .tabset li { margin: 0; float: left; font-size: 14px; line-height: 20px; letter-spacing: 0; } @media only screen and (max-width: 550px) { .travel-section .tabset li { display: block; } } .travel-section .tabset li:hover a, .travel-section .tabset li.active a { color: white; text-decoration: none; background: rgba(26, 26, 26, 0.9); border-left-color: rgba(26, 26, 26, 0.9); } @media only screen and (max-width: 550px) { .travel-section .tabset li:hover a, .travel-section .tabset li.active a { border-color: rgba(26, 26, 26, 0.9); } } .travel-section .tabset a { color: #222222; display: block; padding: 13px 29px; background: rgba(255, 255, 255, 0.6); border-left: 1px solid rgba(255, 255, 255, 0.6); } .travel-section .tab-content { float: left; width: 100%; margin: 0 0 51px; background: #1a1a1a; } .travel-section .tab-form { overflow: hidden; padding: 39px 0 38px 40px; } @media only screen and (max-width: 1219px) { .travel-section .tab-form { padding: 39px 0 38px 20px; } } @media only screen and (max-width: 767px) { .travel-section .tab-form { padding: 30px; } } .travel-section .box { float: left; width: 27.3%; margin: 0 0 0 30px; position: relative; } @media only screen and (max-width: 991px) { .travel-section .box { width: 43%; } } @media only screen and (max-width: 767px) { .travel-section .box { width: 100%; margin: 0 0 10px; } } .travel-section .box input[type="search"] { margin: 0; border: 0; width: 100%; float: left; height: 50px; outline: none; color: #848484; background: white; padding: 10px 65px 10px 20px; font: italic 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .travel-section .box .fa { top: 18px; right: 22px; color: #c5c5c5; font-size: 16px; position: absolute; } .travel-section .box:first-child { margin: 0; } @media only screen and (max-width: 767px) { .travel-section .box:first-child { margin: 0 0 10px; } } .travel-section .box.add { width: 30%; } @media only screen and (max-width: 991px) { .travel-section .box.add { width: 50%; } } @media only screen and (max-width: 767px) { .travel-section .box.add { width: 100%; } } .travel-section .box.add .jcf-select .jcf-select-opener:before { top: 11px; right: 15px; font-size: 20px; content: "\f073"; } @media only screen and (max-width: 991px) { .travel-section .box.add2 { margin: 0; width: 70%; } } @media only screen and (max-width: 767px) { .travel-section .box.add2 { width: 100%; } } .travel-section .box .form-title { color: white; display: block; margin: 0 0 5px; font-size: 16px; } .travel-section .box label { color: white; display: block; font-size: 12px; margin: 0 0 15px; } .travel-section .box .block { overflow: hidden; position: relative; background: white; } .travel-section .jcf-select { border: 0; float: left; width: 100%; height: 50px; min-width: 0; } .travel-section .jcf-select .jcf-select-opener { background: transparent; } .travel-section .jcf-select .jcf-select-opener:before { top: 16px; right: 22px; color: #8f8f8f; content: "\f107"; position: absolute; font-family: 'FontAwesome'; } .travel-section .jcf-select .jcf-select-text { margin: 13px 35px 0 20px; } .travel-section .btn-submit { float: left; width: 4.8%; color: white; border-radius: 0; padding: 14px 5px; margin: 60px 0 0 1.8%; } @media only screen and (max-width: 991px) { .travel-section .btn-submit { width: 22.8%; margin: 60px 0 0 30px; } } @media only screen and (max-width: 767px) { .travel-section .btn-submit { width: 100%; margin: 0 0 10px; } } .travel-section .btn-submit:hover { opacity: 0.8; } .travel-section .text-box { color: #8f8f8f; font-size: 18px; font-weight: 300; line-height: 32px; font-style: italic; text-align: center; max-width: 730px; margin: 0 auto 52px; } .travel-section h2 { color: #222222; margin: 0 0 40px; font: 300 40px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } /*------------------------------------------------------------------ 15-1. yoga page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 15-2. youga slider Styles / .youga-slider 15-3. events mainbanner Styles / .events-mainbanner 15-4. events icons Styles / .events-icons 15-5. bakery textbox Styles / .bakery-textbox 15-6. bakery dishs Styles / .bakery-dishs -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 15-2. youga slider Styles / .youga-slider -------------------------------------------------------------------*/ .youga-slider { color: white; font: 300 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .youga-slider .caption { z-index: 55; height: 787px; position: relative; padding: 120px 0 20px; background: rgba(0, 0, 0, 0.5); white-space: nowrap; } .youga-slider .caption .caption-holder { display: inline-block; white-space: normal; vertical-align: middle; } .youga-slider .caption:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .youga-slider .caption-holder { width: 100%; } .youga-slider h1 { top: -50px; opacity: 0; margin: 0 0 25px; position: relative; text-transform: uppercase; transition: all 2.5s ease; font: 700 40px/56px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .youga-slider h1 { font-size: 20px; line-height: 25px; } } .youga-slider .slick-dots { bottom: 10px; text-align: center; } .youga-slider .slick-dots li { display: inline-block; vertical-align: top; margin: 0 3px; } .youga-slider .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .youga-slider .slick-active .caption h1 { transition: all 1s ease 1s; opacity: 1; top: 0; } .youga-slider .caption p { transition: all 2.5s ease; position: relative; margin: 0 0 34px; left: -50px; opacity: 0; } .youga-slider .slick-active .caption p { transition: all 1s ease 1s; opacity: 1; left: 0; } .youga-slider .caption .btn { transition: all 2.5s ease; margin: 0 10px 10px 0; position: relative; bottom: -50px; opacity: 0; } .youga-slider .slick-active .caption .btn { transition: all 1s ease 1s; opacity: 1; bottom: 0; } /*------------------------------------------------------------------ 15-3. events mainbanner Styles / .events-mainbanner -------------------------------------------------------------------*/ .events-mainbanner { color: white; padding: 286px 0 297px; } @media only screen and (max-width: 767px) { .events-mainbanner { padding: 150px 0; } } .events-mainbanner .container { z-index: 99; position: relative; text-align: center; } .events-mainbanner .heading { margin: 0; font-size: 52px; font-weight: 700; line-height: 1.4; letter-spacing: 5px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .events-mainbanner .heading { font-size: 30px; } } .events-mainbanner .subtitle { padding: 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; vertical-align: top; margin: 0 0 51px 4px; display: inline-block; letter-spacing: 4.8px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .events-mainbanner .subtitle { font-size: 12px; letter-spacing: 2px; } } .events-mainbanner .wedding-nav { color: white; margin: 0 0 50px; text-transform: uppercase; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .events-mainbanner .wedding-nav .countdown-section { padding: 0; width: 141px; margin: 0 7px; height: 150px; border-radius: 0; background: transparent; } @media only screen and (max-width: 767px) { .events-mainbanner .wedding-nav .countdown-section { width: 100px; } } .events-mainbanner .wedding-nav .countdown-section .countdown-amount { font: 600 68px/70px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0 0 42px; position: relative; z-index: 1; } .events-mainbanner .wedding-nav .countdown-section .countdown-amount:before { top: auto; z-index: -1; bottom: 19px; left: 50%; right: auto; background: rgba(255, 255, 255, 0.2); } .events-mainbanner .wedding-nav .countdown-section .countdown-amount:before { z-index: 1; width: 50px; height: 2px; margin: 0 0 0 -24px; } .events-mainbanner .text { display: block; max-width: 754px; margin: 0 auto 55px; letter-spacing: 1.2px; text-transform: uppercase; font: 300 20px/28px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .events-mainbanner .stretch { text-align: center; position: relative; z-index: 1; position: absolute; } .events-mainbanner .stretch:before { top: 0; z-index: -1; bottom: 0; left: -9999px; right: -9999px; background: rgba(0, 0, 0, 0.8); } .events-mainbanner .stretch:before { z-index: 9; display: block; } /*------------------------------------------------------------------ 15-4. events icons Styles / .events-icons -------------------------------------------------------------------*/ .events-icons { color: white; line-height: 1; font-size: 25px; padding: 0 0 28px; background: #222222; text-align: center; } @media only screen and (max-width: 767px) { .events-icons { padding: 20px 0; margin: 0 0 30px; } } .dark .events-icons { background: #191919; } .events-icons .icon { z-index: 99; display: block; font-size: 28px; padding: 32px 0 0; position: relative; text-align: center; border-radius: 50%; width: 98px; height: 98px; margin: -52px auto 20px; } @media only screen and (max-width: 767px) { .events-icons .icon { margin: 0 auto 20px; } } .events-icons .text { display: block; } .banner-bar { color: white; padding: 53px 0 40px; font: 300 18px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .banner-bar .btn { float: right; margin: 10px 0 0 50px; } /*------------------------------------------------------------------ 15-5. bakery textbox Styles / .bakery-textbox -------------------------------------------------------------------*/ .bakery-textbox { text-align: center; letter-spacing: 1px; font: 300 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .bakery-textbox img { margin: 0 auto 20px; } } .bakery-textbox p { margin: 0 0 54px; } @media only screen and (max-width: 767px) { .bakery-textbox p { margin: 0 0 40px; } } .bakery-textbox h2 { color: #222222; margin: 0 0 34px; font: 70px/80px "Great Vibes", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .bakery-textbox h2 { font-size: 45px; line-height: 60px; } } .bakery-textbox h2 .add-color { display: block; } .dark .bakery-textbox h2 { color: white; } /*------------------------------------------------------------------ 15-6. bakery dishs Styles / .bakery-dishs -------------------------------------------------------------------*/ .bakery-dishs { text-align: center; font: 300 14px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .bakery-dishs p { margin: 0; } .bakery-dishs h2 { color: #222222; margin: 0 0 35px; font: 24px/30px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .bakery-dishs h2 { margin: 0 0 25px; } } .dark .bakery-dishs h2 { color: white; } .bakery-dishs img { margin: 0 auto 40px; } @media only screen and (max-width: 767px) { .bakery-dishs img { margin: 0 auto 20px; } } /*------------------------------------------------------------------ 16-1. blog page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 16-2. blogs block Styles / .blogs-block 16-3. blog alignleft Styles / .blog-alignleft 16-4. blog content Styles / .blog-content 16-5. blog over Styles / .blog-over -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 16-2. blogs block Styles / .blogs-block -------------------------------------------------------------------*/ .blogs-block { overflow: hidden; position: relative; } .blogs-block .blogs-frame { padding-top: 100%; } /*------------------------------------------------------------------ 16-3. blog alignleft Styles / .blog-alignleft -------------------------------------------------------------------*/ .blog-alignleft { float: left; width: 40.4%; } @media only screen and (max-width: 1905px) { .blog-alignleft { width: 100%; } } .blog-alignleft .img-box { position: relative; overflow: hidden; } .blog-alignleft .img-box .blogs-frame { padding-top: 39.8%; } @media only screen and (max-width: 1905px) { .blog-alignleft .img-box .blogs-frame { padding-top: 25%; } } @media only screen and (max-width: 767px) { .blog-alignleft .img-box .blogs-frame { padding-top: 100%; } } .blog-alignleft .beans-slider .beans-slide .blogs-frame { padding-top: 79.7%; } @media only screen and (max-width: 1905px) { .blog-alignleft .beans-slider .beans-slide .blogs-frame { padding-top: 40%; } } @media only screen and (max-width: 767px) { .blog-alignleft .beans-slider .beans-slide .blogs-frame { padding-top: 100%; } } .blog-alignleft .beans-slider .slick-dots { margin: 0; top: 45px; left: auto; right: 34px; } .blog-alignleft .beans-slider .slick-dots li { padding: 0 0 8px; } .blog-alignleft .beans-slider .slick-dots li.slick-active button { background: white; } .blog-alignleft .beans-slider .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .blog-alignleft .beans-slider .slick-dots li button:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 16-4. blog content Styles / .blog-content -------------------------------------------------------------------*/ .blog-content { float: left; width: 59.6%; } @media only screen and (max-width: 1905px) { .blog-content { width: 100%; } } .blog-content .towcolumns { overflow: hidden; } .blog-content .towcolumns .img-box { float: left; width: 33.9%; } @media only screen and (max-width: 1905px) { .blog-content .towcolumns .img-box { width: 100%; } } .blog-content .towcolumns .img-box .blogs-frame { padding-top: 79.4%; } @media only screen and (max-width: 1905px) { .blog-content .towcolumns .img-box .blogs-frame { padding-top: 30%; } } @media only screen and (max-width: 767px) { .blog-content .towcolumns .img-box .blogs-frame { padding-top: 100%; } } .blog-content .towcolumns .img-box.road { width: 66.1%; } @media only screen and (max-width: 1905px) { .blog-content .towcolumns .img-box.road { width: 100%; } } .blog-content .towcolumns .img-box.road .blogs-frame { padding-top: 40.7%; } @media only screen and (max-width: 767px) { .blog-content .towcolumns .img-box.road .blogs-frame { padding-top: 100%; } } .blog-content .img-box { position: relative; overflow: hidden; } .blog-content .other-blogs { overflow: hidden; } .blog-content .alignleft { position: relative; float: left; width: 33.9%; } @media only screen and (max-width: 1140px) { .blog-content .alignleft { width: 100%; } } .blog-content .alignleft .blogs-frame { padding-top: 159.6%; } @media only screen and (max-width: 1140px) { .blog-content .alignleft .blogs-frame { padding-top: 30%; } } @media only screen and (max-width: 767px) { .blog-content .alignleft .blogs-frame { padding-top: 100%; } } .blog-content .blogs-box2 { float: left; width: 66.1%; } @media only screen and (max-width: 1140px) { .blog-content .blogs-box2 { width: 100%; } } .blog-content .blogs-box2 .img-box { float: left; width: 50%; } @media only screen and (max-width: 767px) { .blog-content .blogs-box2 .img-box { width: 100%; } } .blog-content .blogs-box2 .blogs-frame { padding-top: 81.9%; } @media only screen and (max-width: 767px) { .blog-content .blogs-box2 .blogs-frame { padding-top: 100%; } } .blog-content .blogs-box2 .blog-nav li { padding: 0 32px 0 0; } /*------------------------------------------------------------------ 16-5. blog over Styles / .blog-over -------------------------------------------------------------------*/ .blog-over { top: auto; padding: 10px 5px 16px 18px; } @media only screen and (max-width: 767px) { .blog-over { padding: 10px 5px 16px 10px; } } .blog-over .blog-date { float: left; color: white; border: 3px solid white; width: 74px; height: 74px; text-align: center; font-size: 14px; line-height: 18px; margin: 0 14px 5px 0; padding: 11px 5px 3px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .blog-over .blog-date { margin: 0 8px 5px 0; } } .blog-over .blog-date .number { margin: 0 0 2px; display: block; font-size: 21px; line-height: 24px; font-weight: 700; } .blog-over .blog-txt { overflow: hidden; } .blog-over h2 { color: white; margin: -4px 0 14px 2px; font: 24px/28px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .blog-over h2 { font-size: 20px; line-height: 28px; } } .blog-over h2 a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-over h2 a:hover { text-decoration: none; } .blog-over .box { overflow: hidden; } @media only screen and (max-width: 767px) { .blog-over .box { margin: 0 -10px 0 0; } } .blog-over .author-info { float: left; color: white; max-width: 170px; font-size: 14px; line-height: 17px; margin: 0 40px 0 0; } @media only screen and (max-width: 767px) { .blog-over .author-info { margin: 0 10px 0 0; } } .blog-over .author-info .author-img { display: inline-block; vertical-align: middle; border-radius: 50%; overflow: hidden; margin: 0 16px 0 0; width: 32px; height: 32px; } @media only screen and (max-width: 767px) { .blog-over .author-info .author-img { margin: 0 10px 0 0; } } .blog-over .author-info .txt { display: inline-block; vertical-align: middle; } .blog-over .author-info .txt a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-over .author-info .txt a:hover { text-decoration: none; } .blog-over .blog-nav { margin: 8px 0 0; float: left; font-size: 14px; line-height: 17px; } @media only screen and (max-width: 767px) { .blog-over .blog-nav { display: none; } } .blog-over .blog-nav li { padding: 0 36px 0 0; } .blog-over .blog-nav li a { color: white; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-over .blog-nav li a:hover { text-decoration: none; } .blog-over .blog-nav li a .fa { position: absolute; top: 4px; left: -20px; font-size: 14px; line-height: 10px; } .blog-over.add { padding: 10px 10px 16px 18px; } @media only screen and (max-width: 767px) { .blog-over.add { padding: 10px 5px 16px 10px; } } .blog-over.add h2 { margin: -4px 0 19px 2px; font-size: 18px; line-height: 22px; } .blog-over.add .blog-date { margin: 0 14px 3px 0; } @media only screen and (max-width: 767px) { .blog-over.add .blog-date { margin: 0 8px 3px 0; } } .blog-over.add .blog-nav li { padding: 0 33px 0 0; } .blog-button { text-align: center; padding-top: 58px; padding-bottom: 60px; } /*------------------------------------------------------------------ 17-1. portfolio page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 17-2. port slider Styles / .port-slider 17-3. portfolio footer Styles / .portfolio-footer 17-4. port single Styles / .port-single 17-5. port aside Styles / .port-aside 17-6. w9 Styles / .w9 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 17-2. port slider Styles / .port-slider -------------------------------------------------------------------*/ .port-slider .slick-dots li { padding: 0 4px; display: inline-block; vertical-align: top; } .port-slider .slick-dots li.slick-active button { background: black; } .port-slider .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 15px; height: 15px; border: 2px solid black; } .port-slider .slick-dots li button:hover { background: black; text-decoration: none; } /*------------------------------------------------------------------ 17-3. portfolio footer Styles / .portfolio-footer -------------------------------------------------------------------*/ .portfolio-footer { color: #2a2a2a; font-size: 21px; line-height: 25px; font-weight: 300; font-style: italic; } .dark .portfolio-footer { color: white; } .portfolio-footer a { color: #2a2a2a; } .dark .portfolio-footer a { color: white; } .portfolio-footer .new-txt { float: left; margin: 3px 0 0; max-width: 800px; } .portfolio-footer.style2 { color: white; } .portfolio-footer.style2 .btn { color: white; } .portfolio-footer.style2 .btn:hover { border-color: white; background: transparent; } /*------------------------------------------------------------------ 17-4. port single Styles / .port-single -------------------------------------------------------------------*/ .port-single { color: #8f8f8f; font-size: 14px; margin: 0 0 25px; line-height: 28px; } .port-single .next, .port-single .prev, .port-single .dashboard { font-size: 20px; line-height: 50px; color: #dddddd; margin: 0 2px 51px; vertical-align: top; width: 50px; height: 50px; display: inline-block; border: 1px solid #dddddd; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .port-single .next, .dark .port-single .prev, .dark .port-single .dashboard { color: #494949; border-color: #494949; } .port-single .next:hover, .port-single .prev:hover, .port-single .dashboard:hover { color: #2a2a2a; border-color: #2a2a2a; text-decoration: none; } .dark .port-single .next:hover, .dark .port-single .prev:hover, .dark .port-single .dashboard:hover { color: white; border-color: white; } .port-single .dashboard { font-size: 21px; } .port-single h2 { color: #2a2a2a; margin: 0 0 17px; text-transform: uppercase; font: 700 32px/35px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .port-single h2 { color: white; } .port-single h3 { color: #000101; margin: 0 0 17px; text-transform: uppercase; font: 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .port-single h3 { color: white; } .port-single .beans-slide { height: 440px; position: relative; } .port-single p { margin: 0 0 50px; } .port-single .video-area, .port-single .beans-slider { margin: 0 0 57px; } .port-single .slick-arrow { top: 50%; left: 15px; z-index: 5; color: #919191; font-size: 20px; overflow: hidden; margin: -20px 0 0; line-height: 40px; position: absolute; border-radius: 50%; text-indent: -9999px; width: 40px; height: 40px; border: 1px solid #919191; } .port-single .slick-arrow:after { top: 7px; left: 13px; line-height: 1; text-indent: 0; content: "\f104"; overflow: hidden; position: absolute; font-family: 'FontAwesome'; } .port-single .slick-arrow:hover { color: #2a2a2a; text-decoration: none; border-color: #2a2a2a; } .dark .port-single .slick-arrow:hover { color: white; } .port-single .slick-next { left: auto; right: 15px; } .port-single .slick-next:after { content: "\f105"; } .port-single ul { padding: 0; margin: 0 0 29px; list-style: none; } .port-single ul li { margin: 0 0 2px; } .port-single ul .fa { color: #2a2a2a; margin: 0 5px 0 0; } .dark .port-single ul .fa { color: white; } .port-single ul strong { color: #2a2a2a; } .dark .port-single ul strong { color: white; } .port-single ul a { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .port-single ul a:hover { color: #2a2a2a; text-decoration: none; } .dark .port-single ul a:hover { color: white; } .port-single footer { overflow: hidden; } .port-single .social-network { margin: 0; float: right; font-size: 18px; line-height: 38px; text-align: center; } .port-single .social-network li { margin: 0; vertical-align: top; display: inline-block; } .port-single .social-network a { color: #2a2a2a; display: block; border-radius: 50%; width: 38px; height: 38px; background: #f8f8f8; } .dark .port-single .social-network a { color: white; background: #191919; } .port-single .social-network a:hover .fa { color: white; } .port-single .social-network .fa { margin: 0; } .port-single blockquote { margin: 0; border: 0; color: #2a2a2a; background: #f3f3f3; padding: 34px 30px 24px 28px; } .dark .port-single blockquote { color: white; background: #191919; } @media only screen and (max-width: 767px) { .port-single blockquote { padding: 20px; } } .port-single blockquote q { quotes: none; display: block; text-indent: 20px; position: relative; font: 300 italic 24px/31px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .port-single blockquote q { font-size: 18px; line-height: 25px; } } .port-single blockquote q:after { top: -10px; left: -16px; content: '"'; color: #2a2a2a; font-size: 46px; font-weight: 900; position: absolute; } .dark .port-single blockquote q:after { color: white; } .port-single .btn-f-info:hover { color: black; border-color: black; } /*------------------------------------------------------------------ 17-5. port aside Styles / .port-aside -------------------------------------------------------------------*/ .port-aside .btn:hover { color: #2a2a2a; border-color: #2a2a2a; background: transparent; } .dark .port-aside .btn:hover { color: white; border-color: white; } .port-aside .work-slider .slick-dots { bottom: -60px; } .port-aside .work-slider .slick-dots li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .port-aside .work-slider .slick-dots li.slick-active button { background: #2a2a2a; border-color: #2a2a2a; } .port-aside .work-slider .slick-dots button { margin: 0; border: 0; padding: 0; display: block; background: none; overflow: hidden; border-radius: 50%; text-indent: -9999px; width: 14px; height: 14px; border: 2px solid #dedede; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .port-aside .work-slider .slick-dots button:hover { background: #2a2a2a; border-color: #2a2a2a; text-decoration: none; } /*------------------------------------------------------------------ 17-6. w9 Styles / .w9 -------------------------------------------------------------------*/ .w9 { overflow: hidden; position: relative; padding: 0 0 0 60px; -webkit-transition: margin 0.4s ease; -moz-transition: margin 0.4s ease; -o-transition: margin 0.4s ease; transition: margin 0.4s ease; } @media only screen and (max-width: 767px) { .w9 { padding: 0; } } .work-section .beans-slider.coll-2.pull-left .slick-dots { bottom: 24px; } .work-section .beans-slider.coll-2.pull-left .slick-dots li { padding: 0 4px; float: none; display: inline-block; vertical-align: top; } .work-section .beans-slider.coll-2.pull-left .slick-dots li.slick-active button { background: white; } .work-section .beans-slider.coll-2.pull-left .slick-dots li button { margin: 0; border: 0; padding: 0; display: block; background: none; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .work-section .beans-slider.coll-2.pull-left .slick-dots li button:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 18-1. app landing page page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 18-2. app banner Styles / .app-banner 18-3. app mainbanner Styles / .app-mainbanner 18-4. about app Styles / .about-app 18-5. get app Styles / .get-app 18-6. appsub section Styles / .appsub-section 18-7. appshowcase banner Styles / .appshowcase-banner -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 18-2. app banner Styles / .app-banner -------------------------------------------------------------------*/ .app-banner .container { z-index: 99; position: relative; text-align: center; } .app-banner .title { color: white; display: block; max-width: 570px; margin: 0 auto 44px; font: 300 60px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .app-banner .title { font-size: 35px; line-height: 40px; } } .app-banner .btn-holder { overflow: hidden; margin: 0 0 158px; padding: 0 16px 0 0; } @media only screen and (max-width: 767px) { .app-banner .btn-holder { padding: 0; margin: 0 0 58px; } } .app-banner .holder { padding-top: 226px; } .app-banner .btn { margin: 0 4px 10px; } @media only screen and (max-width: 767px) { .app-banner .btn { margin: 0 0 10px; } } .app-banner img { margin: 0 auto; } /*------------------------------------------------------------------ 18-3. app mainbanner Styles / .app-mainbanner -------------------------------------------------------------------*/ .app-mainbanner { color: white; text-align: center; font: 300 24px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .app-mainbanner .holder { padding-top: 230px; } .app-mainbanner .stretch { text-align: center; position: relative; z-index: 1; position: absolute; } .app-mainbanner .stretch:before { top: 0; z-index: -1; bottom: 0; left: -9999px; right: -9999px; background: rgba(0, 0, 0, 0.8); } .app-mainbanner .stretch:before { z-index: 9; display: block; } .app-mainbanner .container { z-index: 9; position: relative; } .app-mainbanner h1 { margin: 0 0 18px; font: 300 50px/60px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .app-mainbanner h1 .add { font-weight: 500; } .app-mainbanner p { margin: 0 0 18px; } .app-mainbanner .signup-form { overflow: hidden; margin: 0 0 136px; } .app-mainbanner input[type="email"], .app-mainbanner input[type="password"], .app-mainbanner input[type="text"] { border: 0; float: left; width: 23.2%; height: 42px; outline: none; color: #848484; background: white; margin: 0 0 31px 2.4%; padding: 10px 20px 10px 20px; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } @media only screen and (max-width: 991px) { .app-mainbanner input[type="email"], .app-mainbanner input[type="password"], .app-mainbanner input[type="text"] { font-size: 14px; } } @media only screen and (max-width: 767px) { .app-mainbanner input[type="email"], .app-mainbanner input[type="password"], .app-mainbanner input[type="text"] { width: 100%; margin: 0 0 20px; } } .app-mainbanner input[type="email"]:first-child, .app-mainbanner input[type="password"]:first-child, .app-mainbanner input[type="text"]:first-child { margin: 0 0 31px; } .app-mainbanner .frame { overflow: hidden; } .app-mainbanner p { margin: 0 0 55px; } .app-mainbanner .btn { color: white; } .app-mainbanner .btn:hover { background: #222222; } /*------------------------------------------------------------------ 18-4. about app Styles / .about-app -------------------------------------------------------------------*/ .about-app { font-size: 18px; line-height: 30px; font-style: italic; } @media only screen and (max-width: 767px) { .about-app { padding: 50px 0 0; } } .about-app .ico { padding: 21px 0 0; } .about-app .box { max-width: 770px; overflow: hidden; text-align: center; margin: 0 auto 81px; } .about-app img { margin: 0 auto -60px; } /*------------------------------------------------------------------ 18-5. get app Styles / .get-app -------------------------------------------------------------------*/ .get-app { z-index: 5; color: white; overflow: hidden; text-align: center; position: relative; padding: 126px 0 143px; font: 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; } .get-app:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .get-app:before { background: rgba(0, 0, 0, 0.5); } .get-app .parallax-holder { z-index: -1; } .get-app .heading { display: block; font-size: 48px; margin: 0 0 10px; line-height: 80px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .get-app .heading { font-size: 28px; line-height: 50px; } } .get-app p { margin: 0 0 61px; } .get-app .platform { font-size: 34px; } .get-app .platform li { padding: 0 15px; } .get-app .platform a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .get-app .platform a:hover { text-decoration: none; } /*------------------------------------------------------------------ 18-6. appsub section Styles / .appsub-section -------------------------------------------------------------------*/ .appsub-section { padding: 100px 0 100px; } .appsub-section .app-subform { margin: 0 auto; font-size: 18px; max-width: 810px; line-height: 30px; text-align: center; font-style: italic; } .appsub-section p { margin: 0 0 57px; } .appsub-section #mc_embed_signup { overflow: hidden; background: transparent; } .appsub-section #mc_embed_signup form { padding: 0; overflow: hidden; } .appsub-section #mc_embed_signup_scroll { float: left; width: 100%; border: 1px solid #dddddd; } .dark .appsub-section #mc_embed_signup_scroll { border-color: #494949; } .appsub-section .input-box { margin: 0 auto; max-width: 570px; overflow: hidden; position: relative; } .appsub-section .input-box .clear { float: right; } @media only screen and (max-width: 767px) { .appsub-section .input-box .clear { float: none; } } .appsub-section .input-box #mc_embed_signup input.button { border: 0; height: 48px; float: right; width: 152px; float: right; min-width: 0; color: white; border-radius: 0 !important; font-size: 14px; font-weight: 400; font-style: normal; padding: 1px 5px 0; text-align: center; margin: -1px -1px -1px 0; text-transform: uppercase; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 767px) { .appsub-section .input-box #mc_embed_signup input.button { width: 100%; margin: 0; } } .appsub-section .input-box #mc_embed_signup input.button:hover { background: #3a3a3a; } .appsub-section .input-box #mc_embed_signup input.email { margin: 0; border: 0 !important; width: 73%; float: left; height: 46px; outline: none; font-size: 14px; font-weight: 400; line-height: 20px; padding: 6px 20px; font-style: normal; background: transparent; } @media only screen and (max-width: 767px) { .appsub-section .input-box #mc_embed_signup input.email { width: 100%; } } .appsub-section.style2 { padding: 95px 0; } .appsub-section.style2 p { margin: 0 0 37px; } .appsub-section.style2 .app-subform { font: 300 16px/26px "Lato", Georgia, "Times New Roman", Times, serif; } .appsub-section.style2 .input-box #mc_embed_signup input.button { background: #e84c3d; } .appsub-section.style2 .input-box #mc_embed_signup input.button:hover { background: #3a3a3a; } .appsub-section.style3 { padding: 95px 0; } .appsub-section.style3 p { margin: 0 0 37px; } .appsub-section.style3 .app-subform { font: 300 16px/26px "Lato", Georgia, "Times New Roman", Times, serif; } /*------------------------------------------------------------------ 18-7. appshowcase banner Styles / .appshowcase-banner -------------------------------------------------------------------*/ .appshowcase-banner .container { z-index: 99; position: relative; position: relative; z-index: 1; } .appshowcase-banner .container:before { top: 0; z-index: -1; bottom: 0; left: -9999px; right: -9999px; background: rgba(0, 0, 0, 0.8); } .appshowcase-banner .container:before { display: block; } .appshowcase-banner .title { color: white; display: block; margin: 0 0 27px; font: 300 60px/80px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .appshowcase-banner .title { font-size: 35px; line-height: 40px; } } .appshowcase-banner .btn-holder { overflow: hidden; margin: 0 0 35px; } .appshowcase-banner .frame { padding: 249px 70px 146px 497px; } @media only screen and (max-width: 991px) { .appshowcase-banner .frame { padding: 249px 10px 146px 377px; } } @media only screen and (max-width: 767px) { .appshowcase-banner .frame { padding: 200px 10px 400px; } } .appshowcase-banner .btn { margin: 0 4px 5px; } .appshowcase-banner .img { bottom: 0; left: 18px; position: absolute; } @media only screen and (max-width: 991px) { .appshowcase-banner .img { left: -80px; } } .appshowcase-banner .platform { font-size: 24px; } .appshowcase-banner .platform li { padding: 0 26px 0 15px; } .appshowcase-banner .platform a { color: white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .appshowcase-banner .platform a:hover { text-decoration: none; } /*------------------------------------------------------------------ 19-1. one-page page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 19-2. onepage banner Styles / .onepage-banner 19-3. about aricle Styles / .about-aricle 19-4. tabset onepage Styles / .tabset-onepage 19-5. tab content Styles / .tab-content 19-6. process nav Styles / .process-nav 19-7. onepage clientbox Styles / .onepage-clientbox 19-8. onepage-blockquote Styles / .onepage-blockquote 19-9. onepage blog Styles / .onepage-blog 19-10. onepage demo Styles / .onepage-demo 19-11. map Styles / .map -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 19-2. onepage banner Styles / .onepage-banner -------------------------------------------------------------------*/ .onepage-banner { overflow: hidden; position: relative; } .onepage-banner .holder { z-index: 999; position: relative; white-space: nowrap; } .onepage-banner .holder .frame { display: inline-block; white-space: normal; vertical-align: middle; } .onepage-banner .holder:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } @media only screen and (max-width: 767px) { .onepage-banner .holder { min-height: 500px; height: auto !important; } } .onepage-banner .title { display: block; margin: 0 0 31px; font: 600 26px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 767px) { .onepage-banner .title { font-size: 20px; line-height: 25px; } } .onepage-banner .frame { margin: 0; width: 100%; color: white; font-size: 18px; line-height: 30px; text-align: center; padding: 45px 0 20px; } @media only screen and (max-width: 767px) { .onepage-banner .frame { font-size: 12px; line-height: 20px; padding: 140px 0 100px; } } .onepage-banner .frame h1 { margin: 0 0 24px; padding: 20px 28px; border: 5px solid white; text-transform: uppercase; display: inline-block; vertical-align: top; font: 700 60px/64px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media only screen and (max-width: 991px) { .onepage-banner .frame h1 { font-size: 50px; } } @media only screen and (max-width: 767px) { .onepage-banner .frame h1 { font-size: 23px; line-height: 30px; padding: 20px 2px; } } .onepage-banner .frame p { margin: 0 0 26px; } .onepage-banner .down-arrow { left: 50%; bottom: 60px; color: white; font-size: 63px; line-height: 58px; padding: 9px 0 0; text-align: center; position: absolute; margin: 0 0 0 -40px; width: 80px; height: 80px; border: 2px solid white; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media only screen and (max-width: 991px) { .onepage-banner .down-arrow { bottom: 20px; } } .onepage-banner .down-arrow:hover { background: white; text-decoration: none; } .onepage-banner .down-arrow .fa { margin: 0 0 0 7px; position: relative; animation-duration: 2.5s; animation-name: hvr-ripple-out; -webkit-animation-name: hvr-ripple-out; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; } /*------------------------------------------------------------------ 19-3. about aricle Styles / .about-aricle -------------------------------------------------------------------*/ .about-aricle { line-height: 24px; text-align: center; } .about-aricle p { margin: 0 0 10px; } .about-aricle .img-box { color: white; overflow: hidden; border-radius: 50%; margin: 0 auto 28px; width: 110px; height: 110px; transition: all 0.5s ease; } .about-aricle .img-box .fa { display: inline-block; vertical-align: middle; font-size: 30px; line-height: 110px; } .about-aricle h3 { color: #2a2a2a; margin: 0 0 8px; letter-spacing: 2px; text-transform: uppercase; font: 600 14px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; display: inline-block; vertical-align: top; } .dark .about-aricle h3 { color: white; } .about-aricle:hover .img-box { background: #2a2a2a; } .dark .about-aricle:hover .img-box { background: #191919; } .onepage-tab { overflow: hidden; position: relative; } .onepage-tabset { padding-top: 140px; padding-bottom: 60px; } @media only screen and (max-width: 767px) { .onepage-tabset { padding-top: 70px; padding-bottom: 30px; } } /*------------------------------------------------------------------ 19-4. tabset onepage Styles / .tabset-onepage -------------------------------------------------------------------*/ .tabset-onepage { margin: 0; width: 100%; text-align: center; font: 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; border-bottom: 2px solid #2e2e30; } .tabset-onepage li { float: none; padding: 0 43px; display: inline-block; vertical-align: top; } @media only screen and (max-width: 991px) { .tabset-onepage li { padding: 0 13px; } } @media only screen and (max-width: 767px) { .tabset-onepage li { margin: 0 0 35px; } } .tabset-onepage li a { color: white; display: block; padding: 0 0 19px; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; z-index: 1; } .tabset-onepage li a:before { top: auto; z-index: -1; bottom: -2px; left: 0; right: 0; background: transparent; } .tabset-onepage li a:before { opacity: 0; height: 2px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .tabset-onepage li a .fa { left: 50%; top: -39px; color: #8f8f8f; font-size: 20px; margin: 0 0 0 -9px; position: absolute; } @media only screen and (max-width: 767px) { .tabset-onepage li a .fa { top: -30px; } } .tabset-onepage li a:hover { text-decoration: none; } .tabset-onepage li a:hover:before { opacity: 1; } .tabset-onepage li.active a:before { opacity: 1; } /*------------------------------------------------------------------ 19-5. tab content Styles / .tab-content -------------------------------------------------------------------*/ .tab-content.onepage { color: #8f8f8f; overflow: hidden; font: 16px/26px "Lato", Georgia, "Times New Roman", Times, serif; padding: 82px 0 0; } .tab-content.onepage .txt-box { width: 50%; float: left; } @media only screen and (max-width: 767px) { .tab-content.onepage .txt-box { width: 100%; float: none; } } .tab-content.onepage .txt-box h2 { color: white; margin: 0 0 24px; font: 300 40px/42px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .tab-content.onepage .txt-box p { margin: 0 0 26px; } .tab-content.onepage .btn { color: white; margin: 7px 0 0; } .tab-content.onepage .btn:hover { background: none; } .tab-content.onepage .alignright { float: right; width: 42.7%; margin: -27px 0 0; } @media only screen and (max-width: 767px) { .tab-content.onepage .alignright { margin: 0; float: none; width: 100%; } } .tab-content.onepage .alignright img { margin: 0 auto; } .tab-content.onepage .alignleft { float: left; width: 42.7%; } @media only screen and (max-width: 767px) { .tab-content.onepage .alignleft { margin: 0; float: none; width: 100%; } } .tab-content.onepage .alignleft img { margin: 0 auto; } .onepage-process { padding-top: 100px; padding-bottom: 70px; } /*------------------------------------------------------------------ 19-6. process nav Styles / .process-nav -------------------------------------------------------------------*/ .process-nav { margin: 0; font-size: 12px; font-weight: 600; color: #666666; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; z-index: 1; } .process-nav:before { top: 59px; z-index: -1; bottom: auto; left: 100px; right: 100px; background: #dddddd; } .process-nav:before { height: 1px; } .dark .process-nav:before { background: #494949; } .process-nav li { float: none; display: inline-block; vertical-align: top; padding: 0 83px 20px; } @media only screen and (max-width: 1219px) { .process-nav li { padding: 0 43px 20px; } } @media only screen and (max-width: 991px) { .process-nav li { padding: 0 23px 20px; } } .process-nav li .process { position: relative; z-index: 999; border-radius: 50%; background: white; width: 120px; height: 120px; border: 1px solid #dddddd; display: block; margin: 0 auto 28px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .process-nav li .process { border-color: #494949; background: #191919; } .process-nav li .fa { font-size: 33px; line-height: 118px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .process-nav li:hover .process { color: white; } .process-nav li:hover .fa { color: white; } /*------------------------------------------------------------------ 19-7. onepage clientbox Styles / .onepage-clientbox -------------------------------------------------------------------*/ .onepage-clientbox { position: relative; overflow: hidden; z-index: 1; position: relative; } .onepage-clientbox:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .onepage-clientbox:before { z-index: 1; background: rgba(0, 0, 0, 0.7); } .onepage-client { position: relative; z-index: 999; color: white; text-align: center; padding-top: 93px; padding-bottom: 89px; } .onepage-client .tabset { font-size: 0; white-space: nowrap; letter-spacing: -4px; } .onepage-client .tabset li { letter-spacing: 0; white-space: normal; width: 16.667%; display: inline-block; vertical-align: top; } @media only screen and (max-width: 991px) { .onepage-client .tabset li { width: 50%; } } @media only screen and (max-width: 767px) { .onepage-client .tabset li { width: 100%; } } .onepage-client .tabset li a { opacity: 0.7; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .onepage-client .tabset li.active a, .onepage-client .tabset li:hover a { opacity: 1; } .onepage-client .tabset .holder { height: 90px; white-space: nowrap; } .onepage-client .tabset .holder .frame { display: inline-block; white-space: normal; vertical-align: middle; } .onepage-client .tabset .holder:before { content: ''; vertical-align: middle; display: inline-block; height: 100%; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } /*------------------------------------------------------------------ 19-8. onepage-blockquote Styles / .onepage-blockquote -------------------------------------------------------------------*/ .onepage-blockquote { border: 0; padding: 0; color: white; font-size: 32px; line-height: 42px; font-weight: 300; margin: 0 0 45px; font-style: italic; } @media only screen and (max-width: 767px) { .onepage-blockquote { font-size: 25px; line-height: 30px; } } .onepage-blockquote q { display: block; quotes: none; margin: 0 0 7px; } .onepage-blockquote cite { font-style: normal; font-size: 16px; line-height: 20px; text-transform: uppercase; } /*------------------------------------------------------------------ 19-9. onepage blog Styles / .onepage-blog -------------------------------------------------------------------*/ .onepage-blog { padding-top: 93px; padding-bottom: 70px; } .onepage-blogblock { margin-bottom: 30px; } .recentblog-col { color: #111; font-size: 14px; line-height: 28px; overflow: hidden; background: white; } @media only screen and (max-width: 767px) { .recentblog-col { padding: 0 0 20px; } } .dark .recentblog-col { background: #191919; } .recentblog-col .alignleft { float: left; width: 47.2%; position: relative; mar
save
name
size
mtime
actions
[D] font
-
2019-11-28 12:08
del
ren
animate.min.css
68606
2021-08-26 15:58
edit
get
del
ren
bootstrap.css
137950
2019-11-28 12:07
edit
get
del
ren
bootstrap.min.css
121204
2021-08-26 15:58
edit
get
del
ren
color-switcher-design.css
3124
2019-11-28 12:07
edit
get
del
ren
default-theme.css
4140
2019-11-28 12:07
edit
get
del
ren
font-awesome.css
37414
2021-08-26 15:58
edit
get
del
ren
font-awesome.min.css
31000
2021-08-26 15:58
edit
get
del
ren
jquery.fancybox.css
4174
2021-08-26 15:58
edit
get
del
ren
layers.css
146626
2019-11-28 12:07
edit
get
del
ren
magnific-popup.css
7806
2021-08-26 15:58
edit
get
del
ren
navigation.css
59576
2019-11-28 12:07
edit
get
del
ren
owl.carousel.css
4615
2021-08-26 15:58
edit
get
del
ren
owl.carousel.min.css
3470
2020-01-23 10:36
edit
get
del
ren
plugin.min.css
300188
2019-11-28 12:08
edit
get
del
ren
responsive.css
14122
2021-08-26 15:58
edit
get
del
ren
settings.css
73098
2019-11-28 12:08
edit
get
del
ren
slicknav.min.css
2505
2021-08-26 15:58
edit
get
del
ren
style.css
46527
2021-08-26 15:58
edit
get
del
ren