/* * Theme Name: Fuel Stick * Author: Okathemes * Version: 1.0.0 /* 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%40family%3dOpen%2bSans_3A400%2c300%2c600%2c700.html"); @import url("../fonts.googleapis.com/css%40family%3dRaleway_3A400%2c100%2c200%2c300%2c500%2c600%2c700%2c800.html"); @font-face { font-family: Tauri-Regular; src:url(font/Tauri-Regular.ttf) ; } @font-face { font-family: Signika-Regular; src:url(font/Signika-Regular.ttf) ; } @font-face { font-family: Mako-Regular; src:url(font/Mako-Regular.ttf) ; } /* 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:#fff; } #header .topbar { height: 40px; width: 100%; float:left; text-align:left; padding-left:20px; font-size:14px; border-bottom:1px solid #eceef0; } #header .topbar .call { padding:7px 0px; } #header .topbar .call li { display:inline-block; border-left:1px solid #eceef0; padding-left:10px; font-size:13px; margin-right:5px; font-family:"Signika-Regular" ; } #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: 30px; } #logo a img { float: left; width: auto; height:50px; position:absolute; } p{ text-align:left;} /* 02 Main Menu ================================================== */ #navigation { float: right; } .js .selectnav { display: none; } .menu ul { margin: 0; padding: 0; list-style: none; font-family:"Tauri-Regular"; } .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:30px; } .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: #2d3e52; 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: #B9B9B9; font-size: 13px; 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 #eff4f7!important; } .menu ul ul li:first-child { border: 0!important; } .menu ul ul li a:hover { color: #9ba0a5; background-color: #f5f7f9; 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: 124px; 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: 12px 20px !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; } #jPanelMenu-menu li a:hover { background-color: #f4f6f8; } #jPanelMenu-menu li li a { background-color: #fff; padding-left: 30px !important; } /* 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:600; color: #2d3237; font-family: "Tauri-Regular"; margin-top:30px; text-transform:uppercase; } .main-headline p { font-size: 13px; text-align:center; line-height:18px; color: #b9bec3; } .main-headline h3.color-white { color: #fff; } .headline { background-image:url(../images/head-bg.png) ; padding-left:10px; font-size: 14px; font-weight:800; padding-right: 10px; font-family: "Tauri-Regular"; text-transform:uppercase; letter-spacing:3px; padding-top:10px; text-shadow: 2px 2px 2px #fff; } .brd-headling { border-bottom: 3px solid #39F; width: 22px; float: left; margin: 0 0 25px 0; } .title-head { margin-top:10px; font-size: 16px; font-weight:800; padding-right: 10px; font-family: "Tauri-Regular"; text-transform:uppercase; letter-spacing:3px; text-shadow: 2px 2px 2px #fff; } /* 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: 14px; margin-top: 20px; font-weight: normal; } #breadcrumbs ul li { display: inline-block; color: #b9bec3; margin: 0 0 0 5px; font-family:"Mako-Regular" ; } #breadcrumbs ul li:after { content: ""; font-family: "FontAwesome"; font-size: 12px; color: #b9bec3; 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: #b9bec3; 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: #b9bec3; 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.html); 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.html); background-repeat: no-repeat; background-position: 50%; } .mfp-arrow.mfp-arrow-right { background-image: url(../images/mfp-right.html); 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: -60px 0 40px 0; } .google-map-container img { max-width: none !important; } /* 06 Revolution Slider ================================================== */ .tp-banner-container { width:100%; position:relative; } .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.html); background-repeat: no-repeat; background-position: 45% 50%; border-radius: 2px; left: 15px; } .tp-rightarrow.default { background-image: url(../images/rev/slider-right-arrow.html); 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.html) no-repeat; background-size:100%; width:890px; height:30px; bottom:-30px; } .tp-bannershadow.tp-shadow2 { background:url(../assets/shadow2.html) no-repeat; background-size:100%; width:890px; height:60px; bottom:-60px; } .tp-bannershadow.tp-shadow3 { background:url(../assets/shadow3.html) 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: 20px 0px 10px; background:#232d37; border-bottom:6px solid #dce6f0; } .bg-tagline h3 { color:#fff; font-weight: 300; font-family: "Raleway"; } .bg-tagline p { color:#b9bec3; font-weight:normal; } .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: 60px 0 5px 0; } .featured-box { margin: 0 0 0 0; } .circle-1 { width: 100px; height: 100px; 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; } .fuel-stick-img img { width: 120px; height: 120px; display: block; border-radius: 5px; border:1px solid; text-align: center; margin: 10px auto; } .circle-1 i { font-size: 40px; margin: 28px 0; 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: 30px 40px 0 30px; } .featured-desc h3 { font-size: 24px; margin-bottom: 10px; font-weight: 300; font-family: "Raleway"; 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: 40px 10px 0px 70px; } .featured-desc-2 h3 { font-size: 18px; font-weight: 300; font-family: "Raleway"; } .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: "Raleway"; 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: "Raleway"; 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: "Raleway"; 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: center; 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: 2px 2px 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: 16px; font-weight: 500; line-height: 10px; font-family:Signika-Regular; } .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:20px; } #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.html) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.html) 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.html) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.html) 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 auto 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; -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; } #filters a:hover, .selected { background-color: #a0a5aa !important; color: #fff !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:140px; 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:#d7dce1; 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-top: 36px; border:1px solid #fff; 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:#fff; 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:#d7dce1; 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 20px 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; } .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) { .parallex { background-size: cover; background-attachment: scroll; background-position: top center !important; } } /*------------------------------------------ parallex bagkground ------------------------------------------*/ #parallex1 { background-image: url(../images/parallex/parallex1.html); } #parallex2 { background-image: url(../images/parallex/parallex2.html); } #parallex3 { background-image: url(../images/parallex/parallex3.html); } #parallex4 { background-image: url(../images/parallex/parallex4.html); } #parallex5 { background-image: url(../images/parallex/parallex5.html); } #parallex-inner { background-image: url(../images/parallex/parallex-inner.html); margin-bottom:30px; } #parallex-inner .container { text-align:left; padding: 50px 0 20px; } #parallex-inner .container h1 { font-size:32px; font-family: 'Tauri-Regular'; font-weight:500; line-height:36px; letter-spacing:-1px; color:#000; } #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.html) 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: "Raleway"; 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: "Raleway"; 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: "Raleway"; 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: 12px 0px 10px 0px; margin: 0 20px 10px 20px; 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 20px 0px 20px; } .team-email { border-top: 1px solid #eceef0; padding: 5px 0 10px; margin: 0 20px 0px 20px; 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: 24px; } .team-img { border-radius: 2px 2px 0 0; } .team-alt { width:100%; float:left; } .team-alt .img-wrp { width:49%; float:left; } .team-alt .content { width:49%; float:right; text-align:left; } .img-wrp { position: relative; } .img-wrp img { display: block; width:100%; border-radius:2px; } .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; } .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: -105px 0 0 89px; } .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; } /* 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.html) 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.html) 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.html) 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.html) 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 { color: #848688; display: block; line-height: 19px; padding: 3px 0; } .categories a:hover { color: #a0a5aa; } .categories ul li:before { content: ""; font-family: "FontAwesome"; font-size: 13px; color: #ccc; margin: 3px 9px 0 0; float: left; } /* 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: 180px; 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: 97.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: #a0a5aa; } .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: #a0a5aa; } .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; } 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.html) 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: 'raleway'; 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: 50px 0px 50px 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; } .stats .type { color: #c3cdd7; font-weight: 200; font-size: 11px; letter-spacing:2px; } .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, .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; } .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; font-family:"Tauri-Regular"; } .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; font-family:"Mako-Regular"; font-size:14px; text-align:justify; } .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.html) 0 -8px no-repeat; } .notification.error .close { background: url(../images/alert_boxes_close_ico.html) 0 0 no-repeat; } .notification.warning .close { background: url(../images/alert_boxes_close_ico.html) 0 -16px no-repeat; } .notification.notice .close { background: url(../images/alert_boxes_close_ico.html) 0 -24px no-repeat; } /* Testimonials ====================================*/ .testimonials { background: #f4f6f8; 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: #848688; padding: 20px; line-height: 23px; } .testimonials-bg { background: url(../images/testimonials-bg.html) no-repeat; margin-top: -16px; display: block; margin-left: 27px; width: 200px; height: 30px; } .testimonials-author { color: #b9bec3; float: left; display: block; margin-bottom: 20px; font-style:italic; } .testimonials-author span { color: #b9bec3; } /* 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 list-tips { 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: ""; } .list-tips li { list-style-image:url(../images/blog-divider.png) ; line-height:1.8em; margin-left:20px; padding: 0 0 8px 5px; text-align:justify; font-family: Mako-Regular; } /* 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: 22px; padding: 18px 0; color: #232d37; font-weight: 800; text-align: center; background-color: #fff; font-family: "Raleway"; border-bottom: none; } .plan-price { font-size: 36px; font-weight: 900; color: #afb4b9; text-align: center; padding: 25px 0 22px 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; margin: 5px 0 0 0; opacity: 0.6; } .plan-features { background: #fff; padding: 12px 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: #232d37; 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: 80px 0 20px 0!important; color:#bcc1c5; font-size:13px; } #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: 5px 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: 5px 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: 20px 0 17px 0; color: #232d37; } #footer-bottom a { color: #232d37; font-family:Tauri-Regular; font-weight: 600; } #footer-bottom a:hover { color:#999 ; } /* 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:-37px; } .newsletter-btn:hover, .search-btn:hover { background-color: #a0a5aa; } .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: 75%; 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.html); 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; } #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 Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { .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; } } .country-map { float:left; padding-left:5px; padding-right:8px; margin-top:-9px; height:40px; } .top-pad { padding-top:50px; } .pdf-icon { background-image:url(../images/pdf.png) ; background-repeat:no-repeat ; padding-left: 35px; padding-top:4px; margin-left:0px; padding-bottom:8px; } .size-color { color:#F30 ; } .dist-head { font-family: "Mako-Regular"; font-size:14px; font-weight:600 ; color:#5F8CB4 ; text-transform:uppercase; } .state-head { font-family: "Mako-Regular"; font-size:14px; font-weight:600 ; color:#4F97BD; text-transform:uppercase; text-decoration:underline; font-style:italic; } .desc-text { font-family:Mako-Regular ; font-size:16px; font-weight:400; color:#515151; } .master-head { font-family: "Mako-Regular"; font-size:16px; font-weight:600 ; color:#5F8CB4 ; text-transform:uppercase; } .main-head { font-family:Tauri-Regular ; font-size:18px ; color:#000; } .contentbox { width:100%; clear:both; padding-bottom:10px; padding-top:10px;} .insidecontentbox{ margin-top:50px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:10px; margin-left:15px; margin-right:15px; text-align:justify; width:340px; text-align:justify; font-size:12px; float:left; height:400px; border:thin solid #0099FF;} .insidecontentboxhead{ margin-top:-45px; margin-bottom:30px; margin-left:-11px; width:350px; float:left; text-align:center; padding:5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#0099FF; color:#FFFFFF; border:thin solid #0099FF;} .contentbox2 { width:100%; clear:both; padding-bottom:10px; padding-top:10px;} .insidecontentbox2{ margin-top:50px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:10px; margin-left:20px; margin-right:20px; text-align:justify; color:#FFFFFF; width:355px; float:left; height:300px; border:thin solid #ffffff;} .insidecontentboxhead2{ margin-top:-45px; margin-bottom:30px; margin-left:-11px; width:365px; float:left; text-align:center; padding:5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#0099FF; color:#FFFFFF; border:thin solid #0099FF;} .insidecontentbox3 img{ width:100%; float:none; } .insidecontentbox3{ margin-top:50px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:10px; margin-left:20px; margin-right:20px; text-align:justify; color:#000000; width:90%; float:left; height:auto border:thin solid #000000;} .insidecontentboxhead3{ margin-bottom:30px; margin-left:-11px; width:100%; float:left; text-align:center; padding:5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#0099FF; color:#FFFFFF; border:thin solid #0099FF;} .insidecontentboxcontact{ -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:10px; margin-left:10px; margin-right:10px; text-align:justify; color:#000000; width:600px; float:left; height:auto; border: thin solid #0099FF; margin-top:100px; } .insidecontentboxheadcontact{ margin-top:-45px; margin-bottom:30px; margin-left:-11px; width:610px; float:left; text-align:center; padding:5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#0099FF; color:#FFFFFF; border:thin solid #0099FF;} .insidecontentboxcontact1{ margin-top:100px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:10px; margin-left:10px; margin-right:10px; text-align:justify; color:#000000; width:460px; float:left; height:auto; border: thin solid #0099FF; } .insidecontentboxheadcontact1{ margin-top:-45px; margin-bottom:30px; margin-left:-11px; width:470px; float:left; text-align:center; padding:5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#0099FF; color:#FFFFFF; border:thin solid #0099FF;}