/* CSS Document */



/************* sekcja start ********/
#start {
	text-align: left;
	position: relative;
	/*height: 100vh;*/
	height: 600px;
	overflow: hidden;
	color: #FFF;
}
#start:before {
	position: absolute;
	width: 105%;
	height: 105%;
	background:#23408E url(../img/tlo-start-img.jpg) 50% 50% no-repeat;
	background-size:cover;
	background-blend-mode: multiply;
	filter: blur(8px);
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	content:'';
}
#start .wrapper {
    /*padding: 120px 28px;
	height: 450px;
    height: calc(100vh - 200px);
	padding: 120px 28px 0;*/
}
#start .wrapper .wdol {
	position: absolute;
	bottom: -30px;
	width: 30px;
	height: 32px;
	background-image: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path fill="#FFF" d="M58.5,7.5h-17c-9.7,0-17.6,7.9-17.6,17.6v41.4c0,14.4,11.7,26.1,26.1,26.1s26.1-11.7,26.1-26.1V25.1   C76.1,15.4,68.2,7.5,58.5,7.5z M46.5,25.2c0-1.9,1.6-3.5,3.5-3.5c1.9,0,3.5,1.6,3.5,3.5v7.5c0,1.9-1.6,3.5-3.5,3.5   c-1.9,0-3.5-1.6-3.5-3.5V25.2z M39.7,43.6c0.5-0.8,1.6-1,2.4-0.4l7.9,5.5l7.9-5.5c0.8-0.5,1.9-0.4,2.4,0.4c0.5,0.8,0.4,1.9-0.4,2.4   L51,52.2c-0.3,0.2-0.6,0.3-1,0.3s-0.7-0.1-1-0.3L40.1,46C39.3,45.4,39.1,44.4,39.7,43.6z M59.9,72.5L51,78.7   c-0.3,0.2-0.6,0.3-1,0.3s-0.7-0.1-1-0.3l-8.9-6.2c-0.8-0.5-1-1.6-0.4-2.4c0.5-0.8,1.6-1,2.4-0.4l7.9,5.5l7.9-5.5   c0.8-0.5,1.9-0.4,2.4,0.4C60.9,70.9,60.7,72,59.9,72.5z M60,59.4l-8.9,6.2c-0.3,0.2-0.6,0.3-1,0.3s-0.7-0.1-1-0.3l-8.9-6.2   c-0.8-0.5-1-1.6-0.4-2.4c0.5-0.8,1.6-1,2.4-0.4l7.9,5.5l7.9-5.5c0.8-0.5,1.9-0.4,2.4,0.4C61,57.8,60.8,58.9,60,59.4z"></path></g></svg>');
	background-repeat:no-repeat;
	background-size:cover;
	cursor: pointer;
	left: calc(50% - 15px);
	display:none;
}
#start a { 
text-decoration:underline;
}
#start .haslo {
    position: relative;
    height: 450px;
	font-weight: 300;
    text-shadow: 1px 1px 5px #4a4a4a;
}

#start .haslo p:first-child {
	font-size: 50px;
	font-weight: normal;
}
#start .haslo p:nth-child(2) {
	font-size: 36px;
	margin-top: 20px;
	line-height: 1.2em;
	
}
#start .haslo p:last-child {
	position: absolute;
	bottom: 0;
	font-weight: bold;
}

#start .haslo p:last-child span:first-child {
	font-size: 36px;
	display:block;
	line-height: 0;
    margin-top: 130px;
	font-weight: normal;

}

#start .haslo p:last-child span.liczba {
	font-size: 160px;
	display: inline-block;
	line-height: 0
}

#start .haslo p:last-child span.liczba span {
	font-size: 20%;
	display: inline-block;
}

#start .akcjastart {
	position: absolute;
	bottom: 40px;
	right: 0;
	width: 350px;
	text-align: center;
}

#start .button {
	width: 100%;
	font-size: 100%;
	color: #23408E;
	/*padding: 1.2em;*/
}
#start .button a {
	width: 100%;
	display: block;
	text-decoration: none;
	
}
#start .akcjastart span {
	display: block;
	margin: 1.2em auto;
	font-family: FerrL;
	color: #FFF;
}


#start .zaczynamy {
    position: absolute;
    right: 0;
    bottom: 10px;
    color: #4A4A4A;
    background: #FFF;
	font-family: FerrL;
    box-sizing: border-box;
	padding: 1em;
}

#start .zaczynamy p:first-child {
    line-height: 1em;
	font-size: 45px;
	font-family: Ferr;
}

