/* https://codepen.io/IAMMAKSIM/pen/PJGJOj */
/*  body {	margin: 0;} */

.accordion ul { display: table; table-layout: fixed;  width: 100%; height: 100vh; margin: 0; padding: 0; }

.accordion ul li { display: inline-block; position: relative; width: 100%; min-height: 300px; background-repeat: no-repeat; 	background-position: center center; text-align: center; color: #fff; }

.accordion ul li:nth-child(1) { background-image: url("http://wspolnotapolska.org.pl/system/img/dzial-historia.jpg"); }
.accordion ul li:nth-child(2) { background-image: url("http://wspolnotapolska.org.pl/system/img/dzial-kultura.jpg"); }
.accordion ul li:nth-child(3) { background-image: url("http://wspolnotapolska.org.pl/system/img/dzial-edukacja.jpg"); }

.accordion ul li::before { position: absolute; width: 100%; height: 100%; left: 0;  top: 0; background: rgba(0,0,0,0.3); content: ''; }
.accordion ul li div { transform: translateY(0px); transition: transform 500ms; }
.accordion ul li a { text-decoration: none; color: #fff; }

.accordion ul li h1 { /*font-family: 'Roboto Condensed', sans-serif; line-height: 3rem; */ text-overflow: clip; font-size: 2.5em;  }
.accordion ul li p { /* font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; font-weight: 300;*/ 	opacity: 1;
	transition: opacity 200ms; margin-left: 10vw; 	margin-right: 10vw; }
	
.accordion ul li p a:hover { color:#FF0004; }

@media screen and (min-width: 769px) {
.accordion { /*height: 100vh; min-height: 300px; */ overflow: hidden; }
.accordion ul { height: 400px; }
.accordion ul li { 	display: table-cell; vertical-align: bottom; width: 33%; height: 50vh; min-height: 400px; transition: all 500ms ease; }
.accordion ul:hover li { width: 30%; }
.accordion ul:hover li:hover { width: 40%; }
.accordion ul li::before { background: rgba(0, 0, 0, 0.4); opacity: 0;	transition: opacity 1s, transform 1s; }
.accordion ul:hover li:hover  h1 { color:#FFFFFF; }

/*.accordion ul li::before { background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 95%); 	opacity: 0;
	transition: opacity 1s, transform 1s; }  */
.accordion ul li:hover::before { opacity: 1; }
.accordion ul:hover li:hover * { 	opacity: 1; 	transition: opacity 500ms, transform 500ms; 	transform: translateX(0); }
.accordion ul li div { transform: translateY(120px); 	transition: transform 500ms; }
.accordion ul li p { width: 30vw; height: 200px; opacity: 0;  margin-left: auto; margin-right: auto; }
}