/* * Theme Name: Evolve * Author: Okathemes * Version: 1.1 Import Section ====================================================================== */ @import url("base.css"); /* Default Reset, Typography, Forms, etc. */ @import url("responsive.css"); /* Responsive Grid */ @import url("fontawesome/css/font-awesome.min.css"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin-ext"); @import url("http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800&subset=latin-ext"); /* 01 Header ================================================== */ .left_sitemenu_box { clear: left; float: left; margin-bottom: 20px; } .left_sitemenu_box_titel { clear: left; float: left; font-weight: bold; margin-bottom: 10px; } .left_sitemenu_box a{ clear: left; float: left; } .left_sitemenu_box img{ clear: left; float: left; width:100%; } /*----pdf-box-css-----*/ .tds_box_titel{ font-family: raleway; font-family: raleway ; font-size: 14px; font-weight:bold; color:#FFF; margin: 0 2px; padding:10px 0 !important; letter-spacing: 1px; text-align: center; text-transform:uppercase !important; } /*.tds_box_titel > a{ color:#FFF !important; font-weight:bold !important; padding: 10px 0 !important; text-align:center !important; font-family: raleway ; text-transform:uppercase !important; font-size:16px; }*/ .tds_box_titel > a:hover{ color:#FFF; } /*------------- change on 19-09-2015 ----------------*/ .tds_box_link1{ font-size:16px ; font-family:raleway; margin: 2px; border: 1px dotted #cccccc; margin-left:10px; } .tds_box_link1 > a { color: #666 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 1px; margin: 0 !important; min-height: 40px; line-height: 17px !important; padding: 10px 0 0 10px !important; } .tds_box_link1 > a:hover{ text-decoration:none; } /*------------- change on 19-09-2015 ----------------*/ .tds_box_link{ font-size:16px ; font-family:raleway; margin: 2px; border: 1px dotted #cccccc; } .tds_box_link > a { color: #666 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 1px; margin: 0 !important; min-height: 40px; line-height: 17px !important; padding: 10px 0 0 10px !important; } .tds_box_link > a:hover{ text-decoration:none; } .inner_pdf_box .tds_box_link { font-size:16px !important; font-family:raleway; border: 1px dotted #cccccc; margin: 2px; } .inner_pdf_box .tds_box_link > a { color: #666 !important; display: block; font-size:13px; min-height: 40px; padding: 10px 0 0 10px !important; letter-spacing: 1px; text-align: left; text-transform:uppercase; } /*----pdf-box-css-----*/ .family_pro_name{ text-transform: none !important; } .newborder{ border: 1px dotted rgb(204, 204, 204); margin-top:-1px; } .h4capital { font-size:16px; padding: 20px 0 20px 20px; font-family:raleway; } .footergecko_img{ float: left; margin-right: 15px; margin-left: 20px; border: 5px solid #FFFFFF; border-radius: 2px; } .footergecko_img:hover{ border-color: #0c4da2; } .footer_nav{ clear: left; float: left; width: 100%; } .footer_nav_titel{ float:left; width:155px; color: #fff; font-size: 13px; font-weight: 800; line-height: 30px; } .footer_nav ul{} .footer_nav ul li{ float: left; line-height: 27px; } .footer_nav ul li a{ color: #bcc1c5; font-size: 13px; line-height: 13px; padding: 0 5px; } .footer_nav ul li:hover{ /*color:#FFFFFF;*/ } .footer_nav ul li a:hover{ color:#FFFFFF; } .simapal_nav{ float:left; clear:left; margin: 10px 0; } .simapal_nav ul{} .simapal_nav li { border: 0 none !important; min-height: auto !important; text-align: left; background: url("../images/bullet.png") no-repeat scroll 0 6px rgba(0, 0, 0, 0) !important; color: #333; line-height: 13px !important; padding: 0 0 10px 15px; } #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: 30px; width: 100%; /*float:left;*/border-bottom: 1px solid #eceef0; background-color: #e5e5e5; } #header .topbar .call { padding:3px 0; } #header .topbar .call li { display: inline-block; border-left:1px solid #ccc; padding-left: 10px; font-size: 12px; margin-right: 5px; } #header .topbar .call li i { font-weight: 400; color: #666 !important; } #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: 30px; } #header .topbar .social-icons li.last { border-right: 1px solid #eceef0; } #header .topbar .language { padding:3px 0; float: right; } #header .topbar .language li { display: inline-block; border-left:1px solid #ccc; padding-left: 10px; font-size: 12px; margin-right: 5px; } #header .topbar .language li.first { border-left: 0px 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 { float:right; margin-top: 5px !important; } #logo a img { float: right; width: auto; height: 65px; } /* 02 Main Menu ================================================== */ #navigation { float: left; } .js .selectnav { display: none; } .menu ul { margin: 0; padding: 0; list-style: none; } .menu ul li { position: relative; } .menu ul ul { position: absolute; display: none !important; top: 100%; left: 0; z-index: 100; width: 175px; } .menu > ul li { float: left; margin-right: 30px; } .menu > ul li a:hover{ color:#0C4DA2; } .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: 25px 5px; /*padding: 40px 5px 40px 5px;*/ overflow: hidden; -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: 2px; 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: 1px 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: #afb4b9; font-size: 12px; line-height: 18px; padding: 10px 16px !important; border: 0; text-transform: none; font-weight: normal; margin-left: 0px; border-top: 0px!important; } .menu ul ul li a:last-child { border-radius: 0 0 3px 3px; } .menu ul ul li { border-top: 1px solid #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) { .subItemDetail .six_product.columns{width: 100% !important;} .bg_top{ display:none; } #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: 300; color: #2d3237; font-family: "Raleway"; margin-top: 30px; margin-bottom:4px; } .main-headline p { font-size: 13px; text-align: center; line-height: 18px; color: #868b90; } .main-headline h3.color-white { color: #fff; } .headline { font-size: 14px; font-weight: 800; padding-right: 10px; font-family: "Raleway"; letter-spacing: 3px; margin-top: 10px;} .headline1 { font-size: 14px; font-weight: 800; padding-right: 10px; font-family: "Raleway"; letter-spacing: 3px; margin-top:-19px;} .brd-headling { border-bottom: 3px solid #ddd; width: 22px; float: left; margin: 0 0 10px 0; } /* 05 Basic Elements ================================================== */ /* Title bar ================================================== */ #titlebar { background-color: #eff4f7; min-height: 80px; margin: 0 0 40px 0; padding-top: 20px; } #titlebar h2 { font-size: 20px; font-weight: 500; float: left; width: 100%; margin: 25px 0 0 0; } #titlebar span { font-weight: 300; color: #a0a5aa; } /* Tagline ================================================== */ #tagline { margin: 60px 0 40px 0; font-size: 20px; text-align: center; font-weight: 500; color: #505050; } #tagline p { line-height: 28px; margin: 3px 0; } #tagline span, #tagline a { background: #a0a5aa; color: #fff; padding: 0 7px 1px 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05); } /* Breadcrumbs ================================================== */ #breadcrumbs ul { float: right; font-size: 13px; margin-top: 5px; font-weight: normal; } #breadcrumbs ul li { display: inline-block; color: #b9bec3; margin: 0 0 0 5px; } #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 !important; 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: default;/*cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; */} .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #a0a5aa; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 504; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: #fff; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } .mfp-s-loading .mfp-arrow { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 506; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; opacity: 1; padding: 0 0 18px 10px; text-indent: 99999; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: 10px; top: 40px; padding-right: 6px; width: 100%; background-image: url(../images/mfp-close.png); background-repeat: no-repeat; background-position: 100% 50%; text-indent: 9999; } .mfp-counter { position: absolute; top: 0; right: 0; color: #a0a5aa; font-size: 13px; line-height: 18px; } .mfp-arrow { position: absolute; top: 0;/* opacity: 0;*/ margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: solid transparent; } .mfp-arrow.mfp-arrow-left { background-image: url(../images/mfp-left.png); background-repeat: no-repeat; background-position: 50%; } .mfp-arrow.mfp-arrow-right { background-image: url(../images/mfp-right.png); background-repeat: no-repeat; background-position: 50%; right: 0; } .mfp-content:hover .mfp-arrow { opacity: 1; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } .mfp-iframe-holder .mfp-close { top: -40px; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); } .mfp-figure { line-height: 0; } .mfp-bottom-bar { margin-top: -30px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-break: break-word; padding-right: 36px; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } /* Media Queries for Magnific Popup */ @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0 } /* The shadow behind the image */ .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } } @media all and (max-width: 800px) { .mfp-arrow { width: 70px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.85; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Flickr Widget ====================================*/ .flickr-widget-blog { margin: 5px -15px 0 0; } .flickr-widget-blog img { display: block; width: 100%; } .flickr-widget-blog a { float: left; width: 76px; height: 76px; margin-right: 10px; margin-bottom: 10px; border: 5px solid #f2f4f6; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border-radius: 2px; } .flickr-widget-blog a:hover { border: 5px solid #a0a5aa; border-radius: 2px; } /* Google Maps ====================================*/ #googlemaps { padding-bottom: 30%; border-radius: 2px; } .google-map-container { margin: -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: 22px 0 1px; background: #0C4DA2; border-bottom: 6px solid #dce6f0; } /*.bg_top { width: 100% !important; position: relative; padding: 0px 0 10px; background: #5a5a5a; }*/ .bg-tagline h3 { color: #fff; font-weight: 300; font-family: "Raleway"; font-size: 38px; margin-bottom: 8px; } .bg-tagline p { color: #b9bec3; font-weight: normal; font-size: 22px; line-height: 35px; font-weight: 300; } .bg-tagline a { font-size: 16px; font-weight: 300; line-height: 18px; margin-top: 10px; padding: 10px; } /* 08 Featured Boxes ================================================== */ .featured-boxes { float: left; margin: 60px 0 5px 0; } .featured-box { margin: 0 0 0 0; transition-timing-function: ease-in-out;} .circle { width: 100px; height: 100px; display: block; border-radius: 50%; border: 1px solid #0c4da2; text-align: center; margin: 10px auto; } .square { width: 90px; height: 90px; display: block; border-radius: 5px; border: 1px solid; text-align: center; margin: 10px auto; } .circle i { font-size: 40px; margin: 28px 0; text-align: center; width: 100%; z-index: 5; position: relative; color:#0c4da2; } .square i { font-size: 40px; margin: 22px 0; left: 28%; float: left; z-index: 5; position: relative; } .circle, .circle i, .square, .square 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; } /*-------01--------*/ .featured-box:hover > .circle, .featured-box:hover > .square { background-color: #f0e631 !important; border:1px solid #f0e631 !important; color:#FFF !important; /* -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); */} .featured-box:hover > .circle i, .featured-box:hover > .square i { color: #fff; } /*-------01--------*/ .featured-boxes > div:hover:nth-child(2) .circle, .featured-boxes > div:hover:nth-child(2) .square{ background-color: #cb2a8b !important; border:1px solid #CB2A8B !important; } .featured-boxes > div:hover:nth-child(3) .circle, .featured-boxes > div:hover:nth-child(3) .square{ background-color: #62adec !important; border:1px solid #62ADEC !important; } .featured-boxes > div:hover:nth-child(4) .circle, .featured-boxes > div:hover:nth-child(4) .square{ background-color: #cb2a8b !important; border:1px solid #CB2A8B !important; } .featured-desc { text-align: center; margin: 30px 40px 0 30px; } .featured-desc h3 { font-size: 24px; margin-bottom: 10px; font-weight: 500; font-family: "Raleway"; letter-spacing: -0.5px; } .featured-desc a { margin: 10px auto; display: inline-block; float: none; } /* Circle Style 2*/ .circle-4 { width: 48px; height: 48px; display: block; border-radius: 50%; background-color: #0c4da2; 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; border: 1px solid #0c4da2; color: #fff; } .circle-4:hover{ border-color:#0c4da2; color: #0c4da2 !important; } .circle-4-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-4 em,.circle-4 i, .circle-4-line em,.circle-4-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-4 { 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-4-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-4 i, .square-4-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-4, .featured-box:hover > .square-4 { background-color: transparent; } .featured-box:hover > .circle-4 i, .featured-box:hover > .circle-4-line i, .featured-box:hover > .square-4 i, .featured-box:hover > .square-4-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: #0C4DA2; border-color:#0C4DA2; } .featured-desc-4 { text-align: left; margin: 10px 10px 20px 70px;min-height:158px; } .featured-desc-4 h3 { font-size: 18px; font-weight: 400; font-family: "Raleway"; } .featured-desc-4 p { font-size: 13px; } .featured-desc-4 a { font-size: 13px; position: relative; top: -10px; } .featured-desc-4 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 { background-color:#FFF; -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: left; background-color: #f8fafc; border-radius: 0 0 2px 2px; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); margin-top: -4px; } .item-description-bgwhite { background-color: #fff; } .portfolio-item img { border-radius: 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: 14px; color:#5d5d5d; font-weight: 600; line-height: 20px; text-align: center; } .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:5px 10px; } #related-work .item-description h5 { line-height: 20px; } .portfolio-item:hover > figure > .item-description { background-color: #fff; } .portfolio-item:hover > figure > .item-description a h5 { color: #fff; } .portfolio-item:hover > figure > .item-description span { color: #000; opacity: 0.5; filter: alpha(opacity=50); } /* Hover / Animations ====================================*/ .hovericon { position: absolute; left: 50%; top: 0; color: #fff; font-size: 18px; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; background-color: rgba(255, 255, 255, 0.2)!important; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5)!important; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-opacity: 0.00; -khtml-opacity: 0.00; opacity: 0.00; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .portfolio-item:hover .hovericon, .post-img:hover .hovericon { position: absolute; left: 50%; top: 65%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -moz-opacity: 1.00; -khtml-opacity: 1.00; opacity: 1.00; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .hovercover { display: none; } .hovercover { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000,endColorstr=#59000000)"; background-color: rgba(0, 0, 0, 0.6); opacity: 0; border-radius: 2px; } .portfolio-item .hovercover { border-radius: 2px 2px 0 0; } .hoverzoom { background: url(../images/hoverzoom.png) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.png) no-repeat; display: block; height: 19px; width: 19px; margin: 21px 0 0 20px; } /* 11 Portfolio Without Description ================================================== */ .portfolio-alt { float: left; } .portfolio-alt li.one-third { width: 100%; margin-right: 1px!important; margin-left: 0px!important; margin-bottom: 1px!important; } .portfolio-item-alt img { -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s; -o-transition-duration: 0.7s; height: 100%; } .portfolio-item-alt:hover img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); } /* Hover / Animations ====================================*/ .portfolio-item-alt:hover .hovericon { position: absolute; left: 50%; top: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -moz-opacity: 1.00; -khtml-opacity: 1.00; opacity: 1.00; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .hovercover-alt { display: none; } .hovercover-alt { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000,endColorstr=#59000000)"; background-color: rgba(0, 0, 0, 0.35); opacity: 0; } .portfolio-item-alt:hover .hovercover-alt { opacity: 1; } .hoverzoom { background: url(../images/hoverzoom.png) no-repeat; display: block; height: 18px; width: 18px; margin: 21px 0 0 21px; } .hoverlink { background: url(../images/hoverlink.png) no-repeat; display: block; height: 19px; width: 19px; margin: 21px 0 0 20px; } .mediaholder-alt { position: relative; overflow: hidden; width: 100%; height: 280px!important; } .mediaholder-alt img { width: 100%; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* 12 Portfolio Filteration ================================================== */ #portfolio-wrapper .portfolio-item { margin-bottom: 20px; } #portfolio-wrapper { display: block; } .back li a { float:right; border-radius: 2px; border:1px solid; cursor: pointer; color:#2d3e52; border-color: #0c4da2; display: inline-block; font-size: 14px; font-weight: 500; outline: medium none; padding: 8px 16px; transition: all 0.2s ease-in-out 0s; width: auto; } .back li a:hover{ background-color:#e5e5e5 !important; } .pro_back_button a{ float:right; border-radius: 2px; border:1px solid #0c4da2; cursor: pointer; color:#2d3e52; display: inline-block; font-size: 14px; font-weight: 500; outline: medium none; padding: 8px 16px; transition: all 0.2s ease-in-out 0s; width: auto; } .pro_back_button a:hover{ background-color:#0c4da2 !important; color:#FFF !important; } #filters { text-align: center; margin: 0px!important; } #filters li { display: block; line-height: 24px; background: #fff; overflow: hidden; } #filters a{ color: #666; 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;*/ background:none; text-align: left;} /*#filters a:hover, .selected { background-color: #a0a5aa !important; color: #fff !important; border: 1px solid !important; }*/ #filters a.selected{font-weight:bold;} #filters a:hover, .selected { color: #0c4da2 !important;} #filters a:hover, .selected {background-color: none !important;} #filters .option-set{ clear: both; } /* 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: #0C4DA2; 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 { 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: #0C4DA2; margin-left: 10px; } .sb-navigation-left-4:hover i, .sb-navigation-right-4:hover i { color: #fff!important; } .sb-navigation-left-4:hover, .sb-navigation-right-4:hover { background-color: #a0a5aa; } .sb-navigation-left-4.notclickable, .sb-navigation-right-4.notclickable { cursor: default; } .sb-navigation-left-4.notclickable i, .sb-navigation-right-4.notclickable i { color: #d7dce1; } /* Basic Styles ====================================*/ .showbiz ul, .showbiz li { list-style: none; margin: 0; padding: 0; } .showbiz ul li { position: relative; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; margin: 20px 20px 5px 0; } .showbiz.our-clients ul li { margin: 10px 40px 30px 0; } .showbiz.our-clients { margin-bottom: -10px; } .showbiz .overflowholder { overflow: hidden; position: relative; width: 100%; z-index: 2; } .showbiz .overflowholder ul { width: 100000px; position: absolute; top: 0px; left: 0px; } .showbiz .overflowholder ul li { float: left !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; } .showbiz .overflowholder ul li .four { width: 280px!important; float: none; } .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-color:#0c4da2; margin-bottom: 0px; } #parallex-inner .container { text-align: left; padding:10px 0 2px; } #parallex-inner .container h1 { font-size: 36px; font-family: 'raleway'; font-weight: 100; line-height: 36px; letter-spacing: -1px; margin-bottom:8px; } #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-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; 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; 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:29%; float:left; } .team-alt .content { width:69%; 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; } #not-found p { text-align: center; font-size: 14px; line-height: 24px; color: #b9bec3; } #not-found a:hover i { color: #fff!important; } /* 17 Recent Blog Post ================================================== */ .recent-blog { margin-bottom: 38px; background: #fff; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .08); border-radius: 0 2px 2px 0px; } .recent-blog img { width: 100%; border-radius: 2px 2px 0px 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .recent-blog:hover img { opacity: 0.8; } .recent-blog h4 { line-height: 21px; padding: 10px 10px 0; font-size: 16px; } .recent-blog h4 a { color: #333 } .recent-blog h4 a:hover { color: #848688 } .recent-blog p { margin-bottom: 0; padding: 10px; font-size: 13px; line-height: 22px; } .recent-blog .author { margin-bottom: 0; padding: 10px; font-size: 13px; border-top: 1px solid #eff4f7; text-align: center; color: #b9bec3; } .margin-1 { margin: 28px 0 22px 0 } .date { float: left; text-align: center; height: 0; position: relative; top: 20px; z-index: 9; } .date span { display: block; background: #ff0000; } .day { padding: 5px 10px 0 10px; font-size: 14px; font-weight: 500; color: #fff; border-radius: 0px 2px 0px 0 } .month { background: #ccc; padding: 0 10px 2px 10px; color: #fff; border-radius: 0px 0px 2px 0; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07) } .margin-reset { margin-top: -10px } .sidebar.padding-reset { padding-top: 0 } /* 18 Blog Section ================================================== */ .post { padding: 0 0 40px 0; margin: 0 0 40px 0; border-bottom: 1px solid #eceef0; } .post-img img, .post-img iframe { border-radius: 2px; } .post-img { margin: 0 0 30px 0; } .medium .post-img { margin: 0; } /* Post Content */ .post-content, .post-format { float: left; } .post-format { border-right: 1px solid #eceef0; margin-right: 20px; padding: 5px 15px; } .post-format h2 { font-weight: 600; color: #b9bec3; text-align: center; border-bottom: 1px solid #eceef0; font-size: 36px; line-height: 20px; padding-bottom: 20px; margin-bottom: 10px; } .post-format h4 { font-weight: 600; color: #e2e4e6; text-align: center; font-size: 14px; line-height: 20px; } .post-format span { font-weight: 300; color: #e2e4e6; text-align: center; } .post-format span:hover { font-weight: 300; color: #000; text-align: center; } .post-format .icon-camera { font-size: 14px; margin-top: 23px; left: 38% } .post-content { margin: -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.html') 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.png) no-repeat right 12%; width: 68px; height: 17px; margin-right: -68px; display: block; position: absolute; right: 0; top: 16px; } .tline-row-r { background: url(../images/left-timeline.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.png) no-repeat; margin-left: -30px; } .comment-des strong { float: left; padding-right: 5px; color: #848688; } .comment-des span { float: left; color: #b9bec3; } .comment-by { float: left; width: 100%; padding-bottom: 8px; padding-top: 5px; } .comment-by span.reply { float: right; display: inline; } .comment-by span.reply a { float: right; height: 17px; margin-left: 5px; font-weight: normal; color: #b9bec3; } .comment-by span.reply a i { color: #bbb; transition: all 0.1s ease-in-out; } .comment-by span.reply a:hover, .comment-by span.reply a:hover i { color: #a0a5aa; } .comment-by span.date { color: #b9bec3; float: left; font-weight: 300; text-align: left; padding: 0 0 0 8px; position: relative; top: 0px; font-size: 12px; font-style: italic; } /* Pagination ================================================== */ .pagination { margin: 0; } .pagination ul li a { padding: 7px 11px; border-bottom: none; display: inline-block; color: #b9bec3; float: left; margin-right: 4px; border: 1px solid #eceef0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border-radius: 2px; } .pagination .current, .pagination ul li a:hover { color: #fff; } /* 20 Tags ================================================== */ .tags { margin: 10px 0 0 0; } .tags a { padding: 4px 11px 4px 11px; display: inline-block; color: #b9bec3; background-color: #f2f4f6; margin: 0 2px 6px 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05); border-radius: 2px; } .tags a:last-child { margin-right: 0; } .tags a:hover { background: #a0a5aa; color: #fff; box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1); } /* Widget Tabs ====================================*/ .widget-tabs li { padding: 0 0 12px 0; margin: 12px 0 0 0; border-bottom: 1px solid #eceef0; } .widget-tabs li:first-child { margin: 4px 0 0 0; } .widget-tabs li:last-child { border-bottom: 0; } .widget-thumb a img { display: block; width: 70px; height: 70px; border: 5px solid #f2f4f6; border-radius: 2px; float: left; margin: 0 10px 0 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .widget-thumb a img:hover { border: 5px solid; } .widget-text h4 { font-size: 14px; font-weight: 600; line-height: 21px; padding: 3px 0 0 0; } .widget-text h4 a { color: #777; } .widget-text h4 a:hover { color: #b9bec3; } .widget-text span { color: #a0a5aa; font-weight: 300; margin: 4px 0 0 0; display: block; } .widget-tabs.comments .widget-text span { padding: 5px 0 0 0; margin: 0; } /* Widget ====================================*/ .widget { margin: 30px 0 0 0; } .widget p { margin: 0; } .categories a { color: #666 !important; display: block; line-height: 24px; padding: 3px 0; font-size: 15px; /*text-transform:uppercase;*/ } .categories a:hover { color: #002595 !important; } /*.categories ul li:before { content: ""; font-family: "FontAwesome"; font-size: 13px; color: #666; margin: 5px 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 !important; 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; width: 25%; margin: 0; letter-spacing: -1px; } .button-group .or { background-color: #fff; display: block; font-size: 12px; 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: 5px 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: #00C02C; font-weight: 200; font-size: 11px; letter-spacing: 2px; font-weight: bold; } .stats .type.white { color: #fff; font-weight: 200; font-size: 11px; letter-spacing: 2px; } .stats-alt { padding: 10px 0px 10px 0px; text-align: center; border-right: 1px solid #eff4f7; width: 100%; } .stats-alt.brddark { padding: 10px 0px 10px 0px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.1); width: 100%; } .stats-alt.last { border-right: 0px solid #eff4f7; } .stats-alt .num { color: #232d37; font-size: 20px; font-weight: 800; margin-bottom: 10px; } .stats-alt .type { color: #c3cdd7; font-weight: 200; font-size: 8px; letter-spacing: 2px; line-height: 12px; } .stats-alt .type.white { color: #fff; font-weight: 200; font-size: 8px; letter-spacing: 2px; } /* Icons Demo ====================================*/ .the-icons { list-style-type: none; margin: 0 } .the-icons li [class^="icon-"], .the-icons li [class*="icon-"], .the-icons li [class^="ss-"], .the-icons li [class*="ss-"] { display: inline-block; text-align: center } .the-icons li { display: block; line-height: 32px; height: 30px; padding: 0 0 0 2px; border-radius: 2px } .the-icons li, .the-icons li:hover { color: #848688; } .the-icons li, .the-icons li i { color: #2d3237; } .the-icons li [class^="icon-"], .the-icons li [class*="icon-"], .the-icons li [class^="ss-"], .the-icons li [class*="ss-"] { width: 32px; font-size: 14px } .the-icons li:hover { text-decoration: none; } .the-icons li:hover [class^="icon-"], .the-icons li:hover [class*="icon-"], .the-icons li:hover [class^="ss-"], .the-icons li:hover [class*="ss-"] { font-size: 28px; vertical-align: middle } .the-icons li:hover [class^="icon-"]:before, .the-icons li:hover [class*="icon-"]:before, .the-icons li:hover [class^="ss-"]:before, .the-icons li:hover [class*=" s-"]:before, { font-size:24px; vertical-align:-3px } /* Social Icons ====================================*/ .social-icons li { display: inline; float: left; margin-right: 4px; } .social-icons li a { width: 30px; height: 30px; 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, .stumbleupon:before, .dribbble:before { font-family: "FontAwesome"; 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; } #header .topbar .social-icons li i,#header .topbar .social-icons li a:before{ display: block; width: 100%; text-align: center; line-height: 30px;} /* Icon Styles */ .twitter:before { font-size: 14px; } .twitter:before { content: "\f099"; top: 0; opacity:1; } .twitter:hover:before { top: 30px; opacity: 0; } .twitter:hover { background-color: #3bc1ed; } .dribbble:before { content: "\f17d"; top: 0; opacity:1; } .dribbble:hover:before { top: 30px; opacity: 0; } .dribbble:hover { background-color: #ef5a92; } .facebook:before { content: "\f09a"; top: 0; opacity:1; } .facebook:hover:before { top: 30px; opacity: 0; } .facebook:hover { background-color: #4a6d9d; } .linkedin:before { content: "\f0e1"; top: 0; opacity:1; } .linkedin:hover:before { top: 30px; opacity: 0; } .linkedin:hover { background-color: #0b7bb5; } .delicious:before { content: "\f1a5"; top: 0; opacity:1; } .delicious:hover:before { top: 30px; opacity: 0; } .delicious:hover { background-color: #3274d1; } .paypal:before { content: "\f1ed"; top: 0; opacity:1; } .paypal:hover:before { top: 30px; opacity: 0; } .paypal:hover { background-color: #2e689a; } .gplus:before { content: "\f0d5"; top: 0; opacity:1; } .gplus:hover:before { top: 30px; opacity: 0; } .gplus:hover { background-color: #d53824; } .stumbleupon:before { content: "\f1a4"; top: 0; opacity:1; } .stumbleupon:hover:before { top: 30px; opacity: 0; } .stumbleupon:hover { background-color: #eb4924; } .pinterest:before { content: "\f231"; top: 0; opacity:1; } .pinterest:hover:before { top: 30px; opacity: 0; } .pinterest:hover { background-color: #cb1f25; } .digg:before { content: "\f1a6"; top: 0; opacity:1; } .digg:hover:before { top: 30px; opacity: 0; } .digg:hover { background-color: #205685; } .spotify:before { content: "\f1bc"; top: 0; opacity:1; } .spotify:hover:before { top: 30px; opacity: 0; } .spotify:hover { background-color: #6ca405; } .reddit:before { content: "\f281"; top: 0; opacity:1; } .reddit:hover:before { top: 30px; opacity: 0; } .reddit:hover { background-color: #404040; } .appstore:before { content: "\f179"; 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; } .evernote:before { content: "\45"; top: 0; opacity:1; } .evernote:hover:before { top: 30px; opacity: 0; } .evernote:hover { background-color: #6bb130; } .flickr:before { content: "\f16e"; top: 0; opacity:1; } .flickr:hover:before { top: 30px; opacity: 0; } .flickr:hover { background-color: #136dd5; } .rss i, .rss:before { font-size: 14px !important; } .rss:before { content: "\f09e"; top: 0; opacity:1; } .rss:hover:before { top: 30px; opacity: 0; } .rss:hover { background-color: #fe8f00; } .youtube i, .youtube:before { font-size: 18px !important; } .youtube:before { content: "\f167"; top: 0; opacity:1; } .youtube:hover:before { top: 30px; opacity: 0; } .youtube:hover { background-color: #bf2f29; } .vimeo i, .vimeo:before { font-size: 14px !important; } .vimeo:before { content: "\f27d"; top: 0; opacity:1; } .vimeo:hover:before { top: 30px; opacity: 0; } .vimeo:hover { background-color: #4c8ab0; } .xing:before { content: "\f168"; top: 0; opacity:1; } .xing:hover:before { top: 30px; opacity: 0; } .xing:hover { background-color: #036568; } .yahoo:before { content: "\f19e"; top: 0; opacity:1; } .yahoo:hover:before { top: 30px; opacity: 0; } .yahoo:hover { background-color: #9251a2; } .amazon:before { content: "\f270"; top: 0; opacity:1; } .amazon:hover:before { top: 30px; opacity: 0; } .amazon:hover { background-color: #2f3842; } .steam:before { content: "\f1b6"; top: 0; opacity:1; } .steam:hover:before { top: 30px; opacity: 0; } .steam:hover { background-color: #383838; } .dropbox:before { content: "\f16b"; top: 0; opacity:1; } .dropbox:hover:before { top: 30px; opacity: 0; } .dropbox:hover { background-color: #2c92dd; } .github:before { content: "\f09b"; top: 0; opacity:1; } .github:hover:before { top: 30px; opacity: 0; } .github:hover { background-color: #5c7381; } .lastfm:before { content: "\f202"; top: 0; opacity:1; } .lastfm:hover:before { top: 30px; opacity: 0; } .lastfm:hover { background-color: #d21309; } .tumblr:before { content: "\f173"; top: 0; opacity:1; } .tumblr:hover:before { top: 30px; opacity: 0; } .tumblr:hover { background-color: #3d658d; } .wordpress:before { content: "\f19a"; top: 0; opacity:1; } .wordpress:hover:before { top: 30px; opacity: 0; } .wordpress:hover { background-color: #383838; } .instagram:before { content: "\f16d"; 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: #333; 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 #ddd;*/ margin-bottom: 10px; } .ui-accordion .ui-accordion-header-active:hover, .ui-accordion .ui-accordion-header-active, .trigger.active a, .trigger.active a:hover { background: #a0a5aa; color: #fff; } /*.ui-accordion .ui-accordion-content, .toggle-container { padding: 10px 16px 10px 16px; border-right: 1px solid #eceef0; border-left: 1px solid #eceef0; border-bottom: 1px solid #eceef0; margin-top: -10px; margin-bottom: 10px; }*/ .ui-accordion .ui-accordion-content p { margin: 0; } .ui-accordion .ui-accordion-content { } .ui-accordion-icon:before, .ui-accordion-icon-active:before, .toggle-icon:before { font-family: "FontAwesome"; content: "+"; color: #444; font-size: 20px; display: block; float: right; line-height: 25px; margin: 0 0px 0 0; } .toggle-container p { margin: 0; } .ui-accordion-icon-active:before, .trigger.active .toggle-icon:before { content: "-"; color: #fff; } .faq .toggle-icon:before, .faq .trigger.active .toggle-icon:before { /*content: ""; float: left; */margin-right: 10px; } .ui-accordion h6 { line-height: 26px; outline: none; color: #848688; font-size: 14px; border-bottom: 1px solid #eceef0; margin: 10px 0; font-weight: 600; } .ui-accordion p strong { line-height: 26px; outline: none; width: 30%!important; font-size: 12px; } .ui-accordion ul { margin-bottom: 20px; } .ui-accordion .button { margin-left: 10px; margin-bottom: 10px; } /* Alert Boxes ====================================*/ .notification { font-size: 14px; line-height: 18px; margin-bottom: 15px; position: relative; padding: 13px 40px 13px 18px; border-radius: 2px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03); } .notification p { margin: 0; } .notification span { font-weight: 600; } .notification.success, .notification.success strong { background-color: #EBF6E0; color: #5f9025; border: 1px solid #b3dc82; } .notification.error, .notification.error strong { background-color: #ffe9e9; color: #de5959; border: 1px solid #fbc4c4; } .notification.warning, .notification.warning strong { background-color: #FBFADD; color: #8f872e; border: 1px solid #ded58a; } .notification.notice, .notification.notice strong { background-color: #E9F7FE; color: #5091b2; border: 1px solid #b6d7e8; } .notification strong { border: none !important; } .notification.success .close, .notification.error .close, .notification.warning .close, .notification.notice .close { padding: 0px 9px; position: absolute; right: 0; top: 22px; display: block; height: 8px; width: 8px; cursor: pointer; } .notification.success .close { background: url(../images/alert_boxes_close_ico.png) 0 -8px no-repeat; } .notification.error .close { background: url(../images/alert_boxes_close_ico.png) 0 0 no-repeat; } .notification.warning .close { background: url(../images/alert_boxes_close_ico.png) 0 -16px no-repeat; } .notification.notice .close { background: url(../images/alert_boxes_close_ico.png) 0 -24px no-repeat; } /* Testimonials ====================================*/ .testimonials { background: #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.png) no-repeat; margin-top: -16px; display: block; margin-left: 27px; width: 200px; height: 30px; } .testimonials-author { color: #b9bec3; float: left; display: block; margin-bottom: 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 { content: ""; font-family: "FontAwesome"; margin: 0 8px 0 0; position: relative; color: #a0a5aa; } .list-1 li:before { content: ""; } .list-2 li:before { content: "\f105"; } .list-3 li:before { content: ""; } .list-4 li:before { content: ""; } /* Pricing Tables ===================================== */ .plan { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.07); border-radius: 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .plan:hover { box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07); } .plan h3 { font-size: 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: 20px 0 0px!important; color: #bcc1c5; font-size: 13px; font-weight:normal; } #footer h3 { margin-bottom: 10px; color: #fff; font-weight: 800; 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 { font-weight:800px; font-size:13px; color: #FFFFFF; } #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 { background-color: #f2f4f6; padding: 20px 0 0px!important; color: #232d37; font-size: 13px; font-weight:normal; } #footer h3 { margin-bottom: 10px; color: #232d37; font-weight: 800; 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 { font-weight:800px; font-size:13px; color: #232d37; } #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 .sitemap li{ float: left; width: 33%; margin:0 0 16px; } #footer .sitemap li a{ color: #232d37; } /* Footer Bottom ====================================*/ #footer-bottom { background-color: #fff; padding: 5px 0; color: #232d37; font-size: 12px; } #footer-bottom a { color: #232d37; font-weight: 600; } /* Get In Touch ==================================== .get-in-touch { margin: 15px 0 0 0; } .get-in-touch li p strong { color: #bcc1c5; float: left; font-weight: 600; margin: 0 5px 5px 0; } .get-in-touch .icon-map-marker { font-size: 16px; } .get-in-touch li { margin: 0 0 15px 0; } .get-in-touch p, .get-in-touch li, .get-in-touch a { color: #bcc1c5 !important; } .get-in-touch p { margin: -2px 0 0 25px; line-height: 20px; } .get-in-touch li i { float: left; margin: 2px 0 0 0; color: #bcc1c5; }*/ .get-in-touch { margin: 15px 0 0 0; } .get-in-touch li p strong { color: #232d37; 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: #232d37 !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: #232d37; } /* 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: -96px; } .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: 64%; 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: 800px) { .subtab > li { margin-bottom:10px; } } @media only screen and (max-width: 767px) { .product-new-list ul li h4{ clear: left; float: left; padding-left:0px !important; padding-top:10px !important; } .product-new-list ul li p{ clear: left; float: left; padding-left:0px !important; } .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; } .homt1{ font-size: 22px !important; } .homt2{ font-size: 16px !important; line-height: 20px !important; } } .jus { text-align: justify; } .cen { text-align: center; } .margin_top { margin-top: 0px !important; } .red_colo { color: #00C02C !important; } .left_te { text-align: left !important; } .bule_red { color: #0C4DA2 !important; font-weight: bold; } .bule_red span { color: #0C4DA2 !important; font-weight: bold; } .mar_top{ margin-top:5px !important;} .img-responsive { display: block; height: auto; max-width: 100%; width: 100%; } .font_side12{ font-size:12px;} .boder{ border:1px solid #efefef;} /*.categories a { color: #848688; display: block; line-height: 19px; padding: 3px 0; }*/ .products_categories a:hover { color:#002595 !important } .products_categories ul li:before {margin: 3px 9px 0 0; float: left; } .products_categories a { border-bottom: 1px solid #ccc; color: #848688 !important; display: block; font-size: 14px; line-height: 28px; padding: 3px 0; text-decoration: none !important; } .pro_inner_titel{ text-transform:uppercase; float: left; clear: left; font-weight: bold; margin-bottom: 15px; } .float_l { float: left; margin: 4px 15px 0 0; } .float_r { float: right; } .product-new-list { margin: 0 0 15px; } .product-new-list ul { list-style-type: none; width:100%; margin-bottom:20px; float:left; padding: 0; } .product-new-list ul li { background-image: none; border: 1px dotted #cccccc; float: left; height: auto !important; list-style-type: none; min-height: 57px; padding: 5px 0; width: 99.5%; } .product-new-list ul li a { cursor: pointer; text-decoration: none; } .toggle-container { margin-left: 15px; } .product-new-list ul li img { border: 0 none; float: left; } .product-new-list ul li h4 { font-size: 16px; font-weight: normal; margin: 0 0 5px; padding: 0 0 0 210px; line-height: 15px; color: #000; text-transform:uppercase; text-align: left; } .product-new-list ul li p { padding: 0 0 0 210px; text-align: justify; color: #555; margin: 0 0 10px; } .selected > p { font-weight: normal; } .visual { margin: 0 0 5px;} .product_title { background: url("../images/bg_dot.gif") repeat-x scroll 0 100% rgba(0, 0, 0, 0); overflow: hidden; padding: 0 0 10px; } .magenta h2, .magenta h3{color: #c00050;} .orange h2, .orange h3{color: #ea6602; } .green h2, .green h3{color: #91C000;} .purple h2, .purple h3{color: #630050;} .caribbean h2, .caribbean h3{color: #008182;} .cyan h2, .cyan h3{color: #009BDD;} .red h2, .red h3{color: #00C02C;} .amber h2, .amber h3{color: #EEAF08;} .orange h2, .orange h3{color: #EA6602;} .apple h2, .apple h3{color: #91C800;} .purple h2, .purple h3{color: #630050;} .product_show_leftcolumn, .product_show_rightcolumn { background: url("../images/bg_dot.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); float: left; margin: 0 0 10px; width: 43%; } .product_show_leftcolumn { margin-right: 3%;} .product_show_box { background: url("../images/bg_dot.gif") repeat-x scroll 0 100% rgba(0, 0, 0, 0); overflow: hidden; padding: 10px 0; } .product_show_box .special ul { font-weight: bold; margin-bottom: 0; margin-top:5px; } .product_show_box ul li { background: url("../images/bullet.png") no-repeat scroll 0 6px rgba(0, 0, 0, 0); padding: 0 0 5px 12px; color: #333; } .magenta p{color: #555; margin-bottom:0; line-height:20px; margin-top:10px;} #active1{color:#000 !important;} #active{color:#002595 !important; font-weight:600;} .bullet_float_l { float: left; margin: 4px 10px 5px 0; } #filters h5{float:right; margin-right:40px;} .product_show_value { float: right; margin: 0 0 8px; width: 140px; } .product_show_activesquare, .product_show_inactivesquare { float:left; width: 13px; height: 13px; margin-right: 1px; background: url(../images/bg_product_dots.png) no-repeat 0 0; } .product_show_inactivesquare { } .product_show_activesquare { background-position: 0 -98px; } .orange .product_show_activesquare{ background-position: 0 -126px; } .green .product_show_activesquare{ background-position: 0 -98px; } .caribbean .product_show_activesquare{ background-position: 0 -70px; } .cyan .product_show_activesquare{ background-position: 0 -28px; } .red .product_show_activesquare{ background-position: 0 -140px; } .amber .product_show_activesquare{ background-position: 0 -57px; } .f03mhm_color_cyan .bar, .f03mhm_color_cyan .inner-bar { background-position: 0 -30px; } .f03mhm_color_cyan h1, .f03mhm_color_cyan h2, .f03mhm_color_cyan h3, .teaser.f03mhm_color_cyan h4 { color: #009BDD; } .f03mhm_color_cyan .product_show_activesquare { background-position: 0 -28px; } /* --- */ .f03mhm_color_reflex .bar, .f03mhm_color_reflex .inner-bar { background-position: 0 -60px; } .f03mhm_color_reflex h1, .f03mhm_color_reflex h2, .f03mhm_color_reflex h3, .teaser.f03mhm_color_reflex h4 { color: #022691; } .f03mhm_color_reflex .product_show_activesquare { background-position: 0 -42px; } /* --- */ .f03mhm_color_amber .bar, .f03mhm_color_amber .inner-bar { background-position: 0 -90px; } .f03mhm_color_amber h1, .f03mhm_color_amber h2, .f03mhm_color_amber h3, .teaser.f03mhm_color_amber h4 { color: #EEAF08; } .f03mhm_color_amber .product_show_activesquare { background-position: 0 -56px; } /* --- */ .f03mhm_color_caribbean .bar, .f03mhm_color_caribbean .inner-bar { background-position: 0 -120px; } .f03mhm_color_caribbean h1, .f03mhm_color_caribbean h2, .f03mhm_color_caribbean h3, .teaser.f03mhm_color_caribbean h4 { color: #008182; } .f03mhm_color_caribbean .product_show_activesquare { background-position: 0 -70px; } /* --- */ .f03mhm_color_moss .bar, .f03mhm_color_moss .inner-bar { background-position: 0 -150px; } .f03mhm_color_moss h1, .f03mhm_color_moss h2, .f03mhm_color_moss h3, .teaser.f03mhm_color_moss h4 { color: #438700; } .f03mhm_color_moss .product_show_activesquare { background-position: 0 -84px; } /* --- */ .f03mhm_color_apple .bar, .f03mhm_color_apple .inner-bar { background-position: 0 -180px; } .f03mhm_color_apple h1, .f03mhm_color_apple h2, .f03mhm_color_apple h3, .teaser.f03mhm_color_apple h4 { color: #91C800; } .f03mhm_color_apple .product_show_activesquare { background-position: 0 -98px; } /* --- */ .f03mhm_color_purple .bar, .f03mhm_color_purple .inner-bar { background-position: 0 -210px; } .f03mhm_color_purple h1, .f03mhm_color_purple h2, .f03mhm_color_purple h3, .teaser.f03mhm_color_purple h4 { color: #630050; } .f03mhm_color_purple .product_show_activesquare { background-position: 0 -112px; } /* --- */ .f03mhm_color_orange .bar, .f03mhm_color_orange .inner-bar { background-position: 0 -240px; } .f03mhm_color_orange h1, .f03mhm_color_orange h2, .f03mhm_color_orange h3, .teaser.f03mhm_color_orange h4 { color: #EA6602; } .f03mhm_color_orange .product_show_activesquare { background-position: 0 -126px; } /* --- */ .f03mhm_color_red .bar, .f03mhm_color_red .inner-bar { background-position: 0 -270px; } .f03mhm_color_red h1, .f03mhm_color_red h2, .f03mhm_color_red h3, .teaser.f03mhm_color_red h4 { color: #00C02C; } .f03mhm_color_red .product_show_activesquare { background-position: 0 -140px; } /* --- */ .f03mhm_color_magenta .bar, .f03mhm_color_magenta .inner-bar { background-position: 0 -300px; } .f03mhm_color_magenta h1, .f03mhm_color_magenta h2, .f03mhm_color_magenta h3, .teaser.f03mhm_color_magenta h4 { color: #C00050; } .f03mhm_color_magenta .product_show_activesquare { background-position: 0 -154px; } /* --- */ .f03mhm_color_burgundy .bar, .f03mhm_color_burgundy .inner-bar { background-position: 0 -330px; } .f03mhm_color_burgundy h1, .f03mhm_color_burgundy h2, .f03mhm_color_burgundy h3, .teaser.f03mhm_color_burgundy h4 { color: #840141; } .f03mhm_color_burgundy .product_show_activesquare { background-position: 0 -168px; } .product_show_box p { text-align:justify; clear: both; font-weight:normal; color:#333; } .product_show_name { float: left; font-weight: bold; margin: 0 0 8px; /*width: 150px;*/ } .product_show_box table { border-collapse: collapse; border-spacing: 1px; width:100% } .product_show_box table tr.hl th { text-align: center; } .product_show_box table th { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); font-weight: normal; height: 20px; padding: 0; } .product_show_box table td { background: none repeat scroll 0 0 #f1f1f1; border: 1px solid #d4d4d4; height: 20px; padding: 0; text-align: center; vertical-align: middle; } .product_leftmenu a{padding-left:0 !important; font-size:15px !important;} .tp-banner { width: 100%;} #active{color:#0c4da2;} ul.subtab {list-style-type: none;margin: 0;overflow: hidden;padding: 0;} ul.subtab li {display: block;float: left;margin-right:20px;} ul.subtab li a.selected{color: #fff !important; background:#002595;} p.bodytext { line-height: 16px; margin: 0 0 10px; } ul.bodytext li { background: url("../images/bullet.html") no-repeat scroll 0 5px rgba(0, 0, 0, 0); padding: 0 0 0 10px; } .company_factsheet table { border-collapse: collapse; margin: 0 0 15px; width: 100%; } .company_factsheet table td { background: url("../images/bg_dot.gif") repeat-x scroll 0 100% rgba(0, 0, 0, 0); padding: 4px; vertical-align: top; } .ims ul li{background: url("../images/bullet.html") no-repeat scroll 0 5px rgba(0, 0, 0, 0); padding: 0 0 10px 10px; font-weight:600; } .button, input[type="button"], input[type="submit"] { border: 0 none; border-radius: 2px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: medium none; padding: 8px 16px; transition: all 0.2s ease-in-out 0s; width: auto; margin-top: 10px; margin-right: -20px; } .button.light { background: none repeat scroll 0 0 #e9eced; color: #666; } .button.light:hover{background-color:#002595;} .trigger a.region{font-weight:600; border: 1px solid #ddd; padding:5px 10px; color:#444;} .trigger.active a.region{color:#fff;} /*.simpal_inner_nav { background: #e9eced none repeat scroll 0 0; clear: left; float: left; padding:10px 0 20px 10px; width: 100%; } .simpal_inner_nav > li { border-bottom: 1px solid #acadad; padding-left: 15px; } .simpal_inner_nav a{ color: #666 !important; display: block; font-size: 14px; line-height: 25px; padding: 6px 0; } .simpal_inner_nav a.active{ color:#FFF; background:#0C4DA2; }*/ .hb_box { background: #e8eced none repeat scroll 0 0; border-top: 5px solid #0c4da2; padding:13px 13px 3px; width: 28% !important;; } .hb_box img{ /*border:1px solid #EEEEEE;*/ -webkit-transition: all .6s ease; filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: none; } .hb_box img:hover{ transition: all .9s ease; filter: grayscale(100%); -webkit-filter: grayscale(100%); /* For Webkit browsers */ filter: gray; /* For IE 6 - 9 */ -webkit-transition: all .6s ease; /* Transition for Webkit browsers */ } .row { margin-right: -15px; margin-left: -10px; } .hb_box > a { clear: left; color: #0C4DA2 !important; float: left; font-size: 15px; line-height: 21px; margin-top: 5px; width: 100%; } .hb_box > a:hover{ color:#0C4DA2 !important; } .simpal_inner_nav1 { clear: left; float: left; list-style: outside none disc; margin-left: 15px; margin-top: 5px; } .simpal_inner_nav1 > li{ float:left; clear:left; color: #8f8f8f; margin-bottom:5px; } .simpal_inner_nav1 > li > a{ font-size:13px; color: #8f8f8f; } .inner_main_bg{ background-color: #FFFFFF; clear: left; float: left; padding-bottom: 25px; padding-top: 25px; width: 100%; } .small_main_box{ background-color: #F7F7F5; border: 1px solid #ededed; margin-bottom: 30px !important; margin-left: 9px !important; margin-right: 9px !important; } .small_main_box1{ clear: left; float: left; cursor: pointer; background-color: #F7F7F5; margin-bottom: 10px; border: 1px solid #ededed; width: 100%; } .small_main_box_aerya1{ clear: left; float: left; padding: 2px 0px 2px 10px; width: 100%; } .small_main_box_aerya1 span{ clear: left; color: #5d5d5d; float: left; font-size: 13px; width: 100%; } .small_main_box1:hover{ box-shadow: 0 3px 0 0 #0C4DA2; text-decoration: none; transition: box-shadow 0.1s ease 0s; } .small_main_box:hover{ box-shadow: 0 5px 0 0 #0C4DA2; text-decoration: none; transition: box-shadow 0.1s ease 0s; } .small_main_box_aerya{ padding: 10px; width:100%; float:left; clear:left; } .small_main_box_aerya span{ clear: left; color: #5d5d5d; float: left; font-size: 15px; } .small_main_box_aerya a:visited{ color:inherit;} .inner_new_left_box{ clear: left; float: left; margin-top: 5px; width: 100%; } .port_box{ margin-bottom:20px; } /*#bottomMenu { display: none; position: fixed; left: 0; top:300px; width: 100%; height: 60px; border-top: 1px solid #000; background: #fff; z-index: 1; }*/ .footer_right_img{ float: right; clear: right; border: 3px solid #CBCBCB; } .footer_right_img:hover{ border: 3px solid #fff; } .back > li a{ background-color: #0c4da2 !important; color:#fff !important; } .back > li a:hover{ background-color: #fff !important; color:#0c4da2 !important; } .mTo0{ margin-top: 0; } .mBo0{ margin-bottom: 0; } .mLe0{ margin-left: 0 !important; } .mRi0{ margin-right: 0 !important; } .CuOneSlide{ margin-left: 0 !important;margin-right: 0 !important; } .CuOneSlide .main-headline{ margin:0 !important; } .CuOneSlide .main-headline h3{ margin-left:0 !important; } .CuOneSlide .showbiz{ margin: 0 !important; } .CuOneSlide ul li{ margin-right: 0 !important; margin-top: 12px !important; } .compact #logo a img{ height: 50px; } .mavigen{ float: right; } .technologyPage .featured-box:hover em{ color: #0c4da2 !important; } .technologyPage .featured-box em{ float: none !important; width: 100%; text-align: center; left: 4% !important; } .technologyPage img{ display: block; margin: 0 auto; } .productPage .featured-box:hover em{ color: #0c4da2 !important; } .productPage .featured-box em{ float: none !important; width: 100%; text-align: center; left: 4% !important; top: 15px; } .productPage img{ display: block; margin: 0 auto; } .Categories_left_nav{} .Categories_left_nav ul{} .Categories_left_nav ul li{} .Categories_left_nav a, .Categories_left_nav li li a{background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border-radius: 3px;color: #666;display: block;font-size: 14px;font-weight: 500;line-height: 20px;margin:0;padding: 5px 0;text-align: left;} .Categories_left_nav a:hover{color:#0c4da2;} .Categories_left_nav li >a.active{ background: transparent !important; font-weight: bold; padding-left:0 !important; padding-right: 0 !important;color:#0c4da2; } .Categories_left_nav a{padding-left:0 !important; padding-right: 0 !important;} .Categories_left_nav > li:nth-child(1)>a>i{color:#D80066;} .Categories_left_nav > li:nth-child(2)>a>i{color:#FFC500;} .Categories_left_nav > li:nth-child(3)>a>i{color:#0083FF;} .Categories_left_nav > li:nth-child(4)>a>i{color:#000;} .Categories_left_nav > li:nth-child(5)>a>i{color:#FF9100;} .Categories_left_nav > li:nth-child(6)>a>i{color:#64008B;} .Categories_left_nav > li:nth-child(7)>a>i{color:#FF0000;} .Categories_left_nav > li:nth-child(8)>a>i{color:#2B00D0;} .Categories_left_nav > li:nth-child(9)>a>i{color:#25B100;} .Categories_left_nav > li:nth-child(10)>a>i{color:#64008B;} .Categories_left_nav li li i{color:#6e6e6e;} .Categories_left_nav li i{ font-size: 12px; } .Categories_left_nav li .toggleCntr{ padding-left: 20px; display: none; } .subContent a{ color: #666 !important; } .listView li{ border-bottom: 1px dotted #ddd; margin:0 0 10px; padding: 0 0 10px; } .listView li:last-child{border-bottom: 0;} .subItemDetail h2,.subItemDetail h3,.subItemDetail h4,.subItemDetail h5,.subItemDetail h6{color:#00C02C;} .subItemDetail{text-align: left;} .subItemDetail .subTitle img{ float: left; margin: 0 5px 10px 0; border-radius: 100px; } .subItemDetail .downloadLink{ line-height: 30px; height: 30px; text-align: center; color: #fff !important; background: #00C02C; display: block; border-radius: 5px; font-weight: bold; } .referencesTitle{ border-bottom:2px solid #0C4DA2; text-align: left;display:none; }