#start .zaczynamy p:first-child span {
	font-size: 25px;
	display: block;
	font-family: FerrB;
}
#start .zaczynamy p:last-child {
    line-height: 1.5em;
	text-transform: uppercase;
	font-size: 25px;
}
/******* ogolneKonkurs ***/
#ogolneKonkurs {
	background: #4A4A4A url(../img/konkurs-ogolne.png) 0 100% no-repeat;
	background-size: contain;
	padding-bottom: 244px;
	color: #FFF;
}


#ogolneKonkurs h3 {
	color: #23408E;
	padding: 2em 0;
	font-size: 36px;
	    width: auto;
}

#ogolneKonkurs .kol2 {
	overflow: hidden;
}

#ogolneKonkurs .kol2 p {
	line-height: 1.4em;
	font-weight: 300;
	width: calc(50% - 50px);
	text-align: left;
	float: left;
}
#ogolneKonkurs .kol2 p:last-child {
	float: right;
}

/******** zasady ****/
#zasadyKonkursu {
	color: #4A4A4A;
}

#zasadyKonkursu .ico {
    margin: 3rem auto;
    display: flex;
	height: 150px;
}

#zasadyKonkursu .ico div {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #23408E;
	color: #FFF;
	text-align: center;
	line-height: 120px;
	left: 10px;
	margin: auto;
	position: relative;
	cursor: pointer;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		-ms-transition: all 0.5s;
}

#zasadyKonkursu .ico div.on {
	width: 150px;
	height: 100%;
	cursor: auto;
}

#zasadyKonkursu .ico div:after {
    content: '';
    width: 1px;
    height: 0;
    background: #4A4A4A;
    position: absolute;
    bottom: 0;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
	
		-webkit-transition-delay: .2s; /* Safari */
    	transition-delay: .2s;
}

#zasadyKonkursu .ico div.on:after {
    height: 3rem;
    bottom: -3rem;
}

#zasadyKonkursu .ico div:before {
	content: '';
    top: 0;
    left: 0;
    position: absolute;
    background-repeat: no-repeat;
	background-size: 80%;
    background-position: 50%;
		transition: all 0.5s;
	    -webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		-ms-transition: all 0.5s;

    width: 0;
    height: 0;
    margin: 50%;
}

#zasadyKonkursu.anim .ico div:before, #zasadyKonkursu.animO .ico div:before {
    width: 60%;
    height: 60%;
    margin: 20%;
}


#zasadyKonkursu .ico #umowa:before {
	background-image: url('../img/noun_445463.svg');
}
#zasadyKonkursu .ico #glosowanie:before {
	background-image: url('../img/noun_441275.svg');

}
#zasadyKonkursu .ico #weryfikacja:before {
	background-image: url('../img/noun_176707.svg');
}
#zasadyKonkursu .ico #zgloszenie:before {
	background-image: url('../img/noun_589680.svg');
}

#zasadyKonkursu.anim .ico #umowa:before {
	-webkit-transition-delay: 0.6s; /* Safari */
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
#zasadyKonkursu.anim .ico #glosowanie:before {
	-webkit-transition-delay: 0.4s; /* Safari */
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
#zasadyKonkursu.anim .ico #weryfikacja:before {
	-webkit-transition-delay: 0.2s; /* Safari */
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


#zasadyKonkursu.animO .ico #zgloszenie:before {
	-webkit-transition-delay: 0.6s; /* Safari */
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
#zasadyKonkursu.animO .ico #weryfikacja:before {
	-webkit-transition-delay: 0.4s; /* Safari */
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
#zasadyKonkursu.animO .ico #glosowanie:before {
	-webkit-transition-delay: 0.2s; /* Safari */
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

#zasadyKonkursu .opisZasady {
    padding: 40px;
    min-height: 40px;
	border-top: 2px solid #23408E;
	overflow: hidden;
	position: relative;
	width: auto;

	
}


#zasadyKonkursu .opisZasady div {
    margin-top: -120px;
	position: absolute;
	width: calc(100% - 80px);
	
			transition: all 0.5s;
	    -webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		-ms-transition: all 0.5s;

}
#zasadyKonkursu .opisZasady div.on {
    margin-top: 0;
}
#zasadyKonkursu .opisZasady p {
    font-family: FerrL;
    line-height: 1.3em;
	margin: auto;
}
#zasadyKonkursu .opisZasady strong {
	display: block;
}

/******** formularze ****/
#formularze {
	background: #23408E;
	color: #4A4A4A;
	position: relative;
	margin-bottom: 80px;
	    height: 200px;
}

#formularze.onSkos {
	height: auto;
}

#formularze .wrapper {
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-o-transition: all 0.2s;
		-ms-transition: all 0.2s;
		transition: all 0.2s;
}
#formularze .wrapper.on {
	background: #FFF;
	z-index: 1;
}

