/*********************************************** CSS3 sticky footer version: 1.0 date: 10.07.2013 author: Capelle @ Codecanyon website: http://codecanyon.net/user/Capelle ************************************************/ /*********************** 1. Quick reset ************************/ /* Note: If you experience issues with reset below, please adjust the selectors and values according to your template/website. When adjusting the reset is adviced to check all the elements on your page, including the footer, as some elements might not show as expected if reset is changed or not configured properly */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} /*********************** 2. Main styles ************************/ /***** 2.1. Basic styles for sticky footer and page content *****/ html { position: relative; height: 100%; /* Needed for sticky footer */ } body { margin: 0 0 100px; /* Adjust the bottom margin to match the height of the sticky footer */ height: 100%; background: #fff; /* Change this value to your color or image - this is just color for demo */ } #page { min-height: 100%; /* This is a main wrapper for all html elements on the page except footer. Put your navigation, content, sidebars and other elements within this section in order to sticky footer to work properly. If you have your selector, please adjust it according to #page with same values */ } footer { position: fixed; left: 0; bottom: 0; height: auto; width: 100%; background: #fff; z-index: 999; font-family: 'Source Sans Pro', sans-serif; /* Don't forget to include the links to Google Fonts and FontAwesome in the of your html document :) */ font-size: 12px; font-weight: 400; border-top: solid 1px #ccc; } #footer-inner { margin: 0 auto; display: block; width: 1000px; /* Adjust the width of the footer to match your layout. If you change this value be sure to adjust the grid's */ padding: 8px 4 18px 0; } .icon { font-family: 'FontAwesome'; } #copyright { display: block; float: right; color: #999; margin-right: 34px; } #copyright > p { display: inline; font-size: 11px; } #copyright a { color: #999; } #copyright a:hover { color: #222; } .social-bar { display: inline-block; margin: -3px 0 0 20px; } .social-bar a { background: #bbb; color: #fff !important; display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; text-decoration: none; margin: 0 0 0 2px; position: relative; font-size: 12px; vertical-align: middle; } .social-bar a:hover { background: #222; color: #fff; } /***** 2.2. Clearfixes, paddings amd margins *****/ .clrfx-1 { display: block; height: 10px; content: ""; } .clrfx-2 { display: inline; margin: 10px 6px 0 0; } .clrfx-3 { display: inline-block; padding: 0 4px; } .clrfx-4 { display: block; height: 20px; content: ""; } .no-margin-padding { /* Resets previous margins to 0 if we need a block column as wrapper */ margin: 0 !important; padding: 0 !important; } .no-padding { /* Resets paddings back to 0 if we're using a column inside block */ padding: 0 !important; } .narrow-margin { /* This is a additional value for icons showcase, don't have to use it if you don't need it */ margin-bottom: 14px !important; padding-left: 0 !important; } /***** 2.3. Tooltips *****/ a.tooltip span { width: auto; min-width: 120px; white-space: normal; height: auto; pointer-events: none; line-height: normal; padding: 12px 10px; left: -48px; right: 0; bottom: 60px; top: auto; margin: 0 auto; font-size: 10px; color: #fff; background: #222; text-indent: 0; position: absolute; text-align: center; text-transform: uppercase; opacity: 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8); font-family: 'Source Sans Pro', sans-serif; z-index: -1; visibility: hidden; } a.tooltip:hover span { opacity: 1; bottom: 40px; z-index: 999; visibility: visible; } a.tooltip span:before, a.tooltip span:after { content: ''; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 8px solid rgba(34, 34, 34, 0.2); } a.tooltip span:after { bottom: -8px; margin-left: -10px; border-top: 8px solid #222; } /***** 2.4. Hover effects *****/ .fade-in, #footer-inner :hover, #footer-inner :focus, a.tooltip span, #tabs .tab-wrapper > div, #tabs input:hover + label, #inner-block-1 .overlay-icon, #tabs .overlay-text, #expanded-menu label { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /***** 2.5. Links and buttons *****/ ul.dropdown a.menu, ul.dropdown a.menu:visited { color: inherit; text-decoration: none; padding: 14px 40px 14px 26px; display: block; font-size: 14px; text-transform: uppercase; white-space: nowrap; width: auto; } ul.dropdown a.menu.right { padding: 14px 26px 14px 40px; } ul.dropdown a.menu span.basic { width: 20px; } ul.dropdown a.menu:hover { color: #fff; background: #222; } ul.dropdown a.menu span { display: inline-block; width: 34px; } a.button-1 { color: #fff; background: #e4e4e4; text-decoration: none; display: inline-block; font-size: 12px; position: relative; padding: 0; width: 24px; height: 24px; text-align: center; line-height: 24px; } a.button-1:hover { background: #999; } a.button-2 { color: #222; display: inline-block; padding: 14px 0 0 0; text-decoration: none; float: right; font-size: 11px; } a.button-2:hover { color: #999; text-decoration: none; } a.button-2 span { padding-left: 6px; font-size: 11px; vertical-align: middle; } a.link-1 { color: #222; text-decoration: none; } a.link-1:hover { color: #999; } a.link-1 span { font-size: 14px; width: 20px; display: inline-block; } /***** 2.6. Speach bubbles and quotes *****/ .bubble-1, .bubble-2, .bubble-3 { background: #e4e4e4; font-style: italic; font-style: 10px; display: block; line-height: 16px; padding: 14px; position: relative; float: left; } .bubble-1 { color: #222; margin-top: 20px; } .bubble-2, .bubble-3 { /* Adjust this values to your needings, they are for demo purpouses */ max-width: 185px; margin: 20px 0 0 0; } .bubble-2 { background: #e4e4e4; color: #222; margin-right: 26px; } .bubble-3 { background: #999; color: #fff; } .bubble-1:before, .bubble-2:before, .bubble-3:before { content: "\00a0"; display: block; height: 16px; width: 16px; position: absolute; bottom: auto; left: 26px; top: -7px; transform: rotate(-58deg) skew(0deg, 28deg); -moz-transform: rotate(-58deg) skew(0deg, 28deg); -webkit-transform: rotate(-58deg) skew(0deg, 28deg); -o-transform: rotate(-58deg) skew(0deg, 28deg); -ms-transform: rotate(-58deg) skew(0deg, 28deg); } .bubble-1:before, .bubble-2:before { background: #e4e4e4; } .bubble-3:before { background: #999; } .cite-1, .cite-2 { padding-left: 10px; margin: 10px 0; display: inline-block; font-style: italic; font-style: 11px; line-height: 16px; color: #bbb; } .cite-1 { border-left: solid 6px #e4e4e4; } .cite-2 { border-left: solid 6px #999; } b.dark { color: #222; font-weight: 400; } b.color { color: #999; font-weight: 400; } /*********************** 3. Dropdown menu ************************/ /***** 3.1. Main styles *****/ ul#footer-menu { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; } .main-item { margin: 0 16px; text-transform: uppercase; font-size: 12px; display: inline-block; cursor: pointer; color: #999; font-weight: 400; vertical-align: middle; position: relative; } .main-item span { font-size: 12px; padding: 0 0 0 2px; vertical-align: middle; display: inline-block; margin-top: -2px; } .main-item.first { margin-left: 0; } .main-item a.home { font-size: 22px; margin-top: -5px; color: #999; text-decoration: none; display: inline-block; } .main-item a.home:hover { color: #222; } ul.dropdown, ul.dropdown li, ul.dropdown ul { margin: 0; padding: 0; list-style: none outside none; } ul.dropdown { position: relative; z-index: 9999; float: left; } ul.dropdown li { float: left; min-height: 1px; vertical-align: middle; position: relative; color: #222; } ul.dropdown li:hover > .main-item { color: #222; background: #fff !important; } ul.dropdown li:hover { color: #222; background: #fff; position: relative; z-index: 99; } ul.dropdown ul { left: -20px; position: absolute; top: 100%; visibility: hidden; margin: 0; width: auto; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); } ul.dropdown li:hover > ul { visibility: visible; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); opacity:1; zoom: 1; z-index: 999; } ul.dropdown ul li { float: none; font-weight: normal; } ul.dropdown ul li:hover { /* Styles for lvl 2 lists */ background: #222; color: #fff; } ul.dropdown ul ul { top: auto; bottom: 0; left: 100%; } ul.dropdown ul ul.right { /* Right submenu aligment */ left: auto; right: 100%; } ul.dropdown-up ul { bottom: 100%; top: auto; left: auto; } ul.dropdown-up ul.right { /* Right orientated menu, like used in sitemap menu */ right: 0; } ul.dropdown-up ul.center { /* Center orientated menu, like used in content preview menu with a full width columns of 820px */ right: auto; left: -400px; /* This is a half width value of 820px column. Adjust this value according to the column you're using */ } ul.dropdown .has-menu { position: relative; } ul.dropdown-up ul .has-menu:before { font-family: 'FontAwesome'; content:"\f0da"; color: #ccc; font-size: 14px; position: absolute; top: 15px; right: 15px; } ul.dropdown-up ul .has-menu.right:before { /* Arrow of submenu and it's orientation of the right aligned menu */ content:"\f055"; } .dropdown-box { box-shadow: 0 0 6px #bbb; background: #fff; position: relative; padding: 10px 0; width: auto; z-index: 10; } .dropdown-box:hover { z-index: 9999; } .dropdown-box.lvl-1 { margin-bottom: 42px; } .dropdown-box.lvl-2, .dropdown-box.lvl-3 { margin: 0 0 -20px 20px; } .dropdown-box.lvl-2.right { /* Submenu aligment for right orientated menu */ margin: 0 20px -20px 0; } .dropdown-box.lvl-1:after, .dropdown-box.lvl-2:after, .dropdown-box.lvl-3:after, .dropdown-box.lvl-3:after { background: #fff; box-shadow: -2px 2px 2px 0 rgba( 187, 187, 187, .4 ); content: "\00a0"; display: block; height: 16px; width: 16px; position: absolute; top: auto; } .dropdown-box.lvl-1:after { left: 26px; bottom: -7px; transform: rotate(-58deg) skew(0deg, 28deg); -moz-transform: rotate(-58deg) skew(0deg, 28deg); -webkit-transform: rotate(-58deg) skew(0deg, 28deg); -o-transform: rotate(-58deg) skew(0deg, 28deg); -ms-transform: rotate(-58deg) skew(0deg, 28deg); } .dropdown-box.lvl-1.right:after { /* Bottom arrow aligment when using right orientated menu */ left: auto; right: 26px; } .dropdown-box.lvl-1.center:after { /* Bottom arrow aligment when using center orientated menu */ left: 430px; /* This value centers the bottom arrow according to the width of the column we're using (usualy half of the parent's width + XXpx for left/right adjustment) */ right: auto; } .dropdown-box.lvl-2:after, .dropdown-box.lvl-3:after { transform: rotate(32deg) skew(0deg, 28deg); -moz-transform: rotate(32deg) skew(0deg, 28deg); -webkit-transform: rotate(32deg) skew(0deg, 28deg); -o-transform: rotate(32deg) skew(0deg, 28deg); -ms-transform: rotate(32deg) skew(0deg, 28deg); left: -7px; bottom: 30px; } .dropdown-box.lvl-2.right:after { left: auto; right: -7px; transform: rotate(212deg) skew(0deg, 28deg); -moz-transform: rotate(212deg) skew(0deg, 28deg); -webkit-transform: rotate(212deg) skew(0deg, 28deg); -o-transform: rotate(212deg) skew(0deg, 28deg); -ms-transform: rotate(212deg) skew(0deg, 28deg); } /***** 3.2. Menu dropdown bottom title *****/ ul.dropdown ul li.menu-title { font-size:20px; padding: 24px 0 15px 26px; border-top: solid 1px #ccc; color: #bbb; text-transform: uppercase; font-weight: 300; white-space: nowrap; } ul.dropdown ul li.menu-title.right { /* Title aligment when using right orientated menu */ text-align: right; padding: 24px 26px 15px 0; } ul.dropdown ul li.menu-title.center { /* Title aligment when using center orientated menu */ text-align: center; padding: 24px 26px 15px 0; } ul.dropdown ul li.menu-title span { font-size: 22px; font-family: 'FontAwesome'; padding: 0 14px 0 0; font-weight: normal; } ul.dropdown ul li.menu-title:hover, ul.dropdown ul li.content-full-width:hover, ul.dropdown ul li.no-hover:hover { background: none; color: #bbb; } /***** 3.3. Inner blocks of menu *****/ #inner-block-1 { position: relative; width: 426px; display: inline-block; white-space: normal; padding: 14px 26px 10px 26px; } #inner-block-1 .content { display: inline-block; width: 190px; } #inner-block-1 .title { font-size: 14px; color: #222; font-weight: 400; text-transform: uppercase; } #inner-block-1 p { line-height: 16px; font-size: 11px; color: #bbb; padding-top: 6px; } #inner-block-1 a.overlay-img { width: auto; height: 100%; float: left; margin-right: 20px; display: inline-block; position: relative; } #inner-block-1 .overlay-icon { position: absolute; width: 160px; height: 93px; background: #222; opacity: 0; display: block; top: 0; left: 0; padding-top: 36px; color: #fff; text-align: center; font-size: 24px; } #inner-block-1 .overlay-icon:hover { opacity: 0.8; } /***** 3.4. Tabs *****/ #tabs label:first-of-type { z-index: 99; } /* Selectors for narrow tabs, which are presented in extended menu */ #tabs input#tab-1.tab-1-selector:checked ~ .tab-wrapper .tab-1, #tabs input#tab-2.tab-2-selector:checked ~ .tab-wrapper .tab-2, #tabs input#tab-3.tab-3-selector:checked ~ .tab-wrapper .tab-3, #tabs input#tab-4.tab-4-selector:checked ~ .tab-wrapper .tab-4, /* Selectors for tabs, which are presented in tabs content menu */ #tabs input#tab-1-wide.tab-1-wide-selector:checked ~ .tab-wrapper .tab-1-wide, #tabs input#tab-2-wide.tab-2-wide-selector:checked ~ .tab-wrapper .tab-2-wide, #tabs input#tab-3-wide.tab-3-wide-selector:checked ~ .tab-wrapper .tab-3-wide, #tabs input#tab-4-wide.tab-4-wide-selector:checked ~ .tab-wrapper .tab-4-wide { z-index: 999; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; position: absolute; } #tabs input:hover + label { background: #222; color: #fff; cursor: pointer; z-index: 999; } #tabs input { position: absolute; z-index: 9999; width: 20px; height: 20px; left: auto; top: auto; bottom: -50px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } #tabs label { background: #ccc; font-size: 12px; line-height: 24px; width: 24px; height: 24px; position: absolute; padding: 0; display: block; margin: 0 0 0 6px; color: #fff; text-align: center; font-weight: 400; top: auto; bottom: -50px; } #tabs label.tab-label-1, #tabs input.first { right: 116px; } #tabs label.tab-label-2, #tabs input.second { right: 86px; } #tabs label.tab-label-3, #tabs input.third { right: 56px; } #tabs label.tab-label-4, #tabs input.fourth { right: 26px; } #tabs input:checked + label { background: #222; color: #fff; z-index: 9; } #tabs .tab-wrapper > div { position: absolute; top: 0; left: 0; padding: 16px 26px 14px 26px; width: 100%; height: auto; z-index: 1; opacity: 0; min-width: 448px; /* Hack for Chrome first load, adjust this accordingly if changing the width of the tabs in below on .tab-wrapper */ } #tabs .tab-wrapper { position: relative; width: 520px; height: 260px; z-index: 5; } #tabs .tab-wrapper.wide { /* Used for menu with wide content in tabs */ width: auto; height: 320px; } #tabs img { float: left; margin-right: 20px; display: inline-block; } #tabs img.wide { width: 397px; height: 300px; } #tabs .content { display: inline-block; width: 220px; float: right; } #tabs .title { font-size: 16px; color: #222; display:block; text-transform: uppercase; } #tabs p { line-height: 16px; color: #bbb; } #tabs .small-info { font-style: italic; font-size: 10px; display: inline-block; padding-top: 18px; color: #bbb; } #tabs .category { display: inline-block; font-style: italic; font-size: 10px; padding: 6px 0 8px 0; color: #bbb; } #tabs a.overlay-img { width: 397px; height: 300px; float: left; margin-right: 26px; display: inline-block; position: relative; } #tabs .overlay-text { position: absolute; width: 397px; height: 300px; background: #000; opacity: 0; display: block; top: 0; left: 0; padding-top: 130px; color: #fff; text-align: center; font-size: 12px; } #tabs .overlay-text:hover { opacity: 0.8; } #tabs .overlay-title { text-transform: uppercase; font-weight: 300; font-size: 18px; display: block; } #tabs .overlay-text span { font-size: 34px; display: block; margin-bottom: 10px; } /***** 3.5. Columns/Grid for menu *****/ #columns { display: inline-block; width: auto; padding: 26px 26px 10px 26px; } #columns .column-115, #columns .column-256, #columns .column-397, #columns .column-538, #columns .column-679, #columns .column-820 { margin: 0 26px 16px 0; padding: 8px 12px; font-size: 12px; color: #222; float: left; } #columns .column-115 { width: 115px; } #columns .column-256 { width: 256px; } #columns .column-397 { width: 397px; } #columns .column-538 { width: 538px; } #columns .column-679 { width: 679px; } #columns .column-820 { width: 820px; } #columns .last { margin-right: 0; } #columns .bg { background: #e4e4e4; /* Background selector for demonstration purpouses for the columns menu - you can delete this if you don't need it */ } #columns .row { display: block; padding: 2px 0 2px 8px; margin: 4px 0; } #columns .row span { font-size: 10px; padding: 0 6px 0 0; vertical-align: middle; } #columns .row a { font-size: 10px; color: #888; } #columns .row a:hover { padding-left: 3px; color: #999; } #columns .row.even { background: #e4e4e4; } #columns .title { display: block; font-size: 16px; color: #222; text-transform: uppercase; padding-bottom: 4px; margin-bottom: 6px; font-weight: 300; } #columns .sub-title { display: block; font-size: 12px; color: #222; font-weight: 400; padding-bottom: 4px; margin: 14px 0 6px 0; border-bottom: solid 1px #ccc; } #table { border-top: solid 1px #ccc; float: left; } #table .table-row.column-title { display: block; float: left; border-bottom: solid 4px #ccc; } #table .table-row { background: #fff; float: left; width: 100%; } #table .table-row.even { background: #e4e4e4; } #table .cell { display: inline-block; padding: 11px 0 11px 16px; font-size: 12px; vertical-align: middle; color: #888; width: 80px; float: left; position: relative; } #table .cell span { font-size: 9px; padding: 0 0 0 8px; } #table .first span { font-size: 12px; vertical-align: middle; position: absolute; left: 12px; top: 11px; } #table .cell.first { background: #999; color: #fff; width: 128px; text-align: center; } #table .cell.first.even { background: #bbb; } #table .cell.column-title { color: #222; } #table .cell.column-title.first { color: #222; background: #fff; text-transform: uppercase; } #table .cell.dark { background: #000; color: #fff; opacity: 0.7; } /***** 3.6. Demo video styles *****/ iframe.video-medium { padding: 18px 26px 22px 26px; } /*********************** 4. Contact form ************************/ #form-1 { display: block; width: auto; height: auto; padding: 20px 26px; } p.title { text-transform: uppercase; font-size: 16px; color: #222; padding-bottom: 4px; } p.form-intro { color: #222; padding-bottom: 26px; } p.form-intro:hover { color: #222; } #form-1 .field { display: inline-block; width: 360px; position: relative; margin: 0 0 16px 0; } #form-1 .field p { display: inline-block; width: 30px; height: 36px; text-align: center; background: #999; color: #fff; position: absolute; left: 0; top: 0; vertical-align: middle; font-size: 14px; padding-top: 12px; } #form-1 input.form-1, #form-1 select, #form-1 textarea { font-size: 12px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } #form-1 input.form-1 { width: 100%; padding: 0 10px 0 42px; height: 36px; border: solid 1px #ccc; outline: none; } .field select { border: solid 1px #ccc; position: relative; margin: 0; width: 100%; color: #4f4e4c; font-family: Arial, Helvetica, sans-serif; padding: 9px 10px 8px 40px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; background-color: rgba(0,0,0,0); height: 36px; } .disabled { display: none; } #form-1 textarea { width: 100%; padding: 8px 24px 8px 8px; border: solid 1px #ccc; resize: none; max-height: 110px; height: 110px; overflow-y: hidden; } #form-1 textarea:focus { height: 160px; max-height: 160px; } #form-1 textarea:focus, #form-1 textarea:hover, #form-1 input.form-1:focus, #form-1 input.form-1:hover, #form-1 select:focus, #form-1 select:hover { border: solid 1px #222; } input.send { display: inline-block; background: #222; color: #fff; width: auto; padding: 6px 28px; border: none; outline: none; font-size: 13px; margin: 0 30px 0 0; clear: none; } input.send:hover { border: none; outline: none; background: #777; cursor: pointer; } input.send:focus { border: none; outline: none; } input[type="checkbox"].check { display:none; } input[type="checkbox"].check + label { color: #bbb; font-size: 11px; display: inline-block; line-height: 18px; vertical-align: middle; font-weight: 300; } input[type="checkbox"].check + label span { font-size: 18px; } input[type="checkbox"].check + label span:before { display: inline-block; cursor: pointer; float: left; font-family: 'FontAwesome', sans-serif; content:"\f096"; width: 24px; padding-top: 2px; } input[type="checkbox"].check:checked + label span:before { font-family: 'FontAwesome', sans-serif; content: "\f046"; color: #4f4e4c; } /***** 4.2. Placeholders, validations and dropdown arrow *****/ ::-webkit-input-placeholder { color: #4F4E4C; } :focus::-webkit-input-placeholder { color: transparent; } :-moz-placeholder { color: #4F4E4C; opacity: 1; } :focus:-moz-placeholder { color: transparent; } ::-moz-placeholder { color: #4F4E4C; opacity: 1; } :focus::-moz-placeholder { color: transparent; } :-ms-input-placeholder { color: #4F4E4C; } :focus:-ms-input-placeholder { color: transparent; } .ie9-placeholder { color: #4F4E4C !important; } .ie9-placeholder:focus { color: transparent; } .field input:required, .field textarea:required, .field select:required { background: #fff url(img/required/light/required.png) no-repeat 336px 14px; outline: none; box-shadow:none; } .field input:hover:invalid, .field textarea:hover:invalid, .field select:hover:invalid { background: #fff url(img/required/light/hovered.png) no-repeat 336px 14px; box-shadow: none; outline: none; } .field input:required:valid, .field textarea:required:valid, .field select:required:valid { background: #fff url(img/required/light/valid.png) no-repeat 335px 13px; outline: none; box-shadow:none; } .field input:focus:invalid, .field textarea:focus:invalid, .field select:focus:invalid { background: #fff url(img/required/light/invalid.png) no-repeat 335px 13px; box-shadow: none; z-index: 10; outline: none; } #arrow-select, #arrow-select-svg { background: #fff url('img/arrow/arrow-down-white.png') no-repeat right; width: 44px; height: 34px; position: absolute; right: 1px; top: 1px; pointer-events: none; vertical-align: middle; outline: none; border: none; z-index: 3; } /**** Show arrow in webkit browsers and IE9/10 (pointer events don't work in those IE, so we have to hide it with this hack) ****/ @media screen and (-webkit-min-device-pixel-ratio:0) { #arrow-select-svg { display: none; } } /**** Hack for Opera ****/ x:-o-prefocus, #arrow-select { display: none; } /************************ 5. Expanded content *************************/ #expanded-menu { width: 100%; text-align: left; background: #fff; border-top: 4px solid #BBBBBB; } #expanded-menu .wrapper { width: 1000px; margin: 0 auto; position: relative; } #expanded-menu label { position: absolute; z-index: 999; display: inline-block; right: 1px; top: -37px; color: #bbb; cursor: pointer; font-size: 14px; font-family: 'FontAwesome'; } #expanded-menu label:after{ content:"\f055" } #expanded-menu label:hover{ color: #222; } #expanded-menu input:checked + label:after { content:"\f056"; } #expanded-menu input:checked + label:hover { color: #222; } #expanded-menu input { display: none; } #expanded-menu article { margin: 0; overflow: hidden; height: 0px; position: relative; z-index: 99; -webkit-transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; -ms-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } #expanded-menu input:checked ~ article { -webkit-transition: height 0.4s ease-in-out; -moz-transition: height 0.4s ease-in-out; -o-transition: height 0.4s ease-in-out; -ms-transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out; } #expanded-menu input:checked ~ article.expanded-content-440 { /* The height of expanded content menu. The height must have a value in order for transition to work */ height: 231px; } article .title { display: block; font-size: 20px; color: #222; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 20px; font-weight: 300; border-bottom: solid 1px #ccc; } article p { line-height: 18px; color: #bbb; } /***** 5.1. Columns/Grid for expanded content menu *****/ #columns-expanded { display: inline-block; width: auto; padding: 30px 0; } #columns-expanded .column-145, #columns-expanded .column-316, #columns-expanded .column-487, #columns-expanded .column-658, #columns-expanded .column-829, #columns-expanded .column-1000 { margin: 0 26px 20px 0; padding: 8px 12px; font-size: 12px; color: #222; float: left; } #columns-expanded .column-145 { width: 145px; } #columns-expanded .column-316 { width: 316px; } #columns-expanded .column-487 { width: 487px; } #columns-expanded .column-658 { width: 658px; } #columns-expanded .column-829 { width: 829px; } #columns-expanded .column-1000 { width: 1000px; } #columns-expanded .last { margin-right: 0; } #columns-expanded .bg { background: #e4e4e4; /* Background selector for demonstration purpouses for the expanded columns menu - you can delete this if you don't need it */ } /****************************************************************************************************** Thank you for purchase. If you need support, send us a message via email provided in documentation *******************************************************************************************************/