expcloud最新版-outline

/* ----------------------------------------- */ /* View slug: home-page-news - start */ /* ----------------------------------------- */ .page_dots { float:right; bottom:0; margin-top: 10px; margin-right: 2px; } /* center the page selector horizonatlly */ ul.wpv_pagination_dots { margin: 0; list-style: none outside none; } /* center the page selector horizonatlly */ ul.wpv_pagination_dots li.wpv_pagination_dots_item { float: left; margin-right: 10px; list-style-position: outside; list-style-type: none; } /* remove the defaulf styles for link offered by the theme */ .wpv_pagination_dots li a { display: block; position: relative; float: right; height: 0; overflow: hidden; padding-top: 16px; width: 16px; margin: 0px 0px 0px -35px; } .wpv_pagination_dots li.wpv_page_current a { background-position: 0 -16px; } /* ----------------------------------------- */ /* View slug: home-page-news - end */ /* ----------------------------------------- */

/* ----------------------------------------- */ /* Content Template: Loop item in News Archive 2 - start */ /* ----------------------------------------- */ .newsbox { background-color:#fff; } .newsbox:nth-child(4n+2), .newsbox:nth-child(4n+3) { background-color:#fcfcfc; } ================================================ */ /* ================================================ 1. GENERAL STYLE 2. TYPOGRAPHY 3. ELEMENTS 4. NAVIGATION 5. MAIN INTRO SECTION 6. VIDEO INTRO SECTION 7. ABOUT SECTION 8. SERVICES SECTION 9. FEATURES SECTION 10. PROJECTS SECTION 11. SINGLE PROJECT PAGE 12. CONTACT SECTION 13. GMAP SECTION 14. FOOTER SECTION 15. NEWSLETTER SECTION 16. SERVICES PAGE 17. ABOUT PAGE 18. BLOG PAGE 19. POST PAGE 20. RESPONSIVE STYLES ================================================ */ /* ---- services-section ---- */ .service-wrap { position: relative; margin: 0 auto; width: 100%; height: 100%; } .service-wrap figure { position: relative; display: block; overflow: hidden; height: 250px; float: left; margin: 0; width: 100%; } .service-wrap .col-md-6 { padding: 0; margin: 0; } .service-wrap .light { background-color: #ffffff; } .service-wrap .dark { background-color: #fcfcfc; } .service-wrap figure img { width: 100%; height: auto; opacity: 0.2; vertical-align: middle; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .service-wrap figure figcaption::before, .service-wrap figure figcaption::after { pointer-events: none; } .service-wrap figure figcaption { position: absolute; top: 0; left: 0; height: 100%; padding: 0 15px 0; } .service-wrap figure h4 { color: #465862; text-transform: uppercase; margin: 10px 0 0; } .service-wrap figure i { color: #333333; word-spacing: 1px; font-size: 32px; } .service-wrap figure span { color: #333333; float: right; word-spacing: 1px; font-size: 15px; } .service-wrap figure span:hover { color: #465862; } .service-wrap figure.service img { width: -webkit-calc(100% + 50px); width: calc(100% + 50px); opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-40px, 0); transform: translate3d(0,-40px,0); } .service-wrap figure.service figcaption { top: auto; cursor: pointer; bottom: 0; } .service-wrap figure.service:hover img { opacity: 0.1; } .service-wrap figure.service:hover img { color: rgba(255, 255, 255, 0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } @media screen and (max-width: 480px) { .service-wrap figure figcaption { padding: 0 10px 0; } } /* ---- service-tabs section ---- */ .service-container { position: relative; width: 100%; margin: 100px 0 0; } .service-tabs { text-align: center; padding: 10px 0 0; } .service-container li { display: inline-block; position: relative; padding: 20px; line-height: 1px; } .service-container li > a:after { content: ''; clear: both; display: block; } .service-container .tab-info { padding: 20px 0 0; z-index: 2; } .service-container .tab-info .tab-header { font-family: 'Josefin Sans', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 2px; padding: 40px 0 10px; margin: 0; color: #465862; } .service-container .tab-info .tab-text { padding: 30px 0 0; font-size: 16px; line-height: 25px; margin: 0; } .service-container li a .tab-icon { text-align: center; color: #5f5f5f; font-size: 55px; padding: 10px 0 10px; margin: 25px; } .service-container li:hover, .service-container li:focus, .service-container li:active, .service-container li.active { background-color: #fcfcfc; text-decoration: none; color: #e9e9e9; } .service-container li:hover .tab-icon i, .service-container li:focus .tab-icon i, .service-container li:active .tab-icon i, .service-container li.active .tab-icon i { color: #465862; } .service-container .tab-content { display: block; width: 100%; margin: 0; } .service-container .tab-content img { width: 100%; height: 100%; } .service-container .tab-content .tab-pane { position: relative; margin: 20px 0 0; } @media screen and (max-width: 997px) { .service-container li { display: inline-block; margin: 0 auto; padding: 25px; } .service-container .tab-info { text-align: center; padding: 10px 0 10px; } .service-container li > a .tab-icon { text-align: center; font-size: 40px; padding: 10px 0 10px; margin: 14px; } .service-container .tab-content .tab-pane { margin: 20px 0 0; } .service-container li > a .tab-info .tab-title { font-size: 16px; } .service-container li > a .tab-info .tab-desc { font-size: 15px; } .service-container .tab-info .tab-text { font-size: 16px; } } @media screen and (max-width: 768px) { .service-container { margin: 50px 0 0; text-align: center; } .service-container .tab-info { text-align: center; padding: 15px 0 10px; } .service-container li > a .tab-icon { text-align: center; font-size: 32px; padding: 10px 0 10px; margin: 10px; } .service-container .tab-info .tab-header { font-size: 20px; line-height: 1.3; padding: 10px 0 0; } .service-container .tab-info .tab-text { font-size: 15px; padding: 10px 0 0; margin: 0; } } @media screen and (max-width: 480px) { .service-container li { display: inline-block; padding: 0; } .service-container .tab-info { text-align: center; padding: 5px 0 5px; } .service-container li > a .tab-icon { text-align: center; font-size: 30px; padding: 10px 0 10px; margin: 10px; } .service-container .tab-info .tab-header { font-size: 16px; line-height: 1.3; padding: 5px 0 0; } .service-container .tab-info .tab-text { font-size: 14px; padding: 5px 0 0; } } /* ----------------------------------------- */ /* Content Template: Loop item in News Archive 2 - end */ /* ----------------------------------------- */