Flat CV

/*******Styles for mobile and tablet resolutions*****/ @media (max-width: 949px ) and (min-width: 767px) { #page { padding-top: 100px; max-width: 750px; font-size: 14px; line-height: 17px; } #profile_photo { width: 125px; min-height: 125px; } #profile_name { width: 250px; } #nav_tabs li { width: 125px; } #nav_tabs li a { height: 125px; } #profile_name .name { font-size: 36px; line-height: 36px; } #profile_name { height: 125px; } #profile_name .profile_inner { padding: 15px 20px; } #profile_name .name { margin-bottom: 3px; } #profile_name .pos { font-size: 14px; } #splash .social_links ul li a { height: 125px; width: 125px; } #splash .social_links { width: 250px; } .author_info .user_desc { font-size: 20px; line-height: 24px; } .author_info { max-width: 436px; padding: 24px 32px 18px 32px; } .author_info .user_desc { padding: 0 20px 0 10px; } .author_info .user_desc { margin-bottom: 17px; } .phone_num .phone { font-size: 30px; line-height: 36px; } .phone_num .phone { padding-top: 12px; padding-bottom: 3px; } .addition span { line-height: 18px; font-size: 14px; } .addition {padding-top: 6px;} #nav_tabs li a span { top: 13px; left: 38px; } #nav_tabs li.portfolio a span {top: 14px;} #nav_tabs li.contacts a span { left: 38px; } #splash .social_links ul li a span { padding-top: 5px; } .skills_sidebar_section { padding: 38px 39px 30px 42px; } .skills_sidebar_section aside.widget { width: 314px; margin: 0 41px 20px 0; } .resume_post .resume_period { width: 125px; } .resume_post .extra_wrap { padding: 20px 0 0 20px; } .resume_post .resume_header .post_title { font-size: 14px; line-height: 20px; padding-left: 45px; } .resume_post .resume_header .resume_position { font-size: 14px; line-height: 20px; padding-left: 45px; } .resume_post .extra_wrap .resume_header { margin-bottom: 11px; padding-right: 19px; } #resume .section-header { padding: 38px 38px 27px; } .resume_post .resume_period { font-size: 14px; line-height: 17px; padding-top: 45px; } .resume_post .resume_content { padding-bottom: 20px; } .skills_sidebar_section aside.widget h3 { font-size: 14px; line-height: 17px; margin-bottom: 15px; } #portfolio .portfolio_items article.portfolio_post { width: 250px; height: 167px; } #portfolio_iso_filters { padding: 39px 40px 40px; } .contacts_wrapper .col1 { padding-top: 42px; } .addition { margin-bottom: 25px; } .contacts_wrapper .col2 .inner { padding: 35px 42px 42px; } #toTop {display: none !important;} } @media (max-width: 767px) { #page { padding-top: 75px; width: 450px; } #nav_tabs li.splash + li { clear: both; } .author_info { max-width: none; width: auto; float: left; } #splash .social_links ul li a { width: 225px; } #splash .social_links { float: none; width: 100%; clear: both; } .author_info .user_desc { padding-right: 0; margin-bottom: 26px; } #portfolio .portfolio_items article.portfolio_post { width: 450px; height: 300px; } .contacts_wrapper .col1 { float: none; width: 100%; } .contacts_wrapper .col1 { clear: both; width: 100%; } .contacts_wrapper .col1 .qrcode_vcard { display: none; } .contacts_wrapper:after { display: none; } .resume_post .resume_header .post_title { float: none; width: auto; } .resume_post .resume_header .resume_position { clear: both; float: none; } .resume_post .resume_period { width: 100px; padding-top: 25px; } .resume_post .extra_wrap { padding-top: 27px; } .skills_sidebar_section { padding: 30px 50px; } .skills_sidebar_section aside.widget { width: 100%; float: left; margin: 0 0 45px 0; } } @media (max-width: 479px) { #page { padding-top: 50px; width: 300px; } #nav_tabs li a { height: 100px; } #nav_tabs li a span { top: 0; left: 25px; } #nav_tabs li.portfolio a span { top: 0; } #nav_tabs li.contacts a span { left: 25px; } #nav_tabs li { width: 100px; } #profile_photo { width: 100px; height: 100px; min-height: 100px; overflow: hidden; } #profile_name { width: 200px; height: 100px; } #profile_name .name { font-size: 25px !important; line-height: 25px !important; margin-bottom: 4px; } #profile_name .profile_inner { padding: 15px 14px 10px; } #profile_name .pos { font-size: 12px; line-height: 16px; } .author_info { padding: 15px 20px; } .author_info .user_desc { font-size: 16px; line-height: 19px; } .phone_num .icon { width: 36px; height: 36px; } .phone_num .icon:after { font-size: 57px; margin-top: -21px; } .phone_num .phone { font-size: 30px; line-height: 30px; } .author_info .user_desc { margin-bottom: 28px; } .phone_num .phone { padding-bottom: 6px; padding-top: 10px; } .addition { padding-top: 6px; } .addition span { font-size: 14px; line-height: 18px; } #splash .social_links ul li a { width: 150px; height: 100px; } #splash .social_links ul li a span { padding-top: 0; margin-top: -5px; } .resume_post .resume_period { width: 60px; } .resume_post .resume_period .period_present { font-size: 12px; } #resume .section-header h2 .icon { width: 36px; height: 36px; } #resume .section-header h2 { font-size: 17px; line-height: 26px; padding: 5px 0 12px 45px; margin-bottom: 0; } #resume .section-header { padding: 32px 20px 25px } #resume .section-header .section_toggle { width: 36px; height: 36px; } #resume .section-header .section_toggle span { margin-top: 9px; height: 18px; } #resume .section-header .section_toggle span img { width: 18px; margin-top: 0px; } #resume .section-header.opened .section_toggle span img { margin-top: -18px; } #resume .section-header h2 .icon:after { font-size: 57px; padding-top: 5px; } .resume_post .extra_wrap { padding: 31px 0 0 20px; } .resume_post .resume_header .post_title .post_title_icon { width: 24px; height: 24px; } .resume_post .resume_header .resume_position .icon { width: 24px; height: 24px; } .resume_post .resume_period { font-size: 14px; line-height: 18px; } .resume_post .resume_header .post_title .post_title_icon:after, .resume_post .resume_header .resume_position .icon:after { font-size: 34px; padding-top: 1px; } .resume_post .resume_header .resume_position .icon.icon3:after { font-size: 37px; padding-top: 0; } #resume .section-header h2.icon3 .icon:after { padding-top: 2px; } .resume_post .extra_wrap { padding-top: 17px; } .resume_post .resume_header .post_title { margin-bottom: 12px; } .resume_post .resume_header .post_title, .resume_post .resume_header .resume_position { padding: 5px 0 0 34px; font-size: 14px; line-height: 20px; } .resume_post .resume_period { padding-top: 16px; } .skills_sidebar_section { padding: 30px 20px; } #portfolio .portfolio_items article.portfolio_post { width: 300px; height: 200px; } #portfolio_iso_filters { padding: 35px 20px; } #portfolio_iso_filters li { font-size: 14px; line-height: 17px; } .contacts_wrapper .col2 .inner { padding: 23px 20px 30px; } .sc_contact_form h3 { font-size: 17px; line-height: 22px; } .resume_buttons { padding: 43px 10px; } .resume_post .resume_header .resume_position .icon.icon2:after { padding-top: 2px; } #resume .section-header h2 .icon.category2:after { padding-top: 3px; } } /****************************************************/ /* Flat CV Styles */ @import url(http://fonts.googleapis.com/css?family=Cabin:400,400italic,700 ); 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, 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 { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } @font-face { font-family: 'FlatCV'; src: url('../assets/FlatCV.eot'); src: url('../assets/FlatCV.eot?#iefix') format('embedded-opentype'), url('../assets/FlatCV.woff') format('woff'), url('../assets/FlatCV.ttf') format('truetype'), url('../assets/FlatCV.html#flatcvregular') format('svg'); font-weight: normal; font-style: normal; } html { overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } body { height: 100%; background: #09193f; font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 20px; color: #666; position: relative; } body.bg_img { background-color: #000 !important; background-position: center 0 !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } h1 { font-size: 20px; line-height: 24px; margin-bottom: 10px; } h2 { font-size: 18px; line-height: 21px; margin-bottom: 10px; } h3 { font-size: 17px; line-height: 21px; margin-bottom: 10px; } h4 { font-size: 16px; line-height: 20px; margin-bottom: 10px; } h5 { font-size: 15px; line-height: 20px; margin-bottom: 10px; } h6 { font-size: 14px; line-height: 17px; margin-bottom: 10px; } .extra_wrap { overflow: hidden; } input[type="text"], input[type="search"], input[type="password"], textarea { line-height: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 8px 10px 8px; border: 2px solid #e5e5e5; border-radius: 2px; background: #f5f5f5; } input[type="submit"] { background: #fff; border: 2px solid #e5e5e5; color: #b1b1b1; font-weight: 700; text-transform: uppercase; font-family: "Lato", sans-serif; cursor: pointer; font-size: 12px; height: 27px; padding: 0 7px 2px; line-height: 29px; -moz-box-sizing: content-box; box-sizing: content-box; border-radius: 3px; } input[type="submit"]:hover { background: #e5e5e5; color: #b1b1b1; } form label { cursor: pointer; } form label.required { position: relative; } form label.required:after { content: "*"; position: absolute; top: -2px; right: -12px; color: #bc3a3a; font-size: 18px; line-height: 22px; font-weight: 400; } textarea { overflow: auto; resize: none; } ::selection { background: #16a5d7; /* Safari */ color: #fff; } ::-moz-selection { color: #fff; background: #16a5d7; /* Firefox */ } a {color: #16a5d7;} a:hover {color: #646464;} strong { font-weight: 700; } a img { border: none; } #page { margin: 0 auto; max-width: 900px; padding: 150px 0 100px; vertical-align: middle; width: 100%; } #nav_tabs { overflow: hidden; } #nav_tabs li { float: left; width: 150px; list-style: none; } #nav_tabs li.splash { width: auto; } #nav_tabs li a { display: block; position: relative; height: 150px; -webkit-transition: color ease .4s, background ease .4s; -moz-transition: color ease .4s, background ease .4s; -ms-transition: color ease .4s, background ease .4s; -o-transition: color ease .4s, background ease .4s; transition: color ease .4s, background ease .4s; color: #fff; text-decoration: none; } #nav_tabs li.profile a { background: #50c0e9; } #nav_tabs li.portfolio a { background: #a8d324; } #nav_tabs li.contacts a { background: #7caf00; } #nav_tabs li a:hover, #nav_tabs li.current a { background: #fff !important; } #nav_tabs li a span { font-size: 100px; line-height: 100px; display: block; position: absolute; top: 26px; left: 47px; overflow: hidden; font-weight: normal; } #nav_tabs li.portfolio a span {top: 25px;} #nav_tabs li.contacts a span {left: 50px;} #nav_tabs li a:hover, #nav_tabs li.current a { color: #ccc; } #profile_photo { float: left; min-height: 150px; background: #323232; width: 150px; } #profile_photo img { vertical-align: top; width: 100%; height: auto; } #header { overflow: hidden; background: #fff; } #profile_name { background: none repeat scroll 0 0 #16A5D7; color: #FFFFFF; float: left; height: 150px; width: 300px; } #profile_name .name { font-weight: 700; line-height: 41px; margin-bottom: 5px; text-transform: uppercase; font-size: 40px; } #profile_name .profile_inner { padding: 20px; } #profile_name .pos { text-transform: uppercase; } .icon { font-family: "FlatCV"; } #main { background: #fcfcfc; } #tab_section > .tab_content {display: none;} #tab_section #splash { background: #fff; overflow: hidden; } .author_info { float: left; max-width: 500px; overflow: hidden; padding: 30px 50px; text-align: center; width: 100%; } .author_info .user_desc { color: #666666; font-size: 24px; line-height: 29px; margin-bottom: 32px; padding-right: 40px; text-align: left; } .phone_num .icon { width: 50px; height: 50px; background: #50c0e9; display: inline-block; border-radius: 50px; } .phone_num .icon:after { content: "d"; display: block; text-align: center; color: #fff; font-size: 80px; line-height: 80px; margin-top: -14px; font-weight: normal; } .phone_num .phone { padding: 8px 0 1px; display: block; font-size: 36px; line-height: 44px; color: #16a5d7; background: url(../images/phone_divider.gif) center bottom no-repeat; } .addition { padding-top: 4px; } .addition { margin-bottom: 42px; } .addition span { color: #16a5d7; display: block; font-size: 16px; line-height: 20px; } .addition span a { text-decoration: none; color: #16a5d7; } .addition span a:hover { color: #000; } /***/ #splash .social_links { float: right; width: 300px; } #splash .social_links ul { overflow: hidden; list-style: none; } #splash .social_links ul li { float: left; text-align: center; } #splash .social_links ul li a { -webkit-transition: background ease .5s, color ease .5s; -moz-transition: background ease .5s, color ease .5s; -ms-transition: background ease .5s, color ease .5s; -o-transition: background ease .5s, color ease .5s; transition: background ease .5s, color ease .5s; display: block; width: 150px; height: 150px; overflow:hidden; font-family: "FlatCV"; text-decoration: none; color: #fff; font-size: 100px; line-height: 100%; } #splash .social_links ul li a span { display: block; padding-top: 23px; text-align: center; } .social_links .icon1 { background: #3B5999; } .social_links .icon2 { background: #00BAFF; } .social_links .icon3 { background: #EA4C89; } .social_links .icon4 { background: #CB2028; } #splash .social_links ul li a:hover { background: #fff; color: #ccc; } /***/ #footer { text-align: center; font-size: 12px; line-height: 15px; text-transform: uppercase; color: #16a5d7; padding: 17px 0; font-weight: 700; } /**Resume**/ #resume .section-header { background: url("../images/line_hor.gif") repeat-x scroll 0 bottom #FFFFFF; cursor: pointer; padding: 50px 50px 40px; } #resume .section-header .section_toggle { background: none repeat scroll 0 0 #FFFFFF; border-radius: 50px 50px 50px 50px; display: block; float: right; height: 50px; text-align: center; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; width: 50px; } #resume .section-header .section_toggle span { display: block; height: 24px; margin-top: 13px; overflow: hidden; } #resume .section-header .section_toggle span img { height: auto; -webkit-transition: all ease .2s; -moz-transition: all ease .2s; -ms-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s; vertical-align: top; width: 24px; } #resume .section-header:hover .section_toggle { background: #eee; } #resume .section-header.opened { background-image: none; } #resume .section-header h2 { color: #999999; font-size: 23px; font-weight: 700; line-height: 28px; overflow: hidden; padding: 10px 0 12px 64px; position: relative; text-transform: uppercase; } #resume .section-header h2 .icon { border-radius: 50px 50px 50px 50px; display: block; height: 50px; left: 0; overflow: hidden; position: absolute; top: 0; width: 50px; } #resume .section-header h2 .icon:after { color: #FFFFFF; content: "e"; /*Available labels: e, h, j*/ display: block; font-family: "FlatCV"; font-size: 80px; font-weight: normal; padding-top: 12px; text-align: center; text-transform: lowercase; } .section-header .section-title .icon.category1 { background: #50C0E9; } .section-header .section-title .icon.category2 { background: #a8d324; } #resume .section-header h2 .icon.category2:after { padding-top: 8px; content: "h"; } .resume_post { overflow: hidden; } #resume .resume_post.even { background: #f7f7f7; } .resume_post .resume_period { text-transform: uppercase; float: left; width: 150px; text-align: center; font-size: 16px; line-height: 19px; padding-top: 55px; border-right: 1px solid #eaeaea; margin-right: -1px; } .resume_post .resume_period .period_to { display: block; font-weight: 700; } .resume_post .resume_period.category1 { color: #50C0E9; } .resume_post .resume_period.category2 { color: #7caf00; } .resume_post .extra_wrap { padding: 31px 0 0 30px; border-left: 1px solid #eaeaea; } .resume_post .extra_wrap .resume_header { overflow: hidden; font-size: 16px; line-height: 19px; text-transform: uppercase; font-weight: 700; color: #333333; padding-right: 32px; margin-bottom: 10px; } #resume .section-header { cursor: pointer; padding: 50px 50px 40px; background: url(../images/line_hor.gif) 0 bottom repeat-x #fff; } #resume .section-header.widgets_section { background: #fff; } #resume .section-header.opened .section_toggle span img { margin-top: -24px; } .resume_post .resume_header .post_title { float: left; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; padding: 10px 0 0 50px; position: relative; } .resume_post .resume_header .post_title .post_title_icon { position: absolute; top: 3px; left: 0; display: block; width: 35px; height: 35px; border-radius: 35px; overflow: hidden; } .resume_post .resume_header .post_title .post_title_icon:after { display: block; content: "f"; font-weight: normal; text-transform: lowercase; color: #fff; font-family: "FlatCV"; text-align: center; font-size: 50px; padding-top: 7px; } .resume_post .resume_header .post_title .post_title_icon.icon3:after { content: "g"; } .resume_post .resume_header .post_title .post_title_icon.icon2:after { content: "f"; } .resume_post .resume_header .post_title .post_title_icon.icon1:after { content: "k"; } .resume_post .resume_content { padding: 0 40px 31px 0; } .resume_header .post_title_icon.category1 { background: #50C0E9; } .resume_header .post_title_icon.category2 { background: #7caf00; } .resume_post .resume_header .resume_position { float: right; width: 50%; padding: 10px 0 0 51px; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .resume_post .resume_header .resume_position .icon { position: absolute; display: block; width: 35px; height: 35px; border-radius: 35px; top: 3px; left: 0; overflow: hidden; } .resume_post .resume_header .resume_position .icon:after { content: "e"; color: #fff; text-transform: lowercase; display: block; text-align: center; font-size: 52px; font-weight: 400; padding-top: 7px; } .resume_post .resume_header .resume_position .icon.icon1:after { content: "j"; } .resume_post .resume_header .resume_position .icon.icon2:after { content: "e"; padding-top: 8px; } .resume_post .resume_header .resume_position .icon.icon3:after { content: "h"; padding-top: 4px; font-size: 57px; } .resume_header .resume_position.category1 .icon { background: #50C0E9; } .resume_header .resume_position.category2 .icon { background: #a8d324; } #resume .section-header.widgets_section h2 .icon { background: #497CF0; } #resume .section-header.widgets_section h2 .icon:after { content: "i"; } .skills_sidebar_section { padding: 45px 46px 30px 50px; overflow: hidden; } .skills_sidebar_section aside.widget { float: left; margin: 0 46px 20px 0; width: 379px; } .skills_sidebar_section aside.widget.widget-odd { float: right; margin-right: 0; } .skills_sidebar_section aside.widget h3 { color: #333333; font-size: 16px; font-weight: 700; line-height: 20px; margin-bottom: 16px; text-transform: uppercase; } .widget_skills .skills_row { margin-top: 1px; } .widget_skills .progress { -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 3px 3px 3px 3px; display: block; font-size: 16px; height: 35px; line-height: 20px; padding-top: 7px; text-align: left; width: 0; } .widget_skills .progressbar { white-space: nowrap; } .widget_skills .caption { color: #FFFFFF; font-weight: bold; margin: 0 0 0 12px; } .widget_skills .value { color: #FFFFFF; font-weight: 400; } /**********/ .resume_buttons { background: none repeat scroll 0 0 #FFFFFF; overflow: hidden; padding: 43px 50px; text-align: center; } #contact_form .enter, a.button_link { background: none repeat scroll 0 0 #7CAF00; border-radius: 3px 3px 3px 3px; color: #FFFFFF; float: right; font-size: 16px; font-weight: 700; line-height: normal; padding-bottom: 2px; text-decoration: none; text-transform: uppercase; vertical-align: top; } #contact_form .enter span, a.button_link span { vertical-align: top; display: inline-block; padding: 8px 14px 9px; background: #a8d324; border-radius: 3px; } #contact_form .enter span, a.button_link span { background: none repeat scroll 0 0 #A8D324; border-radius: 3px 3px 3px 3px; display: inline-block; padding: 8px 14px 9px; vertical-align: top; } a.button_link.download { background: #16A5D7; } a.button_link span { padding: 8px 0 9px; text-align: center; width: 117px; } a.button_link.download span { background: #50c0e9; } #contact_form .enter:hover span, a.button_link:hover span { background: none; } #contact_form .enter:active, a.button_link:active { -webkit-box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); -moz-box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } /* Portfolio Section */ #portfolio .portfolio_items { overflow: hidden; } #portfolio_iso_filters { overflow: hidden; padding: 59px 50px 60px; background: #fff; } #portfolio_iso_filters li { list-style: none; float: left; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; margin-right: 1px; } #portfolio_iso_filters li a { text-decoration: none; color: #666; display: inline-block; padding: 5px 10px 6px; border-radius: 2px; } #portfolio_iso_filters li a:hover { color: #16a5d7; } #portfolio_iso_filters li a.current { background: #16a5d7; color: #fff; } #portfolio .portfolio_items { overflow: hidden; } #portfolio .portfolio_items article.portfolio_post { float: left; width: 300px; height: 200px; background: #323232; overflow: hidden; } #portfolio .portfolio_items article.portfolio_post.hidden { display: none; } #portfolio .portfolio_items article.portfolio_post .caption { position: absolute; left: 29px; top: -125px; -webkit-transition: all cubic-bezier(0, 0.35, .5, 0.3) .6s; -moz-transition: all cubic-bezier(0, 0.35, .5, 0.3) .6s; -ms-transition: all cubic-bezier(0, 0.35, .5, 0.3) .6s; -o-transition: all cubic-bezier(0, 0.35, .5, 0.3) .6s; transition: all cubic-bezier(0, 0.35, .5, 0.3) .6s; } #portfolio .portfolio_items article.portfolio_post .caption:hover { -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -ms-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } #portfolio .portfolio_items article.portfolio_post .caption h4 { color: #fff; font-size: 16px; line-height: 20px; margin-bottom: 3px; } #portfolio .portfolio_items article.portfolio_post .caption h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 15px; } #portfolio .portfolio_items article.portfolio_post:hover .caption { top: 25px; } #portfolio .portfolio_items article.portfolio_post a { display: block; position: relative; color: #7caf00; } #portfolio .portfolio_items article.portfolio_post a img { vertical-align: top; } #portfolio .portfolio_items article.portfolio_post a .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/portfolio_overlay.png) 0 0 repeat; opacity: 0; filter: alpha(opacity=0) -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; } #portfolio .portfolio_items article.portfolio_post a:hover .overlay { opacity: 1; filter: alpha(opacity=100) } #portfolio .portfolio_items article.portfolio_post a .link-icon { display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; transform: rotate(-360deg) scale(0); -webkit-transform: rotate(-90deg) scale(0); -webkit-transition: all cubic-bezier(0, 0.35, .5, 1.3) .4s; -moz-transition: all cubic-bezier(0, 0.35, .5, 1.3) .4s; -ms-transition: all cubic-bezier(0, 0.35, .5, 1.3) .4s; -o-transition: all cubic-bezier(0, 0.35, .5, 1.3) .4s; transition: all cubic-bezier(0, 0.35, .5, 1.3) .4s; opacity: 0; filter: alpha(opacity=0) } #portfolio .portfolio_items article.portfolio_post a:hover .link-icon { opacity: 1; filter: alpha(opacity=100); transform: rotate(0deg) scale(1); -webkit-transform: rotate(0deg) scale(1); } #portfolio .portfolio_items article.portfolio_post.even { background: #4d4d4d; } #portfolio .portfolio_items article.portfolio_post .img-wrap img { width: 100%; height: auto; } #more_results { display: inline-block; background: #7caf00; padding-bottom: 2px; border-radius: 3px; font-size: 16px; line-height: 35px; text-transform: uppercase; text-decoration: none; font-weight: 700; color: #fff; } #more_results span { display: inline-block; padding: 0 14px 0; height: 37px; background: #a8d324; border-radius: 3px; } #more_results:hover span { background: none; } #more_results:active { background: #7bb000; -webkit-box-shadow: inset 0 0 0 2px #638c00; -moz-box-shadow: inset 0 0 0 2px #638c00; box-shadow: inset 0 0 0 2px #638c00; } #more_results:active span { background: none; } #more_results.no_results { background: #ccc; -webkit-box-shadow: inset 0 0 0 2px #b2b2b2; -moz-box-shadow: inset 0 0 0 2px #b2b2b2; box-shadow: inset 0 0 0 2px #b2b2b2; } #more_results.no_results span { background: none; } #portfolio_load_more { padding: 30px; text-align: center; } /* ======================================= ISOTOPE SETTINGS =================================== */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* ======================================= /ISOTOPE SETTINGS =================================== */ .pp_play, .pp_pause { display: none !important; } .pp_content {position: relative;} .pp_content .pp_nav { position: absolute; left: 0; right: 0; top: 50%; margin: -25px 0 0 0; } .pp_content_container .pp_content { padding-left: 0; } div.light_rounded .pp_nav a.pp_arrow_previous, div.light_rounded .pp_nav a.pp_arrow_next { position: absolute; display: block; width: 51px; height: 51px; background: #f5f5f5; right: 0; } div.light_rounded .pp_nav a.pp_arrow_previous span, div.light_rounded .pp_nav a.pp_arrow_next span { display: block; position: absolute; width: 15px; height: 25px; background: url(../images/popup_controls_s.png) 0 0 no-repeat; top: 13px; left: 18px; } div.light_rounded .pp_nav a.pp_arrow_next span { background-position: right 0; } div.light_rounded .pp_nav a:hover { background: #fff; } .pp_nav a.pp_arrow_previous { right: auto; left: 0; } .pp_pic_holder.light_rounded .pp_expand { right: 53px; top: 0; background: #f7f7f7; width: 51px; height: 51px; text-align: center; text-indent: 0; } .pp_pic_holder.light_rounded .pp_expand span { display: inline-block; width: 25px; height: 25px; background: url(../images/lightbox_buttons_small.png) -25px 0 no-repeat; margin-top: 13px; } .pp_pic_holder.light_rounded .pp_expand:hover { background: #fff; } .pp_pic_holder .pp_content_container .pp_details { margin: 0; height: 51px; } .pp_overlay {cursor: pointer;} .pp_pic_holder #pp_full_res { line-height: 0 !important; } .pp_pic_holder .pp_content_container .pp_fade { padding-bottom: 51px; background: #fff; } .pp_pic_holder.light_rounded .pp_close, .pp_pic_holder.light_rounded .pp_contract { top: 0; right: 1px; width: 51px; height: 51px; background: #f7f7f7; text-align: center; text-indent: 0; } .pp_pic_holder.light_rounded .pp_contract { right: 53px; } .pp_pic_holder.light_rounded .pp_contract:hover { background: #fff; } .pp_pic_holder.light_rounded .pp_contract span { display: inline-block; width: 25px; height: 25px; background: url(../images/lightbox_buttons_small.png) 0 0 no-repeat; margin-top: 13px; } .pp_pic_holder.light_rounded .pp_close:hover {background: #fff;} .pp_pic_holder.light_rounded .pp_close span { display: inline-block; width: 25px; height: 25px; background: url(../images/lightbox_buttons_small.png) right 0 no-repeat; margin-top: 13px; } div.light_rounded .pp_description { font-size: 16px; line-height: 20px; color: #666; padding: 15px 20px 0 20px; } /**/ /** Map **/ .map_wrap { position: relative; } .map_wrap .map_overlay { z-index: 999; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/map_loader.gif) center center no-repeat #fff; } .map_wrap .address_block { position: absolute; bottom: 20px; left: 20px; height: 30px; background: #fff; font-size: 14px; line-height: 30px; color: #16a5d7; z-index: 500; font-weight: 700; padding: 0 12px; -webkit-box-shadow: -5px 9px 0 0 rgba(0,0,0,.2); -moz-box-shadow: -5px 9px 0 0 rgba(0,0,0,.2); box-shadow: -5px 9px 0 0 rgba(0,0,0,.2); } /*********/ .contacts_wrapper { position: relative; overflow: hidden; } .contacts_wrapper:after { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: #fff; content: ""; } .contacts_wrapper .col1 { float: left; width: 50%; } .contacts_wrapper .col1.fwidth { width: 100%; padding-bottom: 50px; float: none; } .contacts_wrapper .col2 { overflow: hidden; } .contacts_wrapper .col2 .inner { padding: 43px 50px 50px; } .contacts_wrapper .col1 { text-align: center; overflow: hidden; position: relative; z-index: 999; padding-top: 50px; } .qrcode_vcard .vcard_title { color: #16a5d7; font-weight: 700; font-size: 16px; line-height: 20px; margin-bottom: 16px; padding: 8px 10px 0; } #contact_form label { display: table; font-size: 16px; color: #333; line-height: 20px; margin-bottom: 6px; font-weight: 700; } #contact_form .field.message label { margin-bottom: 5px; } #contact_form .field { margin-bottom: 15px; } #contact_form .field.message { margin-bottom: 9px; } #contact_form input[type="text"], #contact_form textarea { padding: 10px 8px 10px; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; background: #fff; border: 2px solid #eeeeee; } #contact_form textarea { height: 112px; } #contact_form .button { overflow: hidden; } #contact_form .enter, a.button_link { float: right; background: #7caf00; padding-bottom: 2px; border-radius: 3px; font-size: 16px; line-height: normal; text-transform: uppercase; text-decoration: none; font-weight: 700; color: #fff; vertical-align: top; } a.button_link { display: inline-block; float: none; margin-right: 6px; } #contact_form .enter:active, a.button_link:active { -webkit-box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); -moz-box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } #contact_form .req { padding-top: 10px; overflow: hidden; font-size: 13px; line-height: 16px; font-style: italic; color: #999999; } form label.required { position: relative; } form label.required:after { content: "*"; position: absolute; top: -2px; right: -12px; color: #bc3a3a; font-size: 18px; line-height: 22px; font-weight: 400; } .contact_form h3 { margin-bottom: 24px; font-size: 23px; line-height: 28px; text-transform: uppercase; color: #16a5d7; font-weight: 700; } div.sc_infobox_style_error { padding: 20px; margin: 10px; color: #d29898; border: 1px solid #edcece; background: rgb(255,250,250); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,250,250,1) 0%, rgba(255,233,233,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,250,250,1)), color-stop(100%,rgba(255,233,233,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,250,250,1) 0%,rgba(255,233,233,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,250,250,1) 0%,rgba(255,233,233,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,250,250,1) 0%,rgba(255,233,233,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,250,250,1) 0%,rgba(255,233,233,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffafa', endColorstr='#ffe9e9',GradientType=0 ); /* IE6-9 */ } div.sc_infobox_style_success { padding: 20px; margin: 10px; color: #fff; background: #A8D324 } .author_info .addition { margin-bottom: 0; } #toTop { display: none; position: fixed; right: 50%; margin-right: -550px; bottom: 100px; width: 50px; height: 50px; background: url(../images/to_top.png) 0 0 no-repeat; } #toTop:hover { background-position: 0 -50px; } .patterns_select { clear: both; padding-bottom: 4px; overflow: hidden; } .patterns_select li { margin-left: 10px; float: left; width: 25px; -webkit-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); -moz-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); } .patterns_select li:first-child { margin-left: 0; } .patterns_select li a { height: 25px; display: block; overflow: hidden; } .patterns_select li a img { width: 100%; height: auto; } .bg_select { clear: both; overflow: hidden; padding-bottom: 4px; } .bg_select li { float: left; width: 47px; overflow: hidden; margin-left: 12px; -webkit-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); -moz-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); } .bg_select li:first-child { margin-left: 0; } .bg_select li a { display: block; height: 25px; } .bg_select li a img { width: 100%; height: auto; } #opt_block { position: fixed; top: 200px; right: -222px; width: 222px; background: #616161; } #opt_block ul { list-style: none; } #opt_block .opt_row { position: relative; z-index: 10; padding: 33px 28px 26px; overflow: hidden; } #opt_block .opt_row h3 { padding-top: 4px; float: left; color: #fff; font-size: 12px; line-height: 17px; text-transform: uppercase; } #opt_block .opt_row h3 + div { float: right; } #opt_block .opt_row.bg_color { background: #525252; } #opt_block .opt_row.bg_pat { padding: 15px 28px 19px; background: #424242; } #opt_block .opt_row.bg_img { padding: 15px 28px 19px; } #opt_block .opt_row.bg_pat h3 { margin-bottom: 6px; } #opt_block .opt_row.bg_img { background: #303030; } #opt_block .opt_header { position: relative; z-index: 4; background: #666666; height: 40px; -webkit-box-shadow: -37px 4px 0 0 rgba(0,0,0,.2); -moz-box-shadow: -37px 4px 0 0 rgba(0,0,0,.2); box-shadow: -37px 4px 0 0 rgba(0,0,0,.2); } #opt_block .opt_header span { cursor: pointer; background: url(../images/settings_icon.png) center center no-repeat #666666; display: block; position: relative; width: 40px; height: 40px; margin-left: -40px; overflow: hidden; } .colorpicker { z-index: 999; } #opt_block .colorSelector { background-image: url(../images/picker.gif); background-position: right bottom; background-repeat: no-repeat; -webkit-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); -moz-box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); box-shadow: 3px 4px 0 0 rgba(0,0,0,.1); width: 25px; height: 24px; } /******************/

Stylish, flat, easy customizable and awesome looking wordpress theme with original icons!

+123 456 789 111

J.johnson@gmail.com http://www.jjohnson.com

Employment

2005

2007

commodo consequat

Web Designer

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

2009

2012

sed do eiusmod

senior designer

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2012

present

commodo consequat

art director

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Education

2002

2005

consectetur adipisicing elit

Web design

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

2007

2009