/*-------------------------------------------------- Space Cowboy html/css template - custom.js URL:gozawi.com SUPPORT: wtxinc@gmail.com CODE: SP001S CSS overwiev: streched style style 1. CSS rest 2. Font face 3. Basic styles 4. Theme color scheme 5. Columns 6. Menu 7. Search 8. Slider text & slider image 9. Services 10. Recent works 11. Recent posts 12. About us text 13 .About us team 14. Clients 15. Portfolio 16. Single work 17. Blog posts 18. Blog single 19. Comments 20. Reply 21. Contact 22. Pagination 23. Sidebar 24. 404 page 25. Custom page 26. General text elements styling 27. Bottom 28. Twitter & Flickr widget 29. Footer 30. Panel 31. Responsive 32. Hacks ---------------------------------------------------*/ /**************************************************************************** 1. CSS RESET ****************************************************************************/ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /**************************************************************************** 2. FONT FACE ****************************************************************************/ @font-face { font-family: 'EntypoRegular'; src: url('../fonts/entypo-webfont.eot'); src: url('../fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/entypo-webfont.woff') format('woff'), url('../fonts/entypo-webfont.ttf') format('truetype'), url('../fonts/entypo-webfont.svg#EntypoRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansLight'; src: url('../fonts/OpenSans-Light-webfont.eot'); src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansLightItalic'; src: url('../fonts/OpenSans-LightItalic-webfont.eot'); src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansRegular'; src: url('../fonts/OpenSans-Regular-webfont.eot'); src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansItalic'; src: url('../fonts/OpenSans-Italic-webfont.eot'); src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Italic-webfont.woff') format('woff'), url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansSemibold'; src: url('../fonts/OpenSans-Semibold-webfont.eot'); src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'), url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansSemiboldItalic'; src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot'); src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansBold'; src: url('../fonts/OpenSans-Bold-webfont.eot'); src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansBoldItalic'; src: url('../fonts/OpenSans-BoldItalic-webfont.eot'); src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansExtrabold'; src: url('../fonts/OpenSans-ExtraBold-webfont.eot'); src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansExtraboldItalic'; src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot'); src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg'); font-weight: normal; font-style: normal; } /**************************************************************************** 3. BASIC STYLES ****************************************************************************/ html{ height:100%; } body{ background-color:#fff; color:#2e3133; line-height: 24px; overflow-x:hidden; width:100%; height:100%; font-family: "OpenSansRegular", Arial, Helvetica, sans-serif; font-size: 12px; } h1,h2,h3,h4,h5,h6{ } h1{ font-size:30px; } h2{ font-size:24px; } h3{ font-size:18px; } h4{ font-size:16px; } h5{ font-size:14px; } h6{ font-size:11px; } ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } a {text-decoration: none; } a:focus { outline: 0px none; } a:hover, a:active { outline: 0px none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .clear {clear:both; } .clearspan { display:block; } /*Margin for every section in template*/ section { margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; } .hidden { display:none; visibility:hidden; } .vimeo { border:none; } .soundhound { border:none; width:100%; height:166px; } .container { max-width:1000px; padding: 0 20px; margin:0 auto; } .top { width:100%; padding-top: 20px; padding-right: 0; padding-bottom: 20px; padding-left: 0; } .top div { float:right; margin: 8px 0 0 0 } .top div span { font:11px "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 0 0 20px } .mobile { display:none; } /*General "arrow" button,skill style*/ .arrow { float:right; margin:25px 0 0 0; } .arrow .arrow_box { float:left; background-color:#2e3133; color:#fff; padding: 1px 7px; } .arrow .arrow_tringle { float:left; width: 0px; height: 0px; border-style: solid; border-width: 13px 0 13px 13px; border-color: transparent transparent transparent #2e3133; } .arrow a:hover .arrow_box { background-color:#676666; } .arrow a:hover .arrow_tringle { border-color: transparent transparent transparent #676666; } /*Arrow used in blog section*/ .arrow_reverse { float:right; margin:25px 5px 0 0; } .arrow_reverse .arrow_box { float:left; color:#fff; padding: 1px 7px; } .arrow_reverse .arrow_tringle { float:left; width: 0px; height: 0px; border-style: solid; border-width: 13px 13px 13px 0; } /*General header style*/ .header header { color:#939393; } .header span { font:11px "OpenSansLight", Arial, Helvetica,sans-serif; } .header .dots { width:100%; background: url(../images/header_dots.png); height:14px; margin-top: 5px; margin-right: 0; margin-bottom: 5px; margin-left: 0; } .header .line { width:100%; background-color:#2e3133; height:1px; } .header_no_txt { margin: 50px 0 0 0; } /**************************************************************************** 4. THEME COLOR SCHEME Change color in section below for set different color in all template. ".color_scheme_hover_link:hover" is used in portfolio hover. Colors used in demo: default:#d1181e, blue:#1666b1, light_blue:#08afc6, green:#569d11, light green:#7bc830, yellow:#e0bd06, light yellow:#f0d43f, pink:##fd3a9f, light pink:##f473b6, purple:#651996, light purple:#683e83, grey:#909192, light grey;##c6c6c6. ****************************************************************************/ .color_scheme { color:#d1181e; } .color_scheme_background { background-color:#d1181e; } .color_scheme_hover:hover { background-color:#d1181e; } .color_scheme_hover_link:hover { color:#8f0c06; } .color_scheme_tringle { border-color: transparent transparent transparent #d1181e; } .color_scheme_tringle_reverse { border-color: transparent #d1181e transparent transparent; } .color_scheme2 { color:#d1181e; } .color_scheme_background2 { background-color:#d1181e; } .color_scheme_hover2:hover { background-color:#d1181e; } .color_scheme_hover_link2:hover { color:#8f0c06; } .color_scheme_tringle2 { border-color: transparent transparent transparent #d1181e; } .color_scheme_tringle_reverse2 { border-color: transparent #d1181e transparent transparent; } /**************************************************************************** 5. COLUMNS General body style ****************************************************************************/ .one_half{ width:48%; } .one_third{ width:48%; } .two_third{ width:65.33%; } .one_fourth{ width:22%; } .one_fourth2{ width:31%; } .one_three{ width:31%; } .three_fourth{ width:74%; } .one_fifth{ width:16.8%; } .two_fifth{ width:37.6%; } .three_fifth{ width:58.4%; } .four_fifth{ width:67.2%; } .one_sixth{ width:13.33%; } .five_sixth{ width:82.67%; } .one_half,.one_third, .one_three, .two_third,.three_fourth,.one_fourth,.one_fourth2,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:2%; float:left; padding-bottom: 10px; } .one_gracias{ position:relative; margin-right:2%; float:left; padding-bottom: 10px; width: 800px; } .last{ margin-right:0 !important; clear:right; margin-bottom: 10px; } /**************************************************************************** 6. MENU Main menu at the top ****************************************************************************/ nav{ width:100%; background-color:#005182; height:52px; float:left; max-width:1000px; margin-top: 0; margin-right: 20px; margin-bottom: 20px; margin-left: 0; } nav li { display:inline; float:left; padding:0; cursor:pointer; } nav li a { font:13px "OpenSansRegular", Arial, Helvetica,sans-serif; color:#fff; width:100%; height:100%; padding: 18px 20px 19px 20px; display:block; } nav li:hover { background-color:#1188b5; } nav li .new { background-color:#1666b1; } nav li span { color:#a4a4a4; margin: 0 0 0 10px; } nav ul li ul { display: none; position:absolute; min-width:200px; z-index:2; } nav ul li ul li { color:#fff; background-color:#1188b5; clear: both; display:table !important; width:100%;} nav ul li ul li:hover { background-color:#d1181e; } nav ul li ul li ul { margin: -52px 0 0 200px; } nav /**************************************************************************** 7. SEARCH Search box next to menu ****************************************************************************/ .search { float:right; margin: 0 20px 0 0; position:relative; } .search input[type=text] { border: none; outline:none; padding: 8px 24px 8px 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font:10px "OpenSansRegular", Arial, Helvetica,sans-serif; color:#636364; background-color:#202020; margin:11px 0 0 0; -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); } .search input[type=submit] { font: 20px "EntypoRegular", Arial, Helvetica,sans-serif; background:none; border: none; outline:none; color:#636364; cursor:pointer; position:absolute; right:1px; top:13px; } /**************************************************************************** 8. SLIDER TEXT & SLIDER IMAGE ****************************************************************************/ /*Slider with big text only*/ .slider_text { margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; } .slider_text .slider_content { padding: 20px 20px; text-align:center; } .slider_text header { font-family: "OpenSansLight", Arial, Helvetica,sans-serif; } .slider_text header .bold { font-family: "OpenSansbold", Arial, Helvetica,sans-serif; } .slider_text header h3 { margin: 10px 0 0 0; color:#b1b1b1; } /*Slider with image and description*/ .slider_image { position:relative; } .slider_image .more { width: 0px; height: 0px; border-style: solid; border-width: 35px 0 0 35px; border-color: transparent transparent transparent #ffffff; bottom:0; position:absolute;} .slider_image .more_icon { bottom:0; position:absolute; z-index:3; left:0px; font:30px "EntypoRegular", Arial, Helvetica,sans-serif; } .slider_image header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; color:#fff; text-align:center; text-shadow: 0 1px 5px #000; position:absolute; left:20px; bottom:30px; } .slider_image_p { font-family: "OpenSansRegular", Arial, Helvetica,sans-serif !important; color:#bababa !important; text-align:center; text-shadow: 0 1px 5px #000; position:absolute; left:35px !important; bottom:8px !important;} .slider_image a { color:#2e3133; } .darker_background { height:100%; width:100%; background-color: rgba(0,0,0,.5); float:left; } /**************************************************************************** 9. SERVICES Section in index ****************************************************************************/ .services { float:left; width:100%; text-align:center; margin: -20px 0 30px 0; } .services header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; width: 215px; float: none; margin-left: -10px; } .services span { font: 92px "EntypoRegular", Arial, Helvetica,sans-serif; } .services p { margin: 20px 0 0 0; } .services a { color:#000; } .services a:hover { color:#fff; } .services .one_fourth:hover { font-color:#fff; } .services .one_fourth .content { padding:10px; } /**************************************************************************** 10. RECENT WORKS Section in index ****************************************************************************/ .recent_works { float:left; width:100%; } .recent_works img { width:100%; margin: 0 0 10px 0; } .recent_works header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 0 -5px 0; } .recent_works span { color:#5d5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .recent_works2 { float:left; width:100%; } .recent_works2 img { width:100%; margin: 0 0 10px 0; } .recent_works2 header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 0 -5px 0; } .recent_works2 span { color:#5d5d5d; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .recent_works_hover { display:none; position:absolute; top:0; width:100%; height:100%; margin: 5px 0 0 0; } .recent_works_hover2 { display:none; position:absolute; top:0; width:100%; height:100%; margin: 5px 0 0 0; } .recent_works_hover_content { height:100%; padding: 0 10px; } .recent_works_hover_content2 { height:100%; padding: 0 10px; } .recent_works .one_fourth:hover .recent_works_hover { display:block; } .recent_works .one_fourth2:hover .recent_works_hover2 { display:block; } .recent_works_hover_content header a { color:#fff; margin: 10px 0 -5px 0; float:left; } .recent_works_hover_content span { color:#2e3133; } .recent_works_hover_content p { color:#fff; margin: 5px 0 0 0; } .recent_works_hover_content .more { width: 0px; height: 0px; border-style: solid; border-width: 35px 0 0 35px; border-color: transparent transparent transparent #ffffff; bottom:0; left:0; position:absolute;} .recent_works_hover_content .more_icon { bottom:3px; position:absolute; z-index:3; left:0px; font:30px "EntypoRegular", Arial, Helvetica,sans-serif; } .recent_works_hover_content .more_icon a { color:#2e3133; } .recent_works_hover_content2 header a { color:#fff; margin: 10px 0 -5px 0; float:left; } .recent_works_hover_content2 span { color:#2e3133; } .recent_works_hover_content2 p { color:#fff; margin: 5px 0 0 0; } .recent_works_hover_content2 .more { width: 0px; height: 0px; border-style: solid; border-width: 35px 0 0 35px; border-color: transparent transparent transparent #ffffff; bottom:0; left:0; position:absolute;} .recent_works_hover_content2 .more_icon { bottom:3px; position:absolute; z-index:3; left:0px; font:30px "EntypoRegular", Arial, Helvetica,sans-serif; } .recent_works_hover_content2 .more_icon a { color:#2e3133; } /**************************************************************************** 11. RECENT POSTS Section in index ****************************************************************************/ .recent_posts { float:left; width:100%; } .recent_posts img { width:100%; margin: 0 0 10px 0; } .recent_posts header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 0 -5px 0; } .recent_posts span { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; } .recent_posts p { margin: 9px 0 0 0; } /**************************************************************************** 12. ABOUT US TEXT Top section in about us page ****************************************************************************/ .about_us_text { float:left; width:100%; height: 150px; } .about_us_text header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .about_us_text p { margin: 11px 0 0 0; } .about_us_text .skill { float:left; margin:0 0 10px 0; width:100%; } .about_us_text .skill_box { float:left; color:#fff; padding: 1px 7px; } .about_us_text .skill_tringle { float:left; width: 0px; height: 0px; border-style: solid; border-width: 13px 0 13px 13px; } /**************************************************************************** 13. ABOUT US TEAM Lower section in about us page ****************************************************************************/ .about_us_team { float:left; width:100%; } .about_us_team img { width:100%; } .about_us_team header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .about_us_team span { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; } .about_us_team p { margin: 9px 0 0 0; } .about_us_team .social { margin: 25px 0 0 0; } .about_us_team .social a { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; color:#000; } .about_us_team .social a:hover { color:#5d5d5d; } .about_us_team .social span { margin: 0 5px; } /**************************************************************************** 14. CLIENTS Used in clients/logo page ****************************************************************************/ .clients { float:left; width:100%; } .clients img { width:100%; } /**************************************************************************** 15. POORTFOLIO All portfolio styles ****************************************************************************/ .portfolio { float:left; width:100%; } .portfolio img { width:100%; margin: 0 0 10px 0; } .portfolio header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .portfolio span { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; } .portfolio_hover { display:none; position:absolute; top:0; width:100%; height:100%; } .portfolio_hover_content { height:100%; padding: 0 10px; } .portfolio li:hover .portfolio_hover { display:block; } .portfolio_hover_content header a { color:#fff; margin: 10px 0 0 0; float:left; } .portfolio_hover_content span { color:#2e3133; } .portfolio_hover_content p { color:#fff; margin: 5px 0 0 0; } .portfolio_hover_content .more { width: 0px; height: 0px; border-style: solid; border-width: 35px 0 0 35px; border-color: transparent transparent transparent #ffffff; bottom:0; left:0; position:absolute;} .portfolio_hover_content .more_icon { bottom:3px; position:absolute; z-index:3; left:0px; font:30px "EntypoRegular", Arial, Helvetica,sans-serif; } .portfolio_hover_content .more_icon a { color:#2e3133; } .portfolio .portfolio_works li { position:relative; float:left; margin:1%; } .portfolio .portfolio_works .columns2 { width:48%; } .portfolio .portfolio_works .columns3 { width:31%; } .portfolio .portfolio_works .columns4 { width:23%; } .portfolio .portfolio_works .columns5 { width:18%; } .portfolio .sort_by { margin: 0 0 50px 1%; } .portfolio .sort_by li { float:left; margin: 0 10px 0 0; } .portfolio .sort_by span { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 0 0 10px; } .portfolio .sort_by li a { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; color:#000; } .portfolio .sort_by li a:hover { color:#5d5d5d; } /*Style for portfolio circle */ .portfolio .circle .portfolio_hover_content { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; width:221px; height:220px; padding:0; text-align:center; margin:0 auto; display:table; } .portfolio .circle img { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; width:220px; height:220px; padding:0; display:table; margin:0 auto; margin-bottom:10px; } .portfolio .circle .portfolio_hover_content .more { visibility:hidden; } .portfolio .circle .portfolio_hover_content header { margin:0 auto; display:table; margin-top: 10px; padding: 0 50px; } .portfolio .circle .portfolio_hover_content span { margin-bottom: 10px; } .portfolio .circle p { margin: 0 20px; text-align:center; } .portfolio .circle header { text-align:center; } .portfolio .circle span { margin:0 auto; display:table; } .portfolio .circle .portfolio_hover_content .more_icon { position:relative; margin: 10px 0 0 0; } .portfolio .circle .portfolio_hover_content .more_icon a { color:#fff; } /**************************************************************************** 16. SINGLE WORK Portfolio open ****************************************************************************/ .single_work { float:left; width:100%; } .single_work header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .single_work p { margin: 9px 0 0 0; float:left; } .single_work .arrow { float:left; width:100%; } .single_work .arrow .arrow_box { width:35%; } .single_work .second { margin: 25px 0 0 0; float:left; } .single_work ul { margin: 9px 0 0 0; } .single_work .two_fifth span a { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; margin: 0 10px 0 0; } .single_work .two_fifth span a:hover { color:#5d5d5d; } .single_work img { width:100%; } /**************************************************************************** 17. BLOG POSTS General blog section style ****************************************************************************/ .blog_posts { width:100%; float:left;} .blog_posts .post { float:left; margin: 0 0 50px 0; } .blog_posts .post img { width:100%; margin:0 0 10px 0; } .blog_posts .post .vimeo, .blog_posts .post .music { margin:0 0 10px 0; } .blog_posts .post header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .blog_posts .post span { float:left; color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; margin:0 0 15px 0; } .blog_posts .post span a { color:#909090; margin:0 0 10px 0; } .blog_posts .post span a:hover { color:#000; } .blog_posts .post header a { color:#2e3133; } /**************************************************************************** 18. BLOG SINGLE Blog open ****************************************************************************/ .blog_single{ width:100%; float:left;} .blog_single .post { float:left; } .blog_single .post img { width:100%; margin:0 0 10px 0; } .blog_single .post .vimeo, .blog_posts .post .music { margin:0 0 10px 0; } .blog_single .post header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .blog_single .post span { float:left; color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; margin:0 0 15px 0; } .blog_single .post span a { color:#909090; margin:0 0 10px 0; } .blog_single .post span a:hover { color:#000; } .blog_single .post p { margin:0 0 25px 0; } .blog_single .post .last_paragraph { margin:0 !important; } .blog_single .social { height:0px; } .blog_single .social li { display:inline; margin: 0 10px 0 0; } /**************************************************************************** 19. COMMENTS Comments section in single blog ****************************************************************************/ .comments { float:left; width:100%; } .comments .comment { margin: 0 0 25px 0; float:left; width:100%; } .comments .comment .avatar { width:80px; height:80px; position:relative; float:left; margin-right:25px; } .comments .comment .avatar .left_top_corner { position:absolute; top:0; left:0; width: 0px; height: 0px; border-style: solid;border-width: 15px 15px 0 0; border-color: #fff transparent transparent transparent; } .comments .comment .avatar .right_top_corner { position:absolute; top:0; right:0; width: 0px; height: 0px; border-style: solid;border-width: 0 15px 15px 0; border-color: transparent #fff transparent transparent; } .comments .comment .avatar .left_bottom_corner { position:absolute; bottom:0; left:0; width: 0px; height: 0px; border-style: solid;border-width: 15px 0 0 15px; border-color: transparent transparent transparent #fff; } .comments .comment .avatar .right_bottom_corner { position:absolute; bottom:0; right:0; width: 0px; height: 0px; border-style: solid;border-width: 0 0 15px 15px; border-color: transparent transparent #fff transparent; } .comments .comment .avatar img { position:absolute; bottom:0; left:4px; } .comments .comment_text { float:left; } .comments .comment_text header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .comments .comment_text span { display:block; color:#5d5d5d; font: 11px "OpenSansLight", Arial, Helvetica,sans-serif; margin:0 0 10px 0; } .comments .reply_1 { margin-left:111px; } .comments .reply_2 { margin-left:222px; } .comments .last_comment { margin:0 !important; } .comment_name_empty, .comment_email_empty, .comment_text_empty, .comment_email_invalid { display:none; color:#d1181e; font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .comment_success { color:#7bc830; display:none; font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } /**************************************************************************** 20. REPLY reply form in blog single & contact ****************************************************************************/ .input_form { float:left; width:100%; } .input_form input[type=text] { padding:5px; width:50%; display:block; margin: 3px 0 15px 0; border-color:#abadb3; border-width:1px; outline:none; border-style:solid; -webkit-appearance: none; -webkit-border-radius: 0; } .input_form span { color:#c6c6c6; } .input_form textarea { width:100%; border-color:#abadb3; border-width:1px; height:200px; padding:5px; outline:none; box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0 2px 0 0; -webkit-appearance: none; -webkit-border-radius: 0; } .input_form input[type=submit] { float:right; border:none; color:#fff; padding: 7px; margin: 10px 0 0 0; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; } .input_form input[type=submit]:hover { background-color:#2e3133; } /**************************************************************************** 21. CONTACT two contact styles ****************************************************************************/ .contact_name_empty, .contact_email_empty, .contact_text_empty, .contact_email_invalid,.contact_subject_empty { display:none; color:#d1181e; font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .contact_success { color:#7bc830; display:none; font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .contact_details ul { margin: 25px 0 0 0; } .contact_details ul li span { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .details_fullwidth li { display:inline; margin: 0 25px 0 0; } .google_map { width:100%; height:337px; } /**************************************************************************** 22. PAGINATION ****************************************************************************/ .pagination ul { display:inline; } .pagination ul li { border-style:solid; border-width:1px; border-color:#2e3133; float:left; width:32px; height: 32px; margin: 0 5px 0 0; } .pagination ul li a { margin:0 auto; display:table; margin-top:4px; color:#2e3133; } .pagination .pagination_link { border: none; } .pagination ul .selected { background-color:#2e3133; } .pagination ul .selected a { color:#fff; } /**************************************************************************** 23. SIDEBAR ****************************************************************************/ .sidebar_widget { float:left; width:100%; } .sidebar_widget, .sidebar_widget .header { margin: 0 0 25px 0; } .sidebar_widget ul li { margin: 0 0 5px 0; } .sidebar_widget ul li a { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; color:#2e3133; } .sidebar_widget ul li a:hover { color:#5d5d5d; } .sidebar_widget ul li span { display:block; color:#5d5d5d; font: 11px "OpenSansLight", Arial, Helvetica,sans-serif; } .sidebar_widget .tag{ float:left; background-color:#c6c6c6; color:#fff; padding: 1px 7px; margin: 0 10px 10px 0; } .sidebar_widget .tag:hover { background-color:#2e3133; } .sidebar_widget .last_widget { margin: 0 0 50px 0; } /**************************************************************************** 24. 404 page ****************************************************************************/ .page_404 { width:100%; float:left; text-align:center; } .page_404 header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; margin-bottom:-50px; } .page_404 span { font:255px "EntypoRegular", Arial, Helvetica,sans-serif; } /**************************************************************************** 25. CUSTOM PAGE Use to create your own custom pages ****************************************************************************/ .custom_page { float:left; width:100%; margin-bottom: -20px; } .custom_page img { width:100%; margin: 0 0 25px 0; } .custom_page header { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .custom_page .subtitle { color:#5d5d5d; font: 10px "OpenSansBold", Arial, Helvetica,sans-serif; display:block; } .custom_page p { margin: 25px 0 0 0; } .custom_page .vimeo, .custom_page.music { margin:0; } /**************************************************************************** 26. GENERAL TEXT ELEMENTS STYLING Use to create your own custom pages ****************************************************************************/ p img { width:30% !important; float:left; margin: 0 29px 0 0 !important; } p q { width:60%; float:left; margin: 0 15px 2px 0 !important; color:#5d5d5d; font: 18px "OpenSansRegular", Arial, Helvetica,sans-serif; } .quote_right { float:right !important; } p q span { font: 92px "EntypoRegular", Arial, Helvetica,sans-serif !important; float:left; margin: -30px 20px 0 0 !important; } .icon { font: 92px "EntypoRegular", Arial, Helvetica,sans-serif; margin:5px; } .icon_small { font-size: 62px } .icon_very_small { font-size: 42px } .icon_big { font-size: 122px } .icon_very_big { font-size: 142px } .dropcap1 {float:left; margin: 0 20px 0 0; font: 32px "OpenSansBold", Arial, Helvetica,sans-serif; } .dropcap2 { float:left; background-color:#2e3133; color:#fff; font-family: "OpenSansBold", Arial, Helvetica, sans-serif; font-size: 18px; margin-right: 0px; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 12px; padding-bottom: 0px; padding-left: 12px; margin-top: 0; } .dropcap3 {float:left; margin: 0 20px 0 0; font: 32px "OpenSansBold", Arial, Helvetica,sans-serif; background-color:#2e3133;color:#fff; padding: 0 12px 2px 12px; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; } .dropcap2_color {float:left; margin: 0 20px 0 0; font: 32px "OpenSansBold", Arial, Helvetica,sans-serif; color:#fff; padding: 0 12px 2px 12px; } .dropcap3_color {float:left; margin: 0 20px 0 0; font: 32px "OpenSansBold", Arial, Helvetica,sans-serif; color:#fff; padding: 0 12px 2px 12px; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; } .highlight { color:#fff; padding: 2px; background-color:#2e3133; } .highlight_color { color:#fff; padding: 2px; } .highlight_underline { border-bottom:1px dotted; padding-bottom:2px; } .button { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; margin:10px 5px; padding: 8px 10px; color:#fff; display:inline-block; } .button:hover {filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;} .button_small { padding: 4px 6px; font-size:10px; } .button_big { padding: 12px 14px; font-size:16px; } .button_rounded { -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; } .button_gradient {background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -o-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%);} .toggle_box { margin: 25px 0 0 0; } .toggle { width:100%; float:left;} .toogle_on { float:left; width:100%; background-color:#e0e0e0; margin: 0 0 10px 0; padding: 5px 0; border-style:solid; border-width:1px; border-color:#c6c6c6; } .toogle_on a { color:#2e3133; margin-left: 5px; font-family: "OpenSansBold", Arial, Helvetica,sans-serif; } .toggle_container { margin:-15px 0 15px 0; } .info_box { width:100%; background-color:#e0e0e0; min-height:150px; border-style:solid; border-width:1px; border-color:#c6c6c6; color:#2e3133; text-align:center; margin:25px 0 0 0; } .info_box div { padding:15px; } /**************************************************************************** 27. BOTTOM ****************************************************************************/ .bottom { width:100%; background-color:#2e3133; float:left; } .bottom_content { max-width:1000px; height:auto; color:#727272; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 20px; padding-right: 20px; padding-bottom: 0; padding-left: 20px; } .bottom_content header { color:#a5a5a5; margin-top: 0; margin-right: 0; margin-bottom: 15px; margin-left: 0; } .bottom_content p, .bottom_content ul { margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; line-height: 14px; } .bottom_content .bold { font-family: "OpenSansBold", Arial, Helvetica,sans-serif; color:#a5a5a5; } .bottom_content .latest_posts a { font-family: "OpenSansRegular", Arial, Helvetica,sans-serif; color:#a5a5a5; } .bottom_content .latest_posts a:hover { color:#fff; } .bottom_content .latest_posts li { margin: 0 0 10px 0; } .bottom_content .one_fourth, .bottom_content .one_third, .bottom_content .one_half { margin-bottom: 20px; } .bottom .social { float:left; display:block; width:20px; height:20px; margin: 0 8px 0 0; border: 1px solid #010101; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: #000; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -o-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); background-image: linear-gradient(bottom, rgba(0,0,0,.25) 0%, rgba(255,255,255,.25) 100%); } .bottom .facebook_img { background: url(../images/fbi.png) no-repeat center; } .bottom .twitter_img { background: url(../images/twi.png) no-repeat center; } .bottom .googleplus { background: url(../images/gplus.png) no-repeat center; } /**************************************************************************** 28. TWITTER & FLICKR WIDGET Widgest at the bottom of page ****************************************************************************/ .tweet_list li { overflow-y: auto; overflow-x: hidden; padding:0 0 20px 0; list-style-type: none; } .tweet_list li a { color:#a5a5a5; } .tweet_list li a:hover { color:#fff; } .tweet_list .tweet_avatar { padding-right: 10px; float: left; } .tweet_list .tweet_avatar img { vertical-align: middle; width:100% !important; margin:0 !important; } .flickr li { float:left; margin: 0 20px 5px 0; } .flickr img { width:50px; } /**************************************************************************** 29. FOOTER Copyright place ****************************************************************************/ .footer { background-color:#005182; width:100%; padding: 20px 0; float:left; } .footer_content { max-width:1000px; margin:0 auto; height:auto; color:#4c4d4e; padding: 0 20px; } .footer span { float:left; color: #CCCCCC; } .footer a{ float:right; color:#CCCCCC; } .footer a:hover { color:#fff; } /**************************************************************************** 30. PANEL Demo panel use on the right side ****************************************************************************/ .theme_panel { position:fixed; top:122px; z-index:4; width:250px; height:200px; margin-left:-220px; } .theme_panel_content { background-color:#2e3133; width: 220px; float:left; padding: 20px 0; } .theme_panel a { float:left; } .theme_panel header { color:#fff; margin:0 auto; display:table; } .theme_panel select { margin:0 auto; display:table; width:150px; margin-top:20px; padding:3px; } .theme_panel .first { margin-top:20px; } /**************************************************************************** 31. RESPONSIVE ****************************************************************************/ @media all and (max-width: 1000px) { .portfolio .columns5{ width:23% !important; } .portfolio .circle { width:31% !important; } } @media all and (max-width: 800px) { .portfolio .columns4, .portfolio .columns5, .portfolio .columns3 { width:48% !important; } } @media all and (max-width: 700px) { .mobile { display:block; margin:0 auto; margin-top:16px; width:200px; } nav ul, .search, .top div { visibility:hidden; display:none; } .top img { margin:0 auto; display:table; } .one_fourth, .one_third , .one_half, .one_fifth, .one_sixth, .two_fifth, .three_fifth, .three_fourth , .two_third { width:100%; margin: 0 0 20px 0; } } @media all and (max-width: 560px) { .portfolio .circle { width:100% !important; } .comments .reply_1, .comments .reply_2 { margin-left:0px; } } @media all and (max-width: 500px) { .portfolio .columns4, .portfolio .columns5, .portfolio .columns3, .portfolio .columns2 { width:98% !important; } } /**************************************************************************** 32. HACKS Fixes for different browsers ****************************************************************************/ @-moz-document url-prefix() { .recent_works_hover_content .more { bottom:5px; } nav li a { padding: 18px 20px 18px 20px; } } @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px) { .search input[type=submit] { right:-12px; top:15px; } } #body .container .top a { color: #999999; text-decoration: none; } #body .container .top a:hover { color:#000; text-decoration: none; } .idioma { color: #999999; } .piealfredo { color: #CCCCCC; float: right; } .info_box2 { width:100%; background-color:#005182; min-height:120px; border-style:solid; border-width:1px; border-color:#c6c6c6; color:#fff; text-align:center; margin:25px 0 0 0; } .info_box2 div { padding:15px; } .one_fourth3 { width:30%; }