/* ################################################################ File Name: style.css RT-THEME 18 Created By: Tolga Can http://themeforest.net/user/stmcan 1) GLOBAL STRUCTURE 2) TOP BAR 3) NAVIGATION STYLE 4) BLOG 5) SLIDER 6) FEATURED CONTENT BOXES 7) PAGE ELEMENTS 8) RECENT POSTS 9) SEARCH RESULTS 10) BUTTONS 11) FLICKR THUMBS 12) BANNERS 13) INFO BOXES 14) PRICING TABLES 15) OUR TEAM 16) TESTIMONIALS 17) LINKS 18) CAROUSEL 19) TOGGLES ( ACCORDIONS ) 20) TABS 21) IMAGE EFFECT 22) BLOG CAROUSEL & LATEST NEWS 23) DATE BOX 24) SOCIAL SHARE TOGGLES 25) PRODUCTS 26) PORTFOLIO ITEMS 27) FORMS 28) BLOCKQUOTES 29) PAGINATION 30) FILTER NAVIGATION 31) BOX SHADOWS 32) FOOTER WIDGETS 33) FOOTER 34) HEADINGS 32) FRAMES & WP CAPTIONS 33) PHOTO GALLERY 34) LAYER SLIDER ADD-ONS 35) INFO BAR 36) BREADCRUMB MENU 37) LISTS 38) TABLES 39) TEXT ELEMENTS 40) NATIVE WIDGETS 41) IMAGE ALIGNMENTS 42) COMMENTS 43) SOCIAL MEDIA ICONS 44) 404 PAGE 45) ARCHIVES 46) AUTHOR INFO 47) ADDITIONAL STYLES 48) RESPONSIVE VALUES - MEDIA QUERIES ################################################################# */ /* ---------------------------------------------------- 1) GLOBAL STRUCTURE ------------------------------------------------------- */ /* body */ body { font-family:"Microsoft YaHei",Arial,sans-serif; font-size:13px; color:#888; line-height:175%; background-color:#fff; background-repeat:repeat; font-weight: normal; min-width: 1080px; } /* boxed body */ body.boxed-body { -o-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06); -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06); -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06); box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06); margin: 30px auto; max-width: 1120px; } /* header */ header,#header{ margin:0 auto; position:relative; background: #fff; } /* header sections */ #header_contents{ display: table; margin: 0 auto; padding: 15px 0; position: relative; } #header_contents > section{ display: inline-block; vertical-align: middle; padding: 10px; } #header_contents > section.one { display: block; } #header_contents .logo_center{ text-align: center; } #header_contents .logo_right{ text-align: right; } /* logo */ #logo.logo_left{ float: left; } #logo.logo_right{ float: right; } #logo.logo_center{ margin: auto; display: table; padding-left: 25px; padding-right: 25px; } #logo img{ max-width: 100%; } #logo h1,#logo h1 a{ font-size:26px; line-height: 100%; color: #444; text-decoration:none; display: inline-block; position: relative; } #logo h1 a:hover{ opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity: 0.8; filter:alpha(opacity=80); } /* logo in sticky navbar */ #sticky_logo{ width: 100px; max-width: 100px; height: 32px; display: none; float: left; margin-right: 10px; padding: 3px; } #sticky_logo img { height: auto; max-height: 100%; max-width: 100%; width: auto; } .stuck #sticky_logo{ display: block; } /* slogan text */ #slogan_text{ color: #aaa; font-size: 14px; text-align: right; line-height: 100%; padding: 0; } #slogan_text.left_side{ text-align: left; } /* top_content */ .top_content{ width: 100%; min-height: 60px; margin: -40px 0 0 0; position: relative; overflow: hidden; z-index: 1; border-bottom: 1px solid #eee; border-top: 1px solid #eee; background: #FCFCFC; } .with_subs .top_content{ margin: -45px 0 0 0; } .half-boxed .top_content{ min-height: 140px; } .content_holder{ display: block; width: 100%; position: relative; z-index: 1; } .half-boxed .content_holder{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 30%, rgba(242,242,242,1) 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 30%,rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 30%,rgba(242,242,242,1) 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 30%,rgba(242,242,242,1) 100%); /* IE10+ */ background-image: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 30%,rgba(242,242,242,1) 100%); /* W3C */ background-attachment: fixed; } .mobile_device .content_holder{ background-attachment: scroll; } .content_second_background{ min-height: 295px; } .content_area{ background: #fff; width: 1080px; margin: -20px auto 0; padding: 0; position: relative; z-index: 1; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html .wide .content_area{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; width: auto; margin: 0 auto; } .half-boxed .content_area{ border: 1px solid rgba(0,0,0,0.06); } .content_block{ padding: 0 10px; width: 1060px; margin: auto; position: relative; z-index: 1; } .content_block_background{ padding: 20px 0; overflow: hidden; position: relative; } .content_block_background.template_builder{ padding: 0; } .half-boxed .content_block_background{ padding-left: 0 !important; padding-right: 0 !important; } body .full_width_row .content_block { width: 100%; padding: 0; } body .full_width_row .content_block > .content > .row{ margin: 0; } .content_block:first-child{ border-top: 0; } .row-style-2{ background: #F5F5F5; -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset, 0 -4px 0 rgba(0, 0, 0, 0.02) inset; -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset, 0 -4px 0 rgba(0, 0, 0, 0.02) inset; -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset, 0 -4px 0 rgba(0, 0, 0, 0.02) inset; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset, 0 -4px 0 rgba(0, 0, 0, 0.02) inset; } .row-style-3{ background-color: #FCFCFC; -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset; -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset; -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.02) inset; } /* ---------------------------------------------------- 2) TOP BAR ------------------------------------------------------- */ #top_bar{ background: #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, 0.04); padding: 5px; } .boxed-body #top_bar{ padding: 10px 5px; } .top_bar_container{ width: 1040px; margin: 0 auto; min-height: 18px; } /* top links */ .top_links{ line-height:180%; font-size:11px; display:block; color:#919191; margin: 0; padding: 0; float: left; font-weight: normal; } .top_links a{ text-decoration:none; color:#919191; } .top_links a:hover{ text-decoration:underline; } .top_links{ list-style:none; margin:0; } .top_links > li{ list-style-position:outside; line-height:100%; display:inline-block; padding:0 6px; border-color:#CDCDCD; border-width: 0 1px 0 0; border-style: solid; position: relative; } .top_links > li:last-child{ border-width:0; } .top_links{ margin-right: 10px; } /* top navigation items with icons */ .top_links [class^="icon-"]:before, .top_links [class*=" icon-"]:before{ margin-right: 5px; line-height: 1; } .languages{ cursor: default; } .flags { background: #fff; border: 1px solid #eee; padding: 0; position: absolute; width: 100px; z-index: 999999; left: 0; -o-box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.2); -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: none; height: 0; overflow: hidden; top: 20px; } .languages:hover .flags{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; height: auto; visibility: visible; overflow: visible; top: 13px; } .flags li { border-top: 1px solid #eee; display: block; margin: 0; padding: 5px; } .flags li img{ vertical-align: middle; display: inline-block; } .flags li a{ line-height: 140%; margin-left: 2px; vertical-align: middle; display: inline-block; } .flags li:first-child{ border-top: 0; } /* search bar on top bar */ #top_search_form, .search_text { background: transparent; border: medium none; border-radius: inherit; box-shadow: inherit; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; width: auto; outline: inherit; padding: inherit; position: inherit; font-family: arial, sans-serif; text-align: left; min-width: 37px; } #top_search_form{ display: inline; margin: 0; padding: 0; } #top_search_form .search_text:focus{ background: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: none; padding: 0 5px; width: 100px; border: 1px solid #f0f0f0; } #top_search_form .icon-search{ cursor: pointer; } #top_search_form .icon-basket{ padding-right: 20px; } #mobile_bar{ display: none; } /* ---------------------------------------------------- 3) NAVIGATION STYLE - 1 ------------------------------------------------------- */ #navigation li.multicolumn{ position: static; } .multicolumn-holder{ background: #fff; height: 0; left: 0; padding: 10px 0 0; position: absolute; visibility: hidden; opacity: 0; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; display: table; table-layout: fixed; margin-top: 10px; -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); border: 1px solid #eee; } #container #navigation .multicolumn-holder{ overflow: hidden; } #navigation li.multicolumn:hover > .multicolumn-holder { opacity: 1; visibility: visible; height: auto; overflow: visible; margin-top:0; z-index: 999999; } .multicolumn-holder > ul { display: table-cell; vertical-align: top; border-left: 1px solid #eee; padding: 20px; } .multicolumn-holder > ul:first-child { border-left: 0; } .multicolumn-holder > ul ul { margin: 0; padding: 10px 0 20px; } #navigation .multicolumn-holder ul li { clear: both; display: block; float: none; text-align: left; border: 0; } #navigation .multicolumn-holder .column-heading > span, #navigation .multicolumn-holder .column-heading > a{ display: block; font-size: 14px; padding: 0 0 5px; text-decoration: none; color: #777; border-bottom: 0; line-height: 100%; } #navigation .multicolumn-holder .column-heading > a:hover{ border-bottom: 0; line-height: 100%; } #navigation .multicolumn-holder a{ display: block; text-align: left; border-bottom: 1px solid #eee; text-decoration: none; color: #999; line-height: 200%; } #navigation .multicolumn-holder > ul li:last-child > a { border-bottom: 0 none; } #navigation .multicolumn-holder a:hover { display: block; text-align: left; text-decoration: none; color: #999; } #navigation .multicolumn-holder a:hover:after { content: ""; font-family: fontello; padding-right: ; position: absolute; margin-left: -10px; left: 0; top: 0; } .nav_shadow{ padding-bottom: 12px; position: relative; z-index: 999; width: 100%; margin: auto; } .header-design1.no-header-content .nav_shadow{ padding-bottom: 0; } .nav_border{ border-top:1px solid #eee; border-bottom:1px solid #eee; width: 100%; -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04); background: #fff; } /* mobile navigation */ #MobileMainNavigation{ display: none; } #navigation_bar{ margin: auto; display:table; } /* main navigation*/ #navigation{ padding:0; margin:0; position:relative; z-index:999; display: table; float: left; border-right: 1px solid #fff; line-height: 140%; } #navigation li { float:left; margin:0; position:relative; text-align: center; border-right: 1px solid #eee; } #navigation li:first-child { border-left: 1px solid #eee; } /* current page item and hover status */ #navigation_bar > ul > li > a:after { background: #F4BF1E; color: #F4BF1E; content: ""; height: 2px; left: 0; opacity: 1; position: absolute; top: -2px; -ms-transition: width 0.2s ease 0s; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; transition: width 0.2s ease 0s; width: 0; } /* active item top bar */ #navigation_bar > ul > li.current_page_item > a:after, #navigation_bar > ul > li.current-menu-ancestor > a:after, #navigation_bar > ul > li:hover > a:after { background-color: #F4BF1E; height: 2px; left: 0; position: absolute; top: -2px; width: 100%; } .no_search #navigation li:last-child{ border-right: 0; } /* sub menu items */ #navigation .sub-menu { position:absolute; margin:-2px 0 0 0; z-index:50; padding:0; height: 0; overflow: hidden; text-align: left; -o-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04); -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04); background: #fff; border: 1px solid #eee; width:170px; } #navigation .first ul { margin-left:5px; } #navigation .sub-menu li { float:none; display:block; margin:0; text-align: left; border: 0; border-bottom: 1px solid #eee; } #navigation li:last-child{ border-bottom: 0; } /* from third level menu items */ #navigation .sub-menu ul{ padding:0; left:170px; margin:0; top:-1px; height: auto; } #navigation .sub-menu { visibility: hidden; opacity: 0; -ms-transition: opacity 0s ease 0s, margin-top 0.3s ease 0s; -moz-transition: opacity 0s ease 0s, margin-top 0.3s ease 0s; -o-transition:opacity 0s ease 0s, margin-top 0.3s ease 0s; transition: opacity 0s ease 0s, margin-top 0.3s ease 0s; -webkit-transition: opacity 0s ease 0s, margin-top 0.3s ease 0s; margin-top: 10px; } #navigation > li:hover > ul { opacity: 1; visibility: visible; left: -1px; margin: 0; overflow: visible; height: auto; } #navigation .sub-menu ul { visibility: hidden; opacity: 0; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #navigation .sub-menu > li:hover > ul { opacity: 1; visibility: visible; height: auto; overflow: visible; } /* menu links styling */ /* first level menu links */ #navigation_bar > ul > li > a{ font-size:16px; color:#8a8a8a; text-decoration:none; display:block; padding: 15px 35px; position: relative; } #navigation_bar > ul > li > a:hover{ color: #8a8a8a; } #navigation_bar > ul > li:first-child > a{ border-left: 0; } /* sub menu links */ #navigation .sub-menu li.hasSubMenu > a:after{ content:"\f105"; font-family:fontello; position: absolute; right: 20px; font-size: 15px; top:9px; } #navigation .sub-menu li a{ text-decoration:none; display:block; position:relative; padding:10px; color:#999; font-family:Arial,sans-serif; } /* sub menu links hover status */ #navigation .sub-menu li a:hover, #navigation .sub-menu li:hover > a{ box-shadow: inset 2px 0 0 #f4bf1e; } #navigation_bar > ul > li.menu-item-has-children:hover > a { -moz-box-shadow: 6px 0 0 rgba(0, 0, 0, 0.03), -6px 0 0 rgba(0, 0, 0, 0.03); -o-box-shadow: 6px 0 0 rgba(0, 0, 0, 0.03), -6px 0 0 rgba(0, 0, 0, 0.03); -webkit-box-shadow: 6px 0 0 rgba(0, 0, 0, 0.03), -6px 0 0 rgba(0, 0, 0, 0.03); box-shadow: 6px 0 0 rgba(0, 0, 0, 0.03), -6px 0 0 rgba(0, 0, 0, 0.03); } /* description lines under menu items */ #navigation_bar > ul > li a span{ color: #aaa; display: block; font-size: 11px; line-height: 100%; margin: 0; padding: 0; text-shadow: none; display: none; } .with_subs#navigation_bar > ul > li > a span{ display: block; } /* description lines under sub menu items */ #navigation_bar ul ul > li > a span, #navigation_bar .multicolumn-holder ul > li:hover > a span{ color: #aaa; } #navigation_bar ul ul > li > a span{ display: block; font-size: 11px; line-height: 100%; padding: 0; text-shadow: none; display: none; } #navigation_bar .multicolumn-holder ul > li > a span{ margin-bottom: 5px; } #navigation_bar .multicolumn-holder ul > li.column-heading > a span { margin-top: 3px; } .with_subs#navigation_bar ul ul > li > a span{ display: block; } /* navigation items with icons */ #navigation_bar [class^="icon-"]:before, #navigation_bar [class*=" icon-"]:before{ margin-right: 5px; line-height: 1; } /* sticky navigation */ html .nav_shadow.stuck{ position: fixed; top: 0; opacity: 1; right: 0; left: 0; } .nav_shadow.sticky{ top: 0; } html .admin-bar .nav_shadow.stuck{ top: 32px; } html .stuck #navigation_bar > ul > li > a span { display: none; } html .nav_shadow.stuck, html .stuck .nav_border{ width: 100%; border-radius: 0; } html .stuck .nav_border { border-bottom: 1px solid #fff; border-radius: 0; } html .stuck #navigation_bar { border-radius: 0; border: 0; } html .stuck .search-bar, .stuck .with_subs .search-bar{ top: 3px; right: 0 !important; } html .stuck #navigation_bar > ul > li:first-child{ border-radius: 0; } html .stuck #navigation_bar > ul > li > a { font-size: 14px; padding: 10px 18px; } /* search bar on navigation bar */ .search-bar { background: #fff; border: 1px solid #eee; display: table; float: right; overflow: hidden; padding: 5px 11px 5px 5px; position: relative; top: 8px; width: 100px; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .with_subs .search-bar { top:16px; } .search-bar .icon-search-1{ color:#eee; color:rgba(0, 0, 0, 0.2); cursor: pointer; margin-left: 2px; font-size: 13px; line-height: 17px; } #navigation_bar .search-bar .icon-search-1:before { margin: 0; } .search-bar:hover .icon-search-1:before{ opacity: 0.7; } .search-bar:hover{ -moz-box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03); -webkit-box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03); } /* search form */ .search-bar form input{ width:86.94px; padding:0 0 0 10px; margin:2px 0 0; border:0; outline:0; float:left; display:inline; font-weight:normal; font-style:normal; font-size:11px; color:#929292; border-radius:0; line-height: 100%; } .search-bar form input:focus,.search-bar form input{ border:0; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .search-bar form input:focus{ background:#fff; } /* ---------------------------------------------------- 3) NAVIGATION WIDTHS - 2 ------------------------------------------------------- */ /* Navigation Widts */ #navigation_bar, .multicolumn-holder, .menu-style-two .stuck #navigation_bar, .menu-style-two .stuck .multicolumn-holder { width: 1040px; } .half-boxed #navigation_bar, .half-boxed .multicolumn-holder, .half-boxed.menu-style-two .stuck .multicolumn-holder, .menu-style-two .multicolumn-holder { width: 1080px; } .menu-style-two .nav_shadow, .menu-style-two .nav_border, .half-boxed.menu-style-two .stuck #navigation_bar { width: 1079px; } .menu-style-two #navigation_bar{ width: 100%; } html .boxed-body .nav_shadow.stuck{ max-width: 1120px; } .stuck .with_small_logo .multicolumn-holder{ left: -116px; } /* ---------------------------------------------------- 3) NAVIGATION STYLE - 3 ------------------------------------------------------- */ .menu-style-two .nav_shadow{ margin: auto; } .menu-style-two .nav_border{ border-right:1px solid #eee; } /* search bar on navigation bar */ .menu-style-two .search-bar { right: 10px; } /* ---------------------------------------------------- 3) HEADER DESIGN 2 & NAVIGATION STYLE 4 ------------------------------------------------------- */ /* resolutions bigger than 960px */ @media only screen and (min-width: 960px) { .header-design2 #header_contents{ width: 1040px; } .half-boxed.header-design2 #header_contents, .half-boxed.header-design2 .top_bar_container { width: 1080px; } .header-design2 .default_position #navigation_bar > ul > li > a{ padding: 0 15px; line-height: 78px; } .header-design2 .default_position #navigation_bar{ width: auto !important; } .header-design2 .sticky_nav_wrap { float: right; } .header-design2 .nav_shadow.default_position { float: right; width: auto; } .header-design2 .top_content{ margin-top: 0; } .header-design2 .default_position.nav_shadow{ padding-bottom: 0; } .header-design2 .default_position .nav_border{ -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; border-top-width: 0; border-bottom-width: 0; background-color: transparent; } .header-design2 #header_contents{ padding: 0; } #header_contents > section.logo{ padding: 10px 0; } .header-design2 #logo img { display: block; } .header-design2 #header_contents{ position: relative; } .header-design2 .default_position.nav_shadow,.header-design2 .default_position #navigation{ position: static; } .wide.header-design2 .content_area, .boxed.header-design2 .content_area, .half-boxed.header-design2.no-header-content .content_area{ margin-top: 0; } .header-design2 #navigation_bar > ul > li.current_page_item > a:after, .header-design2 #navigation_bar > ul > li.current-menu-ancestor > a:after, .header-design2 #navigation_bar > ul > li:hover > a:after{ top: 0; } .header-design2 .top_content .info_bar{ padding: 35px 0 30px; } /**/ .header-design2 .stuck #navigation { float: right; position: static; } .header-design2 .stuck .multicolumn-holder{ left: 0 !important; } .header-design2 .stuck #navigation { float: right; position: static; border-right: 0; } html .wide.header-design2 .stuck #navigation_bar, html .half-boxed.header-design2 .stuck #navigation_bar{ position: relative; } .header-design2.boxed-body .stuck .multicolumn-holder{ left: 0; width: 100%; } .no-js .header-design2 .default_position.nav_shadow, .no-js .header-design2 .default_position #navigation { float: right; width: auto; } .header-design2 #navigation_bar .multicolumn-holder ul > li > a span{ display: block; } } .header-design2.no-header-content #header{ border-bottom: 1px solid #eee; } /* ---------------------------------------------------- 4) BLOG ------------------------------------------------------- */ .blog_list{ display: block; margin: 0 auto 40px; } /* first section */ .blog_list section.first_section{ float: left; width: 60px; } /* article section */ .blog_list section.article_section{ margin-left: 70px; position: relative; overflow: hidden; } /* article section with post format icon */ .blog_list section.article_section.with_icon{ margin-left: 0px; } /* format icons */ .blog_list section.first_section [class^="icon-"] { color: #AAAAAA; display: block; font-size: 35px; margin: 17px 10px 0 0; text-align: center; } /* date box in blog */ .blog_list div.date_box { width: 50px; } .blog_list div.date_box .day { font-family: "arial"; font-size: 30px; line-height: 40px; } /* blog headline */ .blog-head-line{ margin-bottom:20px; display: block; } /* blog titles */ .blog_list h2,.blog_list h1 { font-size:26px; padding:0 0 15px 0; margin: 17px 0 0; line-height:100%; display:inline-block; } /* blog titles with icons */ .blog_list h1[class^="icon-"], .blog_list h2[class^="icon-"]{ margin: 0; line-height:130%; } /* post format icons */ .blog_list h1[class^="icon-"]:before, .blog_list h2[class^="icon-"]:before{ background: #F4BF1E; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; font-size: 70%; margin-right: 10px; vertical-align: top; min-width: 35px; padding: 0 2px; } /* blog featured images */ .blog_list .featured_image{ width:100%; } .blog_list .post_type img{ text-align:center; margin:0 auto; } .blog_list .post_type img{ position:relative; left:7px; top:10px; opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } /* regular posts */ .blog_list .post_type.post img{ } /* comment posts */ .blog_list .post_type.comment img{ left:8px; } /* image gallery posts */ .blog_list .post_type.gallery img{ left:5px; } .blog_list .frame.slider{ margin:0; } /* image video posts */ .blog_list .post_type.video img{ left:9px !important; } /* link post types */ .blog_list span.post_url{ color:#C6C6C6; position:relative; } .blog_list span.post_url a{ text-decoration:none; color:#C6C6C6; } .blog_list span.post_url a:hover{ color:#A7A7A7; } /* comment post types */ .blog_list .comment_quote p{ font-family: "Times New Roman", serif; font-style:italic; } .blog_list .comment_quote p span{ color:#929292; display:block; margin:10px 0 0 0; } /* post title holder */ .post-title-holder{ float: left; display: inline-block; width: 100%; } /* post data */ .blog_list .post_data, .blog_list .post_data a { font-size:12px; color:#afafaf; text-decoration:none; } .post_data a{ display: inline-block; } .blog_list .post_data a:hover{ color: #777; } .blog_list .post_data{ border-top: 1px solid #eee; padding: 4px 0; } /* post info */ .post_data [class^="icon-"]:before,.post_data [class^="icon-"]:after{ margin-right: 5px; } .post_data > span{ border-color: #eee; border-width: 0 1px 0 0; border-style: solid; margin-right: 10px; padding-right: 10px; display: inline-block; } .post_data span:last-child{ border-right: 0; } /* blog items within columns */ .small_box .blog_list h2,.small_box .blog_list h1 { /* blog titles */ font-size:130%; } .small_box .blog-head-line{ border-bottom: 1px solid #eee; } .small_box .blog_list h1[class^="icon-"]:before, .small_box .blog_list h2[class^="icon-"]:before{ min-width: 25px; padding: 0; } .small_box .blog_list .post_data span{ /* post data */ border-right: 0; margin-right: 0; } .small_box .blog_list .post_data, .small_box .blog_list .post_data a{ font-size: 11px; } /* blog paragraph left-right featured images */ .blog_list.featured_image_left p, .blog_list.featured_image_right p{ padding-top:6px; } /* blog image left-right */ .blog_image.alignright, .blog_image.alignleft, .blog_image.aligncenter, .blog_image .frame.alignright, .blog_image .frame.alignleft, .blog_image .frame.aligncenter{ margin-bottom:0; margin-top:0 !important; } /* Tags*/ .tags span:first-child{ margin-right: 10px; } .tags, .tags a{ color:#A2A2A2; font-style:italic; display:inline-block; text-decoration:none; } .tags a:hover{ color:#bbb; text-decoration:underline; } /* Author Info */ .author_info p{ margin:0; padding:10px 0 0 0; } .author_info strong a{ color:#A2A2A2; font-family: "Times New Roman", serif; font-style:italic; display:inline-block; font-size:13px; text-decoration:none; } .author_info .avatar{ background:#fff; } /* ---------------------------------------------------- 5) SLIDER ------------------------------------------------------- */ .flex-container{ margin: 0; } .flexslider{ overflow: hidden; position: relative; background: transparent; zoom: 1; background: #fff; } .flexslider .slides{ text-align: center; list-style: none outside none; } .flexslider .slides > li{ position: relative; display: none; } /* fixed images */ .flexslider.fixed .slides img{ width: auto; margin: auto; max-width: 100%; } /* flex slider for items in a carousel */ .flexslider.slider-carousel{ position: relative; } .flexslider.slider-carousel ul.slides li{ margin: 0 0 0 5px; cursor: pointer; } .flexslider.slider-carousel ul.slides li:first-child{ margin-left: 0; } .flexslider.slider-carousel ul.slides li:last-child{ margin-right: 0; } #container .flexslider.slider-carousel .flex-direction-nav{ margin-top: -10px; top: 50%; } /* captions */ .flex-caption { bottom: 30%; position: absolute; text-align: left; visibility: hidden; width: 100%; z-index: 900; } .top_content .flex-caption, .full_width_row .flex-caption{ bottom: 35%; left: 50%; right: 50%; margin: auto auto auto -520px; width: 1040px; } .flex-caption.center{ text-align: center; } .caption-holder{ max-width: 60%; display: inline-block; } .flex-caption.right .caption-holder{ float: right; } .flex-caption.center .caption-holder{ max-width: 80%; } /* caption */ .caption-one{ background: #fff; color: #fff; font-size: 22px; top: -1000px; padding: 10px; display: inline-block; float: left; } .caption-one a{ color: inherit; text-decoration: none; } .caption-one a:hover{ opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .flex-caption.center .caption-one{ float: none; text-align: center; } /* text */ .caption-text { background: rgba(255, 255, 255, 0.8); font-size: 16px; padding: 10px; text-align: left; bottom: -1000px; display: inline-block; float: left; clear: both; color: #666; } .flex-caption.center .caption-text{ float: none; display: block; text-align: center; } /* active slide */ .flex-active-slide .flex-caption{ visibility: visible; } .flex-active-slide .caption-text{ bottom: 0; position: relative; } .flex-active-slide .caption-one{ background-color: rgba(0, 0, 0, 0.4); top: 0; position: relative; } .flex-active-slide .caption-one a, .flex-active-slide .caption-one a:hover{ color: #fff; } .flex-active-slide .caption-one:hover{ background-color: rgba(0, 0, 0, 0.6); } /* animation */ .flex-active-slide .caption-one, .flex-active-slide .caption-text{ -ms-transition: all 1.3s; -webkit-transition: all 1.3s; -moz-transition: all 1.3s; -o-transition: all 1.3s; transition: all 1.3s; } /* Direction Navigation */ .flexslider .flex-direction-nav { bottom: 50%; margin: 0 0 25px 0; position: absolute; width: 100%; z-index: 99; list-style: none; } .flexslider .flex-direction-nav li{ margin: 0; padding:0; } .flexslider .flex-direction-nav a { background-color: rgba(0, 0, 0, 0.24); color: #fff !important; text-decoration: none; width: 30px; line-height: 50px; text-align: center; display: block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .flexslider .flex-direction-nav li .flex-prev{ position: absolute; left: -40px; } .flexslider .flex-direction-nav li .flex-next{ position: absolute; right: -40px; } .flexslider:hover .flex-direction-nav a{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .flexslider:hover .flex-direction-nav li .flex-prev{ left: 20px; } .flexslider:hover .flex-direction-nav li .flex-next{ right: 20px; } .top_content > .flex-container .flexslider .flex-direction-nav li a:hover, .full_width_row .content > .flex-container .flexslider .flex-direction-nav li a:hover { width: 35px; } .flexslider .flex-direction-nav li a:hover{ opacity: 0.5; } /* Direction Navigation for thumbnail slider */ .flexslider .carousel .flex-direction-nav { bottom: 50%; margin: 0 0 10px 0; position: absolute; width: 100% !important; left: 0; z-index: 1; list-style: none; } .flexslider .carousel .flex-direction-nav li{ margin: 0; padding:0; } .flexslider .carousel .flex-direction-nav a { background: #E0AF1D; color: #fff; text-decoration: none; width: 30px; height: 20px; line-height: 20px; text-align: center; display: block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .flexslider .carousel .flex-direction-nav li .flex-prev{ position: absolute; left: -40px; } .flexslider .carousel .flex-direction-nav li .flex-next{ position: absolute; right: -40px; } .flexslider:hover .carousel .flex-direction-nav a{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .flexslider:hover .carousel .flex-direction-nav li .flex-prev{ left: 0; } .flexslider:hover .carousel .flex-direction-nav li .flex-next{ right: 0; } .flexslider .carousel .flex-direction-nav li a:hover{ width: 35px; } .post_slider{ margin-bottom: 30px; } .post_slider .flexslider .flex-caption { bottom: -100px; -webkit-transition: all .8s; -moz-transition: all .8s; -o-transition: all .8s; transition: all .8s; left: 0; } .post_slider .caption-one{ bottom: 0; top: auto; } .post_slider .flexslider .flex-active-slide .flex-caption { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); bottom: 0; font-family: inherit; width: 100%; } .post_slider .flexslider .caption-holder { display: inline-block; max-width: 100%; padding: 5px 0; } .post_slider .flexslider .caption-one { background: none; font-size: 14px; padding: 0 10px; color: #fff; } .post_slider .flexslider .caption-text { background: none; color: #fff; font-size: 12px; padding: 0 10px; } /* ---------------------------------------------------- 6) FEATURED CONTENT BOXES ------------------------------------------------------- */ /* caption */ article.featured .caption{ position: relative; overflow: hidden; } /* caption image */ .caption img { display: block; max-width: 100%; } /* article title */ .featured_article_title{ bottom: 0; margin: 0; padding: 0; font-size: 20px; font-weight: normal; position: relative; } /* article title with default icon */ .caption.default_icon .featured_article_title{ padding:0; } /* article title embedded to featured image */ .caption.embedded .featured_article_title{ position: absolute; padding: 5px 10px 0 0; bottom: 0; background: #fff; } /* article title embedded to featured image with default icon */ .caption.embedded.default_icon .featured_article_title{ padding: 5px 10px 0 25px; } /* article title embedded to featured image with default icon */ .caption.embedded.default_icon.squared .featured_article_title{ padding: 10px 10px 0 0px; } /* centered article title */ article.featured .caption.title_centered{ text-align: center; } article.featured .caption.title_centered .featured_article_title{ position: relative; display: inline-block; } article.featured .caption.title_centered.embedded .featured_article_title { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); display: inline-block; left: 0; position: absolute; width: 100%; } /* featured article title with a icon on left */ .with_left_icon.featured_article_title{ display: inline-block; } /* icon with title */ .heading_icon{ color: #F4BF1E; margin-right: 5px } .featured > .heading_icon{ font-size: 18px; } .centered.embedded.heading_icon { display: inline-block; margin-right: 10px; } /* default icon with title */ .featured .default_icon .heading_icon{ background: #F4BF1E; color: #fff !important; display: inline-block; margin: 0 8px 4px 0; padding: 0 8px; line-height: 150%; vertical-align: middle; } /* default icon with embedded title */ .embedded.featured .default_icon .heading_icon{ margin-top: -6px; } /* default icon with embedded title and squared */ .embedded.default_icon.squared .heading_icon{ margin-top: 0; } /* icon sizes */ .large_icon{ background: #fff; border-radius: 100px; color: #F4BF1E; display: block; font-size: 26px; line-height: 26px; margin: auto; position: relative; text-align: center; display: inline-block; margin-right: 10px; } .large_icon.loaded{ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .medium_rounded_icon, .featured > .medium_rounded_icon{ border-radius: 100px; display: block; font-size: 20px; height: 20px; line-height: 20px; margin: auto; padding: 10px; position: relative; text-align: center; width: 20px; display: inline-block; margin-right: 10px; } .medium_rounded_icon{ background: #F4BF1E; color: #fff !important; } .big_icon, .featured > .big_icon{ display: block; font-size: 30px; height: 30px; line-height: 30px; margin: auto; position: relative; text-align: center; width: 30px; display: inline-block; } .big_icon{ color: #F4BF1E; } .big_rounded_icon, .featured > .big_rounded_icon{ border-radius: 100px; display: block; font-size: 30px; height: 30px; line-height: 30px; margin: auto; padding: 10px; position: relative; text-align: center; width: 30px; display: inline-block; margin-right: 10px; } .big_rounded_icon{ color: #F4BF1E; } .big_square_icon, .featured > .big_square_icon{ display: block; font-size: 30px; height: 30px; line-height: 30px; margin: auto; padding: 10px; position: relative; text-align: center; width: 30px; display: inline-block; margin-right: 10px; } .big_square_icon{ background: #F4BF1E; color: #fff !important; } .heading_icon.centered, .big_rounded_icon.centered,.medium_rounded_icon.centered{ display: block; margin: 0 auto; text-align: center; } .row .box:hover .animated.heading_icon{ -webkit-animation-name: pulse; animation-name: pulse; } .row .box:hover .embedded.animated.heading_icon{ -webkit-animation-name: flipInX; animation-name: flipInX; } /* disable animations for mobile devices */ .mobile_device .row .box:hover .embedded.animated.heading_icon, .mobile_device .row .box:hover .animated.heading_icon { -webkit-animation-name: none; animation-name: none; } .big_rounded_icon.loaded{ padding: 30px; border: 4px solid #F4BF1E; } .big_rounded_icon.pin{ margin-bottom: 42px; } .row .box:hover .animated.pin.heading_icon{ -webkit-animation-name: swing; animation-name: swing; } .medium_rounded_icon.loaded{ padding: 20px; } /* sidebar boxes */ .title_icon{ background: #F4BF1E; color: #fff; font-size: 11px; padding: 2px 4px 1px 5px; vertical-align: middle; margin: 0 8px 4px 0; display: inline-block; } .sidebar .featured_article_title{ font-size: 17px; } .sidebar .featured_article_title:before { background: none repeat scroll 0 0 #F4BF1E; color: #F4BF1E; content: ""; display: block; height: 40px; position: absolute; top: -10px; width: 2px; left: -21px; text-indent: 5px; } .content .widget .icon-right-open, #header_contents .widget .icon-right-open{ display: none; } .widget .title{ margin-bottom: 5px; } .sidebar .widget{ margin-bottom: 20px; border-bottom: 1px solid #F0F0F0; } .featured img.aligncenter{ margin: 0 auto; } .pin:after{ border-right: 1px solid #F4BF1E; color: #F4BF1E; content: '\e85d'; font-family: fontello; font-size: 13px; height: 25px; left: 50%; line-height: 66px; margin-left: -3px; margin-top: 35px; position: absolute; text-align: center; width: 5px; display: block; } .featured_image_holder.pin:after{ margin-top: 4px; } .featured_image_holder.pin{ max-width: 60%; margin: auto; position: relative; margin-bottom: 40px; } .rounded_image img, .rounded_image svg{ border-radius: 50%; } article.featured:hover .featured_image_holder.pin:after { content: ''; font-family: fontello; line-height: 78px; font-size: 13px; height: 32px; -webkit-transition: line-height .3s; -moz-transition: line-height .3s; -o-transition: line-height .3s; transition: line-height .3s; } /* b/w filter */ article.featured:hover .bw_filter svg, .bw_filter:hover svg, article.featured:hover .bw_filter_ie svg, .bw_filter_ie:hover svg, .chained_contents > ul li:hover .image.chanied_media_holder svg { display: none; } article.featured:hover .bw_filter img, .bw_filter:hover img, .chained_contents > ul li:hover .image.chanied_media_holder img { -webkit-filter: grayscale(0); -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .bw_filter img{ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } /* octangle images */ .featured_image_holder.octangle { display: block; margin: auto auto 10px; max-width: 75%; overflow: hidden; position: relative; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .featured_image_holder.octangle img, .featured_image_holder.octangle svg{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* horizontally chained contents */ .horizontal_chained_contents { display: table; list-style: none outside none; margin: 0 0 20px; padding: 0; table-layout: fixed; width: 100%; } .horizontal_chained_contents > li ul{ list-style-type: disc; } .horizontal_chained_contents > li { display: table-cell; margin: 0; padding: 0 10px; position: relative; text-align: center; z-index: 2; vertical-align: top; } .horizontal_chained_contents li:first-child .chanied_media_holder:before, .horizontal_chained_contents li:last-child .chanied_media_holder:after { content: none; } .horizontal_chained_contents .chanied_media_holder{ position: relative; } /* image width in media holder */ .horizontal_chained_contents .chanied_media_holder .featured_image_holder{ max-width: 70%; margin: auto auto 20px; position: relative; } /* titles in chained contents */ .horizontal_chained_contents .featured_article_title { margin: 0 0 10px; } /* lines between images */ .horizontal_chained_contents .chanied_media_holder:after { border-top: 2px dashed #ededed; content: ""; margin-top: -2px; position: absolute; right: -50%; top: 50%; width: 100%; z-index: -1; } /* vertically chained contents */ .chained_contents > ul{ list-style-type: none; margin: 0; padding: 0; clear: both; position: relative; z-index: 1; } /* line style */ .chained_contents > ul:after, .chained_contents > ul .chanied_media_holder:before { border-style: dashed; border-color: #ededed; border-width: 0; } /* vertical line */ .chained_contents > ul:after { border-left-width: 2px; content: ""; height: 100%; left: 38%; position: absolute; top: 0; z-index: -1; } /* media holder's line */ .chained_contents > ul .chanied_media_holder:before { border-top-width: 2px; content: ""; margin-top: -1px; position: absolute; top: 50%; width: 24%; right: 2%; } .chained_contents > ul .chanied_media_holder:after { border-top-width: 2px; content: ""; margin-top: -1px; position: absolute; top: 50%; width: 24%; right: 2%; } .chained_contents > li{ list-style: none; margin: 0 0 20px 0; padding: 0; zoom: 1; position: relative; } .chained_contents .chanied_media_holder{ width: 38%; float: left; position: relative; } .chained_contents .chanied_media_holder:first-child{ margin-top: 0; } .chained_contents .chanied_content_holder{ margin-left: 45%; padding-top: 20px; display: block; } .chained_contents .chanied_content_holder:after{ content: ""; display: table; clear: both; } .chained_contents .featured_image_holder{ max-width: 70%; width: 70%; margin: 0; } .chained_contents .featured_image_holder { display: inline-block; position: relative; } /* chained contents with right aligned media */ .right_aligned_media.horizontal_chained_contents .chanied_media_holder > ul:after { left: -16%; right: auto; } .right_aligned_media.chained_contents > ul:after { right: 38%; left: auto; } .right_aligned_media.chained_contents .chanied_media_holder:before { left: 2%; right: auto; } .right_aligned_media.chained_contents .chanied_media_holder{ float: right; } .right_aligned_media.chained_contents .chanied_content_holder{ margin-right: 45%; margin-left: auto; text-align: right; } .right_aligned_media.chained_contents .featured_image_holder { margin-left: 30%; } /* icon holder */ .chained_contents .icon_holder { background: #ccc; background: rgba(0,0,0,0.2); -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 80px; height: 80px; } /* icon */ .chained_contents .icon_holder span:before { display: inline-block; font-size: 30px; line-height: 80px; margin: 0; padding: 0; text-align: center; vertical-align: middle; width: 80px; color: #fff; } .icon_chain.chained_contents > ul:after { left: 120px; } .right_aligned_media.icon_chain.chained_contents > ul:after { right: 120px; left: auto; } .icon_chain.chained_contents .chanied_media_holder > ul:before { width: 30px; } .icon_chain.chained_contents .chanied_media_holder { width: 120px; margin-top: 20px; position:relative; } .icon_chain.chained_contents .chanied_content_holder { margin-left: 150px; } .right_aligned_media.chained_contents .icon_holder { display: inline-block; margin-left: 40px; position: relative; } .right_aligned_media.icon_chain.icon_chain.chained_contents .chanied_content_holder { margin-left: 0; margin-right: 150px; } /* chained icons mouse hover states */ .chained_contents li:hover .icon_holder{ background: transparent; } .chained_contents .icon_holder.rounded:before { opacity: 0; } .chained_contents li:hover .icon_holder.rounded:before { background: none repeat scroll 0 0 #F4BF1E; border-radius: 50%; content: ""; height: 90px; left: -5px; position: absolute; top: -5px; width: 90px; z-index: -1; -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; } /* disable animations for mobile devices */ .mobile_device .chained_contents li:hover .icon_holder.rounded:before { -webkit-animation-name: none; animation-name: none; } /* dots of chained items */ .chained_contents > ul .chanied_media_holder:after { background: none repeat scroll 0 0 #EDEDED; border-radius: 50%; content: ""; height: 16px; margin-top: -8px; position: absolute; right: -8px; left: auto; top: 50%; width: 16px; } .right_aligned_media.chained_contents > ul .chanied_media_holder:after { left: -9px; right: auto; } /* mouse over effect for dots of chained image items */ .chained_contents > ul > li:hover .image.chanied_media_holder:after{ height: 22px; margin-top: -12px; right: -12px; width: 22px; background: none repeat scroll 0 0 #F4BF1E; } .right_aligned_media.chained_contents > ul > li:hover .image.chanied_media_holder:after { left: -12px; right: auto; } /* ---------------------------------------------------- 7) PAGE ELEMENTS ------------------------------------------------------- */ /* hr style one */ hr.style-one { padding: 0; border: none; border-top: medium double #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; overflow: visible; } hr.style-one:after { background: #fff; content: "o"; display: inline-block; font-size: 20px; line-height: 20px; padding: 0 40px; position: relative; top: -15px; } /* hr style two */ hr.style-two { padding: 0; border: none; border-top: 1px solid #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; overflow: visible; } hr.style-two:after { background: #fff; content: "●"; display: inline-block; font-size: 30px; line-height: 30px; padding: 0 40px; position: relative; top: -17px; } /* hr style three */ hr.style-three { padding: 0; border: none; border-top: 1px solid #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; overflow: visible; } hr.style-three:after { background: #fff; content: "\e753"; font-family: "fontello"; display: inline-block; font-size: 16px; line-height: 30px; padding: 0 40px; position: relative; top: -15px; } /* hr style four */ hr.style-four { padding: 0; border: none; border-top: medium double #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; overflow: visible; } /* hr style five */ hr.style-five { padding: 0; border: none; border-top: 1px solid #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; overflow: visible; } /* hr style six */ hr.style-six { padding: 0; border: none; border-top: 1px solid #F0F0F0; color: #F0F0F0; text-align: center; margin: 30px 0; line-height: 100%; position: relative; overflow: visible; } hr.style-six:before{ background: #F4BF1E; content: ""; height: 1px; left: 25%; position: absolute; margin-top: -1px; width: 50%; } hr.style-six:after { background: #fff; color: #F4BF1E; content: '\f107'; display: inline-block; font-family: "fontello"; font-size: 30px; line-height: 35px; padding: 0 40px; position: relative; top: -15px; } hr.style-seven { padding: 0; border: none; text-align: center; margin: 0; top:-1px; position: relative; line-height: 100%; overflow: visible; } hr.style-seven:after { color: #fff; content: "&"; display: inline-block; font-family: "fontello"; font-size: 70px; padding: 0 40px; position: relative; } .footer_widgets > .row > hr.style-seven { position: relative; z-index: 1; } .half-boxed .footer_widgets > .row > hr.style-seven:after, .row-style-2 hr.style-seven:after, .content_footer hr.style-seven:after, .row-style-3 hr.style-seven:after { text-shadow: 0 6px 0 rgba(0, 0, 0, 0.02); } .row-style-3 hr.style-seven { top:0; } hr.style-eight { padding: 0; border: none; border-top: 1px solid #F4BF1E; text-align: left; margin: 30px 0; overflow: visible; } hr.style-eight:after { color: #F4BF1E; content: "&"; display: inline-block; font-family: "fontello"; font-size: 30px; left: 26px; line-height: 35px; position: relative; top: -14px; } /* go to top link */ span.top{ font-size:10px; float:right; position:relative; right:0; top:-10px; padding-left:10px; text-decoration:none; letter-spacing:1px; cursor:pointer; background:#fff; color:#B0B0B0; } span.top:hover{ text-decoration:none; color:#000; } /* line */ .line{ border-bottom:1px solid #F0F0F0; margin:0 0 30px 0; clear:both; } /* Tooltip */ .ttip{ padding:0 !important; } /* Title line */ .title_line{ width: 100%; display: block; clear: both; position: relative; overflow: hidden; } /* Title line */ .title_line h3{ display: block; padding-right: 20px; position: static; } .title_line .featured_article_title:after { background: none repeat scroll 0 0 #F0F0F0; content: ""; height: 1px; margin-left: 20px; margin-top: -1px; position: absolute; top: 50%; width: 100%; } /* gradient */ .gradient{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-8 */ } /* ---------------------------------------------------- 8) RECENT POSTS ------------------------------------------------------- */ .recent_posts ul,.footer_widgets .recent_posts ul,.widget .recent_posts ul{ margin:0; padding:0; list-style:none; } .recent_posts ul li{ margin:0 0 10px 0; padding:0; clear:both; } .recent_posts ul li:last-child{ margin:0; } .recent_posts ul li.date{ margin:0; } /* date */ .recent_posts .widget-meta{ font-style:italic; font-size:11px; color:#aaa; line-height:22px; } /* title */ .widget .recent_posts .title{ display:block; font-weight:bold; margin:0; line-height: 150%; } /* title links */ .recent_posts .title a{ text-decoration:none; color: #777; } .recent_posts .title a:hover{ text-decoration:underline; } /* thumbnails */ .recent-posts-thumb{ float:left; display:inline-block; position:relative; } img.recent-posts-thumb { float:left; padding:4px; margin:0 10px 10px 0 ; display:inline-block; background:#fff; border:1px solid #F0F0F0; -moz-box-box-shadow:2px 2px 0 RGBa(0,0,0, 0.035); -webkit-box-shadow:2px 2px 0 RGBa(0,0,0, 0.035); box-shadow:2px 2px 0 RGBa(0,0,0, 0.035); } .recent_posts .comment_number{ margin-left: 3px; } .recent_posts .comment_number span{ margin-right: 3px; } .recent_posts .comment_number a{ color: inherit; font-style: oblique; text-decoration: none; } .recent_posts .comment_number a:hover{ text-decoration: underline; } /* ---------------------------------------------------- 9) SEARCH RESULTS ------------------------------------------------------- */ .search-post-title{ margin-bottom: 10px; } .search-post-title a{ font-size: 18px; line-height: 140%; } .search_result{ margin-bottom: 20px; } .search_highlight { background: #EAEAEA; padding: 1px 3px; } /* ---------------------------------------------------- 10) BUTTONS ------------------------------------------------------- */ .button_ { background: none repeat scroll 0 0 #F4BF1E; border-radius: 6px; -o-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset; box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset; display: inline-block; border: 0 none; border-radius: 6px; overflow: hidden; padding: 0 0 3px 0; text-decoration: none; color: #fff; display: inline-block; font-family: arial; font-size: 16px; font-weight: bold; line-height: 100%; overflow: hidden; padding: 21px 40px 23px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .button_:hover { -o-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.14) inset; -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.14) inset; -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.14) inset; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.14) inset; } .button_[class^="icon-"]:before, .button_[class*=" icon-"]:before { padding-right: 0.5em; } .button_.white { background: none repeat scroll 0 0 #fff; border: 1px solid #eee; color: #888; text-shadow: none; } .button_.light { background: none repeat scroll 0 0 #F7F7F7; border: 1px solid #eee; color: #888; text-shadow: none; } .button_.blue { background: none repeat scroll 0 0 #81a0ab; color: #fff; text-shadow: none; } .button_.t_white { background: transparent; border: 2px solid #fff; } .button_.small{ font-size: 13px; padding: 10px 20px 13px; } .button_.medium { font-size: 15px; padding: 13px 25px 16px; } .button_.t_white.big { padding: 21px 40px; } .button_.t_white.medium { padding: 13px 25px; } .button_.t_white.small { padding: 10px 20px; } .button_.default, .button_.t_white { color: #fff !important; } /* button opposite color text */ .button_ i{ color: rgba(0, 0, 0, 0.5); font-style: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } /* left aligned */ .button_.alignleft{ margin-right: 20px; } .button_.alignright{ margin-left: 20px; } .button_.aligncenter{ display: table; } /* post navigation buttons */ .post-navigations{ text-align: center; } .post-navigations .button_{ color: #c0c0c0; } .post-navigations .button_{ width: 90px; } .sidebar .post-navigations .button_{ width: 83px; } .sidebar .single .button_{ width: 218px; } .post-navigations .button_:first-child{ margin-right: 10px; } .post-navigations .button_ span:before{ margin-right: 0; } /* ---------------------------------------------------- 11) FLICKR THUMBS ------------------------------------------------------- */ .flickr_thumbs { margin: 10px 0 10px 0 !important; padding: 0; overflow: hidden; border:0 !important; background:none !important; } .flickr_thumbs li { list-style: none; float: left; margin: 0 2% 2% 0 !important; padding: 0 !important; border:0 !important; background:none !important; width:31%; } .flickr_thumbs li a {} .flickr_thumbs li img { display: block; } .flickr_thumbs li a img { border: none; width:100%; } .flickr_thumbs li .frame { margin:0 !important; padding:5px !important; } .flickr_thumbs li.hide{ display:none; } .flickr_thumbs li:hover img{ opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } /* ---------------------------------------------------- 12) BANNERS ------------------------------------------------------- */ .banner { display: block; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; margin: 0; } .banner.withborder { border: 2px solid #F3F3F3; padding: 20px; } .banner.transparent { background: transparent; } /* banner with gradient */ .banner.gradient{ padding: 20px; } /* banner icon */ .banner p[class^="icon-"]:before, .banner p[class*=" icon-"]:before{ font-size: 40px; margin: -6px 20px 0 10px; vertical-align: middle; } /* banner icon with button */ .banner .withbutton p[class^="icon-"]:before, .banner .withbutton p[class*=" icon-"]:before{ margin: -3px 0 0 -55px; position: absolute; } /* big banner icon */ .banner p.big_icon_top[class^="icon-"]:before, .banner p.big_icon_top[class*=" icon-"]:before{ display: block; font-size: 60px; margin: auto auto 20px; position: relative; } /* banner text holder */ .banner .featured_text{ font-size:26px; line-height:34px; text-align:left; color:#747474; margin:0; } /* banner text holder with a button */ .banner .featured_text.withbutton{ display:inline; text-align:left; } /* banner text holder center aligned */ .banner .featured_text.aligncenter{ width: 100%; display: block; text-align: center; } /* banner text */ .banner p{ padding:0; } /* banner small text */ .banner p small{ font-family:Arial,sans-serif; display: block; font-size: 13px; line-height: 130%; } /* banner text with a big button */ .banner .big_button p{ padding:20px 0; } /* banner text with a medium button */ .banner .medium_button p{ padding:10px 0; } /* banner text with a small button */ .banner .small_button p{ padding:4px 0; } /* banner text with a button and icon */ .banner .withbutton p[class^="icon-"], .banner .withbutton p[class*=" icon-"]{ padding-left:60px; } /* banner text center aligned with a button*/ .banner .featured_text.aligncenter.withbutton p{ padding:10px 0; margin-bottom: 10px; } /* banner text with a big icon */ .banner p.big_icon_top[class^="icon-"], .banner p.big_icon_top[class*=" icon-"]{ padding: 10px 0; } /* ---------------------------------------------------- 13) INFO BOXES ------------------------------------------------------- */ .info_box { padding: 10px; background: #FDFDFD; display: block; position: relative; border: 1px solid #F3F3F3; color:#747474; } /* banner with gradient */ .info_box.gradient{ box-shadow: 0 0 0 1px #fff inset; } /* banner icon */ .info_box p[class^="icon-"]:before, .info_box p[class*=" icon-"]:before{ font-size: 25px; margin: -12px 20px 0 -35px; position: absolute; top: 50%; vertical-align: middle; } /* banner text */ .info_box p{ font-size: 13px; line-height: 21px; font-family: Arial,sans-serif; margin:0; padding: 0 10px 0 40px; } .info_box.attention { background: #FED8D8; border: 1px solid #DCB6B6; } .info_box.attention, .info_box.attention a{ color: #8F6969; } .info_box.ok { background: #EFFFEF; border: 1px solid #E0EDE0; } .info_box.ok, .info_box.ok a{ color: #889588; } .info_box.announcement { background: #FDFDEF; border: 1px solid #EBEBDE; } .info_box.announcement, .info_box.announcement a{ color: #949487; } .info_box .icon-cancel { color: rgba(0, 0, 0, 0.3); position: absolute; right: 10px; cursor: pointer; } .info_box .icon-cancel:hover{ color: rgba(0, 0, 0, 0.6); } /* ---------------------------------------------------- 14) PRICING TABLES ------------------------------------------------------- */ .pricing_table{ display: table; width: 100%; table-layout: fixed; } .pricing_table .table_wrap{ display: table-cell; } .pricing_table .table_wrap ul{ background: #fff; border: 1px solid #eee; list-style: none; margin: 0 1px; position: relative; overflow: hidden; padding: 5px 5px 0; } .pricing_table .table_wrap ul > li{ padding: 5px 0; display: block; text-align: center; border-top: 1px solid #eee; } .pricing_table .table_wrap ul > li:first-child, .pricing_table .table_wrap ul > li.price, .pricing_table .table_wrap ul > li.start_position, .pricing_table .table_wrap ul > li.features_start_position{ border-top: none !important; } .pricing_table .table_wrap ul > li.price{ border-bottom: 1px solid #eee; } .pricing_table .table_wrap ul > li.price.empty{ padding: 0; display: none; } .pricing_table .table_wrap ul > li.caption.empty { margin-bottom: -6px; padding: 0; display: none; } .caption small { display: block; font-size: 13px; min-height: 20px; padding: 5px 0 10px; font-family: helvetica,arial; } .pricing_table .table_wrap ul > li.caption{ padding: 20px 2px 0 2px; font-size: 24px; background-color: #ECECEC; border-bottom: 0; text-shadow: 1px 1px 1px #FFFFFF; } .pricing_table .table_wrap ul > li .button_{ vertical-align: top; margin: 20px auto; } /* price tag */ .pricing_table .shadow:after, .pricing_table .shadow:before{ bottom: 10px; } .pricing_table li div.title{ display: block; } .pricing_table .table_wrap ul > li.price{ padding:0 0 20px 0; position: relative; background-color: #fff !important; } .pricing_table li.price div:before{ background-color: #ECECEC; position: absolute; height: 50%; width: 100%; display: block; content: ""; } .pricing_table li.price div{ display: block; } .pricing_table li.price span{ border-radius: 100px; display: inline-block; font-size: 20px; height: 50px; line-height: 50px; min-width: 50px; padding: 20px; position: relative; overflow: hidden; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); background-color: #fff; *zoom: 1; } /* highlight row */ .pricing_table .table_wrap.highlight ul{ -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.2); box-shadow: 0 0 13px rgba(0, 0, 0, 0.2); border: 0; margin: 0; z-index: 1; } .pricing_table .table_wrap.highlight ul > li{ position: relative; } .pricing_table .table_wrap.highlight ul > li.caption{ padding-top: 30px; font-size: 24px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); background-color: #F4BF1E; } .pricing_table .table_wrap.highlight ul > li.price div:before{ background: #F4BF1E; } /* compare table - cell */ .pricing_table.compare .table_wrap{ vertical-align: top; } /* compare table - highlight row */ .pricing_table.compare .table_wrap.highlight ul > li.caption{ padding: 20px 2px 0; } .pricing_table.compare .table_wrap.features ul{ border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -22px; padding: 0 20px 0 0; } .pricing_table.compare .table_wrap ul li:nth-child(2n){ background-color: #fbfbfb; } .pricing_table [class^="icon-"]:before, .pricing_table [class*=" icon-"]:before{ font-size: 16px; line-height: 100%; } .pricing_table .icon-ok:before{ color: #7ea95e; } .pricing_table .icon-cancel:before{ color: #8d1c31; } /* ---------------------------------------------------- 15) OUR TEAM ------------------------------------------------------- */ section.team{ display: block; width: 100%; clear: both; text-align: center; } /* person image holder*/ section.team .person_image{ border: 8px solid #fff; width: 50%; clear: both; display: block; position: relative; margin: 0 auto 20px; -moz-border-radius: 50%; -web-kit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); overflow: hidden; background: #fff; } section.team .box:hover .person_image{ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } section.team .person_image img{ display: block; } /* person name */ section.team h4.person_name{ padding: 0 10px; } /* profile */ section.team .profile{ padding: 0 10px; } /* style two */ section.team.style-two .person_image{ -moz-transform: none; -o-transform: none; -webkit-transform: none; transform: none; -moz-border-radius: 0; -web-kit-border-radius: 0; border-radius: 0; } section.team.style-two .half-background{ display: block; position: relative; z-index: 1; overflow: hidden; padding: 20px 0; } section.team.style-two .half-background:before{ content: ""; position: absolute; z-index: -1; background: #fafafa; width: 100%; height: 100%; left: 0; top: 100px; } section.team.style-two hr:after{ background: #fafafa; } /* style three */ section.team.style-three .person_image{ -moz-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } section.team.style-three .half-background{ display: block; position: relative; z-index: 1; overflow: hidden; padding: 20px 0; } section.team.style-three .half-background:before{ content: ""; position: absolute; z-index: -1; background: #fafafa; width: 100%; height: 100%; left: 0; top: 0px; -o-border-radius: 50px; -moz-border-radius: 50px; -web-kit-border-radius: 50px; border-radius: 50px; } section.team.style-three hr:after{ background: #fafafa; } /* single page */ .