@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,800,700);

body {background: #ffffff; color:#1d1d1d; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 13px; line-height: 17px;}
section, article, header, footer, nav, aside, hgroup { display: block; }

#cv_body{ height: 100%; width:100%; margin:0 auto; margin-top: 70px;}
.cv {width: 910px; background: #fff; margin:0 auto; border: 25px solid #ffffff; overflow:auto;}

.left {float:left; width:287px; padding:45px 0px 55px 45px;}
.right {float: right;padding:45px 45px 27px 0; width:533px;}
.title_selection {
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -1px;
	margin-bottom: 13px;
	line-height: 27px;
	color: #525252;
}
.subtitle_selection {
	font-weight: 100;
	font-size: 13px;
	letter-spacing: -0px;
	text-transform: none;
	color: #888888;
}
p {margin: 0px 0px 10px 0px }
p span {
	font-weight: bold;
	color: #525252;
}

#head {background-color: #eeeeee; height: 210px; padding-left: 45px; padding-right: 45px; border-bottom: 1px solid #898989;}
#head .me{ background: url('gfx/me.png'); height: 287px; width: 361px; position: absolute; margin-top: -77px; margin-left: 303px;}
.imie {font-weight: 900; font-size: 55px; width: 500px; letter-spacing: -3; line-height: 45px; padding-top: 63px;}
.imie span {color:#c1c1c1;}
.kim_jestem {font-size: 16px; text-transform: uppercase; padding-top:9px; padding-left: 3px; letter-spacing: -1px;}
.kontakt {float: right; margin-top: -155px;}
.kontakt ul {list-style: none; text-align: right;}
.kontakt li {font-size: 14px; line-height: 19px;}
.kontakt li a {color:#888888; text-decoration: none;}
.kontakt li a:hover {text-decoration: underline;}
.download_cv_button {color:#1d1d1d; height:27px; width: 160px; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-weight: 600; float: right; padding-top: 9px; margin-top: -5px;}
.download_cv_button_bottom {color:#1d1d1d; height:27px; width: 160px; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-weight: 600; float: left; padding-top: 9px; margin-top: -5px; margin-top: 17px;}
.download_cv_button, .download_cv_button_bottom {background: url('gfx/icon_download.png') #D2D2D2 20px; background-position: 18px 11px; background-repeat: no-repeat;}
.download_cv_button span, .download_cv_button_bottom span {margin-left: 45px;}
.download_cv_button:hover,  .download_cv_button_bottom:hover {background: url('gfx/icon_download.png') #1d1d1d; background-position: 18px -25px; background-repeat: no-repeat; color:#fff;}
.kontakt_icon { float: right; margin-bottom: -8px}
.kontakt_icon ul {list-style: none; width: 98px; height: 19px; float: right;}
.kontakt_icon li {float: left;  background: url('gfx/icon.png')}
.kontakt_icon li.facebook { width: 19px; height: 19px; margin-right: 7px;}
.kontakt_icon li.facebook:hover { width: 19px; height: 19px; margin-right: 7px; background-position: 0px -20px;}
.kontakt_icon li.twitter { width: 19px; height: 19px; background-position: 74px 0px; margin-right: 7px;}
.kontakt_icon li.twitter:hover { width: 19px; height: 19px; margin-right: 7px; background-position: 74px -20px;}
.kontakt_icon li.dribbble { width: 19px; height: 19px; background-position: 46px 0px; margin-right: 7px;}
.kontakt_icon li.dribbble:hover { width: 19px; height: 19px; background-position: 46px -20px; margin-right: 7px;}
.kontakt_icon li.instagram { width: 19px; height: 19px; background-position: 18px 0px;}
.kontakt_icon li.instagram:hover { width: 19px; height: 19px; background-position: 18px -20px;}

#head_night {background: url('gfx/head_night_bg.jpg') #eeeeee; height: 230px; padding-left: 45px; padding-right: 45px; border-bottom: 1px solid #898989; color:#ffffff}
#head_night .me{ background: url('gfx/me_night.png'); height: 308px; width: 358px; position: absolute; margin-top: -77px; margin-left: 276px;}
#head_night .imie {
	font-weight: 900;
	font-size: 55px;
	width: 500px;
	letter-spacing: -3;
	line-height: 50px;
	padding-top: 67px;
	color: #525252
}
#head_night .imie span {
	color: #BBB9B5;
}
#head_night .kim_jestem {
	font-size: 16px;
	text-transform: none;
	padding-top: 9px;
	padding-left: 3px;
	letter-spacing: -1px;
	color: #a5a5a5
}
.download_cv_button:hover {background: url('gfx/icon_download.png') #ffffff; background-position: 18px 11px; background-repeat: no-repeat; color:#1d1d1d;}
.kontakt {float: right; margin-top: -80px;}
.kontakt_icon { float: right; margin-bottom: -8px}
.download_cv_button {color:#1d1d1d; height:27px; width: 160px; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-weight: 600; float:left; padding-top: 9px; margin-top: -3px;}
.kontakt_icon li {float: left;  background: url('gfx/icon_2.png')}
#head_night .kontakt li a:hover {color:#FF0004}


#head_two {background: url('gfx/head_night_bg.jpg') #eeeeee; height: 230px; padding-left: 45px; padding-right: 45px; border-bottom: 1px solid #898989; color:#ffffff}
#head_two .me_two{background: url('gfx/me_two.png'); height:146px; width: 111px; border: 3px solid #eeeeee; position: absolute; margin-top: 41px;}
#head_two .imie {font-weight: 900; font-size: 55px; width: 500px; letter-spacing: -3; line-height: 50px; padding-top: 67px; color:#ffffff; margin-left: 138px;}
#head_two .imie span {color:#898989;}
#head_two .kim_jestem {font-size: 16px; text-transform: uppercase; padding-top:9px; padding-left: 3px; letter-spacing: -1px; color:#a5a5a5; margin-left: 138px;}
#head_two .kontakt {float: right; margin-top: -93px;}
#head_two .kontakt li a:hover {color:#D2D2D2}

#personal_info {background: #fff; height: 440px; border-bottom: 1px solid #898989; display: inline-block;}

#skills {background: #fff; border-bottom: 1px solid #898989; display: inline-block;}
.skills_tab {margin-top: 40px; margin-bottom: 170px; }
.skills_tab ul {list-style: none; margin-left: -40px; width:533px;}
.skills_tab li {float: left; margin-right: 25px; margin-bottom: 20px; line-height: 22px;}
.skills_tab li.last { margin-right: 0px}
.skills_bg_grey {height: 9px; width: 160px; -moz-border-radius: 4px; border-radius: 4px; background: #eeeeee;}
.progressbar{ position:absolute; display:block; width:160px; height:9px; padding:0px 2px; margin-top: -10px;}
.bar {position:absolute; display:block; width:0px; height:5px;	top:12px; background: #898989; -webkit-border-radius:2px; border-radius:2px; }

#doswiadczenie {background: #fff;  border-bottom: 1px solid #898989; display: inline-block;}
#doswiadczenie ul {list-style: none; margin-left: -40px; margin-top: 0px;}
#doswiadczenie li {border-bottom: 1px solid #dbdbdb; padding-bottom: 25px; margin-bottom: 25px;}
#doswiadczenie li.last {border-bottom: 1px solid #fff; padding-bottom: -25px; margin-bottom: 25px;}
.portfolio_url {background: #898989; padding: 2px 5px 2px 5px; position: absolute; font-size: 10px; font-weight: 900; text-transform: uppercase; color:#1d1d1d; margin-left: 111px; margin-top: -19px;}
.portfolio_url2 {background: #898989; padding: 0px 4px 0px 4px; position: absolute; font-size: 10px; font-weight: 900; text-transform: uppercase; color:#1d1d1d; margin-left: 76px; margin-top: -16px;}
.portfolio_url2:hover, .portfolio_url:hover {background: #1d1d1d; color: #fff;}
.firma {
	font-size: 15px;
	font-weight: 900;
	text-transform: uppercase;
	color: #525252;
}
.typ_firmy {font-weight: 100; font-size: 12px; text-transform: uppercase; color: #888888;margin-bottom: 21px; margin-top: 3px;}
.opis {display: inline-block;}
.detalis {width:266px; float: left; }
.detalis span {
	font-weight: bold;
	color: #525252;
}
.desc {width: 266px; float: right;}

#edukacja {background: #fff;  border-bottom: 1px solid #898989; display: inline-block;}
#edukacja ul {list-style: none; margin-top: 0px; margin-left: -40px;}
#edukacja li {border-bottom: 1px solid #dbdbdb; margin-bottom: 25px;}
#edukacja li.last {border-bottom: 1px solid #ffffff; margin-bottom: 25px;}
.szkola {
	font-size: 15px;
	font-weight: 900;
	text-transform: uppercase;
	color: #525252;
}
.rocznik {font-size: 12px; color:#888888; margin-top: 3px; margin-bottom: 8px;}
.szkola_info {margin-bottom: 25px; }

#projects {background: #fff;  border-bottom: 1px solid #ffcc00; display: inline-block;}
#projects ul {list-style: none; margin-top: 0px; margin-left: -40px; display: inline-block;}
#projects li {background: #ffcc00; height: 119px; width: 119px; float: left; margin-bottom: 19px; margin-right: 19px;}
#projects li.last {margin-right: 0px;}
#projects li.big {height: 257px; width: 257px; margin-right: 0px;float: right;}
div.image {position: relative; overflow: hidden; width: 119px; height: 119px; display: inline-block; margin-right: 15px; margin-bottom: 15px;}
div.image img {position: absolute; left: 0; top: 0; -webkit-transition: all .1s ease-out;	-moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;}
span.title {width: 150px; height: 20px; position: absolute;	background: rgba(30,30,30,0.6);	text-align: center;	padding: 5px 0 4px;	font-size: 14px; color: white; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;}

div.image.slideBottom span {height: 110px;	width: 119px; bottom: -119px; right: 0px;}
div.image.slideBottom:hover img {top: 0px; cursor: pointer;}
div.image.slideBottom:hover span {bottom: 0px;	right: 0px;cursor: pointer;}
.link-view {height: 30px; margin-top: 45px;}
.link-view-big {height: 30px; margin-top: 112px;}
.link-view span.link, .link-view-big span.link {padding: 5px 14px 5px 14px; background: url('gfx/icon.png') #898989; background-position: 27px 58px;border-radius:3px; }
.link-view span.link:hover, .link-view-big span.link:hover {padding: 5px 14px 5px 14px; background: url('gfx/icon.png') #ffffff; background-position: 27px 58px;border-radius:3px; }
.link-view span.view, .link-view-big span.view {padding: 5px 14px 5px 14px; background: url('gfx/icon.png') #ffcc00; background-position: 28px 32px;border-radius:3px; }
.link-view span.view:hover, .link-view-big span.view:hover {padding: 5px 14px 5px 14px; background: url('gfx/icon.png') #ffffff; background-position: 28px 32px;border-radius:3px; }
/* for big one */
div.imageBig {position: relative; overflow: hidden; width: 257px; height: 257px; display: inline-block; margin-right: 15px; margin-bottom: 15px;}
div.imageBig img {position: absolute; left: 0; top: 0; -webkit-transition: all .1s ease-out;	-moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;}
span.title {width: 150px; height: 20px; position: absolute;	background: rgba(30,30,30,0.8);	text-align: center;	padding: 5px 0 4px;	font-size: 14px; color: white; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;}
div.imageBig.slideBottom span {height: 257px;	width: 257px; bottom: -267px; right: 0px;}
div.imageBig.slideBottom:hover img {top: 0px; cursor: pointer;}
div.imageBig.slideBottom:hover span {bottom: 0px;	right: 0px;cursor: pointer;}


#kontakt {background: #fff;  border-bottom: 1px solid #ffcc00; display: inline-block;}
#contact-form fieldset{border: none; padding: 0;  position: relative; vertical-align: top; width: 100%; z-index: 1;}
form .empty, .error{font-size: 11px; color:#ed1c24; font-weight: 600; }
form a{text-decoration: none}
form a:hover {text-decoration:underline}
.form {width:420px; float: left;}
.inputs {height: 34px; width: 268px; background: #fafafa; border: 2px solid #898989; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-style: italic; padding-left: 10px; margin-bottom: 7px;margin-left: -2px;}
.wszystkie_pola {font-size: 11px;}
.success {margin-bottom: 10px;}
.textarea {background: #fafafa; border: 2px solid #898989; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-style: italic; padding-left: 10px; margin-bottom: 9px; padding:7px; margin-left: -2px;}
.wyslij {height: 30px; width: 138px; -moz-border-radius: 6px; border-radius: 6px; font-size: 13px; font-weight: 600; float: left; padding-left: 55px; padding-top: 10px; margin-top: 0px; border:0px; cursor: pointer}
.wyslij {background: url('gfx/icon_mail.png') #D2D2D2; background-position: 18px 12px; background-repeat: no-repeat; color: #1d1d1d; }
.wyslij:hover {background: url('gfx/icon_mail.png') #FFFFFF; background-position: 18px 12px; background-repeat: no-repeat; color: #1d1d1d; }
.more {width:226px; float: right;}
.more_title {font-weight: 900; font-size: 15px; margin-bottom: 10px;}
.buttons2 {margin-top: -5px;}

#odstep {height: 50px;}