#formularze .wrapper.on:before {
    content: '';
  	border-left: 1056px solid transparent;
  	border-bottom: 60px solid #FFF;
    position: absolute;
    top: -60px;
	left:0;
	width: 0; height: 0;
}
#formularze .wrapper.on:after {
    content: '';
  	border-right: 1056px solid transparent;
  	border-top: 60px solid #FFF;
	position: absolute;
    bottom: -60px;
	left:0;
	width: 0;
	height: 0;
}

#formularze:before {
    content: '';
  	border-left: 100vw solid transparent;
  	border-bottom: 80px solid #23408E;
    position: absolute;
    top: -80px;
	left:0;
	width: 0; height: 0;
}
#formularze:after {
    content: '';
  	border-right: 100vw solid transparent;
  	border-top: 80px solid #23408E;
	position: absolute;
    bottom: -80px;
	left:0;
	width: 0;
	height: 0;
}

#formularze h3 {
	width: 70%;
	margin-bottom: 1.2em;
}

#formularze .zF .ladowanie{
    padding: 2em 0;
    color: rgba(74, 74, 74, .7);
    font-size: 3em;
}

#formularze .informacja {
	font-weight: 300;
	font-size: 150%;
	margin: 0 auto;
	line-height: 1.2em;

}
#formularze .informacja .male{
	font-weight: normal;
	font-size: 70%;
	margin: 0 auto;
	line-height: 1.2em;

}

/****** wykaz projektów *****/

.skosy {
	background: #23408E;
	color: #4A4A4A;
	position: relative;
	margin: 80px auto;
}

.skosy.onSkos {
	padding: 40px 0;
}

.skosy .wrapper {
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-o-transition: all 0.2s;
		-ms-transition: all 0.2s;
		transition: all 0.2s;
}


.skosy.skl:before {
    content: '';
  	border-left: 100vw solid transparent;
  	border-bottom: 80px solid #23408E;
    position: absolute;
    top: -80px;
	left:0;
	width: 0; height: 0;
}
.skosy.skl:after {
    content: '';
  	border-right: 100vw solid transparent;
  	border-top: 80px solid #23408E;
	position: absolute;
    bottom: -80px;
	left:0;
	width: 0;
	height: 0;
}

.skosy.skp:before {
    content: '';
  	border-right: 100vw solid transparent;
  	border-bottom: 80px solid #23408E;
    position: absolute;
    top: -80px;
	left:0;
	width: 0; height: 0;
}
.skosy.skp:after {
    content: '';
  	border-left: 100vw solid transparent;
  	border-top: 80px solid #23408E;
	position: absolute;
    bottom: -80px;
	left:0;
	width: 0;
	height: 0;
}




@media only screen 
and (max-width : 1130px) {
/* mniejsza niż normalna ----------- */

}





@media only screen 
and (max-width : 1056px) {
/************************ po przeladowaniu **************/
body { font-size: 16px; }
#start {
	height: 100vh;
}

#start .wrapper {
 	height: calc(100% - 120px);
}

#start .wrapper .wdol {
	bottom: 28px;
}

#start .haslo {
	height: auto;
}

#start .haslo p:first-child {
	font-size: 6vw;
}

#start .haslo p:nth-child(2) {
	font-size: 4.5vw;
    font-family: FerrL;
}
#start .haslo p:last-child {
    position: relative;
	bottom: auto;
	
}
#start .haslo p:last-child span.liczba {
	font-size: 15vw;
	display: inline-block;
	margin-left: 1rem;
}
#start .haslo p:last-child span:first-child {
    font-size: 4.5vw;

	display: inline-block;
}

#start .akcjastart {
	width: 100%;
	position: relative;
	bottom: auto;
}

#start .zaczynamy {
    bottom: 0;
    position: absolute;
    margin: 1rem;
    text-align: center;
    padding: 1rem;
    left: 0;
	
}
#start .zaczynamy p:first-child {
    font-size: 5.5vw;
	margin-bottom: 14px;
	line-height: normal;
}
#start .zaczynamy p:last-child {
    font-size: 3vw;
}

#ogolneKonkurs h3 {
    font-size: 22px;
	padding: 1em 0;
}
h3 {
	font-size: 20px;
}
#ogolneKonkurs .kol2 p {
    width: 100%;
}

h2 {
	font-size: 24px;
	line-height: 1.2em;
}

#zasadyKonkursu .wrapper {
	overflow: hidden;
}

#zasadyKonkursu ul {
	height: calc(290px + 2em);
	position: relative;
	
}

#zasadyKonkursu .wl {
    position: absolute;
	background: url(../img/wl.png) 0 0 no-repeat;
    width: 50%;
    left: 0;
	top:0;
    height: 100%;
	z-index: 2;
}
#zasadyKonkursu .wp {
    position: absolute;
	background: url(../img/wp.png) 100% 0 no-repeat;
    width: 50%;
    right: 0;
	top:0;
    height: 100%;
	z-index: 2;
}

