/* CSS Document */ /* Theme Name: Dalton Theme Description: Dalton Responsive Multi-Purpose WP Theme Version: 1.3 Author: ZoOm-Arts Website: http://zoom-arts.com */ /* ------------------------------------------ */ /* TABLE OF CONTENTS /* ------------------------------------------ */ /* 01 - General & Basic CSS */ /* 02 - TopBar & Header & Nav-Menu */ /* 03 - Pages Header */ /* 04 - Shortcodes Elements */ /* 05 - Sections CSS */ /* 06 - Portfolio CSS */ /* 07 - Single Project */ /* 08 - Blog Styles */ /* 09 - Single Post */ /* 10 - Sidebar & Widgets */ /* 11 - Numeric & Standard Pagination */ /* 12 - Contact Forms Styles */ /* 13 - 404 & Search Page */ /* 14 - Loader Styles */ /* 15 - Footer Styles */ /* @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); @import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,900,600,500,800,700,300); */ /*------------------------------------------*/ /* 01 - General & Basic CSS /*------------------------------------------*/ body { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 23px; font-weight: 400; color: #666; position: relative; background-color: #fff; } strong, b { font-weight: 600; } img { max-width: 100%; height: auto; } p img { display: inline-block; } img.aligncenter { margin: 0 auto; display: block!important; } img.alignright { float: right; margin-left: 15px; } img.alignleft { float: left; margin-right: 15px; } a { color: #444; transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; } a:hover { color: #f1b458; } a, a:hover, a:active, a:focus, button, button:hover, button:active, button:focus { outline: 0; text-decoration: none; } a.main-button { font-size: 10px; font-weight: 600!important; letter-spacing: 2px; text-transform: uppercase; color: #333; padding: 9px 18px; border: 1px solid #dddddd; transition: all 0.3s ease-in-out!important; -moz-transition: all 0.3s ease-in-out!important; -webkit-transition: all 0.3s ease-in-out!important; -o-transition: all 0.3s ease-in-out!important; } a.main-button:hover { color: #fff; border-color: #f1b458; background-color: #f1b458; } a.main-button i { position: relative; top: 1px; } *:focus { outline: none; } i { font-size: 1.1em; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 600; margin: 0; text-transform: uppercase; color: #333; letter-spacing: 2px; text-transform: capitalize; } h1 { font-size: 24px; line-height: 36px; } h2 { font-size: 22px; line-height: 32px; } h3 { font-size: 18px; line-height: 28px; } h4 { font-size: 16px; line-height: 26px; } h5 { font-size: 14px; line-height: 20px; } h6 { font-size: 12px; line-height: 18px; } p { margin: 0; } .section span { display: inline-block; } ul, ol { /* list-style: none; */ } ul { padding: 0; margin: 0; } table { font-size: 12px; width: 100%; height: 100%; padding: 0px; margin-bottom: 20px; margin-top: 10px; } table tr:nth-child(odd) { background-color: #eeeeee; } table tr:nth-child(even) { background-color: #ffffff; } table td, table th { vertical-align: middle; border: 1px solid #dddddd; text-align: left; padding: 12px 15px; font-size: 11px; font-weight: normal; color: #333333; } table thead th { text-align: center; font-size: 12px; font-weight: 600; color: #333333; background-color: #fff; } dl { margin-top: 10px; margin-bottom: 20px; } dl dt { margin-bottom: 2px; } dl dd { margin-bottom: 10px; } .uppercase { text-transform: uppercase; } form { margin: 0; padding: 0; } select { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 24px; font-weight: 400; padding: 6px 12px; width: 100%; color: #aaa; background-color: #fff; border: 2px solid #eee; -webkit-appearance: none; } .styled-select { position: relative; display: block; } .styled-select:before { content: "\ec12"; display: block; color: #bbb; position: absolute; top: 14px; right: 12px; font-family: 'dalton'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input::-moz-focus-inner { border: 0; outline: none; } input, textarea, button { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 24px; font-weight: 400; -webkit-appearance: none; /* for box shadows to show on iOS */ } input[type="checkbox"] { -webkit-appearance: checkbox!important; } input[type="radio"] { -webkit-appearance: radio!important; } input:focus, textarea:focus, button:focus { outline: 0; } input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="tel"] { display: inline-block; text-decoration: none; color: #666; border: 2px solid #eee; padding: 8px 12px; width: 100%; background-color: #fff; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } input[type="text"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus { border-color: #e4e4e4; background-color: #fff; -webkit-box-shadow: 0 0 0 0 white inset; } input[type="submit"] { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: inline-block; text-decoration: none; color: #fff; border: none; padding: 12px 24px; background-color: #f1b458; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .post-password-form input[type="submit"] { padding: 9px 24px; position: relative; top: -2px; margin: 0 2px; } input[type="submit"]:hover { background: #333; } textarea { font-size: 13px; line-height: 20px; width: 100%; padding: 10px 12px; color: #666; resize: none; border: 2px solid #eee; } textarea:focus { color: #888; } blockquote { padding: 10px 25px; border-color: #f1b458; } blockquote, .su-quote-inner { font-size: 16px; border-width: 3px; margin-bottom: 25px; } blockquote.pullleft { float: left; width: 40%; margin: 5px 20px 20px 0; } blockquote.pullright { float: right; width: 40%; margin: 5px 0 20px 20px; } blockquote h4 { font-family: 'Raleway', sans-serif; position: relative; text-transform: uppercase; font-weight: 600; font-size: 14px; line-height: 26px; letter-spacing: 1px; } blockquote small { font-size: 10px; } .su-quote-inner { margin-bottom: 0; } .su-quote-inner .su-quote-cite { font-size: 13px; } pre { padding: 8px 10px; margin-bottom: 15px; font-size: 13px; color: #999; background-color: #f8f8f8; border-color: #eee; } .hidden-area { display: none; } .za-label { display: inline-block; padding: 0 4px; } .za-dropcap { margin-top: 5px; display: inline-block; float: left; font-weight: 700; margin-right: 15px; text-align: center; } .tooltip, .tooltip .tooltip-inner { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; padding: 6px 12px; font-size: 11px; } .centered-table { display: table; width: 100%; height: 100%; } .centered-table-cell { display: table-cell; vertical-align: middle; } iframe { max-width: 100%; } .soundcloud iframe { width: 100%!important; height: 230px!important; } .wp-caption { max-width: 100%!important; margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .retina { display: none; } .no-retina { display: block; } .wp-caption img { border: 0 none; padding: 0; margin: 0; } .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 10px; margin: 0; } .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .bypostauthor {} .wrapper.boxed-layout { width: 90%; max-width: 1400px; position: relative; margin: 0 auto; background-color: #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.15); } .wrapper.boxed-layout .container { width: 90%; padding: 0!important; } .wrapper.boxed-layout #header.sticky { width: 90%; max-width: 1400px; left: auto!important; } /*------------------------------------------*/ /* 02 - TopBar & Header & Nav-Menu /*------------------------------------------*/ /*------------ ( TopBar ) ------------*/ #top-bar { width: 100%; font-size: 11px; letter-spacing: 0.5; width: 100%; z-index: 100; position: relative; background-color: #fff; transition: background-color 0.1s ease-in-out; -moz-transition: background-color 0.1s ease-in-out; -webkit-transition: background-color 0.1s ease-in-out; -o-transition: background-color 0.1s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .header-outer.default-bg #top-bar { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.06); } #top-bar i { font-size: 12px; } #top-bar .pull-right > *:first-child { padding-right: 0; } #top-bar .pull-left > *:first-child { padding-left: 0; } .header-outer.default-bg #top-bar, .header-outer.default-bg #top-bar a, .header-outer.default-bg #top-bar .select-wrapper:before { color: #888; } #top-bar .number-info, #top-bar .email-info, #top-bar .user-login, #top-bar .social-icons li, #top-bar .select-wrapper span { line-height: 37px; } #top-bar .social-icons { padding: 0 12px; } #top-bar .pull-right .social-icons { direction: rtl; } #top-bar .pull-left .social-icons { direction: ltr; } #top-bar .social-icons li { display: inline-block; text-align: center; } #top-bar .social-icons li a { width: 26px; height: 26px; line-height: 28px; display: inline-block; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; } #top-bar .social-icons li a:hover { color: #fff!important; } #top-bar .social-icons li.facebook a:hover { background-color: #507cbe; } #top-bar .social-icons li.twitter a:hover { background-color: #63cdf1; } #top-bar .social-icons li.dribbble a:hover { background-color: #d97aa6; } #top-bar .social-icons li.pinterest a:hover { background-color: #f16261; } #top-bar .social-icons li.linkedin a:hover { background-color: #90cadd; } #top-bar .social-icons li.flickr a:hover { background-color: #dc97c0; } #top-bar .social-icons li.instagram a:hover { background-color: #e8c697; } #top-bar .social-icons li.google-plus a:hover { background-color: #4d4f54; } #top-bar .social-icons li.github a:hover { background-color: #e8c697; } #top-bar .social-icons li.tumblr a:hover { background-color: #507cbe; } #top-bar .social-icons li.vk a:hover { background-color: #456691; } #top-bar .social-icons li.youtube a:hover { background-color: #e14f42; } #top-bar .social-icons li.behance a:hover { background-color: #1aace3; } #top-bar .social-icons li.vimeo a:hover { background-color: #87d3e0; } #top-bar .social-icons li.deviantart a:hover { background-color: #657c6a; } #top-bar .social-icons li.soundcloud a:hover { background-color: #ff5d00; } #top-bar .social-icons li.skype a:hover { background-color: #36c4f3; } #top-bar .social-icons li.xing a:hover { background-color: #00777d; } #top-bar .social-icons li a i { display: inline-block; } #top-bar .select-wrapper { position: relative; width: 180px; } #top-bar .select-wrapper span { display: block; padding: 0 12px; position: relative; cursor: pointer; border-right: 1px solid rgba(0,0,0,0.06); border-left: 1px solid rgba(0,0,0,0.06); } #top-bar .select-wrapper span i { position: relative; top: 1px; margin-right: 4px; } #top-bar .select-wrapper span i.arrow { position: absolute; right: 10px; top: 50%; margin-top: -6px; margin-right: 0; } #top-bar .select-wrapper .langs-list ul { position: absolute; left: 0; top: 100%; width: 100%; z-index: 999; visibility: hidden; opacity: 0; background-color: #fff; border-top: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16)!important; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16)!Important; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16)!Important; -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16)!Important; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } #top-bar .select-wrapper:hover .langs-list ul { display: block; visibility: visible; opacity: 1; } #top-bar .select-wrapper .langs-list li { display: block; padding: 7px 15px; opacity: 0.8; border-bottom: 1px solid rgba(0,0,0,0.08); } #top-bar .select-wrapper .langs-list li:last-child { border-bottom: none; } #top-bar .select-wrapper .langs-list li a { display: block; } #top-bar .select-wrapper .langs-list li img { position: relative; top: -2px; margin-right: 6px; } #top-bar .number-info, #top-bar .email-info, #top-bar .user-login { padding: 0 14px; } #top-bar .number-info + .email-info, #top-bar .email-info + .user-login { border-left: none; } #top-bar .number-info i, #top-bar .email-info i, #top-bar .user-login i { margin-right: 5px; } /*------------ ( Main ) ------------*/ .header-outer { position: absolute; width: 100%; top: 0; left: 0; z-index: 99; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #header { width: 100%; z-index: 99; position: relative; background-color: #fff; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.08); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.08); box-shadow: 0 1px 1px rgba(0,0,0,0.08); transition: background-color 0.1s ease-in-out; -moz-transition: background-color 0.1s ease-in-out; -webkit-transition: background-color 0.1s ease-in-out; -o-transition: background-color 0.1s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hidden-header { transition: height 0.3s linear; -moz-transition: height 0.3s linear; -webkit-transition: height 0.3s linear; -o-transition: height 0.3s linear; } #header.sticky { position: fixed; top: 0; left: 0; } #header.sticky-topbar { position: fixed; top: 38px; left: 0; } #top-bar.sticky { position: fixed; top: 0; left: 0; border-bottom: 1px solid #eee; } body.admin-bar #header.sticky { top: 32px; } body.admin-bar #header.sticky-topbar { top: 68px; } body.admin-bar #top-bar.sticky { top: 32px; background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.06); } #header .col-md-8 { position: inherit!important; } #header .header-leftside { float: left; padding: 5px 0; } #header .header-rightside { float: right; text-align: right; } #header #logo, #header .nav-menu > ul > li > a, #header .wc-cart-icon, #header .show-search, #header .show-menu { transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; } /*------------ ( Logo ) ------------*/ #header #logo { display: table; } #header #logo .logo-c { display: table-cell; vertical-align: middle; } #header #logo .logo-c > a { display: block; position: relative; } #header #logo .light-logo { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; } #header #logo h1 { font-weight: 900; font-size: 24px; display: inline-block; line-height: 100%; text-transform: uppercase; } #header #logo h1 a { display: block; } .header-outer.default-bg #logo h1 a { color: #333; } .header-outer.transparent-light #logo h1 a { color: #fff!important; } .header-outer.transparent-dark #logo h1 a { color: #222!important; } /*------------ ( Mobile Menu ) ------------*/ #header .show-menu { display: none; float: right; cursor: pointer; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; } #header .show-menu { margin-left: 30px; } #header .show-menu span { display: block; text-align: center; width: 26px; height: 26px; position: relative; top: 50%; margin-top: -13px; } #header .show-menu i { position: absolute; display: block; width: 16px; height: 2px; background-color: #333; top: 50%; left: 50%; margin-left: -8px; transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } #header .show-menu i::before, #header .show-menu i::after { content: ''; position: absolute; left: 0; background: inherit; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #header .show-menu i::before { top: -6px; } #header .show-menu i::after { bottom: -6px; } .mobile-nav { position: fixed; top: 0; right: -300px; height: 100%; width: 300px; max-width: 100%; overflow-y: auto; background-color: #222; z-index: 99998; padding: 25px 0; padding-bottom: 15px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .wrapper { transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 99997; background-color: rgba(255,255,255,0); transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } body.mobile-menu-showen .wrapper:before { visibility: visible; background-color: rgba(255,255,255,0.9); } body.mobile-menu-showen { overflow: hidden; } body.mobile-menu-showen .mobile-nav { -o-transform: translateX(-300px); -moz-transform: translateX(-300px); -webkit-transform: translateX(-300px); transform: translateX(-300px); } body.mobile-menu-showen .wrapper { height: 100% -o-transform: translateX(-300px); -moz-transform: translateX(-300px); -webkit-transform: translateX(-300px); transform: translateX(-300px); } .mobile-nav .close-mobile-nav { position: absolute; top: 12px; right: 12px; display: block; width: 30px; height: 30px; text-align: center; z-index: 99999; line-height: 26px; font-size: 16px; color: rgba(255,255,255,0.2); background-color: #222; cursor: pointer; border: 2px solid rgba(255,255,255,0.1); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .mobile-nav .close-mobile-nav:hover { border-color: #f1b458; background-color: #f1b458; color: #444; } .mobile-nav .mobile-menu ul li { padding-left: 20px; } .mobile-nav .mobile-menu > ul > li { padding-left: 24px; padding-right: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); } .mobile-nav .mobile-menu ul ul { padding: 0 0 10px 0; } .mobile-nav .mobile-menu > ul > li:first-child { border-top: 1px solid rgba(255,255,255,0.05); } .mobile-nav .mobile-menu ul li a { color: #555; display: block; position: relative; padding: 8px 0; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; } .mobile-nav .mobile-menu > ul > li > a { padding: 10px 0; } .mobile-nav .mobile-menu ul ul li:first-child a { padding-top: 0; } .mobile-nav .mobile-menu ul li a:hover, #header .mobile-menu ul li.current-menu-item > a { color: #f1b458; } /*------------ ( Header Search ) ------------*/ #header .show-search { color: #333; margin-left: 30px; display: block; float: right; } #header .show-search span { cursor: pointer; padding: 5px; position: relative; top: -6px; } #header .show-search i { font-size: 14px; height: 24px; line-height: 24px; display: inline-block; } #header .search-box { background-color: #222; position: absolute; display: none; top: 100%; left: 0; z-index: 56; width: 100%; height: 120px; line-height: 120px; } #header .search-box .container { position: relative; } #header .search-box input { font-size: 16px; font-weight: 600; border: none; color: #ddd; width: 100%; text-transform: uppercase; letter-spacing: 3px; display: inline-block; text-align: center; background-color: transparent; transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; } #header .search-box:hover input, .search-box:focus input { color: #fff; } #header .search-box .close-btn { color: rgba(255,255,255,0.15); position: absolute; top: 50%; right: 15px; margin-top: -17px; height: 34px; width: 34px; font-size: 18px; line-height: 30px; cursor: pointer; text-align: center; border: 2px solid rgba(255,255,255,0.08); transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; } #header .search-box .close-btn:hover { color: #f1b458; } .ui-helper-hidden-accessible { display:none } #header .autocomplete-results { position: absolute; top: 100%; left: 0; z-index: 57; width: 100%; margin-top: 120px; } #header .autocomplete-results .container { position: relative; } #header .autocomplete-results .search-results { background-color: #1b1b1b; } #header .autocomplete-results .ui-widget-content { top: 0%!important; left: 0!important; width: 100%!important; } #header .autocomplete-results .ui-widget-content li { display: block; float: left; padding: 20px 25px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } #header .autocomplete-results.results-count-2 .ui-widget-content li { width: 50%; } #header .autocomplete-results.results-count-3 .ui-widget-content li, #header .autocomplete-results.results-count-6 .ui-widget-content li, #header .autocomplete-results.results-count-9 .ui-widget-content li { width: 33.3333%; } #header .autocomplete-results.results-count-4 .ui-widget-content li, #header .autocomplete-results.results-count-8 .ui-widget-content li { width: 25%; } #header .autocomplete-results .ui-widget-content li:hover { background-color: #181818; } #header .autocomplete-results .ui-widget-content li img { display: block; float: left; width: 45px; height: 45px; margin-right: 18px; } #header .autocomplete-results .ui-widget-content li i { display: block; float: left; height: 45px; margin-right: 18px; font-size: 32px; line-height: 45px; color: rgba(255,255,255,0.1); } #header .autocomplete-results .ui-widget-content li a { display: block; cursor: pointer; font-size: 11px; line-height: 22px; color: #555; } #header .autocomplete-results .ui-widget-content li .title { color: #fff; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; } #header .autocomplete-results .ui-widget-content li:hover .title { color: #f1b458; } #header .autocomplete-results .ui-widget-content li .meta { } /*------------ ( Nav Menu ) ------------*/ #header .nav-menu { display: inline-block; vertical-align: middle; } #header .nav-menu li { position: relative; } #header .nav-menu li a { color: #333; display: block; position: relative; text-transform: uppercase; } #header .nav-menu li a i { font-size: 14px; position: relative; top: 1px; margin-right: 2px; } #header .nav-menu > ul > li { display: inline-block; padding-left: 0; margin-left: 12px; float: left; } #header .nav-menu > ul > li > a:after { content: ''; display: none; height: 2px; width: 0; position: absolute; bottom: 0; left: 0; background-color: transparent; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } #header .nav-menu > ul > li.active > a:after, #header .nav-menu > ul > li > a:hover:after { width: 100%; background-color: #333; } #header .nav-menu li .second-lvl { line-height: 24px; position: absolute; width: 200px; z-index: 60; display: none; } #header .nav-menu .second-lvl { top: 100%; left: 0; } #header .nav-menu li li ul { top: 0; left: 100%; } #header .nav-menu ul ul li a { padding: 8px 15px; color: #888; text-align: left; background-color: #222; border-bottom: 1px solid rgba(255,0,0,0.8); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } #header .nav-menu ul ul li a span.label { color: #1695a3; line-height: 9px; font-size: 9px; position: absolute; top: 50%; right: 0; padding: 4px 4px; border: 1px solid #1aaebf; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #header .nav-menu ul ul li a span.label.primary-color { color: #f1b458; border-color: #f1b458; } #header .nav-menu ul ul li a span.label.blue { color: #1aaebf; border-color: #1aaebf; } #header .nav-menu ul ul li a span.label.red { color: #e74c3c; border-color: #e74c3c; } #header .nav-menu ul ul li a span.label.orange { color: #ff8d42; border-color: #ff8d42; } #header .nav-menu ul ul li a span.label.green { color: #bdd684; border-color: #bdd684; } #header .nav-menu ul ul li a span.label.yellow { color: #f9d355; border-color: #f9d355; } #header .nav-menu ul ul li a span.label.white { color: #fff; border-color: #fff; } #header .nav-menu ul ul li a span.label.dark { color: rgba(255,255,255,0.2); border-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5); } #header .nav-menu ul ul li a:hover, #header .nav-menu ul ul li.active > a, #header .nav-menu ul ul li.current-menu-item > a { color: #f1b458; } #header .nav-menu ul li > ul > li:last-child a { border-bottom: 0; } #header .nav-menu ul li.menu-title > a { color: #333; } #header .nav-menu ul li.menu-title > a:before { visibility: hidden; } #header .nav-menu ul li.no-mega-menu .second-lvl > ul > li > ul, #header .nav-menu ul li.no-mega-menu .second-lvl > ul > li > ul > li > ul { line-height: 24px; position: absolute; left: 100%; top: 0; width: 200px; z-index: 60; display: none; } #header .nav-menu > ul > li.no-mega-menu .second-lvl > ul > li:hover > ul, #header .nav-menu ul li.no-mega-menu .second-lvl > ul > li > ul > li:hover > ul { display: block; } #header .nav-menu > ul > li.no-mega-menu .second-lvl ul li.menu-item-has-children > a:after { position: absolute; right: 10px; top: 14px; content: '\ec14'; font-family: 'dalton'; font-size: 12px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #header .nav-menu li.mega-menu { position: inherit!important; } #header .nav-menu li.mega-menu.two-columns, #header .nav-menu li.mega-menu.three-columns { position: relative!important; } #header .nav-menu li.mega-menu.two-columns .second-lvl { width: 400px; } #header .nav-menu li.mega-menu.three-columns .second-lvl { width: 560px; } #header .nav-menu li.mega-menu.three-columns-wide .second-lvl, #header .nav-menu li.mega-menu.four-columns-wide .second-lvl, #header .nav-menu li.mega-menu.five-columns-wide .second-lvl { width: 1140px; left: 50%; margin-left: -570px; } #header .nav-menu li.mega-menu.two-columns .second-lvl > ul > li { float: left; width: 50%; display: block; } #header .nav-menu li.mega-menu.three-columns .second-lvl > ul > li, #header .nav-menu li.mega-menu.three-columns-wide .second-lvl > ul > li { float: left; width: 33.333%; display: block; } #header .nav-menu li.mega-menu.four-columns-wide .second-lvl > ul > li { float: left; width: 25%; display: block; } #header .nav-menu li.mega-menu.five-columns-wide .second-lvl > ul > li { float: left; width: 20%; display: block; } #header .nav-menu li.mega-menu .second-lvl { width: 100%; background-color: #222; background-repeat: no-repeat; padding: 15px 24px 12px 24px; } #header .nav-menu li.mega-menu .second-lvl ul li a { padding: 3px 0; border-color: rgba(255,255,255,0.05); background-color: transparent; } #header .nav-menu li.mega-menu .second-lvl ul li a:before { content: ""; display: block; position: absolute; height: 1px; width: 0; bottom: -1px; left: 0; background-color: rgba(255,255,255,0.1); transition: width 0.3s ease-in; -moz-transition: width 0.3s ease-in; -webkit-transition: width 0.3s ease-in; -o-transition: width 0.3s ease-in; } #header .nav-menu li.mega-menu .second-lvl ul li a:hover:before { width: 100%; } #header .nav-menu li.mega-menu .second-lvl > ul > li { padding: 0 10px; } #header .nav-menu .mega-menu.two-columns .second-lvl { left: -164px; } #header .nav-menu .mega-menu.three-columns .second-lvl { left: -240px; } /*------------ ( Light & Dark Header Outer ) ------------*/ .header-outer.transparent-dark #header, .header-outer.transparent-light #header { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .header-outer.transparent-dark #header:after, .header-outer.transparent-light #header:after { display: block; content: ""; width: 100%; position: absolute; bottom: 0; left: 0; height: 1px; } .header-outer.transparent-dark #header, .header-outer.transparent-dark #top-bar, .header-outer.transparent-light #header, .header-outer.transparent-light #top-bar { background-color: transparent!important } .header-outer.transparent-dark #top-bar, .header-outer.transparent-light #top-bar, .header-outer.transparent-dark #top-bar div, .header-outer.transparent-light #top-bar div, .header-outer.transparent-dark #top-bar li, .header-outer.transparent-light #top-bar li { border: 0!important; } /* Dark Header */ .header-outer.transparent-dark #top-bar .select-wrapper span { border: none!important; } .header-outer.transparent-dark #header #logo .dark-logo { opacity: 1; } .header-outer.transparent-dark #header #logo .light-logo { opacity: 0; } .header-outer.transparent-dark #top-bar, .header-outer.transparent-dark #top-bar a, .header-outer.transparent-dark #logo h1 a, .header-outer.transparent-dark .nav-menu > ul > li > a, .header-outer.transparent-dark #header .header-right .show-search, .header-outer.transparent-dark #header .wc-cart-icon .woo-cart-icon, .header-outer.transparent-light #top-bar .select-wrapper .langs-list li a { color: #222!important; } .header-outer.transparent-dark #header .show-menu i, .header-outer.transparent-dark #header .nav-menu > ul > li.active > a:after, .header-outer.transparent-dark #header .nav-menu > ul > li > a:hover:after, .header-outer.transparent-dark #header .nav-menu > ul > li.active > a:hover:after { background-color: #222!important; } .header-outer.transparent-dark #header:after { background-color: rgba(0,0,0,0.1)!important; } /* Light Header */ .header-outer.transparent-light #top-bar .select-wrapper span { border: none!important; } .header-outer.transparent-light #header #logo .dark-logo { opacity: 0; } .header-outer.transparent-light #header #logo .light-logo { opacity: 1; } .header-outer.transparent-light #top-bar, .header-outer.transparent-light #top-bar a, .header-outer.transparent-light #header #logo h1 a, .header-outer.transparent-light #header .nav-menu > ul > li > a, .header-outer.transparent-light #header .header-right .show-search, .header-outer.transparent-light #header .wc-cart-icon .woo-cart-icon { color: #fff!important; } .header-outer.transparent-light #header .show-menu i, .header-outer.transparent-light #header .nav-menu > ul > li.active > a:after, .header-outer.transparent-light #header .nav-menu > ul > li > a:hover:after, .header-outer.transparent-light #header .nav-menu > ul > li.active > a:hover:after { background-color: #fff!important; } .header-outer.transparent-light #top-bar a:hover, .header-outer.transparent-dark #top-bar a:hover { color: #f1b458; } .header-outer.transparent-light #header:after { background-color: rgba(255,255,255,0.2)!important; } /*------------------------------------------*/ /* 03 - Pages Header /*------------------------------------------*/ .page-header { position: relative; margin: 0; border: 0; overflow: hidden; /*border-bottom: 1px solid #eee;*/ background-position: 50% 0; } .page-header .container { position: relative; } .page-header h2 { text-transform: uppercase; } .page-header h5 { text-transform: uppercase; } .page_header-content { position: relative; } /*------------------------------------------*/ /* 04 - Shortcodes Elements /*------------------------------------------*/ /*------------ ( Alerts ) ------------*/ .alert { padding: 14px 18px; color: #fff; border-width: 0; text-shadow: none; box-shadow: none; background-image: none; margin-bottom: 18px!important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; } .alert.alert-success { background-color: #42a674; } .alert.alert-info { background-color: #1695a3; } .alert.alert-danger { background-color: #ef696c; } .alert.alert-warning { background-color: #ee8e60; } /*------------ ( Images Frame ) ------------*/ .za-frame { display: inline-block; } .za-frame img { margin: 0; } .za-frame.border { padding: 3px; border: 5px solid rgba(0,0,0,0.1); } .za-frame.shadow { padding: 7px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 3px 3px 3px rgba(0,0,0,0.08); } .za-frame.hover { padding: 7px; border: 1px solid rgba(0,0,0,0.1); opacity: 1; transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; } .za-frame.hover:hover { border-color: rgba(0,0,0,0.15); opacity: 0.8; } /*------------ ( Dividers ) ------------*/ .divider { width: 100%; display: block; line-height: 100%; } .divider .divider-elm { display: inline-block; height: 0; } .divider .divider-elm.empty-space { display: block; } /*------------ ( Text Separator ) ------------*/ .za-text-separator { margin: 10px auto 15px!important; border-top: 1px; height: 8px; overflow: visible; } .za-text-separator.text-left, .za-text-separator.text-right { margin: 15px 0!important; } .za-text-separator.double { border-top: 3px; } .za-text-separator abbr { display: inline-block; height: 20px; line-height: 20px; position: relative; top: -12px; font-size: 10px; padding: 0 15px; letter-spacing: 3px; text-transform: uppercase; } .za-text-separator.double abbr { top: -14px; } .za-text-separator.text-left abbr { padding-left: 0; } .za-text-separator.text-right abbr { padding-right: 0; } /*------------ ( Icon Separator ) ------------*/ .za-icon-separator { text-align: center; } .za-icon-separator abbr { position: relative; padding: 0 10px; height: 20px; line-height: 20px; } .za-icon-separator abbr i { display: inline-block; font-size: 18px; } .za-icon-separator abbr .left-border { position: absolute; left: 100%; top: 50%; height: 0; display: block; margin-top: -2px; border-top-width: 1px; } .za-icon-separator abbr .right-border { position: absolute; right: 100%; top: 50%; height: 0; margin-top: -2px; border-top-width: 1px; } /*------------ ( Custom Font Text ) ------------*/ .custom-font .custom-font-element { display: inline-block; } .custom-font .za-custom-icon { position: relative; top: 2px; } .custom-font.style-1 .custom-font-element, .custom-font.style-2 .custom-font-element { position: relative; } .custom-font.style-1 .custom-font-element span.left { position: absolute; display: block; height: 2px; width: 30px; left: -45px; top: 50%; margin-top: -1px; } .custom-font.style-1 .custom-font-element span.right { position: absolute; display: block; height: 2px; width: 30px; right: -45px; top: 50%; margin-top: -1px; } .custom-font.style-2 .custom-font-element { padding-bottom: 10px; } .custom-font.style-2 .custom-font-element span.right { position: absolute; display: block; height: 2px; width: 30%; right: 33.5%; bottom: 0; } /*------------ ( Font Icons ) ------------*/ .font-icon { display: inline-block; text-align: center; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; } /*------------ ( Google Maps ) ------------*/ .za-gmap { position: relative; } .za-gmap .map-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 55; } .za-gmap .map-zoom-in, .za-gmap .map-zoom-out { position: absolute; left: 15px; display: block; width: 30px; height: 30px; text-align: center; color: #fff; font-size: 12px; cursor: pointer; background-color: #333; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; z-index: 56; } .za-gmap .map-zoom-in:hover, .za-gmap .map-zoom-out:hover { background-color: #444; } .za-gmap .map-zoom-in { top: 15px; } .za-gmap .map-zoom-out { top: 50px; } .za-gmap .map-zoom-in i, .za-gmap .map-zoom-out i { line-height: 32px; } /*------------ ( Progress Bars ) ------------*/ .progress-bar-block { margin-bottom: 15px; position: relative; } .progress-label { font-weight: 700; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; text-align: left; text-transform: uppercase; } .progress { overflow: hidden; height: 5px; margin-bottom: 0; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; background-color: rgba(0,0,0,0.08); background-image: none; } .progress-bar { position: relative; background-color: #f1b458; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; background-image: none; filter: none; } .progress-bar-block .percentage { position: absolute; right: 0; top: 0; font-weight: 700; font-size: 11px; line-height: 11px; letter-spacing: 1px; } /*------------ ( Flip Boxes ) ------------*/ .flip-box { text-align: center; position: relative; cursor: pointer; } .flip-box .za-custom-icon { margin-right: 0; } .flip-box .flipper { position: relative; } .flip-box .front, .flip-box .back { padding: 10% 8%; } .flip-box .back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .flip-box .back > div { width: 100%; height: 100%; display: table; vertical-align: middle; } .flip-box .back > div > div { display: table-cell; vertical-align: middle; } .flip-box .front { position: relative; z-index: 181; } .flip-box .back { z-index: 180; } .flip-box .flip-container:hover .flipper .front, .flip-box .flip-container.hover .flipper .front { z-index: 181; } .flip-box .flip-container:hover .flipper .back, .flip-box .flip-container.hover .flipper .back { z-index: 182; } /*------------ ( Buttons ) ------------*/ .za-btn { position: relative; display: inline-block; line-height: normal; letter-spacing: 2px; text-transform: uppercase; margin-right: 12px; margin: 4px; transition: all 0.3s ease-in-out!important; -moz-transition: all 0.3s ease-in-out!important; -webkit-transition: all 0.3s ease-in-out!important; -o-transition: all 0.3s ease-in-out!important; } * > .za-btn:last-child { margin-right: 0; } .za-btn .button-text { position: relative; } .za-btn .icon { display: block; position: absolute; left: -28px; top: 50%; width: 24px; height: 24px; line-height: 24px; margin-top: -11px; text-align: center; } .za-btn .icon i { font-size: 14px; line-height: inherit!important; } .za-btn .icon i.fa { position: relative; top: -1px; } .za-btn.animate_icon .button-text { left: 0; transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -webkit-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; } .za-btn.animate_icon:hover .button-text { left: 14px; transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -webkit-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; } .za-btn.animate_icon .icon { opacity: 0; left: 0; transition: left 0.4s ease-in-out, opacity 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out, opacity 0.4s ease-in-out; -webkit-transition: left 0.4s ease-in-out, opacity 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out, opacity 0.4s ease-in-out; } .za-btn.animate_icon:hover .icon { left: -28px; opacity: 1; } /*------------ ( Side Icon Box ) ------------*/ .za-icon-box.boxed-style { position: relative; text-align: center; border-radius: 0px; padding-left: 18px; padding-right: 18px; padding-bottom: 25px; } .za-icon-box.boxed-style i.font-icon { position: absolute; top: 0; left: 50%; -o-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .za-icon-box.side-icon-style .side-icon.left-side { float: left; } .za-icon-box.side-icon-style .side-icon.right-side { float: right; padding-left: 0!important; } /*------------ ( Latest Projects Carousel ) ------------*/ .projects-carousel .project-item { opacity: 1!important; width: 100%; } .projects-carousel.nav-true .owl-prev, .projects-carousel.nav-true .owl-next { position: absolute; top: 50%; display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; margin-top: -20px; opacity: 0; font-size: 12px; transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out,-moz-transform 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, -o-transform 0.3s ease-in-out; } .projects-carousel.nav-true:hover .owl-prev, .projects-carousel.nav-true:hover .owl-next { opacity: 1; } .projects-carousel.nav-true.nav-light .owl-prev, .projects-carousel.nav-true.nav-light .owl-next { color: #222; border: 2px solid #fff; background-color: rgba(255,255,255,0.6); } .projects-carousel.nav-true.nav-dark .owl-prev, .projects-carousel.nav-true.nav-dark .owl-next { color: #fff; border: 2px solid #222; background-color: rgba(0,0,0,0.8); } .projects-carousel.nav-true.nav-light .owl-prev:hover, .projects-carousel.nav-true.nav-light .owl-next:hover { background-color: #fff; color: #f1b458; -o-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .projects-carousel.nav-true.nav-dark .owl-prev:hover, .projects-carousel.nav-true.nav-dark .owl-next:hover { background-color: #222; color: #f1b458; -o-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .projects-carousel.nav-true .owl-prev { left: 15px; } .projects-carousel.nav-true .owl-next { right: 15px; } /*------------ ( Latest Products Carousel ) ------------*/ .products-carousel.nav-true .owl-prev, .products-carousel.nav-true .owl-next { position: absolute; top: 50%; display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; margin-top: -70px; opacity: 0; font-size: 12px; transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out,-moz-transform 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, -o-transform 0.3s ease-in-out; } .products-carousel.nav-true:hover .owl-prev, .products-carousel.nav-true:hover .owl-next { opacity: 1; } .products-carousel.nav-true.nav-light .owl-prev, .products-carousel.nav-true.nav-light .owl-next { color: #222; border: 2px solid #fff; background-color: rgba(255,255,255,0.6); } .products-carousel.nav-true.nav-dark .owl-prev, .products-carousel.nav-true.nav-dark .owl-next { color: #fff; border: 2px solid #222; background-color: rgba(0,0,0,0.8); } .products-carousel.nav-true.nav-light .owl-prev:hover, .products-carousel.nav-true.nav-light .owl-next:hover { background-color: #fff; color: #f1b458; -o-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .products-carousel.nav-true.nav-dark .owl-prev:hover, .products-carousel.nav-true.nav-dark .owl-next:hover { background-color: #222; color: #f1b458; -o-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .products-carousel.nav-true .owl-prev { left: 15px; } .products-carousel.nav-true .owl-next { right: 15px; } /*------------ ( Tabs ) ------------*/ .wpb_tabs .wpb_tab { background-color: transparent!important; padding: 16px 0!important; } .wpb_tabs .wpb_tabs_nav li { text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: 1px; margin: 0!important; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .wpb_tabs .wpb_tabs_nav li a { padding: 7px 14px!important; } .wpb_tabs.style-1 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #333; border-right-width: 0; } .wpb_tabs.style-1 .wpb_tabs_nav li a, .wpb_tabs.style-3 .wpb_tabs_nav li:hover a { color: #333; } .wpb_tabs.style-1 .wpb_tabs_nav li:last-child { border-right-width: 2px; } .wpb_tabs.style-1 .wpb_tabs_nav li.ui-tabs-active { color: #fff!important; background-color: #333!important; } .wpb_tabs.style-1 .wpb_tabs_nav li:hover a, .wpb_tabs.style-2 .wpb_tabs_nav li a { color: #aaa; } .wpb_tabs.style-1 .wpb_tabs_nav li.ui-tabs-active a { color: #f1b458; } .wpb_tabs.style-2 .wpb_tabs_nav { border-bottom: 2px solid #eee; } .wpb_tabs.style-2 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #eee; border-right-width: 0; border-bottom: 0; position: relative; top: 2px; } .wpb_tabs.style-2 .wpb_tabs_nav li:last-child { border-right-width: 2px; } .wpb_tabs.style-2 .wpb_tabs_nav li.ui-tabs-active { color: #fff!important; background-color: #f1b458!important; border-color: #f1b458; top: 0; } .wpb_tabs.style-2 .wpb_tabs_nav li:hover a { color: #777; } .wpb_tabs.style-2 .wpb_tabs_nav li.ui-tabs-active a { color: #fff; } .wpb_tabs.style-3 .wpb_tab { padding: 25px!important; border: 2px solid #eee!important; } .wpb_tabs.style-3 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #eee; border-right-width: 0; position: relative; top: 2px; background-color: #f8f8f8!important; border-bottom: 2px solid #eee!important; } .wpb_tabs.style-3 .wpb_tabs_nav li a { color: #aaa; } .wpb_tabs.style-3 .wpb_tabs_nav li:last-child { border-right-width: 2px; } .wpb_tabs.style-3 .wpb_tabs_nav li.ui-tabs-active { border-bottom-color: #fff!important; background-color: transparent!important; } .wpb_tabs.style-3 .wpb_tabs_nav li.ui-tabs-active a { color: #f1b458; } /*------------ ( Tours ) ------------*/ .wpb_tour_next_prev_nav { display: none; } .wpb_tour .wpb_tour_tabs_wrapper .wpb_tab { background-color: transparent!important; } .wpb_tour .wpb_tabs_nav li { text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: 1px; margin: 0!important; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .wpb_tour .wpb_tabs_nav li a { padding: 7px 14px!important; } .wpb_tour.style-1 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #333; border-bottom-width: 0; } .wpb_tour.style-1 .wpb_tabs_nav li a, .wpb_tour.style-3 .wpb_tabs_nav li:hover a { color: #333; } .wpb_tour.style-1 .wpb_tabs_nav li:last-child { border-bottom-width: 2px; } .wpb_tour.style-1 .wpb_tabs_nav li.ui-tabs-active { color: #fff!important; background-color: #333!important; } .wpb_tour.style-1 .wpb_tabs_nav li:hover a, .wpb_tour.style-2 .wpb_tabs_nav li a { color: #aaa; } .wpb_tour.style-1 .wpb_tabs_nav li.ui-tabs-active a { color: #f1b458; } .wpb_tour.style-2 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #eee; border-bottom-width: 0; } .wpb_tour.style-2 .wpb_tabs_nav li:last-child { border-bottom-width: 2px; } .wpb_tour.style-2 .wpb_tabs_nav li.ui-tabs-active { color: #fff!important; background-color: #f1b458!important; border-color: #f1b458; padding-left: 5px; } .wpb_tour.style-2 .wpb_tabs_nav li:hover a { color: #777; } .wpb_tour.style-2 .wpb_tabs_nav li.ui-tabs-active a { color: #fff; } .wpb_tour.style-3 .wpb_tab { padding: 1.2em!important; border: 2px solid #eee!important; } .wpb_tour.style-3 .wpb_tabs_nav li { background-color: transparent!important; border: 2px solid #eee; border-bottom-width: 0; position: relative; right: -2px; background-color: #f8f8f8!important; } .wpb_tour.style-3 .wpb_tabs_nav li a { color: #aaa; } .wpb_tour.style-3 .wpb_tabs_nav li:last-child { border-bottom-width: 2px; } .wpb_tour.style-3 .wpb_tabs_nav li.ui-tabs-active { background-color: transparent!important; border-right-color: #fff; } .wpb_tour.style-3 .wpb_tabs_nav li.ui-tabs-active a { color: #f1b458; } /*------------ ( Accordions ) ------------*/ .wpb_content_element .wpb_accordion_content { padding-left: 0!important; padding-right: 0!important; } .wpb_accordion_section { margin-bottom: 12px; } .wpb_accordion .wpb_accordion_header a { text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: 1px; margin: 0!important; padding: 8px 0!important; outline: none; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .wpb_accordion .wpb_accordion_header a i { font-size: 14px; margin-right: 8px; position: relative; top: 1px; } .wpb_accordion .ui-icon { background-image: none!important; background-color: transparent!important; right: 4px!important; top: 11px!important; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .wpb_accordion .ui-icon:before { content: "+"; font-size: 17px; font-weight: bold; display: block; text-align: center; color: #f1b458; speak: none; line-height: 18px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .wpb_accordion .ui-state-active .ui-icon:before { -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .wpb_accordion.style-1 .wpb_accordion_header { border-bottom: 2px solid #eee; background-color: transparent!important; } .wpb_accordion.style-1 .wpb_accordion_header a, .wpb_accordion.style-2 .wpb_accordion_header a { color: #333; padding-bottom: 1.2em!important; } .wpb_accordion.style-2 .wpb_accordion_header { border: 2px solid #333; background-color: transparent!important; } .wpb_accordion.style-2 .wpb_accordion_header a { padding: 9px 18px!important; } .wpb_accordion.style-2 .wpb_accordion_header.ui-state-active a { color: #f1b458; background-color: #333; } .wpb_accordion.style-2 .ui-icon { right: 10px!important; } /*------------ ( Pricing Tables ) ------------*/ .pricing-tables-wrap { margin: 0 -10px; padding-top: 10px; } .pricing-table-column { cursor: pointer; text-align: center; float: left; position: relative; top: 0; padding: 0 10px; transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; -webkit-transition: top 0.2s ease-in-out; -o-transition: top 0.2s ease-in-out; } .pricing-table-column:hover { top: -10px; } .pricing-tables-wrap.two_columns .pricing-table-column { width: 50%; } .pricing-tables-wrap.three_columns .pricing-table-column { width: 33.3333%; } .pricing-tables-wrap.four_columns .pricing-table-column { width: 25%; } .pricing-table-column li { padding: 7px 10px!important; margin-bottom: 0!important; } .pricing-table-column li:before { display: none!important; } .pricing-table-column .title-box h5 { text-transform: uppercase; } .pricing-table-column .pricing-table-head, .pricing-table-column .pricing-table-content { background-color: #333; } .pricing-table-column .pricing-table-head { color: #fff; position: relative; } .pricing-table-column .pricing-table-head .pr-icon-box { position: absolute; left: 0; top: 10px; width: 100%; text-align: center; font-size: 52px; color: rgba(255,255,255,0.1); display: none; } .pricing-table-column .pricing-table-head .title-box { padding: 25px 15px; margin-bottom: 15px; border-bottom: 1px solid #444; } .pricing-table-column .pricing-table-head .title-box h5 { color: #666; font-size: 11px; font-weight: 800; line-height: 16px; display: inline-block; } .pricing-table-column .pricing-table-head .pricing-box { padding-bottom: 15px; position: relative; } .pricing-table-column .pricing-table-head .pricing-box .price { font-size: 60px; line-height: normal; position: relative; letter-spacing: -2px; } .pricing-table-column .pricing-table-head .pricing-box .currency { font-size: 16px; position: absolute; left: -15px; top: 30%; font-weight: 300; } .pricing-table-column .pricing-table-head .pricing-box .period { font-size: 14px; position: relative; right: -8px; } .pricing-table-column .pricing-table-content { color: #666; padding-bottom: 38px; } .pricing-table-column .pricing-table-content ul { margin: 0!important; padding: 0!important; } .pricing-table-column .pricing-table-content ul li { list-style: none!important; } .pricing-table-column .za-btn { font-weight: 600; margin-top: 26px; margin-right: 0; } .pricing-table-column.special-price-table .pricing-table-head, .pricing-table-column.special-price-table .pricing-table-content { background-color: #f1b458; } .pricing-table-column.special-price-table .pricing-table-content { color: rgba(255,255,255,0.7); } .pricing-table-column.special-price-table .pricing-table-head .title-box { border-bottom: 1px solid rgba(255,255,255,0.2); } .pricing-table-column.special-price-table .pricing-table-head .title-box h5 { color: rgba(255,255,255,0.6); } /*------------ ( Team Member ) ------------*/ .team-member.default-style { text-align: center; } .team-member.default-style .member-image { margin-bottom: 26px; } .team-member .member-image img { width: 100%; height: auto; } .team-member .member-name { font-size: 12px; line-height: 14px; font-weight: 800; letter-spacing: 2px; margin-bottom: 4px; text-transform: uppercase; } .team-member .member-position { font-size: 10px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; opacity: 0.7; position: relative; display: inline-block; } .team-member.default-style .member-desc { margin-bottom: 15px; } .team-member.default-style .member-position + .member-social { position: relative; padding-top: 16px; } .team-member.default-style .member-position + .member-social:after { content: ''; display: block; width: 80px; height: 2px; position: absolute; left: 50%; top: 2px; margin-left: -40px; background-color: rgba(0,0,0,0.1); } .team-member .member-social a { display: inline-block; margin-right: 2px; width: 32px; height: 32px; color: #bbb; font-size: 12px; border: 1px solid rgba(255,255,255,0); transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; } .team-member.default-style .member-social a:hover { border-color: #f1b458; color: #f1b458; } .team-member .member-social a i { line-height: 32px; } .team-member.boxed-style { position: relative; margin-bottom: 50px; } .team-member.boxed-style:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 60; opacity: 0; border: 1px solid rgba(0,0,0,0); background-color: rgba(255,255,255,0); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .team-member.boxed-style:hover:after { opacity: 0.9; border-color: rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.95); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .team-member.boxed-style .member-info { position: absolute; top: 100%; left: 0; z-index: 61; width: 100%; margin-top: 26px; text-align: center; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .team-member.boxed-style:hover .member-info { top: 100%; margin-top: -60px; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .team-member.boxed-style .member-name { margin-bottom: 2px; } .team-member.boxed-style .member-social { position: absolute; top: 0; left: 0; z-index: 61; width: 100%; opacity: 0; text-align: center; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .team-member.boxed-style:hover .member-social { opacity: 1; top: 18px; } .team-member.boxed-style .member-social a { color: #333; margin-right: 6px; } .team-member.boxed-style .member-social a:hover { border-color: #333; } /*------------ ( Social Icons ) ------------*/ .custom-social-icons a { display: inline-block; color: #cccccc!important; width: 36px; height: 36px; text-align: center; border: 1px solid #e4e4e4; font-size: 12px; margin-right: 6px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; border-color: #ccc; background-color: #333; } .custom-social-icons a i { line-height: 36px; } .custom-social-icons a:hover { color: #fff!important; } .dark-footer .custom-social-icons a { border-color: rgba(255,255,255,0.1)!important; color: rgba(255,255,255,0.2)!important; } .dark-footer .custom-social-icons a:hover { color: rgba(255,255,255,1)!important; } .custom-social-icons a.facebook:hover { border-color: #507cbe; background-color: #507cbe; } .custom-social-icons a.twitter:hover { border-color: #63cdf1; background-color: #63cdf1; } .custom-social-icons a.google-plus:hover { border-color: #4d4f54; background-color: #4d4f54; } .custom-social-icons a.github-alt:hover { border-color: #e8c697; background-color: #e8c697; } .custom-social-icons a.dribbble:hover { border-color: #d97aa6; background-color: #d97aa6; } .custom-social-icons a.flickr:hover { border-color: #dc97c0; background-color: #dc97c0; } .custom-social-icons a.behance:hover { border-color: #1aace3; background-color: #1aace3; } .custom-social-icons a.youtube:hover { border-color: #f16261; background-color: #f16261; } .custom-social-icons a.vimeo:hover { border-color: #00dbff; background-color: #00dbff; } .custom-social-icons a.instagram:hover { border-color: #b1a48f; background-color: #b1a48f; } .custom-social-icons a.pinterest:hover { border-color: #f16261; background-color: #f16261; } .custom-social-icons a.tumblr:hover { border-color: #4d7ea3; background-color: #4d7ea3; } .custom-social-icons a.vimeo-square:hover { border-color: #87d3e0; background-color: #87d3e0; } .custom-social-icons a.linkedin:hover { border-color: #0c88c8; background-color: #0c88c8; } .custom-social-icons a.vk:hover { border-color: #456691; background-color: #456691; } .custom-social-icons a.skype:hover { border-color: #36c4f3; background-color: #36c4f3; } .custom-social-icons a.digg:hover { border-color: #3886d0; background-color: #3886d0; } .custom-social-icons a.xing:hover { border-color: #00777d; background-color: #00777d; } /*------------ ( Custom Icons ) ------------*/ .za-custom-icon { display: inline-block; margin-right: 10px; } * .za-custom-icon:first-child, * .za-custom-icon:last-child { margin-right: 0!important; } .za-custom-icon a { display: block; } .za-custom-icon.left-side { float: left; } .za-custom-icon.right-side { float: right; } .za-custom-icon img { width: auto; height: auto; display: inline-block; } .za-custom-icon img { display: inline-block; } /*------------ ( Testimonials ) ------------*/ .testimonial-item { margin-bottom: 30px; } .testimonial-item .testimonial-content { padding: 18px 22px; padding-bottom: 44px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); } .testimonial-item .testimonial-content:before { content: open-quote; } .testimonial-item .testimonial-content:after { content: close-quote; } .testimonial-item .testimonial-content i { position: absolute; bottom: -10px; right: -10px; font-size: 50px; color: rgba(0,0,0,0.08); } .testimonial-item .author-desc { position: relative; top: -30px; padding-left: 20px; } .testimonial-item .author-desc .author-img { float: left; width: 58px; height: 58px; padding: 5px; position: relative; top: -5px; margin-right: 8px; background-color: #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .testimonial-item .author-desc .author-img img { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; } .testimonial-item .author-desc .author-name { font-size: 11px; } .testimonial-item .author-desc .name:after { content: ' - '; } .testimonial-item .author-desc .job { opacity: 0.7; margin-left: 4px; } /*------------ ( Testimonials & Tweets Slider ) ------------*/ .testimonials-slider, .tweets-slider { text-align: center; margin-bottom: 40px; } .testimonials-slider.dots-nav-true { padding: 0 0 38px 0; } .tweets-slider.dots-nav-true { padding: 30px 0 45px 0; } .testimonials-slider .testimonial-item, .tweets-slider .tweet-item { margin-bottom: 0; } .testimonials-slider .testimonial-item .testimonial-content, .tweets-slider .tweet-item .tweet-text { font-size: 16px; line-height: 28px; letter-spacing: 1px; border: none; margin-bottom: 20px; padding-bottom: 0; } .tweets-slider .tweet-item .tweet-text { margin-bottom: 5px; } .tweets-slider .tweet-item .tweet-text a, .tweets-slider .tweet-item .tweet-time a { color: inherit!important; } .tweets-slider .tweet-item .tweet-text a:hover { color: #47b5ef!important; } .tweets-slider .tweet-item .tweet-time a:hover { color: #149feb!important; } .testimonial-content, .tweet-text { font-family: 'Raleway', sans-serif; font-weight: 600; } .tweets-slider .tweet-item .tweet-time { opacity: 0.7; } .testimonials-slider .testimonial-item .testimonial-content i { display: none; } .testimonials-slider .testimonial-item .author-desc { top: 0; padding-left: 0; } .testimonials-slider .testimonial-item .author-desc .author-img { float: none; display: inline-block; width: 60px; height: 60px; padding: 0; top: 0; margin-right: 0; background-color: transparent; border: none; margin-bottom: 2px; } .testimonials-slider.arrows-nav-true .testimonial-item .testimonial-content, .tweets-slider.arrows-nav-true .tweet-item .tweet-text { padding: 0 100px; } .testimonials-slider .owl-nav div, .tweets-slider .owl-nav div { position: absolute; top: 50%; display: block; height: 46px; width: 46px; font-size: 12px; text-align: center; border: 2px solid; margin-top: -23px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .testimonials-slider .owl-nav div i, .tweets-slider .owl-nav div i { line-height: 44px; } .testimonials-slider .owl-nav .owl-next, .tweets-slider .owl-nav .owl-next { right: 0; } .testimonials-slider .owl-nav .owl-prev, .tweets-slider .owl-nav .owl-prev { left: 0; } .testimonials-slider.arrows-nav-dark .owl-nav div, .tweets-slider.arrows-nav-dark .owl-nav div { color: rgba(0,0,0,0.7); border-color: rgba(0,0,0,0.6); } .testimonials-slider.arrows-nav-dark .owl-nav div:hover, .tweets-slider.arrows-nav-dark .owl-nav div:hover { background-color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0); color: #f1b458; } .testimonials-slider.arrows-nav-light .owl-nav div, .tweets-slider.arrows-nav-light .owl-nav div { color: #fff; border-color: #fff; } .testimonials-slider.arrows-nav-light .owl-nav div:hover, .tweets-slider.arrows-nav-light .owl-nav div:hover { background-color: #fff; border-color: rgba(255,255,255,0); color: #f1b458; } .testimonials-slider .owl-dots, .tweets-slider .owl-dots { position: absolute; right: 0; bottom: 0; display: block; width: 100%; line-height: 14px; text-align: center; } .testimonials-slider .owl-dots .owl-dot, .tweets-slider .owl-dots .owl-dot { display: inline-block; height: 8px; width: 8px; margin-right: 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .testimonials-slider .owl-dots .owl-dot:last-child, .tweets-slider .owl-dots .owl-dot:last-child { margin-right: 0; } .testimonials-slider.dots-nav-dark .owl-dots .owl-dot, .tweets-slider.dots-nav-dark .owl-dots .owl-dot { background-color: rgba(0,0,0,0.2); } .testimonials-slider.dots-nav-dark .owl-dots .owl-dot:hover, .tweets-slider.dots-nav-dark .owl-dots .owl-dot:hover { background-color: rgba(0,0,0,0.7); } .testimonials-slider.dots-nav-dark .owl-dots .owl-dot.active, .tweets-slider.dots-nav-dark .owl-dots .owl-dot.active { background-color: rgba(0,0,0,0.7); -o-transform: scale(1.3); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } .testimonials-slider.dots-nav-light .owl-dots .owl-dot, .tweets-slider.dots-nav-light .owl-dots .owl-dot { background-color: rgba(255,255,255,0.2); } .testimonials-slider.dots-nav-light .owl-dots .owl-dot:hover, .tweets-slider.dots-nav-light .owl-dots .owl-dot:hover { background-color: rgba(255,255,255,7); } .testimonials-slider.dots-nav-light .owl-dots .owl-dot.active, .tweets-slider.dots-nav-light .owl-dots .owl-dot.active { background-color: rgba(255,255,255,7); -o-transform: scale(1.3); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } /*------------ ( Latest Posts ) ------------*/ .latest-posts.sections-style .post-item { text-align: center; padding: 40px 0; position: relative; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .latest-posts.sections-style .post-item:hover { padding: 60px 0; } .latest-posts.sections-style .post-item h2 { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: 3px; padding: 12px 0 10px; text-transform: uppercase; } .latest-posts.sections-style .post-item h2 a { position: relative; display: inline-block; } .latest-posts.sections-style .post-item h2 a:before { content: ''; display: block; position: absolute; top: -6px; left: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,0.1); transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .latest-posts.sections-style .post-item h2 a:after { content: ''; display: block; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,0.1); transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .latest-posts.sections-style .post-item:hover h2 a:before, .latest-posts.sections-style .post-item:hover h2 a:after { background-color: rgba(0,0,0,0.1); } .latest-posts.sections-style .post-item span { letter-spacing: 2px; font-size: 80%; opacity: 0.8; text-transform: uppercase; } .latest-posts.sections-style .post-item h2, .latest-posts.sections-style .post-item h2 a, .latest-posts.sections-style .post-item span, .latest-posts.sections-style .post-item span a { color: #fff; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .latest-posts.sections-style .post-item:hover h2, .latest-posts.sections-style .post-item:hover h2 a, .latest-posts.sections-style .post-item:hover span, .latest-posts.sections-style .post-item:hover span a { color: #333; } .latest-posts.sections-style .post-item .post-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .latest-posts.sections-style .post-item:hover .post-overlay { background-color: rgba(255,255,255,0.8); } .latest-posts.classic-style.cols-1 .post { width: 100%; float: left; } .latest-posts.classic-style.cols-2 .post { width: 50%; float: left; } .latest-posts.classic-style.cols-3 .post { width: 33.33333333%; float: left; } .latest-posts.classic-style.cols-4 .post { width: 25%; float: left; } .latest-posts.classic-style.cols-5 .post { width: 20%; float: left; } .latest-posts.classic-style .post { margin-bottom: 24px; } .latest-posts.classic-style .post-thumb { width: 60px; height: 60px; display: block; position: relative; float: left; overflow: hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; margin-right: 16px; margin-bottom: 0; } .latest-posts.classic-style .post-thumb a { display: block; } .latest-posts.classic-style .post-thumb a > i { width: 60px; height: 60px; text-align: center; line-height: 60px; display: block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; color: rgba(0,0,0,0.2); border: 1px solid #ddd; font-size: 14px; } .latest-posts.classic-style .post-thumb span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 64px; text-align: center; font-size: 14px; opacity: 0; background-color: rgba(255,255,255,1); color: #333; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .latest-posts.classic-style .post-thumb:hover span { opacity: 1; } .latest-posts.classic-style .post-thumb img { width: 60px; height: 60px; } .latest-posts.classic-style .post-content h4 { font-size: 11px; font-weight: 800; line-height: 20px; text-transform: uppercase; margin-top: 8px; } .latest-posts.classic-style .post-content > a { display: inline-block; font-weight: 400; } .latest-posts.classic-style .post-meta li { display: inline-block; padding: 0; margin: 0; margin-right: 5px; font-size: 11px; } .latest-posts.classic-style .post-meta li, .latest-posts.classic-style .post-meta li a { color: #aaa; } .latest-posts.classic-style .post-meta li:after, .latest-posts.classic-style .post-meta li.post-cats a:after { content: ', '; } .latest-posts.classic-style .post-meta li:before, .latest-posts.classic-style .post-meta li:last-child:after, .latest-posts.classic-style .post-meta li.post-cats a:last-child:after { display: none; } /*------------ ( Call Action ) ------------*/ .za-call-action { text-align: center; transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .za-call-action.creative-style > a { display: block; transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .za-call-action.classic-style .za-btn { float: right; } .za-call-action.classic-style .custom-font { float: left; } /*------------ ( Login Forms ) ------------*/ .za-login-form { text-align: center; } .za-login-form p { margin-bottom: 25px; } .za-login-form p:last-child { margin-bottom: 0; } .za-login-form p.login-remember { margin: 15px 0; } .za-login-form label { display: none; } .za-login-form .login-remember label { font-size: 13px; line-height: 14px; display: block; font-weight: 700; display: inline-block; } .za-login-form input[type="text"], .za-login-form input[type="password"] { padding: 11px 16px; } .za-login-form input[type="radio"], .za-login-form input[type="checkbox"] { margin-top: 0; position: relative; top: 2px; left: -5px; } .za-login-form input[type="submit"] { min-width: 120px; position: relative; } /*------------ ( Registration Forms ) ------------*/ .za-registration-form { text-align: center; } .za-registration-form p { margin-bottom: 25px; } .za-registration-form input[type="text"], .za-registration-form input[type="password"], .za-registration-form input[type="email"] { padding: 9px 16px; } .za-registration-form input[type="submit"] { min-width: 160px; padding: 10px 22px; } .za-registration-form input:focus { background-color: inherit!important; -webkit-box-shadow: 0 0 0 0 white inset; } /*------------ ( Image Boxes ) ------------*/ .za-image-box { position: relative; overflow: hidden; } .za-image-box .image-overlay { position: absolute; z-index: 32; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; transition: transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; } .za-image-box:hover .image-overlay { -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .za-image-box .image-box-content { position: relative; z-index: 33; } .za-image-box .front-content { padding: 13% 12%; opacity: 1; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .za-image-box .back-content { display: table; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 14% 12%; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .za-image-box.front-back:hover .front-content { opacity: 0; } .za-image-box .back-content > div { display: table-cell; vertical-align: middle; } .za-image-box .back-content { opacity: 0; } .za-image-box.front-back:hover .back-content { opacity: 1!important; } /*------------ ( Lists ) ------------*/ ol.ordered_list, ul.unordered-list, ul.icons-list { padding: 0; margin-bottom: 15px!important; list-style: none!important; } ol.ordered_list li, ul.unordered-list li, ul.icons-list li { position: relative; margin-bottom: 8px; } ol.ordered_list { counter-reset: item; } ol.ordered_list li { padding-left: 32px; } ol.ordered_list li:before { content: counter(item); counter-increment: item; color: #fff; display: block; height: 20px; width: 20px; line-height: 20px; font-size: 11px; position: absolute; top: 1px; left: 0; background-color: #cccccc; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } ul.unordered-list li { padding-left: 22px; } ul.unordered-list li:before { content: ''; display: block; height: 8px; width: 8px; position: absolute; top: 12px; left: 0; margin-top: -4px; background-color: #cccccc; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; } ul.icons-list li { padding-left: 0!important; padding-top: 0!important; margin-bottom: 8px; } ul.icons-list li:before { display: none!important; } ul.icons-list li i { font-size: 16px; color: #bbb; position: relative; top: 2px; margin-right: 11px; } ul.icons-list li:before { display: none; } /*------------ ( Gallery & Single Image ) ------------*/ .za-gallery .gallery-item { display: block; float: left; overflow: hidden; } .za-single-image { overflow: hidden; } .za-gallery .gallery-item a, .za-single-image .single-image-inner, .za-gallery .gallery-item .item-inner { display: block; position: relative; overflow: hidden; } .za-single-image .single-image-inner a { display: block; } .za-single-image .single-image-inner img, .za-gallery .gallery-item img { position: relative; width: 100%; height: auto; } .za-gallery.spaces-true { padding: 2px; } .za-gallery.spaces-true .gallery-item a, .za-gallery .gallery-item .item-inner { margin: 2px; } .za-gallery.cols-1 .gallery-item { width: 100%; } .za-gallery.cols-2 .gallery-item { width: 50%; } .za-gallery.cols-3 .gallery-item { width: 33.333333%; } .za-gallery.cols-4 .gallery-item { width: 25%; } .za-gallery.cols-5 .gallery-item { width: 20%; } .za-gallery.cols-6 .gallery-item { width: 16.66666%; } .za-gallery.cols-7 .gallery-item { width: 14.285%; } .za-gallery.cols-8 .gallery-item { width: 12.5%; } .za-gallery.cols-9 .gallery-item { width: 11.111%; } .za-gallery .gallery-item .overlay, .za-single-image .overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; z-index: 44; text-align: center; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .za-gallery.style-1 .gallery-item .overlay { background-color: rgba(73,67,65,0.4); } .za-single-image.style-1 .overlay { opacity: 0; background-color: rgba(73,67,65,0.2); } .za-gallery.style-1 .gallery-item:hover .overlay { background-color: rgba(73,67,65,0.95); } .za-single-image.style-1:hover .overlay { opacity: 1; background-color: rgba(0,0,0,0.2); } .za-gallery.style-1 .gallery-item img { position: relative; top: 10px; -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -webkit-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; } .za-single-image.style-1 img { transition: transform 1.2s ease-in-out; -moz-transition: o-transform 1.2s ease-in-out; -webkit-transition: -webkit-transform 1.2s ease-in-out; -o-transition: -o-transform 1.2s ease-in-out; } .za-gallery.style-1 .gallery-item:hover img { top: 0; } .za-single-image.style-1:hover img { -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .za-gallery.style-1 .gallery-item .overlay h6 { text-transform: uppercase; font-weight: 700; color: #f1b458; position: relative; top: 50%; opacity: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .za-gallery.style-1 .gallery-item .overlay:hover h6 { opacity: 1; } .za-gallery.style-1 .gallery-item .overlay h6 span { position: relative; } .za-gallery.style-1 .gallery-item .overlay h6 span:after { display: block; content: ''; width: 100%; height: 2px; background-color: #fff; position: absolute; bottom: -17px; left: 0; transition: bottom 0.3s ease-in-out; -moz-transition: bottom 0.3s ease-in-out; -webkit-transition: bottom 0.3s ease-in-out; -o-transition: bottom 0.3s ease-in-out; } .za-gallery.style-1 .gallery-item:hover .overlay h6 span:after { bottom: -7px; } .za-gallery.style-1 .gallery-item .overlay i { display: none; } .za-gallery.style-2 .gallery-item .overlay { background-color: rgba(73,67,65,0.4); } .za-single-image.style-2 .overlay { opacity: 0; background-color: rgba(73,67,65,0.2); } .za-gallery.style-2 .gallery-item:hover .overlay { background-color: rgba(73,67,65,0.95); } .za-single-image.style-2:hover .overlay { opacity: 1; background-color: rgba(255,255,255,0.6); } .za-gallery.style-2 .gallery-item img { position: relative; -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform 0.6s ease-in-out; -moz-transition: o-transform 0.6s ease-in-out; -webkit-transition: -webkit-transform 0.6s ease-in-out; -o-transition: -o-transform 0.6s ease-in-out; } .za-single-image.style-2 img { -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform 1s ease-in-out; -moz-transition: o-transform 1s ease-in-out; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; } .za-gallery.style-2 .gallery-item:hover img, .za-single-image.style-2:hover img { -o-transform: scale(1.0); -moz-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } .za-gallery.style-2 .gallery-item .overlay h6 { text-transform: uppercase; font-weight: 700; color: #fff; position: relative; top: 50%; opacity: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .za-gallery.style-2 .gallery-item .overlay:hover h6 { opacity: 1; } .za-gallery.style-2 .gallery-item .overlay h6:before { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background-color: rgba(255,255,255,0.2); content: ''; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .za-gallery.style-2 .gallery-item:hover .overlay h6:before { -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .za-gallery.style-2 .gallery-item .overlay h6:after { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background-color: rgba(255,255,255,0.2); content: ''; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .za-gallery.style-2 .gallery-item:hover .overlay h6:after { -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(-45deg); -o-transform: translate3d(-50%,-50%,0) rotate(-45deg); transform: translate3d(-50%,-50%,0) rotate(-45deg); } .za-gallery.style-2 .gallery-item .overlay i { display: none; } .za-gallery.style-3 .gallery-item .overlay { opacity: 1; background-color: rgba(73,67,65,0.4); } .za-gallery.style-3 .gallery-item:hover .overlay { opacity: 1; background-color: rgba(255,255,255,0.9); } .za-gallery.style-3 .gallery-item img { position: relative; -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform 0.6s ease-in-out; -moz-transition: -moz-transform 0.6s ease-in-out; -webkit-transition: -webkit-transform 0.6s ease-in-out; -o-transition: -o-transform 0.6s ease-in-out; } .za-gallery.style-3 .gallery-item:hover img { -o-transform: scale(1.0); -moz-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } .za-gallery.style-3 .gallery-item .overlay h6 { display: none; } .za-gallery.style-3 .gallery-item .overlay i { position: relative; color: #444; font-size: 16px; top: 50%; width: 50px; height: 50px; border: 2px solid #444; line-height: 46px; border-radius: 50%; display: inline-block; opacity: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .za-gallery.style-3 .gallery-item .overlay:hover i { opacity: 1; } /*------------ ( Clients ) ------------*/ .carousel-layout .client-item .tooltip { top: 0px!important; } .clients.grid-layout-2-1 .client-item, .clients.grid-layout-2-2 .client-item { width: 50%; float: left; } .clients.grid-layout-3-1 .client-item, .clients.grid-layout-3-2 .client-item { width: 33.3333%; float: left; } .clients.grid-layout-4-1 .client-item, .clients.grid-layout-4-2 .client-item { width: 25%; float: left; } .clients.grid-layout-5-1 .client-item, .clients.grid-layout-5-2 .client-item { width: 20%; float: left; } .clients.grid-layout .client-item .border-right, .carousel-layout .client-item .border-right { display: block; position: absolute; top: 5%; right: 0; height: 90%; width: 1px; display: block; background-color: rgba(0,0,0,0.2); } .clients.grid-layout .client-item .border-bottom { display: block; position: absolute; right: 5%; bottom: 0; width: 90%; height: 1px; display: block; background-color: rgba(0,0,0,0.2); } .client-item { position: relative; } .client-item img { width: 100%; height: auto; } .client-item.boxed-border { border: 2px solid; } .clients.grid-layout .client-item.boxed-border { border-right-width: 0!important; } .clients.grid-layout .client-item.boxed-border:last-child { border-right-width: 2px!important; } .client-item.fancy-divider { } .client-item .client-link { padding: 35px 0; } .client-item.with-hover .img { opacity: 1; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .client-item.with-hover:hover .img { opacity: 0; } .client-item.with-hover .img-hover { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .client-item:hover .img-hover { opacity: 1; } .carousel-layout .client-item .border-right:last-child, .clients.grid-layout-2-1 .fancy-divider .border-bottom, .clients.grid-layout-2-1 .fancy-divider:last-child .border-right, .clients.grid-layout-3-1 .fancy-divider .border-bottom, .clients.grid-layout-3-1 .fancy-divider:last-child .border-right, .clients.grid-layout-4-1 .fancy-divider .border-bottom, .clients.grid-layout-4-1 .fancy-divider:last-child .border-right, .clients.grid-layout-5-1 .fancy-divider .border-bottom, .clients.grid-layout-5-1 .fancy-divider:last-child .border-right, .clients.grid-layout-2-2 .fancy-divider:nth-child(2) .border-right, .clients.grid-layout-2-2 .fancy-divider:nth-child(4) .border-right, .clients.grid-layout-3-2 .fancy-divider:nth-child(3) .border-right, .clients.grid-layout-3-2 .fancy-divider:nth-child(6) .border-right, .clients.grid-layout-4-2 .fancy-divider:nth-child(4) .border-right, .clients.grid-layout-4-2 .fancy-divider:nth-child(8) .border-right, .clients.grid-layout-5-2 .fancy-divider:nth-child(5) .border-right, .clients.grid-layout-5-2 .fancy-divider:nth-child(10) .border-right, .clients.grid-layout-2-2 .fancy-divider:nth-child(n+3) .border-bottom, .clients.grid-layout-3-2 .fancy-divider:nth-child(n+4) .border-bottom, .clients.grid-layout-4-2 .fancy-divider:nth-child(n+5) .border-bottom, .clients.grid-layout-5-2 .fancy-divider:nth-child(n+6) .border-bottom { display: none; } /*------------ ( Counters ) ------------*/ .za-counter-block { cursor: pointer; text-align: center; display: inline-block; transition: all 0.3s ease-in-out!important; -moz-transition: all 0.3s ease-in-out!important; -webkit-transition: all 0.3s ease-in-out!important; -o-transition: all 0.3s ease-in-out!important; } .za-counter-block .counter-number { line-height: 100%; display: inline-block; } .za-counter-block .counter-number .symbol { position: relative; margin-right: -15px; } /*------------ ( Pie Charts ) ------------*/ .pie-chart-block { display: inline-block; position: relative; text-align: center; overflow: hidden; } .pie-chart-block .pie-chart { } .pie-chart-block .pie-chart-content { line-height: normal; position: absolute; left: 0; top: 50%; width: 100%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .pie-chart-block .pie-chart-content.iconText span { position: relative; top: -5px; } /*------------------------------------------*/ /* 05 - Sections CSS /*------------------------------------------*/ .page-inner { padding-top: 50px; padding-bottom: 50px; } .right-sidebar .page-inner .sidebar { width: 26%; float: right; padding-left: 26px; } .left-sidebar .page-inner .sidebar { width: 26%; float: left; padding-right: 26px; } .right-sidebar .page-inner .by-sidebar { width: 74%; float: left; padding-right: 25px; } .left-sidebar .page-inner .by-sidebar { width: 74%; float: right; padding-left: 25px; } .page-content { } .page-content p { margin-bottom: 20px; } .page-content p:last-child { margin-bottom: 0; } .cover-bg { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-bg, .parallax-content, .parallax-bg-header { background-attachment: fixed!important; background-repeat: no-repeat; } .page-header.parallax-bg, .page-header.parallax-content, .page-header.parallax-bg-header { background-attachment: inherit!important; } .wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid>li, .last_toggle_el_margin, .wpb_button { margin-bottom: 0!important; } .full_section_inner, .section, .section .container, .col { overflow: hidden; position: relative; } .fullwidth_content .wpb_column { padding-right: inherit; padding-left: inherit; } .col .wpb_wrapper { position: relative; z-index: 60; } .ios-fixed-bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 53; overflow: hidden; } .ios-fixed-bg.enable { display: block; } .ios-fixed-bg div { position: fixed!important; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0); background-size: cover!important; -moz-background-size: cover!important; -webkit-background-size: cover!important; -o-background-size: cover!important; } .section-crossfade { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; z-index: 53; } .section-overlay { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; z-index: 54!important; } .section .video-bg, .mobile-video-image { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; z-index: 53; overflow: hidden; } .section .video-bg iframe { margin-left: 0!important; } .video-bg .buttonBar, .mejs-offscreen { display: none!important; } .layers-parallax, .layer { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; z-index: 54; overflow: hidden; } .layer-container { width: 120%; height: 120%; margin-top: -5%; margin-left: -10%; } .mobile-video-image { display: none; z-index: 54; } .section .video-bg .video { display: block; min-width: 100%; height: auto; min-height: 100%; } .section .video-bg .mejs-poster, .mobile-video-image { background-size: cover!important; -moz-background-size: cover!important; -webkit-background-size: cover!important; -o-background-size: cover!important; } .bg-animation { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; z-index: 53; overflow: hidden; } .bg-animation.animate-top { -webkit-animation-name: bgToTop; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgToTop; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgToTop; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgToTop { from { background-position: top center; } to { background-position: bottom center; } } @-moz-keyframes bgToTop { from { background-position: top center; } to { background-position: bottom center; } } .bg-animation.animate-bottom { -webkit-animation-name: bgToBottom; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgToBottom; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgToBottom; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgToBottom { from { background-position: bottom center; } to { background-position: top center; } } @-moz-keyframes bgToBottom { from { background-position: bottom center; } to { background-position: top center; } } .bg-animation.animate-right { -webkit-animation-name: bgToRight; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgToRight; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgToRight; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgToRight { from { background-position: center left; } to { background-position: center right; } } @-moz-keyframes bgToRight { from { background-position: center left; } to { background-position: center right; } } .bg-animation.animate-left { -webkit-animation-name: bgToLeft; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgToLeft; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgToLeft; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgToLeft { from { background-position: center right; } to { background-position: center left; } } @-moz-keyframes bgToLeft { from { background-position: center right; } to { background-position: center left; } } .bg-animation.animate-zoom { -webkit-animation-name: bgZoom; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgZoom; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgZoom; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgZoom { 0% { -webkit-transform: scale(1.0) } 50% { -webkit-transform: scale(1.4) } 100% { -webkit-transform: scale(1.0) } } @-moz-keyframes bgZoom { 0% { -moz-transform: scale(1.0); } 50% { -moz-transform: scale(1.4); } 100% { -moz-transform: scale(1.0); } } .bg-animation.animate-zoom-rotate { height: 120%; top: -10%; -webkit-animation-name: bgZoomRotate; -webkit-animation-duration:80s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name: bgZoom; -moz-animation-duration:80s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; animation-name: bgZoom; animation-duration:80s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes bgZoomRotate { 0% { -webkit-transform: rotate(0deg) scale(1);} 50% { -webkit-transform: rotate(8deg) scale(1.3);} 100% { -webkit-transform: rotate(0deg) scale(1);} } @-moz-keyframes bgZoomRotate { 0% { -moz-transform: rotate(0deg) scale(1);} 50% { -moz-transform: rotate(8deg) scale(1.3);} 100% { -moz-transform: rotate(0deg) scale(1);} } #one-page-nav { position: fixed; top: 50%; right: 25px; background-color: #fff; z-index: 99; padding: 5px 8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #one-page-nav li a { position: relative; height: 18px; width: 4px; display: block; margin: 6px 0; text-indent: -99999px; background-color: rgba(0,0,0,0.1); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } #one-page-nav li a:hover { background-color: rgba(0,0,0,0.2); } #one-page-nav li.current a { background-color: #f1b458; } #one-page-nav li a span { opacity: 0; position: absolute; top: -2px; right: 35px; z-index: 100; background-color: #fff; font-size: 10px; line-height: 20px; color: #333; padding: 4px 10px; letter-spacing: 1px; text-indent: initial; text-transform: uppercase; visibility: hidden; transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out, visibility 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out, visibility 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out, visibility 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out, visibility 0.3s ease-in-out; } #one-page-nav li a:hover span { opacity: 1; right: 24px; visibility: visible; } #one-page-nav li a span:after { content: ''; display: block; position: absolute; left: 100%; top: 50%; width: 0; height: 0; margin-top: -4px; border-top: 4px solid transparent; border-left: 5px solid #fff; border-bottom: 4px solid transparent; } /*------------------------------------------*/ /* 06 - Portfolio CSS /*------------------------------------------*/ /*------------ ( Main ) ------------*/ .projects-wrap { overflow: hidden; } .projects-wrap.padding-bottom { padding-bottom: 60px; } .projects-wrap .projects-list { width: 100%; } .project-page-builder .project-wrap { padding: 0; } .project-item { float: left; overflow: hidden; position: relative; opacity: 0; transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .project-item.visible-item { opacity: 1; } .project-item img { width: 100%; } .project-item figure { position: relative; overflow: hidden; } .project-item a.touch-open-project { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; } .project-item .project-categories a:after, .project-item .project-categories span:after { content: ' - '; margin-right: 3px; } .project-item .project-categories a:last-child:after, .project-item .project-categories span:last-child:after { display: none; } .project-item .project-links { position: absolute; bottom: 20px; right: 20px; text-align: right; width: 100%; } .project-item .project-links a { display: inline-block; width: 32px; height: 32px; color: #fff; text-align: center; border: 2px solid rgba(255,255,255,0.2); margin-right: 2px; position: relative; opacity: 0; top: 0; line-height: 29px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item .project-links a:hover { border-color: rgba(255,255,255,0.4); } .project-item .project-links a:last-child { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .project-item:hover .project-links a { opacity: 1; } .project-item .project-links a i { font-size: 10px; } /*------------ ( Projects Loader ) ------------*/ .projects-loader { padding: 150px 0; text-align: center; } .projects-loader .spinner { display: inline-block; } /*------------ ( Filters ) ------------*/ #filters { text-align: center; margin: 35px 0; } #filters li { display: inline-block; margin-right: 15px; } #filters li:last-child { margin-right: 0; } #filters li span, #filters li a { cursor: pointer; font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; display: inline-block; color: #aaa; border: 2px solid #fff; transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out; -o-transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out; } #filters li span:hover, #filters li a:hover { color: #444; } #filters li span.active, #filters li span.active:hover, #filters li.current-cat a, #filters li.current-cat a:hover { color: #888; border-color: #e4e4e4; } .filters-gap { height: 40px; } /*------------ ( Masonry Multi-Size Portfolio ) ------------*/ .projects-list.masonry-multisize-layout .project-item.masonry-small, .projects-list.masonry-multisize-layout .project-item.masonry-high, .projects-list.masonry-multisize-layout .grid-sizer { width: 20%; } .projects-list.masonry-multisize-layout .project-item.masonry-large, .projects-list.masonry-multisize-layout .project-item.masonry-long { width: 40%; } .container .projects-list.masonry-multisize-layout .project-item.masonry-small, .container .projects-list.masonry-multisize-layout .project-item.masonry-high, .container .projects-list.masonry-multisize-layout .grid-sizer { width: 25%; } .container .projects-list.masonry-multisize-layout .project-item.masonry-large, .container .projects-list.masonry-multisize-layout .project-item.masonry-long { width: 50%; } /*------------ ( Grid & Standard Masonry Portfolio ) ------------*/ .projects-list.grid-layout.space-true .project-item, .projects-list.masonry-layout.space-true .project-item { padding-right: 2px; padding-left: 2px; margin-bottom: 4px } .projects-list.grid-layout.projects-cols-2 .project-item, .projects-list.masonry-layout.projects-cols-2 .project-item, .projects-list.masonry-layout.projects-cols-2 .grid-sizer { width: 50%; } .projects-list.grid-layout.projects-cols-3 .project-item, .projects-list.masonry-layout.projects-cols-3 .project-item, .projects-list.masonry-layout.projects-cols-3 .grid-sizer { width: 33.33%; } .projects-list.grid-layout.projects-cols-4 .project-item, .projects-list.masonry-layout.projects-cols-4 .project-item, .projects-list.masonry-layout.projects-cols-4 .grid-sizer { width: 25%; } .projects-list.grid-layout.projects-cols-5 .project-item, .projects-list.masonry-layout.projects-cols-5 .project-item, .projects-list.masonry-layout.projects-cols-5 .grid-sizer { width: 20%; } .projects-list.grid-layout.projects-cols-6 .project-item, .projects-list.masonry-layout.projects-cols-6 .project-item, .projects-list.masonry-layout.projects-cols-6 .grid-sizer { width: 16.6666%; } /*------------ ( Portfolio Style 1 ) ------------*/ .project-item.style-1 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 30px 25px; background-color: rgba(73,67,65,0.2); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .project-item.style-1:hover figcaption { background-color: rgba(73,67,65,0.6); } .project-item.style-1 img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; } .project-item.style-1:hover img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .project-item.style-1 h4, .project-item.style-1 .project-categories { margin-left: 10px; position: relative; top: 28px; opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-1 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 4px; text-transform: uppercase; opacity: 1; top: 20px; } .project-item.style-1 h4, .project-item.style-1 h4 a, .project-item.style-1 h4 a:hover, .project-item.style-1 .project-categories a, .project-item.style-1 .project-categories a:hover { color: #fff; } .project-item.style-1 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .project-item.style-1:hover h4, .project-item.style-1:hover .project-categories { top: 10px; opacity: 1; } /*------------ ( Portfolio Style 2 ) ------------*/ .project-item.style-2 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.2); transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -webkit-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; } .project-item.style-2:hover figcaption { background-color: rgba(73,67,65,0.6); } .project-item.style-2 img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transition: transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; } .project-item.style-2:hover img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .project-item.style-2 h4, .project-item.style-2 .project-categories { opacity: 0; position: relative; top: 15px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-2:hover h4, .project-item.style-2:hover .project-categories { opacity: 1; top: 0; } .project-item.style-2 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-2 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; text-transform: uppercase; } .project-item.style-2 h4 a { padding: 7px 12px; border: 2px solid #fff; } .project-item.style-2 h4, .project-item.style-2 h4 a, .project-item.style-2 h4 a:hover, .project-item.style-2 .project-categories a, .project-item.style-2 .project-categories a:hover { color: #fff; } .project-item.style-2 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 3 ) ------------*/ .project-item.style-3 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.2); transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -webkit-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; } .project-item.style-3 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: -50%; left: 0; opacity: 0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: -moz-linear-gradient(top, rgba(12,6,0,0.6) 0%, rgba(28,16,1,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,6,0,0.6)), color-stop(100%,rgba(28,16,1,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990c0600', endColorstr='#001c1001',GradientType=0 ); /* IE6-9 */ } .project-item.style-3:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-3 img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; } .project-item.style-3:hover img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); } .project-item.style-3 h4, .project-item.style-3 .project-categories { opacity: 0; position: relative; top: -15px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-3:hover h4, .project-item.style-3:hover .project-categories { opacity: 1; top: 0; } .project-item.style-3 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-3 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; text-transform: uppercase; } .project-item.style-3 h4 a { padding: 7px 12px; border: 2px solid #fff; } .project-item.style-3 h4, .project-item.style-3 h4 a, .project-item.style-3 h4 a:hover, .project-item.style-3 .project-categories a, .project-item.style-3 .project-categories a:hover { color: #fff; } .project-item.style-3 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 4 ) ------------*/ .project-item.style-4 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.2); transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -webkit-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; } .project-item.style-4 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; opacity: 0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: -moz-linear-gradient(top, rgba(28,16,1,0) 0%, rgba(28,16,1,0) 1%, rgba(12,6,0,0.6) 99%, rgba(12,6,0,0.6) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,16,1,0)), color-stop(1%,rgba(28,16,1,0)), color-stop(99%,rgba(12,6,0,0.6)), color-stop(100%,rgba(12,6,0,0.6))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001c1001', endColorstr='#990c0600',GradientType=0 ); /* IE6-9 */ } .project-item.style-4:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-4 img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); position: relative; left: -12px; transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -webkit-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; } .project-item.style-4:hover img { left: 0; } .project-item.style-4 h4 { opacity: 0; position: relative; right: 25px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-4:hover h4 { opacity: 1; right: 0; } .project-item.style-4 .project-categories { opacity: 0; position: relative; right: -25px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-4:hover .project-categories { opacity: 1; right: 0; } .project-item.style-4 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-4 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px; text-transform: uppercase; } .project-item.style-4 h4 a { position: relative; display: inline-block; } .project-item.style-4 h4 a:after { content: ''; display: block; width: 0; height: 2px; position: absolute; bottom: -6px; background-color: rgba(255,255,255,0); -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; transition: width 1s ease-in-out, background-color 1s ease-in-out; -moz-transition: width 1s ease-in-out, background-color 1s ease-in-out; -webkit-transition: width 1s ease-in-out, background-color 1s ease-in-out; -o-transition: width 1s ease-in-out, background-color 1s ease-in-out; } .project-item.style-4:hover h4 a:after { width: 100%; background-color: rgba(255,255,255,1); } .project-item.style-4 h4, .project-item.style-4 h4 a, .project-item.style-4 h4 a:hover, .project-item.style-4 .project-categories a, .project-item.style-4 .project-categories a:hover { color: #fff; } .project-item.style-4 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 5 ) ------------*/ .project-item.style-5 .project-border-1 { position: absolute; left: 10px; top: 10px; height: 2px; width: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .project-item.style-5 .project-border-2 { position: absolute; right: 10px; top: 10px; width: 2px; height: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .project-item.style-5 .project-border-3 { position: absolute; right: 10px; bottom: 10px; height: 2px; width: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .project-item.style-5 .project-border-4 { position: absolute; left: 10px; bottom: 10px; width: 2px; height: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .project-item.style-5:hover .project-border-1, .project-item.style-5:hover .project-border-3 { background-color: rgba(255,255,255,0.2); width: calc(100% - 20px); } .project-item.style-5:hover .project-border-2, .project-item.style-5:hover .project-border-4 { background-color: rgba(255,255,255,0.2); height: calc(100% - 20px); } .project-item.style-5 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.2); transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -webkit-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; } .project-item.style-5 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; background: -moz-linear-gradient(top, rgba(28,16,1,0) 0%, rgba(28,16,1,0) 1%, rgba(12,6,0,0.6) 99%, rgba(12,6,0,0.6) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,16,1,0)), color-stop(1%,rgba(28,16,1,0)), color-stop(99%,rgba(12,6,0,0.6)), color-stop(100%,rgba(12,6,0,0.6))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001c1001', endColorstr='#990c0600',GradientType=0 ); /* IE6-9 */ } .project-item.style-5:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-5 img { position: relative; bottom: -14px; -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: bottom 0.6s ease-in-out; -moz-transition: bottom 0.6s ease-in-out; -webkit-transition: bottom 0.6s ease-in-out; -o-transition: bottom 0.6s ease-in-out; } .project-item.style-5:hover img { bottom: 0; } .project-item.style-5 h4, .project-item.style-5 .project-categories { opacity: 0; position: relative; top: 12px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-5 .project-categories { top: 25px; } .project-item.style-5:hover h4, .project-item.style-5:hover .project-categories { opacity: 1; top: 0; } .project-item.style-5 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-5 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; } .project-item.style-5 h4 a { position: relative; display: inline-block; } .project-item.style-5 h4, .project-item.style-5 h4 a, .project-item.style-5 h4 a:hover, .project-item.style-5 .project-categories a, .project-item.style-5 .project-categories a:hover { color: #fff; } .project-item.style-5 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .project-item.style-5 .project-links a { border: none; } /*------------ ( Portfolio Style 6 ) ------------*/ .project-item.style-6 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 30px 25px; background-color: rgba(73,67,65,0.3); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .project-item.style-6:hover figcaption { background-color: rgba(73,67,65,0.6); } .project-item.style-6 img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .project-item.style-6:hover img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-filter: grayscale(0%); filter: grayscale(0%); } .project-item.style-6 h4, .project-item.style-6 .project-categories { margin-left: 10px; position: relative; top: 28px; opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-6 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 4px; text-transform: uppercase; opacity: 1; top: 20px; } .project-item.style-6 h4, .project-item.style-6 h4 a, .project-item.style-6 h4 a:hover, .project-item.style-6 .project-categories a, .project-item.style-6 .project-categories a:hover { color: #fff; } .project-item.style-6 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .project-item.style-6:hover h4, .project-item.style-6:hover .project-categories { top: 10px; opacity: 1; } /*------------ ( Portfolio Style 7 ) ------------*/ .project-item.style-7 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.3); transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -webkit-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; } .project-item.style-7:hover figcaption { background-color: rgba(73,67,65,0.6); } .project-item.style-7 img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .project-item.style-7:hover img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-filter: grayscale(0%); filter: grayscale(0%); } .project-item.style-7 h4, .project-item.style-7 .project-categories { opacity: 0; position: relative; top: 15px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-7:hover h4, .project-item.style-7:hover .project-categories { opacity: 1; top: 0; } .project-item.style-7 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-7 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; text-transform: uppercase; } .project-item.style-7 h4 a { padding: 7px 12px; border: 2px solid #fff; } .project-item.style-7 h4, .project-item.style-7 h4 a, .project-item.style-7 h4 a:hover, .project-item.style-7 .project-categories a, .project-item.style-7 .project-categories a:hover { color: #fff; } .project-item.style-7 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 8 ) ------------*/ .project-item.style-8 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.3); } .project-item.style-8 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: -50%; left: 0; opacity: 0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: -moz-linear-gradient(top, rgba(12,6,0,0.6) 0%, rgba(28,16,1,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,6,0,0.6)), color-stop(100%,rgba(28,16,1,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(12,6,0,0.6) 0%,rgba(28,16,1,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990c0600', endColorstr='#001c1001',GradientType=0 ); /* IE6-9 */ } .project-item.style-8:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-8 img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .project-item.style-8:hover img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -webkit-filter: grayscale(0%); filter: grayscale(0%); } .project-item.style-8 h4, .project-item.style-8 .project-categories { opacity: 0; position: relative; top: -15px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-8:hover h4, .project-item.style-8:hover .project-categories { opacity: 1; top: 0; } .project-item.style-8 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-8 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; text-transform: uppercase; } .project-item.style-8 h4 a { padding: 7px 12px; border: 2px solid #fff; } .project-item.style-8 h4, .project-item.style-8 h4 a, .project-item.style-8 h4 a:hover, .project-item.style-8 .project-categories a, .project-item.style-8 .project-categories a:hover { color: #fff; } .project-item.style-8 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 9 ) ------------*/ .project-item.style-9 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.3); } .project-item.style-9 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; opacity: 0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: -moz-linear-gradient(top, rgba(28,16,1,0) 0%, rgba(28,16,1,0) 1%, rgba(12,6,0,0.6) 99%, rgba(12,6,0,0.6) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,16,1,0)), color-stop(1%,rgba(28,16,1,0)), color-stop(99%,rgba(12,6,0,0.6)), color-stop(100%,rgba(12,6,0,0.6))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001c1001', endColorstr='#990c0600',GradientType=0 ); /* IE6-9 */ } .project-item.style-9:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-9 img { position: relative; left: -12px; -webkit-filter: grayscale(100%); filter: grayscale(100%); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } .project-item.style-9:hover img { left: 0; -webkit-filter: grayscale(0%); filter: grayscale(0%); } .project-item.style-9 h4 { opacity: 0; position: relative; right: 25px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-9:hover h4 { opacity: 1; right: 0; } .project-item.style-9 .project-categories { opacity: 0; position: relative; right: -25px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-9:hover .project-categories { opacity: 1; right: 0; } .project-item.style-9 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-9 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px; text-transform: uppercase; } .project-item.style-9 h4 a { position: relative; display: inline-block; } .project-item.style-9 h4 a:after { content: ''; display: block; width: 0; height: 2px; position: absolute; bottom: -6px; background-color: rgba(255,255,255,0); -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; transition: width 1s ease-in-out, background-color 1s ease-in-out; -moz-transition: width 1s ease-in-out, background-color 1s ease-in-out; -webkit-transition: width 1s ease-in-out, background-color 1s ease-in-out; -o-transition: width 1s ease-in-out, background-color 1s ease-in-out; } .project-item.style-9:hover h4 a:after { width: 100%; background-color: rgba(255,255,255,1); } .project-item.style-9 h4, .project-item.style-9 h4 a, .project-item.style-9 h4 a:hover, .project-item.style-9 .project-categories a, .project-item.style-9 .project-categories a:hover { color: #fff; } .project-item.style-9 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } /*------------ ( Portfolio Style 10 ) ------------*/ .project-item.style-10 .project-border-1 { position: absolute; left: 10px; top: 10px; height: 2px; width: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .project-item.style-10 .project-border-2 { position: absolute; right: 10px; top: 10px; width: 2px; height: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .project-item.style-10 .project-border-3 { position: absolute; right: 10px; bottom: 10px; height: 2px; width: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .project-item.style-10 .project-border-4 { position: absolute; left: 10px; bottom: 10px; width: 2px; height: 0; background-color: rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } .project-item.style-10:hover .project-border-1, .project-item.style-10:hover .project-border-3 { background-color: rgba(255,255,255,0.2); width: calc(100% - 20px); } .project-item.style-10:hover .project-border-2, .project-item.style-10:hover .project-border-4 { background-color: rgba(255,255,255,0.2); height: calc(100% - 20px); } .project-item.style-10 figcaption { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; background-color: rgba(73,67,65,0.3); } .project-item.style-10 figcaption:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; background: -moz-linear-gradient(top, rgba(28,16,1,0) 0%, rgba(28,16,1,0) 1%, rgba(12,6,0,0.6) 99%, rgba(12,6,0,0.6) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,16,1,0)), color-stop(1%,rgba(28,16,1,0)), color-stop(99%,rgba(12,6,0,0.6)), color-stop(100%,rgba(12,6,0,0.6))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(28,16,1,0) 0%,rgba(28,16,1,0) 1%,rgba(12,6,0,0.6) 99%,rgba(12,6,0,0.6) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001c1001', endColorstr='#990c0600',GradientType=0 ); /* IE6-9 */ } .project-item.style-10:hover figcaption:before { top: 0; opacity: 1; } .project-item.style-10 img { transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); position: relative; bottom: -12px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .project-item.style-10:hover img { bottom: 0; -webkit-filter: grayscale(0%); filter: grayscale(0%); } .project-item.style-10 h4, .project-item.style-10 .project-categories { opacity: 0; position: relative; top: 12px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .project-item.style-10 .project-categories { top: 25px; } .project-item.style-10:hover h4, .project-item.style-10:hover .project-categories { opacity: 1; top: 0; } .project-item.style-10 .project-info { text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -25px; } .project-item.style-10 h4 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; } .project-item.style-10 h4 a { position: relative; display: inline-block; } .project-item.style-10 h4, .project-item.style-10 h4 a, .project-item.style-10 h4 a:hover, .project-item.style-10 .project-categories a, .project-item.style-10 .project-categories a:hover { color: #fff; } .project-item.style-10 .project-categories { font-size: 9px; line-height: 14px; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .project-item.style-10 .project-links a { border: none; } /*------------------------------------------*/ /* 07 - Single Project /*------------------------------------------*/ .project-head { position: relative; text-align: center; padding: 35px 0; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .project-head a { color: #444; position: relative; display: inline-block; left: 0; transition: left 0.3s ease-in-out, color 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: left 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out, color 0.3s ease-in-out; } .project-head a:not(.prev):not(.next) { position: absolute; top: 50%; left: 50%; color: #ddd; display: block; margin-left: -14px; margin-top: -14px; } .project-head a:not(.prev):not(.next):hover { color: #444; } .project-head a.prev { float: left; } .project-head a.next { float: right; } .project-head a.prev:hover { left: 6px; } .project-head a.prev:hover span { left: 4px; } .project-head a.next:hover { left: -6px; } .project-head a.next:hover span { left: -4px; } .project-head a.prev:hover, .project-head a.next:hover { color: #f1b458; } .project-head a:not(.prev):not(.next) i { font-size: 28px; position: relative; top: 2px; } .project-head a.prev i, .project-head a.next i { position: relative; font-size: 24px; top: 7px; } .project-head a span { padding: 0 6px; font-size: 10px; font-weight: 600; position: relative; left: 0; letter-spacing: 1px; text-transform: uppercase; transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -webkit-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; } .project-thumb { margin-bottom: 40px; } .project-wrap { padding-top: 50px; padding-bottom: 50px; } .project-page-builder .project-wrap { padding-top: 0; padding-bottom: 0; } .project-content .project-thumb > * { margin-bottom: 20px; } .project-content .project-thumb > *:last-child { margin-bottom: 0; } .col-md-8 .project-thumb { margin-bottom: 0; } .project-thumb img { width: 100%; height: auto; } .project-thumb a.open-image { display: block; position: relative; } .project-thumb a.open-image:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 12; background-color: rgba(255,255,255,0); transition: background-color 0.35s ease-in-out; -moz-transition: background-color 0.35s ease-in-out; -webkit-transition: background-color 0.35s ease-in-out; -o-transition: background-color 0.35s ease-in-out; } .project-thumb a.open-image:hover:after { background-color: rgba(255,255,255,0.9); } .project-thumb a.open-image i { text-align: center; font-size: 0; position: absolute; width: 60px; top: 50%; left: 50%; opacity: 0; color: #111; margin-left: -30px; z-index: 13; transition: opacity 0.3s ease-in-out, font-size 0.4s ease-in-out; -moz-transition: opacity 0.3s ease-in-out, font-size 0.4s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out, font-size 0.4s ease-in-out; -o-transition: opacity 0.3s ease-in-out, font-size 0.4s ease-in-out; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .project-thumb a.open-image:hover i { opacity: 1; font-size: 32px; } .project-slider { z-index: 11; } .project-content .project-text .project-title { font-size: 18px; font-weight: 800; line-height: 26px; letter-spacing: 1px; margin-bottom: 2px; text-transform: uppercase; } .project-content .project-text .project-title + .content-area { padding-top: 15px; } .project-content .project-text .project-cats { margin-bottom: 22px; } .project-content .project-text .project-cats a, .project-content .project-text .project-cats span { display: inline-block; margin-right: 5px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } .project-content .project-text .project-cats a:after, .project-content .project-text .project-cats span:after { content: ', '; } .project-content .project-text .project-cats a:last-child:after, .project-content .project-text .project-cats span:last-child:after { content: ''; } .za-social-share ul { list-style: none; margin-left: 0!important; } .za-social-share ul li { display: inline-block; padding: 0!important; margin-right: 2px!important; margin-bottom: 0!important; list-style: none!important; } .za-social-share ul li:before { display: none!important; } .za-social-share ul li a { display: block; color: #ccc; width: 33px; height: 33px; text-align: center; border: 1px solid #e4e4e4; font-size: 12px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .za-social-share ul li a i { line-height: 33px; } .za-social-share ul li.share-facebook:hover a { border-color: #507cbe; background-color: #507cbe; color: #fff; } .za-social-share ul li.share-twitter:hover a { border-color: #63cdf1; background-color: #63cdf1; color: #fff; } .za-social-share ul li.share-googleplus:hover a { border-color: #4d4f54; background-color: #4d4f54; color: #fff; } .za-social-share ul li.share-pinterest:hover a { border-color: #f16261; background-color: #f16261; color: #fff; } .za-social-share ul li.share-linkedin:hover a { border-color: #90cadd; background-color: #90cadd; color: #fff; } .project-content .project-info { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*------------------------------------------*/ /* 08 - Blog Styles /*------------------------------------------*/ .blog-items { display: block; } .blog-items .post.sticky, .blog-items .post.tag-sticky-2 { position: relative; } .blog-items .post.sticky .sticky-icon, .blog-items .post.tag-sticky-2 .sticky-icon { z-index: 62; position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 32px solid #f1b458; border-left: 35px solid transparent; } .blog-items .post.sticky .sticky-icon i, .blog-items .post.tag-sticky-2 .sticky-icon i { position: absolute; right: 4px; top: -28px; color: #fff; font-size: 11px; } .post .post-border { text-align: center; padding: 45px 0; } .post .post-border span { position: relative; display: inline-block; width: 9px; height: 9px; border: 1px solid #ccc; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; } .post .post-border span:before { content: ""; display: block; height: 1px; width: 120px; background-color: #e4e4e4; right: 100%; margin-right: 8px; top: 3px; position: absolute; } .post .post-border span:after { content: ""; display: block; height: 1px; width: 120px; background-color: #e4e4e4; left: 100%; margin-left: 8px; top: 3px; position: absolute; } .post-wrap .post-side { padding: 0; } .post-head .post-title { margin-bottom: 2px; } .post-head .post-title a:hover { color: #f1b458; } .post-head .post-meta { font-size: 11px; margin-bottom: 15px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding-left: 0; margin-top: 0; } .post-head .post-meta, .post-meta a { color: #bbb; } .post-meta a:hover { color: #f1b458; } .post-head .post-meta li { display: inline-block; } .post-head .post-meta li:after { content: ' - '; } .post-head .post-meta li:last-child:after { content: ''; } .post-thumb { position: relative; overflow: hidden; margin-bottom: 25px; } .blog-mini .post-side { padding: 0; } .blog-mini .post-thumb { float: left; width: 400px; margin-right: 25px; z-index: 40; } .post-thumb > img { width: 100%; height: auto; -webkit-backface-visibility: hidden; -o-transition: all 2s ease-out; -ms-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -webkit-transition: all 2s ease-out; transition: all 2s ease-out; } .post-thumb:hover > img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .post-thumb .thumb-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: 60; background-color: #f1b458; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .post-thumb:hover .thumb-overlay { opacity: 0.9; } .single-post .post-thumb .post-url, .single-post .post-thumb .image-url, .single-post .thumb-overlay { display: none; } .post-thumb .post-url, .post-thumb .image-url { color: #444; position: absolute; top: 50%; font-size: 14px; z-index: 61; display: block; width: 45px; height: 45px; opacity: 0; margin-top: 0; background-color: #fff; text-align: center; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .post-thumb .post-url:hover, .post-thumb .image-url:hover { color: #222; } .post-thumb .post-url i, .post-thumb .image-url i { line-height: 47px; } .post-thumb .post-url { right: 50%; margin-right: -22.5px; } .post-thumb .post-url.with_lightbox { margin-right: -52px; } .post-thumb .image-url { right: 50%; margin-left: -22.5px; } .post-thumb .image-url.with_lightbox { margin-left: -52px; } .post-thumb:hover .post-url, .post-thumb:hover .image-url { opacity: 1; margin-top: -23px; } .post-thumb .post-gallery img, .project-thumb .project-slider img { width: 100%; height: auto; } .project-thumb .gallery-thumbs { border-top: 4px solid rgba(0,0,0,0.1); } .project-thumb .gallery-thumbs .swiper-slide div { cursor: pointer; display: block; width: 100%; opacity: 0.4; height: 120px; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; transition: opacity 0.45s ease-in-out; -moz-transition: opacity 0.45s ease-in-out; -webkit-transition: opacity 0.45s ease-in-out; -o-transition: opacity 0.45s ease-in-out; } .project-thumb .gallery-thumbs .swiper-slide div:hover { opacity: 0.6; } .project-thumb .gallery-thumbs .swiper-slide.swiper-slide-active div { opacity: 1; } .custom-slider .owl-controls .owl-dots, .swiper-container .swiper-pagination { position: absolute; bottom: 30px; background-color: #fff; padding: 7px 11px; line-height: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .custom-slider .owl-controls .owl-dots .owl-dot, .swiper-container .swiper-pagination .swiper-pagination-bullet { display: inline-block; } .custom-slider .owl-controls .owl-dots .owl-dot span { height: 8px; width: 8px; margin: 5px; display: block; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; background-color: #fff; border: 1px solid #aaa; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .swiper-container .swiper-pagination .swiper-pagination-bullet { height: 8px; width: 8px; margin: 5px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; background-color: #fff; border: 1px solid #aaa; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .custom-slider .owl-controls .owl-dots .owl-dot.active span, .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background-color: #f1b458; border-color: #f1b458; } .custom-slider .owl-controls .owl-nav { } .custom-slider .owl-controls .owl-nav > div { position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 60px; height: 60px; text-align: center; line-height: 62px; background-color: #fff; color: #111; font-size: 12px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .custom-slider .owl-controls .owl-nav > div:hover { color: #aaa; } .custom-slider .owl-controls .owl-nav .owl-prev { left: 10px; } .custom-slider .owl-controls .owl-nav .owl-next { right: 10px; } .swiper-controls .swiper-button-next, .swiper-controls .swiper-button-prev { position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 60px; height: 60px; text-align: center; line-height: 62px; background-color: #fff; color: #111; font-size: 12px; z-index: 99; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .swiper-controls .swiper-button-next:hover, .swiper-controls .swiper-button-prev:hover { color: #aaa; } .swiper-controls .swiper-button-prev { left: 10px; } .swiper-controls .swiper-button-next { right: 10px; } .post-link, .post-quote { position: relative; padding: 25px; background-color: #f1b458; } .post-link, .post-quote { margin-bottom: 24px; } .post-quote blockquote { padding: 0; } .post-link > i, .post-quote > i { position: absolute; right: -6px; bottom: -6px; font-size: 80px; display: block; color: rgba(255,255,255,0.1); } .post-link h4, .post-quote blockquote h4 { position: relative; padding-top: 4px; margin-bottom: 6px; padding-bottom: 10px; font-family: 'Raleway', sans-serif; position: relative; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; } .post-link h4:after { content: ''; display: block; position: absolute; top: 100%; left: 50%; width: 120px; height: 1px; margin-left: -60px; background-color: rgba(255,255,255,0.15); } .post-link.post-head .post-meta, .blog-masonry .post-link.post-head .post-meta { margin-bottom: 0; } .post-link h4 a, .post-link.post-head .post-meta, .post-link.post-head .post-meta a, .post-quote blockquote h4, .post-quote blockquote small { color: #fff; } .post .post-quote + .post-head { margin-top: 20px; } .post-quote blockquote { margin: 0; border: 0; } .post-quote blockquote h4 { padding-bottom: 0; margin-bottom: 12px; } .post-quote > i { right: -14px; bottom: -16px; } .embed-status-box iframe { width: 100%!important; margin: 0!important; } .content-area { margin-bottom: 25px; } .content-area p { margin-bottom: 20px; } .content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6 { margin-bottom: 8px; } .read-more { float: left; display: inline-block; } .content-area .more-link { display: none; } .post-tags { padding-top: 35px; margin-bottom: 35px; margin-top: 25px; border-top: 2px solid #f4f4f4; } .post-tags span { font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .post-tags a { display: inline-block; font-size: 9px; height: 36px; line-height: 34px; letter-spacing: 1px; text-transform: uppercase; padding: 0 14px; margin-right: 5px; color: #aaa; border: 2px solid #f2f2f2; transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out; -o-transition: border-color 0.3s ease-in-out; } .post-tags a:hover { border-color: #e8e8e8; color: #888; } .post-side .views-likes { float: right; position: relative; top: 12px; } .post-side .views-likes > span { font-size: 12px; font-weight: 600; margin-left: 10px; display: inline-block; } .post-side .views-likes > span, .post-side .views-likes > span a { color: #bbb; } .post-side .views-likes span i { font-size: 14px; position: relative; top: 1px; margin-right: 2px; } .post-side .views-likes .post-love-link:hover { color: #f16985; } .blog-items .post-side .za-social-share { margin-left: 20px; position: relative; top: 3px; } .post-side .za-social-share { float: left; } .post-side .za-social-share span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; float: left; padding: 0 20px; height: 38px; line-height: 36px; border: 1px solid #e4e4e4; color: #ccc; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .post-side .za-social-share ul { float: left; list-style: none; margin-left: 0!important; } .post-side .za-social-share ul li { display: block; padding: 0!important; margin-right: 0!important; margin-bottom: 0!important; list-style: none!important; float: left; } .post-side .za-social-share ul li:before { display: none!important; } .post-side .za-social-share ul li a { display: block; color: #ccc; width: 38px; height: 38px; text-align: center; border: 1px solid #e4e4e4; border-left: 0; font-size: 12px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .post-side .za-social-share ul li a i { line-height: 38px; } .post-side .za-social-share ul li.share-facebook:hover a { border-color: #507cbe; background-color: #507cbe; color: #fff; } .post-side .za-social-share ul li.share-twitter:hover a { border-color: #63cdf1; background-color: #63cdf1; color: #fff; } .post-side .za-social-share ul li.share-googleplus:hover a { border-color: #4d4f54; background-color: #4d4f54; color: #fff; } .post-side .za-social-share ul li.share-pinterest:hover a { border-color: #f16261; background-color: #f16261; color: #fff; } .post-side .za-social-share ul li.share-linkedin:hover a { border-color: #90cadd; background-color: #90cadd; color: #fff; } .post-side .project-info { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*------------ ( Blog Masonry ) ------------*/ .page-template-blog-masonry-php { background-color: #fff; } .blog-masonry .post-thumb, .blog-masonry .post-quote { margin: 0; } .blog-masonry li.post { opacity: 0; float: left; margin: 0 0 32px 0; background-color: #fff; opacity: 0; transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; } .blog-masonry li.post.visible-item { opacity: 1; } .blog-masonry li.post .post-side { padding: 25px 26px; border: 2px solid #f5f5f5; border-top: 0; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .blog-masonry li.post:hover .right-side { border-color: #eee; } .blog-masonry li.post .post-date, .blog-masonry .post-border { display: none; } .isotope:after { content: ''; display: block; clear: both; } .blog-masonry.blog-cols-2 li.post { width: 47.000%; margin-left: 1.5%; margin-right: 1.5%; } .blog-masonry.blog-cols-3 li.post { width: 31.333333333%; margin-right: 1%; margin-left: 1%; } .blog-masonry.blog-fullwidth-cols-4 li.post { width: 23%; margin-right: 1%; margin-left: 1%; } .blog-masonry.blog-fullwidth-cols-5 li.post { width: 18.4%; margin-right: 0.8%; margin-left: 0.8%; } .blog-masonry .post-head .post-title { font-size: 15px; line-height: 24px; font-weight: 700; } .blog-masonry .post-head .post-meta { font-size: 10px; line-height: 16px; margin-bottom: 15px; } /*------------------------------------------*/ /* 09 - Single Post /*------------------------------------------*/ /*------------ ( Author Bio ) ------------*/ .author-bio { padding-top: 35px; margin-bottom: 35px; margin-top: 25px; border-top: 2px solid #f4f4f4; } .author-bio .author-avatar { float: left; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; overflow: hidden; } .author-bio .about-author { padding-left: 80px; } .author-bio .about-author .author-name { margin-bottom: 5px; color: #666; } .author-bio .about-author .author-name h5 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /*------------ ( Related Posts ) ------------*/ .related-posts { padding-top: 30px; margin-bottom: 30px; border-top: 2px solid #f4f4f4; } .related-posts .related-post { text-align: center; } .related-posts .related-posts-title, .comment-reply-title, .comments-title, .pings-title { font-size: 16px; margin-bottom: 16px; letter-spacing: 1px; } .related-posts .post-thumb { margin-bottom: 12px; overflow: hidden; position: relative; background-color: #333; transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .related-posts .post-thumb:hover { background-color: #f1b458; } .related-posts .post-thumb a { display: block; width: 100%; } .related-posts .post-thumb a img { width: 100%; } .related-posts .post-thumb.no-thumb { min-height: 120px; } .related-posts .post-thumb i { position: absolute; top: 50%; left: 50%; color: #fff; font-size: 16px; margin-left: -8px; margin-top: -8px; } .related-posts .post-thumb .overlay { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f1b458; transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; } .related-posts .post-thumb:hover .overlay { opacity: 0.95; } .related-posts h5 { font-size: 11px; font-weight: 700; letter-spacing: 1px; line-height: 18px; text-transform: uppercase; } /*------------ ( Comments ) ------------*/ #comments { border: 0; padding: 0; margin: 0; padding-top: 30px; margin-bottom: 30px; border-top: 2px solid #f4f4f4; } .comment-reply-title { margin-bottom: 12px; } .commentlist { border: 0; padding: 0; margin: 0; } .comments-title { margin-bottom: 25px; color: #666; } .commentlist li:before { display: none!important; } .commentlist li > div { margin-bottom: 30px; } .commentlist li li { padding-left: 50px; } .commentlist li .avatar { float: left; overflow: hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; } .commentlist li .comment-right { padding-left: 70px; } .commentlist li .comment-right .comment-author { color: #888; } .commentlist li .comment-right .comment-meta { font-size: 12px; margin-bottom: 5px; } .commentlist li .comment-right .comment-meta a { color: #888; } .comment-meta .comment-edit-link, .comment-meta .comment-reply-link { text-decoration: underline; color: #888; } #commentform .logged-in-as { margin-bottom: 2px; } #commentform p, .wpcf7-form p { margin-bottom: 15px; } #commentform p label, .wpcf7-form label { font-size: 11px; line-height: 18px; display: block; color: #666; font-weight: 600; } /*------------------------------------------*/ /* 10 - Sidebar & Widgets /*------------------------------------------*/ .widget { position: relative; margin-bottom: 45px; } .sidebar .widget { padding: 0; } .widget ul { margin-left: 0!important; margin-bottom: 0!important; } .widget ul li { list-style: none!important; margin-bottom: 0; } .widget h3.widget-title { margin: 0 0 20px 0; font-size: 12px; color: #333; font-weight: 700; position: relative; letter-spacing: 2px; text-transform: uppercase; border-bottom: 2px solid #eee; } .widget h3.widget-title span { position: relative; bottom: -1px; display: inline-block; padding-bottom: 6px; } .widget h3.widget-title span:after { content: ""; display: block; position: absolute; left: 0; bottom: -4px; width: 8px; height: 8px; border: 2px solid #eee; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; background-color: #fff; } /*------------ ( Search Widget ) ------------*/ .widget_search #searchform { position: relative; } .widget_search .screen-reader-text { display: none; } .widget_search input[type="text"] { margin-right: 3px; width: 100%; } .widget_search input[type="submit"] { position: absolute; display: block; height: 100%; top: 0; right: 4px; width: 38px; background-color: transparent; } .widget_search i { position: absolute; display: block; height: 100%; top: 50%; right: 4px; text-align: center; font-size: 16px; width: 38px; color: #444; line-height: 40px; margin-top: -20px; } /*------------ ( Lists Widgets ) ------------*/ .widget.widget_categories ul li, .widget.widget_pages ul li, .widget.widget_archive ul li, .widget.widget_recent_entries ul li, .widget.widget_meta ul li, .widget.widget_recent_comments ul li, .widget.widget_nav_menu ul li, .widget.widget_product_categories ul li { padding-bottom: 8px!important; margin-bottom: 8px!important; } .widget.widget_categories > ul > li, .widget.widget_pages > ul > li, .widget.widget_archive > ul > li, .widget.widget_recent_entries > ul > li, .widget.widget_meta > ul > li, .widget.widget_recent_comments > ul > li, .widget.widget_nav_menu ul li, .widget.widget_product_categories > ul > li, .widget.widget_products > ul > li, .widget.widget_recently_viewed_products > ul > li, .widget.widget_top_rated_products > ul > li { border-bottom: 1px solid #f4f4f4; } .widget.widget_categories ul ul, .widget.widget_meta ul ul, .widget.widget_pages ul ul, .widget.widget_archive ul ul, .widget.widget_recent_entries ul ul, .widget.widget_nav_menu ul ul, .widget.widget_product_categories ul ul { padding-top: 10px!important; padding-left: 20px!important; } .widget.widget_categories ul ul li, .widget.widget_meta ul ul li, .widget.widget_pages ul ul li, .widget.widget_archive ul ul li, .widget.widget_recent_entries ul ul li, .widget.widget_nav_menu ul ul li, .widget.widget_product_categories ul ul li { padding-bottom: 0!important; font-size: 12px; } .widget.widget_categories ul li:last-child, .widget.widget_meta ul li:last-child, .widget.widget_pages ul li:last-child, .widget.widget_archive ul li:last-child, .widget_recent_entries ul li:last-child, .widget.widget_recent_comments ul li:last-child, .widget.widget_nav_menu ul li:last-child, .widget.widget_product_categories ul li:last-child, .widget.widget_products ul li:last-child, .widget.widget_recently_viewed_products ul li:last-child, .widget.widget_top_rated_products ul li:last-child { margin-bottom: 0!important; padding-bottom: 0!important; border: 0!important; } .widget.widget_categories ul li i, .widget.widget_pages ul li i, .widget.widget_archive ul li i, .widget.widget_recent_entries ul li i, .widget.widget_recent_comments ul li i, .widget.widget_nav_menu ul li i { margin-right: 10px; font-size: 12px; } /*------------ ( Tags Cloud Widget ) ------------*/ .widget .tagcloud a { font-size: 10px!important; line-height: 14px; text-transform: uppercase; display: inline-block; padding: 7px 10px; color: #888; margin: 0 3px 6px 0; border: 2px solid #eee; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .dark-footer .widget .tagcloud a { border-color: rgba(255,255,255,0.06); } .widget .tagcloud a:hover { color: #fff!important; border-color: #f1b458; background-color: #f1b458; } /*------------ ( Calender Widget ) ------------*/ #wp-calendar { width: 100%; font-size: 11px; border-collapse: separate; border-spacing: 8px; margin-left: -2px; font-weight: 600; } #wp-calendar caption { display: none; } #wp-calendar tbody td { margin-bottom: 10px; text-align: center; padding: 6px; border: 1px solid #eee; transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out; -o-transition: border-color 0.3s ease-in-out; } #wp-calendar tbody td:hover { border-color: #ddd; } .dark-footer #wp-calendar tbody td { border-color: rgba(255,255,255,0.05); } .dark-footer #wp-calendar tbody td:hover { border-color: rgba(255,255,255,0.15); } #wp-calendar tbody td.pad { border: 0; } #wp-calendar tbody td#today { border-color: #f1b458; color: #f1b458; } #wp-calendar tbody td a { color: #f1b458; } #wp-calendar tfoot td#prev a, #wp-calendar tfoot td#next a { color: #333; position: relative; text-transform: uppercase; bottom: -9px; margin-bottom: 1px; } .dark-footer #wp-calendar thead th, .dark-footer #wp-calendar tfoot td#prev a, .dark-footer #wp-calendar tfoot td#next a { color: inherit; } #wp-calendar tfoot td#prev { text-align: left; } #wp-calendar tfoot td#next { text-align: right; } #wp-calendar tfoot td#prev a:hover, #wp-calendar tfoot td#next a:hover { color: #f1b458; } #wp-calendar thead th { color: #333; text-align: center; padding-bottom: 10px; } /*------------ ( Recent Posts & Flickr Widgets ) ------------*/ .widget-recent-posts img, .flickr-me-feed img { width: 100%; height: auto; } .widget-recent-posts .widget-recent-posts-title { font-weight: 600; margin: 2px 0 1px 0; display: inline-block; } .widget-recent-posts .widget-post-date { font-size: 11px; line-height: 16px; } .style-default.widget-recent-posts li { padding: 15px 0 15px 65px; position: relative; min-height: 80px; border-bottom: 1px solid #f4f4f4; } .style-default.widget-recent-posts li:first-child { margin-top: -10px; } .style-default.widget-recent-posts li:last-child { border: none; padding-bottom: 0; min-height: 65px; } .style-default.widget-recent-posts li .widget-recent-posts-thumbnail { position: absolute; left: 0; top: 15px; display: block; width: 50px; height: 50px; } .style-default.widget-recent-posts li .widget-recent-posts-thumbnail:before, .style-grid.widget-recent-posts li .widget-recent-posts-thumbnail:before, .flickr-me-feed .grid-pics a:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255,255,255,0); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .style-default.widget-recent-posts li:hover .widget-recent-posts-thumbnail:before, .style-grid.widget-recent-posts li:hover .widget-recent-posts-thumbnail:before, .flickr-me-feed .grid-pics a:hover:before { background-color: rgba(255,255,255,0.4); } .dark-footer .style-default.widget-recent-posts li .widget-recent-posts-thumbnail:before, .dark-footer .style-grid.widget-recent-posts li .widget-recent-posts-thumbnail:before, .dark-footer .flickr-me-feed .grid-pics a:before { background-color: rgba(0,0,0,0); } .dark-footer .style-default.widget-recent-posts li:hover .widget-recent-posts-thumbnail:before, .dark-footer .style-grid.widget-recent-posts li:hover .widget-recent-posts-thumbnail:before, .dark-footer .flickr-me-feed .grid-pics a:hover:before { background-color: rgba(0,0,0,0.2); } .style-default.widget-recent-posts li img, .style-grid.widget-recent-posts li img, .flickr-me-feed .grid-pics a img { padding: 1px; height: 50px; border: 3px double rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .style-grid.widget-recent-posts li img, .flickr-me-feed .grid-pics a img { height: 100%; } .style-default.widget-recent-posts li:hover img, .style-grid.widget-recent-posts li:hover img, .flickr-me-feed .grid-pics a:hover img { border-color: #aaa; } .dark-footer .style-default.widget-recent-posts li:hover img, .dark-footer .style-grid.widget-recent-posts li:hover img, .dark-footer .flickr-me-feed .grid-pics a:hover img { border-color: rgba(255,255,255,0.2); } .style-grid.widget-recent-posts li, .flickr-me-feed .grid-pics a, .flickr-me-feed .grid-pics a { display: block; width: 25%; float: left; } .style-grid.widget-recent-posts li .widget-recent-posts-thumbnail, .flickr-me-feed .grid-pics a { display: block; position: relative; } .style-grid.widget-recent-posts li .widget-recent-posts-thumbnail img, .flickr-me-feed .grid-pics a img { height: 100%; } .style-grid.widget-recent-posts .widget-recent-posts-title, .style-grid.widget-recent-posts .widget-post-date { display: none; } /*------------ ( Recent Comments Widget ) ------------*/ .widget .recentcomments { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f4f4f4; } .widget .recentcomments:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .widget .recentcomments .alignleft { float: left; position: relative; } .widget .recentcomments .alignleft img { padding: 2px; border: 3px double rgba(255,255,255,0); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .widget .recentcomments:hover .alignleft img { border-color: #aaa; } .dark-footer .widget .recentcomments:hover .alignleft img { border-color: rgba(255,255,255,0.2); } .widget .recentcomments .alignleft:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255,255,255,0); transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; } .widget .recentcomments:hover .alignleft:before { background-color: rgba(255,255,255,0.4); } .dark-footer .widget .recentcomments .alignleft:before { background-color: rgba(0,0,0,0); } .dark-footer .widget .recentcomments:hover .alignleft:before { background-color: rgba(0,0,0,0.2); } .widget .recentcomments .comment-right { padding-left: 60px; font-size: 13px; line-height: 19px; padding-top: 4px; } .widget .recentcomments .comment-author { font-weight: 600; text-transform: capitalize; margin-bottom: 1px; } .widget .recentcomments .comment-c { display: inline; font-size: 12px; } /*------------ ( Tweets Widget ) ------------*/ .widget .za-tweet-list li { position: relative; padding-left: 40px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #f4f4f4; } .widget .za-tweet-list li:last-child { margin-bottom: 0; } .widget .za-tweet-list li .za-tweet-time { display: block; font-style: italic; } .widget .za-tweet-list li .za-tweet-time a { font-size: 90%; color: rgba(0,0,0,0.45); } .widget .za-tweet-list li a:hover, .widget .za-tweet-list li .za-tweet-time a:hover { color: #63cdf1; } .widget .za-tweet-list li:before { content: "\ed77"; font-family: 'dalton'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 5px; left: 0; display: block; font-size: 26px; color: #63cdf1 } /*------------------------------------------*/ /* 11 - Numeric & Standard Pagination /*------------------------------------------*/ .page-navigation, .page-pagination { padding: 0; } .projects-wrap .page-navigation, .projects-wrap .page-pagination { padding: 50px 0; } .page-navigation .nav-next { float: right; } .page-navigation .nav-previous { float: left; } .page-navigation div a { display: block; height: 40px; width: 40px; color: #444; font-size: 13px; line-height: 35px; text-align: center; background-color: #fff; border: 2px solid #666; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; } .page-navigation div a:hover { background-color: #444; color: #fff; border-color: #333; } .page-pagination { text-align: center; } .post-wrap .page-pagination { margin: 45px 0 15px 0; } .page-pagination li { display: inline-block; margin-right: 4px; } .page-pagination li a, .page-pagination li span { font-size: 11px; width: 36px; height: 36px; font-weight: 600; line-height: 32px; text-align: center; padding: 0; color: #aaa; display: block; border: 2px solid #e2e2e2; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; } .page-pagination li a:hover, .page-pagination li span.current { background-color: #333; color: #fff; border-color: #333; } /*------------------------------------------*/ /* 14 - Contact Forms Styles /*------------------------------------------*/ .wpcf7-form input, .wpcf7-form textarea { margin-bottom: 18px; } .wpcf7-form textarea { margin-bottom: 22px; } .wpcf7-form p { margin-bottom: 0; } div.wpcf7-response-output { margin: 0; padding: 13px 20px; border: 0; color: #fff; font-size: 13px; } div.wpcf7-validation-errors, div.wpcf7-response-output { background-color: #f0614d; } div.wpcf7-mail-sent-ok { background-color: #b7d178; } .wpcf7-form p { position: relative; } div.wpcf7 img.ajax-loader { position: absolute; top: 50%; right: 0; padding: 5px; margin-top: -22px; background-color: #e8e8e8; } span.wpcf7-form-control-wrap { min-width: 100%; margin-top: 5px } span.wpcf7-not-valid-tip { position: relative; top: -14px; font-size: 11px; line-height: 11px; color: #f0614d; } /*------------------------------------------*/ /* Styled Inputs /*------------------------------------------*/ /*------------ ( Main CSS ) ------------*/ .styled-form p { position: relative; display: block; margin-bottom: 5px; } .styled-form p span { display: block; } .styled-form span.wpcf7-not-valid-tip { position: absolute; bottom: 100%; left: 0; margin-top: -8px; width: 100%; text-align: right; } .styled-form input[type="text"], .styled-form input[type="url"], .styled-form input[type="password"], .styled-form input[type="email"], .styled-form textarea { position: relative; display: block; padding: 0.9em 1.2em; border: none; border-radius: 0; background: #f0f0f0; color: #aaa; margin-bottom: 0; } .styled-form input:focus { outline: none; } .styled-form label { width: 100%; font-size: 13px; color: #666; display: block; padding: 0 1.1em; } .styled-form label i { color: #f5585c; font-style: normal; font-size: 11px; position: relative; top: -2px; } /*------------ ( Style 1 ) ------------*/ .styled-form-1 p { padding-top: 30px; } .styled-form-1 p span { position: relative; padding: 3px 0; } .styled-form-1 p span::before, .styled-form-1 p span::after { content: ''; display: block; width: 100%; height: 3px; position: absolute; left: 0; background-color: #eee; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; } .styled-form-1 p span::before { width: 0; top: 0; } .styled-form-1 p.focused span::before { width: 100%; } .styled-form-1 p span::after { bottom: 0; } .styled-form-1 input[type="text"], .styled-form-1 input[type="url"], .styled-form-1 input[type="password"], .styled-form-1 input[type="email"], .styled-form-1 textarea { background-color: #fff; transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; } .styled-form-1 p.focused input[type="text"], .styled-form-1 p.focused input[type="url"], .styled-form-1 p.focused input[type="password"], .styled-form-1 p.focused input[type="email"], .styled-form-1 p.focused textarea { background-color: #eee; } .styled-form-1 label { position: absolute; top: 50%; left: 0; height: 30px; line-height: 30px; margin-bottom: 0; margin-top: -2px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .styled-form-1 p.textarea-p label { top: 35px; margin-top: 0; } .styled-form-1 p.focused label, .styled-form-1 p.textarea-p.focused label { margin-top: 0; top: -3px; font-size: 11px; } /*------------ ( Style 2 ) ------------*/ .styled-form-2 p { padding-top: 15px; } .styled-form-2 p span { position: relative; } .styled-form-2 p span::before { } .styled-form-2 input[type="text"], .styled-form-2 input[type="url"], .styled-form-2 input[type="password"], .styled-form-2 input[type="email"], .styled-form-2 textarea { background-color: #f2f2f2; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .styled-form-2 label { position: absolute; top: 45%; left: 0; height: 32px; line-height: 32px; margin-bottom: 0; margin-top: -2px; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .styled-form-2 p.textarea-p label { top: 40px; margin-top: 0; } .styled-form-2 p.focused label, .styled-form-2 p.textarea-p.focused label { margin-top: 0; top: -8px; font-size: 11px; } /*------------------------------------------*/ /* 13 - 404 & Search Page /*------------------------------------------*/ /*------------ ( 404 Page ) ------------*/ .error-msg { padding: 120px 0; text-align: center; } .error-msg h1 { font-size: 120px; line-height: 120px; color: #f1b458; } .error-msg h2 { font-size: 50px; line-height: 64px; color: #444; text-transform: capitalize; } .no-results-msg p { font-size: 14px; opacity: 0.8; text-transform: capitalize; margin-bottom: 40px; } h4.no-results { font-size: 42px; line-height: 38px; font-weight: 700; letter-spacing: 0; color: #d4d4d4; } h4.no-results span { font-size: 14px; line-height: 14px; } /*------------ ( Search Page ) ------------*/ .search-results .search-item { position: relative; } .search-results .search-item .post-side { padding-left: 70px; padding-right: 0; } .search-results .search-item .result-count { display: block; height: 45px; width: 45px; text-align: center; line-height: 46px; position: absolute; top: 0; left: 0; color: #fff; background-color: #333; font-size: 12px; letter-spacing: 1px; z-index: 65; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .search-results .search-item .result-type { display: inline-block; padding: 3px 5px; line-height: 14px; color: #fff; background-color: #f1b458; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; position: relative; top: -3px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } /*------------------------------------------*/ /* 13 - Loader Styles /*------------------------------------------*/ #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-color: #161616; z-index: 999999; transition: top 0.8s cubic-bezier(0.7,0,0.3,1); -moz-transition: top 0.8s cubic-bezier(0.7,0,0.3,1); -webkit-transition: top 0.8s cubic-bezier(0.7,0,0.3,1); -o-transition: top 0.8s cubic-bezier(0.7,0,0.3,1); } .loader-container { position: absolute; width: 200px; margin-left: -100px; left: 50%; top: 50%; display: inline-block; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #loader .loader-logo { position: relative; top: -35px; } /* Spinner Style 1 */ #loader.style-1 .spinner, .projects-loader .spinner { width: 40px; height: 40px; margin: 0 auto; background-color: #f1b458; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } } /* Spinner Style 2 */ #loader.style-2 .spinner { width: 50px; height: 50px; margin: 0 auto; background-color: #f1b458; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* Spinner Style 3 */ #loader.style-3 .spinner { width: 60px; height: 60px; position: relative; margin: 0 auto; } #loader.style-3 .double-bounce1, #loader.style-3 .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #f1b458; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } #loader.style-3 .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* Spinner Style 4 */ #loader.style-4 .spinner { width: 32px; height: 32px; position: relative; margin: 0 auto; } #loader.style-4 .cube1, #loader.style-4 .cube2 { background-color: #f1b458; width: 18px; height: 18px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } #loader.style-4 .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } /* Spinner Style 5 */ #loader.style-5 .spinner { width: 50px; height: 50px; position: relative; text-align: center; margin: 0 auto; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } #loader.style-5 .dot1, #loader.style-5 .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #f1b458; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } #loader.style-5 .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* Spinner Style 6 */ #loader.style-6 .spinner { margin: 0 auto; width: 70px; text-align: center; } #loader.style-6 .spinner > div { width: 18px; height: 18px; background-color: #f1b458; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #loader.style-6 .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } #loader.style-6 .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* Spinner Style 7 */ #loader.style-7 .spinner { margin: 0 auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } #loader.style-7 .spinner > div { background-color: #f1b458; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } #loader.style-7 .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #loader.style-7 .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } #loader.style-7 .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } #loader.style-7 .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } /* Spinner Style 8 */ #loader.style-8 .spinner { margin: 0 auto; width: 56px; height: 56px; position: relative; } #loader.style-8 .container1 > div, #loader.style-8 .container2 > div, #loader.style-8 .container3 > div { width: 12px; height: 12px; background-color: #f1b458; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #loader.style-8 .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } #loader.style-8 .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } #loader.style-8 .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } #loader.style-8 .circle1 { top: 0; left: 0; } #loader.style-8 .circle2 { top: 0; right: 0; } #loader.style-8 .circle3 { right: 0; bottom: 0; } #loader.style-8 .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #loader.style-8 .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } #loader.style-8 .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } #loader.style-8 .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } #loader.style-8 .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } #loader.style-8 .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } #loader.style-8 .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } #loader.style-8 .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } #loader.style-8 .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } #loader.style-8 .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } #loader.style-8 .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* Spinner Style 9 */ #loader.style-9 .spinner-container { position: relative; margin: 0em auto; border-top: 4px solid #f1b458; border-right: 4px solid #f1b458; border-bottom: 4px solid #f1b458; border-left: 4px solid rgba(255,255,255,0.1); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } #loader.style-9 .spinner-container, #loader.style-9 .spinner-container:after { border-radius: 50%; width: 40px; height: 40px; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*------------------------------------------*/ /* 15 - Footer Styles /*------------------------------------------*/ /*------------ ( Footer ) ------------*/ .footer { background-color: #222222; padding: 65px 0 15px 0; position: relative; border-top: 2px solid #ccc; } .footer .widget { position: relative; margin-bottom: 40px; } .footer .widget h3.widget-title { margin-bottom: 15px; } .footer, .footer a { color: #666; } .footer a:hover { color: #f1b458; } .footer .widget h3.widget-title { border-color: #292929; color: #fff; letter-spacing: 3px; } .footer .widget h3.widget-title span:after { background-color: #222; } .footer .widget h3.widget-title span:after, .footer .widget.widget_categories > ul > li, .footer .widget.widget_pages > ul > li, .footer .widget.widget_archive > ul > li, .footer .widget.widget_recent_entries > ul > li, .footer .widget.widget_meta > ul > li, .footer .widget .recentcomments, .footer .style-default.widget-recent-posts li, .footer .widget.widget_nav_menu ul li, .footer .widget .za-tweet-list li, .footer .widget.widget_product_categories > ul > li, .footer .widget.widget_products > ul > li, .footer .widget.widget_recently_viewed_products > ul > li, .footer .widget.widget_recently_viewed_products > ul > li, .footer .widget.widget_top_rated_products > ul > li { border-color: rgba(255,255,255,0.05); } /*------------ ( Copyright ) ------------*/ .copyright { position: relative; font-size: 85%; letter-spacing: 1px; background-color: #222; padding: 12px 0; } .copyright, .copyright a { color: #000; } .copyright a { color: #f1b458; } .copyright:after { display: block; content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background-color: rgba(255,255,255,0.02); } /*------------ ( Go Top Link ) ------------*/ #go-top { position: absolute; display: block; right: 40px; top: -16px; color: #fff; display: block; height: 44px; width: 44px; text-align: center; background-color: #333; border: 4px solid #ccc; z-index: 999; transition: background-color 0.2s ease-in, top 0.2s ease-in; -moz-transition: background-color 0.2s ease-in, top 0.2s ease-in; -webkit-transition: background-color 0.2s ease-in, top 0.2s ease-in; -o-transition: background-color 0.2s ease-in, top 0.2s ease-in; } #go-top:hover { top: -20px; background-color: #000; } #go-top i { font-size: 10px; line-height: 36px; } .top-links li { display: inline-block; } .top-links li a { padding: 10px !important; line-height: 37px; } .top-links li:not(:last-child):after { content: ''; width: 1px; height: 17px; background: #ababab; position: absolute; top: 11px; } #header .header-rightside { float: right; text-align: right; background: url(menu-bg.png) no-repeat; background-size: contain; padding: 0 50px; background-color: #c2272d; margin-top: 50px; padding-right: 15px; height:36px } #header .nav-menu > ul > li > a{ color: #000 !important; padding:0 4px; line-height:40px !important; } #header .nav-menu > ul > li > a:hover{ color:#fff !important; } #header .show-search { color: #000 !important; } #header .show-search:hover{ color:#fff !important; } #header .nav-menu > ul > li:before { content: ''; display: block; position: absolute; height: 100%; width: 1px; right: -10px; top: -13px; background: #fff; transform: skew(-30deg); } div#rev_slider_1_1 ul { border: 5px solid #cbcbcb !important; } .border-img .vc_box_border{ background: #EBEBEB !important; padding: 2px !important; } .footer-icon { text-align:right; }