/*
Theme Name: przemekzakoscielny.com
Author: przemekzakoscielny.com
Author URI: http://przemekzakoscielny.com/
Description: A semantic and responsive theme created for Przemek Zakoscielny portfolio.
Version: 1.0
*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
th,td{text-align:left;vertical-align:top;}
a:focus { outline: none; } a:hover, a:active { outline: 0; }
html { font-size: 100%; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
img { border: 0; height: auto; -ms-interpolation-mode: bicubic; }
img, object, embed { width: auto; max-width: 100%; }
a img { border: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
strong { font-weight: bold; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
table { border-collapse: collapse; border-spacing: 0; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }
.hide {display: none;}
.alert {display: block; color: red; margin-bottom: 20px;}
.alert a {color: white; text-decoration: underline;}
/* web fonts */


/* general */

body {background: #535353; font-family: verdana,arial,sans-serif; font-size: 12px; color: white;}
body .content {width: 960px; margin: 0 auto;}
a {text-decoration: none;}
.last {margin-right: 0px !important;}
.clear {clear:both;}
.light-green {color: #16e3b0;}
.h50 {clear: both; height: 50px;}

/*content*/

/*header*/
body .content .header {padding: 25px 0px 40px 0px; position: relative;}
body .content .header .logo {display: block; width: 355px; height: 54px; background: url(http://przemekzakoscielny.com/images/css/img/logo.png) no-repeat;}
body .content .header .logo:hover {background: url(http://przemekzakoscielny.com/images/css/img/logo.png) no-repeat 0px -54px;}

.main-menu {list-style: none; position: absolute; top: 33px; right: 0px;}
.main-menu li {float: left; margin-right: 35px;}
.main-menu li.selected a {color: #16e3b0; text-decoration: underline;} 
.main-menu li a {color: white; font-size: 18px;}
.main-menu li a:hover {color: #16e3b0; text-decoration: underline;}

/*home*/
body .content .body_content .about-link {display: block; width: 960px; height: 384px; overflow:hidden;}
body .content .body_content .about-link:hover img {margin-top: -384px;}
body .content .green-label {color: #535353; background: #16e3b0; padding: 6px 10px 6px 10px; display: inline; font-size: 14px;}

/*---------projects------*/
body .content .projects {margin-bottom: 60px;}
body .content .projects .see-more {float: right; font-size: 14px;}
body .content .projects .project {display: block; float: left; width: 320px; height: 200px; overflow:hidden;}
body .content .projects .project:hover img {margin-top: -200px;}

/*---------contact------*/
body .content .contact .info-text {width: 480px; float: left; font-size: 16px; line-height: 22px;}
body .content .contact .info-text .mail-link {}
body .content .contact .contact-form {width: 480px; float: left;}
body .content .contact, body .content .clients {padding-top: 35px; padding-bottom: 65px;}
body .content .contact .contact-form input {width: 425px; padding-left: 20px; margin-bottom: 13px; color: white; height: 35px; background: #424141; border: 1px solid #16e3b0; font-size: 14px;}
body .content .contact .contact-form textarea {width: 425px; padding-left: 20px;  margin-bottom: 13px; color: white; height: 110px; padding-top: 10px; background: #424141; border: 1px solid #16e3b0; font-size: 14px; resize: none;}
body .content .contact .contact-form input.submit {float: right; cursor: pointer; color: #535353; height: 25px; margin-right: 35px; background: #16e3b0; padding: 0px 10px 2px 10px; width: 50px;}
body .content .contact .contact-form input.submit:hover {background: black; color: white;}
body .content .contact .contact-form .mail_info {display: none;}

/*---------client------*/
body .content .clients {margin-bottom: 75px; margin-top: 10px;}
body .content .clients .client {display: block; float: left;}

/*---------contact page-------*/
.contact_text {font-size: 16px; padding-bottom: 50px; padding-top: 25px; border-top: 1px solid white;}
.contact_text a {color: white;}
.contact_text a:hover {color: white; text-decoration: underline;}

/*---------client page-------*/
#clients .logo_holder {width: 318px; height: 318px; float: left; border: 1px dashed white; border-right: none; border-bottom: none;}
#clients .logo_holder.c3 {border-right: 1px dashed white;}
#clients .logo_holder.last {border-bottom: 1px dashed white;}

/*---------portfolio page-------*/
#portfolio .projects {margin-bottom: 50px;}
#portfolio .projects .project {float: none !important;}
#portfolio .filters {float: left; margin-bottom: 25px;}
#portfolio .filters * {float: left;}
#portfolio .filters a {display: block; float: left; margin-left: 15px; color: #16e3b0; }
#portfolio .filters a.active {color: white;}
#portfolio .filters a.active, #portfolio .filters a:hover {text-decoration: underline;} 


/*---------portfolio_single page-------*/
#portfolio_single .photos {float: left; width: 628px; padding-right: 10px; border-right: 1px solid white; min-height: 550px; margin-bottom: 50px;}
#portfolio_single .info {float: left; width: 310px; padding-left: 10px;}
#portfolio_single .info span {float: left; margin-bottom: 5px;}
#portfolio_single .info .light-green {padding-right: 4px;}
#portfolio_single .photos img {margin-bottom: 10px;}

/*---------about page-------*/
#about .header {font-size: 16px; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid white;}
#about .section {font-size: 14px; line-height: 20px; margin-bottom: 25px;}
#about .cv_link {display: block; float: left; margin-bottom: 50px;}
#about .cv_link:hover {background: white;}
#about .column {float: left; font-size: 14px; line-height: 20px; margin-bottom: 25px;}
#about .column span {float: left;}
#about .column .light-green {padding-right: 5px;}
#about .column.date {width: 200px; float: left;}
#about .column.we {width: 700px; float: left;}
#about .column.fd, #about .column.bd {width: 450px;}
#about .column.companies, #about .column.agencies {width: 450px; margin-bottom: 0px !important;}
#about .column .sh {margin-bottom: 10px; float: left;}
#about .column .sub_header {margin-bottom: 15px; margin-top: 15px; text-decoration: underline;}
.ml20 {margin-left: 20px;}

/*footer*/
body .footer {height: 110px; background: #424141; padding-top: 30px;}
body .footer .wrap {width: 960px; margin: 0 auto;}
body .footer .social {display: block; width: 139px; height: 33px; margin-bottom: 10px;}

body .footer .social.golden_line {background: url(http://przemekzakoscielny.com/images/css/img/icon_goldenline.png) no-repeat;}
body .footer .social.golden_line:hover {background: url(http://przemekzakoscielny.com/images/css/img/icon_goldenline.png) no-repeat 0px -33px;}
body .footer .social.linkedin {background: url(http://przemekzakoscielny.com/images/css/img/icon_linked_in.png) no-repeat;}
body .footer .social.linkedin:hover {background: url(http://przemekzakoscielny.com/images/css/img/icon_linked_in.png) no-repeat 0px -33px;}


/**** Isotope Filtering ****/

.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;
}

.navigation {margin-top: 100px; border-top: 1px solid white; padding-top: 5px;}
.navigation a {color: white; text-decoration: none;}
.navigation a:hover {color: #16e3b0;}
.navigation a.prev {float: left;}
.navigation a.next {float: right;}