/* ============================================================================ - CSS Document - Theme Name: EXCEPTION Responsive Business HTML Template. - Theme URI: http://demo.it-rays.com/exception - Author: IT-RAYS - Version: 1.3 ============================================================================= */ /*=========================================================================== CONTENTS: 1. CSS RESET. 2. SITE PRELOADER. 3. HEADER STYLE: 3.1. Top bar. 3.2. Top logo. 3.3. Main menu. 3.4. Search. 3.5. Header style 2. 3.6. Header style 3. 3.7. Login Box. 4. BLOCKS BACKGROUNDS. 5. COMMON STYLES. 6. TYPOGRAPHY. 7. PAGES ELEMENTS: 7.1. Heading styles: 7.1.1. Heading style 1. 7.1.2. Heading style 2. 7.1.3. Heading style 3. 7.1.4. Heading style 4. 7.2. Services boxes: 7.2.1. Services boxes style 1. 7.2.2. Services boxes style 2. 7.2.3. Services boxes style 3. 7.2.4. Services boxes style 4. 7.2.5. Services boxes style 5. 7.3. Skill levels style 1. 7.4. Fun Staff: 7.4.1. Fun Staff Style 1. 7.4.2. Fun Staff Style 2. 7.4.3. Fun Staff Style 3. 7.5. Testimonials Style: 7.5.1. Testimonials Style 1. 7.5.2. Testimonials Style 2. 7.6. Portfolio: 7.6.1. Portfolio Carousel. 7.6.2. Portfolio Filterable. 7.7. Form conrols: 7.7.1. Buttons. 7.7.2. Inputs. 7.8. Information boxes. 7.9. Horizontal Tabs. 7.10. Vertical Tabs. 7.11. Accordion. 7.12. Horizontal Accordion. 7.13. Icons list. 7.14. BreadCrumbs style. 7.15. Clients style. 8. PAGE SPECIFIC STYLES: 8.1. About pages. 8.2. Portfolio pages. 8.3. Pricing tables. 8.4. Team styles. 8.5. Blog. 8.6. Contact page. 8.7. Site map Page. 8.8. 404 page. 8.9. Shop page. 9. PAGE TITLES: 9.1. Page title 1. 9.2. Page title 2. 9.3. Page title 3. 9.4. Page title 4. 10. WIDGETS. 11. FOOTER. 11.1. Footer Style 1 11.2. Footer Style 2 11.3. Footer Style 3 11.4. Footer Style 4 12. FIXED LAYOUT STYLES. 13. Exception PopUp STYLES. ============================================================================= */ /* ========================================================================== 1. CSS RESET ============================================================================= */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { position: relative; margin: 0; padding: 0; color: #777; font-size: 13px; line-height: 1.428571429; font-family: "Open Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; } html, body, div, span, hr, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; vertical-align: baseline; } input, select, textarea{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; } a:focus { outline: none; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } [hidden] { display: none; } ul, li { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; border: 0; vertical-align:middle } mark { background: #ff0; color: #000; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { overflow: auto; } code, kbd, pre, samp { font-size: 1em; font-family: monospace, monospace; } button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } select { padding: 8px; border: 1px #e9e9e9 solid; background: #f3f3f3; font-size: 11px; line-height: 25px; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; } legend { padding: 0; border: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { width: 100%; border: 1px solid #e2e2e2; border-spacing: 0; border-collapse: collapse; } tr:nth-child(even) { background: #f3f3f3; } tfoot { background: #e9e9e9; font-weight: bold; } th { text-transform: uppercase; border-right: 1px solid #e2e2e2; background: #f5f5f5; border-bottom: 2px #777 solid; } td, caption { border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } tr.even td { background: #f9f9f9; } th, td, caption { padding: 10px; } :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after, .container:before, .container:after { display: table; content: " "; } .table-style2 th { border-right-color: #fff; border-bottom-color: #5c5c5c; } /* ========================================================================= 2.SITE PRELOADER & TOOLS ============================================================================ */ .page-loader { position: fixed; z-index: 999999; width: 100%; height: 100%; background: #fff; } .loader-in { position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; } .status { position: relative; z-index: 0; width: 60px; height: 60px; } .status span { width: 60px; height: 60px; position: absolute; top: 0; left: 0; z-index: 0; border: 6px solid #d9d9d9; border-radius: 50%; } .status .spin { z-index: 1; border-color: #262626; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 0.4; } 50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.4; } } @-moz-keyframes spin { from { -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { from { -o-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -o-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ========================================================================== 3. HEADER STYLE. ============================================================================= */ /* ---- 3.1 Top bar ------------------ */ .top-bar { border-bottom: 1px #eee solid; background: #f4f4f4; text-transform: uppercase; font-size: 11px; } .top-bar.main-bg{ border-bottom:0 } .top-bar a, .top-bar span { display: block; padding: 0 10px 0 0; color: #A2A2A2; line-height: 39px; } .top-bar.main-bg a,.top-bar.main-bg span{ color:#fff } .top-bar.main-bg li{ border-left-color:#A0A0A0 } .top-bar a:hover { text-decoration: underline; } .top-bar li { float: left; border-left: 1px #E9E9E9 solid; } .top-bar li:first-child { border-left: 0; } .top-bar li i { margin: 0 8px; font-size: 13px; } .top-bar.main-bg li i{ color:#fff } .top-bar li:first-child i { margin: 0 8px 0 0; } .top-bar ul.social-list li a:hover { background: #333; } /* ---- 3.2 Top logo --------------------- */ header.top-head { position: relative; z-index: 5555; min-height: 92px; border-bottom: 9px #f4f4f4 solid; } .fixedHead { position: fixed !important; top: 0; left: 0; width: 100%; background: transparent !important; } header.top-head .logo{ margin-top: 2px; } header.top-head .logo a { display: table; width: 307px; height: 80px; margin: auto; } header.top-head .logo.center a{ margin:auto } /* ---- 3.3 Main menu ------------------ */ .top-menu { float: right !important; width: auto !important; } .full-menu { } .top-nav { float: left; } .top-nav > ul > li { position: relative; float: left; margin: 0; border-left: 1px #eee solid; height: 80px; overflow:hidden\9 } .top-nav > ul > li:hover{ overflow:visible\9 } .top-nav > ul > li > a:hover i, .top-nav > ul > li.current > a i, .top-nav > ul > li.selected > a i { margin-top: 5px; } .top-nav > ul > li > a { display: block; padding: 0 17px; padding-top: 22px; height: 83px; text-transform: uppercase; overflow:hidden; text-align:center; } .top-nav > ul li a span { display: block; margin-top:5px } .top-nav > ul li a i{ color:#b8b8b8; font-size:16px } .top-nav > ul li a:hover i,.top-nav > ul li.selected a i,.top-nav > ul li.current a i{ color:#fff; } .top-nav > ul > li:after { position: absolute; bottom: -9px; left: -3px; display: inline-block; width: 100%; height: 9px; border-left: 1px #E4E4E4 solid; background: transparent; content: ""; -moz-transform: skew(-35deg, 0); -ms-transform: skew(-35deg, 0); -o-transform: skew(-35deg, 0); -webkit-transform: skew(-35deg, 0); transform: skew(-35deg, 0); } .top-nav > ul li ul { position: absolute; top: 92px; z-index: -1; min-width: 180px; height:0; max-height:0; left: -5px;} .top-nav > ul > li > ul > li { position: relative; float: none; margin: 0; padding: 0; line-height: 90px; opacity: 0; transition: opacity .5s, transform .4s; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); -moz-transition: opacity .5s, -moz-transform .4s; -ms-transition: opacity .5s, -ms-transform .4s; -o-transition: opacity .5s, -o-transform .4s; -webkit-transition: opacity .5s, -webkit-transform .4s; transform: rotateY(90deg); } .top-nav > ul > li:hover > ul{ z-index:0; height:auto } .top-nav > ul > li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } .top-nav li li a { display: block; overflow: hidden; padding: 0 15px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 50px; } .top-nav li li.hasChildren:after { position: absolute; top: 2px; right: 10px; display: inline-block; color: #fff; content: "\f105"; font-family: FontAwesome; } .top-nav li li a:hover, .top-nav li li.selected > a, .top-nav li li.current > a { text-decoration: none; } /*** sub menu level more than 2 ***/ .top-nav li li li { opacity: 0; transition: opacity .4s, transform .5s; -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); -moz-transition: opacity .4s, -moz-transform .5s; -ms-transition: opacity .4s, -ms-transform .5s; -o-transition: opacity .4s, -o-transform .5s; -webkit-transition: opacity .4s, -webkit-transform .5s; transform: rotateX(90deg); } .top-nav li li > ul{ height:0; left: 100%; top: 0; } .top-nav li li:hover > ul{ height:auto; } .top-nav li li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } /************ navgation style 2 ************/ .nav-2,.nav-3 { border: 0px !important; } .nav-2 .top-nav > ul > li:after,.nav-3 .top-nav > ul > li:after,.head-style2 .top-nav > ul > li:after,.head-style3 .top-nav > ul > li:after{ display:none } .head-style2 .top-nav > ul > li,.head-style3 .top-nav > ul > li{ border:0px !important } .nav-2 .top-nav > ul > li,.nav-3 .top-nav > ul > li{ border-left:0px; margin:0 1px } .nav-2 .top-nav > ul > li{ height:92px } .nav-2 .top-nav > ul > li > a span { line-height: 94px; } .nav-2 .top-nav > ul > li > a,.nav-3 .top-nav > ul > li > a{ height:92px } .nav-2 .top-nav > ul > li > a i { position: absolute; left: 50%; margin-left: -16px; width: 31px; height: 31px; border-radius: 50%; background: #eee; color: #b8b8b8; text-align: center; font-size: 16px; line-height: 31px; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .nav-2 .top-nav > ul > li > a i:after { position: absolute; top: -25px; left: 47%; display: inline-block !important; width: 1px; height: 25px; background: #eee; content: ""; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .nav-2 .top-nav > ul > li > a:hover i:after,.nav-2 .top-nav > ul > li.current > a i:after,.nav-2 .top-nav > ul > li.selected > a i:after { top: -29px; height: 30px; } .nav-2 .top-nav > ul > li.selected > a i:after, .nav-2 .top-nav > ul > li.current > a i:after { display: none; } .nav-2 .top-nav > ul > li > ul,.nav-3 .top-nav > ul > li > ul { top: 92px; left: 0 !important; } header.top-head.nav-2 .logo,header.top-head.nav-3 .logo{ margin-top:5px } /************ navgation style 2 ************/ .nav-3 .top-nav > ul > li { padding-top: 3px; } .nav-3 .top-nav > ul > li > a { border-top: 2px transparent solid; } .nav-3 .top-nav > ul > li > a i { background: transparent; } .nav-3 .top-nav > ul > li.current > a, .nav-3 .top-nav > ul > li > a:hover { border-top-width: 2px; border-top-style: solid; background: transparent; } .nav-3 .top-nav > ul > li > a:hover, .nav-3 .top-nav > ul > li.selected > a { background: transparent; } .nav-3 .top-nav > ul > li > a i:after { display: none; } .nav-3 .top-nav > ul > li > a:hover i, .nav-3 .top-nav > ul > li.current > a i, .nav-3 .top-nav > ul > li.selected > a i { margin-top: 0; } .nav-3 .top-nav > ul > li.hasChildren > a:after { position: absolute; bottom: -9px; left: 36%; z-index: 5; display: none; width: 0; height: 0; border-width: 0 10px 8px 10px; border-style: solid; content: ""; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } .nav-3 .top-nav > ul > li > a:hover:after, .nav-3 .top-nav > ul > li.selected:hover > a:after { display: block; } /************ navgation style 4 ************/ .nav-4 .top-nav > ul li a span { display: inline-block; margin: 0px 5px; } .nav-4 .top-nav > ul > li { border-left: 1px #eee solid; height: 50px; overflow: hidden\9; } .nav-4 .top-nav > ul > li > a { height: 50px; line-height: 90px; padding-top: 0; } .nav-4 .top-search a { margin-top: 0; height: 50px; border-radius: 0; line-height: 50px; } .nav-4 .top-nav > ul > li:after { display: none } .nav-4 .top-nav > ul > li > ul { top: 50px; left: 0 } .nav-4 .top-nav > ul li a i { padding: 5px 4px; vertical-align: baseline; border-radius: 50%; width: 25px; height: 24px; background: transparent !important; } .nav-4 .top-nav > ul li a:hover i ,.nav-4 .top-nav > ul > li.selected > a i { background: #A62507; color: #fff; } header.top-head-4 { min-height: 70px; border-bottom: none; } header.top-head-4 .logo { text-align: center; padding-bottom: 20px; } .nav-4 .search-box { top: 49px; } .top-head-4 .gray-nav { background: #f7f7f7; padding: 0; margin-bottom: 20px; border: 1px #F0F0F0 solid; position:relative; height: 52px;} .top-head-4 .gray-nav:before, .top-head-4 .gray-nav:after { position: absolute; content: ""; bottom: 8px; left: 23px; width: 38%; top: 80%; -webkit-box-shadow: 0 6px 8px #000; -moz-box-shadow: 0 6px 8px #000; box-shadow: 0 6px 8px #000; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); z-index: -1; } .top-head-4 .gray-nav:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); right: 23px; left: auto; } /****** Sticky Navigation Style *********/ .sticky { position: fixed !important; top: 0; left: 0; padding: 0 !important; width: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); z-index:99999; min-height:inherit !important; border-bottom:0 !important } .sticky .top-nav > ul > li{ /*border:0 !important*/ } .sticky.top-head-4 .gray-nav:before, .sticky.top-head-4 .gray-nav:after{ display:none } .sticky.top-head-4 .gray-nav{ background:transparent; border:0; margin-bottom:0 } .sticky .top-nav > ul > li > a{ color:#777 !important } .sticky .top-nav > ul > li > a:hover{ background:transparent !important } .sticky .top-nav > ul > li > a i,.sticky .top-nav > ul > li:after,.sticky .bg-head2{ display: none; } .sticky .top-search a{ margin-top:5px; border-radius:0 !important; /*width:45px;*/ height:45px; line-height:45px; text-align: center; padding: 0 !important; } .sticky .top-search a span{ font-size:14px } .sticky .search-box{ top:60px } .sticky .search-box:before{ /*width:45px*/ } .sticky .top-nav > ul > li > a, .sticky .top-nav > ul > li { height: 60px !important; padding-top:0 } .sticky .top-nav > ul > li.selected > a{ background:transparent !important; color:#777 !important } .sticky .top-nav > ul > li > a { padding-top: 0 !important; border-top: 0 !important; background: transparent none; line-height:90px } .sticky .top-nav > ul > li > a span{ margin-top:0; line-height:80px } .sticky .top-nav > ul > li > ul { top: 60px !important; left: 0 !important; } .sticky .top-nav > ul > li > ul:after{ top:-8px; bottom:auto !important; border-width: 0 10px 8px 10px !important; } .sticky .top-nav > ul > li > ul ul{ bottom:auto !important; top:0 !important } .sticky .logo{ margin-top:5px !important } .sticky .top-nav > ul > li.hasChildren > a:after{ display:none !important } .sticky .div-mega{ top:60px !important } /***** sticky header style 2 ******/ .head-style2 .sticky .logo{ padding:0 !important } .head-style2 .sticky .top-menu{ margin-top:0 !important } .head-style2 .sticky .top-nav > ul > li > a,.head-style2 .sticky .top-nav > ul > li > a span{ line-height:58px !important; height:58px !important } .head-style2 .sticky .top-nav > ul > li > ul { top: 58px !important; } .head-style2 .sticky .mega-menu .mega-2 .div-mega{ top:57px } .head-style2 .sticky .head2-lft-links,.head-style2 .sticky .right-bar{ display:none } .head-style2 .sticky .top-search a{ margin-top:8px; width:40px; height:40px; line-height:40px; -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } .head-style2 .sticky .top-search a span{ -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } /***** sticky header style 3 ******/ .head-style3 .sticky.top-head{ margin-top:0 } .head-style3 .sticky .logo,.sticky.top-head-4 .logo{ display:none } .head-style3 .sticky .mega-menu .mega-2 .div-mega{ top:50px } .head-style3 .sticky .top-search{ margin-left:15px } /***** sticky header style 4 ******/ .top-head-4.sticky .nav-4{ background:transparent; border:0; margin-bottom:0 } .top-head-4.sticky .nav-4:before, .top-head-4.sticky .nav-4:after,.top-head-4.sticky .banner{ display:none } /****** Mega menu Style *********/ .mega-menu { position:relative } .mega-menu .div-mega { position: absolute; top: 92px; left: 0; z-index: 99; display: none; padding-top:2%; -webkit-box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); } .mega-menu > li > a { display: block; position: relative; } .div-mega-section { float: left; margin: 0 2% 2%; } .mega-menu div.div-mega ul { visibility: visible; position: static; max-height: 100%; height:100%; width:100% } .mega-menu div.div-mega ul li { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .mega-menu div.div-mega ul li a { padding: 8px 5px; line-height: normal; overflow: inherit; text-overflow: initial; white-space: normal; } .div-mega h4 { background: #fff; color: #777; padding: 8px 10px; font-weight: bold; } /* ---- 3.4 Search ---------------- */ .top-search { position: relative; float: right; margin-left: 20px; } .top-search a { position: relative; z-index: 5; display: block; overflow: hidden; margin-top: 20px; padding: 0 19px !important; width: 55px; height: 55px; border-radius: 50%; background: #eee; text-align: center; line-height: 55px; } .top-search a span { font-size: 19px; } .search-box { position: absolute; top: 92px; right: 0; z-index: 3; display: none; width: 400px; } .search-box:before { position: absolute; top: -46px; right: 0; z-index: 0; display: inline-block; width: 55px; height: 48px; content: ""; } .search-box input[type=text] { width: 343px; height: 53px; } .search-box input[type=submit] { width: 55px; height: 55px; } /* ---- 3.5 Header style 2 ---------------- */ .top-head .container { position: relative; z-index: 9; } .head-style2 .logo { margin: 8px 0 0 0 !important; padding: 15px 0 14px; min-width: 230px; } .head-style2 .top-head,.head-style3 .top-head { padding: 0; min-height: inherit; border-bottom:0px !important } .head2-lft-links { padding: 9px; direction: rtl; } .head2-lft-links li { float: none; padding: 2px 0; text-align: right; white-space: nowrap; } .head2-lft-links li i { margin-left: 10px; } .head-style2 .bg-head2 { position: absolute; bottom: 4px; left: 27%; width: 70%; height: 50px; background: #f6f6f6; } .head-style2 .top-nav { margin-right:15px } .head-style2 .top-nav > ul > li { margin-right: 1px; } .head-style2 .top-nav > ul > li, .head-style2 .top-nav > ul > li > a { padding-top: 0; height: 50px; line-height: 50px; } .head-style2 .top-nav > ul > li > a span, .head-style3 .top-nav > ul > li > a span { line-height: 43px !important; } .head-style3 .sticky .top-nav > ul > li > a span{ line-height:50px !important } .head-style3 .sticky .top-nav > ul > li > a{ height:50px !important } .head-style2 .top-search { margin: 0 15px 0 0; } .head-style2 .top-search a { margin-top: 0; padding: 0 !important; width: 50px; height: 50px; border-radius: 0; line-height: 50px; } .head-style2 .top-search a span { color: #fff; } .head-style2 .top-nav > ul > li > ul { top: 50px; margin-left: -6px; } .head-style2 .login-btn .tri { top: -11px; } .head-style2 .right-bar { float: right; overflow: hidden; margin: 2px 5px 0 0; } .head-style2 .right-bar li { float: left; padding: 5px 0 5px 15px; } .head-style2 .right-bar li i { margin: 0 10px 0 0; } .head-style2 .top-menu { float: right !important; clear: none; } .head-style2 .search-box:before, .head-style3 .search-box:before { display: none; } .head-style2 .search-box { top: 50px; right: 12px; padding: 15px; background: #ECECEC; } .head-style2 .search-box input[type=text] { width: 310px; } .head-style2 .logo a, .head-style3 .logo a{ margin:auto } /* ---- 3.6 Header style 3 ---------------- */ .head-style3 .top-bar { overflow: hidden; background-color: #f6f6f6; } .head-style3 .logo { display: table; float: none; margin: 0 auto !important; padding: 15px 15px 20px; text-align: center; } .top-nav-style3 { height: 50px; background: #f6f6f6; } .head-style3 .top-nav > ul > li > a, .head-style3 .top-search a { line-height: 50px; } .head-style3 .top-search { margin: 0; } .head-style3 .top-nav > ul > li, .head-style3 .top-nav > ul > li > a { height: 50px; } .head-style3 .top-nav > ul > li > a { margin-left: 1px; padding-top: 0; color: #fff !important; } .head-style3 .top-nav > ul > li > ul { top: 50px !important; left:0px } .head-style3 .top-nav > ul li ul li a { background: #eee !important; color: #777; } .head-style3 .top-nav > ul li ul li a:hover { background: #ddd !important; color: #333; } .head-style3 .top-nav li li.hasChildren:after { color: #b1b1b1; } .head-style3 .top-nav > ul li ul li { border-bottom: 1px #ddd solid; } .head-style3 .top-bar li, .head-style3 .top-bar li span { color: #b3b3b3; } .head-style3 .top-bar li { border-left: 1px #e4e4e4 solid; } .head-style3 .top-bar li:first-child { border-left: 0; } .head-style3 .top-bar li:first-child i { margin-left: 8px; } .head-style3 header.top-head { position: static; margin-top: -40px; padding: 0; background: transparent; } .head-style3 .top-nav ul ul li{ box-shadow: 0 0 5px 0 rgba(0,0,0,.1); } .head-style3 .search-box { top: 50px; right: 0; } .head-style3 .top-search a { margin: 0; width: auto; height: auto; } .head-style3 .top-menu { display: table; float: none !important; margin: auto; } .head-style3 .top-nav > ul > li.current > a, .head-style3 .top-nav > ul > li.selected > a, .head-style3 .top-nav > ul > li > a:hover { background: #eee !important; color: #777 !important; } .head-style3 .top-nav ul li ul li.selected > a, .head-style3 .top-nav ul li ul li.current > a { background: #ddd !important; } /* ---- 3.7 Login Box ---------------- */ .login-btn { position: relative; } .login-btn .tri { position: absolute; top: -1px; left: 30%; z-index: 5; width: 0; height: 0; border-width: 8px 10px 0 10px; border-style: solid; border-color: #333 transparent transparent transparent; } .login-controls { display: table; margin: auto; } .login-box { position: relative; display: none; padding: 15px 20px; background: #333; color: #C3C3C3; text-align: center; } .login-box input { font-size: 11px; } .close-login { position: absolute; top: 5px; right: 25px; color: #fff; font-size: 22px; } .login-box .left { float: left; margin: 0 5px; } /* ========================================================================== 4. BLOCKS BACKGROUNDS. ============================================================================= */ .block-bg-1 { background: url('../images/bgs/block-bg-1.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position:relative } .block-bg-2 { background: url('../images/bgs/block-bg-2.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position:relative; overflow: hidden; } .block-bg-3 { background: #fff url('../images/bgs/block-bg-3.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position:relative } .block-bg-4 { background: #fff url('../images/bgs/block-bg-4.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position:relative } .block-bg-5 { background: url('../images/bgs/block-bg-5.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position:relative } .block-bg-1:before,.block-bg-2:before,.block-bg-3:before,.block-bg-4:before,.block-bg-5:before{ position: absolute; left:0; top:0; width:100%; height:100%; display:inline-block; content:"" } .black-overlay:before{ background:rgba(0,0,0,.8) !important; } .parallax p,[class*="block-bg-"] p{ position:relative; z-index:2 } .video-bg{ position:relative; z-index: -99; height: 100%; overflow:hidden } .video-bg video{ position:absolute; width:100%; height:100%; left:0; top:0 } .video-overlay{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,.7); top:0; left:0; z-index:9999 } /* patterns backgrounds */ .dots-pattern { border-top: 1px #E4E4E4 solid; background: transparent url('../images/patterns/dots.png'); } .gry-pattern { background: #eee url('../images/patterns/gry-patt.png'); border-top: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; } .img-pattern { border-top: 1px #E4E4E4 solid; border-bottom: 1px #E4E4E4 solid; background: #fff url('../images/patterns/1.png'); } /* ========================================================================== 5. COMMON STYLES. ============================================================================= */ .fx { opacity: 0; } .animated { opacity: 1; } .marginRight { margin-right: 10px; } .marginLeft { margin-left: 10px; } .marginBottom { margin-bottom: 20px; } .autoMargin { float: none !important; margin: auto; } button, .btn, .fun-title, .r-more { text-transform: uppercase; } .right { float: right !important; } .left { float: left; } .hidden { display: none; } .visible { display: block; } .sectionWrapper { padding: 80px 0; } .page-section,.scroll-section{ padding:140px 0 } .icon-middle { display: table; margin: auto; margin-bottom: 20px; padding: 1px 15px; font-size: 35px; } .skew-5 { -moz-transform: skew(-5deg, 0); -ms-transform: skew(-5deg, 0); -o-transform: skew(-5deg, 0); -webkit-transform: skew(-5deg, 0); transform: skew(-5deg, 0); } .skew5 { -moz-transform: skew(5deg, 0); -ms-transform: skew(5deg, 0); -o-transform: skew(5deg, 0); -webkit-transform: skew(5deg, 0); transform: skew(5deg, 0); } .skew-10 { -moz-transform: skew(-10deg, 0); -ms-transform: skew(-10deg, 0); -o-transform: skew(-10deg, 0); -webkit-transform: skew(-10deg, 0); transform: skew(-10deg, 0); } .skew10 { -moz-transform: skew(10deg, 0); -ms-transform: skew(10deg, 0); -o-transform: skew(10deg, 0); -webkit-transform: skew(10deg, 0); transform: skew(10deg, 0); } .skew-15 { -moz-transform: skew(-15deg, 0); -ms-transform: skew(-15deg, 0); -o-transform: skew(-15deg, 0); -webkit-transform: skew(-15deg, 0); transform: skew(-15deg, 0); } .skew15 { -moz-transform: skew(15deg, 0); -ms-transform: skew(15deg, 0); -o-transform: skew(15deg, 0); -webkit-transform: skew(15deg, 0); transform: skew(15deg, 0); } .skew-20 { -moz-transform: skew(-20deg, 0); -ms-transform: skew(-20deg, 0); -o-transform: skew(-20deg, 0); -webkit-transform: skew(-20deg, 0); transform: skew(-20deg, 0); } .skew20 { -moz-transform: skew(20deg, 0); -ms-transform: skew(20deg, 0); -o-transform: skew(20deg, 0); -webkit-transform: skew(20deg, 0); transform: skew(20deg, 0); } .skew-25 { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); } .skew25 { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .skew-0 { -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } /************ Useful classes ***********/ .width-10 {width: 10px;} .width-20 {width: 20px;} .width-30 {width: 30px;} .width-40 {width: 40px;} .width-50 {width: 50px;} .width-60 {width: 60px;} .width-70 {width: 70px;} .width-80 {width: 80px;} .width-90 {width: 90px;} .width-100 {width: 100px;} .width-110 {width: 110px;} .width-120 {width: 120px;} .width-130 {width: 130px;} .width-140 {width: 140px;} .width-150 {width: 150px;} .padd-top-0 {padding-top: 0;} .padd-top-5 {padding-top: 5px;} .padd-top-10 {padding-top: 10px;} .padd-top-15 {padding-top: 15px;} .padd-top-20 {padding-top: 20px;} .padd-top-25 {padding-top: 25px;} .padd-top-30 {padding-top: 30px;} .padd-top-35 {padding-top: 35px;} .padd-top-40 {padding-top: 40px;} .padd-top-45 {padding-top: 45px;} .padd-top-50 {padding-top: 50px;} .padd-bottom-0 {padding-bottom: 0;} .padd-bottom-5 {padding-bottom: 5px;} .padd-bottom-10 {padding-bottom: 10px;} .padd-bottom-15 {padding-bottom: 15px;} .padd-bottom-20 {padding-bottom: 20px;} .padd-bottom-25 {padding-bottom: 25px;} .padd-bottom-30 {padding-bottom: 30px;} .padd-bottom-35 {padding-bottom: 35px;} .padd-bottom-40 {padding-bottom: 40px;} .padd-bottom-45 {padding-bottom: 45px;} .padd-bottom-50 {padding-bottom: 50px;} .padd-vertical-0 {padding: 0;} .padd-vertical-5 {padding: 5px 0;} .padd-vertical-10 {padding: 10px 0;} .padd-vertical-15 {padding: 15px 0;} .padd-vertical-20 {padding: 20px 0;} .padd-vertical-25 {padding: 25px 0;} .padd-vertical-30 {padding: 30px 0;} .padd-vertical-35 {padding: 35px 0;} .padd-vertical-40 {padding: 40px 0;} .padd-vertical-45 {padding: 45px 0;} .padd-vertical-50 {padding: 50px 0;} .padd-horizontal-0 {padding: 0 0;} .padd-horizontal-5 {padding: 0 5px;} .padd-horizontal-10 {padding: 0 10px;} .padd-horizontal-15 {padding: 0 15px;} .padd-horizontal-20 {padding: 0 20px;} .padd-horizontal-25 {padding: 0 25px;} .padd-horizontal-30 {padding: 0 30px;} .padd-horizontal-35 {padding: 0 35px;} .padd-horizontal-40 {padding: 0 40px;} .padd-horizontal-45 {padding: 0 45px;} .padd-horizontal-50 {padding: 0 50px;} .margin-top-0 {margin-top: 0;} .margin-top-5 {margin-top: 5px;} .margin-top-10 {margin-top: 10px;} .margin-top-15 {margin-top: 15px;} .margin-top-20 {margin-top: 20px;} .margin-top-25 {margin-top: 25px;} .margin-top-30 {margin-top: 30px;} .margin-top-35 {margin-top: 35px;} .margin-top-40 {margin-top: 40px;} .margin-top-45 {margin-top: 45px;} .margin-top-50 {margin-top: 50px;} .margin-bottom-0 {margin-bottom: 0;} .margin-bottom-5 {margin-bottom: 5px;} .margin-bottom-10 {margin-bottom: 10px;} .margin-bottom-15 {margin-bottom: 15px;} .margin-bottom-20 {margin-bottom: 20px;} .margin-bottom-25 {margin-bottom: 25px;} .margin-bottom-30 {margin-bottom: 30px;} .margin-bottom-35 {margin-bottom: 35px;} .margin-bottom-40 {margin-bottom: 40px;} .margin-bottom-45 {margin-bottom: 45px;} .margin-bottom-50 {margin-bottom: 50px;} [class*="padd-"]:after, [class*="margin-"]:after { display: block; clear: both; content: ""; } /***** pager style *******/ .pager { margin: 0 15px; background: #eee; } .pager ul { display: table; margin: auto; } .pager ul li { float: left; margin: 0 1px 0 0; background: #777; } .pager ul li a, .pager ul li span { display: block; padding: 0 20px; color: #fff; font-size: 14px; line-height: 38px; } .pager ul li i { font-weight: bold; font-size: 140%; } .pager ul li.selected span { color: #fff; } .pager ul li:hover a, .pager ul li.selected a { color: #fff; } #map_canvas { height: 450px; } .noScroll{ line-height: 1.35; overflow: hidden; white-space: nowrap; } #map_canvas img{ max-width:none } /* ========================================================================== 6. TYPOGRAPHY. ============================================================================= */ a { text-decoration: none; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } a:active, a:hover { outline: 0; } b, strong, .bold { font-weight: bold; } .bolder { font-weight: 800; } .italic { font-style: italic; } small { font-size: 80%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; padding: 0; font-weight: normal; line-height: 1.5; } h1 {font-size: 36px;} h2 {font-size: 28px;} h3 {font-size: 22px;} h4 {font-size: 18px;} h5 {font-size: 14px;} h6 {font-size: 12px;} p { margin: 0 0 20px 0; line-height: 22px; font-size:13px } .white-bg { background: #fff; } .dark-bg { padding: 80px 0; background-color: #222; } .dark-bg p{ color: #A3A3A3; margin: 0; } .gry-bg { background: #eee; } .staff-3 .gry-bg .fun-text { color: #333 !important; } .dark-bg h2 { color: #bdbdbd; font-size:24px } .alter-bg{ background:#777; color:#fff } .alter-bg a{ color:#fff } .welcome { padding: 80px 0; text-align: center; } .btn.ExtraLargeBtn { display: block; height: 78px; font-weight: bold; font-size: 22px; line-height: 78px; } .extraBold { font-weight: 800; } .extraLarge { font-size: 20px; } .center { text-align: center; } .left-text { text-align: left; } .right-text { text-align: right; } .red { color: #f00; } .congrats { color: #4FB830; text-transform: uppercase; font-weight: bold; font-size: 30px; } .success-icon { margin-bottom: 15px; color: #ecc686; font-size: 90px; } span.block { display: block; clear: both; padding-left: 20px; } .list-item { margin: 0; padding: 5px 0; } .list-item i.fa { margin-right: 7px; color: #CFCFCF; } /*********** HR style 1 *********/ hr { position: relative; display: block; overflow: visible; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px #eeeded solid; } hr:before { position: absolute; top: -1px; left: 0; display: inline-block; width: 20%; height: 1px; content: ""; } hr:after { position: absolute; top: -1px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; } /*********** HR style 2 *********/ .hr-style2:before { left: 30%; width: 40%; } .hr-style2:after { display: none; } /*********** HR style 3 *********/ .hr-style3:before { left: 20%; width: 20%; } .hr-style3:after { right: 20%; width: 20%; } /*********** HR style 4 *********/ .hr-style4:before { left: 44%; margin-top: 0; width: 5%; content: "\f105"; text-align: right; font-size: 20px; font-family: FontAwesome; line-height: 1px; } .hr-style4:after { right: 44%; margin-top: 0px; width: 5%; content: "\f104"; text-align: left; font-size: 20px; font-family: FontAwesome; line-height: 1px; } /*********** HR style 5 *********/ .hr-style5:before { left: 44%; margin-top: 0px; width: 5%; content: "\f1d8"; text-align: center; font-size: 20px; font-family: FontAwesome; line-height: 1px; } .hr-style5:after { right: 44%; margin-top: 0px; width: 5%; content: "\f1d8"; text-align: center; font-size: 20px; font-family: FontAwesome; line-height: 1px; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hr-style5:before, .hr-style5:after { background: #fff; color: #d4d4d4; } .follow-block p { margin: 0; padding: 0 0 10px; text-align: center; font-size: 16px; } .follow-block .follow-link { font-weight: bold; font-style: italic; font-size: 23px; } .slick-prev, .slick-next { background: #777; color: #eee; } /********** highlight *************/ .highlight-1 { background: #fcff00; } /********** Dropcaps ************/ .dropcap { display: block; float: left; margin: 2px 8px 0 0; font-weight: bold; font-size: 36px; line-height: 36px; } /********** Blockquote ************/ blockquote { margin: 0; padding: 15px; } blockquote p { margin: 0; padding-bottom: 15px; width: 80%; color: #afafaf; font-size: 16px; line-height: 140%; } blockquote span { color: #a3a3a3; font-weight: bold; font-size: 14px; } /********** Tooltips ************/ .tooltip { position: fixed; z-index: 999999; padding: 7px; background: #000; color: #fff; text-align: center; font-size: 11px; -moz-transition: all 0.1s ease !important; -ms-transition: all 0.1s ease !important; -o-transition: all 0.1s ease !important; -webkit-transition: all 0.1s ease !important; transition: all 0.1s ease !important; } .tooltip:after { position: absolute; bottom: -4px; left: 40%; display: inline-block; width: 0; height: 0; border-width: 4px 5px 0 5px; border-style: solid; border-color: #000 transparent transparent transparent; content: ""; } .lft-tip:after { right: -5px; bottom: 25%; left: auto; border-width: 5px 0 8px 8px; border-color: transparent transparent transparent #000; } .rit-tip:after { bottom: 25%; left: -5px; border-width: 5px 8px 8px 0; border-color: transparent #000 transparent transparent; } .bot-tip:after { top: -5px; bottom: auto; border-width: 0 4px 5px 5px; border-color: transparent transparent #000 transparent; } /* ========================================================================== 7. PAGES ELEMENTS. ============================================================================= */ /* -------- 7.1. Heading styles ------------------ */ /* ---- 7.1.1. Heading style 1 ------------- */ .block-head { position: relative; margin-bottom: 20px; padding: 0 0 20px; border-bottom: 1px #e2e2e2 solid; font-weight:normal; } .footer-top .block-head { border-bottom-color: #3a3a3a; color:#c5c5c5; text-transform:uppercase } .block-head:before{ position: absolute; bottom: -3px; left: 15px; width: 15px; height: 5px; content: ""; display:inline-block; } .block-head:after{ position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; content: ""; display:inline-block; } .block-head.center{ margin-left:auto; margin-right:auto; display:table; padding-right:30px; padding-left:30px } .block-head.center:before{ left: 50%; margin-left:-17.5px } .block-head.center:after{ left: 50%; margin-left: -40px; } .side-heading{ font-weight:800; border:0px; padding:0; font-size:28px; text-transform:uppercase; letter-spacing:-1px; margin-bottom:15px } .side-heading span{ color:#777; font-weight:100; } .side-heading:after,.side-heading:before{ display:none; } .large-heading{ position: relative; margin-bottom: 40px; padding: 0 0 20px; border-bottom: 1px #e2e2e2 solid; font-weight:bold; text-transform:capitalize; font-size:26px; line-height:20px; text-align:center } .large-heading:before{ position: absolute; bottom: -3px; left: 50%; width: 100px; height: 5px; content: ""; display:inline-block; margin-left:-57px; border-left:15px #fff solid; border-right:15px #fff solid; } .gry-bg .large-heading:before{ border-left:15px #eee solid; border-right:15px #eee solid; } /* ---- 7.2. Services boxes ---------------- */ /* ---- 7.2.1. Services boxes style 1 ---------------- */ .service-box-1 { position: relative; } .box-top { z-index: 2; overflow: hidden; padding: 50px 0; text-align:center } .box-top i.fa { display: table; margin: 0 auto 30px; font-size: 38px; width:103px; height:103px; line-height:95px; text-align:center; border-radius:50%; border:3px #fff solid; -moz-box-shadow: inset 0 0 13px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 0 13px rgba(0,0,0,.4); box-shadow: inset 0 0 13px rgba(0,0,0,.4); } .box-top h3 { margin: 0 0 10px; padding: 0 15px 10px; text-align: center; font-size: 23px; color:#777; font-weight:800; text-transform:uppercase } .box-top h3 span{ text-transform:none; font-size:19px; font-weight:100; display:block; margin-bottom:-15px } .box-top .more-btn{ display:table; margin: 30px auto 0; background:#fff; padding:10px 15px; text-transform:uppercase; font-size:11px } .box-top p { padding: 0 15px; } .box-top p a { display: inline-block; margin-left: 5px; font-size: 11px; } .service-box-1:hover i.fa { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -moz-transition: -moz-transform 0.3s; -o-transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .service-box-1:hover h3{ color:#fff } .portfolio-item:hover:after { height: 3px; border-top:0px } /* ---- 7.2.2. Services boxes style 2 ---------------- */ .service-box-2 { padding-top: 30px; } .box-2-cont { position: relative; border-top: 1px #ECECEC solid; text-align: center; padding:0 15px 15px; border:1px #E6E6E6 solid } .service-box-2 h4 { text-align: center; font-weight: bold; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .sub-title { margin: -10px 0 15px; font-size: small; } .service-box-2 .fa { display: table; margin: 0 auto 25px; margin-top: -45px; width: 90px; height: 90px; border: 1px #E6E6E6 solid; border-radius: 50%; background-color: #F0F0F0; box-shadow: inset 0 0 0 3px #fff; color: #B3B3B3; text-align: center; font-size: 38px; line-height: 90px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-2 .r-more { position: relative; z-index: 1; display: table; margin: 15px auto 0; padding: 8px 15px; background: #ECECEC; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-2 .r-more:after { display: inline-block; margin-left: 8px; content: "+"; font-size: 14px; } .service-box-2:hover h4 { color: #4e4e4e; } .service-box-2 p.mediumFont { overflow: hidden; max-height: 180px; border-bottom:1px #eee solid; padding-bottom:25px !important } /* ---- 7.2.3. Services boxes style 3 ---------------- */ .service-box-3 { margin-bottom: 30px; text-align: center; } .service-box-3 .box-head { clear: both; margin-bottom: 15px; } .service-box-3 h4 { position: relative; overflow: hidden; height: 1.4em; font-weight: bold; } .service-box-3:hover h4 { color: #4e4e4e; } .service-box-3 h4 span { position: relative; display: inline-block; -moz-transition: -moz-transform 0.3s; -o-transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .service-box-3 h4 span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .service-box-3 p.mediumFont { overflow: hidden; max-height: 110px; } .service-box-3 .icon { display: table; margin: 0 auto 25px; width: 150px; height: 150px; border: 1px #DADADA solid; border-radius: 50%; background-color: #DADADA; box-shadow: inset 0 0 0 3px #fff; color: #777; text-align: center; font-size: 50px; line-height: 150px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-3:hover span, .service-box-3:focus span { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .service-box-3 .r-more { position: relative; display: table; margin: 15px auto 0; padding: 8px 15px; background: #eee; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-3 .r-more:after { display: inline-block; margin-left: 8px; content: "+"; font-size: 14px; } /* ---- 7.2.4. Services boxes style 4 ---------------- */ .service-box-4{ margin: 30px 0; } .service-box-4 a { display: table; text-align: center; font-size: 30px; border-radius: 50%; width: 70px; height: 70px; line-height: 70px; text-align: center; overflow: hidden; } .service-box-4 .fa { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .service-box-4 h3 { text-align: left; margin-bottom: 5px; } .service-box-4 h3 span,.service-box-5 h3 span { font-weight: bold; margin-right: 2px; } .service-box-4 p { max-height: 50px; overflow: hidden; text-align: left; margin: 0; line-height: 16px; } .service-box-4:hover .fa { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } /* ---- 7.2.5. Services boxes style 5 ---------------- */ .service-box-5{ margin: 30px 0; } .service-box-5 a { text-align: center; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; height: 100px; display: block; margin-bottom: 0; overflow: hidden; } .service-box-5 a .fa { font-size: 70px; margin-top: 18px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-5 h3 { text-align: center; margin: 0 0 10px; background: #fff; padding: 9px 0; font-weight: bold; text-transform: uppercase; } .service-box-5 p { max-height: 94px; overflow: hidden; text-align: center; margin: 0; } .service-box-5:hover a { color: #fff; } .service-box-5:hover a .fa { font-size: 116px; opacity: 1; margin-top: 0; -webkit-transform: rotate(-16deg); opacity: 0.8 } /* ---- 7.3. Skill levels --------- */ /* ---- 7.3.1. Skill levels style 1 --------- */ .levels { overflow:hidden } .level-out { position: relative; margin: 0 10px 25px 0; padding: 0; background: #E7E7E7; } .level-in { position: relative; float: left; height: 21px; } .level-out:after{ width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; border-color: transparent transparent transparent #E7E7E7; content:""; display:inline-block; position:absolute; right: -10px; top:0; z-index: 0; } .level-in:before{ width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; content:""; display:block; position:absolute; right:-10px; top:0; z-index: 5; } .level-name { font-size: 15px; font-style: normal; margin-bottom: 4px; font-weight: bold; color: #777; } .level-out span{ background: #E7E7E7; display:block; padding:0 10px; height: 21px; width: 54px; white-space: nowrap; font-size: 12px; color: #333; line-height: 21px; position:absolute; z-index:5 } .level-out span:before{ width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; border-color: transparent transparent transparent #E7E7E7; content:""; display:inline-block; position:absolute; right:-10px; top:0; z-index: 5; } .levels li:last-child .level-out{ margin-bottom:0 } /* ---- 7.3.2. Skill levels style 2 --------- */ .levels-2 li { float: left; margin: 0 1.5%; width: 22%; } .level-in-2 { text-align: center; } .level-name-2 { display: block; margin-top: 10px; text-align: center; font-size: 13px; } /* ---- 7.4. Fun Staff -------------- */ .fun-staff .fun-text { z-index: 1; text-align: center; font-size: 18px; } .fun-staff .fun-number { padding: 0; text-align: center; font-size: 35px; } .fun-title { margin: auto; /* height: 100%; */ background-color: #fff; font-size: 40px; } /* ---- 7.4.1 Fun Staff Style 1 -------------- */ .staff-1 .fun-text { padding: 23px 0; } .staff-1 .fun-number { background-color: #fff; color: #444; /* margin-top: 60px; */ } .staff-1 .fun-number.skew-15, .staff-1 .fun-icon.skew-15 { right: 7px; } .staff-1 .fun-icon { padding: 5px 0; background-color: #fff; text-align: center; font-size: 30px; } .staff-1 .fun-number.skew15, .fun-icon.skew15 { left: 7px; } .staff-1 .fun-title { padding: 29px; text-align: center; } .staff-1 .fun-title span { color: #333; } /* ---- 7.4.2. Fun Staff Style 2 -------------- */ .staff-2 { min-height: 288px; } .staff-2 .fun-text { padding: 25px 0 10px; } .staff-2 .fun-number { font-weight: 700; } .staff-2 .fun-icon { display: table; margin: auto; text-align: center; font-size: 35px; border:2px #fff solid; border-radius:50%; width: 90px; height: 86px; line-height: 86px; } .staff-2 .fun-title { padding: 21px; text-align: center; line-height:45px } .staff-2 .fun-title span { color: #333; } .staff-2 .fun-title p { color: #777; text-transform: none; font-weight: normal; font-size: 13px; line-height: normal; margin-top: 6px; } /* ---- 7.4.3. Fun Staff Style 3 -------------- */ .staff-3 .main-bg { margin: 0 -10px; padding: 15px; } .staff-3 .fun-text { top: 0; padding: 0 0 15px; min-height: inherit; color: #fff; text-align: center; font-size: 15px; } .staff-3 .fun-number { padding: 0; background-color: transparent; text-align: center; font-weight: 400; font-size: 38px; } /* ---- 7.5. Testimonials -------------- */ /* ---- 7.5.1. Testimonials Style 1 -------------- */ .testimonials-1{ padding-top:5px } .testimonials-bg { position: relative; z-index: 4; overflow: hidden; margin: 0 15px; padding: 8px; background: #E9E9E9; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg .rating { position: relative; z-index: 1; clear: both; overflow: hidden; padding: 10px 0 0 0; } .testimonials-bg:hover { background: #e6e6e6; } .testimonials-img { position: relative; z-index: 2; float: left; margin: 0 10px 5px 0; max-width: 70px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg .rating .fa { margin-right: 4px; color: #ffc000; font-size: 15px; } .testimonials-bg:after { position: absolute; right: 8px; bottom: 8px; display: inline-block; margin-right: 7px; color: #CFCFCF; content: "\f10e"; font-weight: normal; font-style: normal; font-size: 25px; font-family: FontAwesome; line-height: 1; } .testimonials-name { position: relative; margin: 0 5px; padding: 6px 0 8px 0; text-align: center; text-transform: uppercase; font-size: 11px; } .testimonials-name:after { position: absolute; right: 9px; bottom: 9px; z-index: 0; width: 0; height: 0; border-width: 20px 23px 0 0; border-style: solid; border-color: #DADADA transparent transparent transparent; content: ""; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-name:before { position: absolute; bottom: 9px; left: 11px; z-index: 0; width: 0; height: 0; border-width: 20px 0 0 23px; border-style: solid; border-color: #DADADA transparent transparent transparent; content: ""; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg:hover + .testimonials-name:after, .testimonials-bg:hover + .testimonials-name:before { border-color: #ccc transparent transparent transparent; } .testimonials-bg .rating .fa-star-o { color: #c0c0c0; } /* ---- 7.5.2. Testimonials Style 2 -------------- */ .testimonials-2 .testimonials-name { display: table; margin: auto; padding: 10px 20px; font-size: 130%; } .testimonials-2 p { font-size: 16px; line-height: 29px; } .testimonials-2 .testimonials-name:before, .testimonials-2 .testimonials-name:after { display: none; } .testimonials-2 .slick-list{ margin:0; text-align:center } /* ---- 7.6. Portfolio -------------- */ /* ---- 7.6.1. Portfolio Carousel -------------- */ .portfolio .portfolio-item { margin: 0 15px; background-color: #eee; } .portfolio-item:after { display: block; clear: both; border-top: 2px #fff solid; height: 3px; content: ""; } .img-holder { position: relative; overflow: hidden; margin: 0 0 15px; cursor: pointer; } .img-holder img { width: 100%; height: auto; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; } .img-holder:hover img { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } .img-over { position: absolute; top: -46%; left: -20%; z-index: 9; display: none; overflow: hidden; width: 100%; width: 170%; height: 100%; height: 170%; -moz-transform: rotate(-37deg); -ms-transform: rotate(-37deg); -o-transform: rotate(-34deg); -webkit-transform: rotate(-37deg); transform: rotate(-34deg); } .img-over a { position: absolute; display: block; width: 100%; height: 100%; } .img-over b { position: absolute; z-index: 8; color: #fff; font-weight: normal; font-size: 40px; -moz-transform: rotate(34deg); -ms-transform: rotate(34deg); -o-transform: rotate(34deg); -webkit-transform: rotate(34deg); transform: rotate(34deg); } .img-over a.link { top: -52%; left: -8%; } .img-over a.zoom { top: 48%; left: -10%; } .img-over a b { top: 13%; left: 51%; } .img-over a.link b { top: 75%; left: 40%; } .name-holder { overflow: hidden; padding: 0 15px 10px; } .project-name { display:table; margin:auto; font-weight:bold; font-size: 16px; } .project-options { margin-top: 4px; display:block; text-align:center; font-size: 12px; } .project-options a { display: block; float: left; margin: 0 0 0 5px; color: #444; font-size: 14px; } .project-brief { display: none; } .portfolio{ position: relative; } .viewAll { padding-top: 10px; } .viewAll .btn { background: #eee; font-weight: bold; font-size: 12px; float: left; padding: 0 10px; line-height: 27px; border-radius: 3px; color: #777; } .homeGallery .slick-prev,.homeGallery .slick-next{ right:auto; left:-70px; bottom:0; top:auto } .homeGallery .slick-prev{ left:-100px; } .portfolio-lft-txt{ max-height:154px; overflow:hidden } .lft-minus-margin{ margin-right:-15px } .view-all-projects{ padding-top:30px; text-align:center; } .view-all-projects a{ display: table; margin: auto; } /* ---- 7.6.2. Portfolio Filterable -------------- */ .portfolio-filterable .portfolio-item { margin-top: 20px; background-color: #f4f4f4; } .portfolio-filterable .white-bg, .portfolio-filterable .gry-bg { margin: 0 15px 10px; line-height: 35px; } .portfolio-filterable .white-bg { background-color: #fff; } .portfolio-filterable.full [class*="cell-"] { margin: 0; padding: 0; border-right: 1px #fff solid; } .full-portfolio { margin-right: 10px !important; margin-left: 10px !important; } .filter-by { display: inline-block; margin-left: 20px; } #filters { display: table; margin: auto; } #filters li { float: left; margin: 0 1px 0 0; background: #777; } #filters li a { display: block; padding: 0 20px; text-transform: uppercase; font-size: 11px; line-height: 35px; color: #fff !important; } #filters li:hover a, #filters li.active a { color: #fff; } /* ---- 7.7. Form controls -------------- */ /* ---- 7.7.1. Buttons -------------- */ .control-label { display: block; padding-bottom: 4px; color: #777; text-transform: uppercase; font-weight: bold; } .control-group { display: table; clear: both; margin: 5px 0; padding: 10px 0 20px; width: 100%; border-bottom: 1px #E9E9E9 solid; } .btn-group { clear: both; padding: 20px 0; text-align: center; } .btn { display: inline-block; margin-bottom: 0; padding: 0 11px; border: 1px solid transparent; background: #777 none; vertical-align: middle; text-align: center; white-space: nowrap; font-weight: normal; font-size: 12px; line-height: 30px; cursor: pointer; color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); text-transform:uppercase; letter-spacing: 0.8px; } [class*="skew-"] .btn{ background:transparent none; color:inherit; } [class*="skew-"] .btn:hover{ background:transparent none; color:inherit; } .btn span { display: block; } .btn i { margin-right: 5px; } button.skew-25 i { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .btn-tiny { padding: 0 4px; font-size: 9px; line-height: 27px; } .btn-small { padding: 0 10px; font-size: 11px; line-height: 33px; } .btn-medium { padding: 0 12px; font-size: 13px; line-height: 41px; } .btn-large { padding: 0 22px; font-size: 15px; line-height: 49px; } .btn.empty { background: transparent none; } /* ---- 7.7.2. Inputs -------------- */ .input-box { border: 1px #eee solid; background: #fff; } .txt-box { padding: 0 12px; height: 30px; border: 0; background-color: transparent; background-image: none; color: #555; font-size: 12px; line-height: 30px; -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .txt-box:focus { outline: transparent none 0; border: 0; } .check-box-box { float: none !important; line-height: 34px; clear: both; } .check-box-box * { float: left; } .check-box-box a { margin-left: 10px; } .check-box { margin: 11px 8px 0 0; } /* ---- 7.8. Information boxes -------------- */ .box { position: relative; margin: 0 auto 15px; padding: 15px; border-width: 1px; border-style: solid; } .box i.fa { color: #333; } .close-box { position: absolute; top: 2px; right: 2px; padding: 2px 8px 4px; background: rgba(0,0,0,.1); color: #fff; font-size: 17px; } .box h3 { margin-bottom: 0px; font-weight: bold; } .box p { margin: 5px 0 0; padding-bottom: 0; } .warning-box { border-color: #e0d594; background: #fff6bf; } .info-box { border-color: #9fc6d7; background: #c2e1ee; } .success-box { border-color: #a0c272; background: #bbdd8c; } .error-box { border-color: #f2b1b4; background: #f1d5d6; } /* ---- 7.9. Horizontal Tabs -------------- */ .tabs { display: inline-block; width: 100%; } .tabs > ul { margin-left: 5px; } .tabs > ul:after { display: block; clear: both; content: ""; } .tabs > ul li { float: left; margin: 0 0 0 2px; background: #efefef; color: #6c6c6c; } .tabs > ul li a { color: #6c6c6c; text-transform: uppercase; display: block; padding: 6px 15px; } .tabs > ul li a i { margin-right: 8px; color: #333; } .tabs > ul li:hover a, .tabs > ul li.active a { color: #fff; } .tabs-pane { padding: 15px; } /* ---- 7.10. Vertical Tabs -------------- */ .tabs-vertical > ul { float: left; width: 30%; } .tabs-vertical > ul li { display: block; float: none; margin: 0 0 7px 0; } .tabs-vertical .tabs-pane { float: left; margin-left: 25px; padding: 0; width: 63%; border-top: 0px; border-bottom: 1px #e4e4e4 solid; } .tabs-vertical .tabs-pane .tab-panel { position: relative; padding: 0 15px 15px; } .tabs-vertical .tabs-pane .tab-panel:before { position: absolute; top: 20%; left: 0; display: inline-block; width: 2px; height: 60%; content: ""; } .tab-img-holder { margin-right: 15px; width: 30%; } /* ---- 7.11. Accordion -------------- */ .accordion li > h3 { overflow: hidden; margin: 0 0 15px; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .accordion li > h3 a { float: left; margin: 0; padding: 0 15px; border: 1px #d4d4d4 solid; background: #fff; line-height: 28px; display: block; width: 90%; color: #a8a8a8; text-transform: uppercase; font-size: 12px; } .accordion li > h3 i.fa { margin-right: 7px; } .accordion li > h3 u { display: inline-block; float: left; margin: 0 5px 0 10px; padding: 10px 10px 8px 10px; border: 1px #d4d4d4 solid; background: #fff; color: #a8a8a8; text-align: center; text-decoration: none; font-size: 10px; line-height: 1; cursor: pointer; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .accordion li > h3 u:before { display: block; content: "\f067"; font-family: FontAwesome; } .accordion li > h3[class*="skew-"] u::before { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .accordion li.active > h3 u:before { content: "\f068"; font-family: FontAwesome; } .accordion li > h3 a span { display: block; } .accordion-panel { margin: 15px 40px; padding: 0 15px; border-left: 3px #d4d4d4 solid; } /* ---- 7.12. horizontal Accordion -------------- */ .accordion-horizontal > li { position: relative; display: block; float: left; overflow: hidden; margin: 0 1px; width: 50px; height: 240px; } .accordion-horizontal > li.active { width: 80%; } .accordion-horizontal > li h3 span { display: block; margin-top: 130px; white-space: nowrap; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .accordion-horizontal > li > h3 { position: absolute; left: 0; float: left; width: 40px; height: 100%; } .accordion-horizontal > li > h3 a { display: table-cell; width: 40px; height: 100%; vertical-align: middle; -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } .accordion-horizontal .accordion-panel { margin: 0 0 0 40px; border: 0; } .accordion-horizontal > li > h3:before { display: none; } /* ---- 7.13. Icons list -------------- */ .list li { padding: 0 0 10px 10px; } .list li:before { position: relative; top: 2px; display: inline-block; margin-right: 10px; font-family: FontAwesome; } .list-crosshairs li:before { content: "\f05b"; } .list-ok li:before { content: "\f00c"; } .list-bell li:before { content: "\f0f3"; } .list-bookmark li:before { content: "\f02e"; } /* ---- 7.14. BreadCrumbs style -------------- */ .breadcrumbs { float: left; overflow: hidden; padding: 8px 10px; } .title-1 .breadcrumbs{ background-color:#777 !important } .breadcrumbs a { float: left; margin: 0 3px; color: #fff; } .breadcrumbs a:hover { color: #fff; text-decoration: underline; } .breadcrumbs span { float: left; margin: 0 3px; } /* ---- 7.15. Clients Style -------------- */ .clients,.auto-clients { padding-top: 10px; } .clients > div a,.auto-clients > div a { margin: 0 15px; display: block; border-bottom: 1px #ddd solid; padding: 10px; text-align:center } /* ========================================================================== 8. PAGE SPECIFIC STYLES. ============================================================================= */ /* ---- 8.1. About pages -------------- */ .plan-title { margin: auto; padding-top: 50px; background: #fff; text-align: center; text-transform: uppercase; font-size: 55px; line-height: 90%; } .plan-title span { color: #333; } .plan-block { padding: 50px 50px 0 !important; color: #fff; } .plan-block .block { position: relative; z-index: 9; padding-bottom: 60px; } .plan-year { position: absolute; bottom: 40px; z-index: 9; width: 250px; background: transparent url('../images/planBG.png') no-repeat 0px 100%; color: #333; font-weight: 800; font-size: 20px; } .plan-year:before { position: absolute; right: 23px; bottom: -6px; z-index: -1; display: inline-block; width: 38px; height: 40px; background: #fff; content: ""; } .plan-year:after { position: absolute; right: -15px; bottom: -6px; z-index: -1; display: inline-block; width: 38px; height: 40px; content: ""; } .lft-plan .plan-year { right: -73px; text-align: right; } .rit-plan .plan-year { left: -75px; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .rit-plan .plan-year span { display: block; float: right; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .rit-plan .plan-year:after { right: -13px; } .plan-block h3 { margin: 0; padding: 0; font-weight: bold; font-size: 19px; } .plan-block p { margin: 5px 0; } .my-img { overflow: hidden; padding-bottom: 40px; } .my-img .my-name { font-size: 18px; margin: 15px 0; line-height: normal; padding-left: 25px; display: table; } .my-img img { border-radius: 5px; width: 150px; height: 150px; float: left; position: relative; z-index: 5; } .my-img .my-details { background: #F3F3F3; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; } .work-exp li h4 { color: #777; margin-bottom: 5px; text-transform: uppercase; font-weight: bold; } .work-exp li h4:before { display: inline-block; content: "\f1d9"; font-size: 12px; font-family: FontAwesome; margin-right: 10px; color: #B8B8B8; } .work-exp li p { padding-left: 23px; padding-bottom: 10px; } .work-exp li:last-Child p{ padding-bottom:0; margin-bottom:0 } /***** chart ******/ .chart { position: relative; display: inline-block; margin-bottom: 20px; width: 140px; height: 140px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { z-index: 2; display: inline-block; color: #bdbdbd; font-size: 21px; line-height: 137px; } .percent:after { margin-left: 0.1em; content: '%'; font-size: .8em; } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } /* ---- 8.2. Portfolio pages -------------- */ .portfolio-img-slick { overflow: hidden; max-height: 500px; } .portfolio-img-slick .slick-list { max-height: 500px; } .portfolio-img-slick .slick-prev, .portfolio-img-slick .slick-next { top: 50%; right: 10px; padding: 0; width: 60px; height: 60px; border-bottom: 0; border-radius: 0; background: rgba(255,255,255,.23); color: #fff; margin-top: -30px; } .portfolio-img-slick .slick-next:before { content: "\f105"; font-size: 50px; } .portfolio-img-slick .slick-prev:before { content: "\f104"; font-size: 50px; } .portfolio-img-slick .slick-prev { right: auto; left: 10px; } .porto-stats [class*="cell-"] { padding: 3px; } .porto-stats .gry-bg { padding: 15px 9px; } .porto-stats .fun-text { color: #333; } .list-details li { padding: 10px 3px; border-top: 1px #e5e5e5 solid; } .list-details li:first-child { border-top: 0; } .list-details li span { margin: 0 15px 0 5px; } .list-details li span.main-color{ font-weight:bold; font-size:13px } /* ---- 8.3. Pricing tables -------------- */ .pricing-table, .pricing-table-2 { padding: 45px 11px 20px; border: 1px #e4e4e4 solid; text-align: center; } .pricing-table i.fa { position: absolute; top: 0px; left: 50%; font-size: 30px; width: 60px; height: 56px; z-index: 9999; text-align: center; line-height: 56px; margin-top: -28px; margin-left: -30px; } .pricing-table .head, .pricing-table-2 .head { text-transform: uppercase; font-weight: 400; font-size: 16px; } .pricing-table li, .pricing-table-2 li { padding: 10px 0; border-bottom: 1px #e4e4e4 solid; font-size: 14px; } .pricing-table .price span, .pricing-table-2 .price span { font-weight: 400; font-size: 26px; } .pricing-footer { padding-top: 20px !important; border-bottom: 0 !important; } /* Pricing tables style 2 */ .pricing-table-2 { z-index: 2; margin-right: -15px; margin-left: -15px; padding: 0 0 20px; } .pricing-table-2 .dark-bg { position: relative; overflow: hidden; padding: 30px 0; background-color: #373737; } .pricing-table-2 .head { margin-bottom: 20px; } .pricing-table-2 i.fa { position: absolute; left: 50%; font-size: 26px; width: 90px; height: 84px; z-index: 9999; text-align: center; line-height: 23px; margin-left: -45px; margin-bottom: -48px; bottom: 0; padding: 10px 25px 39px; border-radius: 50%; background: #fff; } .pricing-table-2 li.even { background: #f3f3f3; } .pricing-table-2.selected { position: relative; z-index: 66 !important; background: #494949; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .pricing-table-2.selected li.even { background: #373737; } .pricing-table-2.selected li { border-color: #585858; color: #949494; } .pricing-table-2.selected i.fa { background: #494949; } .highInd { z-index: 99 !important; } /* ---- 8.4. Team styles -------------- */ .team-boxes [class*="cell-"] { margin: 0 0 30px; } .team-box { -moz-perspective: 1700px; -ms-perspective: 1700px; -webkit-perspective: 1700px; -moz-perspective-origin: 0 50%; -ms-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50%; perspective: 1700px; position: relative; padding: 0 0 8px; background-color: #f4f4f4; } .team-img { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .team-img img { width: 100%; height: auto; } .team-box .team-details { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 2px; left: 0; overflow: hidden; padding: 10px; width: 100%; height: 100%; border-left: 5px #333 solid; opacity: 0; -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; -o-transition: transform 0.4s, opacity 0.1s 0.3s; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .team-box h3 { padding: 7px 0 !important; text-align: center; font-size: 14px; text-transform: none; margin: -5px !important; } .team-img h3 { overflow: hidden; margin: 0; padding-bottom: 0; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .team-box:hover .team-img { opacity: .3; } .team-box:hover .team-details { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); -moz-transition: -moz-transform 0.4s, opacity 0.1s; -o-transition: transform 0.4s, opacity 0.1s; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } .team-box:hover .team-details .gry-bg { color: #666; } .team-box:after, .team-box-2:after { position: absolute; bottom: -2px; left: 0; display: block; width: 100%; height: 1px; content: ""; } .team-socials { position: relative; z-index: 99999; } .team-socials ul { display: table; overflow: hidden; margin: auto; padding: 0; } .team-socials li { float: left; margin: 6px 3px; } .team-socials a { padding: 5px 10px; color: #fff; font-size: 17px; } .team-details p { margin-bottom: 5px; font-size: 12px; line-height: 130%; } .team-details h3 { margin: 0; padding: 13px 0 0 5px; } .t-position { padding: 10px 0; color: #ababab; text-align: center; font-size: 11px; } .team-box .t-position { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: table; margin: 15px auto 10px; padding: 5px !important; color: #fff !important; font-size: 12px; -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg); } .team-box .team-details p { padding: 10px; color: #fff; font-size: 12px; max-height: 100px; overflow: hidden; height: 100px; } .team-box .team-socials li a { padding: 3px 10px; } .team-box:hover:after, .team-box-2:hover:after { height: 1px; } /**** Team style 2 ****/ .team-box-2 { position: relative; margin-top: 60px; padding: 45px 11px 5px; background-color: #f4f4f4; text-align: center; } .team-box-2:before { position: absolute; top: -20px; right: 14px; color: #999; content: "\f030"; font-size: 168px; font-family: FontAwesome; opacity: .1; -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .team-box-2 .team-img { position: absolute; top: 0; margin-top: -45px; margin-left: -45px; left: 50%; padding: 2px; width: 90px; height: 90px; border: 1px #e4e4e4 solid; background: transparent; } .team-boxes-2 .cell-3:hover .team-box-2:before,.team-boxes-2 .cell-3:hover .team-socials li a { color: #fff; } .team-boxes-2 .cell-3:hover .team-details h3, .team-boxes-2 .cell-3:hover .team-details .t-position { color: #fff !important; } .team-box-2 .team-details { position: relative; z-index: 9999; margin-top: 25px; background: transparent; } .team-box-2 .team-details h3 { margin: 0 0 5px; padding: 8px 0; } .team-boxes-2 [class*="cell-"] { margin: 0 0 30px !important; } .team-box-2 .team-socials a { display: block; padding: 5px 10px; } .team-box-2 p{ border-bottom: 1px #e4e4e4 solid; padding-bottom:15px } .team-box-2 .t-position { margin-bottom: 10px; padding-top: 0; padding-bottom: 15px; border-bottom: 1px #e4e4e4 solid; } /* -------- 8.5. Blog ------------------ */ .post-item { padding-right: inherit; padding-bottom: 20px; margin-bottom: 50px; } .post-content{ overflow:hidden } .post-image { position: relative; } .post-video:hover .post-lft-info{ display:none } .no-bar .blog-posts .post-image { max-height: 340px; } .post-image a .mask { position: absolute; width: 100%; height: 100%; border-right: 0; border-left: 0; opacity: 0; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-image a:hover .mask { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .post-image a .mask:before { position: absolute; top: 50%; left: 50%; display: inline-block; color: #fff; content: "\f0c1"; font-weight: normal; font-size: 30px; font-family: FontAwesome; width:40px; height:40px; margin-left:-20px; margin-top:-20px } .details-img a .mask:before { content: "\f00e"; } .details-img{ position:relative } .details-img:after,.post-image:after{ top: 0; height: 6px; display:inline-block; content:""; width:100%; position:absolute; left:0 } .post-item p{ margin-bottom:0 } .details-img .post-lft-info,.post-image .post-lft-info{ position: absolute; left:15px; top: 0px; min-height:inherit; z-index:999 } .post-lft-info { float: left; margin-right: 20px; min-height: 150px; } .post-lft-info div { position: relative; padding: 10px 25px 15px; text-align: center; text-transform: uppercase; font-size: 14px; } .tri-col { position: absolute; bottom: -20px; left: 0; z-index: 4; width: 0; height: 0; border-width: 20px 40px 0 40px; border-style: solid; } .post-info h2 { margin: 20px 0; text-transform: none; font-weight: normal; } .post-item .post-day, .post-item .post-year { display: inline-block; } .post-info .post-meta { overflow: hidden; margin-bottom: -5px; padding-bottom: 3px; border-bottom: 1px #eaeaea solid; text-transform: uppercase; font-size: 11px; } .post-info .post-meta li { float: left; margin: 0 15px 0 0; color: #A8A8A8; } .post-info .post-meta li i { margin-right: 7px; color: #c7c7c7; font-size: 14px; } .post-info .post-meta li a{ color:#777 } .post-content p { margin-top: 20px; } .post-info-container h1 { margin: 20px 0; font-size: 27px; font-weight: normal; } .post-tags{ padding: 20px 0; } .post-tags span{ margin:0 10px 0 5px; display:inline-block } /* blog masonry style */ .masonry .meta-tags { display: none; } .masonry .post-image { background: #eee; max-height: 178px; } .masonry.nobar .post-image { max-height: 164px; } .masonry .post-item{ margin-bottom:30px } .masonry .post-info h2 { overflow: hidden; height: 25px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; margin: 30px 0 15px; } .masonry .post-content p { overflow: hidden; max-height: 60px; font-size: 13px; } .masonry .pager { clear: both; } .masonry.nobar .post-content p { max-height: 90px; } /*** blog-thumbs ***/ .blog-thumbs .post-image { float: left; margin-right: 10px; max-height: 177px; margin-bottom:0px } .blog-thumbs.no-bar .post-image { max-height: 177px; } .blog-thumbs .post-item { float: none; clear: both; overflow: hidden; } .blog-thumbs .post-info h2 { margin-top: 0; } .blog-thumbs .post-content{ padding-left:15px } .share-post { overflow: hidden; padding: 0 10px; background: #eee; } .share-post .sh{ float: left; display: block; padding: 0 15px; font-weight: bold; font-size: 13px; line-height:45px } .share-post > div{ float:left; height:45px } .share-post button{ margin:0; border:0; padding:0 15px; line-height:45px; font-size:16px; float:left } .share-post .facebook{ background:#1b57a1; color:#fff } .share-post .twitter{ background:#0cbce2; color:#fff } .share-post .googleplus{ background:#dd4b39; color:#fff } .share-post .linkedin{ background:#1583ba; color:#fff } .share-post .pinterest{ background:#bd2126; color:#fff } .share-post .xing{ background:#006464; color:#fff } /*** comments ***/ .comment-list { margin-bottom: 60px; padding: 0 15px; } .comment { position: relative; } .comment-avatar { position: absolute; top: 15px; left: 25px; z-index: 6; margin: 0 20px 0 0; padding: 2px; width: 70px; height: 70px; border: 2px #f6f6f6 solid; background: #fff; } .comment-content { margin-bottom: 20px; } .comment-content p { padding: 5px 0 5px 115px; } .comment-author { overflow: hidden; margin-bottom: 10px; background: #eee; font-weight: normal; } ul.child-comment { margin-left: 90px; } ul.child-comment li { position: relative; } ul.child-comment li:before { position: absolute; top: 17px; left: -37px; display: inline-block; width: 50px; height: 1px; background: #eee; content: ""; } ul.child-comment li:after { position: absolute; top: -101%; left: -37px; display: inline-block; width: 1px; height: 117%; background: #eee; content: ""; } .comments .hint .main-color { display: inline-block; padding: 5px; background: #eee; font-size: 150%; } .author-name { display: inline-block; margin-left: 100px; padding: 10px 0 0 15px; font-weight: bold; } .comment-date { float: right; padding: 11px 20px 0 0; } .comment-reply { float: right; padding: 10px 15px; font-size: 12px; } .comment-reply span { display: block; } .comment-reply i { margin-right: 5px; color: #fff; } .leave-comment { padding-bottom: 30px; } .leave-comment .txt-box { width: 31.4%; } .leave-comment textarea { width: 100% !important; } /* -------- 8.6. Contact page ------------------ */ .contact-detalis h4 { text-transform: none; font-size: 17px; } .contact-detalis h5 { margin-bottom: 0; text-transform: none; font-size: 15px; } .contact-detalis p { margin-top: 0; padding-bottom: 0; } .form-input { overflow: hidden; margin: 0 0 20px 0; width: 100%; } .form-input label { display: block; clear: both; overflow: hidden; margin: 0px 0 5px; width: 100%; } .form-buttons .btn { margin-right: 5px; } .contact-form span.red { display: inline-block; margin-left: 5px; } .contact-form input[type=text], .contact-form input[type=password], .contact-form input[type=email], .contact-form textarea, .contact-form input[type=file] { display: inline-block; float: left; padding: 12px 15px; width: 100%; border: 0; border: 1px #DFDFDF solid; background: #fff; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .contact-form select { display: inline-block; float: left; padding: 10px 15px; width: 100%; border: 0; border: 1px #DFDFDF solid; background: #fff; line-height: 35px; } .contact-form input[type=radio], .contact-form input[type=checkbox] { position: relative; top: 2px; margin: 0 5px 0 0; } .form-box { display: inline-block; float: left; line-height: 34px; } .form-box span{ display:inline-block; margin-right:15px } .contact-form textarea { clear: both; width: 100%; height: 180px; resize: none; } .small-txt-box { padding: 0px !important; } .small-txt-box input[type=text] { width: 100px !important; } .btns-right { padding: 0 !important; text-align: right; } #error_msg { display: none; } #error_msg ul { margin: 10px 0 0 20px; } #error_msg ul li { margin-left: 10px; padding: 4px 0; color: #000; list-style-type: square !important; } .small-select { margin-right: 15px; padding: 10px !important; width: auto !important; } #message { display: block; margin: 15px 0; padding: 13px; background: transparent; text-align: center; } .cform{ position:relative } img.loader{ position:absolute; bottom: 15px; left: 32%; } #contact input.error, #contact textarea.error, #contact select.error { border: 1px solid #faabab; background: transparent; } /* ---- 8.7. Site map Page -------------- */ .siteMap-nav ul li { margin: 5px 0; } .siteMap-nav > ul > li > a { display: block; padding: 10px; background: #f1f1f1; color: #333; text-transform: uppercase; font-weight: bold; font-size: 15px; } .siteMap-nav > ul > li > a i { margin-right: 8px; color: #999; } .siteMap-nav ul ul { margin: 10px 20px; } .siteMap-nav ul ul li { padding: 5px 10px; border-bottom: 1px #f1f1f1 dashed; } .siteMap-nav ul ul li a:before { display: inline-block; margin-right: 7px; color: #5b5b5b; content: "\f105"; font-family: FontAwesome; } .siteMap-nav ul ul li a:hover { margin-left: 10px; } .siteMap-nav ul ul li:last-child{ border-bottom:0px } /* ---- 8.8. 404 Page -------------- */ .not-found { display: table; margin: auto; width: 65%; text-align: center; } .err-404 { position: relative; margin-top: 40px; color: #494949; font-weight: 800; font-size: 150px; line-height: 1; } .err-404:before { position: absolute; top: -33px; left: 46.5%; color: #f0f0f0; content: "\f119"; font-weight: normal; font-size: 60px; font-family: FontAwesome; } /* ---- 8.9. Shop pages -------------- */ .item-box { position: relative; margin-bottom: 30px; background-color: #f4f4f4; cursor: pointer; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-box:after { position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; content: ""; } .item-box:hover:after { bottom: -1px; height: 1px; } .item-title { margin: 0; padding: 10px 0; background: #ebebeb; color: #666; text-align: center; font-size: 14px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-title a { color: #666; } .item-img { padding: 10px; text-align: center; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; position:relative } .item-details { overflow: hidden; padding: 10px 0 0; border-top: 1px #dfdfdf solid; } .item-details p{ padding:0 10px } .item-price { padding: 5px 25px; font-size: 20px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-rating { padding-bottom: 3px; } .item-details .item-rating { text-align: center; } .item-rating .fa { margin-right: 4px; color: #ffc000; font-size: 15px; } .item-rating .fa-star-o { color: #c0c0c0; } .right-rating { float: right; clear: both; font-size: 14px; font-weight: bold; } .right-rating .item-rating { float: right; } .item-details .left { padding-left: 10px; } .item-cart { padding: 0 0 6px 0; border-bottom: 1px #dfdfdf solid; } .item-cart a { color: #333; text-transform: uppercase; font-size: 11px; } .remove-item i { font-size: 23px; } .item-details .left i.fa { margin-right: 8px; } .item-tools { padding-top: 8px; } .item-tools i { font-size: 17px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-box:hover { background: #F0F0F0; } .item-box:hover .item-img { opacity: 0.5; } .sale{ position: absolute; right: 5px; top: 15px; width: 40px; height: 30px; line-height: 30px; text-align: center; font-size:11px; z-index: 99999; } .sale:before{ position: absolute; top: 0; left: -10px; z-index: 5; width: 0; height: 0; border-style: solid; border-width: 15px 10px 15px 0; content: ""; display: inline-block; } .toolsBar { display: table; margin: 0 0 10px 0; padding: 10px; width: 100%; background: #F5F5F5; text-transform: uppercase; } .toolsBar span { display: inline-block; margin: 0 5px 0 0; } .toolsBar select { margin-right: 10px; background: #fff; } .order-asc i.fa { margin-top: 7px; font-size: 20px; } .products-filter-top { float: left !important; clear: none !important; width: auto !important; } .list-grid { float: right !important; clear: none !important; width: auto !important; } .list-grid a { position: relative; float: right; margin: 0 0 0 4px; padding: 8px 13px; background: #EBEBEB; font-size: 14px; } .list-grid a.selected:after { position: absolute; bottom: -6px; left: 30%; z-index: 5; width: 0; height: 0; border-width: 8px 8px 0 8px; border-style: solid; content: ""; } .shop-item { } .shop-item p { overflow: hidden; padding: 5px 10px; max-height: 50px; } .grid-list.list .shop-item { float: none; clear: both; width: 100%; } .grid-list.list .shop-item p { overflow: visible; min-height: 115px; max-height: 150px; } .grid-list.list .item-img { float: left; margin-right: 20px; max-height: 200px; } .grid-list.list .item-img img { max-height: 200px; } .control-group .box i.fa { margin-right: 7px; color: #333; } .similar-products .item-img img { max-height: 200px; } .grid-list.list .item-box { overflow: hidden; background: transparent; } .grid-list.list .item-title { padding-left: 25px; border: 0; text-align: left; } .grid-list.list .item-box:hover .item-img { -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } .grid-list.list .item-box:hover { border-bottom-width: 3px; } .grid-list.list .item-box:hover .item-title { border: 0; } .grid-list.list .item-details { border: 0; } .left-shop .control-group select { width: 100%; } .left-shop .control-group label.checkbox { display: block; clear: both; padding: 10px; } .left-shop .control-group label.checkbox input[type=checkbox], .left-shop .control-group label.checkbox input[type=radio] { display: inline; margin-right: 8px; vertical-align: middle; } .left-shop .accordion-panel { margin: 0; padding: 0; border: 0; } .left-shop .accordion li > h3 a { border: 0; font-weight: bold; } .left-shop .accordion li > h3 u, .left-shop .accordion li > h3 u:before { -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } .left-shop .accordion li > h3 u { margin: 0; border: 0; background: #EBEBEB; } .steps { margin-bottom: 30px; padding: 0 15px 0 0; } .steps ul { display: table; width: 100%; } .steps li { display: table-cell; width: 15.5%; background: #E9E9E9; } .continue-btn { margin: 30px 15px 0; height: 43px; background: #E9E9E9; } .continue-btn .btn { position: relative; height: 43px; } .continue-btn .btn.right:after { position: absolute; top: 50%; left: 100%; z-index: 3; display: inline-block; margin-top: -22px; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 21px solid transparent; content: ""; } .continue-btn .btn.left:after { position: absolute; top: 50%; right: 100%; z-index: 3; display: inline-block; margin-top: -22px; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 21px solid transparent; content: ""; } .steps li span { position: relative; display: block; padding: 20px 20px 20px 35px; text-align: center; text-decoration: none; font-size: 15px; font-weight: bold; } .steps li span:after { position: absolute; top: 50%; left: 100%; z-index: 3; display: inline-block; margin-top: -30px; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 16px solid #E9E9E9; content: ""; } .steps li span:before { position: absolute; top: 50%; left: 100%; z-index: 2; display: inline-block; margin-top: -30px; margin-left: 1px; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 16px solid #fff; content: ""; } .product-img { position: relative; border: 1px #ddd solid; text-align: center; } .thumbs { border-top: 1px #ddd solid; } .product-img > img { display: table; margin: auto; } .product-img ul { display: table; margin: 15px auto; } .product-img li { display: table-cell; margin: 0 5px 0 0; } .product-img li img { width: 60px; } .product-specs a.btn, .item-avl > div { margin-right: 6px; margin-bottom: 0; } .product-specs a.btn { padding-right: 20px; padding-left: 20px; background-color:transparent; border:1px #ddd solid; color:#777 } .product-specs a.btn:hover { border: 1px #ccc solid !important; background: #E4E4E4; color: #333; } .product-price { font-size: 29px; font-weight:bold; line-height: 1; } .old-price{ color:#c4c3c3; text-decoration:line-through; font-size: 20px; margin: 0 0 0 10px; } .price-block { display: table; clear: both; margin: 0; padding: 0 0 20px; width: 100%; border-bottom: 1px #E9E9E9 solid; } .price-box{ padding-bottom: 10px; } .pro-btns{ margin: 5px 0 0 15px; } .item-avl > div { padding: 10px; font-weight: bold; } .item-avl .success-box,.item-avl .warning-box,.item-avl .error-box{ border-radius: 50%; padding: 0; width: 25px; height: 25px; text-align: center; line-height: 25px; } .item-avl span{ line-height:25px } .item-avl i{ color:#fff !important; margin:0 !important } .product-block{ padding: 15px 0; border-bottom: 1px #E9E9E9 solid; } .last-list{ padding-top: 15px !important } .last-list p{ margin-bottom:0px } .reviews .comments { padding-top: 30px; } .reviews .author-name { margin-left: 0px; padding: 15px; } .reviews .comment-date { padding: 15px 30px 0 0; } .reviews .comment-content p { padding: 15px; } .item-add { clear: both; overflow: hidden; } #items-num { margin: 0 5px 0 0; padding: 10px 0; width: 50px; border: 1px #dfdfdf solid; text-align: center; font-size: 16px; } .item-add .btn { /* margin-top: 10px; */ } .add-items i.fa { /* margin-top: 10px; */ padding: 0 8px; height: 44px; border: 1px transparent solid; background: #ddd; font-size: 10px; line-height: 46px; } .add-items i.fa:hover { border: 1px #ddd solid; background: #fff; } .qty-txt-box { width: 70px; text-align: center; } .qty-txt-box i { font-size: 14px; margin-left: 5px; cursor: pointer; } .qty-txt-box input[type=text] { width: 30px; border: 1px #ddd solid; text-align: center; padding: 5px 10px; } .cart-icon { position: relative; float: right; margin: 0 0 0 auto; z-index: 9; } .cart-heading { padding: 10px; cursor: pointer; } .cart-heading i { margin-right: 10px; font-size: 16px; } .cart-popup { position: absolute; display: none; padding: 20px; background: #F5F5F5; min-width: 350px; min-height: 200px; right: 0; border-width: 6px; border-style:solid } .cart-popup .empty { line-height: 160px; text-align: center; color:#f00 } .mini-cart-list li { position: relative; overflow: hidden; border-bottom: 1px solid #E7E7E7; padding-bottom: 15px; margin-bottom: 15px; } .cart-mini-lft { float: left; margin-right: 8px; } .cart-mini-lft img { width: 40px; border: 1px #fff solid; padding: 2px; } .mini-cart-list a.remove { position: absolute; right: 5px; top: 0; } .mini-cart-list a.remove i { font-size: 130%; color: #bababa; } .mini-cart-list a.remove:hover i { color: #000; } .mini-cart-total { padding: 0 10px 20px 10px; font-weight: 400; color: #444; border-bottom: 1px solid #E7E7E7; } .mini-cart .checkout { text-align: center; padding-top: 20px; } .mini-cart .checkout a { margin: 0 5px; height: 35px; display: inline-block; line-height: 33px; background: #fff; color: #000; border: 1px solid #e1e1e1; padding: 0 20px; text-transform: none; } .mini-cart .checkout a:hover { background: #6c6c6c; color: #fff; border-color: #6c6c6c; } .cart-body .price{ color:#777 } .shop-bottom-btns{ padding-top:30px } /* ========================================================================== 9. PAGE TITLES. ============================================================================= */ /* ---- 9.1. Page title 1 -------------- */ .page-title h1 { font-weight: bold; font-size: 35px; } .page-title h1 span { color: #777; } .page-title .cell-4 img { margin-top: 10px; } .title-1 { background: #fff url('../images/page-titles/Page-title-1.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-1 h1 { margin-top: 30px; margin-bottom: 30px; } .empty-title { padding-bottom: 50px; } /* ---- 9.2. Page title 2 -------------- */ .title-2 { background: #fff url('../images/page-titles/Page-title-1.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-2 h1 { margin-top: 30px; margin-bottom: 5px; float: left; text-transform: uppercase; } .title-2 p { margin: 0; padding: 10px 0 30px; width: 75%; font-size: 20px; line-height: 120%; } .title-2 .breadcrumbs { margin-top: 115px; } .title-2 .breadcrumbs span { color: #333; } .title-2 h1 span { display: block; } .title-2 i { float: left; margin-top: 36px; margin-right: 10px; padding: 7px; font-size: 60px; } /* ---- 9.3. Page title 3 -------------- */ .title-3 { background: url('../images/page-titles/Page-title-3.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-3 h1 { float: left; margin-top: 30px; margin-bottom: 5px; color: #fff; text-transform: uppercase; } .title-3 p { margin: 0; padding: 10px 0 30px; width: 75%; font-size: 20px; line-height: 120%; } .title-3 .breadcrumbs { margin-top: 115px; background: #fff; } .title-3 .breadcrumbs span { color: #333; } .title-3 h1 span { display: block; color:#fff } .title-3 i { float: left; margin-top: 36px; margin-right: 10px; padding: 7px; background: #2f2f2f; color: #fff; font-size: 60px; } /* ---- 9.4. Page title 4 -------------- */ .title-4 { background: #41a1b7 url('../images/page-titles/Page-title-1.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-4 h1 { display: inline-block; float: left; clear: both; margin-top: 30px; margin-bottom: 5px; padding: 2px 15px; color: #fff; text-transform: uppercase; } .title-4-desc { display: inline-block; float: left; clear: both; margin: 0; padding: 10px 15px; font-size: 20px; font-size: 15px; line-height: 120%; background:#777; color:#fff } .title-4-desc span { display: block; } .title-4 .breadcrumbs { margin-top: 115px; background: #fff; } .title-4 .breadcrumbs span { color: #333; } .title-4 h1 span { display: block; color: #fff !important; font-size: 20px; } /* ========================================================================== 10. WIDGETS. ============================================================================= */ .widget { padding-bottom: 40px; color: #b2b2b2; } .widget h4 { overflow: hidden; margin-bottom: 8px; height: 18px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size:13px } .widget-head { position: relative; margin-bottom: 0; padding: 0 0 20px; border-bottom: 1px #ddd solid; font-weight:bold; text-transform:capitalize; font-size:17px; line-height:17px } .widget-head:before{ position: absolute; bottom: -3px; left: 20px; width: 35px; height: 5px; content: ""; display:inline-block; } .widget-head:after{ position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; content: ""; display:inline-block; } .widget-content{ border: 1px #ddd solid; border-top: 0px; padding:10px; overflow:hidden } .widget-content a{ color: #666; } /******* Search widget *******/ .search-w form { overflow: hidden; padding: 5px 0 3px; margin:0 -10px } .search-w .txt-box { width: 80%; font-size: 11px; } .search-w .btn i{ margin:0 !important } /******* recent posts widget *******/ .r-posts-w > ul > li, .blog-cat-w ul li, .r-comments-w ul li { overflow: hidden; padding: 10px 0; border-top: 1px #f0f0f0 solid; } .r-posts-w > ul > li:first-child, .blog-cat-w ul li:first-child, .r-comments-w ul li:first-child { border-top: 0px; } .r-posts-w .post-img { float: left; margin-right: 10px; max-height: 70px; overflow:hidden } .r-posts-w .post-img img { padding: 1px; width: 70px; /*height: 70px;*/ border: 1px #f0f0f0 solid; } .r-posts-w .meta span { display: inline-block; margin-right: 10px; } .r-posts-w .meta i { margin: 0 5px 0 0; } .widget-content li{ overflow:hidden } .r-posts-w li{ border-top:1px #eee solid; padding:10px 0 } .r-posts-w li:first-child{ border-top:0px } .sale-widget .meta span{ margin-right:2px !important } .widget-content .accordion{ margin:10px auto } .blog-cat-w li span{ float:right } /******* recent comments widget *******/ .r-comments-w i.fa { margin-right: 10px; color: #777; font-size: 60px; } .r-comments-w i.fa.fa-clock-o { font-size: 16px; } .r-comments-w h5 { margin: 10px 0 5px; text-transform: none; font-weight: normal; } /******* Tag cloud widget *******/ .tags-w { overflow: hidden; } .tags-w .tags a { display: block; float: left; margin: 3px; padding: 8px; background: #eee; color: #616161; font-size: 11px; } .tags-w .tags a:hover { background: #777; color: #fff; } /******* Flickr stream widget *******/ .widget.flickr-stream-w ul, .widget-content .tags { margin: 6px 0; overflow: hidden; } .flickr-stream-w ul li { position: relative; float: left; margin: 0 1px 1px 0; } .flickr-stream-w ul li a{ height: 78px; display:block; } .flickr-stream-w ul li img { width: 78px; height: 78px; } .flickr-stream-w .img-overlay { position: absolute; top: 0; left: 0; width: 78px; height: 78px; opacity: 0; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flickr-stream-w .img-overlay:before { display: block; color: #fff; content: "\f0c1"; text-align: center; font-size: 25px; font-family: FontAwesome; line-height: 80px; } .flickr-stream-w ul li:hover .img-overlay { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } /********************************************* Custom slider options **********************************************/ .tp-banner-container { position: relative; z-index: 1; padding: 0; width: 100%; } .tp-banner { position: relative; width: 100%; } .tp-caption { line-height:normal !important } .tp-caption a { color: inherit !important; } .tp-bullets.simplebullets.round .bullet { border: 3px #fff solid; border-radius: 50%; background-image: none !important; } .tparrows { width: auto !important; height: auto !important; background-image: none !important; } .tp-arr-allwrapper { margin: 0 10px; width: 50px; height: 60px; background: #fff; } .tp-arr-allwrapper:hover .tp-arr-iwrapper { color: #fff; } .tp-leftarrow .tp-arr-allwrapper { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .tp-rightarrow .tp-arr-allwrapper { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); } .tp-arr-iwrapper { color: #a0a0a0; text-align: center; font-size: 30px; font-family: FontAwesome; line-height: 60px; } .tp-leftarrow .tp-arr-iwrapper { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); } .tp-leftarrow .tp-arr-iwrapper:before { content: "\f104"; } .tp-rightarrow .tp-arr-iwrapper:before { content: "\f105"; } .tp-rightarrow .tp-arr-iwrapper { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .slide-h1 { margin: 5px 0 !important; padding: 0 0 10px !important; padding-bottom: 5px !important; color: #444; text-transform: uppercase; font-weight: bold; font-size: 57px; } .slide-h2 { margin: 5px 0 !important; padding: 0 0 10px !important; padding-bottom: 5px !important; color: #555; font-weight: bold; font-size: 55px; line-height: 100%; } .big-font { text-transform: uppercase; font-weight: 800; font-size: 60px; } .large-desc { font-size: 16px; } .slide-h3 { color: #fff; font-size: 31px; line-height: 100%; } .slide-h3 span { text-transform: uppercase; font-weight: bold; } .slide-head { text-transform: uppercase; font-weight: 900; font-size: 30px; } .slide-desc { font-size: 22px; line-height: 150%; } .main-title { text-transform: uppercase; font-weight: 800; font-size: 70px; } .icon-cont { padding: 15px 40px; border-radius: 10px; text-align: center; } .icon-cont:after { position: absolute; bottom: -10px; left: 40%; z-index: 5; display: inline-block; width: 0; height: 0; border-width: 10px 10px 0 10px; border-style: solid; content: ""; } .icon-cont i { margin-bottom: 10px; color: #fff; font-size: 50px; } .icon-cont span { display: block; padding: 0 0 5px; color: #fff; text-align: center; font-size: 18px; } a.wit-btn { background: #fff; color: #333 !important; text-transform: uppercase; } .wit-line { width: 5%; height: 1px; background: #fff; } .vert-line { min-height: 270px; width: 1px; background: #fff; } .subTxt { text-transform: uppercase; font-weight: bold; font-size: 17px; color: #333; } .large-title { color: #222; font-size: 60px; font-weight: 800; text-transform: uppercase !important; } .large-light-title { color: #787878 !important; font-size: 70px; font-weight: lighter; text-transform: uppercase; letter-spacing:2px } .large-text { font-size: 20px; color: #000; font-weight: lighter; } .larger-text { font-size: 24px; font-weight: lighter; text-transform: uppercase; } .witTxt { color: #fff !important; } .light-font { font-weight: lighter !important; font-size: 50px; } .black-bg{ background:rgba(0,0,0,.63); color:#a8a8a8; text-transform:none; } .lft-list { padding: 10px; font-size: 18px; color: #fff; } .wit-border { border: 1px #fff solid; padding: 15px 60px; color: #fff; font-size: 16px; text-transform: uppercase; } .rounded-bord { margin-right: 15px; border: 1px #fff solid; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 13px; border-radius: 50%; } #vertical-ticker{ height:120px; overflow:hidden; } #vertical-ticker li{ padding:15px 20px; display:block; text-align:center; line-height:120px } .to-bottom i.fa{ font-size: 30px; border:2px #a8a8a8 solid; padding:20px 22px; border-radius:50%; -webkit-animation: bounce 2s infinite linear; animation: bounce 2s infinite linear; } @-webkit-keyframes bounce { 0% { transform:translateY(0%); } 50% { transform:translateY(-30%); } 100% { transform:translateY(0); } } /* Mozilla Firefox 15 below */ @-moz-keyframes bounce { 0% { transform:translateY(0%); } 50% { transform:translateY(-30%); } 100% { transform:translateY(0); } } /* Opera 12.0 */ @-o-keyframes bounce { 0% { transform:translateY(0%); } 50% { transform:translateY(-30%); } 100% { transform:translateY(0); } } /* W3, Opera 12+, Firefox 16+ */ @keyframes bounce { 0% { transform:translateY(0%); } 50% { transform:translateY(-30%); } 100% { transform:translateY(0); } } /* ========================================================================== 11. FOOTER. ============================================================================= */ /* ---- 11.1. footer Style 1 -------------- */ #to-top { position: fixed; right: 10px; bottom: -100px; z-index: 55; overflow: auto; padding: 12px 14px 14px; font-size: 18px; line-height: 10px; cursor: pointer; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } #footWrapper { clear: both; overflow: hidden; height: 100%; } .footer-top { overflow: hidden; padding: 60px 0 50px; border-bottom: 1px #0f0f0f solid; background: #222; color: #aaa; } .footer-top a { color: #9E9E9E; } .footer-top a.btn { color: #fff; } .footer-top hr { clear: both; margin: 50px 15px; border-top: 1px #3A3A3A solid; } .footer-top h3 { position: relative; font-weight: bold; font-size: 15px; } .footer-top hr.hr-style5:before, .footer-top hr.hr-style5:after { background: #222; color: #3A3A3A; } /* ---- 11.2. footer Style 2 -------------- */ .footer-top-2 { border-top-width: 5px; border-top-style:solid; } .footer-top-2 .foot-logo { border-bottom: 1px solid #3a3a3a; height: 52px; margin: -8px auto 9px; text-align: center; } .footer-top-2 .social-list li a { margin: 0 6px 0 0; font-size: 17px; background: #494949; border-radius: 50%; width: 33px; text-align: center; display: inline-block; } .footer-top-2 .social-list li span { padding: 0 7px; color: #B5B5B5 } .footer-top-2 .social-list li:hover span { color: #fff } .footer-menu-inline { float: right; padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .footer-menu-inline li { display: inline-block; margin: 0 5px; } .footer-menu-inline li a { color: #777; transition:all linear 300ms; } .footer-menu-inline li a:hover,.footer-menu-center li a:hover { padding-bottom: 4px; } /* ---- 11.3. footer Style 3 -------------- */ .footer-bar { background: #000; font-size: 11px; padding-top:30px; padding-bottom: 10px } .footer-bar-3 p { font-size: 20px; line-height: 40px; color: #B0B0B0; text-transform: none; } .footer-bar-3 a { color: #fff; position: relative; display: inline-block; vertical-align: bottom; text-transform: uppercase; overflow: hidden; } .footer-bar-3 a span { position: relative; display: block; font-size: 20px; padding:0 7px; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: -50% 50%; -moz-transform-origin: -50% 50%; transform-origin: -50% 50%; text-align:center } .footer-bar-3 a span::before { position: absolute; top: 0; left:100%; width: 100%; height: 100%; content: attr(data-view); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: -50% 50%; -moz-transform-origin: -50% 50%; transform-origin:-50% 50% ; pointer-events: none; } .footer-bar-3 a:hover span,.footer-bar-3 a:focus span { background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); } .footer-bar-3 .buyNow { border-left: 1px solid #322F2F; margin-top: -5px; } .footer-bar-3 .buyNow a { font-size: 20px; font-weight:800 } .copyrights-center { text-align:center; } .footer-menu-center { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .footer-menu-center li { display: inline-block; margin: 0 5px; } .footer-menu-center li a { color: #777; transition:all linear 300ms; } .recent-posts-footer li { margin-bottom: 5px; padding: 6px 5px; border-bottom: 1px dotted #323232; overflow: hidden; } .recent-posts-footer li .post-img { float: left; margin-right: 10px; max-height: 70px; overflow: hidden; } .recent-posts-footer li .post-img img { padding: 1px; width: 40px; } .recent-posts-footer li h4 { overflow: hidden; margin-bottom: 3px; height: 18px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .recent-posts-footer li .meta span { display: inline-block; margin-right: 10px; } .recent-posts-footer li .meta i{ margin: 0 5px 0 0; } /* ---- 11.4. footer Style 4 -------------- */ .footer-top-4 { background: #424242 url('../images/patterns/bg16.png'); } .footer-top-4 p,.footer-top-4 ul.footer-menu a,.footer-top.footer-top-4 .footer-menu a:before{ color:#ccc } .footer-top-4 ul.footer-menu a:hover,.footer-top.footer-top-4 .footer-menu a:hover:before{ color:#fff } .footer-top-4 .foot-logo { height: 52px; text-align: center; } .footer-top-4 .copyrights,.footer-top-4 .footer-menu-inline{ background:#1d1d1d; padding-right:15px; padding-left:15px } .footer-top-4 hr{ border-top: 1px #1d1d1d solid; } .footer-top-4 .foot-logo{ background-position:0 0 } /******** footer menu ********/ .footer-top .footer-menu a { display: inline-block; padding: 7px 0; } .footer-top .footer-menu a:before { display: inline-block; margin-right: 7px; color: #5b5b5b; content: "\f105"; font-family: FontAwesome; } /******* Footer NewsLetters *******/ .foot-logo { height: 40px; margin: 0 auto 5px; text-align: center; } footer .NL { position: relative; overflow: hidden; padding: 10px 0; margin:auto 15px } footer .NL .input-box { margin-left: 10px; padding-left: 25px; width: 67%; border: 1px #3F3F3F solid; border-right: 0px; background: transparent none; color: #fff; font-size: 11px; } footer .NL .txt-box { color: #969696; font-size:11px } footer .NL:before { position: absolute; top: 16px; left: 24px; display: inline-block; color: #5C5C5C; content: "\f0e0"; font-family: FontAwesome; } footer .NL .NL-btn { background: #3F3F3F; color: #fff; } footer .NL .Notfication { display: none } footer .NL .Notfication p { color: #333; padding: 0 7px; font-size: 12px; width: 89%; line-height: normal; margin-top: -28px; display: inline-block; vertical-align: top; } footer .NL .Notfication .close-box { color: #333; } footer .no-margin{ margin: 20px 20px 8px; text-align: center; font-size: 12px; } /******* footer Latest tweets *******/ .footer-top .tweet { position: relative; overflow:hidden } .footer-top .tweet .twitter-pic { float:left; margin:3px 10px 0 0; } .footer-top .tweet .twitter-text{ width:80%; float:left; } .footer-top .tweet p { margin: 0 0 5px; font-size: 12px; line-height:18px } /******* footer tags *******/ .footer-top .tags a { display: block; float: left; margin: 3px; padding: 8px 6px; background: #2C2C2C; color: #C4C4C4; font-size: 11px; } /******* footer tags *******/ .footer-contact { padding: 7px 0; } .footer-contact i { display: table-cell; padding: 0 12px 0 0; color: #6a6a6a; vertical-align: middle; font-size: 18px; } .footer-contact span { display: table-cell; } /******* Footer Flickr **********/ .footer-top .flickr-stream-w ul li a{ height:61px } .footer-top .flickr-stream-w ul li img, .footer-top .flickr-stream-w .img-overlay { width: 61px; height: 61px; } .footer-top .flickr-stream-w .img-overlay:before { font-size: 22px; line-height: 61px; height: 61px } .footer-top .flickr{ height:61px; display:block; overflow:hidden } /******* copyrights *******/ .copyrights { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .copyrights a { color: #7C7C7C; text-decoration: underline; } .copyrights a:hover { text-decoration: none; } .footer-bottom { overflow: auto; padding: 15px 0; border-top: 1px #363636 solid; background: #1D1D1D; } /******* footer social list *******/ .social-list li { float: left; margin: 0 1px 0 0; font-size: 18px; } .social-list li a { display: block; padding: 0; color: #737373; } .social-list li span { display: block; text-align: center; line-height: 33px; padding:0 12px } .social-list li a:hover { text-decoration: none; } .hover_links_effect li a { margin: 0 6px 0 0; font-size: 17px; background: #494949; border-radius: 50%; width: 33px; text-align: center; display: inline-block; color: #B5B5B5; overflow: hidden; } .hover_links_effect li span { padding: 0 7px; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .hover_links_effect li:hover span { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .footer-top-4 .hover_links_effect li a{ background:#1d1d1d } .top-bar .social-list li span { line-height: 39px; } /* ========================================================================== 12. FIXED LAYOUT STYLES. ============================================================================= */ .pageWrapper.fixedPage { position: relative; margin: auto; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } .bg1 { background: #fff url('../images/patterns/bg1.jpg'); } .bg2 { background: #fff url('../images/patterns/bg2.jpg'); } .bg3 { background: #fff url('../images/patterns/bg3.jpg'); } .bg4 { background: #fff url('../images/patterns/bg4.jpg'); } .bg5 { background: #fff url('../images/patterns/bg5.jpg'); } .bg6 { background: #fff url('../images/patterns/bg6.jpg'); } .bg7 { background: #fff url('../images/patterns/bg7.jpg'); } .bg8 { background: #fff url('../images/patterns/bg8.jpg'); } .bg9 { background: #fff url('../images/patterns/bg9.jpg'); } .bg10 { background: #fff url('../images/patterns/bg10.jpg'); } .bg11 { background: #fff url('../images/patterns/bg11.jpg'); } .bg12 { background: #fff url('../images/patterns/bg12.jpg'); } .bg13 { background: #fff url('../images/patterns/bg13.jpg'); } .bg14 { background: #fff url('../images/patterns/bg14.jpg'); } .bg15 { background: #fff url('../images/patterns/bg15.jpg'); } .bg11, .bg12, .bg13, .bg14, .bg15 { background-attachment: fixed !important; background-position: center bottom !important; -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; background-repeat: no-repeat !important; } a.main-color:hover,.project-name:hover,.box-top .more-btn:hover{ color:#333 !important } /************** Coming Soon Style **************/ #holder { margin: auto; display:table } .digits { margin:80px auto 0; display:table } .digits span{ padding:18px 30px; border-radius: 5px; display: block; text-align: center; position: relative; height: 120px; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; background:url('../images/digits.png') no-repeat 0 0; background-size:100% 100%; font-size:55px; font-weight:800; color:#fff } .digits li{ float:left; margin:0 10px; text-align:center; } .digits li p{ color:#fff; font-size:20px } .soon-top{ margin-top:80px } .large-paragraph{ font-size:27px; text-transform:uppercase; font-weight:lighter; margin:40px auto 0 !important; line-height:normal } .soon-subscribe{ font-size:22px; font-weight:lighter; margin:20px auto 30px !important; line-height:normal; text-align:center } .soon-inputs{ margin-bottom:80px } .soon-inputs input[type="text"]{ height:60px; padding:15px 20px; border:0px; background:#fff; min-width:400px } .soon-inputs input[type="submit"]{ height:60px; padding:15px 20px; border:0px; margin-top: -3px; } /************* video bg **********/ .video-container{ display:table; width:100% } .home-video .YTPOverlay{ display:none !important } .video-box{ display:table-cell; vertical-align:middle; width:100%; position: relative; height:600px } .YTPOverlay{ background:rgba(232,82,47,0.6); position:absolute; z-index:555; top:0; left:0; width:100%; height:100% } .inner-video{ position: absolute; z-index: 0; min-width: 100%; min-height: 100%; left: 0; top: 0; overflow: hidden; opacity: 1; height:600px } .internal-video{ height:600px; overflow:hidden; position:relative } .video-frame{ position: absolute; z-index: 0; top: 0; left: 0; overflow: hidden; opacity: 1; width: 2459.72px; height: 1171px; margin-top: -385.5px; margin-left: -278.36px; } .larg-socials{ display:table; margin:30px auto 0; } .larg-socials li{ float:left; margin:0 15px } .larg-socials li a{ width:66px; height:66px; display:block; line-height:66px; border:2px #E4E4E4 solid; border-radius:50%; position:relative; padding:2px } .larg-socials li a i{ width:58px; height:58px; display:block; line-height:58px; color:#fff; font-size:30px; text-align:center; border-radius: 50%; } .larg-socials li a:before { pointer-events: none; content: ''; position: absolute; border: #E4E4E4 solid 1px; top: -20px; right: -20px; bottom: -20px; left: -20px; opacity: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; -moz-transition-property: top, right, bottom, left; -o-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; border-radius: 50%; } .larg-socials li a:after { pointer-events: none; content: ''; position: absolute; border: #E4E4E4 solid 1px; top: -20px; right: -20px; bottom: -20px; left: -20px; opacity: 0; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: top, right, bottom, left; -moz-transition-property: top, right, bottom, left; -o-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; border-radius: 50%; } .larg-socials li a:hover:before, .larg-socials li a:focus:before, .larg-socials li a:active:before { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: .3; } .larg-socials li a:hover:after, .larg-socials li a:focus:after, .larg-socials li a:active:after { top: -9px; right: -9px; bottom: -9px; left: -9px; opacity: .3; } .larg-socials li a:hover i{ background-color:#fff; color:#e8522f; } .fa-hover > span{ display: block; color: #222222; line-height: 35px; height: 35px; padding-left: 10px; border-radius: 4px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; cursor:pointer } .fa-hover:hover > span{ background:#777; color:#fff; } .fa-hover > span i{ margin-right:9px } .fa-hover:hover > span i{ font-size: 28px; vertical-align: -6px; } /* ========================================================================== 13. Exception PopUp STYLES. ============================================================================= */ .ModalPopUp { width: 100%; height: 100%; background: rgba(44, 43, 43, 0.5); position: absolute; z-index: 999999; top: 0; left: 0; display: none; } .ModalContainer { width: 50%; height: 485px; display: block; margin: 25px auto; background: #fff; } .Modalheader { background: #f3f3f3; height: 31px; padding: 25px 10px; } .Modalheader h3 { margin-top: -8px; font-size: 20px; font-weight: bold; float: left; } .ModalContent { padding: 10px; height: 100%; } .CssContainer { padding: 10px; height: 370px; border: 1px solid #eee; cursor: text; overflow: auto; margin-bottom: 10px; background: #242424; color: #4EA90F; } .closePopup { display: block; width: 30px; height: 30px; float: right; background: #ddd; margin-top: -14px; border-radius: 50%; transition: all linear 0.3s; } .closePopup span { text-align: center; display: block; line-height: 30px; font-size: 15px; } .closePopup:hover { background-color: #ed1c24; } .closePopup:hover span { color: #fff; } .errorSelect{ border-color: #f2b1b4; background: #f1d5d6; display: none; width: 100%; padding: 5px; text-align: center; color: #9D1E1E; margin-top: 12px; } .Newsslider .slick-prev, .Newsslider .slick-next { background: rgba(119,119,119,.23); } #fowd,iframe[src="about:blank"],.nicescroll-rails{ display:none !important; } .errCap{ position: absolute; font-weight: normal; color: #fff; background: #f00; white-space: nowrap; z-index: 9; padding: 13px; left: 94%; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .errCap:before{ width: 0; height: 0; border-style: solid; border-width: 5px 5px 5px 0; border-color: transparent #f00 transparent transparent; position:absolute; left:-5px; top:16px; content:"" } /**** version 1 customizations ******/ .top-nav-style3 .top-nav > ul li a:hover i, .top-nav-style3 .top-nav > ul li.selected a i, .top-nav-style3 .top-nav > ul li.current a i { color: #C2C2C2 } .top-nav-style3 .mega-menu .div-mega,.head-style2 .mega-menu .div-mega,.nav-4 .mega-menu .div-mega{ top:50px } .head-style2 .right-bar { margin: 2px 5px 4px 0; } .head-style2 .bg-head2 { bottom: 0px; } .sticky .top-nav-style3 .mega-menu .div-mega{ top:50px !important } .nav-4 .top-nav > ul > li > a i{ display:none; } .masonry.nobar .post-image { max-height: 160px; } .post-image a .mask{ top:3px } .news-masnory .gallery li { margin: 0 1px 1px 0 !important; } img{ vertical-align:middle } header.top-head .logo a{ margin-right:0; margin-left:0 } header.top-head.top-head-4 .logo a,.head-style2 header.top-head .logo a, .head-style3 header.top-head .logo a{ margin-left:auto; margin-right:auto } .portfolio-filterable.full{ padding:0 15px } .top-nav > ul ul li a i { margin-right: 8px; font-size: 13px; } .portfolio-lft-txt{ max-height:137px } #message{ margin:0 } /**** new in version 2 *****/ .img-holder .slick-list{ margin:0 !important } .img-over.full-hover{ top:0; left:0; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); width:100%; height:100% } .img-over.full-hover .zoom{ top:0; left:0 } .img-over.full-hover .zoom b{ top:50% !important; left:50% !important; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top:-15px; margin-left:-15px } /****** white sub menu ***********/ .sub-menu-white.top-nav > ul li ul li,.sub-menu-dark.top-nav > ul li ul li{ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .sub-menu-white.top-nav > ul li ul li:first-child,.sub-menu-dark.top-nav > ul li ul li:first-child{ border-top-width:4px; border-top-style:solid } .sub-menu-white.top-nav > ul li ul li{ border-bottom-color:#f2f2f2 } .sub-menu-white.top-nav > ul li ul li a{ background:#fff; color:#777; } .sub-menu-white.top-nav li li.selected > a, .sub-menu-white.top-nav li li.current > a{ background:#f2f2f2 !important; color:#777 !important; } .sub-menu-white.top-nav > ul li ul li a:hover{ background:#f2f2f2 !important; } .sub-menu-white.top-nav li li.hasChildren:after,.sub-menu-white.top-nav > ul ul li a i{ color:#C5C5C5 } .sub-menu-white .div-mega{ background-color:#fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-top-width: 4px; border-top-style: solid; } .sub-menu-dark .div-mega{ background-color:#333; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-top-width: 4px; border-top-style: solid; } .sub-menu-white.top-nav .div-mega ul li:first-child, .sub-menu-dark.top-nav .div-mega ul li:first-child{ border-top-width: 0; } .sub-menu-white.top-nav .div-mega h4{ background:#eee } .sub-menu-dark.top-nav .div-mega h4{ background:#111; color:#999 } .sub-menu-white.top-nav .div-mega ul li,.sub-menu-dark.top-nav .div-mega ul li{ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .div-mega h4{ padding:12px 15px !important; font-size:12px; text-transform:uppercase; border-radius:3px } /********** dark sub menu **********/ .sub-menu-dark.top-nav > ul li ul li{ border-bottom-color:#3f3f3f } .sub-menu-dark.top-nav > ul li ul li a{ background:#333; color:#ddd; } .sub-menu-dark.top-nav li li.selected > a, .sub-menu-dark.top-nav li li.current > a{ background:#444 !important; color:#ddd !important; } .sub-menu-dark.top-nav > ul li ul li a:hover{ background:#3f3f3f !important; } .sub-menu-dark.top-nav li li.hasChildren:after,.sub-menu-dark.top-nav > ul ul li a i{ color:#7F7F7F } /************ page titles **********/ .title-minimal,.title-5{ background: #EFEFEF; } .title-minimal .container{ position:relative; padding-top:20px; padding-bottom:20px } .title-minimal .breadcrumbs{ background:transparent; position:absolute; bottom:0; right:0; left:auto; margin:0; } .title-minimal .line-separate{ color: #A5A5A5 !important; } .title-minimal .breadcrumbs *{ color: #A5A5A5; font-size: 11px; } .title-minimal .breadcrumbs a:hover{ color: #A5A5A5; } .title-minimal h1{ font-size:30px } .title-2.center-title .container,.title-3.center-title .container,.title-4.center-title .container{ position:relative; padding-bottom:50px } .title-2.center-title .breadcrumbs,.title-3.center-title .breadcrumbs,.title-4.center-title .breadcrumbs,.title-5 .breadcrumbs{ position:absolute; bottom:0; right:0; left:auto; margin:0 } .title-2.center-title .inner-title,.title-3.center-title .inner-title,.title-4.center-title .inner-title{ display:table; width:auto; margin:auto; float:none; } .center-title.title-4 h1{ display:table; margin:20px auto 5px; float:none } .title-5 .container{ position:relative; padding-top:20px; padding-bottom:20px; } .title-5 .inner-title{ display:table-cell; vertical-align:middle } .page-title.video-container{ overflow:hidden; position:relative; z-index:1 } .page-title .highInd{ z-index:99999 !important } .page-title .YTPOverlay{ background:rgba(0,0,0,.3); } /********** light footer **********/ .light-footer .footer-bar{ background: #E7E7E7; border-bottom: 1px #ddd solid; } .light-footer .footer-bar-3 .buyNow{ border-left: 1px solid #FFFFFF; } .light-footer .footer-top{ border-bottom: 1px #D0D0D0 solid; background: #EFEFEF; color: #808080; border-top: 1px #fff solid; color: #999; } .light-footer .footer-top a { color: #575757; } .light-footer .footer-bottom{ border-top: 1px #FFFFFF solid; background: #E7E7E7; } .light-footer .footer-top .block-head { border-bottom-color: #E0E0E0; color: #777; } .light-footer .hover_links_effect li a { background: #DDDDDD; color: #777; } .light-footer .recent-posts-footer li { border-bottom: 1px dotted #D5D5D5; } .light-footer .footer-top .tags a{ background:#E5E5E5 } .light-footer .footer-top hr { border-top: 1px #DBDBDB solid; } .light-footer .footer-top hr.hr-style5:before, .light-footer .footer-top hr.hr-style5:after { background: #EFEFEF; color: #D5D5D5; } .light-footer .NL .NL-btn { background: #D8D8D8; color: #474747; } .light-footer .NL .input-box { border: 1px #D8D8D8 solid; } .light-footer .NL:before { top: 17px; color: #CDCDCD; } .minimal-foot.footer-bottom .social-list a{ text-decoration:none; } .minimal-foot{ padding:30px 0; background:#323232 } .minimal-foot .footer-menu-inline{ margin-top:45px } /********** headers ************/ .left-side-wrap{ margin-left: 260px; position:relative } .right-side-wrap{ margin-right: 260px; position:relative } .left-side-header,.right-side-header{ position:fixed; left:0; top:0; width:260px; height:100%; background:#fff; -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); z-index:5; overflow:auto } .right-side-header{ left:auto; right:0; -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); } .left-side-header header.top-head,.right-side-header header.top-head{ border-bottom:0; padding:70px 0 } .left-side-header .search-box-side,.right-side-header .search-box-side{ display:block; position:relative; margin:30px 20px; overflow:hidden } .left-side-header .input-box,.right-side-header .input-box{ border-right:0; margin-right:-15px; border-top-left-radius: 2em; border-bottom-left-radius: 2em; } .left-side-header .search-box-side input[type=text],.right-side-header .search-box-side input[type=text]{ width:190px; height: 33px; font-size: 10px; } .left-side-header .search-box-side input[type=submit],.right-side-header .search-box-side input[type=submit] { width: 35px; height: 35px; padding: 0 5px; font-size: 10px; border-radius: 50%; } .left-side-header header.top-head .logo a,.right-side-header header.top-head .logo a{ margin:auto } .side-nav{ padding:30px 0 10px } .side-nav > ul > li { position: relative; margin: 0; padding:0 20px; } .side-nav > ul > li > a:hover i, .side-nav > ul > li.current > a i, .side-nav > ul > li.selected > a i { margin-top: 5px; } .side-nav > ul > li > a { display: block; padding: 0 17px; height: 50px; text-transform: uppercase; overflow:hidden; line-height:50px; border-bottom: 1px #eee solid; } .side-nav > ul > li > a:hover { color:#777 } .side-nav > ul > li.current > a{ color:#333; font-weight:bold } .side-nav > ul > li > ul li.current > a{ background:rgba(255,255,255,.15) } .side-nav > ul li a i{ color:#b8b8b8 !important; font-size:16px; margin-right:10px } .side-nav > ul li a:hover i{ color:#777 !important } .side-nav > ul li a:hover i,.side-nav > ul li.selected a i,.side-nav > ul li.current a i{ color:#fff; } .side-nav > ul li ul { position: static; min-width: 220px; display:none; } .side-nav > ul > li > ul li { position: relative; float: none; margin: 0; padding: 0; line-height: 35px; border-bottom:1px rgba(255,255,255,.15) solid } .side-nav > ul > li > ul li a:hover{ background:rgba(255,255,255,.15) } .side-nav ul ul li.hasChildren{ background:rgba(0,0,0,.1) } .side-nav li li a { display: block; overflow: hidden; padding: 0 15px !important; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 40px !important; color:#fff } .side-nav li.hasChildren:after { position: absolute; top: 15px; right: 30px; display: inline-block; color: #777; content: "\f107"; font-family: FontAwesome; -moz-transition: transform 0.3s linear; -o-transition: transform 0.3s linear; -webkit-transition: transform 0.3s linear; transition: transform 0.3s linear; } .side-nav li.hasChildren:hover:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .side-nav li li.hasChildren:after { top: 2px; right: 10px; color: #fff; } .side-nav li li a:hover, .side-nav li li.selected > a, .side-nav li li.current > a { text-decoration: none; } .side-nav .div-mega{ position:static; padding-top: 0; -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0); -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0); box-shadow: inset 0px 0 0 0 rgba(0,0,0,0); display:none } .side-nav .div-mega .div-mega-section{ float:none; width:100%; margin:0 } .side-nav .div-mega .div-mega-section h4{ margin:0; border-radius:0; background:rgba(0,0,0,.1); color:#fff } .side-nav .div-mega .div-mega-section ul{ display:block; } .side-nav .div-mega .div-mega-section ul li{ border-bottom: 1px rgba(255,255,255,.15) solid; } .side-nav .div-mega .div-mega-section ul li a:hover{ background: rgba(255,255,255,.15); } /*** sub menu level more than 2 ***/ .side-head-block{ margin:20px; } .side-head-block ul.blocks li{ display:block; float:none; font-size:12px; padding:8px 0; border-bottom:1px #ECECEC solid } .side-head-block ul.social-list{ display:table; margin:auto } .side-head-block ul.blocks li a,.side-head-block ul.blocks li span{ font-size:12px; } .side-head-block ul.blocks li i{ margin-right:8px } .nicescroll-rails{ display:block !important } /********* menu updates *********/ .top-nav > ul li ul { height:auto; max-height:none; display:none } .top-nav > ul > li > ul > li { opacity: 1; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /*** sub menu level more than 2 ***/ .top-nav ul li li li { opacity: 1; -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .top-nav ul li li > ul{ height:auto; } /******** default effect ***********/ .top-nav > ul.def-effect li ul { height:0; max-height:0; display:block; opacity:0; visibility:hidden } .top-nav > ul.def-effect > li > ul > li { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .top-nav > ul.def-effect > li:hover > ul{ z-index:0; height:auto; max-height:none; } .top-nav > ul.def-effect li:hover > ul { height:auto; max-height:none; opacity:1; visibility:visible } .top-nav > ul.def-effect > li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } /*** sub menu level more than 2 ***/ .top-nav ul.def-effect li li li { opacity: 0; -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .top-nav ul.def-effect li li > ul{ height:0; } .top-nav ul.def-effect li li:hover > ul{ height:auto; } .top-nav ul.def-effect li li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } .top-nav.mega-menu ul div.div-mega ul{ height:100%; max-height:none; display:block; opacity:1; visibility:visible } /**********/ .top-nav > ul li a span{ position:relative } .top-nav > ul li a span .menu-hint{ position: absolute; top: -12px; right: -12px; left:auto } .nav-2 .top-nav > ul > li > a span .menu-hint{ top:26px } .menu-hint { font-size: 9px; position: relative; top: -5px; left: 3px; padding: 1px 4px; background: #777; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; color: #fff; } .menu-hint.success { background-color: #5cb85c; } .menu-hint.success:hover { background-color: #449d44; } .menu-hint.info { background-color: #5bc0de; } .menu-hint.info:hover { background-color: #31b0d5; } .menu-hint.warning { background-color: #f0ad4e; } .menu-hint.warning:hover { background-color: #ec971f; } .menu-hint.error { background-color: #d9534f; } .menu-hint.error:hover{ background-color: #c9302c; } /****** blog time line ***********/ .post-icon { width: 40px; height: 40px; line-height: 39px; position: absolute; top: 0; left: 0; z-index: 999; text-align: center; font-size: 15px; -webkit-box-shadow: 1px 1px 5px 0px rgba(61, 61, 61, 0.55); -moz-box-shadow: 1px 1px 5px 0px rgba(61, 61, 61, 0.55); box-shadow: inset 2px 1px 6px 1px rgba(61, 61, 61, 0.55); border-top-left-radius: 3px; } .post-icon:before { position: absolute; right: 0; bottom: 0; width: 0px; height: 0px; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #ffffff transparent; content: ""; display: inline-block; } .timeline-cell .details-img:after,.timeline-cell .post-image:after{ display:none } .blog-timeline{ margin-bottom:30px } .blog-timeline .meta-date{ display:none } .blog-timeline .timeline-left:before{ display:inline-block; width:0; position:absolute; left: 39px; height:100%; content:" "; border-left: 1px #ddd dashed } .timeline-left .timeline-cell{ margin: 0 0 30px 83px; position:relative; } .timeline-left .timeline_date{ position:absolute; width: 117px; top: 25px; left: -79px; } .timeline-left .timeline_date:before{ display:inline-block; height:3px; position:absolute; top: 50%; width: 38%; content:" "; left: 36px; background:#ddd; z-index: 0; } /* right timeline */ .blog-timeline .timeline-right:before{ display:inline-block; width:0; position:absolute; right: 30px; height:100%; content:" "; border-right: 1px #ddd dashed } .timeline-right .timeline-cell{ margin: 0 83px 30px 0; position:relative; } .timeline-right .timeline_date{ position:absolute; width: 100px; top: 25px; right: -117px; } .timeline-right .timeline_date:before{ display:inline-block; height:3px; position:absolute; top: 50%; width: 48%; content:" "; right: 70px; background:#ddd; z-index: 0; } .timeline-cell .post-item{ padding:5px; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); border: 1px #ddd solid; border-radius: 3px; } .timeline-cell .post-info h2{ text-align:center; } .timeline-cell .post-meta{ border-bottom-width:0 !important; display:table; margin:auto; max-width:94% } .timeline-cell .cont{ display:none } .timeline-cell .post-content p{ padding:0 15px 15px } .timeline-right{ margin:0 } .timeline-left{ margin:0 } .inner_date{ width: 70px; height: 70px; text-align: center; background: #fff; border: 4px #ddd solid; -webkit-border-radius: 50%; border-radius: 50%; display:block; padding: 3px 0 0; position:relative; z-index:2 } .inner_date .day{ font-size: 30px; display:block } .inner_date .month{ margin-top: -11px; display: block; } .timeline_date .year{ position: absolute; top: 59px; font-size: 11px; border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; left: 15px; z-index:5 } .timeline_no_bar.blog-timeline:before{ display:inline-block; width:0; position:absolute; left: 50%; height:100%; content:" "; border-left: 1px #ddd dashed; margin-left:-1px; z-index: 0; } .timeline_no_bar .timeline-cell{ margin: 0 0 30px 83px; position:relative; } .timeline_no_bar .timeline_date{ position:absolute; width: 117px; top: 25px; } .timeline_no_bar .timeline_date:before{ display:inline-block; height:3px; position:absolute; top: 50%; width: 50%; content:" "; left: 12px; background:#ddd; z-index: -1; } .timeline_no_bar .blog-timeline:before{ display:inline-block; width:0; position:absolute; left:50%; margin-left:-1px; height:96.5%; content:" "; border-left: 1px #ddd dashed } .timeline_no_bar .timeline-cell{ width: 42.7%; margin: 0 15px 30px; float:left; position:relative; } .timeline_no_bar .timeline-cell:nth-child(odd) { float: left; } .timeline_no_bar .timeline-cell:nth-child(2n+3) { clear: both; } .timeline_no_bar .timeline-cell:nth-child(even) { float: right; margin-bottom: 0; margin-top: 50px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { left: -105px; top: 130px; } .timeline_no_bar .side-timeline .timeline-cell:nth-child(even) .timeline_date { left: -92px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date:before{ right: 12px; left:auto; } .timeline_no_bar .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { right: auto; top: 155px; } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date { right: -104px; } .timeline_no_bar .side-timeline .timeline-cell:nth-child(odd) .timeline_date { right: -143px; } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date .inner_date{ float: right; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date .year{ left: 14px; } .timeline_no_bar .year{ left:62px } .timeline_no_bar .timeline-cell .post-item { min-height:250px } .timeline-left .cont,.timeline-right .cont{ display:block; padding: 15px; } .sticky-post .post-item { border: 1px #E7E7E7 solid; border-radius: 3px; padding: 15px; background: #f4f4f4; } .post-gallery { display:table; margin:auto } .gallery-columns-5 .gallery-item { width: 19%; } .gallery-item { float: left; margin: 0 1px 1px 0; position: relative; overflow:hidden } .gallery-caption { background-color: rgba(0,0,0,.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } .gallery-item:hover .gallery-caption{ opacity:1 } /******** shortcodes in version 2 *********/ .accordion.style-2 h3 a,.accordion.style-2 h3 u{ border:0 } .accordion.style-2 h3 a{ line-height: 37px; background:transparent } .accordion.style-2 li > h3 u { float: right; margin: 13px 10px 0; padding: 0px; background:transparent !important; color: #A8A8A8 !important; font-size: 12px; } .accordion.style-2 h3{ border:1px #ddd solid; border-radius:3px } .accordion.style-2 li.active h3{ background:#f1f1f1 } .accordion.style-2 .accordion-panel { margin: 15px 0; padding: 0 5px; border-left: 0; } /****** Buttons ************/ .btn { border-radius: 3px; /*padding:9px 12px*/ } .btn-lg { padding: 12px 18px; font-size: 18px; line-height: 1.33; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-square { border-radius: 0; } .btn-square_outlined { border-radius: 0; background: none !important; border: 2px solid; text-shadow: none !important; } .btn-round { border-radius: 25px; } .btn-outlined { background: none !important; border: 2px solid; text-shadow: none !important; } .btn-skew { -moz-transform: skew(-20deg, 0) !important; -ms-transform: skew(-20deg, 0) !important; -o-transform: skew(-20deg, 0) !important; -webkit-transform: skew(-20deg, 0) !important; transform: skew(-20deg, 0) !important; margin: 0 10px; } .btn-skew span { -moz-transform: skew(20deg, 0) !important; -ms-transform: skew(20deg, 0) !important; -o-transform: skew(20deg, 0) !important; -webkit-transform: skew(20deg, 0) !important; transform: skew(20deg, 0) !important; } .btn-blue { background-color: #5472d2; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-blue:hover { background-color: #3c5ecc; color: #f7f7f7 !important; } .btn-blue.btn-outlined, .btn-blue.btn-square_outlined { color: #5472d2 !important; border-color: #5472d2; } .btn-blue.btn-3d { -webkit-box-shadow: 0 5px 0 #3253bc; box-shadow: 0 5px 0 #3253bc; margin-bottom: 5px; } .btn-turquoise { background-color: #00c1cf; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-turquoise:hover { background-color: #00a4b0; color: #f7f7f7 !important; } .btn-turquoise.btn-outlined, .btn-turquoise.btn-square_outlined { color: #00c1cf !important; border-color: #00c1cf; } .btn-turquoise.btn-3d { -webkit-box-shadow: 0 5px 0 #008d97; box-shadow: 0 5px 0 #008d97; margin-bottom: 5px; } .btn-pink { background-color: #fe6c61; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-pink:hover { background-color: #fe5043; color: #f7f7f7 !important; } .btn-pink.btn-outlined, .btn-pink.btn-square_outlined { color: #fe6c61 !important; border-color: #fe6c61; } .btn-default.btn-outlined, .btn-default.btn-square_outlined { color: #777 !important; border-color: #777; } .btn-default.btn-outlined:hover, .btn-default.btn-square_outlined:hover { background-color: #e6e6e6 !important; } .btn-pink.btn-3d { -webkit-box-shadow: 0 5px 0 #fe3829; box-shadow: 0 5px 0 #fe3829; margin-bottom: 5px; } .btn-default.btn-3d { -webkit-box-shadow: 0 5px 0 #555; box-shadow: 0 5px 0 #555; margin-bottom: 5px; } .btn-default.btn-3d:hover { -webkit-box-shadow: 0 5px 0 #666; box-shadow: 0 5px 0 #666; background: #767676; border-color: #6B6B6B; color: #fff; } .btn-violet { background-color: #8d6dc4; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-violet:hover { background-color: #7c57bb; color: #f7f7f7 !important; } .btn-violet.btn-outlined, .btn-violet.btn-square_outlined { color: #8d6dc4 !important; border-color: #8d6dc4; } .btn-violet.btn-3d { -webkit-box-shadow: 0 5px 0 #6e48b1; box-shadow: 0 5px 0 #6e48b1; margin-bottom: 5px; } .btn-peacoc { background-color: #4cadc9; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-peacoc:hover { background-color: #39a0bd; color: #f7f7f7 !important; } .btn-peacoc.btn-outlined, .btn-peacoc.btn-square_outlined { color: #4cadc9 !important; border-color: #4cadc9; } .btn-peacoc.btn-3d { -webkit-box-shadow: 0 5px 0 #338faa; box-shadow: 0 5px 0 #338faa; margin-bottom: 5px; } .btn-chino { background-color: #cec2ab; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-chino:hover { background-color: #c3b498; color: #f7f7f7 !important; } .btn-chino.btn-outlined, .btn-chino.btn-square_outlined { color: #cec2ab !important; border-color: #cec2ab; } .btn-chino.btn-3d { -webkit-box-shadow: 0 5px 0 #b9a888; box-shadow: 0 5px 0 #b9a888; margin-bottom: 5px; } .btn-mulled_wine { background-color: #50485b; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-mulled_wine:hover { background-color: #413a4a; color: #f7f7f7 !important; } .btn-mulled_wine.btn-outlined, .btn-mulled_wine.btn-square_outlined { color: #50485b !important; border-color: #50485b; } .btn-mulled_wine.btn-3d { -webkit-box-shadow: 0 5px 0 #342f3c; box-shadow: 0 5px 0 #342f3c; margin-bottom: 5px; } .btn-vista_blue { background-color: #75d69c; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-vista_blue:hover { background-color: #5dcf8b; color: #f7f7f7 !important; } .btn-vista_blue.btn-outlined, .btn-vista_blue.btn-square_outlined { color: #75d69c !important; border-color: #75d69c; } .btn-vista_blue.btn-3d { -webkit-box-shadow: 0 5px 0 #4ac97d; box-shadow: 0 5px 0 #4ac97d; margin-bottom: 5px; } .btn-black { background-color: #2a2a2a; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-black:hover { background-color: #444; color: #f7f7f7 !important; } .btn-black.btn-outlined, .btn-black.btn-square_outlined { color: #2a2a2a !important; border-color: #2a2a2a; } .btn-black.btn-3d { -webkit-box-shadow: 0 5px 0 #595959; box-shadow: 0 5px 0 #595959; margin-bottom: 5px; } .btn-grey { background-color: #ebebeb; color: #666666 !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-shadow: none !important; } .btn-grey:hover { background-color: #dcdcdc; color: #5e5e5e !important; } .btn-grey.btn-outlined, .btn-grey.btn-square_outlined { color: #ebebeb !important; border-color: #ebebeb; } .btn-grey.btn-3d { -webkit-box-shadow: 0 5px 0 #cfcfcf; box-shadow: 0 5px 0 #cfcfcf; margin-bottom: 5px; } .btn-orange { background-color: #f7be68; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-orange:hover { background-color: #f5b14b; color: #f7f7f7 !important; } .btn-orange.btn-outlined, .btn-orange.btn-square_outlined { color: #f7be68 !important; border-color: #f7be68; } .btn-orange.btn-3d { -webkit-box-shadow: 0 5px 0 #f4a733; box-shadow: 0 5px 0 #f4a733; margin-bottom: 5px; } .btn-sky { background-color: #5aa1e3; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-sky:hover { background-color: #4092df; color: #f7f7f7 !important; } .btn-sky.btn-outlined, .btn-sky.btn-square_outlined { color: #5aa1e3 !important; border-color: #5aa1e3; } .btn-sky.btn-3d { -webkit-box-shadow: 0 5px 0 #2a86db; box-shadow: 0 5px 0 #2a86db; margin-bottom: 5px; } .btn-green { background-color: #6dab3c; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-green:hover { background-color: #5f9434; color: #f7f7f7 !important; } .btn-green.btn-outlined, .btn-green.btn-square_outlined { color: #6dab3c !important; border-color: #6dab3c; } .btn-green.btn-3d { -webkit-box-shadow: 0 5px 0 #53812d; box-shadow: 0 5px 0 #53812d; margin-bottom: 5px; } .btn-juicy_pink { background-color: #f4524d; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-juicy_pink:hover { background-color: #f23630; color: #f7f7f7 !important; } .btn-juicy_pink.btn-outlined, .btn-juicy_pink.btn-square_outlined { color: #f4524d !important; border-color: #f4524d; } .btn-juicy_pink.btn-3d { -webkit-box-shadow: 0 5px 0 #f11f18; box-shadow: 0 5px 0 #f11f18; margin-bottom: 5px; } .btn-sandy_brown { background-color: #f79468; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-sandy_brown:hover { background-color: #f57f4b; color: #f7f7f7 !important; } .btn-sandy_brown.btn-outlined, .btn-sandy_brown.btn-square_outlined { color: #f79468 !important; border-color: #f79468; } .btn-sandy_brown.btn-3d { -webkit-box-shadow: 0 5px 0 #f46e33; box-shadow: 0 5px 0 #f46e33; margin-bottom: 5px; } .btn-purple { background-color: #b97ebb; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-purple:hover { background-color: #ae6ab0; color: #f7f7f7 !important; } .btn-purple.btn-outlined, .btn-purple.btn-square_outlined { color: #b97ebb !important; border-color: #b97ebb; } .btn-purple.btn-3d { -webkit-box-shadow: 0 5px 0 #a559a8; box-shadow: 0 5px 0 #a559a8; margin-bottom: 5px; } .btn-white { background-color: #ffffff; color: #666666 !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-shadow: none !important; } .btn-white:hover { background-color: #f0f0f0; color: #5e5e5e !important; } .btn-white.btn-outlined, .btn-white.btn-square_outlined { color: #ffffff !important; border-color: #ffffff; } .btn-white.btn-3d { -webkit-box-shadow: 0 5px 0 #e3e3e3; box-shadow: 0 5px 0 #e3e3e3; margin-bottom: 5px; } .btn-grace { background-color: #aed13b; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-grace:hover { background-color: #9ec02d; color: #f7f7f7 !important; } .btn-grace.btn-outlined, .btn-grace.btn-square_outlined { color: #aed13b !important; border-color: #aed13b; } .btn-grace.btn-3d { -webkit-box-shadow: 0 5px 0 #8dac28; box-shadow: 0 5px 0 #8dac28; margin-bottom: 5px; } .btn-default { color: #7d7d7d; background-color: #ffffff; border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #7d7d7d; background-color: #e6e6e6; border-color: rgba(0, 0, 0, 0); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default .badge { color: #ffffff; background-color: #7d7d7d; } .btn-primary { color: #ffffff; background-color: #00aef0; border-color: transparent; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #ffffff; background-color: #0089bd; border-color: rgba(0, 0, 0, 0); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary .badge { color: #00aef0; background-color: #ffffff; } .btn-success { color: #ffffff; background-color: #5cb85c; border-color: transparent; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #ffffff; background-color: #449d44; border-color: rgba(0, 0, 0, 0); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; } .btn-success .badge { color: #5cb85c; background-color: #ffffff; } .btn-info { color: #ffffff; background-color: #5bc0de; border-color: transparent; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #ffffff; background-color: #31b0d5; border-color: rgba(0, 0, 0, 0); } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info .badge { color: #5bc0de; background-color: #ffffff; } .btn-warning { color: #ffffff; background-color: #f0ad4e; border-color: transparent; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: #ffffff; background-color: #ec971f; border-color: rgba(0, 0, 0, 0); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; } .btn-warning .badge { color: #f0ad4e; background-color: #ffffff; } .btn-danger { color: #ffffff; background-color: #d9534f; border-color: transparent; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #ffffff; background-color: #c9302c; border-color: rgba(0, 0, 0, 0); } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; } .btn-danger .badge { color: #d9534f; background-color: #ffffff; } i.icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; vertical-align: text-top; margin-left: 5px; } .btn-default { color: #fff !important; background-color: #777 !important; border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; } .btn-default .badge { color: #fff; background-color: #333; } .btn-border { color: #fff; background-color: transparent; border: 1px #fff solid; } .btn-border:hover, .btn-border:focus, .btn-border.focus, .btn-border:active, .btn-border.active { color: #ddd; background-color: transparent; border-color: #ddd; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; } .btn-default .badge { color: #fff; background-color: #333; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #337ab7; border-color: #2e6da4; } .btn-primary .badge { color: #337ab7; background-color: #fff; } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; } .btn-success .badge { color: #5cb85c; background-color: #fff; } .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da; } .btn-info .badge { color: #5bc0de; background-color: #fff; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: #fff; background-color: #ec971f; border-color: #d58512; } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236; } .btn-warning .badge { color: #f0ad4e; background-color: #fff; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a; } .btn-danger .badge { color: #d9534f; background-color: #fff; } .btn-link { font-weight: normal; color: #337ab7; border-radius: 0; } .btn-xl, .tp-caption a.btn-xl { padding: 25px 50px !important; font-size: 17px; } .btn-border { color: #fff; } .button-group .btn{ margin:5px } /******** Dividers ***********/ .divider { position: relative; height: 35px; overflow:hidden; text-align:center } .divider-1:before,.divider-6:before,.divider-6:after,.divider-10:before,.divider-10:after { position: relative; top: 17px; width: 100%; height: 1px; content: ""; background: #E8E8E8; display:table; } .divider-1 .divid_before{ font-size: 21px; margin-left: 46.4%; color: #D5D5D5; margin-top: -2px; } .divider-1 .divid_after{ -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); float:right; font-size: 21px; color: #D5D5D5; margin-right: 46.4%; margin-top: -2px; } .divider-2:before,.divider-4:before,.divider-5:before { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left:-20px; display:inline-block } .divider-2:after { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left:auto; right:-20px; display:inline-block } .divider-3:before { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left:30px; display:inline-block } .divider-3:after { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left:auto; right:30px; display:inline-block } .divider-4:before{ margin-left:45px; width:100% } .divider-5:before{ margin-right:30px; width:100%; right: 0; left: auto; } .divider-6:before{ width: 20%; left: 30%; margin-left: -25px; } .divider-6:after{ width: 20%; right: 30%; margin-right: -25px; left:auto; position:absolute } .divid_right,.divid_left{ position:absolute; top:8px; color: #DFDFDF; font-size: 20px; left:0 } .divid_right{ right:0; left:auto } .divid_center{ display: table; margin: 6px auto; color: #DFDFDF; font-size: 20px; } .lg-fa{ font-size:28px } .divider-7,.divider-8,.divider-9 { position: relative; display: block; overflow: visible; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px #eeeded solid; } .divider-7:before { position: absolute; top: -1px; left: 0; display: inline-block; width: 20%; height: 1px; content: ""; } .divider-7:after { position: absolute; top: -1px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; } .divider-8 span{ position: absolute; top: -1px; right: 0; display: inline-block; width: 30%; height: 1px; content: ""; left:35% } .divider-9:before{ position: absolute; top: -4px; right: 0; display: inline-block; width: 40%; height: 1px; content: ""; left:30%; background:#ddd } .divider-9 span:before{ position: absolute; top: -1px; right: 0; display: inline-block; width: 30%; height: 1px; content: ""; left:35%; background:#ddd } .divider-9 span:after{ position: absolute; top: 2px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; left:40%; background:#ddd } .divider-9:after{ position: absolute; top: 5px; right: 0; display: inline-block; width: 10%; height: 1px; content: ""; left:45%; background:#ddd } .divider-10:before{ width: 20%; left: 30%; margin-left: -25px; } .divider-10:after{ width: 20%; right: 30%; margin-right: -25px; left:auto; position:absolute } /********** headings ***********/ .block-head.right-head{ text-align:right } .block-head.right-head:before{ right: 20px; left:auto } .block-head.right-head:after{ right: 0; left:auto } .block-head.style2{ border-bottom:0; } .block-head.style2.center{ display:block } .block-head.style2.center span{ padding:0 20px } .block-head.style2 span{ display:inline-block; padding-right:15px; background:#fff; position: relative; z-index: 1; } .block-head.style2.right-head span{ padding-left:15px; padding-right:0 } .block-head.style2:before{ display:none } .block-head.style2:after{ border-top: 8px #EFEFEF solid; width:100%; top: 50%; bottom: auto; z-index: 0; left: 0; background: transparent; margin: -12px 0 0; } .block-head.style3{ border-bottom:0; } .block-head.style3.center{ display:block } .block-head.style3.center span{ padding:0 20px } .block-head.style3 span{ display:inline-block; padding-right:15px; background:#fff; position: relative; z-index: 1; } .block-head.style3.right-head span{ padding-left:15px; padding-right:0 } .block-head.style3:before{ display:none } .block-head.style3:after{ width:100%; top: 30%; bottom: auto; z-index: 0; left: 0; margin: 0; } .block-head.style4{ display:table } .block-head.style4.center:before{ left:50%; margin-left:-10% } .block-head.style4.center span{ padding:0 20px } .block-head.style4 span{ display:inline-block; padding: 0; position: relative; z-index: 1; } .block-head.style4.right-head span{ padding-left:15px; padding-right:0; position:relative } .block-head.style4:after{ display:none } .block-head.style4:before{ left:0; width: 20%; height: 3px; bottom: -2px; } .block-head.style5{ overflow: hidden; padding-bottom: 7px; border-bottom-width: 3px; } .block-head.style5.center{ display:block } .block-head.style5.center span{ padding:0 20px } .block-head.style5 span{ display:inline-block; padding: 0; position: relative; z-index: 1; } .block-head.style5.right-head span{ padding-left:15px; padding-right:0; position:relative } .block-head.style5:after{ display:none } .block-head.style5:before{ display: none; } .block-head.style6.center:after{ left:50%; margin-left:-10% } .block-head.style6.center span{ padding:0 20px } .block-head.style6 span{ display:inline-block; padding-right:15px; position: relative; z-index: 1; } .block-head.style6.right-head span{ padding-left:15px; padding-right:0 } .block-head.style6:before{ display:none } .block-head.style6:after{ width: 8%; left: 0; margin: 0; height: 1px; bottom: -1px; } .block-head.style7,.block-head.style8{ border-bottom:0; padding-bottom:0 } .block-head.style7:before,.block-head.style7:after,.block-head.style8:before,.block-head.style8:after{ display:none } .block-head.style7{ color:#555 } .block-head.style7{ padding:0 20px; border-left-width: 6px; border-left-style:solid; } .block-head i{ margin-right:10px } /********* progress bars *********/ .levels.style-2 .level-out,.levels.style-3 .level-out,.levels.style-5 .level-out,.levels.style-6 .level-out{ background: #f7f7f7; position: relative; margin-bottom: 11.66666667px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .levels.style-3 .level-out{ background: #eee; } .levels.style-5 .level-out,.levels.style-6 .level-out{ background: #EFEFEF; -moz-border-radius: 25px; border-radius: 25px; margin-bottom:20px } .levels.style-5 .level-in{ -moz-border-radius: 25px; border-radius: 25px; height:17px; } .levels.style-6 .level-in{ -moz-border-radius: 25px; border-radius: 25px; height:10px; } .levels.style-2 .level-out span,.levels.style-3 .level-out span { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background:transparent; } .levels.style-2 .level-in,.levels.style-3 .level-in { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; height: 24px; } .levels.style-2 .level-out span{ line-height:24px } .levels.style-3 .level-in{ height:35px } .levels.style-3 .level-out span{ line-height:35px } .levels.style-2 .level-out:after,.levels.style-3 .level-out:after,.levels.style-4 .level-out:after,.levels.style-5 .level-out:after,.levels.style-6 .level-out:after,.levels.style-2 .level-out span:before,.levels.style-3 .level-out span:before ,.levels.style-4 .level-out span:before,.levels.style-5 .level-out span:before,.levels.style-6 .level-out span:before,.levels.style-2 .level-in:before,.levels.style-3 .level-in:before,.levels.style-4 .level-in:before,.levels.style-5 .level-in:before,.levels.style-6 .level-in:before{ display:none } .levels.style-4 .level-out span{ top: -24px; right: 0; background: #ADADAD; color: #fff; text-align: center; padding: 0 5px; width: auto; } .levels.style-5 .level-out span,.levels.style-6 .level-out span{ top: -24px; right: 0; background: transparent; width: auto; text-align:right } .orange-bar{ background:#faa732 !important } .green-bar{ background:#5bb75b !important } .turquoise-bar{ background:#49afcd !important } .blue-bar{ background:#0074CC !important } /**********/ .service-box-4 h3,.service-box-5 h3{ font-size:17px } .box.rounded .close-box{ right: 1.2em; border-radius: 50%; top: 4px; } .rounded{ border-top-left-radius:5em; border-bottom-left-radius:5em; border-top-right-radius:5em; border-bottom-right-radius:5em; padding: 1.5em 2em; } .round{ border-radius:5px; } .box.round .close-box{ border-radius: 5px; } .parallax{ -webkit-transition:background-position .2s linear; -moz-transition:background-position .2s linear; -o-transition:background-position .2s linear; transition:background-position .2s linear; } .product-specs a.btn { text-shadow: none; } p img{margin:8px;}