-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { position: relative; margin: 0; padding: 0; color: #777; font-size: 13px; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; background: #fff !important; } 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 { -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 #B7B4B4 solid; background: #fff; font-size: 13px; 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; } .welcome p { font-size: 18px; line-height: 33px; } .about1 p { font-size: 20px; line-height: 28px; } 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 { background: #f4f4f4 none repeat scroll 0 0; border-bottom: 1px solid #eee; font-size: 12px; } .top-bar.main-bg { border-bottom: 0 } .top-bar a, .top-bar span { color: #000000; display: block; line-height: 25px; padding: 5px 10px 5px 0; } .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 { background: #0b8ded none repeat scroll 0 0; position: relative; z-index: 5555; } .home_news { font-weight: bold; text-transform: capitalize; } .fixedHead { position: fixed !important; top: 0; left: 0; width: 100%; background: transparent !important; } header.top-head .logo { /*margin-top: 20px;*/ } header.top-head .logo a { display: table; width: 100%; height: 47px; 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: 83px; 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 { color: #fff; display: block; height: 83px; overflow: hidden; padding: 22px 17px 0; text-align: center; text-transform: uppercase; } .top-nav > ul li a span { display: block; margin-top: 5px } .top-nav > ul li a i { color: #fff; font-size: 16px; } .top-nav > ul > li:last-child { border-right: 1px solid #fff; } .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; olid; 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: 35px; 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: 40px; } .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: 25px } /************ 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: 50px; 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; } .white{color:#fff; } .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: block;*/ } .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: 83px !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: 60px*/ } .sticky .top-nav > ul > li > a span { /*margin-top: 0;*/ /*line-height: 60px*/ } .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*/ } /****** 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; } /* ========================================================================== 4. BLOCKS BACKGROUNDS. ============================================================================= */ .block-bg-1 { position: relative; height: auto; } .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 } /* patterns backgrounds */ .dots-pattern { border-top: 1px #E4E4E4 solid;/*background: transparent url('../images/patterns/dots.png');*/ } .gry-pattern { /*background: #FDFDFD 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: 50px 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: 32px; font-weight: 500; } h3 { font-size: 22px; text-transform: uppercase; font-weight: 400; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } p { margin: 0 0 20px 0; line-height: 22px; font-size: 16px } .about p { font-size: 18px; } .color { color: #777 !important; font-size: 30px !important; text-transform: none !important; } .white-bg { background: #fff; } .enve p { font-size: 18px; } .do { font-size: 15px; } .do i { font-size: 45px; float: left; width: 60px; height: 60px; padding-top: 6px; color: #00a1e4; } .cell-4:hover i { color: #fff; } .dark-bg { padding: 80px 0; background-color: #222; } .dark-bg p { color: #A3A3A3; margin: 0; } .gry-bg { background: #aliceblue; } .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: 0px 0; } .about1{text-align:center; padding-bottom:40px !important; padding:0; } .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; } .accordion li.active h3 u{background:#fff !important; color:#1cbcfb; } /* ========================================================================== 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; } .rrr .block-head:after{ background:#1194a9; } .rrr .block-head:before{ background:#1194a9; } .tab-panel p{color:#fff; } .footer-top .block-head { border-bottom-color: #3a3a3a; color: #c5c5c5; text-transform: uppercase } .block-head:before { position: absolute; bottom: -3px; left: 20px; width: 35px; 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: 20px 0; text-align: center; border: 1px solid #E5F6FB; margin-bottom: 20px; border-radius: 35px 4px 35px 4px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .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: 18px; color: #777; font-weight: 800; text-transform: uppercase } .box-top h3 span { text-transform: none; font-size: 16px; font-weight: 100; display: block; margin-bottom: -10px } .box-top .more-btn { display: table; margin: 30px auto 0; background: #fff; padding: 10px 15px; text-transform: uppercase; font-size: 11px; border: 1px solid #1cbcfb; border-radius: 15px 4px 15px 4px; cursor:pointer; } .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; min-height:400px; } .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 #1cbcfb solid; border-radius: 50%; background-color: #F0F0F0; /*box-shadow: inset 0 0 0 3px #fff;*/ color: #1cbcfb; 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; margin:0; } /* ---- 7.2.3. Services boxes style 3 ---------------- */ .service-box-3 { margin-bottom: 30px; text-align: center; min-height: 400px !important; background:#fff; } .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: 130px; } .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; margin:0 auto; } .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: center; margin-bottom: 5px; } .service-box-4 h3 span, .service-box-5 h3 span { font-weight: bold; margin-right: 2px; font-size:17px; } .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 } .main-wh { color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .level-out { position: relative; margin: 0 10px 15px 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; } .fun-title1 { margin: auto; /* height: 100%; */ font-size: 45px; } /* ---- 7.4.1 Fun Staff Style 1 -------------- */ .staff-1 .fun-text { padding: 23px 0; color:#fff; } .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; } .staff-1 .fun-title1 { padding: 29px; text-align: center; color: #00b2fa; } .staff-1 .fun-title1 span { color: #fff; } /* ---- 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: aliceblue; -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: 100px; -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; border: 1px solid #a9e2f8; padding: 3px; } .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 3px 0; text-align: center; text-transform: uppercase; font-size: 14px; color: #1cbcfb; } .testimonials-name:after { position: absolute; right: 10px; 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: 10px; 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: 13px; }*/ .testimonials-2 p { font-size: 24px; line-height: 29px; font-family: 'Josefin Sans', sans-serif; } /*.testimonials-2 .testimonials-name:before, .testimonials-2 .testimonials-name:after { display: none; }*/ .testimonials-2 .slick-list { margin: 0; text-align: left; } /* ---- 7.6. Portfolio -------------- */ /* ---- 7.6.1. Portfolio Carousel -------------- */ .portfolio .portfolio-item { margin: 0 15px; background-color: #eee; min-height: 320px; } /*.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: 160px!important; 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 15px; font-size: 15px; line-height: 35px; } .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: #fff; color: #6c6c6c; } .tabs > ul li.active { background:#fff !important; } .tabs > ul li.active a{color:#1cbcfb !important; } .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; color:#fff; } /* ---- 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:20px; 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; color:#eee; } .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: 0; 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: 85px; } /*** 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, .share-post ul li { float: left; margin-right: 2px; } .share-post .sh, .share-post ul li a { display: block; padding: 8px 10px; font-size: 15px; } .share-post .sh { display: block; font-weight: bold; } .share-post ul li i { margin: 0; padding: 3px; } /*** 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 10px 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: 8px 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: 100px; 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-size: 32px; font-weight: bold; letter-spacing: unset; text-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3); text-transform: uppercase; } .page-title h1 span { color: #fff; } .page-title .cell-4 img { margin-top: 10px; } .title-1 { background: #fff url('../images/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: #fff; font-size: 60px; font-weight: 800; text-transform: uppercase !important; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6); } .large-light-title { color: #787878 !important; font-size: 70px; font-weight: lighter; text-transform: uppercase; letter-spacing: 2px } .large-text { font-size: 20px; color: #fff; font-weight: lighter; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6); } .l-text { font-size: 20px; color: #1cbcfb; 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: 20px 0 10px; border-bottom: 1px #0f0f0f solid; background: #222; color: #ffffff; } .footer-top a { color: #ffffff; } .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: 5px 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;*/ /* color: #ffffff;*/ /* 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: 13px; } .copyrights a { color: #7C7C7C; text-decoration: none; } .copyrights a:hover { text-decoration: none; color: #fff !important; } .footer-bottom { overflow: auto; padding: 5px 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: #1cbcfb; } .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 *********/ .nn-sub-menu { display: none; left: 0; margin: 0; padding: 0; position: absolute; top: -9px; z-index: 999; } .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: #0bb8fc; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border:1px solid #0bb8fc; } .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: 13px; padding-top:10px; } .service-box-4:hover i{color:#fff; }s .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; } /*--------------------------*/ .slide { position: relative; padding: 25vh 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; } .slide:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .slide:nth-child(2n) .title { margin-left: 0; margin-right: auto; } .slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0; } .slide, .slide:before { background: 50% 50% / cover; } .testi { position: absolute; z-index: 1; top: 50px; width: 100%; } /*-----------------------------------*/ video { display: block; } .video-container { width: 100%; max-height: 350px; overflow: hidden; top: 0; right: 0; } .but_small5{color:#fff; } /*--------------------hover effect------------------------*/ .da-thumbs li { float: left; margin: 5px; background: #fff; padding: 8px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.1); width: 180px; height: 85px; margin-right:11.6%; } .mrg{margin-right:0 !important; } .da-thumbs li a, .da-thumbs li a img { display: block; position: relative; margin-left: auto; margin-right: auto; } .da-thumbs li a { overflow: hidden; } .da-thumbs li a div { position: absolute; background: #333; background: rgba(75,75,75,0.7); width: 100%; height: 100%; } .da-thumbs li a div span { display: block; padding: 10px 0; margin: 16px 10px 10px 10px; text-transform: uppercase; font-weight: bold; color: rgba(255,255,255,0.9); text-align: center; } /*------------------------------*/ .one_fourth { width: 33%; float:left; } .one_fourth p{color:#000; font-size:15px; } /*.white{margin-bottom:15px; }*/ .flips3 { width:100%; height: 230px; margin:0; position: relative; } .flipscont3 { width: 100%; height: 100%; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0px; left: 0px; text-align:center; /* background-color:#fff; background: rgba(0, 0, 0, .1);*/ } .flips3_front.flipscont3 i { font-size: 40px; color: #1cbcfb; margin-top: 50px; margin-bottom: 20px; border:4px solid #1cbcfb; padding-top:15px; width:80px; height:80px; border-radius:50px; } .flips3 h3{font-size:16px; font-weight:500; } .flips3_front { padding:0px; width:100%; z-index: 2; } .flips3_back { width:100%; padding:50px; color: #fff; background-color:#e1f3fa; z-index: 1; height:220px; margin: 0px; text-align: center; -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); -sand-transform: rotateY(180deg); } .flips3:hover .flips3_front { z-index: 1; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -sand-transform: rotateY(180deg); } .flips3:hover .flips3_back { z-index: 2; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -sand-transform: rotate(0deg); } .flips3.active .flips3_front { z-index: 1; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -sand-transform: rotateY(180deg); } .flips3.active .flips3_back { z-index: 2; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -sand-transform: rotate(0deg); } /*----------------------------*/ .blue_1 { background: #0B8DED; } .blue_2{background:#ffcf43; } .blue_3{background:#f36c3d; } .blue_4{background:#37a491; } .blue_5{background:#f5841e; } .blue_6{background:#ffa500; } /*-----------------------------------*/ .color_11 i{border:2px solid #dc7c01 !important; color:#dc7c01 !important; } .color_21 i{border:2px solid #1cbcfb !important; } .color_31 i{border:2px solid #206c86 !important; color:#206c86 !important; } .color_41 i{border:2px solid #bf3a4b !important; color:#bf3a4b !important; } /*------hover-----------*/ .color_11:hover i{background:#dc7c01 !important; color:#fff !important; } .color_21:hover i{background:#1cbcfb !important; } .color_31:hover i{background:#206c86 !important; color:#fff !important; } .color_41:hover i{background:#bf3a4b !important; color:#fff !important; } .color_1{ background:#dc7c01; } .color_2{ background:#1cbcfb; } .color_3{ background:#206c86; } .color_4{ background:#bf3a4b; } .color_11{ border:2px solid #dc7c01; } .color_21{ border:2px solid#1cbcfb; } .color_31{ border:2px solid #206c86; } .color_41{ border:2px solid #bf3a4b; } .box-2-cont:hover { z-index: 2; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.1); transition: all 200ms ease-in; transform: scale(1.1); } /*----------------loader---------------------------------*/ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ p { color: #7E7E7E; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*-------------------------*/ .panel-wrapper p{ color:#fff; } .btn-home a{background:#1cbcfb; } #home{height:500px !important; } .co_1{color:#dc7c01; } .co_2{color:#1bbbfa; } .co_3{color:#206c86; } .co_4{color:#bf3a4b; } /*-------------------------------*/ blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 100%; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; background:#ececec; margin-bottom:30px; } blockquote:before { display: block; content: "\201C"; font-size: 80px; position: absolute; left: 15px; top: -10px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; } .abb_rev h1{ font-size: 78px; } .top-nav li li { border-bottom: 1px solid #0b8ded!important; } .top-nav > ul ul li a:hover { background: #236dae; } .insti_logo{ padding-bottom: 10px; padding-top: 10px; } .insti_logo img{ width: 70%; } .abb_name_holder { color: #000; font-size: 12px; min-height: 70px; padding-top: 20px; } .page-title h2 span { color: #fff; } .cahe_desc p{ font-size: 16px; text-align: justify; } .cahe_desc_right{ padding-top: 40px; } .cahe_desc img{ margin-top: 35px; } .course_small h3{ font-size: 14px; font-weight: bold; } .home_features { margin-top: 10px; } .home_features a { background: #0b8ded; color: #fff; padding: 6px 12px; border-radius: 4px; } .high_edu { margin-top: 52px; } .home_latest_news h4 { font-size: 14px; font-weight: bold; min-height: 35px; } /*.home_latest_news a { background: #0b8ded; color: #fff; padding: 5px 9px; border-radius: 4px; }*/ .hm_news_image { margin-bottom: 30px; text-align: center; } .hm_news_outerbox { background: #f3f2f2; padding: 10px 15px; min-height: 185px; margin-bottom: 5px; } .view_all_hm_events { text-align: right; margin-bottom: 20px; } .view_all_hm_events a { background: #0B8DED; padding: 8px 14px; color: #fff; } .hm_news_btn{ text-align: center; } .evt_boxx img{ width:100%; } #contentWrapper { background: #fff; } .our_nurseries { padding-bottom: 20px; } .our_nurseries a { font-size: 13px; }