/* /* Table of Content ================================================== 01. Header - Top Bar - Top Bar White - Top Bar Light Gray - Top Bar Color - Logo 02. Main Menu - Dropdown menu - Sub Dropdown menu - mega menu - Mobile Navigation 03. Header Search Form 04. Main Headings 05. Basic Elements - Title Bar - Tagline - Breadcrumbs - Social Icons Footer - Magnifying Popup - Flickr Widget - Google Maps 06. Revolution Slider 07. Flexslider 08. Featured Boxes 09. Services Boxes 10. Portfolio With Description - Hover Animations 11. Portfolio Without Description - Hover Animations 12. Portfolio Filteration 13. Isotope Filtering 14. Showbiz Carousel - Navigation Style 1 - Navigation Style 2 - Navigation Style 3 - Navigation Style 4 15. Parallex Section 16. Some Page Style - Landing Page - Our Team - Contact Details - 404 Pages 17. Recent Blog Post 18. Blog Section - Blog Comments - Pagination 19. Blog Timeline 20. Tags 21. Contact Form 22. Elements - Buttons - Skills Graph - Numeric Statistic - Pie Chart - Icons & Icons Box - Accordation - Tabs - Tooltip - Alert Boxes - Testimonials - Happy Clients - Dropcap - Highlights - Blockquote - Large Notice - List Styles - Pricing Tables 23. Footer */ /* Import Section ====================================================================== */ @import url("base.css"); /* Default Reset, Typography, Forms, etc. */ @import url("responsive.css"); /* Responsive Grid */ @import url("icons.css"); /* Font Awesome Icons */ @import url("ss-gizmo.css"); /* Font Awesome Icons */ @import url("../../../../fonts.googleapis.com/css@family=Open+Sans_3A400,300,600,700"); @import url("../../../../fonts.googleapis.com/css@family=Calibri_3A400,100,200,300,500,600,700,800"); /* 01 Header ================================================== */ #header { height: auto; z-index: 999; position: relative; width: 100%; box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2); background: #D6E7E7; } #header .topbar { /*height: 40px;*/ width: 100%; /*float:left;*/ border-bottom: 1px solid #eceef0; background-color: #e5e5e5; } #header .topbar .call { padding: 7px 0px; } #header .topbar .call li { display: inline-block; /*border-left:1px solid #0000FF;*/ padding-left: 0; margin-right: 3px; font-size: 12px; } #header .topbar .call li i { font-weight: 400; } #header .topbar .call li.first { border-left: 0px solid #eceef0; } #header .topbar .social-icons li { border-left: 1px solid #eceef0; font-size: 12px; margin: 0px; padding-bottom: 0px; height: 40px; } #header .topbar .social-icons li.last { border-right: 1px solid #eceef0; } .ie8 #header { border-bottom: 1px solid #e9e9e9; } /* Topbar White **************************************/ .topbar.white { background: #fff!important; color: #848688!important; } /* Topbar Light Gray **************************************/ .topbar.light { background: #f2f4f6!important; color: #848688!important; } .topbar.light .call li, .topbar.light .social-icons li { border-left: 1px solid #e2e4e6!important; } .topbar.light .call li.first { border-left: 0px solid #e2e4e6!important; } /* Top Bar Color **************************************/ .topbar.color { background: #000; color: #f2f4f6!important; } .topbar.color i { color: #f2f4f6!important; } .topbar.color .social-icons li i { color: #f2f4f6!important; } /* Logo ================================================== */ #logo { margin-top: 10px; } #logo a img { float: left; width: auto; height: 80px; } /* 02 Main Menu ================================================== */ #navigation { float: right; } .js .selectnav { display: none; } .menu ul { margin: 0; padding: 0; list-style: none; } .menu ul li { position: relative; } .menu ul ul { position: absolute; display: none; top: 100%; left: 0; z-index: 100; width: 175px; } .menu > ul li { float: left; margin-left: 10px;} .menu ul li:hover > ul { display: block; } .menu ul a { display: block; position: relative; } .menu ul ul ul { top: 0; left: 100%; } .menu ul a { text-decoration: none; } .menu ul > li > a { color: #413f3f; font-weight: normal; font-size: 13px; line-height: 18px; padding: 40px 5px 40px 5px; overflow: hidden; text-transform: uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu ul > li > a:after { content: ''; display: block; width: 0px; height: 3px; background: #000; margin-top: 0px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; position: absolute; top: 0px; } .menu ul > li:hover > a:after { transition-delay: .2s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -ms-transition-delay: .2s; -o-transition-delay: .2s; width: 100%; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; } #current { border-top: 3px solid; } #current:after { transition-delay: .2s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -ms-transition-delay: .2s; -o-transition-delay: .2s; width: 0px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; } .ie8 #current:after { display: none; } .menu ul li a { -webkit-transition: border 150ms ease-in-out, background-color 150ms ease-in-out; -moz-transition: border 150ms ease-in-out, background-color 150ms ease-in-out; -o-transition: border 150ms ease-in-out, background-color 150ms ease-in-out; -ms-transition: border 150ms ease-in-out, background-color 150ms ease-in-out; transition: border 150ms ease-in-out, background-color 150ms ease-in-out; } /* Drop-Down */ .menu ul ul { background-color: #fff; z-index: 999; border-radius: 0 0 3px 3px; margin: 0 0 0 0; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); } .menu ul ul li a:after { content: ''; display: block; width: 0px; height: 3px; background: transparent; margin-top: 0px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; position: absolute; top: 0px; } .menu > ul ul li:hover > a { border-bottom: 0; background: transparent; } .menu ul ul li { margin: 0; padding: 0; width: 100%; margin-left: 0px; border-top: 0px!important; } .menu ul ul li a { color: #666; font-size: 12px; line-height: 18px; padding: 10px 16px !important; border: 0; text-transform: none; font-weight: normal; margin-left: 0px; border-top: 0px!important; } .menu ul ul li a:last-child { border-radius: 0 0 3px 3px; } .menu ul ul li { border-top: 1px solid #ddd !important; } .menu ul ul li:first-child { border: 0!important; } .menu ul ul li a:hover { color: #000; background-color: #8ECC3A; border: 0; border-top: 0px!important; } .menu ul ul li a { -webkit-transition: background-color 50ms ease-in-out; -moz-transition: background-color 50ms ease-in-out; -o-transition: background-color 50ms ease-in-out; -ms-transition: background-color 50ms ease-in-out; transition: background-color 50ms ease-in-out; } .menu ul ul ul { border: 1px solid #e0e0e0; border-radius: 0 3px 3px 3px; margin: -1px 0 0 0; } .menu .cols1, .menu .cols2, .menu .cols3, .menu .cols4, .menu .cols5 { position: absolute; display: none; overflow: auto; z-index: 999; background: #fff } .menu .cols1, .menu .col1 { width: 160px; border-top: 0px!important; } .menu .cols2, .menu .col2 { width: 320px } .menu .cols3, .menu .col3 { width: 480px } .menu .cols4, .menu .col4 { width: 640px } .menu .cols5, .menu .col5 { width: 800px } .menu>li.floatr>ul.cols1, ul.cols2, ul.cols3, ul.cols4, ul.cols5 { right: 0 } .menu>li:hover>ul.cols1, ul.cols2, ul.cols3, ul.cols4, ul.cols5 { display: block } .menu .col1, .menu .col2, .menu .col3, .menu .col4, .menu .col5 { float: left } .menu li>ul.cols1, ul.cols2, ul.cols3, ul.cols4, ul.cols5 { background-color: #fff; border-top: none; left: -1px; padding: 10px } ul.cols1 a:hover, ul.cols2 a:hover, ul.cols3 a:hover, ul.cols4 a:hover, ul.cols5 a:hover { background: none; border: none } ul.cols1 a, ul.cols2 a, ul.cols3 a, ul.cols4 a, ul.cols5 a { background: none; border: none } ul.cols1 p a, ul.cols2 p a, ul.cols3 p a, ul.cols4 p a, ul.cols5 p a { padding: 0 } .menu h4 { font-size: 13px; color: #848688; font-weight: 400; margin: 0 10px 5px; padding-bottom: 5px; letter-spacing: 0 } .menu h5 { font-size: 13px; margin: 8px 10px -3px 10px } .menu ol { list-style: none; margin: 7px 10px; padding: 0 } .menu ol a { color: #777; font-size: 12px; padding: 3px 0; line-height: 15px } .menu ol a:hover { color: #444 } .menu ol span { float: right; font-size: 8px; background: #ff0000; border-radius: 2px; padding: 0 3px; color: #fff; line-height: 10px; margin-top: 5px; } .menu p { font-size: 12px; line-height: 18px; margin: 9px 10px; padding: 0 } .menu p a { color: #848688; text-decoration: underline } .menu p a:hover { color: #555 } /* Mobile Navigation ================================================== */ #mobile-navigation { display: none; } @media only screen and (max-width: 767px) { #mobile-navigation { display: block; } #responsive, .search-container { display: none; } #header { z-index: 999; background-color: #fff; height: 79px; margin-top: 0; position: relative; width: 100%; } body { padding-top: 0; } #header #logo { width: 204px; left: 0; right: 0; position: absolute; margin: 0 auto; margin-top: 28px; z-index: 99; } a.menu-trigger { color: #a0a5aa; display: block; font-size: 18px; float: left; background: #fff; z-index: 100; position: relative; } .search-trigger { color: #a0a5aa; display: block; font-size: 18px; float: right; cursor: pointer; background: #fff; z-index: 100; position: relative; } #menu-search { display: none; } #menu-search input { float: left; box-shadow: none; border: 0; font-size: 16px; color: #a0a5aa; background: none; width: 50%; padding: 27px 0 23px 0; } a.menu-trigger, .search-trigger { padding: 25px 30px; } a.menu-trigger { padding-left: 0; } .search-trigger { padding-right: 0; } #menu-search input:focus { color: #848688; } #menu-search input::-webkit-input-placeholder { color: #a0a5aa; opacity: 1; } #menu-search input::-moz-placeholder { color: #a0a5aa; opacity: 1; } #menu-search input:-ms-input-placeholder { color: #a0a5aa; opacity: 1; } #menu-search input:focus::-webkit-input-placeholder { color: #848688; opacity: 1; } #menu-search input:focus::-moz-placeholder { color: #848688; opacity: 1; } #menu-search input:focus:-ms-input-placeholder { color: #848688; opacity: 1; } .jPanelMenu-panel { -webkit-box-shadow: 3px 0 20px 0 rgba(0, 0, 0, 0.28); box-shadow: 3px 0 20px 0 rgba(0, 0, 0, 0.28); } } #jPanelMenu-menu #current { border-bottom: 1px solid #eee; } #jPanelMenu-menu #current:after, #jPanelMenu-menu .sf-sub-indicator { display: none; } #jPanelMenu-menu li a { display: block; padding: 8px 10px !important; background-color: #f4f6f8; border-bottom: 1px solid #eceef0; color: #848688; font-weight: 500; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; font-weight: 500; outline: none; text-transform: uppercase;} #jPanelMenu-menu li a:hover { background-color: #f4f6f8; } #jPanelMenu-menu li li a { background-color: #fff; padding-left: 18px !important; font-size: 11px;} /* 03 Header Search Form ================================================== */ #header-search-button { padding: 40px 0 0 0; font-size: 18px; text-align: center; float: right; } .search-button a, .search-button:active, .search-button:visited { display: inline-block; color: #2d3e52; transition: color 0.3s ease } .search-button:hover { } #header-search-panel { height: 125px; background: #fff; display: none; position: absolute; left: 0; top: 0; z-index: 999; width: 100%; max-width: 100%; } #header-search-panel .container { max-width: 1600px; padding: 0 40px } #header-search { width: 100%; border: 0; height: 50px!important; padding-top: 7px; padding-bottom: 7px; line-height: 36px!important; font-size: 36px; font-weight: 300; color: #b9bec3; letter-spacing: 0px; border-bottom: 0px solid rgba(0, 0, 0, 0.05)!important; background: transparent!important; position: absolute; left: 0; padding-left: 20px; top: 35px; vertical-align: middle; -webkit-font-smoothing: antialiased } #header-search:focus { outline: none!important; color: #b9bec3; } #header-search-panel .fake-submit-button { position: absolute; left: 0; top: 48px; height: 30px; line-height: 30px; width: 50px; display: inline-block; text-align: left; font-size: 30px; color: #b9bec3; padding-right: 20px; overflow: hidden; transition: color 0.3s ease-in-out } #header-search-panel input[type="submit"] { opacity: 0!important; filter: alpha(opacity=0)!important; width: 50px; height: 30px; overflow: hidden; padding: 0; text-indent: -9999px; position: absolute; left: 0; top: 0; z-index: 999; } #header-search-panel .search > div { position: relative; width: 100%; height: 90px; min-height: 90px; transition: border-color 0.3s ease; color: #2d3237; } #header-search-panel .close-search { color: #b9bec3; cursor: pointer; width: 40px; line-height: 32px; font-size: 40px; height: 40px; position: absolute; right: 0; top: 48px; text-align: center; opacity: 0; transition: opacity 0.2s ease; display: inline-block; z-index: 12; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #header-search-panel .close-search:hover { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); } #header-search-panel .search > div .close-search { opacity: 1 } #header-search-panel .search > div:hover .fake-submit-button { color: #3498db } /* 04 Headings ================================================== */ .main-headline h3 { font-size: 26px; text-align: center; font-weight: 300; color: #2d3237; font-family: "Calibri"; margin-top: 30px; } .main-headline p { font-size: 14px; text-align: center; line-height: 18px; color: #aaa; } .main-headline h3.color-white { color: #fff; } .headline { font-size: 14px; font-weight: 800; padding-right: 10px; font-family: "Calibri"; text-transform: uppercase; letter-spacing: 3px; } .brd-headling { border-bottom: 3px solid #76b152; width: 25px; float: left; margin: 0 0 3px 0; } /* 05 Basic Elements ================================================== */ /* Title bar ================================================== */ #titlebar { background-color: #eff4f7; min-height: 80px; margin: 0 0 40px 0; padding-top: 20px; } #titlebar h2 { font-size: 20px; font-weight: 500; float: left; width: 100%; margin: 25px 0 0 0; } #titlebar span { font-weight: 300; color: #a0a5aa; } /* Tagline ================================================== */ #tagline { margin: 60px 0 40px 0; font-size: 20px; text-align: center; font-weight: 500; color: #505050; } #tagline p { line-height: 28px; margin: 3px 0; } #tagline span, #tagline a { background: #a0a5aa; color: #fff; padding: 0 7px 1px 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05); } /* Breadcrumbs ================================================== */ #breadcrumbs ul { float: right; font-size: 13px; margin-top: 7px; font-weight: normal; } #breadcrumbs ul li { display: inline-block; color: #fff; margin: 0 0 0 5px; } #breadcrumbs ul li:after { content: ""; font-family: "FontAwesome"; font-size: 12px; color: #fff; margin: 0 0 0 9px; opacity: 0.5; } #breadcrumbs ul li:last-child:after { content: " "; margin: 0; } #breadcrumbs ul li:last-child a, #breadcrumbs ul li a { color: #fff; font-weight: normal; } #breadcrumbs ul li a:hover { color: #fff; text-decoration: underline; } #breadcrumbs ul li:first-child { padding-right: 0; margin-left: 0; } #breadcrumbs ul li:last-child { color: #fff; background: none; } #breadcrumbs ul li:last-child { padding: 0; background: none; } /* Social Icons Footer ================================================== */ .social-icons-footer { margin: -3px 0 0 0; float: right; } .social-icons-footer li { display: inline; list-style: none; float: left; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .social-icons-footer li i { display: block; padding-top: 5px; } /* Magnifying Popup ================================================== */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; overflow: hidden; position: fixed; background: #000; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: -10px; left: 0; width: 100%; height: 100%; z-index: 1001; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { height: 100%; text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 505; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #a0a5aa; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 504; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: #fff; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } .mfp-s-loading .mfp-arrow { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 506; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; opacity: 1; padding: 0 0 18px 10px; text-indent: 99999; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: 10px; top: 40px; padding-right: 6px; width: 100%; background-image: url(../images/mfp-close.png); background-repeat: no-repeat; background-position: 100% 50%; text-indent: 9999; } .mfp-counter { position: absolute; top: 0; right: 0; color: #a0a5aa; font-size: 13px; line-height: 18px; } .mfp-arrow { position: absolute; top: 0; opacity: 0; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: solid transparent; } .mfp-arrow.mfp-arrow-left { background-image: url(../images/mfp-left.png); background-repeat: no-repeat; background-position: 50%; } .mfp-arrow.mfp-arrow-right { background-image: url(../images/mfp-right.png); background-repeat: no-repeat; background-position: 50%; right: 0; } .mfp-content:hover .mfp-arrow { opacity: 1; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } .mfp-iframe-holder .mfp-close { top: -40px; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); } .mfp-figure { line-height: 0; } .mfp-bottom-bar { margin-top: -30px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-break: break-word; padding-right: 36px; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } /* Media Queries for Magnific Popup */ @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0 } /* The shadow behind the image */ .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } } @media all and (max-width: 800px) { .mfp-arrow { width: 70px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.85; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Flickr Widget ====================================*/ .flickr-widget-blog { margin: 5px -15px 0 0; } .flickr-widget-blog img { display: block; width: 100%; } .flickr-widget-blog a { float: left; width: 76px; height: 76px; margin-right: 10px; margin-bottom: 10px; border: 5px solid #f2f4f6; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border-radius: 2px; } .flickr-widget-blog a:hover { border: 5px solid #a0a5aa; border-radius: 2px; } /* Google Maps ====================================*/ #googlemaps { padding-bottom: 30%; border-radius: 2px; } .google-map-container { margin: 0; } .google-map-container img { max-width: none !important; } /* 06 Revolution Slider ================================================== */ .tp-banner-container { width: 100%; position: relative; no-repeat center bottom #f1eeee;} .tp-banner { width: 100%; position: relative; } .tp-banner-fullscreen-container { width: 100%; position: relative; padding: 0; } /* Navigation ====================================*/ .tparrows { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: background-color 150ms ease-in-out, opacity 0.2s ease-out; -moz-transition: background-color 150ms ease-in-out, opacity 0.2s ease-out; -o-transition: background-color 150ms ease-in-out, opacity 0.2s ease-out; -ms-transition: background-color 150ms ease-in-out, opacity 0.2s ease-out; transition: background-color 150ms ease-in-out, opacity 0.2s ease-out; } .tparrows.hidearrows { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .tp-leftarrow.default, .tp-rightarrow.default { z-index: 100; cursor: pointer; position: relative; border: 1px solid rgba(255, 255, 255, 0.5); width: 40px; height: 80px; } .tp-leftarrow:hover, .tp-rightarrow:hover { border: 1px solid rgba(255, 255, 255, 1); } .tp-leftarrow.default { background-image: url(../images/rev/slider-left-arrow.png); background-repeat: no-repeat; background-position: 45% 50%; border-radius: 2px; left: 15px; } .tp-rightarrow.default { background-image: url(../images/rev/slider-right-arrow.png); background-repeat: no-repeat; background-position: 55% 50%; border-radius: 2px; right: 15px; } /* Other Styles ====================================*/ .tp_inner_padding { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; max-height: none !important; } .tp-simpleresponsive .slotholder *, .tp-simpleresponsive img { -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position: absolute; visibility: hidden; } .tp-simpleresponsive img { max-width: none; } .noFilterClass { filter: none !important; } /* Shadows ====================================*/ .tp-bannershadow { position: absolute; margin-left: auto; margin-right: auto; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .tp-bannershadow.tp-shadow1 { background: url(../assets/shadow1.png) no-repeat; background-size: 100%; width: 890px; height: 30px; bottom: -30px; } .tp-bannershadow.tp-shadow2 { background: url(../assets/shadow2.png) no-repeat; background-size: 100%; width: 890px; height: 60px; bottom: -60px; } .tp-bannershadow.tp-shadow3 { background: url(../assets/shadow3.png) no-repeat; background-size: 100%; width: 890px; height: 60px; bottom: -60px; } /* Fullscreen Video ====================================*/ .caption.fullscreenvideo { left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; } .caption.fullscreenvideo iframe { width: 100% !important; height: 100% !important; } .tp-caption.fullscreenvideo { left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; } .tp-caption.fullscreenvideo iframe { width: 100% !important; height: 100% !important; } /* Basic Settings For Banner ====================================*/ .tp-simpleresponsive img { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .tp-simpleresponsive a { text-decoration: none; } .tp-simpleresponsive ul { list-style: none; padding: 0; margin: 0; } .tp-simpleresponsive >ul >li { list-stye: none; position: absolute; visibility: hidden; } .tp-transparentimg { content: "url(../assets/transparent.png)" } .tp-3d { -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } /* 07 Flexslider ================================================== */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles */ .flexslider { margin: 0; padding: 0; z-index: 1; position: relative; } .flexslider .slides > li { display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides > li:first-child { display: block; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme */ .flexslider { margin: 0; border: none; position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .flex-direction-nav a { position: absolute; top: 50%; display: block; margin-top: -15px; width: 40px; height: 40px; text-align: center; line-height: 40px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-border-radius: 50%; border-radius: 50%; } .flex-direction-nav a i { color: #fff; } .flex-direction-nav .flex-next { right: 0px; } .flex-direction-nav .flex-next:before { color: #fff; content: '\f105'; font-family: FontAwesome; font-weight: 100; font-size: 18px; } .flex-direction-nav .flex-prev { left: 0px; } .flex-direction-nav .flex-prev:before { color: #fff; content: '\f104'; font-family: FontAwesome; font-weight: 100; font-size: 18px; } .flexslider:hover .flex-next, .flexslider:hover .flex-prev { opacity: 1; border: 1px solid #fff; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); } .flexslider:hover .flex-next { right: 20px; } .flexslider:hover .flex-prev { left: 20px; } .flex-direction-nav .disabled { opacity: .3 !important; filter: alpha(opacity=30); cursor: default; } #main-slider .flexslider:hover .flex-next, #main-slider .flexslider:hover .flex-prev { opacity: .7; background: rgba(0, 0, 0, .6); border: 1px solid #fff; } /* IE8 Styles */ .ie8 .flex-direction-nav a { filter: alpha(opacity=50); } .ie8 .flex-direction-nav a:hover { filter: alpha(opacity=100) } /* Caption */ .slide-caption { margin: 0; position: absolute; display: block; z-index: 120; right: 15px; bottom: 15px; color: #fff; background-color: #000; background: rgba(0, 0, 0, 0.5); border-radius: 2px; padding: 5px 9px; font-size: 12px; font-weight: 300; line-height: 18px; } .slide-caption a { color: #fff; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .bg-tagline { width: 100% !important; position: relative; padding: 12px 0 1px; background: #D6E7E7; border-bottom: 1px solid #3d6802; border-top: 1px solid #3d6802;} .bg_top { width: 100% !important; position: relative; padding: 0px 0 10px; background: #5a5a5a; } .bg-tagline h3 { color: #000; font-weight: 300; font-family: "Calibri"; font-size: 28px; margin-bottom: 4px; margin-top: 6px; } .bg-tagline h3 span { color: #000; font-weight: 600; font-family: "Calibri"; font-size: 28px; margin-bottom: 4px; margin-top: 6px; } .bg-tagline p { color: #000; font-weight: normal; font-size: 14px; line-height: 35px; font-weight: 300; } .bg-tagline a { font-size: 16px; font-weight: 300; line-height: 18px; margin-top: 10px; padding: 10px; } /* 08 Featured Boxes ================================================== */ .featured-boxes { float: left; margin: 25px 0 5px 0; } .featured-box { margin: 0 0 0 0;} .circle-1 { width: 180px; height: 180px; display: block; border-radius: 50%; /*border: 1px solid;*/ text-align: center; margin: 10px auto; } .square-1 { width: 90px; height: 90px; display: block; border-radius: 5px; border: 1px solid; text-align: center; margin: 10px auto; } .circle-1 i { font-size: 40px; margin: 31px 3px; left: 30%; float: left; z-index: 5; position: relative; } .square-1 i { font-size: 40px; margin: 22px 0; left: 28%; float: left; z-index: 5; position: relative; } .circle-1, .circle-1 i, .square-1, .square-1 i, .icon-center { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .featured-box:hover > .circle-1, .featured-box:hover > .square-1 { background-color: #a0a5aa; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } .featured-box:hover > .circle-1 i, .featured-box:hover > .square-1 i { color: #fff; transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .featured-desc { text-align: center; margin: 18px 5px 0 5px; } .featured-desc h3 { font-size: 24px; margin-bottom: 10px; font-weight: 500; font-family: "Calibri"; letter-spacing: -0.5px; } .featured-desc a { margin-top: 10px; } /* Circle Style 2*/ .circle-2 { width: 48px; height: 48px; display: block; border-radius: 50%; background-color: #f2f4f6; text-align: center; float: left; -webkit-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -moz-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -o-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; } .circle-2-line { width: 48px; height: 48px; display: block; border-radius: 50%; border: 1px solid; text-align: center; float: left; -webkit-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -moz-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -o-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; } .circle-2 i, .circle-2-line i { font-size: 20px; margin: 0; top: 12px; left: 30%; float: left; color: #fff; z-index: 5; position: relative; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .square-2 { width: 44px; height: 44px; display: block; border-radius: 3px; background-color: #f2f4f6; text-align: center; float: left; -webkit-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -moz-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -o-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; margin-top: 5px; } .square-2-line { width: 44px; height: 44px; display: block; border-radius: 3px; border: 1px solid; text-align: center; float: left; -webkit-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -moz-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -o-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; } .square-2 i, .square-2-line i { font-size: 20px; margin: 0; top: 10px; left: 30%; float: left; color: #fff; z-index: 5; position: relative; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .featured-box:hover > .circle-2, .featured-box:hover > .square-2 { background-color: #fff; } .featured-box:hover > .circle-2 i, .featured-box:hover > .circle-2-line i, .featured-box:hover > .square-2 i, .featured-box:hover > .square-2-line i { -webkit-animation: toBottomFromTop 0.25s forwards; -moz-animation: toBottomFromTop 0.25s forwards; animation: toBottomFromTop 0.25s forwards; animation-delay: 0.03s; -webkit-animation-delay: 0.03s; color: #fff; } .featured-desc-2 { text-align: left; margin: 10px 10px 20px 70px; } .featured-desc-2 h3 { font-size: 18px; font-weight: 300; font-family: "Calibri"; } .featured-desc-2 p { font-size: 13px; } .featured-desc-2 a { font-size: 13px; position: relative; top: -10px; } .featured-desc-2 li { display: inline-block; margin-right: 10px; } .icon-left { width: 48px; height: 48px; display: block; float: left; -webkit-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -moz-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -o-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; } .icon-left i { font-size: 30px; margin: 0; top: 5px; left: 30%; float: left; z-index: 5; position: relative; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Third Style */ .icons-center { text-align: center; } .icons-center i { font-size: 100px; } .featured-box:hover > .icons-center { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .featured-desc-center { text-align: center; margin: 0px 30px 0 30px; } .featured-desc-center h3 { font-size: 20px; margin-bottom: 10px; font-weight: 600; font-family: "Calibri"; letter-spacing: -0.5px; } .featured-desc-center a { margin-top: 10px; } @-webkit-keyframes toBottomFromTop { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes toBottomFromTop { 49% { -moz-transform: translateY(100%); } 50% { opacity: 0; -moz-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes toBottomFromTop { 49% { transform: translateY(100%); } 50% { opacity: 0; transform: translateY(-100%); } 51% { opacity: 1; } } .featured-box li { line-height: 28px; font-size: 14px; } /* 09 Services Boxes ================================================== */ .services-box { display: block; position: relative; z-index: 2 } .services-box-animated { text-align: center; width: 100%; height: auto; background: transparent; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden } .services-box-animated .inner { -webkit-perspective: 100px; -moz-perspective: 100px; -ms-perspective: 100px; perspective: 100px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 0!important; -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s!important; -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 0!important; transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 0!important } .services-box-animated .front, .services-box-animated .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden } .services-box-animated .front { -ms-transform: rotateY(0deg); z-index: 8; display: block; width: 100%; height: auto; border: 1px solid #eceef0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 60px 20px; webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .services-box-animated .front h3 { margin: 10px 0; font-family: "Calibri"; font-weight: 200; } .services-box-animated .front i { font-size: 80px; text-align: center; } .services-box-animated .front img { margin: 20px auto; } .services-box-animated .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); overflow: hidden; color: #fff; background: #fff; border: 1px solid #eceef0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; padding: 20px; webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .services-box-animated .back h3 { color: #fff; font-family: "Calibri"; font-weight: 200; margin: 10px 0; } .services-box-animated .back p { color: #fff; margin: 10px 0; } .services-box-animated:hover .inner, .no-csstransitions .services-box-animated .inner { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg) } .services-box-animated:hover .front { z-index: -1 } /* 10 Portfolio With Description ================================================== */ .portfolio-item { display: block; } .item-description { padding: 20px; text-align: left; background-color: #f8fafc; border-radius: 0 0 2px 2px; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); margin-top: -4px; } .item-description-bgwhite { background-color: #fff; } /*.portfolio-item img { border-radius: 6px 6px 0 0; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s; -o-transition-duration: 0.7s; } .portfolio-item:hover img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s; -o-transition-duration: 0.7s; }*/ .item-description, .item-description h5, .item-description span { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .item-description h5 { font-size: 14px; line-height: 20px; color:000; font-family: 'Helvetica';} .item-description span { color: #ccc; font-size: 12px!important; line-height: 19px; font-style: italic; } .item-description i { color: #ccc; font-size: 13px; font-weight: 400; line-height: 0px; text-align: right; margin-top: -8px; float: right; } #portfolio-wrapper .item-description { padding: 10px; } #portfolio-wrapper .item-description h5 { line-height: 20px; } #related-work .item-description { padding: 20px; } #related-work .item-description h5 { line-height: 20px; } .portfolio-item:hover > figure > .item-description { background-color: #fff; } .portfolio-item:hover > figure > .item-description a h5 { color: #fff; } .portfolio-item:hover > figure > .item-description span { color: #000; opacity: 0.5; filter: alpha(opacity=50); } /* Hover / Animations ====================================*/ .hovericon { position: absolute; left: 50%; top: 0; color: #fff; font-size: 18px; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; background-color: rgba(255, 255, 255, 0.2)!important; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5)!important; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-opacity: 0.00; -khtml-opacity: 0.00; opacity: 0.00; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .portfolio-item:hover .hovericon, .post-img:hover .hovericon { position: absolute; left: 50%; top: 65%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -moz-opacity: 1.00; -khtml-opacity: 1.00; opacity: 1.00; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .hovercover { display: none; } .hovercover { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000,endColorstr=#59000000)"; background-color: rgba(0, 0, 0, 0.6); opacity: 0; border-radius: 2px; } .portfolio-item .hovercover { border-radius: 2px 2px 0 0; } .hoverzoom { background: url(../images/hoverzoom.png) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.png) no-repeat; display: block; height: 19px; width: 19px; margin: 21px 0 0 20px; } /* 11 Portfolio Without Description ================================================== */ .portfolio-alt { float: left; } .portfolio-alt li.one-third { width: 100%; margin-right: 1px!important; margin-left: 0px!important; margin-bottom: 1px!important; } .portfolio-item-alt img { -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s; -o-transition-duration: 0.7s; height: 100%; } .portfolio-item-alt:hover img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); } /* Hover / Animations ====================================*/ .portfolio-item-alt:hover .hovericon { position: absolute; left: 50%; top: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -moz-opacity: 1.00; -khtml-opacity: 1.00; opacity: 1.00; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .hovercover-alt { display: none; } .hovercover-alt { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000,endColorstr=#59000000)"; background-color: rgba(0, 0, 0, 0.35); opacity: 0; } .portfolio-item-alt:hover .hovercover-alt { opacity: 1; } .hoverzoom { background: url(../images/hoverzoom.png) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.png) no-repeat; display: block; height: 19px; width: 19px; margin: 21px 0 0 20px; } .mediaholder-alt { position: relative; overflow: hidden; width: 100%; height: 280px!important; } .mediaholder-alt img { width: 100%; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* 12 Portfolio Filteration ================================================== */ #portfolio-wrapper .portfolio-item { margin-bottom: 20px; } #portfolio-wrapper { display: block; } #filters { /*text-align: center;*/ margin: 0 20px!important; } #filters li { display: inline-block; line-height: 24px; background: #fff; overflow: hidden; } #filters a { color: #b9bec3; font-size: 14px; font-weight: 500; display: block; padding: 5px 10px; margin: 0 0 0 5px; border-radius: 3px; line-height: 20px; /*border: 1px solid #f2f4f6;*/ border: none; -webkit-transition: background-color 200ms ease-in-out, color 200ms ease-in-out; -moz-transition: background-color 200ms ease-in-out, color 200ms ease-in-out; -o-transition: background-color 200ms ease-in-out, color 200ms ease-in-out; -ms-transition: background-color 200ms ease-in-out, color 200ms ease-in-out; transition: background-color 200ms ease-in-out, color 200ms ease-in-out; text-transform:capitalize; } #filters a:hover, #filters a.selected { /*background-color: #a0a5aa !important;*/ color: #3399cc !important; /*border: 1px solid !important;*/ } /* 13 Isotope Filtering ================================================== */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* Isotope CSS3 transitions */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /* Disabling Isotope CSS3 transitions */ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* Disable CSS transitions for containers with infinite scrolling */ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* 14 Showbiz Carousel ================================================== */ .showbiz { position: relative; margin: 10px; } /* Navigation Style 1 ====================================*/ .showbiz-navigation { width: 141px; height: 35px; margin: 0 auto 20px; padding-left: 10px; padding-top: 20px; } .sb-navigation-left, .sb-navigation-right, .sb-navigation-left.notclickable, .sb-navigation-right.notclickable { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .sb-navigation-left, .sb-navigation-right { width: 65px; height: 35px; cursor: pointer; float: left; border-radius: 2px; border: 1px solid #d7dce1; } .sb-navigation-left { margin-right: 5px; } .sb-navigation-left i, .sb-navigation-right i { line-height: 34px; font-size: 24px; color: #3399cc; margin-left: 28px; } .sb-navigation-left:hover i, .sb-navigation-right:hover i { color: #fff!important; } .sb-navigation-left:hover, .sb-navigation-right:hover { background-color: #a0a5aa; } .sb-navigation-left.notclickable, .sb-navigation-right.notclickable { cursor: default; } .sb-navigation-left.notclickable i, .sb-navigation-right.notclickable i { color: #d7dce1; } /* Navigation Style 2 ====================================*/ .sb-navigation-left-2, .sb-navigation-right-2, .sb-navigation-left-2.notclickable, .sb-navigation-right-2.notclickable { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .sb-navigation-left-2, .sb-navigation-right-2 { cursor: pointer; top: 100px; position: relative; } .sb-navigation-left-2 { float: left; } .sb-navigation-right-2 { float: right; } .sb-navigation-left-2 i, .sb-navigation-right-2 i { line-height: 24px; font-size: 24px; color: #eceef0; } .sb-navigation-left-2:hover, .sb-navigation-right-2:hover { } .sb-navigation-left-2.notclickable, .sb-navigation-right-2.notclickable { cursor: default; } .sb-navigation-left-2.notclickable i, .sb-navigation-right-2.notclickable i { color: #eceef0; } /* Navigation Style 3 ====================================*/ .sb-navigation-left-3, .sb-navigation-right-3, .sb-navigation-left-3.notclickable, .sb-navigation-right-3.notclickable { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .sb-navigation-left-3, .sb-navigation-right-3 { cursor: pointer; margin: 80px 0px; border: 1px solid #3399cc; border-radius: 50%; width: 30px; height: 30px; } .sb-navigation-left-3 { float: left; } .sb-navigation-right-3 { float: right; } .sb-navigation-left-3 i, .sb-navigation-right-3 i { line-height: 30px; font-size: 18px; color: #3399cc; padding-left: 12px; } .sb-navigation-left-3:hover, .sb-navigation-right-3:hover { background: #fff; } .sb-navigation-left-3.notclickable, .sb-navigation-right-3.notclickable { cursor: default; } .sb-navigation-left-3.notclickable i, .sb-navigation-right-3.notclickable i { color: #fff; } /* Navigation Style 4 ====================================*/ .showbiz-navigation-4 { width: 70px; height: 25px; float: right; margin: -27px 0 0 -2px; padding-left: 10px; } .sb-navigation-left-4, .sb-navigation-right-4, .sb-navigation-left-4.notclickable, .sb-navigation-right-4.notclickable { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .sb-navigation-left-4, .sb-navigation-right-4 { width: 25px; height: 25px; cursor: pointer; float: left; border-radius: 2px; border: 1px solid #d7dce1; } .sb-navigation-left-4 { margin-right: 3px; } .sb-navigation-left-4 i, .sb-navigation-right-4 i { line-height: 24px; font-size: 17px; color: #3399cc; margin-left: 10px; } .sb-navigation-left-4:hover i, .sb-navigation-right-4:hover i { color: #fff!important; } .sb-navigation-left-4:hover, .sb-navigation-right-4:hover { background-color: #a0a5aa; } .sb-navigation-left-4.notclickable, .sb-navigation-right-4.notclickable { cursor: default; } .sb-navigation-left-4.notclickable i, .sb-navigation-right-4.notclickable i { color: #d7dce1; } /* Basic Styles ====================================*/ .showbiz ul, .showbiz li { list-style: none; margin: 0; padding: 0; } .showbiz ul li { position: relative; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; margin: 20px 20px 5px 0; } .showbiz.our-clients ul li { margin: 10px 40px 30px 0; } .showbiz.our-clients { margin-bottom: -10px; } .showbiz .overflowholder { overflow: hidden; position: relative; width: 100%; z-index: 2; } .showbiz .overflowholder ul { width: 100000px; position: absolute; top: 0px; left: 0px; } .showbiz .overflowholder ul li { float: left !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative;} .client{width: 120px !important;} .showbiz .overflowholder ul li .four { width: 265px!important; } .mediaholder { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } .mediaholder img { width: 100%; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* 15 Parallex Section ================================================== */ .parallex { overflow: hidden; width: 100%; background-attachment: fixed; background-position: 50% 0; } .parallex .container { text-align: center; padding: 80px 0; } .parallex, .parallex h1, .parallex h2, .parallex h3, .parallex h4, .parallex h5, .parallex h6, .parallex a:hover { color: #fff; } .parallex .titles { border-color: rgba(255, 255, 255, 0.2); } .parallex a { color: #fff; color: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 1920px) { .parallex { background-size: cover; } } @media only screen and (max-width: 1024px) { #navigation { margin-left: 140px;} .menu > ul li { margin-left: -10px;} .menu > ul li a{padding:10px 0;} .parallex { background-size: cover; background-attachment: scroll; background-position: top center !important; } } /* @media only screen and (max-width: 960px) { #navigation { display: none;} #mobile-navigation { display: block; } } */ /*------------------------------------------ parallex bagkground ------------------------------------------*/ #parallex1 { background-image: url(../images/parallex/parallex1.png); } #parallex2 { background-image: url(../images/parallex/parallex2.png); } #parallex3 { background-image: url(../images/parallex/parallex3.png); } #parallex4 { background-image: url(../images/parallex/parallex4.png); } #parallex5 { background-image: url(../images/parallex/parallex5.png); } #parallex-inner { background-image: url(../images/parallex/parallex-inner1.png); margin-bottom: 0px; } #parallex-inner .container { text-align: left; padding: 16px 0 2px; } #parallex-inner .container h1 { font-size: 36px; font-family: 'Calibri'; font-weight: 200; line-height: 36px; letter-spacing: -1px } #parallex-inner .container p { font-size: 13px; color: #b9bec3; } .parallex-slider { height: 100%; min-height: 100%; position: relative; overflow: hidden; text-align: center; z-index: 750; } .parallex-slider .parallex-holder { display: inline-block; position: absolute; top: 50%; left: 80%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 820px; max-width: 100%; } .js .parallex-slider .parallex-holder { opacity: 0; } .parallex-slider-title { font-size: 4em; letter-spacing: 0.3em; margin-bottom: 20px; text-transform: uppercase; text-align: center; display: inline-block; color: #FFFFFF; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .parallex-slider-description { color: #FFFFFF; font-size: 12px; letter-spacing: 1px; margin-bottom: 10px; text-align: center; text-transform: uppercase; display: block; } .btn-holder { display: block; margin: 10px auto; text-align: center; } .parallex-slider-btn { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; padding: 10px 15px; font-size: 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; text-align: center; display: inline-block; -webkit-transition: 0.2s background linear; -moz-transition: 0.2s background linear; transition: 0.2s background linear; } .parallex-slider-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.15); } /* 16 Some Page Style ================================================== */ /* Landing Page ================================================== */ #landing_banner { width: 100%; height: 500px; background-color: #1e1e1e; position: relative; overflow: hidden; } .bg_landing_banner { background: url(../images/bg-landing.png) no-repeat; width: 100%; height: 100%; margin: 0 auto; position: absolute; background-size: 100%; } #landing_banner h1 { color: #fff; font-size: 44px; line-height: 46px; font-family: "Calibri"; font-weight: 800; letter-spacing: -0.05em; margin-top: 40px; } #landing_banner p { color: #fff; font-size: 16px; line-height: 20px; margin-top: 30px; margin-bottom: 30px; } .landing_socials { position: relative; left: 40%; font-size: 40px; } .landing_socials .socials_list li { margin-right: 30px; } .iphone-w-iphone { margin-top: 88px; float: right; } .landing-boxes { float: left; margin: 0px 0 0px 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .landing-boxes:hover { background: #fff; } .landing-boxes img { width: 100%; } .landing-boxes:hover img { opacity: 0.7; } .landing-boxes h3 { color: #2d3237; font-size: 20px; line-height: 24px; font-family: "Calibri"; font-weight: 200; letter-spacing: -0.01em; margin-top: 20px; text-align: center; } .landing-boxes p { color: #2d3237; font-size: 14px; line-height: 24px; margin-top: 30px; margin-bottom: 30px; text-align: center; padding: 0 20px; } .landing-boxes a { font-size: 14px; font-weight: 300; margin-top: 30px; text-align: center; } .landing-boxes i { font-size: 20px; position: relative; top: 3px; } .landing-imac h2 { color: #2d3237; font-size: 24px; line-height: 30px; font-family: "Calibri"; font-weight: 200; letter-spacing: -0.01em; margin-top: 20px; padding-right: 50px; } .landing-imac p { line-height: 24px; margin-top: 20px; margin-bottom: 30px; padding: 0 50px 0 0; } .landing-imac ul { float: left; } .landing-imac ul li { display: inline-block; font-size: 30px; margin-right: 15px; color: #afb4b9; } .landing-imac ul li:hover { display: inline-block; font-size: 30px; margin-right: 15px; color: #ff0000; } /* Our Team ================================================== */ .team { background: #fff; border-radius: 0 0 2px 2px; margin-bottom: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; top: 0; } .team:hover { box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); } .team-name { padding: 0px 0 3px; margin: 0 5px 5px 5px; border-bottom: 1px solid #eceef0; } .team-name h5 { line-height: 14px; font-weight: 600; } .team-name span { display: block; font-weight: 300; color: #b9bec3; font-size: 12px; font-style: italic; } .team-about { padding: 0 0 1px 0; margin: 0 10px 0px 5px; } .team-email { border-top: 1px solid #eceef0; padding: 0; margin: 0 5px 0px 5px; font-weight: 300; color: #b9bec3; font-size: 12px; } .team-email a { font-weight: 300; color: #b9bec3; font-size: 12px; } .team-email a:hover { } .team-about p { line-height: 20px; margin-bottom: 10px;} .team-img { border-radius: 2px 2px 0 0; } .team-alt { width: 100%; float: left; } .team-alt .img-wrp { width: 13%; float: left; } .team-alt .content { width: 86%; float: right; text-align: left; } .img-wrp { position: relative; } .img-wrp img { display: block; border-radius: 2px; border:1px solid #CCC;} .overlay-wrp { position: absolute; top: 0px; left: 0px; display: none; height: 100%; width: 100%; } .overlay-wrp .overlay { opacity: 0.5; filter: alpha(opacity=50); height: 100%; width: 100%; border-radius: 2px; } .overlay { background: #000; } .overlay-content.social-icons { margin-top: -11px; position: absolute; top: 20%; left: 25%; z-index: 10; } .overlay-content.social-icons li a { color: #fff!important; background: rgba(0, 0, 0, 0.7)!important; border-radius: 50%!important; font-size: 18px!important; } /* Contact Details ====================================*/ .contact-informations { margin: 20px 0 0 0; } .contact-informations p { margin: 0; } .contact-details-alt p { margin: -2px 0 0 22px; line-height: 18px; } .contact-informations li i { float: left; margin: 3px 5px 0 0; color: #909090; } .contact-informations li, .contact-informations.second li { margin: 3px 0; } /* 404 Pages ================================================== */ #not-found { margin: 90px 0 115px 0; } #not-found h2 { text-align: center; font-size: 240px; line-height: 210px; font-weight: 600; letter-spacing: -5px; } #not-found h3 { text-align: center; font-size: 40px; line-height: 100px; font-weight: 300; text-transform: uppercase; } #not-found p { text-align: center; font-size: 14px; line-height: 24px; color: #b9bec3; } #not-found a:hover i { color: #fff!important; } /* 17 Recent Blog Post ================================================== */ .recent-blog { margin-bottom: 38px; background: #fff; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .08); border-radius: 0 2px 2px 0px; } .recent-blog img { width: 100%; border-radius: 2px 2px 0px 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .recent-blog:hover img { opacity: 0.8; } .recent-blog h4 { line-height: 21px; padding: 10px 10px 0; font-size: 16px; } .recent-blog h4 a { color: #333 } .recent-blog h4 a:hover { color: #848688 } .recent-blog p { margin-bottom: 0; padding: 10px; font-size: 13px; line-height: 22px; } .recent-blog .author { margin-bottom: 0; padding: 10px; font-size: 13px; border-top: 1px solid #eff4f7; text-align: center; color: #b9bec3; } .margin-1 { margin: 28px 0 22px 0 } .date { float: left; text-align: center; height: 0; position: relative; top: 20px; z-index: 9; } .date span { display: block; background: #ff0000; } .day { padding: 5px 10px 0 10px; font-size: 14px; font-weight: 500; color: #fff; border-radius: 0px 2px 0px 0 } .month { background: #ccc; padding: 0 10px 2px 10px; color: #fff; border-radius: 0px 0px 2px 0; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07) } .margin-reset { margin-top: -10px } .sidebar.padding-reset { padding-top: 0 } /* 18 Blog Section ================================================== */ .post { padding: 0 0 40px 0; margin: 0 0 40px 0; border-bottom: 1px solid #eceef0; } .post-img img, .post-img iframe { border-radius: 2px; } .post-img { margin: 0 0 30px 0; } .medium .post-img { margin: 0; } /* Post Content */ .post-content, .post-format { float: left; } .post-format { border-right: 1px solid #eceef0; margin-right: 20px; padding: 5px 15px; } .post-format h2 { font-weight: 600; color: #b9bec3; text-align: center; border-bottom: 1px solid #eceef0; font-size: 36px; line-height: 20px; padding-bottom: 20px; margin-bottom: 10px; } .post-format h4 { font-weight: 600; color: #e2e4e6; text-align: center; font-size: 14px; line-height: 20px; } .post-format span { font-weight: 300; color: #e2e4e6; text-align: center; } .post-format span:hover { font-weight: 300; color: #000; text-align: center; } .post-format .icon-camera { font-size: 14px; margin-top: 23px; left: 38% } .post-content { margin: 0; } .medium .post-content { margin: 0; } .post-content h2 a { color: #2d3237; font-weight: 700; letter-spacing: -0.5px; } .post-content h2 a:hover { color: #989988; } .post-content p { margin-bottom: 19px; } .post-content .testimonial { background: #006699; color: #fff; padding: 20px; border-radius: 2px; font-size: 18px; font-weight: 500; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } .post-content .testimonial strong { font-size: 40px; line-height: 30px; color: #fff; } .post-content .testimonial span { margin-left: 20px; } .post-content .testimonial p.client { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-style: normal; margin-top: -10px; margin-bottom: 0px; margin-left: 20px; } .post-content .testimonial_left { background: #006699; color: #fff; padding: 20px; border-radius: 2px; font-size: 18px; font-weight: 500; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } .post-content .testimonial_left strong { font-size: 40px; line-height: 30px; color: #fff; } .post-content .testimonial_left span { margin-left: 20px; } .post-content .testimonial_left p.client { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-style: normal; margin-top: -10px; margin-bottom: 0px; margin-left: 20px; } /* .testimonial_page { background: #ccc; color: #000; padding: 20px; border-radius: 2px; font-size: 18px; } .testimonial_page strong { font-size: 40px; line-height: 30px; color: #fff; } .testimonial_page span { margin-left: 20px; } .testimonial_page p.client { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-style: normal; margin-top: -10px; margin-bottom: 0px; margin-left: 20px; }*/ /* Meta */ .meta { margin: 0 0 10px 0; } .meta ul { line-height: 22px; margin: 1px 0 0 0; } .meta ul li { display: inline-block; font-weight: 200; color: #b9bec3; margin: 0 5px 0px 0; padding: 0 10px 0 0; background: url('../images/blog-divider.png') no-repeat 100% 55%; font-style: italic; font-size: 12px; } .meta ul li:last-child { background: 0; } .meta ul li a { color: #b9bec3; } .meta ul li a, .post-content h2 a:hover { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .meta ul li a:hover { color: #a0a5aa; } /* 19 Blog Timeline ================================================== */ #tline-content { background: url(../images/bg-timeline.png) repeat-y center center; width: 1180px; margin: 0 auto; } .pin-box, .tline-box { width: 212px; width: 210px\9; padding: 12px; display: block; background: #fff; margin: 10px; float: left; border: 1px solid #e5e5e5; } .tline-box { width: 500px; padding: 10px; padding-bottom: 20px; margin-top: 20px; min-height: 160px; border-radius: 2px; position: relative; border: 1px solid #eceef0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tline-row-l, .tline-row-r { background: url(../images/right-timeline.png) no-repeat right 12%; width: 68px; height: 17px; margin-right: -68px; display: block; position: absolute; right: 0; top: 16px; } .tline-row-r { background: url(../images/left-timeline.png) no-repeat left 12%; left: 0; margin: 0; margin-left: -68px; } .tline-box.rgtline { float: right; margin-top: 53px; right: 0; clear: right; } .tline-box:hover { box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1); } .tline-topdate { width: 100px; height: 70px; border-radius: 50%!important; position: relative; display: block; clear: both; zoom: 1; padding: 40px 5px 0; border: 2px solid #f6f8fa; background: #fff; font-size: 16px; text-align: center; font-weight: bold; line-height: 18px; color: #eceef0; margin: 0 auto 7px; border-radius: 2px; text-shadow: 0 1px 1px #fff; } .tline-topdate.enddte { bottom: 0; margin-bottom: 0; } /* Blog Comments ================================================== */ .comments-sec { float: left; width: 100%; margin: -5px 0 25px 0; } ol.commentlist { float: left; width: 100%; margin: 0; } ol.commentlist li { float: left; padding: 10px 0 15px 0; } ol.commentlist li:first-child { border: 0; padding: 25px 0 0px 0; } ol.commentlist li { list-style: none; } ol li ol.childlist { float: right; width: 85%; margin: 0 5% 0 0; } ol.commentlist li ol.childlist li:first-child { padding: 25px 0 0 0; } ol.commentlist li ol.childlist li { margin: 0px 0 15px 0; } .comments-amount { font-weight: 300; color: #a0a5aa; } ol li ol.childlist .comment-des { float: left; width: 82.6%; } .avatar { float: left; } .avatar img { float: left; max-width: 70px; border-radius: 50%; border: 1px solid #eceef0; padding: 8px; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .avatar:hover img { background: #000; } .comment-des p { margin: 0; line-height: 23px; } .comment-des { float: left; margin: -70px 0 0 110px; width: 80%; border: 1px solid #eceef0; color: #848688; border-radius: 2px; padding: 20px; } .arrow-comment { width: 10px; height: 20px; position: relative; float: left; background: url(../images/comment-arrow.png) no-repeat; margin-left: -30px; } .comment-des strong { float: left; padding-right: 5px; color: #848688; } .comment-des span { float: left; color: #b9bec3; } .comment-by { float: left; width: 100%; padding-bottom: 8px; padding-top: 5px; } .comment-by span.reply { float: right; display: inline; } .comment-by span.reply a { float: right; height: 17px; margin-left: 5px; font-weight: normal; color: #b9bec3; } .comment-by span.reply a i { color: #bbb; transition: all 0.1s ease-in-out; } .comment-by span.reply a:hover, .comment-by span.reply a:hover i { color: #a0a5aa; } .comment-by span.date { color: #b9bec3; float: left; font-weight: 300; text-align: left; padding: 0 0 0 8px; position: relative; top: 0px; font-size: 12px; font-style: italic; } /* Pagination ================================================== */ .pagination { margin: 0; } .pagination ul li a { padding: 7px 11px; border-bottom: none; display: inline-block; color: #b9bec3; float: left; margin-right: 4px; border: 1px solid #eceef0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border-radius: 2px; } .pagination .current, .pagination ul li a:hover { color: #fff; } /* 20 Tags ================================================== */ .tags { margin: 10px 0 0 0; } .tags a { padding: 4px 11px 4px 11px; display: inline-block; color: #b9bec3; background-color: #f2f4f6; margin: 0 2px 6px 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05); border-radius: 2px; } .tags a:last-child { margin-right: 0; } .tags a:hover { background: #a0a5aa; color: #fff; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } /* Widget Tabs ====================================*/ .widget-tabs li { padding: 0 0 12px 0; margin: 12px 0 0 0; border-bottom: 1px solid #eceef0; } .widget-tabs li:first-child { margin: 4px 0 0 0; } .widget-tabs li:last-child { border-bottom: 0; } .widget-thumb a img { display: block; width: 70px; height: 70px; border: 5px solid #f2f4f6; border-radius: 2px; float: left; margin: 0 10px 0 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .widget-thumb a img:hover { border: 5px solid; } .widget-text h4 { font-size: 14px; font-weight: 600; line-height: 21px; padding: 3px 0 0 0; } .widget-text h4 a { color: #777; } .widget-text h4 a:hover { color: #b9bec3; } .widget-text span { color: #a0a5aa; font-weight: 300; margin: 4px 0 0 0; display: block; } .widget-tabs.comments .widget-text span { padding: 5px 0 0 0; margin: 0; } /* Widget ====================================*/ .widget { margin: 30px 0 0 0; } .widget p { margin: 0; } .categories a { /*border-bottom: 1px solid #CCC*/; color: #000 !important; display: block; line-height: 28px; padding: 3px 0; text-transform: uppercase;} .categories a:hover { background-color: #eee; color: #a0a5aa; } .cat a { background-color: #eee !important; color: #3399CC !important; font-weight: 600; } .categories ul li:before { content: "\f054"; font-family: "FontAwesome"; font-size: 13px; color: #000; margin: 8px 9px 0 0; float: left; } .categories ul li ul li:before { content: "\f105"; margin: 3px 9px 0 0px;} .categories ul li ul li ul li:before { content: "\f105"; margin: 3px 9px 0 0;} .categories ul li ul li ul li a { font-size: 14px; } /* Blog Tabs */ .tabs-nav.blog li { width: 33.334%; } .tabs-nav.blog li a i { margin: 0 auto; width: 100%; font-size: 18px; color: #b9bec3; } .tabs-nav li.active a i { color: #fff; } .tabs-nav.blog li a i.icon-star { font-size: 17px; } .tabs-nav.blog li a i.icon-time, .tabs-nav.blog li a i.icon-star, .tabs-nav.blog li a i.icon-comments-alt { position: relative; top: 1px; } /* 21 Contact Form ================================================== */ #contact fieldset div { margin-bottom: 20px; } #contact fieldset div input { width: 240px; } #contact textarea { width: auto; min-width: 97.5%; min-height: 120px; background: #fff; resize: vertical; } #contact input, #contact textarea, #contact select { -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; -moz-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; -o-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; -ms-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; transition: background 200ms ease-in-out, border-color 200ms ease-in-out; } #contact input:focus #contact textarea:focus, #contact select:focus { border: 1px solid #d6d6d6; outline: none; position: relative; z-index: 5; } #contact input.error, #contact textarea.error, #contact select.error { border: 1px solid #f5c8c3; background: #ffeced; } #contact label span { color: #e24747; } #contact input[type="submit"][disabled] { background: #a0a5aa; } #message { margin: 0; padding: 0; display: block; background: transparent none; } .loader { padding: 10px; float: left; } /* Add Comment ====================================*/ .add-comment label { margin: 0 0 4px 0; } .add-comment label span { color: #e24747; } .add-comment input { margin: 0 0 20px 0; min-width: 240px; } .add-comment textarea { margin: 0 0 18px 0; width: auto; min-width: 95.5%; min-height: 180px; background: #fff; resize: vertical; } input.add-comment-btn { float: left; min-width: 100px; margin: 0; } /* =================================================================== */ /* 22 Elements ====================================================================== */ /* Buttons ====================================*/ .button, input[type="button"], input[type="submit"] { padding: 8px 16px; display: inline-block; border: 0; font-weight: 500; outline: none; font-size: 14px; cursor: pointer; width: auto; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 2px; } .small.button, .small input[type="button"], .small input[type="submit"] { padding: 4px 10px; display: inline-block; border: 0; font-weight: 500; outline: none; font-size: 12px; cursor: pointer; width: auto; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 2px; } .big.button, .big input[type="button"], .big input[type="submit"] { padding: 8px 16px; display: inline-block; border: 0; font-weight: 500; outline: none; font-size: 18px; cursor: pointer; width: auto; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 2px; } .button i { margin: 0 2px 0 0; } .button.gray { color: #fff; background: #8ECC3A; } .button.gray:hover { background: #a0a5aa; } .button.white { color: #2d3237; background: #fff; } .button.white:hover { background: #a0a5aa; } .button.light { color: #a0a5aa; background: #f2f4f6; } .button.light:hover { color: #fff; background: #a0a5aa; } .button.color { color: #fff; background: #a0a5aa; } .button.color:hover { background: #d7d7d7; color: #000000; } .button.line { color: #000; border: 1px solid #000; height: 22px; padding-top: 10px; } .button.line:hover { color: #000; background: #fff; border: 1px solid #fff; } .button.line-color { color: #000; border: 1px solid #000; } .button.line-color:hover { color: #fff; } .button.line-white { color: #fff; border: 1px solid #fff; } .button.line-white:hover { color: #fff; opacity: 0.7; } /* Input Button */ input[type="button"], input[type="submit"], input[type="button"]:focus, input[type="submit"]:focus { color: #fff; background: #a0a5aa; padding: 8px 14px; border: none !important; } input[type="button"], input[type="submit"] { float: left; font-weight: 600; } input[type="button"]:hover, input[type="submit"]:hover { background: #a0a5aa; } /*Button group*/ .button-group { margin: 0 auto; overflow: hidden; position: relative; } .button-group .button { font-size: 18px; overflow: hidden; padding: 25px 0; text-align: center; text-transform: uppercase; width: 25%; margin: 0; letter-spacing: -1px; } .button-group .or { background-color: #fff; display: block; font-size: 12px; text-transform: uppercase; line-height: 42px; text-align: center; margin-left: -23px; margin-top: -20px; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; z-index: 99; font-weight: bold; border-radius: 50%; } .button-group .title { display: block; } .button-group .subtitle { font-size: 11px; font-weight: 400; line-height: 15px; letter-spacing: 0; } .button-group .button:first-child { border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-top-right-radius: 0; border-right: 0px solid #fff; } .button-group .button:last-child { border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 0; border-top-left-radius: 0; } /* Skill Bars ============================================ */ .skill-bar { text-align: left!important; margin: 0px!important; } .skill-bar li { list-style: none!important; margin-bottom: 20px; } .skill-bar li:last-child span { margin-bottom: 0px; } .skill-bar li .bar-wrap { margin-bottom: 13px; border: 1px solid #eceef0; border-radius: 300px 300px 300px 300px; -webkit-border-radius: 300px 300px 300px 300px; -o-border-radius: 300px 300px 300px 300px; -moz-border-radius: 300px 300px 300px 300px; padding: 2px; } .skill-bar li span { height: 4px; width: 0px; display: block; border-radius: 300px 300px 300px 300px; -webkit-border-radius: 300px 300px 300px 300px; -o-border-radius: 300px 300px 300px 300px; -moz-border-radius: 300px 300px 300px 300px; } .skill-bar li p { padding-top: 10px; line-height: 0px; } .skill-bar li span { overflow: visible!important; position: relative; } .skill-bar li span strong { position: absolute; right: -0px; top: -25px; padding: 4px 7px!important; background-color: #232d37; color: #fff; line-height: 12px!important; font-size: 10px!important; opacity: 0; display: block; border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; -o-border-radius: 2px 2px 2px 2px; } .skill-bar li span strong:after { border-color: #232d37 transparent; border-style: solid; border-width: 5px 5px 0; bottom: -4px; content: ""; display: block; left: 12px; position: absolute; width: 0; } .skill-bar li span strong.full:after { left: 15px; } /* Pie Chart Skills ================================================== */ .bg-facts { background: url(../images/bg-facts.png) 50% center no-repeat; width: 100%; height: 100%; margin: 0 auto; } .easyPieChart { position: relative; text-align: center; } .easyPieChart canvas { position: absolute; top: 10px; left: 10px; } .chart { float: left; height: 100%; margin-left: 3%; width: 22%; margin-bottom: 20px; position: relative; } .chart .percentage-light { text-align: center; color: #fff; font-size: 18px; margin-bottom: 30px; font-weight: 300; border-radius: 100%; padding: 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .chart:hover .percentage-light { background: rgba(220, 224, 227, 1); } .chart h3 { margin: 20px 0 10px -110px; font-family: 'Calibri'; color: #333; font-size: 16px; text-align: center; font-weight: 300; } .chart p { line-height: 18px; text-align: center; margin: 10px 0 10px -50px; } .chart .percentage-light-alt { text-align: center; color: #fff; font-size: 18px; margin-bottom: 30px; font-weight: 300; border-radius: 50%; padding: 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: #fff!important; } .chart:hover .percentage-light-alt { background: rgba(220, 224, 227, 1)!important; } /* Numeric Statistic ================================================== */ .stats { padding: 20px 0px 20px 0px; text-align: center; border-right: 1px solid #eff4f7; width: 100%; } .stats.brddark { padding: 50px 0px 50px 0px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.1); width: 100%; } .stats.last { border-right: 0px solid #eff4f7; } .stats .num { color: #232d37; font-size: 40px; font-weight: 800; margin-bottom: 10px; margin-top: 8px; } .stats .type { color: #FF9933; font-weight: 200; font-size: 11px; letter-spacing: 2px; font-weight: bold; } .stats .type.white { color: #fff; font-weight: 200; font-size: 11px; letter-spacing: 2px; } .stats-alt { padding: 10px 0px 10px 0px; text-align: center; border-right: 1px solid #eff4f7; width: 100%; } .stats-alt.brddark { padding: 10px 0px 10px 0px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.1); width: 100%; } .stats-alt.last { border-right: 0px solid #eff4f7; } .stats-alt .num { color: #232d37; font-size: 20px; font-weight: 800; margin-bottom: 10px; } .stats-alt .type { color: #c3cdd7; font-weight: 200; font-size: 8px; letter-spacing: 2px; line-height: 12px; } .stats-alt .type.white { color: #fff; font-weight: 200; font-size: 8px; letter-spacing: 2px; } /* Icons Demo ====================================*/ .the-icons { list-style-type: none; margin: 0 } .the-icons li [class^="icon-"], .the-icons li [class*="icon-"], .the-icons li [class^="ss-"], .the-icons li [class*="ss-"] { display: inline-block; text-align: center } .the-icons li { display: block; line-height: 32px; height: 30px; padding: 0 0 0 2px; border-radius: 2px } .the-icons li, .the-icons li:hover { color: #848688; } .the-icons li, .the-icons li i { color: #2d3237; } .the-icons li [class^="icon-"], .the-icons li [class*="icon-"], .the-icons li [class^="ss-"], .the-icons li [class*="ss-"] { width: 32px; font-size: 14px } .the-icons li:hover { text-decoration: none; } .the-icons li:hover [class^="icon-"], .the-icons li:hover [class*="icon-"], .the-icons li:hover [class^="ss-"], .the-icons li:hover [class*="ss-"] { font-size: 28px; vertical-align: middle } .the-icons li:hover [class^="icon-"]:before, .the-icons li:hover [class*="icon-"]:before, .the-icons li:hover [class^="ss-"]:before, .the-icons li:hover [class*=" s-"]:before, { font-size:24px; vertical-align:-3px } /* Social Icons ====================================*/ .social-icons li { display: inline; float: left; margin-right: 4px; } .social-icons li a { width: 40px; height: 40px; display: inline-block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; overflow: hidden; } /* Common Styles */ .social-icons li a i { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; z-index: 20; } .social-icons li a:hover, .social-icons li a i { color: #fff; } .social-icons li a i { top: -30px; opacity: 0; } .social-icons li a:hover i { top: 0; opacity: 1; } .twitter:before, .wordpress:before, .facebook:before, .linkedin:before, .comments-alt:before, .steam:before, .tumblr:before, .github:before, .delicious:before, .instagram:before, .xing:before, .amazon:before, .dropbox:before, .paypal:before, .lastfm:before, .gplus:before, .yahoo:before, .pinterest:before, .dribbble:before, .flickr:before, .reddit:before, .vimeo:before, .spotify:before, .rss:before, .youtube:before, .blogger:before, .appstore:before, .digg:before, .evernote:before, .fivehundredpx:before, .forrst:before, .stumbleupon:before, .dribbble:before { font-family: "fontello"; font-size: 16px; line-height: 16px; color: #a0a5aa; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; position: absolute; z-index: 20; } /* Icon Styles */ .twitter:before { font-size: 14px; } .twitter i, .twitter:before { margin: 13px 0 0 12px; } .twitter:before { content: "\54"; top: 0; opacity: 1; } .twitter:hover:before { top: 30px; opacity: 0; } .twitter:hover { background-color: #3bc1ed; } .dribbble i, .dribbble:before { margin: 13px 0 0 13px; } .dribbble:before { content: "\44"; top: 0; opacity: 1; } .dribbble:hover:before { top: 30px; opacity: 0; } .dribbble:hover { background-color: #ef5a92; } .facebook i, .facebook:before { margin: 13px 0 0 16px; } .facebook:before { content: "\66"; top: 0; opacity: 1; } .facebook:hover:before { top: 30px; opacity: 0; } .facebook:hover { background-color: #4a6d9d; } .linkedin i, .linkedin:before { margin: 13px 0 0 13px; } .linkedin:before { content: "\4c"; top: 0; opacity: 1; } .linkedin:hover:before { top: 30px; opacity: 0; } .linkedin:hover { background-color: #0b7bb5; } .comments-alt i, .comments-alt:before { margin: 13px 0 0 13px; } .comments-alt:before { content: "\f0e6"; top: 0; opacity: 1; } .comments-alt:hover:before { top: 30px; opacity: 0; } .comments-alt:hover { background-color: #0b7bb5; } .delicious i, .delicious:before { margin: 13px 0 0 13px; } .delicious:before { content: "\23"; top: 0; opacity: 1; } .delicious:hover:before { top: 30px; opacity: 0; } .delicious:hover { background-color: #3274d1; } .paypal i, .paypal:before { margin: 13px 0 0 13px; } .paypal:before { content: "\24"; top: 0; opacity: 1; } .paypal:hover:before { top: 30px; opacity: 0; } .paypal:hover { background-color: #2e689a; } .gplus i, .gplus:before { margin: 13px 0 0 13px; } .gplus:before { content: "\2b"; top: 0; opacity: 1; } .gplus:hover:before { top: 30px; opacity: 0; } .gplus:hover { background-color: #d53824; } .stumbleupon i, .stumbleupon:before { margin: 13px 0 0 11px; } .stumbleupon:before { content: "\2f"; top: 0; opacity: 1; } .stumbleupon:hover:before { top: 30px; opacity: 0; } .stumbleupon:hover { background-color: #eb4924; } .fivehundredpx i, .fivehundredpx:before { margin: 13px 0 0 11px; } .fivehundredpx:before { content: "\30"; top: 0; opacity: 1; } .fivehundredpx:hover:before { top: 30px; opacity: 0; } .fivehundredpx:hover { background-color: #444; } .pinterest i, .pinterest:before { margin: 13px 0 0 15px; } .pinterest:before { content: "\31"; top: 0; opacity: 1; } .pinterest:hover:before { top: 30px; opacity: 0; } .pinterest:hover { background-color: #cb1f25; } .forrst i, .forrst:before { margin: 13px 0 0 15px; } .forrst:before { content: "\3a"; top: 0; opacity: 1; } .forrst:hover:before { top: 30px; opacity: 0; } .forrst:hover { background-color: #40833e; } .digg i, .digg:before { margin: 13px 0 0 12px; } .digg:before { content: "\3b"; top: 0; opacity: 1; } .digg:hover:before { top: 30px; opacity: 0; } .digg:hover { background-color: #205685; } .spotify i, .spotify:before { margin: 13px 0 0 13px; } .spotify:before { content: "\3d"; top: 0; opacity: 1; } .spotify:hover:before { top: 30px; opacity: 0; } .spotify:hover { background-color: #6ca405; } .reddit i, .reddit:before { margin: 13px 0 0 12px; } .reddit:before { content: "\3e"; top: 0; opacity: 1; } .reddit:hover:before { top: 30px; opacity: 0; } .reddit:hover { background-color: #404040; } .appstore i, .appstore:before { margin: 13px 0 0 14px; } .appstore:before { content: "\41"; top: 0; opacity: 1; } .appstore:hover:before { top: 30px; opacity: 0; } .appstore:hover { background-color: #c0c0c0; } .blogger i, .blogger:before { margin: 13px 0 0 15px; font-size: 14px !important; } .blogger:before { content: "\42"; top: 0; opacity: 1; } .blogger:hover:before { top: 30px; opacity: 0; } .blogger:hover { background-color: #ff6501; } .dribbble i, .dribbble:before { margin: 13px 0 0 13px; } .dribbble:before { content: "\44"; top: 0; opacity: 1; } .dribbble:hover:before { top: 30px; opacity: 0; } .dribbble:hover { background-color: #ef5a92; } .evernote i, .evernote:before { margin: 13px 0 0 15px; } .evernote:before { content: "\45"; top: 0; opacity: 1; } .evernote:hover:before { top: 30px; opacity: 0; } .evernote:hover { background-color: #6bb130; } .flickr i, .flickr:before { margin: 13px 0 0 13px; } .flickr:before { content: "\46"; top: 0; opacity: 1; } .flickr:hover:before { top: 30px; opacity: 0; } .flickr:hover { background-color: #136dd5; } .rss i, .rss:before { margin: 13px 0 0 14px; font-size: 14px !important; } .rss:before { content: "\52"; top: 0; opacity: 1; } .rss:hover:before { top: 30px; opacity: 0; } .rss:hover { background-color: #fe8f00; } .youtube i, .youtube:before { margin: 13px 0 0 14px; font-size: 18px !important; } .youtube:before { content: "\55"; top: 0; opacity: 1; } .youtube:hover:before { top: 30px; opacity: 0; } .youtube:hover { background-color: #bf2f29; } .vimeo i, .vimeo:before { margin: 13px 0 0 13px; font-size: 14px !important; } .vimeo:before { content: "\56"; top: 0; opacity: 1; } .vimeo:hover:before { top: 30px; opacity: 0; } .vimeo:hover { background-color: #4c8ab0; } .xing i, .xing:before { margin: 13px 0 0 14px; } .xing:before { content: "\58"; top: 0; opacity: 1; } .xing:hover:before { top: 30px; opacity: 0; } .xing:hover { background-color: #036568; } .yahoo i, .yahoo:before { margin: 13px 0 0 11px; } .yahoo:before { content: "\59"; top: 0; opacity: 1; } .yahoo:hover:before { top: 30px; opacity: 0; } .yahoo:hover { background-color: #9251a2; } .amazon i, .amazon:before { margin: 13px 0 0 12px; } .amazon:before { content: "\61"; top: 0; opacity: 1; } .amazon:hover:before { top: 30px; opacity: 0; } .amazon:hover { background-color: #2f3842; } .steam i, .steam:before { margin: 13px 0 0 11px; } .steam:before { content: "\62"; top: 0; opacity: 1; } .steam:hover:before { top: 30px; opacity: 0; } .steam:hover { background-color: #383838; } .dropbox i, .dropbox:before { margin: 13px 0 0 13px; } .dropbox:before { content: "\64"; top: 0; opacity: 1; } .dropbox:hover:before { top: 30px; opacity: 0; } .dropbox:hover { background-color: #2c92dd; } .github i, .github:before { margin: 13px 0 0 13px; } .github:before { content: "\67"; top: 0; opacity: 1; } .github:hover:before { top: 30px; opacity: 0; } .github:hover { background-color: #5c7381; } .lastfm i, .lastfm:before { margin: 13px 0 0 11px; } .lastfm:before { content: "\6c"; top: 0; opacity: 1; } .lastfm:hover:before { top: 30px; opacity: 0; } .lastfm:hover { background-color: #d21309; } .tumblr i, .tumblr:before { margin: 13px 0 0 15px; } .tumblr:before { content: "\74"; top: 0; opacity: 1; } .tumblr:hover:before { top: 30px; opacity: 0; } .tumblr:hover { background-color: #3d658d; } .wordpress i, .wordpress:before { margin: 13px 0 0 14px; } .wordpress:before { content: "\77"; top: 0; opacity: 1; } .wordpress:hover:before { top: 30px; opacity: 0; } .wordpress:hover { background-color: #383838; } .instagram i, .instagram:before { margin: 13px 0 0 14px; } .instagram:before { content: "\f31f"; top: 0; opacity: 1; } .instagram:hover:before { top: 30px; opacity: 0; } .instagram:hover { background-color: #3f6f94; } /* Tooltips ====================================*/ #tiptip_holder { display: none; position: absolute; left: 0; top: 0; z-index: 99999; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } #tiptip_holder.tip_top { padding-bottom: 5px; -webkit-transform: translateX(12px) } #tiptip_holder.tip_bottom { padding-top: 5px; } #tiptip_holder.tip_right { padding-left: 5px; } #tiptip_holder.tip_left { padding-right: 5px; } #tiptip_content { color: #fff; font-size: 12px; line-height: 16px; padding: 6px 10px; background-color: #666; border-radius: 2px; } #tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; } #tiptip_holder.tip_top #tiptip_arrow { border-top-color: #666; } #tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #666; } #tiptip_holder.tip_right #tiptip_arrow { border-right-color: #666; } #tiptip_holder.tip_left #tiptip_arrow { border-left-color: #666; } #tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: #666; } #tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: #666; } #tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: #666; } #tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: #666; } /* Tabs ====================================*/ .tabs-nav { list-style: none; margin: 0; overflow: hidden; padding: 0; width: 100%; } .tabs-nav li { float: left; line-height: 38px; overflow: hidden; padding: 0; position: relative; margin-right: 1px; } .tabs-nav li a { background-color: #f2f4f6; color: #848688; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 2px 2px 0 0px; } .tabs-nav li.active a { background: #fff!important; color: #000; border-right: 1px solid #eceef0; border-left: 1px solid #eceef0; border-top: 1px solid #eceef0; } .tab-content { padding: 10px 0px; } .tabs-container { overflow: hidden; margin-top: -1px; border: 1px solid #eceef0; padding: 10px; border-radius: 2px; } /* Accordions & Toggles ====================================*/ .ui-accordion .ui-accordion-header, .trigger a { display: block; cursor: pointer; position: relative; padding: 0; line-height: 26px; outline: none; color: #848688; font-size: 14px; -webkit-transition: background-color 100ms ease-in-out; -moz-transition: background-color 100ms ease-in-out; -o-transition: background-color 100ms ease-in-out; -ms-transition: background-color 100ms ease-in-out; transition: background-color 100ms ease-in-out; padding: 10px 16px; margin-bottom: 0px; border-radius: 2px; border: 1px solid #eceef0; margin-bottom: 10px; } .ui-accordion .ui-accordion-header-active:hover, .ui-accordion .ui-accordion-header-active, .trigger.active a, .trigger.active a:hover { background: #a0a5aa; color: #fff; } .ui-accordion .ui-accordion-content, .toggle-container { padding: 10px 16px 10px 16px; border-right: 1px solid #eceef0; border-left: 1px solid #eceef0; border-bottom: 1px solid #eceef0; margin-top: -10px; margin-bottom: 10px; } .ui-accordion .ui-accordion-content p { margin: 0; } .ui-accordion .ui-accordion-content { } .ui-accordion-icon:before, .ui-accordion-icon-active:before, .toggle-icon:before { font-family: "FontAwesome"; content: "+"; color: #afb9c3; font-size: 20px; display: block; float: right; line-height: 25px; margin: 0 0px 0 0; } .toggle-container p { margin: 0; } .ui-accordion-icon-active:before, .trigger.active .toggle-icon:before { content: "-"; color: #fff; } .faq .toggle-icon:before, .faq .trigger.active .toggle-icon:before { content: ""; float: left; margin-right: 10px; } .ui-accordion h6 { line-height: 26px; outline: none; color: #848688; font-size: 14px; border-bottom: 1px solid #eceef0; margin: 10px 0; font-weight: 600; } .ui-accordion p strong { line-height: 26px; outline: none; width: 30%!important; font-size: 12px; } .ui-accordion ul { margin-bottom: 20px; } .ui-accordion .button { margin-left: 10px; margin-bottom: 10px; } /* Alert Boxes ====================================*/ .notification { font-size: 14px; line-height: 18px; margin-bottom: 15px; position: relative; padding: 13px 40px 13px 18px; border-radius: 2px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03); } .notification p { margin: 0; } .notification span { font-weight: 600; } .notification.success, .notification.success strong { background-color: #EBF6E0; color: #5f9025; border: 1px solid #b3dc82; } .notification.error, .notification.error strong { background-color: #ffe9e9; color: #de5959; border: 1px solid #fbc4c4; } .notification.warning, .notification.warning strong { background-color: #FBFADD; color: #8f872e; border: 1px solid #ded58a; } .notification.notice, .notification.notice strong { background-color: #E9F7FE; color: #5091b2; border: 1px solid #b6d7e8; } .notification strong { border: none !important; } .notification.success .close, .notification.error .close, .notification.warning .close, .notification.notice .close { padding: 0px 9px; position: absolute; right: 0; top: 22px; display: block; height: 8px; width: 8px; cursor: pointer; } .notification.success .close { background: url(../images/alert_boxes_close_ico.png) 0 -8px no-repeat; } .notification.error .close { background: url(../images/alert_boxes_close_ico.png) 0 0 no-repeat; } .notification.warning .close { background: url(../images/alert_boxes_close_ico.png) 0 -16px no-repeat; } .notification.notice .close { background: url(../images/alert_boxes_close_ico.png) 0 -24px no-repeat; } /* Testimonials ====================================*/ .testimonials { background: #333d48; border-radius: 2px; -webkit-box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04); box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04); width: 98%; } .testimonials p { color: #BCC1C5; padding: 6px 12px; line-height: 22px; } .testimonials-bg { background: url(../images/testimonials-bg.png) no-repeat; margin-top: -16px; display: block; margin-left: 27px; width: 200px; height: 30px; } .testimonials-author { color: #b9bec3; float: left; display: block; margin-bottom: 3px; font-style: italic; } .testimonials-author span { color: #b9bec3; } .testimonials_left { background: #10A0D8; border-radius: 2px; -webkit-box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04); box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04); width: 98%; } .testimonials_left p { color: #fff; padding: 6px 12px; line-height: 22px; } .testimonials_left-bg { background: url(../images/testimonials-bg_left.png) no-repeat; margin-top: -4px; display: block; margin-left: 27px; width: 200px; height: 22px; } .testimonials_left-author { color: #10A0D8; float: left; display: block; margin-bottom: 3px; font-style: italic; } .testimonials_left-author span { color: #10A0D8; } .testimonial_page { background: #eee; border-radius: 5px; } .testimonial_page p { color: #555; padding: 8px; line-height: 22px; width: 98%; text-align:justify;} .testimonial_page-bg { background: url(../images/testimonial_page-bg.png) no-repeat; margin-top: -16px; display: block; margin-left: 27px; width: 200px; height: 22px; } .testimonial_page-author { color: #000; float: left; display: block; margin-bottom: 3px; font-style: italic; } .testimonial_page-author span { color: #000; } .testimonial_img-responsive { display: block; height: auto; width: 100%; } /* Happy Clients ====================================*/ .sb-navigation-left-2.alt, .sb-navigation-right-2.alt { top: 57%; margin: 0; position: absolute; height: 20px; width: 20px; z-index: 99; } .sb-navigation-left-2.alt { left: 10px; } .sb-navigation-right-2.alt { right: 0; } .happy-clients-photo img { float: left; display: block; margin-bottom: 11px; border-radius: 50%; width: 100px; height: 100px; border: 1px solid #eceef0; padding: 10px; margin-left: 30px; } .happy-clients-cite { font-size: 20px; font-weight: 300; color: #b9bec3; width: 80%; margin: 0 auto; display: block; text-align: left; line-height: 30px; margin-bottom: 7px; border: 1px solid #eceef0; padding: 30px 10px; border-radius: 5px; float: right; margin-right: 40px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } .happy-clients-cite i { font-size: 18px; font-weight: normal; position: relative; top: -20px; left: -22px; color: #eceef0; } .happy-clients-author { font-size: 13px; font-weight: 500; color: #eff4f7; float: left; display: block; text-align: left; line-height: 32px; margin-left: 40px; font-style: italic; } .happy-clients-author strong { color: #b9bec3; font-weight: 800; } /* Dropcaps ====================================*/ .dropcap { float: left; color: #a0a5aa; font-size: 58px; line-height: 54px; padding-top: 4px; padding-right: 10px; margin-top: -2px; } .dropcap.gray { color: #555; } /* Highlights ====================================*/ .highlight.color, .highlight.gray, .highlight.light { padding: 2px 6px; color: #fff; border-radius: 2px; } .highlight.color { background: #a0a5aa; } .highlight.gray { background: #a0a5aa; } .highlight.light { background: #f2f4f6; color: #848688; } /* Blockquote ====================================*/ blockquote { border-left: 3px solid #e8e8e8; background: #fafcfe; padding: 10px 20px; color: #a0a5aa; line-height: 24px; margin: 10px 0 20px 0px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } /* Large Notice ====================================*/ .large-notice { padding: 32px; border-radius: 2px; background-color: #fcfcfc; border: 1px solid #e4e4e4; } .large-notice h2 { margin-bottom: 10px; font-weight: 600; font-size: 22px; } .large-notice p { font-size: 14px; color: #848688; line-height: 22px; } /* List Styles ====================================*/ .list-1 li, .list-2 li, .list-3 li, .list-4 li { list-style: none; margin: 7px 0; margin-left: 2px; } .list-1 li:first-child, .list-2 li:first-child, .list-3 li:first-child, .list-4 li:first-child { margin-top: 0; } .list-1 li:before, .list-2 li:before, .list-3 li:before, .list-4 li:before { content: ""; font-family: "FontAwesome"; margin: 0 8px 0 0; position: relative; color: #a0a5aa; } .list-1 li:before { content: ""; } .list-2 li:before { content: "\f105"; } .list-3 li:before { content: ""; } .list-4 li:before { content: ""; } /* Pricing Tables ===================================== */ .plan { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.07); border-radius: 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .plan:hover { box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07); } .plan h3 { font-size: 18px; padding: 10px 0; color: #232d37; font-weight: 600; text-align: center; background-color: #fff; border-bottom: none; background-color: #eff4f7;} .plan-price { font-size: 22px; font-weight: bold; color: #80858a; text-align: center; padding: 20px 0; position: relative; background-color: #eff4f7; letter-spacing: -0.5px; } .plan-currency { font-size: 24px; color: #afb4b9; position: absolute; margin: 0px -20px; } .period {display: block; font-size: 16px; font-weight: 600; margin: 5px 0 0; opacity: 0.6;} .plan-features { background: #fff; padding: 10px 25px; border-radius: 0 0 2px 2px; } .plan-features ul li { padding: 12px 0; text-align: center; border-bottom: 1px solid #eceef0; } .plan-features a.button { position: relative; display: block; width: 80px; margin: 0 auto; margin-top: 22px; margin-bottom: 10px; text-align: center; background-color: #ff9933; color: #fff; } /* Premium Plan Style */ .premium .plan-price, .premium .plan-features a.button:hover { background-color: #fff; color: #169fe6; } .premium.plan h3, .premium .plan-features a.button { background-color: #232d37; color: #fff; } .premium .plan-currency { color: #169fe6; } .premium.plan h3, .premium .plan-features { background-color: #ff0000; color: #fff; } .featured .plan-price, { background-color: #eff4f7; color:#afb4b9 } .featured.plan h3 { background-color: #fff; } .featured .plan-features a.button { background-color: #232d37; } .featured .plan-features a.button:hover { color: #fff } /* 23 Footer ====================================================== */ #footer { background-color: #232d37; padding: 14px 0 1px!important; color: #bcc1c5; font-size: 12px; } #footer h3 { margin-bottom: 10px; color: #fff; font-weight: 800; text-transform: uppercase; font-size: 13px; } #footer .widget-tabs li { padding: 0 0 12px 0; margin: 12px 0 0 0; border-bottom: 0px solid #000!important; } #footer .widget-tabs li:first-child { margin: 4px 0 0 0; } #footer .widget-tabs li:last-child { border-bottom: 0; } #footer .widget-thumb a img { display: block; width: 70px; height: 70px; border: 3px solid #bcc1c5; border-radius: 2px; float: left; margin: 0 10px 0 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } #footer .widget-thumb a img:hover { border: 3px solid; } #footer .widget-text h4 { font-size: 13px; font-weight: 600; line-height: 18px; padding: 3px 0 0 0; color: #bcc1c5; } #footer .widget-text h4 a { color: #bcc1c5; } #footer .widget-text h4 a:hover { color: #b9bec3; } #footer .widget-text span { color: #a0a5aa; font-weight: 300; margin: 4px 0 0 0; display: block; } #footer .widget-tabs.comments .widget-text span { padding: 5px 0 0 0; margin: 0; } /* Footer Bottom ====================================*/ #footer-bottom { background-color: #fff; padding: 9px 0 6px; color: #232d37; } #footer-bottom a { color: #232d37; font-weight: 600; } /* Get In Touch ====================================*/ .get-in-touch { margin: 15px 0 0 0; } .get-in-touch li p strong { color: #bcc1c5; float: left; font-weight: 600; margin: 0 5px 5px 0; } .get-in-touch .icon-map-marker { font-size: 16px; } .get-in-touch li { margin: 0 0 15px 0; } .get-in-touch p, .get-in-touch li, .get-in-touch a { color: #bcc1c5 !important; } .get-in-touch p { margin: -2px 0 0 25px; line-height: 20px; } .get-in-touch li i { float: left; margin: 2px 0 0 0; color: #bcc1c5; } /* Search / Newsletter Inputs ====================================*/ .newsletter-btn, .search-btn { background-color: #a0a5aa; border-radius: 0 2px 2px 0; border: 0; font-size: 14px; color: #fff; cursor: pointer; float: right; z-index: 5; position: relative; padding: 9px 16px; line-height: 18px; margin: 0; height: 38px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .newsletter-btn { position: relative; top: -38px; left: -28px; } .newsletter-btn:hover, .search-btn:hover { background-color: #3399cc; } .search-btn i { float: left; margin: -2px 0 0 0; padding: 0 3px; } .search-btn { padding: 9px 10px; width: 38px; } input.search { float: left; color: #a0a5aa; border-radius: 2px 0 0 2px; z-index: 1; position: relative; font-size: 13px; width: 80%; margin-top: -38px; padding: 9px 12px; line-height: 18px; height: 18px; } input.newsletter { float: left; color: #a0a5aa; border-radius: 2px 0 0 2px; z-index: 1; position: relative; font-size: 13px; width: 73%; margin-top: -38px; padding: 9px 12px; line-height: 18px; height: 18px; } .widget_latest_posts li { margin-bottom: 5px; } .widget_latest_posts li a { color: #bcc1c5; font-size: 13px; } .widget_latest_posts li a:hover { } .widget_latest_posts li:last-child { margin: 0; } .widget_latest_posts li i { font-size: 8px!important; color: #bcc1c5!important; margin-right: 5px; } .widget_latest_posts li span { font-size: 10px; } .photo-stream { margin-right: -12px; } .photo-stream li { float: left; overflow: hidden; margin: 0 10px 10px 0; } .photo-stream a img { display: block; border-radius: 3px; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ opacity: 0.7; } .photo-stream a:hover img { opacity: 1; filter: none; -webkit-filter: grayscale(0%); } .photo-stream img { display: block; width: 60px; height: 60px; border-radius: 3px; } .footer_tags h3 { padding-bottom: 23px; } .footer_tags ul { margin-left: -6px; margin-bottom: -6px; display: block; overflow: hidden; } .footer_tags li { margin-left: 6px; margin-bottom: 6px; float: left; } .footer_tags li a { height: 26px; line-height: 28px; padding: 0px 9px; display: block; position: relative; background-color: #1b232b; border: 1px solid #141a20; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.03); -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.03); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.03); behavior: url(layout/plugins/PIE.htc); font-size: 12px; color: #bcc1c5; } .footer_tags li a:hover { background-color: #ffffff; border: 1px solid #1a1a1a; background: -webkit-gradient(linear, 0 0, 0 100%, from(#232d37) to(#232d37)); background: -webkit-linear-gradient(#32414f, #232d37 1px, #232d37); background: -moz-linear-gradient(#32414f, #232d37 1px, #232d37); background: -ms-linear-gradient(#595959, #404040 1px, #404040); background: linear-gradient(#32414f, #232d37 1px, #232d37); background: -o-linear-gradient(#32414f, #232d37 1px, #232d37); -pie-background: linear-gradient(#32414f, #232d37 1px, #232d37); color: #ffffff; text-decoration: none; } /* Media Queries ====================================================================== */ /* Smaller than standard 1180 (devices and browsers) */ @media only screen and (min-width: 959px) and (max-width: 1199px) { .caption.text { margin-left: 50px !important; } .caption h2, .caption h3, .caption p { margin: 0; } .menu ul > li > a { padding-left: 15px; padding-right: 15px; } ol li ol.childlist .comment-des { float: right; width: 78%; } .comment-des { float: right; width: 81%; } .add-comment textarea, #contact textarea { min-width: 97%; } .flickr-widget-blog a { width: 57px; height: 57px; } #not-found { margin: 50px 0 75px 0; } #not-found h2 { font-size: 210px; line-height: 210px; } #not-found p { font-size: 28px; line-height: 36px; } #not-found i { font-size: 200px; top: -5px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .caption.text { margin-left: 30px !important; } .caption h2 { margin-top: -8px; } .caption p { margin-top: 8px; } .img-1 { margin-left: 0 !important; } .menu ul > li > a { padding-left: 14px; padding-right: 14px; } #search-form { position: absolute; right: 0; } .search-container { margin-left: 50px !important; } .the-icons { font-size: 13px; } ol li ol.childlist .comment-des { float: right; width: 71%; } .comment-des { float: right; width: 75%; } .add-comment textarea, #contact textarea { min-width: 96%; } .flickr-widget-blog a { width: 69px; height: 69px; } #not-found { margin: 35px 0 60px 0; } #not-found h2 { font-size: 160px; line-height: 160px; } #not-found i { font-size: 155px; top: -4px; } #not-found p { font-size: 22px; line-height: 32px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .caption.text { margin-left: 30px !important; } .caption h2 { font-size: 32px; margin-top: 10px; } .caption h3 { font-size: 20px; margin-top: 15px; } .caption p { display: none; } .img-1 { margin-left: 0 !important; } .showbiz.our-clients ul li img { margin: 0 auto; width:130%;} .showbiz.our-clients ul li { margin: 20px 20px 5px 0;} #breadcrumbs ul { float: left; margin-top: 0; padding: 0 0 24px 0; } #titlebar h2 { margin-top: 3px; } #googlemaps { padding-bottom: 40%; } .plan-features { margin-bottom: 25px; } .medium .post-img { margin-bottom: 20px; } #filters { margin: 10px 0 30px 0; } #filters a { margin: 0 5px 5px 0; } .line.filters { display: none; } .line.showing { display: inline-block; margin: -11px 0 0 0; z-index: 5; } .social-icons-footer { margin-top: 5px; float: left; } #footer { padding-top: 10px; } #footer h3 { margin-top: 30px; } .featured-boxes { margin: 40px 0 5px 0; } .featured-box { margin: 0 0 25px 0; } a.button.launch { margin: 0 0 30px 0; } #related-work figure { margin-bottom: 20px; } .search-form { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eceef0; } #contact input[type="submit"] { margin: 0 0 30px 0; } #not-found { margin: 15px 0 25px 0; } #not-found h2 { font-size: 110px; line-height: 120px; } #not-found i { font-size: 105px; top: -2px; } #not-found p { font-size: 22px; line-height: 32px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { ol li ol.childlist .comment-des { float: right; width: 63%; } .comment-des { float: right; width: 68%; } .add-comment textarea, #contact textarea { min-width: 95%; } .flickr-widget-blog a { width: 87px; height: 87px; } #mobile-navigation { display: block; } #navigation { display: none; } /*#logo a img { margin-left: 51px; margin-top: -46px;}*/ } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #navigation { display: none; } #mobile-navigation { display: block; } /*#logo a img { margin-left: 51px; margin-top: -46px;}*/ .caption h2 { font-size: 32px; margin-top: 0; } .caption h3 { font-size: 18px; margin-top: 10px; } .caption p { display: none } ol li ol.childlist .comment-des { float: right; width: 49%; } .comment-des { float: right; width: 56%; } .add-comment textarea, #contact textarea { width: 90%; } .flickr-widget-blog a { width: 82px; height: 82px; } .dropcap { font-size: 52px; } } .jus { text-align: justify; } .cen { text-align: center; } .margin_top { margin-top: 0px !important; } .red_colo { color: #300000 !important; } .left_te { text-align: left !important; } .bule_red { color: #3399cc !important; font-weight: bold; } .bule_red span { color: #3399cc !important; font-weight: bold; } .mar_top { margin-top: 5px !important; } .mar_left { margin-left: 0 !important; } .img-responsive { display: block; height: auto; max-width: 100%; } .font_side12 { font-size: 12px; } .boder { border: 1px solid #efefef; } .top_link { color: #a4a4a4 !important; } .top_link a { color: #737373 !important; } .top_link a:hover { color: #3399cc !important; } #top_link { color: #fb8730 !important; } .rev_slider.fullwidthabanner:before { background: url("images/headings_top_shadow.png") repeat scroll 0 0 rgba(0, 0, 0, 0); content: ""; height: 8px; left: 50%; margin: 0 0 0 -481px; position: absolute; top: 0; width: 962px; z-index: 1000; } .rev_slider1.fullwidthabanner1:before { background: url("images/sedo_inner.png") repeat scroll 0 0 rgba(0, 0, 0, 0); content: ""; height: 8px; left: 50%; margin: 0 0 0 -481px; position: absolute; top: 0; width: 962px; z-index: 1000; } #header { border-bottom: medium none; border-top: 1px solid #040402; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } .jus { text-align: justify; } /*.widget_latest_posts ul li{border-top: 1px solid #3e4954; height: auto !important; line-height: 30px; margin: 0; padding: 3px 0;}*/ .contact_address { float: left; margin: 3px 0 0; padding: 0; width: 100%; } .contact_address li { line-height: 25px; margin: 0; padding: 0; } .call_free { font-weight: 400; text-align: left; padding: 7px 0; font-size: 13px; } /*Define Accordion box*/ .accordion { width: 100%; overflow: hidden; margin: 10px auto; color: #474747; /*background:#414141;*/ padding: 0; } /*General Accordion****************************************************************************/ /*Set style of open slide*/ .accordion section:target { background: #FFF; padding: 10px 0; width: 100%; } .accordion section:target:hover { background: #FFF; } .accordion section:target h2 { width: 100%; background: #009bd9; padding: 0; } .accordion section:target h2 a { color: #fff; padding: 3px 0 3px 10px; } .accordion section:target p { display: block; } .accordion section h2 a { padding: 8px 10px; display: block; font-size: 15px; font-weight: normal; color: #000; text-decoration: none; } /*set style of closed slide*/ .accordion section { float: left; overflow: hidden; color: #000; cursor: pointer; background: #E5E5E5; margin-bottom: 3px; } .accordion section:hover { background: #76B152; } .accordion section p { display: none; } .accordion section:after { position: relative; font-size: 24px; color: #000; } .accordion section:nth-child(1):after { content: '+'; color: #666; } .accordion section:nth-child(2):after { content: '+'; color: #666; } .accordion section:nth-child(3):after { content: '+'; color: #666; } .accordion section:nth-child(4):after { content: '+'; color: #666; } .accordion section:nth-child(5):after { content: '+'; color: #666; } .accordion section:nth-child(6):after { content: '+'; color: #666; } .accordion section:nth-child(7):after { content: '+'; color: #666; } .accordion section:nth-child(8):after { content: '+'; color: #666; } .accordion section:nth-child(9):after { content: '+'; color: #666; } .accordion section:nth-child(10):after { content: '+'; color: #666; } .accordion section:nth-child(11):after { content: '+'; color: #666; } /*End General Accordion****************************************************************************/ /*Vertical Accordion *************************************************************************/ .vertical section { width: 100%; height: 40px; -webkit-transition: height 0.2s ease-out; -moz-transition: height 0.2s ease-out; -o-transition: height 0.2s ease-out; -ms-transition: height 0.2s ease-out; transition: height 0.2s ease-out; } /*Set height of the slide*/ .vertical :target { height: auto; width: 100%; } .vertical section h2 { position: relative; left: 0; top: -7px; } /*Set position of the number on the slide*/ .vertical section:after { top: -45px; left: 98%; } .vertical section:target:after { left: -9999px; margin-bottom: 0; padding-bottom: 0; } .mar_le { margin-left: 0px !important; } .reward p{padding-top:20px;} .reward li { line-height: 26px; background-image: url(../images/bullet-cen-index.png); background-position: left 9px; background-repeat: no-repeat; padding-left: 20px; padding-top: 0; text-align: justify; } table.standard-table { border: solid none; border-collapse: separate; border-spacing: 0; margin: 15px 0; width: 100%; } table.standard-table th { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #10a0d8; border-color: #ECEEF0 -moz-use-text-color #ECEEF0 #ECEEF0; border-image: none; border-style: solid none solid solid; border-width: 1px medium 1px 1px; color: #fff; font-size: 14px; font-weight: 700; padding: 10px 15px; vertical-align: top; } table.standard-table td:last-child { border-right: 1px solid #ECEEF0; } table.standard-table th:last-child { } table.standard-table td { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: -moz-use-text-color -moz-use-text-color #ECEEF0 #ECEEF0; border-image: none; border-style: none none solid solid; border-width: medium medium 1px 1px; padding: 10px 15px; } table.standard-table tr:hover td { background-color: #F6F8FA; } table.standard-table tr { border-radius: 3px; } .img_cen_tex h6 strong { line-height: 50px; } .title_padding { padding-bottom: 5px; } /*.camera_wrap img{ margin-top:0px !important;}*/ .pic {border:1px solid #ddd; /* border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);*/ } .apply { margin-bottom: 0; } .image_new_left { float: left; margin: 5px 15px 5px 0; } .image_new_right { float: right; margin: 5px 0 5px 15px; } .news_bor{border-top: 1px solid #ECEEF0;} .img_bor_bottom{border-bottom:1px solid #10A0D8;} @media only screen and (max-width : 1024px) { #side_social { display: none; } } #side_social { position: fixed; top: 50%; z-index: 110; -webkit-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.9); -moz-box-shadow:0px 1px 3px 0px rgba(50, 50, 50, 0.9); box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.9); } #side_social.left { right:0; } #side_social.right { right: 0; } #side_social ul, #side_social ul li { margin: 0; padding: 0; list-style: none; } #side_social ul li { display: block; } #side_social ul li a { display: block; margin: 0; padding: 13px 13px 9px 13px; background-color: #232D37; } #side_social ul li a.rssw:hover { background-color: #e97d24; } #side_social ul li a.twitterr:hover { background-color: #00adec; } #side_social ul li a.facebookk:hover { background-color: #3a5a97; } #side_social ul li a.linkedinn:hover { background-color: #0076a9; } #side_social ul li a.slidesharee:hover { background-color: #EA851D; } #side_social ul li a.dribbblee:hover { background-color: #d3306e; } #side_social ul li a.linkk:hover { background-color: #59A4C9; } #side_social ul li a.googlee:hover { background-color: #c23b2b; } #side_social ul li a.pinterestt:hover { background-color: #ad2e25; } #side_social ul li a.deliciouss:hover { background-color: #0001fe; } #side_social ul li a.diggg:hover { background-color: #1b5891; } #side_social ul li a.flickrr:hover { background-color: #ff0083; } #side_social ul li a.deviantartt:hover { background-color: #5f7a6a; } #side_social ul li a.tumblrr:hover { background-color: #395777; } #side_social ul li a.stumblee:hover { background-color: #de470c; } #side_social ul li a.bloggerr:hover { background-color: #fa6700; } #side_social ul li a.behancee:hover { background-color: #035dfb; } #side_social ul li a.lastfmm:hover { background-color: #c71c05; } #side_social ul li a.skypee:hover { background-color: #3bc1f4; } #side_social ul li a.vimeoo:hover { background-color: #4ba8c0; } #side_social ul li a.wordpresss:hover { background-color: #2998c3; } #side_social ul li a.yahooo:hover { background-color: #650f6a; } #side_social ul li a.youtubee:hover { background-color: #fe1511; } .all_title { color: #3399CC; font-size: 14px; font-weight: bold; } .sub_lo { margin-left:15px;} .sub_lo li a{ text-transform:capitalize !important;} .bod_bot{ border-bottom:1px solid #CCC; padding-bottom:15px; padding-top:15px;} .testimonial_bod_bot { border-bottom: 1px solid #ccc; margin-bottom: 25px;} .qu ul.list { margin: 0; padding: 0; } .qu .list li { border-top: 1px solid #333d48; font-size: 13px; line-height: 27px; margin: 0; padding: 3px 0; } .qu .list li a{ color:#bcc1c5; } .qu .list li a:hover{ color:#FF9934; } #enquiry label{display: inline-block; float:left;} #enquiry label span{ color:#e24747;} #enquiry input[type="text"], input[type="password"], input[type="email"], textarea { margin-left:10px; width: 50%;} #enquiry select {margin-left:10px; width: 53%;} .gallery_portfolio-item img { display: block; height: auto; max-width: 100%; } .gallery_portfolio-item { margin-bottom: 20px; } .gallery_portfolio-item figure { position: relative; overflow: hidden; } .gallery_portfolio-item figcaption { display: block; position: absolute; bottom: 0; left: 50%; font-size: 21px; margin-bottom: -22.5px; margin-left: -22.5px; filter: alpha(opacity=0); opacity: 0; border-width: 2px; border-style: solid; border-radius: 4px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .gallery_portfolio-item figcaption a { display: inline-block; padding:10px; } .portfolio-detail { padding: 5px; background: #10A0D8; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; -o-transition: background 0.4s; -ms-transition: background 0.4s; transition: background 0.4s; position: relative; font-weight: 600; color: #fff; margin-bottom:10px;} .portfolio-detail:before { content: ''; position: absolute; bottom: 100%; left: 0; border-style: solid; border-width: 0; transition: border-width 0.4s; -webkit-transition: border-width 0.4s; -moz-transition: border-width 0.4s; -ms-transition: border-width 0.4s; -o-transition: border-width 0.4s; } .portfolio-detail h3 { font-size: 18px; text-align:center; color:#fff; } /* hover states */ .gallery_portfolio-item:hover figcaption { bottom: 50%; filter: alpha(opacity=100); opacity: 1; } .gallery_portfolio-item figcaption:hover { border-color: #f5f7fa; } .gallery_portfolio-item:hover .portfolio-detail a, .portfolio-item figcaption:hover a { color: #fff; } .portfolio-detail { border-top: 3px solid #F79238;} .portfolio-detail:before { border-color: transparent transparent transparent #F79238;} .gallery_portfolio-item:hover .portfolio-detail:before { border-width: 36px 0 0 36px;} .gallery_portfolio-item:hover .portfolio-detail{background:#F79238;} .gallery_portfolio-item:hover .portfolio-detail h3{color:#fff;} .widget > div { text-align: justify; } .gallery-img{width:1200px; float:left;} .hd{width:235px; float:left; margin-bottom:15px;} .thumbnail { margin-bottom: 7px; text-align: center; }