/* ----------------------------------------- */ /* View: News Archive - start */ /* ----------------------------------------- */ .news-form-button { width:49%; transition: background-color 0.2s ease; } .news-form-button:hover { color:#f7f7f7; background-color:#232531; border-color:#232531; } .news-search input[type=text] { width:100%; } /* ----------------------------------------- */ /* View: News Archive - end */ /* ----------------------------------------- */

/* ----------------------------------------- */ /* Content Template: Loop item in News Archive - 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 ====== */ #services .services-left i.icon { display: block; font-size: 36px; color: #465862; } #services .services-left .service-title { font-size: 18px; margin-bottom: 20px; display: inline-block; } #services span { font-family: 'Josefin Sans', sans-serif; letter-spacing: 1px; font-size: 17px; padding: 10px 0 12px; font-weight: 700; display: inline-block; text-transform: uppercase; } #services .left-row { padding: 0 0 60px; } #services .services-left ul li { list-style: none; text-transform: uppercase; line-height: 30px; padding-left: 15px; color:#999999; } #service-intro { position: relative; background-color: #ffffff; } #service-intro .leftcol { padding-right: 80px; border-right: solid 1px #E6E9EA; } #service-intro .rightcol { padding-left: 80px; } @media (max-width: 997px) { #services .left-row { padding: 0; } #services .right-row { margin: 0 0 40px; } #services .service-single { margin: 0 0 40px; } #services .services-left { text-align: center; margin-bottom: 50px; } #service-intro .leftcol { padding: 0 15px; margin-bottom: 15px; border-right: none; } #service-intro .rightcol { padding: 0 15px; } #services .service-img img { width: 100%; margin: 0 auto; } } /* ---- 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; width: 90%; height: 100%; padding: 0 50px 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; height: 85%; } .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 - end */ /* ----------------------------------------- */