.fadeInCdb { -webkit-animation-name: fadeInCdb; animation-name: fadeInCdb; } @-webkit-keyframes fadeInCdb { 0% { top: 40px; opacity: 0; } 100% { top: 0; opacity: 1; } } @keyframes fadeInCdb { 0% { top: 40px; opacity: 0; } 100% { top: 0; opacity: 1; } } .mtop20{ margin-top: 20px; } .mtop60{ margin-top: 60px; } .all-center { margin:0 auto; } .site-wrapper { position: relative; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } .side-menu-left .site-wrapper { padding-left: 260px; } .side-menu-right .site-wrapper { padding-right: 260px; } .fixed-header .site-wrapper { padding-top: 80px; } .limit-width { max-width: 1170px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .section-block { position: relative; z-index: 10; } .section-bg { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: .1; } .accent { color: #1870ca; } .page-content { padding: 80px 0; } .no-padding-bottom { padding-bottom: 0; } .no-padding { padding: 0; } .image-holder img { width: 100%; max-width: 100%; height: auto; } .grey-section { background: #eee; } .white-section { background: #f7f7f7; } .dark-section { background: #111111; } .dark-section .section-title { color: #ffffff; } .dark-section p { color: rgba(255, 255, 255, 0.6); } .section-title-wrapper { margin-top: 50px; margin-bottom: 50px; } .section-title-wrapper h2 a{ color: #111111; } .no-margin { margin: 0; } .section-space { width: 100%; height: 70px; position: relative; float:left; } .mid-space { width: 100%; height: 50px; position: relative; float:left; } .small-space { width: 100%; height: 25px; position: relative; } .shadow-gradient { position: absolute; bottom: -14px; left: 0; height: 14px; width: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-size: 100%; background-image: -webkit-linear-gradient(top, rgba(2, 11, 34, 0.04) 0%, rgba(248, 248, 248, 0) 100%); background-image: linear-gradient(to bottom, rgba(2, 11, 34, 0.04) 0%, rgba(248, 248, 248, 0) 100%); } .back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 32px; height: 32px; font-size: 22px; text-align: center; line-height: 36px; color: #111111; background: rgba(255, 255, 255, 0.2); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover, .back-to-top:focus { color: #111111; } .social a { display: inline-block; color: #111111; font-size: 12px; width: 34px; height: 34px; border-radius: 18px; text-align: center; line-height: 34px; background: #ededed; margin: 0 2px 0; } .social a:hover { color: #111111; background: #e3e3e3; } .contact-info p { position: relative; padding-left: 0px; margin-bottom:20px; } .contact-info p i { top: 0; left: 0; position: absolute; } /* Dark Version */ .dark-version { color: #aaaaaa; } .dark-version h1, .dark-version h2, .dark-version h3, .dark-version h4, .dark-version h5, .dark-version h6 { color: #ffffff; } .dark-version .service-icon .icon-box i { color: #ffffff; } .dark-version .header-type-1 { background: #111111; } .dark-version .main-nav ul > li > a { color: #aaaaaa; } .dark-version .main-nav ul > li > a:hover { color: #ffffff; background: #1b1b1b; } .dark-version .main-nav ul > li.current-menu-item a { color: #ffffff; background: #1b1b1b; } .dark-version .main-nav ul > li .sub-menu li a { background: transparent; color: #aaaaaa; } .dark-version .social a { background: #202020; color: #ffffff; } .dark-version .grey-section { background: #161616; } .dark-version .white-section { background: #1b1b1b; } .dark-version .post-entry.grid .post-content { background: #252525; } .dark-version .post-entry.grid .post-title a { color: #ffffff; } .dark-version .call-to-action.light { background: #252525; } .button, button { padding: 12px 30px; border-radius: 0px; display: inline-block; outline: 0; border: 0; } .button.big, button.big { font-size: 17px; } .button.default, button.default { background: #1870ca; color: #ffffff; } .button.default:hover, button.default:hover { background: #1e1e1e; } .button.accent, button.accent { background: #1870ca; color: #ffffff; } .form-control { border: 1px solid #efefef; background: #ffffff; padding: 12px; height: auto; border-radius: 0; margin-bottom: 30px; } .form-control:focus { box-shadow: none; border-color: #d6d6d6; } .form-half { position: relative; width: 46%; margin-left: auto; margin-right: auto; } iframe { border: 0; } .panel-group .panel { border: 0; border-radius: 0; margin-bottom: 15px; } .panel { box-shadow: none; } .panel-default > .panel-heading { background: #f7f7f7; border-radius: 0; border: 0; } .panel-heading { padding: 0; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border: 0; } .panel-title > a { padding: 20px; padding-left: 70px; display: block; color: #111111; position: relative; } .panel-title > a:hover, .panel-title > a:focus { color: #111111; } .panel-title i{ position: absolute; font-family: FontAwesome; top: 0; left: 0; width: 57px; height: 57px; line-height: 57px; text-align: center; font-size: 12px; background: #eaeaea url(../img/jia.jpg) no-repeat center; } .panel-title a.collapsed:i { background: #eaeaea url(../img/jian.jpg) no-repeat center; } ::-moz-selection { background: #1870ca; color: #ffffff; } ::selection { background: #1870ca; color: #ffffff; } h1, h2, h3, h4, h5, h6 { color: #111111; } h3 { font-size: 20px; line-height: 1.5; } p.small { font-size: 13px; } p.headline { font-size: 22px; line-height: 1.6; } img, picture { margin: 0; max-width: 100%; } blockquote { color: #111111; } .site-footer .widgetized-area { background: url(../../assets/images/bg.jpg) repeat-x #1e4485; padding: 40px 0 10px; color:#ffffff; } .site-footer .widgetized-area .widget { margin-bottom: 20px; } .site-footer .widgetized-area .widget a { color: #ffffff; font-size: 15px; } .site-footer .widgetized-area .widget a:hover { color: #ffffff; } .site-footer .widgetized-area .widget-title { font-size: 18px; color: #ffffff; margin-bottom: 20px; } .site-footer .widgetized-area .quick-links ul li:before { font-family: FontAwesome; margin-right: 5px; content: '\f105'; } .site-footer .copyright { padding: 20px 0; } .main-side-menu { width: 260px; height: 100%; position: fixed; z-index: 30; top: 0; bottom: 0; background: #ffffff; box-shadow: 0 0px 7px -1px rgba(0, 0, 0, 0.1); } .main-side-menu .social { position: fixed; bottom: 0; padding: 40px; } .main-side-menu.left { left: 0; } .main-side-menu.left .social { left: 0; } .main-side-menu.right { right: 0; } .main-side-menu.right .social { right: 0; } .sidebar-menu-inner { padding: 20px 40px 60px 40px; } .vertical-logo { padding-top: 40px; } .vertical-logo img { max-width: 150px; } .header-type-1 { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } .header-navigation { display: table; width: 100%; table-layout: auto; } .header-navigation .logo, .header-navigation .main-menu, .header-navigation .header-right { display: table-cell; vertical-align: middle; width: auto; white-space: nowrap; } .header-navigation .logo { width: 1%; } .header-navigation .logo img { max-width: 160px; } .header-navigation .main-menu { padding-left: 70px; } .header-navigation .header-right .social { float: right; } .vertical-menu { margin-top: 50px; } .vertical-menu ul li { position: relative; } .vertical-menu ul > li.current-menu-item a { color: #1870ca; } .vertical-menu ul > li ul { display: none; overflow: hidden; padding-left: 10px; } .vertical-menu ul > li ul a { color: #707070; line-height: 30px; } .vertical-menu ul > li ul a:hover { color: #1870ca; } .vertical-menu > ul > li > a { color: #111111; font-size: 16px; line-height: 36px; } .vertical-menu > ul > li > a:hover { color: #1870ca; } .main-nav ul > li { position: relative; float: left; display: block; } .main-nav ul > li.current-menu-item a { background: #f7f7f7; } .main-nav ul > li > a { display: block; padding: 25px 15px; font-size: 17px; color: #111111; } .main-nav ul > li > a i { margin-left: 0.3125em; font-size: 14px; } .main-nav ul > li > a:hover { background: #f7f7f7; } .main-nav ul > li .sub-menu { display: none; position: absolute; min-width: 230px; top: 100%; left: 0; padding: 17px 0px 17px; background: #111111; } .main-nav ul > li .sub-menu li { display: block; float: none; } .main-nav ul > li .sub-menu li a { color: #aaaaaa; line-height: 34px; display: block; padding: 0 24px; font-size: 15px; cursor: pointer; white-space: nowrap; background: transparent; } .main-nav ul > li .sub-menu li a:hover { color: #ffffff; } .mobile-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 103; background: #ffffff; } .mobile-header .mobile-header-inner { display: table; width: 100%; padding: 12px 0; } .mobile-header .logo, .mobile-header-right, .mobile-header .mobile-menu-toggle { display: table-cell; vertical-align: middle; } .mobile-header .logo { float: left; width: 100px; position: relative; z-index: 104; } .mobile-header-right{ float: right; position: relative; top: 4px; right: 30px; width: 0.7%; } .mobile-header-right .social a { display: inline-block; color: #111111; font-size: 12px; width: 30px; height: 30px; border-radius: 18px; text-align: center; line-height: 30px; background: #ededed; margin: 0 2px 0; } .mobile-header .mobile-menu-toggle { float: right; position: relative; top: 10px; right: 60px; width: 1%; } #toggle-nav { padding: 3px 5px; position: absolute; z-index: 9999; width: 24px; height: 17px; background: transparent; margin: 0; border: none; outline: none; cursor: pointer; } #toggle-nav > span { background: #131313; height: 2px; position: absolute; left: 0; right: 0; -webkit-transform-origin: center center 0; transform-origin: center center 0; -webkit-transition: all 150ms ease; transition: all 150ms ease; } #toggle-nav .top-line { top: 0; } #toggle-nav .middle-line { top: 50%; margin-top: -1px; } #toggle-nav .bottom-line { top: 100%; } #toggle-nav.active .top-line { top: 50%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } #toggle-nav.active .middle-line { opacity: 0; } #toggle-nav.active .bottom-line { top: 50%; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .mobile-navigation { padding-top: 60px; display: none; position: fixed; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; background: #ffffff; -webkit-overflow-scrolling: touch; } .mobile-navigation ul li { position: relative; z-index: 10; } .mobile-navigation ul li .sub-menu { display: none; padding-left: 20px; } .mobile-navigation ul li.dropdown-open .expander > i:before { content: "\4b"; } .mobile-navigation .expander { font-size: 20px; position: absolute; top: 0; right: 0; line-height: 50px; height: 50px; width: 50px; text-align: right; } .mobile-navigation a { font-size: 16px; border-bottom: 1px solid #efefef; color: #707070; padding: 15px 0; display: block; position: relative; line-height: 18px; } .page-title-wrapper { position: relative; background: #111111; } .page-title-wrapper .page-title-bg { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: .4; } .page-title-wrapper .page-title-inner { display: table; vertical-align: middle; width: 100%; padding: 140px 0; } .page-title-wrapper .page-title-inner .page-title-content { background: rgba(255, 255, 255, 0.05); padding: 40px; border-radius: 4px; text-align: center; display: table-cell; vertical-align: middle; } .page-title-wrapper .page-title-inner .page-title-content h2 { font-size: 40px; color: #ffffff; margin-top: 0; } .page-title-wrapper .page-title-inner .page-title-content p { font-size: 18px; line-height: 1.6; padding-top: 10px; margin: 0; color: #ffffff; } .page-title-2 { background: #3367d5; color:#ffffff; padding: 40px 0; } .page-title-2 h2 { font-size: 24px; margin-top: 0; color:#ffffff; margin-bottom: 8px; } .page-title-2 p { margin-bottom: 0; } .sidebar .widget { margin-bottom: 40px; } .sidebar .widget .widget-title { font-size: 20px; margin-bottom: 20px; margin-top: 0; } .services-widget { padding: 30px; background: #1870ca; } .services-widget .widget-title { color: #ffffff; } .services-widget ul li { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-left: 20px; position: relative; } .services-widget ul li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); } .services-widget ul li:before { font-family: FontAwesome; content: '\f105'; color: #ffffff; position: absolute; top: 11px; left: 5px; } .services-widget ul li a { font-size: 16px; color: #ffffff; display: block; } .services-widget ul li a:hover { color: #fee4d0; } .blog-sidebar { padding-left: 0px; } .blog-sidebar .widget { margin-bottom: 20px; border: 1px solid #efefef; padding: 30px; } .blog-sidebar .widget .widget-title { font-weight: 700; margin: 0 0 20px 0; } .blog-sidebar .widget p:last-of-type { margin-bottom: 0; } .blog-sidebar a { color: #111111; } .blog-sidebar a:hover { color: #1870ca; } .blog-sidebar ul li { margin-bottom: 8px; font-size: 15px; } .blog-sidebar ul li:last-child { margin-bottom: 0; } .blog-sidebar .latest-posts span { display: block; font-size: 14px; color: #aaaaaa; } .blog-sidebar .search-form form { position: relative; } .blog-sidebar .search-form form input[type='submit'] { font-family: ElegantIcons; position: absolute; top: 0; right: 0; height: 46px; width: 46px; line-height: 40px; text-align: center; border: 0; outline: 0; background: transparent; } .blog-sidebar .search-form .form-control { margin-bottom: 0; } .post-entry .post-image { overflow: hidden; position: relative; } .post-entry .post-image img { width: 100%; height: auto; } .post-entry .post-meta { margin: 20px 0; } .post-entry .post-meta span { color: #aaaaaa; display: inline-block; } .post-entry .post-meta span:not(:last-of-type) { margin-right: 20px; } .post-entry .post-meta span i { margin-right: 5px; } .post-entry .post-meta span a { color: #aaaaaa; } .post-entry .post-meta span a:hover { color: #707070; } .post-entry.grid { margin-bottom: 40px; } .post-entry.grid .post-content { background: #fefefe; border-top: none; padding: 30px; } .post-entry.grid .post-title { font-size: 20px; line-height: 1.46; margin-top: 0; } .post-entry.grid .post-title a { color: #111111; } .post-entry.grid .post-title a:hover { color: #1870ca; } article { position: relative; } article .filter-grayscale { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: background .2s ease, opacity .5s ease; transition: background .2s ease, opacity .5s ease; } article:hover .filter-grayscale { opacity: 1; } .blog-standard .post-entry { padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid #efefef; } .blog-standard .post-entry .post-image { margin-bottom: 25px; } .blog-standard .post-entry .post-title { font-size: 28px; } .blog-standard .post-entry .post-title a { color: #111111; } .blog-standard .post-entry .post-title a:hover { color: #1870ca; } .post-entry.format-quote .quote-holder { background: #f7f7f7; padding: 40px; margin-bottom: 20px; } .post-entry.format-quote .quote-holder p:last-of-type { margin-bottom: 0; } .blog-pagination ul li { display: inline-block; margin-right: 5px; } .blog-pagination ul li a { width: 40px; height: 40px; display: block; border-radius: 50%; line-height: 40px; background: #f7f7f7; text-align: center; font-size: 15px; color: #111111; } .blog-pagination ul li a:hover { color: #707070; } .blog-pagination ul li.active a { background: #3367d5; color: #ffffff; } .blog-single .tags { margin-top: 35px; } .tags a { display: inline-block; margin-left: 5px; background: #f7f7f7; color: #111111; padding: 5px 10px; border-radius: 4px; } .tags a:hover { background: #dedede; } .author-description { padding: 30px; border: 1px solid #efefef; } .author-description .author-avatar { width: 200px; float: left; } .author-description .author-description-text { padding-left: 20px; overflow: hidden; } .author-description .author-description-text h4 { margin-bottom: 0; } .author-description .author-description-text span { display: block; margin-bottom: 15px; } .blog-single-navigation { padding: 40px 0; border-bottom: 1px solid #efefef; } .blog-single-navigation .prev-post, .blog-single-navigation .next-post { width: 50%; } .blog-single-navigation .prev-post a, .blog-single-navigation .next-post a { color: #707070; } .blog-single-navigation .prev-post span, .blog-single-navigation .prev-post h5, .blog-single-navigation .next-post span, .blog-single-navigation .next-post h5 { display: inline-block; } .blog-single-navigation .prev-post h5, .blog-single-navigation .next-post h5 { font-size: 18px; } .blog-single-navigation .prev-post { float: left; text-align: left; } .blog-single-navigation .prev-post h5 { margin-left: 5px; } .blog-single-navigation .next-post { float: right; text-align: right; } .blog-single-navigation .next-post h5 { margin-right: 5px; } .comment-title { font-size: 22px; margin-bottom: 40px; } .comments-wrapper { padding: 40px 0; border-bottom: 1px solid #efefef; margin-bottom: 40px; } .comment-list li { border-bottom: 1px solid #efefef; } .comment-list li:last-child { border-bottom: 0; } .comment-list > li:last-child .comment { padding-bottom: 0; } .comment-list > li:first-child .comment { padding-top: 0; } .comment-list .children { padding-left: 100px; } .comment-list .children li:first-child { padding-top: 30px; border-top: 1px solid #efefef; } .comment-list .children li:last-child { border-top: none; } .comment { padding: 30px 0; } .comment .comment-avatar { float: left; width: 70px; border-radius: 50%; overflow: hidden; } .comment .comment-avatar img { width: 100%; } .comment .comment-content { overflow: hidden; padding-left: 20px; } .comment .comment-content h5 { font-size: 18px; display: inline-block; } .comment .comment-content .comment-time { margin-left: 15px; color: #aaaaaa; } .comment .comment-content p { margin-top: 10px; } .comment .comment-content .reply span { margin-right: 5px; font-size: 12px; } .projects-full-holder { width: 100%; margin: 0; display: block; } .projects-full-holder .project-entry-1 { width: 24.99%; margin: 0; float: left; margin-bottom: 0; } .project-entry-1 { margin-bottom: 30px; } .project-entry-1 .image-holder { position: relative; z-index: 8; overflow: hidden; } .project-entry-1 .image-holder img { width: 100%; height: auto; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .project-entry-1 .image-holder:hover img { opacity: .5; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); } .project-entry-1 .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1870ca; opacity: 0; visibility: hidden; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .project-entry-1 .project-title { position: absolute; bottom: 20px; left: 20px; width: 100%; color: #ffffff; font-size: 22px; margin: 0; padding-right: 20px; padding-left: 10px; opacity: 0; z-index: 13; -webkit-transition: all 0.15s 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.15s 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .project-entry-1 .overlay-triangle { position: absolute; top: -31px; right: -31px; display: block; width: 50px; height: 50px; background-color: #ffffff; opacity: .3; z-index: 9; -webkit-transform: rotate(-45deg) translate(16px); transform: rotate(-45deg) translate(16px); -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .project-entry-1:hover .project-title { opacity: 1; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .project-entry-1:hover .project-overlay { opacity: .75; visibility: visible; } .project-entry-1:hover .overlay-triangle { -webkit-transform: rotate(-45deg) translate(0); transform: rotate(-45deg) translate(0); } .small-projects .thumb { width: 30%; float: left; margin-right: 3%; margin-bottom: 8px; } .small-projects .thumb img { width: 100%; display: block; border-radius: 3px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .small-projects .thumb:hover img { opacity: .5; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); } .projects-filter { font-size: 16px; } .projects-filter li { display: inline-block; margin-right: 40px; } .projects-filter li:last-child { margin: 0; } .projects-filter li a { display: inline-block; color: #707070; } .projects-filter li a:hover, .projects-filter li a.active { color: #111111; border-bottom: 1px solid #111111; } .single-project .image-holder { position: relative; margin-bottom: 30px; } .single-project .image-holder .project-overlay { background: rgba(26, 26, 26, 0.75); position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; } .single-project .image-holder .link-holder { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; -webkit-transform: translateY(-65%); transform: translateY(-65%); -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; } .single-project .image-holder .link-holder i { font-size: 36px; color: #ffffff; } .single-project .image-holder:hover .project-overlay { opacity: 1; } .single-project .image-holder:hover .link-holder { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-project .project-info .project-title { font-size: 36px; margin-bottom: 30px; margin-top: 0; } .single-project .project-info p { font-size: 16px; } .single-project-nav { height: 33px; line-height: 35px; text-align: center; position: relative; padding: 50px 0; } .single-project-nav a { color: #aaaaaa; } .single-project-nav a:hover, .single-project-nav a:focus { color: #707070; } .single-project-nav span { font-size: 24px; } .single-project-nav .prev, .single-project-nav .back-to, .single-project-nav .next { display: inline-block; position: absolute; top: 37px; height: 33px; } .single-project-nav .prev { left: 0; } .single-project-nav .next { right: 0; } .service-title-only { text-align: center; padding: 30px; margin-bottom: 20px; margin-top: 60px; background: #1870ca; } .service-title-only a { color: #ffffff; display: inline-block; font-size: 18px; position: relative; } .service-title-only a:after { opacity: 0; visibility: hidden; content: ''; width: 100%; height: 2px; background: #ffffff; position: absolute; top: 100%; left: 0; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .service-title-only a:hover { color: #ffffff; } .service-title-only a:hover:after { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .service-icon { display: table; width: 100%; padding-left: 15px; } .service-icon .icon-box { width: 1px; display: table-cell; vertical-align: top; } .service-icon .icon-box i { color: #1870ca; font-size: 2em; } .service-icon .service-content { padding-left: 20px; display: table-cell; vertical-align: top; } .service-icon .service-content h4 { font-size: 20px; margin-top: 0; margin-bottom: 20px; } .icon-style-1 { text-align: center; margin-bottom: 30px; } .icon-style-1 i { color: #aaaaaa; font-size: 45px; margin-bottom: 30px; display: inline-block; line-height: 45px; } .icon-style-1 h3 { margin-top: 0; font-size: 20px; } .image-service { margin-bottom: 40px; } .image-service .thumb { position: relative; overflow: hidden; margin-bottom: 10px; } .image-service .thumb img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .image-service .thumb:hover img { opacity: .5; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); } .image-service .thumb .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #1870ca; opacity: 0; visibility: hidden; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .image-service .thumb .overlay i { font-size: 24px; color: #ffffff; position: absolute; top: 50%; width: 100%; text-align: center; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .image-service .thumb:hover .overlay { opacity: .75; visibility: visible; } .image-service .service-content h3 { font-size: 20px; padding: 10px 0; margin: 0; } .image-service .service-content h3 a { color: #111111; } .image-service .service-content h3 a:hover { color: #1870ca; } .image-service p { font-size: 15px; } .service-image-2 img { margin-bottom: 15px; } .service-image-2 h4 { font-size: 20px; margin-bottom: 15px; } .image-service .thumb-single { margin-bottom: 10px; } .service-single .service-content h2 { margin: 0 0 5px 0; padding: 20px 0; } .arch-rev-title-1 { color: #ffffff; font-weight: 700; } .arch-rev-title-1 mark { background: transparent; color: #1870ca; } .arch-desc-1 { color: #ffffff; } .rev_slider .button { font-size: 18px; } .rev_slider .button:hover { color: #111111; background: #ffffff; } .owl-slider { position: relative; } .owl-slider .next-icon, .owl-slider .prev-icon { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; line-height: 50px; font-size: 24px; color: #aaaaaa; background: #f7f7f7; text-align: center; } .owl-slider .prev-icon { left: 0; } .owl-slider .next-icon { right: 0; } .call-to-action { position: relative; padding: 40px 0px; z-index: 12; } .call-to-action.light { background: #fefefe; } .cta-inner { display: table; width: 100%; } .cta-inner .cta-content { display: table-cell; vertical-align: middle; } .cta-inner .cta-content h3 { margin-top: 0; } .cta-inner .cta-button { display: table-cell; vertical-align: middle; padding: 10px 0; } .cta-inner .cta-button a { float: right; } .team-entry { margin-bottom: 40px; } .team-entry .team-details { text-align: center; } .team-entry .team-details h4 { font-size: 20px; margin-bottom: 0px; } .team-entry .team-thumb { position: relative; overflow: hidden; margin-bottom: 15px; background: #111111; } .team-entry .team-thumb img { width: 100%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .team-entry .team-thumb:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.25); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .team-entry .team-thumb:hover img { opacity: 0.7; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); } .team-entry .team-thumb:hover:before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); opacity: 1; } .main-hero { padding: 9.3% 0 6.5% 0; } .main-hero .section-bg { opacity: 1; } .main-hero .hero-title { color: #ffffff; font-size: 90px; letter-spacing: 2px; margin: 0 0 20px 0; } .main-hero p { font-size: 22px; color: #ffffff; margin-bottom: 40px; } .demo-header { padding: 50px 0; } .demo-header h3 { font-size: 24px; } .demo-header p { font-size: 16px; } .demo-product { text-align: center; margin-bottom: 50px; padding: 0 15px; } .demo-product .demo-thumb { margin-bottom: 25px; box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .demo-product .demo-thumb:hover { opacity: .7; -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px); } .demo-product a { color: #111111; } .demo-product a span { color: #aaaaaa; } .demo-product a:hover { color: #1870ca; } .demo-container { margin-left: 4%; margin-right: 4%; } .landing-footer { padding: 40px 0; } .landing-footer i { color: #3f87c5; display: inline-block; padding: 5px; background: #f7f7f7; } .about-me .personal-name { font-size: 24px; margin-bottom: 8px; } .about-me p { font-size: 15px; } .about-me p.headline { font-size: 18px; margin-bottom: 25px; } .about-us .mission-text { /* padding-right: 50px; */ } .about-us .mission-text h2 { margin-top: 0; } .about-us .mission-text p { font-size: 15px; } .about-us .mission-text p.headline { color: #111111; font-size: 18px; } .map-full-width #map { width: 100%; height: 500px; overflow: hidden; } .map-container #map { width: 100%; height: 486px; } .error-404 { max-width: 100%; width: 800px; margin-left: auto; margin-right: auto; padding: 0 20px; text-align: center; } .error-404 .error-symbol { font-size: 65px; color: #111111; } .error-404 .error-text { margin-bottom: 60px; } .error-404 .error-text h2 { font-size: 45px; } .error-404 .error-text p.subtitle { font-size: 18px; } .error-404 .error-form { margin-top: 60px; } .error-404 .error-form a { color: #111111; margin-top: 10px; } .error-404 .error-form form { position: relative; } .error-404 .error-form form button { position: absolute; top: 0; right: 0; padding: 10px 15px; border: 0; background: transparent; } .error-404 .error-form form button:focus { outline: none; box-shadow: none; } @media (max-width: 1200px) { .projects-full-holder .project-entry-1 { width: 50%; } } @media (max-width: 992px) { .main-header-left { display: none; } .side-menu-right .site-wrapper { padding-right: 0; } .side-menu-left .site-wrapper { padding-left: 0; } .service-title-only { margin-top: 20px; } } @media (max-width: 768px) { .projects-full-holder .project-entry-1 { width: 100%; } .arch-desc-1 { font-size: 16px !important; line-height: 1.8 !important; } }