#zasadyKonkursu li {
	width: 100%;
    text-align: center;
    position: absolute; 
    height: auto;
    float: none !important;
    padding: 0;
	background: #FFF;
    margin: auto;
	left: 0;
	top:0;
			-webkit-transition: left 0.2s;
		-moz-transition: left 0.2s;
		-o-transition: left 0.2s;
		-ms-transition: left 0.2s;
		transition: left 0.2s;

}
#zasadyKonkursu li .ico {
	margin: 0 auto;
    left: auto;
    position: relative;
}
#zasadyKonkursu li strong {
	padding: 1em 0;
}
#zasadyKonkursu li p {
    font-size: 1em;
    padding: 1em 0 ;
}

#zasadyKonkursu li.weryfikacja {
	left: 100vw;
}
#zasadyKonkursu li.glosowanie {
	left: 100vw;
}
#zasadyKonkursu li.umowa {
	left: -100vw;
}

#formularze {
	padding: 20px 0;
}


#formularze:before {
	border-bottom-width: 30px;
	top: -30px;
}
#formularze:after {
	border-top-width: 30px;
	bottom: -30px;
}

#formularze h3 {
	width: auto;
}

#formularze .wrapper.on:before {
  	border-left: 100vw solid transparent;
  	border-bottom: 30px solid #FFF;
    position: absolute;
    top: -30px;
}
#formularze .wrapper.on:after {
    content: '';
  	border-right: 100vw solid transparent;
  	border-top: 30px solid #FFF;
	position: absolute;
    bottom: -30px;
}


#wykaz ul {
	position: relative;
	height: 4em;
	margin-bottom: 0;
}

#wykaz li {
	display: block;
	width: 100%;
	float: none;
	position: absolute;
	background: #FFF;
	padding: 0;
	cursor: pointer;
		}
#wykaz li.on {
	border-top: 1px solid #9B9B9B;		
	border-bottom: 1px solid #9B9B9B;	
	z-index: 1;	
}
#wykaz li a {
	font-size: 16px;
    display: block;
    float: none;
    height: auto;
    line-height: 1em;
    position: relative;
    border: none;
    padding: .7em 0 .5em;
		}
#wykaz li.on a {
    height: auto !important;
    border-bottom: none;
    padding: 0;
	line-height: 40px;
}

#wykaz ul:before {
	display: none;
}
#wykaz ul:after {
	content: '\f0d7';
	
	position: absolute;
	right: 0;
	z-index: 2;
	font-size: 26px;
	color: #4A4A4A;
	line-height: 40px;
}

#wykaz ul.on {
	height: calc(4 * 42px);
}
#wykaz ul.on li.linot {
	border-bottom: 1px solid #9B9B9B;
}
#wykaz ul.on li.linot0 {
	top: 42px;
}
#wykaz ul.on li.linot1 {
	top: 84px;
}
#wykaz ul.on li.linot2 {
	top: 126px;
}


#wykaz .dzielnicaPomysly {
    text-align: center;
}
#wykaz button {
    position: relative;
    right: auto;
    top: auto; 
    font-size: 1em; 
	margin-top: 1em;
}

#wykaz .miasto.info .brak {
    margin: 1.5em 0;
    font-size: 1em;
    /*color: #9B9B9B;
    font-weight: normal;*/
}




}

@media only screen 
and (max-width: 736px)

 {
/* Smartphones (portrait) ----------- */

	 .wykaz .projPojP {
		 width: 48%;
	 }
#zasadyKonkursu .ico {
    height: 25vw;
}
#zasadyKonkursu .ico div {
    width: 15vw;
    height: 15vw;
    line-height: 15vw;
 }
	#zasadyKonkursu .ico div.on {
    width: 25vw;

}
	 .wykaz li a {
   width: auto;
	padding: 1em 1.5em;
	font-size: 3vw;
}
	 
}
@media only screen 
and (max-width : 736px) 
and (orientation : landscape) {
	
	#start .haslo p:first-child {
		font-size: 4.5vw;
	}

	#start .haslo p:nth-child(2) {
		font-size: 3vw;
	}
	#start .haslo p:last-child span.liczba {
    	font-size: 20vh;
	}
	#start .zaczynamy {
		width: 50%;
		right: 0;
		left: auto;
	}
	
	#start .zaczynamy p:first-child {
		font-size: 4vw;
	}
	
	
}

@media only screen 
and (max-width: 736px)
and (orientation : portrait)
 {
/* Smartphones (portrait) ----------- */



 }


@media only screen 
and (orientation : landscape)
and (max-width : 1057px) {
/* Smartphones (landscape) ----------- */
	

}

@media only screen 
and (max-width: 500px)
and (orientation : portrait)
 {
/* Smartphones (portrait) ----------- */


 }