/*
Theme Name: Portfolio Paweł Jaczewski
Theme URI: http://www.opluta.pl/
Author: Paweł Jaczewski
Author URI: http://www.opluta.pl/
Description: A portfolio theme made for myself.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Portfolio Paweł Jaczewski
*/
/* -----------------------------------------------*/
/* BASIC SETUP */
/* -----------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*::-moz-selection {
	background: #ff0000;
	color: #fff;
}
*::selection {
	background: #ff0000;
	color: #fff;
}


/*
@font-face {
    font-family: 'Chivo';
    src: url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-Black.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-Black.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-BlackItalic.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-BoldItalic.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-Italic.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-Light.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-LightItalic.ttf') format('truetype'),
	url('wp-content/themes/PawelPortfolioWPTheme/vendors/fonts/Chivo-Regular.ttf') format('truetype'),	
	 }
*/

html,
body {
    background-color: #fff;
    color: #000;
    font-family: 'Chivo', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
	/*margin-top: 0!important;*/


}
body {	height: 100%;
		min-height: 100vh;
		position: relative;
		padding-bottom: 65px;
}

.long-page body {
	padding-bottom: 0;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row {
    width: 100%;
    margin: 0 auto;
}
.full-width {
    max-width: 100%;
}

.invisible {
    display: none;
}
.visible {
    display: block;
}


/* ----- HEADINGS ----- */
h1,
h2,
h3 {display: block;}


h1 {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    color: #000;
    font-size: 100%;
}

h2 {
    font-size: 100%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
}

h3 {
    font-size: 100%;
    margin-bottom: 15px;
    margin-top: 30px;
}

/*------LINKS-------*/




a:link,
a:visited {
	color: #000;
   	text-decoration: none;
    text-transform: none;
    font-size: 100%;
}


a:hover {
    color: #ff0000;
}
a:active {
    color: #ff0000;
}

/*Linki dla strony projketu*/


.long-page a:link,
.long-page a:visited {
	text-shadow:
    -1px -1px white,
    -1px 1px white,
    1px -1px white,
    1px 1px white;
	background-size: 1px 1em;
  	box-shadow:
    	inset 0 -0.1em white,
    	inset 0 -0.2em red;
  	display: inline;
	
	
	/*
	/*regulowanie podkresleniem. 
	display: inline-block;
	border-bottom: 2px solid red;
	margin-bottom: -1px;
	line-height: 0.80;
	/*pozostały wygląd linku
	text-indent: 0;
	color: #000;
   text-decoration: none;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
    text-transform: none;
    font-size: 100%;
	/*przerywanie podkreślenia
    text-shadow: -1px 0  #FFF, -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF,
      1px 0 #FFF, 1px 1px #FFF, 0 1px #FFF
	*/
}



.long-page a:active,
.long-page a:hover {
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
	/*
	border-bottom: 2px solid #FFF;
    color: #ff0000;
    text-decoration: none;
    text-transform: none;
	*/
}

.wp-caption-text a:link,
.wp-caption-text a:link{
	  	box-shadow:
    	inset 0 -0.025em white,
    	inset 0 -0.1em red;
}

.wp-caption-text a:active,
.wp-caption-text a:hover{
	  	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
}



/*Linki dla strony czarnej*/
.page-template-black-template a:link,
.page-template-black-template a:visited {
	color: #fff;
	text-shadow:
    	-1px -1px black,
    	-1px 1px black,
    	1px -1px black,
    	1px 1px black;
	background-size: 1px 1em;
  	box-shadow:
    	inset 0 -0.1em black,
    	inset 0 -0.2em red;
  	display: inline;
	/*
	color: #fff;
   	display: inline-block;
	border-bottom: 2px solid red;
	margin-bottom: -2px;
	text-indent: 0;
   	text-decoration: none;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
    text-transform: none;
    font-size: 100%;
    text-shadow: 
		-2px 0 #000, 
		0 1px #000,
      	2px 0 #000, 
		0 -1px #000;
	*/
}

.page-template-black-template a:active,
.page-template-black-template a:hover {
	color: #ff0000;
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
	/*
    color: #ff0000;
	border-bottom: 2px solid #000;
    text-decoration: none;
    text-transform: none;
	*/
}
/*
.page-template-black-template a:active {
	
	 color: #ff0000;
	border-bottom: 2px solid #000;
    color: #ff0000;
    text-decoration: none;
    text-transform: none;
	
}
*/
.page-template-black-template nav a:link,
.page-template-black-template nav a:visited {
	color: #fff;
	border-bottom: 2px solid #000;
	text-decoration: none;
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
}
.page-template-black-template nav a:hover,
.page-template-black-template nav a:active {
	color: #ff0000;
	border-bottom: 2px solid #000;
	text-decoration: none;
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
}

.page-template-black-template footer a:link,
.page-template-black-template footer a:visited {
	color: #fff;
	border-bottom: 2px solid #000;
	text-decoration: none;
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
}

.page-template-black-template footer a:hover,
.page-template-black-template footer a:active {
	color: #ff0000;
	border-bottom: 2px solid #000;
	text-decoration: none;
	box-shadow:
    	inset 0 0 white,
    	inset 0 0 red;
}
	

/*------------------------*/
/*--------MENU------------*/
/*------------------------*/

nav {
    position:fixed;
    width: 100%;
    z-index: 999;
    /*overflow: hidden;*/
    }


.logo-space {
    float: left;
}


.logo{
    display: inline-block;
    float: left;
    font-weight: 400;
    margin-top: 12px;
	margin-left: 2.7%;/*wyrownanie do granicy zdjec w gridzie*/
}
.menu-space{
    background-color: #FFF; 
    position: relative;
    max-width: 100%;
    height: 48px;
    border-bottom: 2px solid #BFBFBF;
    padding-left: 1.4%;
    padding-right: 1.4%; 
}

/* Class below is added to menu item which is a current page*/
.current_page_item a {
	color: red!important;
}

/*Main nav - WP*/
.main-nav ul {
	display: block;
	list-style: none;
    margin-top: 12px;
	min-width: 150px; /*szerokość menu musi być minimum około 150 aby wpisy się nie zawijały jeden pod drugim*/
	float:right;
    /*margin-bottom: 80px;
    overflow: visible;*/
	margin-right: 2.7%;
}

.main-nav li {
	display: inline-block;
    margin-left: 50px;
}


/*przesuniecie od krawedzi row, ktory ma swoj padding ustawiony na 1.4%. 
 * Poniewaz float right odwraca kolejnosc elementow li to nie last a first-child
 * musi otrzymac margin-right, który dodatkowo o 2.7% odsuwa element menu*/

.main-nav ul ul li.current-menu-item a,
.main-nav a:hover {
	color: red;
}

/*sum-menu of first level*/
.main-nav ul ul{
	display: block;
	position: absolute;
	background-color: #FFF;    
    text-align: right;
    float: right;
    height: auto;
    width: 100%;
    top: 48px;
    right:0px;
    border-bottom: 2px solid #BFBFBF;
	padding-bottom: 12px; 
}
/*Kod ponizej pozwala wyświetlić submenu po najechaniu na parent-element
.main-nav ul li:hover > ul{
	display: block;
}
*/

.external-link-icon{
	background-image: url('https://paweljaczewski.com/wp-content/uploads/external-link-icon.svg');
	background-repeat: no-repeat;
}
.page-template-black-template .external-link-icon {
	background-image: url('https://paweljaczewski.com/wp-content/uploads/external-link-icon_white.svg');
}

.page-template-black-template .external-link-icon:hover,
.external-link-icon:hover {
	background-image: url('https://paweljaczewski.com/wp-content/uploads/external-link-icon_red.svg');
	color: red;
}




@media only screen and ( min-width: 951px ){ 
	.external-link-icon{
		padding-right: 24px;
		background-position: 178px 4px;
	}
}

/*----------------------------------------*/
/*--------------MOBILE MENU---------------*/
/*----------------------------------------*/

.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}
.mobile-nav-icon i {
    font-size: 150%;
    color: #000;
}

