/*------------------------------------------------------------------ [Master Stylesheet] Project: Fakre Version: 1 Last change: 10/25/2015 [no Change] Primary use: Fakre 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. app showcase page Styles 14-1. realestate page Styles 15-1. travel page Styles 16-1. yoga page Styles 17-1. blog page Styles 18-1. portfolio page Styles 19-1. app landing page Styles 20-1. one page Styles 21-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, .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 .beans-pagination a: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, .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, .related-shop .beans-stepslider: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, .wedding-banner .banner-over, .wedding-photos .over, .collection-over, .product-over, .slide-over, .architecture-gallery .btn-prev:after, .architecture-gallery .btn-next: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 -------------------------------------------------------------------*/ #wrapper { z-index: 9998; } /*------------------------------------------------------------------ 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; } /*------------------------------------------------------------------ 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; 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; } } .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 .btn-prev, .main-slider .btn-next { right: 0; top: 50%; opacity: 0; z-index: 9; color: white; font-size: 60px; margin: -46px 0 0; position: absolute; visibility: visible; -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 .btn-prev, .main-slider .btn-next { margin: -20px 0 0; right: 15px; } } .main-slider .btn-prev:hover, .main-slider .btn-next:hover { opacity: 0.8; text-decoration: none; } .main-slider .btn-prev { left: 0; right: auto; } .main-slider .beans-pagination { 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 .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .main-slider .beans-pagination a { 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 .beans-pagination a:hover { text-decoration: none; } .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 .btn-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .main-slider:hover .btn-next { right: 15px; } } .main-slider:hover .btn-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .main-slider:hover .btn-prev { right: auto; left: 15px; } } .main-slider:hover .beans-pagination { opacity: 1; bottom: 20px; visibility: visible; } /*------------------------------------------------------------------ 1-6. main Styles / #main -------------------------------------------------------------------*/ #main { z-index: 9998; } /*------------------------------------------------------------------ 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 { font-size: 16px; 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; } /*------------------------------------------------------------------ 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: #2a2a2a; display: block; margin: 0 0 9px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .dark .f-iconbox .title { color: white; } .f-iconbox p { margin: 0; } .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; } /*------------------------------------------------------------------ 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); } /*------------------------------------------------------------------ 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; } .testimon-section .comp-name { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .testimon-section .beans-pagination li { margin: 0 3px; display: inline-block; vertical-align: top; } .testimon-section .beans-pagination a { 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; } .testimon-section .beans-pagination a:hover { text-decoration: none; } .testimon-section .beans-pagination.small a { width: 10px; height: 10px; } .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 .beans-pagination a { border-color: #dddddd; width: 12px; height: 12px; } /*------------------------------------------------------------------ 1-13. work section Styles / .work-section -------------------------------------------------------------------*/ .work-section { overflow: hidden; } .work-section .icotop-holder { overflow: hidden; position: relative; } .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.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: 1219px) { .coll-5 { width: 25%; } } @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 .beans-slideset { float: none; font-size: 0; white-space: nowrap; letter-spacing: -4px; width: 100% !important; } .work-slider .beans-slide { float: none; overflow: hidden; letter-spacing: 0; white-space: normal; width: 25% !important; display: inline-block; vertical-align: top; } @media only screen and (max-width: 991px) { .work-slider .beans-slide { width: 50% !important; } } @media only screen and (max-width: 767px) { .work-slider .beans-slide { width: 100% !important; } } .work-slider .btn-prev, .work-slider .btn-next { float: right; color: #2a2a2a; font-size: 25px; background: #ddd; line-height: 40px; text-align: center; border-radius: 50%; margin: 0 2px 0 2px; 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; } .work-slider .btn-prev:hover, .work-slider .btn-next:hover { color: white; text-decoration: none; } .work-pagination { bottom: 24px; } .work-pagination li { padding: 0 4px; float: none; display: inline-block; vertical-align: top; } .work-pagination li.active a { background: white; } .work-pagination li a { display: block; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .work-pagination li a: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 .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .blog-section .beans-slider .beans-pagination li.active a { background: #191919; } .blog-section .beans-slider .beans-pagination a { display: block; overflow: hidden; background: #ddd; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; } .dark .blog-section .beans-slider .beans-pagination a { background: #8f8f8f; } .blog-section .beans-slider .beans-pagination a: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 .beans-slideset { float: none; font-size: 0; white-space: nowrap; letter-spacing: -4px; width: 100% !important; } .blog-section .beans-stepslider .beans-slide { float: none; letter-spacing: 0; white-space: normal; width: 33.3333% !important; display: inline-block; vertical-align: top; } @media only screen and (max-width: 991px) { .blog-section .beans-stepslider .beans-slide { width: 50% !important; } } @media only screen and (max-width: 767px) { .blog-section .beans-stepslider .beans-slide { width: 100% !important; } } .blog-section .beans-stepslider .beans-slide img { border-left: 1px solid transparent; } .blog-section .beans-stepslider .beans-slide.active { z-index: 1; } .blog-section .beans-stepslider .beans-pagination { bottom: 0; } .blog-section .beans-stepslider .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .blog-section .beans-stepslider .beans-pagination li.active a:after { display: block; } .blog-section .beans-stepslider .beans-pagination a { 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 .beans-pagination a { border-color: #494949; background: #494949; } .blog-section .beans-stepslider .beans-pagination a:hover { text-decoration: none; } .blog-section .beans-stepslider .beans-pagination a:hover:after { display: block; } .blog-section .beans-stepslider .beans-pagination a: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; } @media only screen and (max-width: 767px) { .clients-section .beans-stepslider .beans-mask { width: 270px; margin: 0 auto; } } .clients-section .beans-stepslider .beans-slide { padding: 0 15px; width: 292px !important; } @media only screen and (max-width: 1219px) { .clients-section .beans-stepslider .beans-slide { width: 318px !important; } } @media only screen and (max-width: 991px) { .clients-section .beans-stepslider .beans-slide { width: 245px !important; } } @media only screen and (max-width: 767px) { .clients-section .beans-stepslider .beans-slide { width: 270px !important; } } .clients-section .beans-stepslider .beans-slide.active { z-index: 1; } .clients-section .beans-stepslider .btn-prev { top: 113px; left: -56px; color: #535353; font-size: 20px; padding: 2px 0 0; text-align: center; border-radius: 50%; position: absolute; 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: 767px) { .clients-section .beans-stepslider .btn-prev { left: 0; } } .clients-section .beans-stepslider .btn-prev:hover { color: white; text-decoration: none; } .clients-section .beans-stepslider .btn-next { top: 113px; right: -56px; color: #535353; font-size: 20px; padding: 2px 0 0; text-align: center; border-radius: 50%; position: absolute; 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: 767px) { .clients-section .beans-stepslider .btn-next { right: 0; } } .clients-section .beans-stepslider .btn-next:hover { color: white; text-decoration: none; } /*------------------------------------------------------------------ 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; } .team-lightbox .img-box { float: left; margin: 3px 39px 0 0; max-width: 248px; } .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 .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .about-section .beans-slider .beans-pagination li.active a { background: white; } .about-section .beans-slider .beans-pagination a { display: block; 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 .beans-pagination a:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 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; } .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; } .core-section h2 { margin: 0 0 20px; font: 600 36px/50px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } @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: #222222; margin: 0 0 28px; text-transform: uppercase; font: 700 32px/40px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .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; } /*------------------------------------------------------------------ 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; 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: 80px 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 .btn-box { overflow: hidden; } .croporate-slider .btn-box .btn { margin: 0 2px 0 3px; } .croporate-slider .beans-pagination { 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 .beans-pagination li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .croporate-slider .beans-pagination li.active a { background: white; } .croporate-slider .beans-pagination a { 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; } .croporate-slider .beans-pagination a:hover { background: white; text-decoration: none; } .croporate-slider .btn-prev, .croporate-slider .btn-next { right: 0; top: 50%; opacity: 0; z-index: 9; color: white; font-size: 60px; margin: -46px 0 0; position: absolute; visibility: visible; -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 .btn-prev, .croporate-slider .btn-next { margin: -20px 0 0; right: 15px; } } .croporate-slider .btn-prev:hover, .croporate-slider .btn-next:hover { opacity: 0.8; text-decoration: none; } .croporate-slider .btn-prev { left: 0; right: auto; } .croporate-slider:hover .btn-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .croporate-slider:hover .btn-next { right: 15px; } } .croporate-slider:hover .btn-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .croporate-slider:hover .btn-prev { right: auto; left: 15px; } } .croporate-slider:hover .beans-pagination { 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: #2a2a2a; margin: 0 0 9px; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/16px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .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; } .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 .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/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; 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 .beans-pagination { 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 .beans-pagination li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .welcom-banner .beans-pagination li.active a { background: white; } .welcom-banner .beans-pagination a { 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 .beans-pagination a:hover { background: white; text-decoration: none; } .welcom-banner .btn-prev, .welcom-banner .btn-next { right: 0; top: 50%; opacity: 0; z-index: 9; color: white; font-size: 60px; margin: -46px 0 0; position: absolute; visibility: visible; -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 .btn-prev, .welcom-banner .btn-next { margin: -20px 0 0; right: 15px; } } .welcom-banner .btn-prev:hover, .welcom-banner .btn-next:hover { opacity: 0.8; text-decoration: none; } .welcom-banner .btn-prev { left: 0; right: auto; } .welcom-banner:hover .btn-next { opacity: 1; right: 29px; visibility: visible; } @media only screen and (max-width: 767px) { .welcom-banner:hover .btn-next { right: 15px; } } .welcom-banner:hover .btn-prev { opacity: 1; left: 29px; right: auto; visibility: visible; } @media only screen and (max-width: 767px) { .welcom-banner:hover .btn-prev { right: auto; left: 15px; } } .welcom-banner:hover .beans-pagination { opacity: 1; bottom: 33px; visibility: visible; } .welcom-banner .beans-fadeslider .slideset { 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; } } /*------------------------------------------------------------------ 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; } .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; } /*------------------------------------------------------------------ 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; } /*------------------------------------------------------------------ 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; } /*------------------------------------------------------------------ 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 .beans-pagination { position: static; overflow: hidden; padding: 12px 0 60px; } .personal-process .beans-slider .beans-pagination ul li { margin: 0 4px; vertical-align: top; display: inline-block; } .personal-process .beans-slider .beans-pagination a { display: block; 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 .beans-pagination a: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; } } /*------------------------------------------------------------------ 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 { z-index: 99; color: white; position: relative; margin: -7px 0 0; } .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 .beans-pagination { bottom: 80px; } @media only screen and (max-width: 767px) { .showcase-gallery .beans-pagination { bottom: 53px; } } .showcase-gallery .beans-pagination li { padding: 0 4px; float: none; display: inline-block; vertical-align: top; } .showcase-gallery .beans-pagination li.active a { background: white; } .showcase-gallery .beans-pagination li a { display: block; border-radius: 50%; text-indent: -9999px; width: 10px; height: 10px; border: 2px solid white; } .showcase-gallery .beans-pagination li a:hover { text-decoration: none; } .showcase-gallery .beans-pagination li a: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 .btn-prev, .wedding-banner .btn-next { color: white; position: absolute; left: 30px; top: 50%; margin: 54px 0 0; z-index: 999; transition: all 0.25s ease; } .wedding-banner .btn-prev .fa, .wedding-banner .btn-next .fa { font-size: 60px; line-height: 15px; } .wedding-banner .btn-prev:hover, .wedding-banner .btn-next:hover { text-decoration: none; } .wedding-banner .btn-next { left: auto; right: 30px; } .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: 150px; 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 .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 .beans-pagination { bottom: 10px; text-align: center; } .shop-gallery .beans-pagination li { display: inline-block; vertical-align: top; margin: 0 3px; } .shop-gallery .beans-pagination li a { display: block; text-indent: -9999px; border-radius: 50%; border: 2px solid white; width: 10px; height: 10px; } .shop-gallery .beans-pagination li a:hover { text-decoration: none; } /*------------------------------------------------------------------ 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 { z-index: 1; background: rgba(0, 0, 0, 0.2); } .special-block .btn-next, .special-block .btn-prev { top: 50%; left: 14px; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: -23px 0 0; line-height: 30px; text-align: center; position: absolute; width: 58px; height: 58px; background: rgba(0, 0, 0, 0.85); } @media only screen and (max-width: 991px) { .special-block .btn-next, .special-block .btn-prev { display: none; } } .special-block .btn-next:hover, .special-block .btn-prev:hover { text-decoration: none; } .special-block .btn-next { left: auto; right: 14px; } .special-block:before { background: rgba(0, 0, 0, 0.4); } .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; } .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 .deal-buttons { position: absolute; top: -95px; right: 2px; z-index: 99; } .deal-gallery .btn-next, .deal-gallery .btn-prev { font-size: 18px; color: #dddddd; line-height: 20px; margin: 0 0 0 3px; border-radius: 50%; text-align: center; background: white; 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 .btn-next, .dark .deal-gallery .btn-prev { border-color: #494949; background: #191919; color: white; } .deal-gallery .btn-next:hover, .deal-gallery .btn-prev:hover { text-decoration: none; } .deal-gallery .btn-next .fa, .deal-gallery .btn-prev .fa { display: inline-block; vertical-align: middle; margin: 0 0 0 -2px; } .deal-gallery .btn-next .fa { margin: 0 -3px 0 0; } /*------------------------------------------------------------------ 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; } /*------------------------------------------------------------------ 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 .btn-next, .resturant-gallery .btn-prev { color: white; position: absolute; left: 20px; top: 50%; margin: -33px 0 0; font-size: 60px; line-height: 20px; z-index: 999; transition: all 0.25s ease; } .resturant-gallery .btn-next:hover, .resturant-gallery .btn-prev:hover { text-decoration: none; } .resturant-gallery .btn-next { left: auto; right: 20px; } .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 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%; } } /*------------------------------------------------------------------ 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; width: 370px !important; border: 1px solid #dddddd; } .dark .chef-carousel .beans-slide { border-color: #494949; background: #191919; } @media only screen and (max-width: 1219px) { .chef-carousel .beans-slide { margin: 0 0 20px 21px; width: 292px !important; } } @media only screen and (max-width: 991px) { .chef-carousel .beans-slide { width: 335px !important; } } @media only screen and (max-width: 767px) { .chef-carousel .beans-slide { margin: 0 0 20px; width: 280px !important; } } .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 .beans-pagination { position: static !important; } .chef-carousel .beans-pagination li { padding: 0 2px; display: inline-block; vertical-align: top; } .chef-carousel .beans-pagination li.active a { background: #2a2a2a; } .chef-carousel .beans-pagination li a { 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 .beans-pagination li a: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 .btn-prev, .architecture-gallery .btn-next { top: 50%; left: 0; color: white; width: 79px; z-index: 999; height: 71px; font-size: 32px; margin: -35px 0 0; line-height: 32px; position: absolute; 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 .btn-prev, .architecture-gallery .btn-next { display: none; } } .architecture-gallery .btn-prev:hover, .architecture-gallery .btn-next:hover { text-decoration: none; } .architecture-gallery .btn-prev:hover:after, .architecture-gallery .btn-next:hover:after { background: white; } .architecture-gallery .btn-prev:after, .architecture-gallery .btn-next: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 .btn-next { right: 0; left: auto; padding: 15px 0 0 13px; } .architecture-gallery .btn-next:after { left: 13px; right: -20px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); } .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 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; } /*------------------------------------------------------------------ 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 .beans-pagination { bottom: 5px; width: 473px; text-align: right; } @media only screen and (max-width: 991px) { .archi-projects .beans-slider .beans-pagination { width: 100%; text-align: center; } } .archi-projects .beans-slider .beans-pagination li { float: none; padding: 0 5px; display: inline-block; vertical-align: top; } .archi-projects .beans-slider .beans-pagination li a { 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; } .archi-projects .beans-slider .beans-pagination li a: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 .beans-pagination li { padding: 0 5px; float: none; display: inline-block; vertical-align: top; } .construct-gallery .beans-pagination li a { 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 .beans-pagination li a: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 .beans-mask { 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 .btn-prev, .const-services .btn-next { color: white; font-size: 25px; padding: 7px 0 0; text-align: center; border-radius: 50%; margin: 0 2px 32px; background: #2c2c2c; 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 .btn-prev.active, .const-services .btn-prev:hover, .const-services .btn-next.active, .const-services .btn-next:hover { text-decoration: none; } .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.style2 .btn-prev, .const-services.style2 .btn-next { margin: 0 2px 45px; } /*------------------------------------------------------------------ 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 .btn-next, .realestate-slider .btn-prev { left: 0; top: 50%; opacity: 0; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: 38px 0 0; line-height: 30px; text-align: center; position: absolute; visibility: hidden; 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 .btn-next:hover, .realestate-slider .btn-prev:hover { text-decoration: none; } .realestate-slider .btn-next { right: 0; left: auto; } .realestate-slider:hover .btn-next, .realestate-slider:hover .btn-prev { opacity: 1; visibility: visible; } .realestate-slider:hover .btn-prev { left: 14px; } .realestate-slider:hover .btn-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 .btn-prev, .realestate-services .btn-next { right: 2px; top: -75px; z-index: 9999; color: #dddddd; font-size: 20px; position: absolute; text-align: center; border-radius: 50%; background: #f8f8f8; width: 28px; height: 28px; 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; display: inline-block; vertical-align: top; } .dark .realestate-services .btn-prev, .dark .realestate-services .btn-next { color: white; background: #191919; border-color: #494949; } .realestate-services .btn-prev:hover, .realestate-services .btn-next:hover { text-decoration: none; } .realestate-services .btn-prev { right: 36px; } .realestate-services .tab-content { overflow: visible; } /*------------------------------------------------------------------ 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 .btn-next, .travel-slider .btn-prev { left: 0; top: 50%; opacity: 0; z-index: 55; color: white; font-size: 52px; overflow: hidden; margin: -23px 0 0; line-height: 30px; text-align: center; position: absolute; visibility: hidden; 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 .btn-next, .travel-slider .btn-prev { top: auto; margin: 0; bottom: 40px; } } .travel-slider .btn-next:hover, .travel-slider .btn-prev:hover { text-decoration: none; } .travel-slider .btn-next { right: 0; left: auto; } .travel-slider:hover .btn-next, .travel-slider:hover .btn-prev { opacity: 1; visibility: visible; } .travel-slider:hover .btn-prev { left: 14px; } .travel-slider:hover .btn-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-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 { margin: 0 0 25px; text-transform: uppercase; 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 .btn { margin: 0 10px 10px 0; } .youga-slider p { margin: 0 0 34px; } .youga-slider .beans-pagination { bottom: 10px; text-align: center; } .youga-slider .beans-pagination li { display: inline-block; vertical-align: top; margin: 0 3px; } .youga-slider .beans-pagination li a { display: block; text-indent: -9999px; border-radius: 50%; border: 2px solid white; width: 10px; height: 10px; } .youga-slider .beans-pagination li a:hover { text-decoration: none; } /*------------------------------------------------------------------ 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 .beans-pagination { margin: 0; top: 45px; left: auto; right: 34px; } .blog-alignleft .beans-slider .beans-pagination li { padding: 0 0 8px; } .blog-alignleft .beans-slider .beans-pagination li.active a { background: black; } .blog-alignleft .beans-slider .beans-pagination li a { display: block; border-radius: 50%; overflow: hidden; background: white; text-indent: -9999px; width: 7px; height: 7px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .blog-alignleft .beans-slider .beans-pagination li a:hover { background: black; 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 .beans-pagination li { padding: 0 4px; display: inline-block; vertical-align: top; } .port-slider .beans-pagination li.active a { background: black; } .port-slider .beans-pagination li a { display: block; border-radius: 50%; text-indent: -9999px; width: 15px; height: 15px; border: 2px solid black; } .port-slider .beans-pagination li a: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 .arrow-holder { left: 0; right: 0; top: 50%; z-index: 5; position: absolute; } .port-single .arrow-holder .btn-next, .port-single .arrow-holder .btn-prev { color: #919191; float: left; font-size: 20px; margin: -20px 0 0; line-height: 40px; text-align: center; border-radius: 50%; width: 40px; height: 40px; border: 1px solid #919191; } .port-single .arrow-holder .btn-next:hover, .port-single .arrow-holder .btn-prev:hover { color: #2a2a2a; text-decoration: none; border-color: #2a2a2a; } .dark .port-single .arrow-holder .btn-next:hover, .dark .port-single .arrow-holder .btn-prev:hover { color: white; } .port-single .arrow-holder .btn-next { float: right; } .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 .beans-pagination { bottom: 0; } .port-aside .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .port-aside .beans-pagination li.active a { background: #2a2a2a; border-color: #2a2a2a; } .port-aside .beans-pagination a { display: block; 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 .beans-pagination a: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; } } /*------------------------------------------------------------------ 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: #8f8f8f; 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; margin: 0 5.4% 0 0; } @media only screen and (max-width: 991px) { .recentblog-col .alignleft { margin: 0; float: none; width: 100%; } } .recentblog-col .alignleft img { width: 100%; } .recentblog-col .txt-box { overflow: hidden; padding: 29px 0 0; } @media only screen and (max-width: 991px) { .recentblog-col .txt-box { padding: 20px 20px 0; } } .recentblog-col h3 { color: #2a2a2a; margin: 0 0 11px; font: 18px/22px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .recentblog-col h3 { color: white; } .recentblog-col 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 .recentblog-col h3 a { color: white; } .recentblog-col h3 a:hover { text-decoration: none; } .recentblog-col p { margin: 0 0 10px; } .recentblog-col .date-holder { color: white; background: #2a2a2a; position: absolute; top: 10px; left: 11px; width: 59px; text-align: center; font-size: 12px; line-height: 16px; padding: 0 0 11px; text-transform: uppercase; } .recentblog-col .date-holder a { display: block; height: 59px; font-size: 24px; line-height: 57px; margin: 0 0 10px; color: white; } .recentblog-col .date-holder .date { font-size: 18px; line-height: 22px; font-weight: 700; display: block; margin: 0; } .meta-nav { margin: 0 0 18px; line-height: 18px; font-size: 12px; position: relative; } .meta-nav li { padding: 0 13px 0 0; } .meta-nav li .fa { margin: 0 5px 0 0; } .meta-nav li a { color: #8f8f8f; } .meta-nav li a:hover { color: #2a2a2a; text-decoration: none; } /*------------------------------------------------------------------ 19-10. onepage demo Styles / .onepage-demo -------------------------------------------------------------------*/ .onepage-demo { position: relative; overflow: hidden; position: relative; } .onepage-demo:before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } .onepage-demo:before { z-index: 1; background: rgba(0, 0, 0, 0.4); } .install-demos { position: relative; z-index: 999; color: white; font-weight: 300; line-height: 24px; padding-top: 20px; padding-bottom: 20px; min-height: 443px; white-space: nowrap; } .install-demos .txt-box { display: inline-block; white-space: normal; vertical-align: middle; } .install-demos:before { content: ''; vertical-align: middle; display: inline-block; min-height: inherit; width: 1px; overflow: hidden; margin: 0 0 0 -5px; } .install-demos h2 { margin: 0 0 20px; font: 32px/36px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; } .install-demos p { margin: 0 0 24px; } .install-demos .btn { color: white; padding: 8px 21px 8px 31px; } .install-demos .btn:hover { background: none; border-color: white; } .install-demos .txt-box { margin: -11px 0 0; width: 50%; } @media only screen and (max-width: 767px) { .install-demos .txt-box { width: 100%; margin: 0; } } /*------------------------------------------------------------------ 19-11. map Styles / .map -------------------------------------------------------------------*/ .map { height: 500px; } @media only screen and (max-width: 767px) { .map { height: 300px; } } @media only screen and (max-width: 991px) { .map { height: 400px; } } @media only screen and (max-width: 767px) { .map { height: 200px; } } /*------------------------------------------------------------------ 20-1. shop inner page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 20-2. shop header Styles / .shop-header 20-3. shop footer Styles / .shop-footer 20-4. products holder Styles / .products-holder 20-5. shop widget Styles / .shop-widget 20-6. top seller Styles / .top-seller 20-7. shop product info Styles / .shop-product-info 20-8. beans stepslider2 Styles / .beans-stepslider2 20-9. description block Styles / .description-block 20-10. description header Styles / .description-header 20-11. descriptio tabs Styles / .descriptio-tabs 20-12. related shop Styles / .related-shop 20-13. reply box Styles / .reply-box 20-14. table container Styles / .table-container 20-15. shop table Styles / .shop-table 20-16. shop apply Styles / .shop-apply 20-17. shop calculation Styles / .shop-calculation 20-18. cart table Styles / .cart-table -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 20-2. shop header Styles / .shop-header -------------------------------------------------------------------*/ .shop-header { overflow: hidden; margin-bottom: 60px; font-weight: 300; } .shop-header .holder { float: left; max-width: 850px; } .shop-header h2 { color: #2a2a2a; margin: 0 0 2px; text-transform: uppercase; font: 700 21px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .shop-header h2 { color: white; } .shop-header p { margin: 0; } .shop-header p a { font-weight: 700; } .contact-block.shop { padding-top: 95px; } @media only screen and (max-width: 767px) { .contact-block.shop { padding-top: 45px; } } .products-shop { overflow: hidden; } /*------------------------------------------------------------------ 20-3. shop footer Styles / .shop-footer -------------------------------------------------------------------*/ .shop-footer { overflow: hidden; text-align: center; font-weight: 300; } .shop-footer .buttons-box { float: left; } @media only screen and (max-width: 767px) { .shop-footer .buttons-box { float: none; margin: 0 0 10px; } } .shop-footer .txt-box { overflow: hidden; padding: 9px 0 0; } .shop-footer p { margin: 0; } .shop-footer.side .txt-box { float: left; } @media only screen and (max-width: 767px) { .shop-footer.side .txt-box { float: none; text-align: center; } } .shop-next, .shop-prev { color: #8f8f8f; border-color: #dddddd; text-transform: uppercase; min-width: inherit; border-radius: 0; transition: all 0.3s ease; padding: 9px 10px; min-width: 123px; margin: 0 10px 0 0; font-size: 13px; font-weight: 400; } .shop-next:hover, .shop-prev:hover { color: white; } .dark .shop-next, .dark .shop-prev { border-color: #494949; } .shop-next { min-width: 95px; } .shop-pagination { float: right; margin: 0; font-weight: 400; } @media only screen and (max-width: 767px) { .shop-pagination { float: none; margin: 0 0 10px; } } .shop-pagination li { display: inline-block; vertical-align: top; margin: 0 0 0 7px; padding: 0; } .shop-pagination li.active a { color: white; } .shop-pagination li a { color: #8f8f8f; display: block; width: 48px; height: 40px; border: 1px solid #dddddd; text-align: center; font-size: 14px; line-height: 38px; transition: all 0.3s ease; } .dark .shop-pagination li a { border-color: #494949; } .shop-pagination li a:hover { color: white; text-decoration: none; } /*------------------------------------------------------------------ 20-4. products holder Styles / .products-holder -------------------------------------------------------------------*/ .products-holder.side .new-product { width: 29.6%; margin: 0 3.2% 57px 0; } @media only screen and (max-width: 767px) { .products-holder.side .new-product { width: 48%; margin: 0 2% 20px 0; } } @media only screen and (max-width: 479px) { .products-holder.side .new-product { width: 100%; margin: 0 0 20px; } } @media only screen and (max-width: 991px) { .products-holder.sidebar .new-product { width: 29.6%; margin: 0 3.2% 57px 0; } } @media only screen and (max-width: 767px) { .products-holder.sidebar .new-product { width: 48%; margin: 0 2% 20px 0; } } @media only screen and (max-width: 479px) { .products-holder.sidebar .new-product { width: 100%; margin: 0 0 20px; } } /*------------------------------------------------------------------ 20-5. shop widget Styles / .shop-widget -------------------------------------------------------------------*/ .shop-widget { border-top: 2px solid #f3f3f3; padding: 55px 0 0; margin: 0 0 46px; position: relative; z-index: 1; } .shop-widget:before { top: -2px; z-index: -1; bottom: auto; left: 0; right: auto; background: #2a2a2a; } .shop-widget:before { width: 50px; height: 2px; } .dark .shop-widget { border-color: #494949; } .shop-widget h3 { color: #2a2a2a; margin: 0 0 22px; letter-spacing: 1px; font: 600 14px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .shop-widget h3 { color: white; } .shop-widget ul { margin: 0; } .shop-widget ul li { padding: 0 0 10px 12px; } .shop-widget ul li a { color: #8f8f8f; transition: all 0.3s ease; position: relative; } .shop-widget ul li a:before { position: absolute; content: ""; top: 5px; bottom: auto; left: -14px; right: auto; } .shop-widget ul li a:before { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent transparent; } .shop-widget ul li a:hover { text-decoration: none; } .shop-widget.sellers-widget h3 { margin: 0 0 27px; } .shop-widget .rattings-nav { margin: 0 0 8px; } .shop-widget .rattings-nav li { padding: 0; } .shop-widget:first-child { border: 0; padding: 0; } .shop-widget:first-child:before { display: none; } /*------------------------------------------------------------------ 20-6. top seller Styles / .top-seller -------------------------------------------------------------------*/ .top-seller { color: #2a2a2a; overflow: hidden; margin: 0 0 26px; } .dark .top-seller { color: white; } .top-seller .alignleft { float: left; margin: 4px 18px 0 0; width: 70px; } .top-seller .txt-box { overflow: hidden; } .top-seller .title { display: block; font-size: 16px; line-height: 18px; font-weight: 400; margin: 0 0 8px; } .top-seller .amount { display: block; font-size: 21px; line-height: 24px; font-weight: 700; } /*------------------------------------------------------------------ 20-7. shop product info Styles / .shop-product-info -------------------------------------------------------------------*/ .shop-product-info { color: #666666; overflow: hidden; margin: 0 0 57px; font-size: 14px; line-height: 24px; } .dark .shop-product-info { color: #8f8f8f; } .shop-product-info .title { display: block; color: #8f8f8f; text-transform: uppercase; font-size: 12px; line-height: 16px; margin: 0 0 2px; } .shop-product-info h2 { color: #2a2a2a; margin: 0 0 6px; letter-spacing: 2px; text-transform: uppercase; font: 600 18px/21px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .shop-product-info h2 { color: white; } .shop-product-info 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 .shop-product-info h2 a { color: #8f8f8f; } .shop-product-info h2 a:hover { text-decoration: none; } .shop-product-info .rattings-nav { margin: 0 0 23px; } .shop-product-info p { margin: 0 0 15px; } .shop-product-info .amount { color: #2a2a2a; display: block; margin: 0 0 22px; font: 700 21px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .shop-product-info .amount { color: white; } .shop-product-info .amount sub { font-size: 16px; font-weight: 700; display: inline-block; vertical-align: middle; margin: -9px 0 0; } .shop-product-info .buttons-box { overflow: hidden; } .shop-product-info .btn-cart { color: #2a2a2a; display: inline-block; vertical-align: middle; text-transform: uppercase; font-size: 12px; line-height: 16px; margin: 0 5px 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; } .dark .shop-product-info .btn-cart { color: white; } .shop-product-info .btn-cart:hover { text-decoration: none; } .shop-product-info .produt-txt { overflow: hidden; padding: 7px 0 27px; } @media only screen and (max-width: 767px) { .shop-product-info .produt-txt { overflow: visible; } } .shop-product-info .product-img { float: left; width: 29.5%; max-width: 270px; margin: 0 3.2% 0 0; position: relative; text-align: center; } @media only screen and (max-width: 599px) { .shop-product-info .product-img { float: none; width: 100%; margin: 0 0 20px; overflow: hidden; } .shop-product-info .product-img img { width: 100%; } } .shop-product-info:hover .product-img .product-over { top: 0; } /*------------------------------------------------------------------ 20-8. beans stepslider2 Styles / .beans-stepslider2 -------------------------------------------------------------------*/ .beans-stepslider2.description { overflow: hidden; padding: 5px 0 0; } .beans-stepslider2.description .beans-pagination { padding: 10px 0 0; position: static; top: auto; bottom: auto; right: auto; left: auto; margin: 0 -2% 20px 0; } @media only screen and (max-width: 767px) { .beans-stepslider2.description .beans-pagination { margin: 0 -2% 20px 0; } } .beans-stepslider2.description .beans-pagination ul { margin: 0; } .beans-stepslider2.description .beans-pagination ul li { width: 21.8%; padding: 0; margin: 0 0 0 3.7%; } @media only screen and (max-width: 1219px) { .beans-stepslider2.description .beans-pagination ul li { margin: 0 0 0 3.6%; } } @media only screen and (max-width: 991px) { .beans-stepslider2.description .beans-pagination ul li { margin: 0 0 0 3%; } } .beans-stepslider2.description .beans-pagination ul li:first-child { margin-left: 0; } /*------------------------------------------------------------------ 20-9. description block Styles / .description-block -------------------------------------------------------------------*/ .description-block { color: #8f8f8f; font-size: 14px; line-height: 28px; } .description-block p { margin: 0 0 28px; } .description-block .footer-social { margin: 0; } .description-block .footer-social a { color: #2a2a2a; background: #f1f1f1; transition: all 0.3s ease; width: 35px; height: 35px; font-size: 15px; line-height: 35px; } .dark .description-block .footer-social a { color: white; background: #191919; } .description-block .footer-social a:hover { background: #2a2a2a; color: #f1f1f1; } .dark .description-block .footer-social a:hover { background: #191919; } .description-block .buttons-block { padding: 0 0 16px 2px; } .shop-description { margin-bottom: 56px; } /*------------------------------------------------------------------ 20-10. description header Styles / .description-header -------------------------------------------------------------------*/ .description-header { overflow: hidden; margin: 0 0 51px; color: #2a2a2a; } .dark .description-header { color: white; } .description-header .holder { float: left; width: 60%; } @media only screen and (max-width: 767px) { .description-header .holder { float: none; width: 100%; } } .description-header h2 { margin: 0 0 15px; text-transform: capitalize; font: 500 32px/34px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .description-header .amount { float: right; color: #2a2a2a; font-size: 32px; line-height: 34px; font-weight: 900; } .dark .description-header .amount { color: white; } .description-header .amount sup { font-weight: 700; font-size: 22px; line-height: 34px; margin: 15px 0 0; display: inline-block; vertical-align: top; } .description-header .rattings-nav { margin: 0 6px 0 0; font-size: 15px; line-height: 18px; display: inline-block; vertical-align: middle; } .description-header .review { color: #8f8f8f; display: inline-block; vertical-align: middle; font-size: 12px; line-height: 14px; } .description-header .review:hover { text-decoration: none; } .description-header .block { overflow: hidden; margin: 0 0 10px; } .description-header .in-stock { color: white; font-size: 12px; line-height: 20px; vertical-align: top; letter-spacing: 2px; display: inline-block; padding: 6px 20px 8px; background: #27ae60; } /*------------------------------------------------------------------ 20-11. descriptio tabs Styles / .descriptio-tabs -------------------------------------------------------------------*/ .descriptio-tabs { margin-bottom: 92px; } .descriptio-tabs .nav-tabs { font-size: 13px; line-height: 15px; } .descriptio-tabs .nav-tabs > li { float: left; border: 0; padding: 0; margin: 0; } .descriptio-tabs .nav-tabs > li > a { margin: 0; color: #262626; cursor: pointer; background: #f8f8f8; padding: 10px 19px 10px; border: 0; } .dark .descriptio-tabs .nav-tabs > li > a { color: white; background: #191919; } .descriptio-tabs .nav-tabs > li > a:hover { color: white; } .descriptio-tabs .nav-tabs > li.active > a { cursor: pointer; } .descriptio-tabs .nav-tabs > li.active > a, .descriptio-tabs .nav-tabs > li.active > a:hover, .descriptio-tabs .nav-tabs > li.active > a:focus { padding: 10px 19px 10px; border: 0; color: white; } .descriptio-tabs .nav-tabs > li.active > a:after, .descriptio-tabs .nav-tabs > li.active > a:before, .descriptio-tabs .nav-tabs > li.active > a:hover:after, .descriptio-tabs .nav-tabs > li.active > a:hover:before, .descriptio-tabs .nav-tabs > li.active > a:focus:after, .descriptio-tabs .nav-tabs > li.active > a:focus:before { display: none; } .descriptio-tabs .nav-tabs > li a:hover:after { display: none; } .descriptio-tabs .nav-tabs > li a:hover:before { display: none; } .descriptio-tabs .tab-pane { border: 0; color: #8f8f8f; font-size: 13px; line-height: 20px; background: #f8f8f8; padding: 39px 2.4% 20px 2.6%; } .dark .descriptio-tabs .tab-pane { background: #191919; } .descriptio-tabs .tab-pane p { margin: 0 0 20px; } .descriptio-tabs .tab-pane .column { width: 46%; float: left; margin: 0 0 0 8%; } @media only screen and (max-width: 767px) { .descriptio-tabs .tab-pane .column { width: 100%; float: left; margin: 0 0 15px; } } .descriptio-tabs .tab-pane .column:first-child { margin-left: 0; } .descriptio-tabs .tab-pane h2 { color: #2a2a2a; margin: 0 0 62px; font: 24px/28px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .descriptio-tabs .tab-pane h2 { color: white; } .descriptio-tabs .comment-form { margin: 0 0 40px; } .descriptio-tabs .comment-form h4 { color: #2a2a2a; font-size: 25px; } .dark .descriptio-tabs .comment-form h4 { color: white; } .descriptio-tabs.review .tab-pane { padding-top: 26px; } /*------------------------------------------------------------------ 20-12. related shop Styles / .related-shop -------------------------------------------------------------------*/ .related-shop h2 { color: #222222; margin: 0 0 53px; text-transform: capitalize; font: 300 40px/42px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .related-shop h2 { color: white; } @media only screen and (max-width: 767px) { .related-shop h2 { font-size: 20px; } } .related-shop .new-product { width: 23.1%; margin: 0 0 0 2.5%; } @media only screen and (max-width: 767px) { .related-shop .new-product { width: 48%; margin: 0 0 20px 2%; } } @media only screen and (max-width: 400px) { .related-shop .new-product { width: 100%; margin: 0 0 20px; } } .related-shop .new-product h2 { margin: 0 0 6px; font: 16px/20px "Lato", Georgia, "Times New Roman", Times, serif; } .related-shop .new-product:first-child { margin-left: 0; } .related-shop .bottons-box { position: absolute; top: -88px; right: 0; width: 70px; text-align: right; } .related-shop .beans-stepslider { overflow: visible; } .related-shop .btn-prev { color: #dddddd; display: inline-block; vertical-align: top; margin: 0 0 0 4px; border-radius: 50%; text-align: center; border: 1px solid #dddddd; font-size: 20px; line-height: 23px; width: 28px; height: 28px; } .dark .related-shop .btn-prev { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .dark .related-shop .btn-prev:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } /*------------------------------------------------------------------ 20-13. reply box Styles / .reply-box -------------------------------------------------------------------*/ .reply-box { color: white; min-width: 56px; padding: 6px 2px; font-size: 10px; line-height: 12px; font-weight: 600; background: black; text-align: center; border-radius: 20px; position: relative; position: absolute; bottom: 3px; left: 50%; margin: 0 0 0 -28px; display: inline-block; vertical-align: top; } .reply-box:before { position: absolute; content: ""; top: -4px; bottom: auto; left: 50%; right: auto; } .reply-box:before { margin: 0 0 0 -3px; width: 0; height: 0; border-style: solid; border-width: 0 3px 6px 3px; border-color: transparent transparent black transparent; } .reply-box:hover { text-decoration: none; } .shop-table-block { margin-bottom: 60px; } /*------------------------------------------------------------------ 20-14. table container Styles / .table-container -------------------------------------------------------------------*/ @media only screen and (max-width: 991px) { .table-container { overflow-x: auto; } .table-container .table-block { width: 700px; } } /*------------------------------------------------------------------ 20-15. shop table Styles / .shop-table -------------------------------------------------------------------*/ .shop-table { color: #222222; display: block; width: 100%; margin: 0 0 30px; background: white; border: 1px solid #dddddd; font: 14px/18px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .shop-table { color: white; background: #191919; border-color: #494949; } .shop-table .gray { background: #f1f1f1; } .dark .shop-table .gray { background: #222222; } .shop-table thead { display: block; width: 100%; overflow: hidden; text-transform: uppercase; border-bottom: 1px solid #dddddd; } .dark .shop-table thead { border-color: #494949; } .shop-table tbody { display: block; width: 100%; overflow: hidden; } .shop-table tbody tr { border-top: 1px solid #dddddd; } .dark .shop-table tbody tr { border-color: #494949; } .shop-table tbody tr:first-child { border-top: 0; } .shop-table tbody .ico-1 { padding: 9px 1.6%; } .shop-table tbody .ico-5 { padding: 24px 1.6%; } .shop-table th { font-weight: 400; } .shop-table tr { display: block; width: 100%; overflow: hidden; } .shop-table th, .shop-table td { width: 31.2%; float: left; padding: 32px 1.5% 28px; } .shop-table td { padding: 28px 1.5% 28px; } .shop-table .ico-2 { width: 7.9%; text-transform: none; } .shop-table .ico-3 { width: 9.7%; text-align: center; } .shop-table .ico-4 { width: 12.5%; text-align: center; } .shop-table .ico-5 { width: 20.6%; text-align: center; } .shop-table .ico-6 { width: 12.9%; text-align: center; } .shop-table .ico-7 { width: 5.1%; padding: 28px 1% 28px; text-align: center; } .shop-table .btn-close { color: #dddddd; display: inline-block; vertical-align: middle; font-size: 20px; } .shop-table .btn-close:hover { text-decoration: none; } .shop-table .alignleft { margin: 0 18px 0 0; width: 60px; display: inline-block; vertical-align: middle; } .shop-table .product-name { margin: -3px 0 0; display: inline-block; vertical-align: middle; } /*------------------------------------------------------------------ 20-16. shop apply Styles / .shop-apply -------------------------------------------------------------------*/ .shop-apply { overflow: hidden; } .shop-apply .shop-buttons { width: 50%; float: right; text-align: right; } @media only screen and (max-width: 991px) { .shop-apply .shop-buttons { width: 47%; } } @media only screen and (max-width: 767px) { .shop-apply .shop-buttons { width: 100%; float: none; text-align: left; } } .shop-apply .btn { border: 0; color: white; background: #2a2a2a; margin: 0 0 0 6px; } /*------------------------------------------------------------------ 20-17. shop calculation Styles / .shop-calculation -------------------------------------------------------------------*/ .shop-calculation { padding-top: 56px; margin-bottom: 94px; padding-bottom: 54px; } @media only screen and (max-width: 767px) { .shop-calculation { margin-bottom: 40px; padding-bottom: 30px; } } .shop-calculation h2 { color: #2a2a2a; margin: 0 0 17px; text-transform: capitalize; font: 18px/22px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .shop-calculation h2 { color: white; } .shop-calculation .block { overflow: hidden; margin: 0 0 57px; } .shop-calculation.checkout { padding-top: 0; padding-bottom: 0; } .shop-calculation.checkout:before { display: none; } .shop-calculation.checkout h2 { margin: 0 0 32px; } .shop-calculation.checkout .cart-table { background: #fafafa; } .dark .shop-calculation.checkout .cart-table { background: #191919; } .shop-calculation.checkout .cart-table td { width: 81%; padding: 17px 2% 18px 5%; } @media only screen and (max-width: 991px) { .shop-calculation.checkout .cart-table td { width: 70%; } } .shop-calculation.checkout .cart-table .col-2 { width: 19%; padding-left: 3.9%; } @media only screen and (max-width: 991px) { .shop-calculation.checkout .cart-table .col-2 { width: 30%; } } .shop-calculation.checkout .update-form .jcf-select { margin: 0 0 9px; } .shop-calculation.checkout .update-form .form-control { margin: 0 0 9px; } .shop-calculation.checkout .update-form ::-webkit-input-placeholder { color: #2a2a2a; } .shop-calculation.checkout .update-form ::-moz-placeholder { opacity: 1; color: #2a2a2a; } .shop-calculation.checkout .update-form :-moz-placeholder { color: #2a2a2a; } .shop-calculation.checkout .update-form :-ms-input-placeholder { color: #2a2a2a; } .shop-calculation.checkout .update-form .placeholder { color: #2a2a2a; } .dark .shop-calculation.checkout .update-form ::-webkit-input-placeholder { color: white; } .dark .shop-calculation.checkout .update-form ::-moz-placeholder { opacity: 1; color: white; } .dark .shop-calculation.checkout .update-form :-moz-placeholder { color: white; } .dark .shop-calculation.checkout .update-form :-ms-input-placeholder { color: white; } .dark .shop-calculation.checkout .update-form .placeholder { color: white; } .shop-calculation.checkout .update-form .jcf-select-text { color: #2a2a2a; } .dark .shop-calculation.checkout .update-form .jcf-select-text { color: white; } .shop-calculation.checkout .update-form .form-control { color: #2a2a2a; } .dark .shop-calculation.checkout .update-form .form-control { color: white; } /*------------------------------------------------------------------ 20-18. cart table Styles / .cart-table -------------------------------------------------------------------*/ .cart-table { color: #2a2a2a; display: block; width: 100%; border-collapse: collapse; font-size: 15px; line-height: 18px; border: 1px solid #dddddd; } .dark .cart-table { color: white; background: none; border-color: #494949; } .cart-table tbody { display: block; width: 100%; } .cart-table tr { overflow: hidden; display: block; border-top: 1px solid #dddddd; } .dark .cart-table tr { border-color: #494949; } .cart-table tr:first-child { border-top: 0; } .cart-table td { float: left; padding: 17px 3.9% 18px; width: 68%; border-left: 1px solid #dddddd; } .dark .cart-table td { border-color: #494949; } .cart-table td:first-child { border-left: 0; } .cart-table .col-2 { width: 32%; float: left; background: white; } .dark .cart-table .col-2 { background: none; } /*------------------------------------------------------------------ 21-1. blog full width page Styles -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 21-2. blog mainbanner Styles / .blog-mainbanner 21-3. blog post v1 Styles / .blog-post-v1 21-4. blog footer Styles / .blog-footer 21-5. blog masonry holder Styles / .blog-masonry-holder 21-6. post footer Styles / .post-footer 21-7. post author box Styles / .post-author-box 21-8. blog post v2 Styles / .blog-post-v2 21-9. widget Styles / .widget 21-10. comment box Styles / .comment-box 21-11. related post widget Styles / .related-post-widget 21-12. blog container Styles / .blog-container 21-13. blog4 home Styles / .blog4-home -------------------------------------------------------------------*/ /*------------------------------------------------------------------ 21-2. blog mainbanner Styles / .blog-mainbanner -------------------------------------------------------------------*/ .blog-mainbanner { color: white; margin: 0 0 98px; text-align: center; padding: 174px 0 131px; font: 700 42px/60px "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blog-mainbanner .container { z-index: 5; position: relative; } .blog-mainbanner p { margin: 0 0 30px; } .blog-mainbanner .title { display: block; margin: 0 0 38px; font: italic 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blog-mainbanner .beans-slider .beans-pagination { position: static; } .blog-mainbanner .beans-slider .beans-pagination li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .blog-mainbanner .beans-slider .beans-pagination li.active a { background: white; } .blog-mainbanner .beans-slider .beans-pagination a { display: block; 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; } .blog-mainbanner .beans-slider .beans-pagination a:hover { background: white; text-decoration: none; } /*------------------------------------------------------------------ 21-3. blog post v1 Styles / .blog-post-v1 -------------------------------------------------------------------*/ .blog-post-v1 { color: #8f8f8f; font-size: 14px; margin: 0 0 61px; line-height: 28px; padding: 0 0 34px; border-bottom: 1px solid #f3f3f3; } .dark .blog-post-v1 { border-color: #494949; } .blog-post-v1 .more { color: #2a2a2a; font-size: 12px; line-height: 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 .blog-post-v1 .more { color: #8f8f8f; } .blog-post-v1 .more:hover { text-decoration: none; } .blog-post-v1 .beans-slider .beans-pagination { bottom: 5px; } .blog-post-v1 .beans-slider .beans-pagination li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .blog-post-v1 .beans-slider .beans-pagination li.active a { background: white; } .blog-post-v1 .beans-slider .beans-pagination a { 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; } .blog-post-v1 .beans-slider .beans-pagination a:hover { background: white; text-decoration: none; } .blog-post-v1 .blog-txt { position: relative; padding: 0 0 20px 89px; -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-post-v1 .blog-txt { padding: 0 0 0 58px; } } .blog-post-v1 img { width: 100%; } .blog-post-v1 .img-box { margin: 0 0 24px; overflow: hidden; } .blog-post-v1 .img-box .box { width: 31.5%; float: left; margin: 0 0 5px 2.7%; } .blog-post-v1 .img-box .box:first-child { margin: 0 0 5px; } .blog-post-v1 .img-box .box.add { width: 30.9%; margin: 0 0 2px 3.6%; } .blog-post-v1 .img-box .box.add:first-child { margin: 0 0 2px; } .blog-post-v1 h2 { color: #2a2a2a; margin: 0 0 8px; text-transform: uppercase; font: 600 24px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .blog-post-v1 h2 { color: white; } @media only screen and (max-width: 767px) { .blog-post-v1 h2 { font-size: 18px; line-height: 25px; } } .blog-post-v1 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 .blog-post-v1 h2 a { color: white; } .blog-post-v1 h2 a:hover { text-decoration: none; } .blog-post-v1 h3 { margin: 0 0 5px; text-transform: uppercase; font: 700 18px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blog-post-v1 h3 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-post-v1 h3 a:hover { color: #2a2a2a; text-decoration: none; } .dark .blog-post-v1 h3 a:hover { color: white; } .blog-post-v1 .meta { color: #8f8f8f; margin: 0 0 8px; font-size: 12px; line-height: 21px; } .blog-post-v1 .meta 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; } .blog-post-v1 .meta a:hover { text-decoration: none; } .blog-post-v1 .meta li { padding: 0 12px 0 0; } .blog-post-v1 .box-holder { top: -4px; left: -5px; 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-post-v1 .box-holder { left: 3px; } } .blog-post-v1 time { color: white; display: block; font-size: 14px; line-height: 21px; padding: 19px 0 0; text-align: center; background: #2a2a2a; margin: -5px auto 0; width: 74px; height: 74px; text-transform: uppercase; } @media only screen and (max-width: 991px) { .blog-post-v1 time { font-size: 10px; padding: 4px 0 0; line-height: 18px; width: 40px; height: 40px; } } .blog-post-v1 time .add { display: block; font-size: 22px; font-weight: 700; } @media only screen and (max-width: 991px) { .blog-post-v1 time .add { font-size: 16px; } } .blog-post-v1 .fa { margin: 0 3px 0 0; } .blog-post-v1 .icon { color: white; display: block; font-size: 32px; text-align: center; padding: 22px 0 0 2px; width: 84px; height: 84px; border: 5px solid white; } .dark .blog-post-v1 .icon { border-color: #222222; } @media only screen and (max-width: 991px) { .blog-post-v1 .icon { font-size: 22px; padding: 4px 0 0 2px; width: 50px; height: 50px; } } .blog-post-v1 blockquote { margin: 0; border: 0; color: #2a2a2a; background: #f3f3f3; padding: 34px 30px 24px 28px; } @media only screen and (max-width: 767px) { .blog-post-v1 blockquote { padding: 20px; } } .dark .blog-post-v1 blockquote { color: #8f8f8f; background: #191919; } .blog-post-v1 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) { .blog-post-v1 blockquote q { font-size: 18px; line-height: 25px; } } .blog-post-v1 blockquote q:after { top: -10px; left: -16px; content: '"'; color: #2a2a2a; font-size: 46px; font-weight: 900; position: absolute; } .blog-post-v1 .txt { overflow: hidden; } .blog-post-v1 .txt p { margin: 0 0 47px; } .blog-post-v1 .post-blockquote { margin: 0 0 49px; letter-spacing: -0.3px; padding: 22px 20px 20px 36px; border-left: 4px solid transparent; } @media only screen and (max-width: 767px) { .blog-post-v1 .post-blockquote { padding: 22px; } } .blog-post-v1 .post-blockquote q { text-indent: 0; font-size: 18px; line-height: 30px; } .blog-post-v1 .post-blockquote q:after { display: none; } .blog-post-v1.style2 { border: 0; padding: 0; margin: 0 0 60px; overflow: hidden; background: white; } .dark .blog-post-v1.style2 { background: #191919; } .blog-post-v1.style2 .img-box { margin: 0; float: left; width: 48.7%; } @media only screen and (max-width: 767px) { .blog-post-v1.style2 .img-box { float: none; width: 100%; } } .blog-post-v1.style2 h2 { line-height: 37px; } @media only screen and (max-width: 767px) { .blog-post-v1.style2 h2 { line-height: 27px; } } .blog-post-v1.style2 .blog-txt { float: left; width: 51.3%; position: relative; padding: 21px 32px 20px 119px; } @media only screen and (max-width: 991px) { .blog-post-v1.style2 .blog-txt { padding: 21px 20px 20px 60px; } } @media only screen and (max-width: 767px) { .blog-post-v1.style2 .blog-txt { width: 100%; padding: 20px 20px 20px 60px; } } .blog-post-v1.style2 .box-holder { top: 21px; left: 24px; } @media only screen and (max-width: 991px) { .blog-post-v1.style2 .box-holder { left: 04px; } } .blog-post-v1.style2 .audio-area { position: relative; } .blog-post-v1.style2 .mejs-audio { left: 0; right: 0; top: 50%; margin: -35px 0 0; position: absolute; } .blog-post-v1.style2 .audio-area .mejs-controls .mejs-time, .blog-post-v1.style2 .audio-area .mejs-controls .mejs-button { width: 5% !important; } .blog-post-v1.style2 .audio-area .mejs-controls div.mejs-time-rail { width: 67% !important; } .blog-post-v1.style2 .mejs-container .mejs-controls, .blog-post-v1.style2 .mejs-container { background: #222222; } .blog-post-v1.style3 { width: 30%; padding: 0; float: left; background: white; margin: 0 2.6% 30px 0; } .dark .blog-post-v1.style3 { background: #222222; } @media only screen and (max-width: 1219px) { .blog-post-v1.style3 { width: 31%; margin: 0 1.2% 30px 0; } } @media only screen and (max-width: 991px) { .blog-post-v1.style3 { width: 48%; margin: 0 1.2% 30px 0; } } @media only screen and (max-width: 767px) { .blog-post-v1.style3 { width: 100%; margin: 0 0 20px; } } .blog-post-v1.style3 h2 { font-size: 18px; font-weight: 400; line-height: 26px; text-transform: inherit; } .blog-post-v1.style3 .img-box { margin: 0; } .blog-post-v1.style3 .blog-txt { padding: 12px 30px 20px 118px; border: 1px solid #f3f3f3; } .dark .blog-post-v1.style3 .blog-txt { border-color: #494949; } @media only screen and (max-width: 991px) { .blog-post-v1.style3 .blog-txt { padding: 12px 20px 20px 60px; } } .blog-post-v1.style3 p { margin: 0 0 3px; } .blog-post-v1.style3 .box-holder { top: 11px; left: 12px; } .blog-post-v1.style3.nospace { margin: 0; width: 33.3%; } @media only screen and (max-width: 991px) { .blog-post-v1.style3.nospace { width: 49.9%; } } @media only screen and (max-width: 767px) { .blog-post-v1.style3.nospace { margin: 0; width: 100%; } } .blog-post-v1.style-full { padding: 0 0 10px; margin: 0 0 17px; } .blog-post-v1.style-full .blog-txt { padding: 0 0 6px 89px; } @media only screen and (max-width: 991px) { .blog-post-v1.style-full .blog-txt { padding: 0 0 6px 60px; } } .blog-post-v1.style-full .main-blockquote { margin: 0 0 30px; padding: 74px 50px 54px 33px; } @media only screen and (max-width: 767px) { .blog-post-v1.style-full .main-blockquote { padding: 20px; } } .blog-post-v1.style4 h2 { text-transform: inherit; font-family: "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .blog-post-v1.style5 { width: 47%; padding: 0; float: left; background: white; margin: 0 1.5% 30px; } .dark .blog-post-v1.style5 { background: #222222; } @media only screen and (max-width: 991px) { .blog-post-v1.style5 { margin: 0 1.2% 30px; } } @media only screen and (max-width: 767px) { .blog-post-v1.style5 { width: 100%; margin: 0 0 20px; } } .blog-post-v1.style5 h2 { font-size: 18px; font-weight: 400; line-height: 26px; text-transform: inherit; } .blog-post-v1.style5 .img-box { margin: 0; } .blog-post-v1.style5 .blog-txt { border: 1px solid #f3f3f3; padding: 12px 30px 20px 118px; } .dark .blog-post-v1.style5 .blog-txt { border-color: #494949; } @media only screen and (max-width: 991px) { .blog-post-v1.style5 .blog-txt { padding: 12px 20px 20px 60px; } } .blog-post-v1.style5 p { margin: 0 0 3px; } .blog-post-v1.style5 .box-holder { top: 11px; left: 12px; } .blog-post-v1.style5.nospace { width: 49.9%; margin: 0; } @media only screen and (max-width: 767px) { .blog-post-v1.style5.nospace { margin: 0; width: 100%; } } .blog-post-v1.style6 { width: 24%; padding: 0; float: left; background: white; margin: 0 0.3% 20px; } .dark .blog-post-v1.style6 { background: #222222; } @media only screen and (max-width: 1219px) { .blog-post-v1.style6 { width: 32%; } } @media only screen and (max-width: 991px) { .blog-post-v1.style6 { width: 49%; margin: 0 0.3% 10px; } } @media only screen and (max-width: 767px) { .blog-post-v1.style6 { width: 100%; margin: 0 0 20px; } } .blog-post-v1.style6 h2 { font-size: 18px; font-weight: 400; line-height: 26px; text-transform: inherit; } .blog-post-v1.style6 .img-box { margin: 0; } .blog-post-v1.style6 .blog-txt { padding: 12px 10px 20px 95px; border: 1px solid #f3f3f3; } .dark .blog-post-v1.style6 .blog-txt { border-color: #494949; } @media only screen and (max-width: 991px) { .blog-post-v1.style6 .blog-txt { padding: 12px 20px 20px 60px; } } .blog-post-v1.style6 p { margin: 0 0 3px; } .blog-post-v1.style6 .box-holder { top: 11px; left: 6px; } .blog-post-v1.style6.nospace { margin: 0; width: 24.9%; } @media only screen and (max-width: 1219px) { .blog-post-v1.style6.nospace { width: 33.3%; } } @media only screen and (max-width: 991px) { .blog-post-v1.style6.nospace { width: 50%; } } @media only screen and (max-width: 767px) { .blog-post-v1.style6.nospace { margin: 0; width: 100%; } } /*------------------------------------------------------------------ 21-4. blog footer Styles / .blog-footer -------------------------------------------------------------------*/ .blog-footer { overflow: hidden; margin: 0 0 100px; } .blog-footer .btn-box { float: left; } @media only screen and (max-width: 767px) { .blog-footer .btn-box { float: none; overflow: hidden; margin: 0 0 10px; text-align: center; } } .blog-footer .btn-box .btn { color: #8f8f8f; margin: 0 7px 0 0; text-transform: uppercase; padding: 8px 30px 8px 29px; 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 .blog-footer .btn-box .btn { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .blog-footer .btn-box .btn:hover { color: white; text-decoration: none; } .dark .blog-footer .btn-box .btn:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .blog-footer .btn-load { color: #2a2a2a; margin: 27px 0 0; border: 1px solid #2a2a2a; text-transform: uppercase; padding: 8px 30px 8px 29px; -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-footer .btn-load { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .blog-footer .btn-load:hover { color: white; text-decoration: none; } .dark .blog-footer .btn-load:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .blog-footer .b-pagination { margin: 0; float: right; } @media only screen and (max-width: 767px) { .blog-footer .b-pagination { float: none; overflow: hidden; margin: 0 0 10px; text-align: center; } } .blog-footer .b-pagination li { float: left; margin: 0 0 0 9px; } @media only screen and (max-width: 767px) { .blog-footer .b-pagination li { float: none; vertical-align: top; display: inline-block; } } .blog-footer .b-pagination li.active a { color: white; pointer-events: none; text-decoration: none; } .blog-footer .b-pagination a { color: #8f8f8f; display: block; font-size: 13px; line-height: 20px; padding: 8px 20px; 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 .blog-footer .b-pagination a { color: rgba(143, 143, 143, 0.6); border-color: rgba(143, 143, 143, 0.6); } .blog-footer .b-pagination a:hover { color: white; text-decoration: none; } .dark .blog-footer .b-pagination a:hover { color: #8f8f8f; background: transparent; color: #8f8f8f; border-color: #8f8f8f; } .blog-footer.style3 { margin: 0 0 59px; } /*------------------------------------------------------------------ 21-5. blog masonry holder Styles / .blog-masonry-holder -------------------------------------------------------------------*/ .blog-masonry-holder { width: 105%; } @media only screen and (max-width: 991px) { .blog-masonry-holder { width: 100%; } } .blog-masonry-holder.full-width .blog-post-v1.style3 { width: 17.8%; margin: 0 1.57% 30px 0; } @media only screen and (max-width: 1500px) { .blog-masonry-holder.full-width .blog-post-v1.style3 { width: 31%; margin: 0 1.2% 30px 0; } } @media only screen and (max-width: 991px) { .blog-masonry-holder.full-width .blog-post-v1.style3 { width: 48%; margin: 0 2% 30px 0; } } @media only screen and (max-width: 767px) { .blog-masonry-holder.full-width .blog-post-v1.style3 { width: 100%; margin: 0 0 20px; } } .blog-masonry-holder.full-width .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 122px; } @media only screen and (max-width: 1500px) { .blog-masonry-holder.full-width .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 100px; } } @media only screen and (max-width: 991px) { .blog-masonry-holder.full-width .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 70px; } } .blog-masonry-holder.full-width.add-style { width: auto; margin: 0 -30px 0 -15px; } @media only screen and (max-width: 767px) { .blog-masonry-holder.full-width.add-style { margin: 0; } } .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 { margin: 0; width: 19.9%; } @media only screen and (max-width: 1500px) { .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 { width: 24.9%; margin: 0; } } @media only screen and (max-width: 991px) { .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 { width: 49.9%; margin: 0; } } @media only screen and (max-width: 767px) { .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 { width: 100%; margin: 0; } } .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 122px; } @media only screen and (max-width: 1500px) { .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 100px; } } @media only screen and (max-width: 991px) { .blog-masonry-holder.full-width.add-style .blog-post-v1.style3 .blog-txt { padding: 14px 10px 20px 70px; } } /*------------------------------------------------------------------ 21-6. post footer Styles / .post-footer -------------------------------------------------------------------*/ .post-footer { margin: 0 0 60px; overflow: hidden; padding: 0 0 17px; border-bottom: 1px solid #f3f3f3; } .dark .post-footer { border-color: #494949; } .post-footer .post-social { float: right; font-size: 13px; margin: 9px 0 0; line-height: 18px; text-transform: uppercase; } .post-footer .post-social li { float: left; margin: 0 0 0 25px; } .post-footer .post-social a { color: #2a2a2a; } .post-footer .post-social a:hover { text-decoration: none; } .post-footer .post-social a .fa { padding: 0 4px 0 0; } .dark .post-footer .post-social a { color: white; } .post-footer .post-social .fa-pinterest { color: #cc2127; } .post-footer .post-social .fa-twitter { color: #55acee; } .post-footer .post-social .fa-facebook { color: #3b5998; } .post-footer .post-tags { float: left; } .post-footer .post-tags .title { color: #262626; font-size: 14px; font-weight: 400; line-height: 24px; margin: 0 23px 0 0; display: inline-block; vertical-align: middle; } .dark .post-footer .post-tags .title { color: white; } .post-footer .post-tags ul { margin: 0; overflow: hidden; display: inline-block; vertical-align: middle; } .post-footer .post-tags ul li { float: left; margin: 0 6px 3px 0; } .post-footer .post-tags ul a { color: #8f8f8f; display: block; font-size: 13px; line-height: 20px; background: #f3f3f3; padding: 6px 16px 6px 13px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .post-footer .post-tags ul a { color: white; background: #191919; } .post-footer .post-tags ul a:hover { color: #f3f3f3; background: #8f8f8f; text-decoration: none; } .dark .post-footer .post-tags ul a:hover { color: white; background: #191919; } /*------------------------------------------------------------------ 21-7. post author box Styles / .post-author-box -------------------------------------------------------------------*/ .post-author-box { color: #8f8f8f; font-size: 14px; overflow: hidden; margin: 0 0 96px; line-height: 24px; background: #f8f8f8; border: 1px solid #f3f3f3; padding: 26px 40px 20px 30px; } .dark .post-author-box { background: #191919; border-color: #494949; } .post-author-box .img-box { float: left; margin: 5px 29px 0 0; } .post-author-box .img-box img { display: block; } @media only screen and (max-width: 767px) { .post-author-box .img-box { float: none; margin: 5px 0 10px; } } .post-author-box .holder { overflow: hidden; padding: 0 0 0 9px; } .post-author-box .title { color: #2a2a2a; display: block; margin: 0 0 0 -8px; font: 600 16px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .post-author-box .title { color: #8f8f8f; } .post-author-box .title a { color: #2a2a2a; } .dark .post-author-box .title a { color: #8f8f8f; } .post-author-box .aut-text { display: block; margin: 0 0 9px; font-size: 12px; line-height: 20px; padding: 0 0 0 8px; } .post-author-box .aut-text a { color: #8f8f8f; } /*------------------------------------------------------------------ 21-8. blog post v2 Styles / .blog-post-v2 -------------------------------------------------------------------*/ .blog-post-v2 { float: left; color: #8f8f8f; width: 33.33%; font-size: 14px; margin: 0 0 36px; line-height: 24px; } @media only screen and (max-width: 767px) { .blog-post-v2 { float: none; width: 100%; } } .blog-post-v2 .more { color: #2a2a2a; font-size: 12px; line-height: 20px; } .blog-post-v2 .beans-slider .beans-pagination { bottom: 5px; } .blog-post-v2 .beans-slider .beans-pagination li { margin: 0 6px 0 5px; display: inline-block; vertical-align: top; } .blog-post-v2 .beans-slider .beans-pagination li .active a { background: white; } .blog-post-v2 .beans-slider .beans-pagination a { 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; } .blog-post-v2 .beans-slider .beans-pagination a:hover { background: white; text-decoration: none; } .blog-post-v2 .blog-txt { position: relative; padding: 0 0 20px 103px; -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-post-v2 .blog-txt { padding: 0 0 0 58px; } } .blog-post-v2 img { width: 100%; } .blog-post-v2 .img-box { margin: 0 0 15px; overflow: hidden; position: relative; border-left: 1px solid white; } .dark .blog-post-v2 .img-box { border-color: #222222; } .blog-post-v2 h2 { color: #2a2a2a; margin: 0 0 8px; font: 18px/26px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .blog-post-v2 h2 { color: white; } .blog-post-v2 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 .blog-post-v2 h2 a { color: white; } .blog-post-v2 h2 a:hover { text-decoration: none; } .blog-post-v2 .meta { color: #8f8f8f; font-size: 12px; margin: 0 0 17px; line-height: 21px; } .blog-post-v2 .meta 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; } .blog-post-v2 .meta a:hover { text-decoration: none; } .blog-post-v2 .meta li { padding: 0 12px 0 0; } .blog-post-v2 .box { top: -4px; left: 9px; 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-post-v2 .box { left: 3px; } } .blog-post-v2 .fluid-width-video-wrapper { padding: 18.85% !important; } .blog-post-v2 time { color: white; display: block; font-size: 14px; line-height: 21px; padding: 19px 0 0; background: #2a2a2a; text-align: center; margin: -5px auto 0; width: 74px; height: 74px; text-transform: uppercase; } @media only screen and (max-width: 991px) { .blog-post-v2 time { font-size: 10px; padding: 4px 0 0; line-height: 18px; width: 40px; height: 40px; } } .blog-post-v2 time .add { display: block; font-size: 22px; font-weight: 700; } @media only screen and (max-width: 991px) { .blog-post-v2 time .add { font-size: 16px; } } .blog-post-v2 .fa { margin: 0 3px 0 0; } .blog-post-v2 .icon { color: white; display: block; font-size: 32px; text-align: center; padding: 22px 0 0 2px; width: 84px; height: 84px; border: 5px solid white; } .dark .blog-post-v2 .icon { border-color: #222222; } @media only screen and (max-width: 991px) { .blog-post-v2 .icon { font-size: 22px; padding: 4px 0 0 2px; width: 50px; height: 50px; } } .blog-post-v2 blockquote { margin: 0; border: 0; color: #2a2a2a; min-height: 257px; background: #f3f3f3; padding: 81px 30px 24px 23px; } .dark .blog-post-v2 blockquote { color: white; background: #191919; } @media only screen and (max-width: 1219px) { .blog-post-v2 blockquote { padding: 25px 20px 24px; } } .blog-post-v2 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: 1219px) { .blog-post-v2 blockquote q { font-size: 18px; line-height: 20px; } } .blog-post-v2 blockquote q:after { top: -10px; left: -16px; content: '"'; color: #2a2a2a; font-size: 46px; font-weight: 900; position: absolute; } .dark .blog-post-v2 blockquote q:after { color: white; } .blog-post-v2 .audio-area { position: relative; } .blog-post-v2 .mejs-audio { left: 0; right: 0; top: 50%; margin: -19px 0 0; position: absolute; } .blog-post-v2 .audio-area .mejs-controls .mejs-time, .blog-post-v2 .audio-area .mejs-controls .mejs-button { width: 5% !important; } .blog-post-v2 .audio-area .mejs-controls div.mejs-time-rail { width: 67% !important; } @media only screen and (max-width: 767px) { .blog-post-v2 .audio-area .mejs-controls div.mejs-time-rail { width: 65% !important; } } .blog-post-v2 .mejs-container .mejs-controls, .blog-post-v2 .mejs-container { background: #222222; } /*------------------------------------------------------------------ 21-9. widget Styles / .widget -------------------------------------------------------------------*/ .widget { margin: 0 0 58px; padding: 0 0 62px; position: relative; border-bottom: 2px solid #f3f3f3; } .dark .widget { border-color: #494949; } .widget:before { left: 0; bottom: -2px; background: #2a2a2a; width: 50px; height: 2px; } .dark .widget:before { background: #191919; } .widget h2 { color: #2a2a2a; margin: 0 0 26px; letter-spacing: 2px; font: 600 16px/25px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .widget h2 { color: white; } .widget .searchform { overflow: hidden; position: relative; border: 1px solid #f3f3f3; } .dark .widget .searchform { border-color: #494949; } .widget .searchform .input { border: 0; margin: 0; width: 100%; float: left; height: 36px; color: #8f8f8f; outline: none; font-size: 14px; background: none; line-height: 20px; padding: 8px 60px 8px 21px; } .widget .searchform .input::-webkit-input-placeholder { color: #8f8f8f; } .widget .searchform .input:-moz-placeholder { color: #8f8f8f; } .widget .searchform .input::-moz-placeholder { color: #8f8f8f; opacity: 1; } .widget .searchform .input:-ms-input-placeholder { color: #8f8f8f; } .widget .searchform button { top: 0; right: 0; margin: 0; border: 0; bottom: 0; color: white; padding: 0 11px; font-size: 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; } .widget .searchform button:hover { background: #8f8f8f; } .widget .tabset { margin: 0; font-size: 0; letter-spacing: 0; } .widget .tabset li { padding: 0; } .widget .tabset li.active a { color: white; } .widget .tabset a { color: #262626; display: block; font-size: 13px; line-height: 20px; background: #f6f6f6; text-transform: uppercase; padding: 11px 18px 9px 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 .widget .tabset a { color: white; background: #191919; } .widget .tabset a:hover { color: white; text-decoration: none; } .widget .tab-content { padding-top: 20px; padding-bottom: 32px; background: #f6f6f6; } .dark .widget .tab-content { background: #191919; } .widget .tab-content .box { overflow: hidden; text-transform: uppercase; padding: 20px 10px 15px 19px; } .widget .tab-content .box .img-box { float: left; margin: 0 13px 0 0; } @media only screen and (max-width: 991px) { .widget .tab-content .box .img-box { float: none; margin: 0 0 10px; } .widget .tab-content .box .img-box img { width: 100%; } } @media only screen and (max-width: 767px) { .widget .tab-content .box .img-box { float: left; margin: 0 13px 0 0; } .widget .tab-content .box .img-box img { width: auto; } } .widget .tab-content .box .img-box img { display: block; } .widget .tab-content .box .holder { overflow: hidden; } .widget .tab-content .box time { color: #8f8f8f; display: block; margin: 0 0 2px; font-size: 12px; } .widget .tab-content .box h3 { margin: 0; color: #2a2a2a; font: 13px/19px "Lato", Georgia, "Times New Roman", Times, serif; } .dark .widget .tab-content .box h3 { color: white; } .widget.search-widget { margin-top: -7px; } .widget.s-social-widget { font-size: 13px; margin: 0 0 52px; } .widget.s-social-widget ul { margin: 0; } .widget.s-social-widget ul li { margin: 0 0 2px; } .widget.s-social-widget ul a { color: white; display: block; background: #262626; padding: 13px 19px 10px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .widget.s-social-widget ul a:hover { background: #55acee; text-decoration: none; } .widget.s-social-widget .fa { padding: 0 9px 0 0; display: inline-block; vertical-align: top; } .widget.cate-widget { margin: 0 0 52px; padding: 0 0 46px; font: 14px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .widget.cate-widget h2 { margin: 0 0 20px; } .widget.cate-widget a { color: #8f8f8f; position: relative; padding: 0 0 0 11px; letter-spacing: 1px; -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; } .widget.cate-widget a:hover { text-decoration: none; } .widget.cate-widget a:hover .fa { color: #8f8f8f; } .widget.cate-widget a .fa { left: 0; top: 2px; position: absolute; } .widget.cate-widget ul { margin: 0; overflow: hidden; } .widget.cate-widget ul li { margin: 0 0 10px; } .widget.cate-widget ul li.active a .fa { color: #8f8f8f; } .widget.cate-widget.big-icon a { padding: 0 0 0 20px; } .widget.toppost-widget { margin: 0 0 51px; } .widget.video-widget { margin: 0 0 51px; } .widget.tag-widget ul { margin: 0; overflow: hidden; } .widget.tag-widget ul li { float: left; margin: 0 6px 3px 0; } .widget.tag-widget ul a { color: #8f8f8f; display: block; font-size: 13px; line-height: 20px; background: #f3f3f3; padding: 6px 16px 6px 13px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .dark .widget.tag-widget ul a { background: #191919; } .widget.tag-widget ul a:hover { color: #f3f3f3; background: #8f8f8f; text-decoration: none; } .dark .widget.tag-widget ul a:hover { background: #494949; } .widget.test-widget .beans-slider { padding: 0; } .widget.test-widget .beans-slider .beans-pagination li { margin: 0 3px 0 2px; display: inline-block; vertical-align: top; } .widget.test-widget .beans-slider .beans-pagination li.active a { background: #2a2a2a; } .widget.test-widget .beans-slider .beans-pagination a { display: block; overflow: hidden; background: #ddd; border-radius: 50%; text-indent: -9999px; width: 15px; height: 15px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .widget.test-widget .beans-slider .beans-pagination a:hover { background: #2a2a2a; text-decoration: none; } .widget:last-child { border: 0; } .widget:last-child:before { display: none; } /*------------------------------------------------------------------ 21-10. comment box Styles / .comment-box -------------------------------------------------------------------*/ .comment-box { overflow: hidden; } .comment-box h4 { color: #222222; margin: 0 0 29px; font: 600 21px/24px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .comment-box h4 { color: white; } .comment-box .list { overflow: hidden; margin: 0 0 29px; } .comment-box .list ul { margin: 0 0 0 9.3%; } .comment-box .list ul ul { margin: 0 0 0 11.3%; } .comment-box .box { color: #8f8f8f; font-weight: 500; margin: 0 0 29px; font-style: italic; background: #f8f8f8; padding: 30px 22px 23px 29px; } .dark .comment-box .box { background: #191919; border: 1px solid #494949; } .comment-box .box .img-box { float: left; font-style: normal; margin: 0 20px 0 0; text-align: center; } @media only screen and (max-width: 767px) { .comment-box .box .img-box { float: none; margin: 0 0 10px; } } .comment-box .box .img-box img { display: block; margin: 0 0 6px; } .comment-box .box .img-box .reply { font-size: 20px; color: #dddddd; position: relative; display: inline-block; vertical-align: top; } .comment-box .box .img-box .reply:hover { text-decoration: none; } .comment-box .box .img-box .reply:hover .txt-over { display: block; } .comment-box .box .img-box .reply .txt-over { left: 50%; width: 56px; display: none; bottom: -26px; color: white; font-size: 10px; font-weight: 600; padding: 4px 3px; text-align: center; background: black; border-radius: 11px; position: absolute; margin: 0 0 0 -28px; } .comment-box .box .img-box .reply .txt-over:after { left: 50%; bottom: 100%; margin: 0 0 0 -2px; width: 0; height: 0; border-style: solid; border-width: 0 3.5px 5px 3.5px; border-color: transparent transparent black transparent; } .comment-box .box .holder { overflow: hidden; } .comment-box .box .title { color: #2a2a2a; display: block; margin: 0 0 1px 0; letter-spacing: 2px; text-transform: uppercase; font: 600 12px/18px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .comment-box .box .title { color: white; } .comment-box .box time { display: block; font-size: 12px; margin: 0 0 9px; line-height: 20px; font-style: normal; } /*------------------------------------------------------------------ 21-11. related post widget Styles / .related-post-widget -------------------------------------------------------------------*/ .related-post-widget { padding-top: 88px; padding-bottom: 42px; } .related-post-widget h5 { color: #222222; margin: 0 0 49px; font: 600 36px/42px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } .dark .related-post-widget h5 { color: white; } /*------------------------------------------------------------------ 21-12. blog container Styles / .blog-container -------------------------------------------------------------------*/ .blog-container { padding: 75px 0 0; } .blog-container h2 { font-weight: 400; text-transform: inherit; font-family: "Playfair Display", "Helvetica Neue", Helvetica, Arial, sans-serif; } /*------------------------------------------------------------------ 21-13. blog4 home Styles / .blog4-home -------------------------------------------------------------------*/ .blog4-home .blog-footer { margin: -48px 0 0; text-align: center; padding: 28px 81px 59px 0; } @media only screen and (max-width: 991px) { .blog4-home .blog-footer { padding: 28px 0 59px; } } .blog4-home .blog-post-v2 { margin: 0 0 49px; } .blog4-home .blog-post-v2 blockquote { min-height: 248px; } @media only screen and (max-width: 1219px) { .blog4-home .blog-post-v2 blockquote { min-height: 0; } } .blog4-home .blog-post-v2 .blog-txt { padding-bottom: 0; overflow: hidden; } .blog4-home .blog-post-v2 .blog-txt p { margin: 0 0 6px; } @media only screen and (max-width: 991px) { .blog4-home .blog-post-v2 { width: 100%; } } /* UPDATE */ .shop-gallery .btn-next, .shop-gallery .btn-prev { left: 0; top: 50%; opacity: 0; z-index: 55; color: #fff; font-size: 52px; overflow: hidden; margin: 38px 0 0; line-height: 30px; text-align: center; position: absolute; visibility: hidden; width: 58px; height: 58px; background: rgba(0, 0, 0, .85); -webkit-transition: all .4s ease; transition: all .4s ease; } .shop-gallery .btn-next, .shop-gallery .btn-prev { left: 0; top: 50%; opacity: 0; z-index: 55; color: #fff; font-size: 52px; overflow: hidden; margin: 38px 0 0; line-height: 30px; text-align: center; position: absolute; visibility: hidden; width: 58px; height: 58px; background: rgba(0, 0, 0, .85); -webkit-transition: all .4s ease; transition: all .4s ease; } .shop-gallery .btn-next { right: 0; left: auto; } .shop-gallery .btn-next:hover, .shop-gallery .btn-prev:hover { text-decoration: none; } .shop-gallery:hover .btn-next, .shop-gallery:hover .btn-prev { opacity: 1; visibility: visible; } .shop-gallery:hover .btn-prev { left: 14px; } .shop-gallery:hover .btn-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; } /*------------------------------------------------------------------ 9-3. collection block Styles / .collection-block -------------------------------------------------------------------*/ .collection-block { padding-top: 104px; padding-bottom: 50px; } .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; } .collection-over { z-index: 5; padding: 10px; background: rgba(0, 0, 0, .2); } .collection-over:after { z-index: -1; background: rgba(0, 0, 0, .35); -webkit-transition: all .25s ease; transition: all .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 #fff; 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: #fff; text-transform: uppercase; font: 700 34px/43px "Lato", Georgia, "Times New Roman", Times, serif; margin: -5px 0 10px; } .collection-over .box h2 .txt { display: block; font-weight: 300; } .collection-over.add .box { padding-bottom: 28px; vertical-align: bottom; } .collection-over.add .box h2 { font-size: 24px; line-height: 34px; } .collection-over.add2 .box { padding-bottom: 28px; vertical-align: bottom; }