.page-template-black-template .mobile-nav-icon i {
    font-size: 150%;
    color: #FFF;
}

@media only screen and ( max-width: 950px ){ 
    body{
        font-size: 100%;
    }

    .logo-space {
        width: 100%; /* 305px */
		/*border-bottom: 1px solid #BFBFBF;*/
    }
	
	.menu-space .span-1-of-2 {
		width:100%;
	}
	.menu-space .col {margin: 0;}
	.menu-space{
		border-bottom: 1px solid #BFBFBF;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
        float: right;
        margin-bottom: 0px;
		background-color: #FFF;
    }
	.page-template-black-template .menu-space{background-color: #000;}
    h1 {margin: 0px 0px 10px 0px;
        font-weight: 100;   
    }  
    .logo {
        padding-left: 1.3%;
        padding-top: 4px;
        padding-bottom: 0px
    }

    nav {
        position: fixed;
        z-index: 999;
        overflow: visible;
		background-color: #FFF;
    }
    .menu {
    overflow: visible;
    max-width: 100%;
    height: 45px;
    padding-left: 0%;
    padding-right: 0%; 
    margin-bottom: 20px;
    border-bottom: 0px solid #BFBFBF;
}
    
	.mobile-nav-icon {
        display: block;
        margin-top: 10px;
        margin-right: 4%;
        font-weight: 100;
    }
    .ion-ios-close-empty {
        width: 50px;
    }
	.main-nav ul {
    display: none;
    position: relative;
    overflow: visible;
    z-index:999;
    background-color: #FFF;
    width: 100%;
    margin-left: 0%;
    float: left;
    margin-top: 0px;/*-1*/
    margin-bottom: 0px;
	  
    }
    .main-nav li {
        display: block;
		float: left;
        position: relative;
		background-color: #FFF;
        width: 100%;
        margin-left: 0px;
        margin-bottom: 0px;
        margin-top: 0px;
        padding-left: 0px;
		text-align: left;}
	.page-template-black-template .main-nav li {background-color: #000; border-bottom: 1px solid #BFBFBF;}
	.main-nav li:first-child {
	margin-right: 0%;
	
}
	
    .main-nav ul ul{
		position: relative;
		top: 0;
    }
	
      .main-nav ul ul {
    position: relative;
    text-align: right;
    float: right;
    width: 100%;
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #BFBFBF;
    margin-left: -50px;
	padding-bottom: 0;
    }
    
    .main-nav ul ul li {
    margin-left: 0px;
    text-indent: 40px;
            overflow: visible;
    }
    
    

    .main-nav li a:link,
    .main-nav li a:visited {
		text-decoration: none;
        display: block;
        height: 40px;
        width: 100%;
        float: left;
        border: 0;
        padding: 12px 0px 0px 4%;
        font-size: 100%;
        border-bottom: 1px solid #BFBFBF;
        padding: auto 0 auto 15;
    }
	
	.external-link-icon {
/*   		background-attachment: fixed; */
		background-position: 210px 16px;
	}
  

}

/*----------------------------------------*/

.red {
    color: #FF0000;
}

.black {
    color: #000;
}

.blue {
    color: #001dff;
}
.small{
    font-size: 100%;
}

.visible {
    display: block;
}

.invisible {
    display: none;
}


/*----------------------------------*/
/*------------  LAYOUT  ------------*/
/*----------------------------------*/
/*#list
{   background-color: none;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 0; /* 30px -1.875em/
    -webkit-column-count: 4;
    -webkit-column-gap: 1.875em; /* 30px /
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 1.875em; /* 30px /
    -moz-column-fill: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    column-gap: 1.875em; /* 30px /
    column-fill: auto;
}
    .item
    {
        background-color: gray;
        margin-bottom: 1.875em; /* 15px 30px 1.875em/
        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera /
        page-break-inside: avoid; /* Firefox /
        break-inside: avoid; /* IE 10+ /
        
    }
    
    
    
.item img {
    width: 100%;
    height: auto;
    vertical-align: bottom;

    
}


 
@media only screen and ( max-width: 40em ) /* 640px /
{
    #list
    {
        -webkit-column-count: 3;
        -webkit-column-gap: 0.938em; /* 15px /
        -moz-column-count: 2;
        -moz-column-gap: 0.938em; /* 15px /
        -webkit-column-count: 2;
        column-count: 2;
        column-gap: 0.938em; /* 15px /
    }
        .item
        {
            margin-bottom:0.938em ; /* 15px  0.938em/
        }
}
@media only screen and ( max-width: 20em ) /* 320px /
{
    #list
    {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }
}
*/


/*----------------------------------------*/
/*--LAYOUT ROZWIAZANIE MASONRY JQUERY-----*/
/*----------------------------------------*/


#wrapper
{
 max-width: 97.2%;
 margin: 90px auto 20px auto;
 
}
@media only screen and ( max-width: 570px ){ 
    #wrapper {
        max-width: 90%;
        margin: 70px auto;
}
}

.grid {
    width: 100%; /* 990px */
    overflow: hidden;
    margin: 0 auto;
	padding: 30px 0 0 0;
    }
@media only screen and ( max-width: 950px ){
	.grid {padding: 0}
}

    .grid-sizer,
    .grid-item {
        width: 22.4%;
        /*float:right;*/
        margin: 0 1.3% 0 1.3%; /* 15px 30px // 1.515% 1.875em*/
    }
/*
@media only screen and ( max-width: 570px ){
    .grid-sizer,
    .grid-item {
        width: 22.5%;
        /*float:right;
        margin: 0 1% 0 1.3%; /* 15px 30px // 1.515% 1.875em
    }

        
    }*/


    .grid-item--width2 { width: 47.4%; }
    .grid-item--height2 { height: 200%; }
        
.grid:after {
  content: '';
  display: block;
  clear: both;
}

        .grid-item img {
            width: 100%;
            height: auto; 
            margin: 0 auto;
            float: none;
}

/* to narazie wyłączam bo to było pujscie na latwizne
@media only screen and ( max-width: 570px ){ 
    .grid-item img {
        width: 95%;
        margin: 0 0 0px 2px;
    }
        
    }
*/

 
@media only screen and ( max-width: 640px ) /* 640px 40em */
{
    .grid-item
    {
        width: 44%; /* 305px */
        margin: 0 3% 20px 3%; /* 15px */
    }
}
@media only screen and ( max-width: 320px ) /* 320px   20em  */
{
    .grid {
        width: 100%;
        margin-left: 0;
    }
        .grid-item {
            width: 96%;
            margin-left: 2%;
            margin-right: 2%;
        }
}


.project-title {
    font-size: 14px;
	font-weight: 300;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #000;
}

/*--------------------------------------------------*/
/*----------------------FOOTER----------------------*/
/*--------------------------------------------------*/


footer {
	position: absolute;
  	right: 0;
  	bottom: 0;
  	left: 0;
    margin: 0 auto 0 auto;
    border-top: 2px solid  #BFBFBF;
    width: 100%;
    /*position: relative;*/
    height: 45px; 
}
footer .row {
	padding: 0;
}

footer .col {
    margin-bottom: 0;
    margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}


.social-place ul {
    list-style: none;
    margin-left: 0px;
}

.social-place li {
    display: inline-block;
    margin-left: 50px;
    margin-top: 10px
} 
.social-place li:first-child {
    margin-left: 4%; /* 1.85% kolumny zajmujacej 9/12 rzędu daje mniej wiecej 1.3% całego rzędu */
} 
@media only screen and ( max-width: 570px ){ 
	.social-place li:first-child {
		margin-left: 4%;
}}



.social-place {
    float: left;
}

footer a:link, 
footer a:visited {
    color: #000;
    text-decoration: none;
    text-transform: none;
    font-size: 100%;
}


footer a:hover {
    color: #ff0000;
    text-decoration: none;
    text-transform: none;
}
footer a:active {
    color: #ff0000;
    text-decoration: none;
    text-transform: none;
}

.contactTest{
    margin-left: 30%;
    margin-top: 30vh;
    
}

.codedby {
    text-align: right;
    margin-right: 5.5%;
    margin-top: 10px    
}
@media only screen and ( max-width: 570px ){ 
    
    .codedby {
        text-align: left;
        margin-left: 4%;
        margin-top: 10px ;
        margin-bottom: 10px;
}
    .social-place{
        width: 100%
    }
    
    .social-place li {
    display: inline-block;
    margin-left: 20px;
    margin-top: 10px
} 
}

@media only screen and ( max-width: 950px ){ 
    footer {
    border-top: 1px solid  #BFBFBF;
    width: 100%;
    height: 45px;
    
}
        
    }

/*Sticky footer na stronie projektu*/


.sticky-project-footer {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index: 10
}

/*-------------------------------------------------*/
/*--------------Project site --LONG-PAGE----------*/
/*-------------------------------------------------*/
.long-page {
	max-width: 1680px;
	position: relative;
	margin: 100px auto 0 auto;
}

.long-page .project-title {
	font-weight: 400;
	font-size: 20px;	
    width: 40%;
	margin: 50px auto;
}
@media only screen and ( max-width: 950px ){
	.long-page .project-title {
		width: 65%;
	}}

.project-lead {
    width: 40%;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	margin: 20px auto;
}
@media only screen and ( max-width: 950px ){
	.project-lead  {
		width: 75%;
	}}

.description-text-long-indent {
    width: 50%;
	font-weight: 300;
	margin: 20px auto;
	text-indent: 32px;
	line-height: 24px;
}
@media only screen and ( max-width: 950px ){
	.description-text-long-indent   {
		width: 85%;
	}}
.description-text-long{
	width: 50%;
	font-weight: 300;
	margin: 20px auto;
	font-size: 18px;
	line-height: 24px;
}
 @media only screen and ( max-width: 950px ){
	.description-text-long   {
		width: 85%;
	}}

.project-specifications-indent {
    width: 50%;     
	font-size: 14px;
	font-weight: 300;
	margin: 0 auto;
	line-height: 24px;
	text-indent: 32px;
}


@media only screen and ( max-width: 950px ){
	.project-specifications-indent {
		width: 85%;
	}}

.project-specifications-tabed {
	width: 50%;
	font-size: 14px;
	font-weight: 300;
	margin: 0 auto;
	line-height: 24px;
	padding-left: 40px;
}
@media only screen and ( max-width: 950px ){
	.project-specifications-tabed {
		width: 85%;
	}}


.project-specifications{
    width: 50%;
	font-size: 14px;
	font-weight: 300;
	margin: 0 auto;
	line-height: 24px;
     
}
@media only screen and ( max-width: 950px ){
	.project-specifications {
		width: 85%;
	}}

/*klasa opisujaca wyglad linii podziału*/
hr {
	width: 500%;
	height: 2px;
	border: 0;
	background: #BFBFBF;
	margin: 60px 0px 60px -200%;
	overflow: visible;
}
@media only screen and (max-width: 950px) {
	hr { height: 1px;}
}

.division-line {
	width: 100%;
	height: 2px;
	border: 0;
	background: #BFBFBF;
	margin: 60px 0;
}


.click-next-project{
    text-align: right;
    margin-left: 0%;
    float: right;
	padding-right: 20px;
	margin-top: 10px;
}
.click-previous-project{
    text-align: left;
    margin-right: 0%;
    float: left;
	padding-left: 20px;
	margin-top: 10px;
}

@media only screen and ( max-width: 570px ){
  
    .click-next-project{
        text-align: right;
        margin-left: 0%;
    }
      .click-previous-project{
        text-align: left;
        margin-right: 0%;
    }
}




/*
-----------------------------------------------
-------INFO------------------------
-----------------------------------------------
*/
/*black site temolate*/
body.page-template-black-template  {
	color: #fff;
	background-color: #000; }
.page-template-black-template .menu-space{
	color: #fff;
	background-color: #000; 
}
.page-template-black-template .project-title {
    color: #fff;
}


.page-template-black-template .cv-section {
	margin-bottom: 40px;
}

.page-template-black-template span:first-child {max-width: 57px;}
.page-template-black-template span:last-child {padding-left: 32px;}

.page-template-black-template div p:nth-child(2){ margin-top: 0px;}

.page-template-black-template p.cv-section-title{
	margin-bottom: 0;
}

.page-template-black-template  {

}



/*Style na stronie info*/

.about-info-text {
 	font-size: 20px;
	font-weight: 400;
	text-align: left;
	margin: 20px 6.5%;;
}

.page-template-black-template .project-specifications {
	width: 90%;
	margin: 0px 0 35px 6.5%;
}

.page-template-black-template .description-text-long{
	width: 90%;
	font-weight: 300;
	margin: 20px 6.5%;
	font-size: 18px;
	line-height: 24px;
}
.date-separator-content{ /*a dummy class to protect wordpress skip span while converting from blocks to HTML*/
	display: table-cell;
	min-width: 57px; /*Ustawienie które gwarantuje wyrównanie kolumn niezależnie od tego czy po roku jest myślnik czynie*/
	white-space: normal;
}
 @media only screen and ( max-width: 950px ){
	.page-template-black-template .description-text-long   {
		width: 85%;
	}}
/*@media only screen and (max-width: 768) {
	.video-info-page-placeholder{
	width: 100%!important;
}
}*/


/*-------------------------------------------------------------------------*/
/*--------------------------USTAWIENIA ZDJĘĆ ------------------------------*/
/*-------------------------------------------------------------------------*/
/*  jedyne ustawienie dla video jest takie*/
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

.video-info-page {
	padding-left: 1.6%;
}

/* Wstawianie video tak samo jak zdjęć tylko zamiast img wstaw video */

/*--------------------------A. Zdjęcie pojedyncze centalne-----------------*/

/*Ustawienie miejsca na zdjęcie centralnie*/
.photo-space {
    width: 100%;
    position: relative;
    margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 50px;
    z-index: 1;
	line-height: 0;
}

/*Pojedyncze zdjecie w rzedzie*/
.photo-space .wp-image-wrap {
    vertical-align: bottom;
    margin-left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
	width: 80%; /*domyślnie zdjęcie pojedyncze zajmuje 80% - zdjecie bez podpisu*/
	height: auto;
}

.page-template-black-template .photo-space .wp-image-wrap {
    margin-left: 6.5%;
} 
.page-template-black-template .photo-space .wp-image-wrap {
    margin-left: 6.5%;
	-webkit-transform: translate(0%);
    transform: translate(0%);
} 

@media only screen and ( max-width: 640px ){
.photo-space .wp-image-wrap {
	width: 95%!important;
	}
.page-template-black-template .photo-space .wp-image-wrap {
	width: 70%!important;
    margin-left: auto;
	margin-right: auto;
	-webkit-transform: translate(0%);
    transform: translate(0%);
	}}
.photo-space .wp-image-wrap img,video {
	width: 100%;
	height: auto;
}
/*.photo-space div.wp-image-wrap video {
	display: block;
	width: 100%!important;
	max-width:100%;
	height: auto;
}
*/


/*Jeśli jest podpis w pojedynczym zdjeciu to caly obiekt jest centrowany i domyślnie zajmuje 80%*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space .wp-caption{
	 margin-left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
	width: 80%;
	height: auto;
} 
*/
/*Poniewaz rozmiar zdjecia ogranicza caption to zdjecie musi byc wewnatrz caption szerokie na 100%*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.wp-caption img {
	width: 100%;
	height: auto;
}
*/
/*Jeśli do pojedynczego zdjęcia dodamy caption i narzucimy rozmiar to div z klasą rozmiaru musi być środkowany a caption i zdjęcie musza miec po 100%*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space .photo-width-10, .photo-width-5 {
	margin-left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}
.photo-space .photo-width-10 .wp-caption {
	width: 100%;
	height: auto;
}
*/

/*-------------------Zdjecia opisuje w odwrotnej kolejnosci aby last-child nie napisywalo first-child-----------*/
/*--------------------------B. Zdjęcie podwojne prawe-----------------*/



/*Wyłączenie centrowania zdjęcia w przypadku zdjęc podwójnych*/
.photo-space .photo-space-single .wp-image-wrap {
    vertical-align: bottom; 
	margin-left: 0%;
	transform: translate(-0%);
    -webkit-transform: translate(-0%);
}
@media only screen and ( max-width: 640px ){
.photo-space .photo-space-single .wp-image-wrap {
	margin-left: 50%;
	transform: translate(-50%);
    -webkit-transform: translate(-50%)
}
}
/*Szerokosc zdjecia, a w zasadzie diva naokolo zdjecia - gdy zdjecie jest bez podpisu czyli bez caption i bez narzuconego rozmiaru*/
.photo-space-single:last-child .wp-image-wrap {
	float: left;
	padding-left: 25px;
}
@media only screen and ( max-width: 640px ){
	.photo-space-single:last-child .wp-image-wrap {
	float: none;
	padding-left: 0;
}
}



/*Wyglad i szerokosc caption gdy istnieje*/

/*reset centrowania caption*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:last-child .wp-caption{
	 margin-left: 0%;
    -webkit-transform: translate(-0%);
    transform: translate(-0%);
}

.photo-space-single:last-child .wp-caption {
	float: left;
	max-width: 80%!important;
	height: auto;
	padding-left: 25px;
} 
/*Ustawienie szerokosci zdjecia na 100% szerokosci caption, które jest ustawione na 80% szerokosci*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:last-child .wp-caption img {
		width: 100%;
		height: auto;
		padding-left: 0px;
}
*/
/*Narzucenie wymiaru zdjęcia*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:last-child .photo-width-10{
	float: left;
}
*/
/*reset centrowania div z narzuceniem wielkosci*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space .photo-space-single:last-child .photo-width-10 {
	 margin-left: 0%;
    -webkit-transform: translate(-0%);
    transform: translate(-0%);
	float: left;
	padding-left: 25px;
}
*/
/*powiekszenie caption do 100 procent gdy rozmiarem reguluje div narzucajacy rozmiar */
/*owiekszenie caption do 100 procent gdy rozmiarem reguluje div narzucajacy rozmiar */
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:last-child .photo-width-5 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-10 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-15 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-20 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-25 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-30 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-35 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-40 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-45 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-50 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-55 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-60 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-65 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-70 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-75 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-80 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-85 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-90 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-95 .wp-caption {width: 100%; height: auto; padding-left: 0px; }
.photo-space-single:last-child .photo-width-100 .wp-caption {width: 100%; height: auto; padding-left: 0px; }

*/



/*--------------------------C. Zdjęcie podwojne lewe-----------------*/

/*Wyłączenie centrowania zdjęcia w przypadku zdjęc podwójnych - zostalo zrobione przy sekcji B dla zdjecia prawego*/

/*Szerokosc zdjecia gdy zdjecie jest bez podpisu czyli bez caption i bez narzuconego rozmiaru*/
.photo-space-single:first-child .wp-image-wrap {
	float: right;
	padding-right: 25px;
}
@media only screen and ( max-width: 640px ){
.photo-space-single:first-child .wp-image-wrap {
	float: none;
	padding-right: 0px;
	margin-bottom: 50px; /* zdjęcia w dwóch kolumnach w mobilu się sklepjają. Pierwsze zdjęcie od drugiego trzeba odseparować.*/
	}}

/*Wyglad i szerokosc caption gdy istnieje*/

/*reset centrowania caption*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:first-child .wp-caption{
	 margin-left: 0%;
    -webkit-transform: translate(-0%);
    transform: translate(-0%);
}
*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:first-child .wp-caption {
	float: right;
	max-width: 80%!important;
	height: auto;
	padding-right: 25px;
} 
*/
/*Ustawienie szerokosci zdjecia na 100% szerokosci caption, które jest ustawione na 80% szerokosci*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:first-child .wp-caption img {
		width: 100%;
		height: auto;
	   	padding-right: 0px;
}
*/
/*Narzucenie wymiaru zdjęcia*/
/*reset centrowania div z narzuceniem wielkosci*/
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space .photo-space-single:first-child .photo-width-10 {
	 margin-left: 0%;
    -webkit-transform: translate(-0%);
    transform: translate(-0%);
	float: right;
	padding-right: 25px;
}
*/
/*Powiekszenie caption do 100 procent gdy rozmiarem reguluje div narzucajacy rozmiar */
/*komentuję to po dodaniu dodatkowego diva naokoło zdjęcia
.photo-space-single:first-child .photo-width-5 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-10 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-15 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-20 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-25 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-30 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-35 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-40 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-45 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-50 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-55 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-60 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-65 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-70 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-75 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-80 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-85 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-90 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-95 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
.photo-space-single:first-child .photo-width-100 .wp-caption {width: 100%; height: auto; padding-right: 0px; }
*/


/*Style caption*/
.wp-caption p.wp-caption-text {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}


/*Klasy sterujace szerokoscia zdjecia na stronie projektu*/
.photo-width-5 { width: 5%!important; height: auto;}
.photo-width-10 {width: 10%!important; height: auto;}
.photo-width-15 {width: 15%!important; height: auto;}
.photo-width-20 {width: 20%!important; height: auto;}
.photo-width-25 {width: 25%!important; height: auto;}
.photo-width-30 {width: 30%!important; height: auto;}
.photo-width-35 {width: 35%!important; height: auto;}
.photo-width-40 {width: 40%!important;height: auto;}
.photo-width-45 {width: 45%!important;height: auto;}
.photo-width-50 {width: 50%!important;height: auto;}
.photo-width-55 {width: 55%!important;height: auto;}
.photo-width-60 {width: 60%!important;height: auto;}
.photo-width-65 {width: 65%!important;height: auto;}
.photo-width-70 {width: 70%!important;height: auto;}
.photo-width-75 {width: 75%!important;height: auto;}
.photo-width-80 {width: 80%!important;height: auto;}
.photo-width-85 {width: 85%!important;height: auto;}
.photo-width-90 {width: 90%!important;height: auto;}
.photo-width-95 {width: 95%!important;height: auto;}
.photo-width-100 {width: 100%!important;height: auto;}





/*korekty*/
.photo-space .span-1-of-2 {
	width: 50%;
}
@media only screen and ( max-width: 640px ){
	.photo-space .span-1-of-2 {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}
.photo-space .col {
	margin: 0% 0 0% 0%;
}

.photo-space:first-child {
    margin-top: 150px;
}
.photo-space:last-child {
    margin-bottom:40px;
}
@media only screen and (max-width: 480px){
 footer .span-1-of-2 {
	 width: 49.2%;
	}}
@media only screen and (max-width: 200px){
 footer .span-1-of-2 {
	 width: 100%;
	}}
/*Hoover effect*/

.grid-item a:hover h4{
	color: #FF0000;
}

.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grid-item:nth-child(n) .hvr-rotate:hover, .grid-item:nth-child(n) .hvr-rotate:focus, .grid-item:nth-child(n) .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
/*----selection color-----*/
    p:selection {
        background: #ff0000;
	    color: #fff;
    }
        a::selection {
        background: #ff0000;
	    color: #fff;
    }
        li::selection {
        background: #ff0000;
	    color: #fff;
    }
        h1::selection {
        background: #ff0000;
	    color: #fff;
    }
        h2::selection {
        background: #ff0000;
	    color: #fff;
    }
        h3::selection {
        background: #ff0000;
	    color: #fff;
    }
        h4::selection {
        background: #ff0000;
	    color: #fff;
    }
        h5::selection {
        background: #ff0000;
	    color: #fff;
    }
        h6::selection {
        background: #ff0000;
	    color: #fff;
    }
        img::selection {
        background: #ff0000;
	    color: #fff;
    }            
	span::selection {
        background: #ff0000;
	    color: #fff;
    }
	div::-moz-selection {
	        background: #ff0000;
	    color: #fff;
	}
    p::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        a::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        li::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h1::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h2::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h3::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h4::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h5::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        h6::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
        img:-moz-selection {
        background: #ff0000;
	    color: #fff;
		background-color: #ff0000;
    }            
	span::-moz-selection {
        background: #ff0000;
	    color: #fff;
    }
	div::-moz-selection {
	        background: #ff0000;
	    color: #fff;
	}

.page-template-black-template nav a:link
.page-template-black-template nav a:visited     {
	text-decoration: none;
}

.page-template-black-template nav a:link
.page-template-black-template nav a:visited {
	border-bottom: 2px solid #000;
    color: #ff0000;
}

/*code that turns off the hardcoded width of caption - text under pictures*/
.wp-caption {
	width: 100%!important;
}

/*********************************************************************/
/****************CUSTOMISE PASSWORD PROTECTED PAGES*******************/
/*https://aspengrovestudios.com/how-to-customize-password-protected-pages/  */
/*********************************************************************/
.pass-label{
	display: none;
}

.pass-form-wrapper {
	width: 504px;
	height: 272px;

	margin:0 auto;
}

.pass-form-wrapper img {
	width: 120px;
	display: block;
	margin: 10px auto;
}

.pass-info-text{
	padding: 16px 8px;
	text-align: center;
}
.pass-input-wrapper{
	margin: 8px 16px 16px 16px;
	text-align: center;
}
/*.pass-input-wrapper input{
	margin: 8px auto;
	padding:3px 8px;
	text-align: center;
}*/

.pass-input-field {
	width: 240px;
	height: 48px;
	
	border:1px solid #BFBFBF; 
	color:#000; 
	padding:10px;
	margin: 8px auto;
	text-align:center;
}

@media only screen and (max-width: 768px){
	.pass-form-wrapper {
		width: 304px;
		height: 304px;

		margin:0 auto;
}
}
@media only screen and (max-width: 340px){
	.pass-form-wrapper {
		width: 100%
		height: auto;

		margin:0 auto;
}
}


input[type="password"]:focus{
	border:1px solid #000;
	background: #fff; 
	outline-style: none;
	/*outline-color:red;
	outline-offset: 0px;*/
}

.pass-submit-button {
	background-color: #000;
	color: #fff;
	display: block;
	width: 240px;
	height: 48px;
	border:1px solid #000; 
	margin: 8px auto;
}
input[type="submit"]:focus {
	outline-style: none;
}

.ask-for-pass-text{
	font-weight: 300;
	margin: 16px auto;
	line-height: 24px;
	font-size: 14px;
	color: 6E6E6E;
}

.pass-input-error-style {
	border:1px solid red;
}

.error-password-message {
	font-weight: 300;
	margin: 0px auto;
	line-height: 24px;
	font-size: 14px;
	color: red;
	
}