@charset "utf-8";
@font-face
{
	font-family: Economica;
	src: url('fonts/Economica-Regular.eot');
	src: local('☺'),
	     url('fonts/Economica-Regular.ttf'),
		 url('fonts/Economica-Regular.otf');
}
		 
@font-face
{
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Light.ttf');
	font-weight: 100;
}

@font-face
{
	font-family: 'Open Sans';
	src: url('fonts/OpenSans.ttf');
	font-weight: normal;
}

@font-face
{
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Bold.ttf');
	font-weight: bold;
}

@font-face
{
	font-family: MonotypeCorsiva;
	src: url('fonts/MonotypeCorsiva.ttf'),
	     url('fonts/MonotypeCorsiva.eot');
	font-weight: normal;
}

@media screen and (max-width: 441px)
{
	html
	{
		font-size: 14px;
	}
	h1
	{
		font-size: 3.3em;
	}
	
	p
	{
		line-height: 170%;
	}
	
	li
	{
		line-height: 170%;
	}
}

@media screen and (min-width:442px) and (max-width: 544px)
{
	html
	{
		font-size: 14px;
	}
	
	h1
	{
		font-size: 3.4em;
	}
	
	p
	{
		line-height: 170%;
	}
	
	li
	{
		line-height: 170%;
	}
	
}

@media screen and (min-width: 536px) and (max-width: 692px)
{
	html
	{
		font-size: 15px;
	}
	
	h1
	{
		font-size: 4em;
	}
	
	p
	{
		line-height: 160%;
	}

	li
	{
		line-height: 160%;
	}

}

@media screen and (min-width: 693px)
{
	html
	{
		font-size: 16px;
	}
	
	h1
	{
		font-size: 4.75em;
	}
	
	p
	{
		line-height: 160%;
	}
	
	li
	{
		line-height: 160%;
	}
}

h1 {
	text-align: center;
	margin: 0;
	font-family: Economica;
	font-weight: normal;
	color: white;
}

h2 {
	font-family: 'Open Sans';
	font-size: 4.5em;
	color: white;
	font-weight: normal;
}

h3 {
	font-family:'Economica';
	font-size: 4.375em;
	color: white;
	font-weight: normal;
}

h4 {
	font-family:'Economica';
	font-size: 3.75em;
	color: white;
	font-weight: normal;
}

h5 {
	font-family:'Economica';
	font-size: 2.5em;
	color: white;
	font-weight: normal;
}

h6 {
	font-family:'Economica';
	font-size: 1.4375em;
	color: white;
	font-weight: normal;
}

p {
	font-family: 'Open Sans';
	font-size: 1em;
	font-weight: 100;
	margin: 0;
}

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    font-family: Arial, Helvetica, Sans-serif;
	background-color: #42413C !important;
	margin: 0;
	padding: 0;
	color: #212121;
	height: auto;
	position: relative;
}



/* STRONA */

.sectionWhite h1, .sectionWhite h2, .sectionWhite h3, .sectionWhite h4, .sectionWhite h5, .sectionWhite h6
{
	color: #212121;
}

.sectionWhite hr {
	border-color: #212121 -moz-use-text-color -moz-use-text-color;
}

.sectionBlack hr {
	border-color: white -moz-use-text-color -moz-use-text-color;
}

.sectionBlack
{
	background-color: #212121;
	color: white;
	position: relative;
	padding:0;
	margin: 0 auto;
	overflow: auto;
}

.sectionWhite
{
	background:url(images/pw_maze_white.png) repeat scroll 0 0;
	position: relative;
	padding:0;
	margin: 0 auto;
	overflow: auto;
}
	

#page {
	max-width: 960px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}


/* LANDPAGE */

#sectionTop {
	position: relative;
	margin: 0 auto;
	overflow: none;
	background:url(images/pw_maze_white.png) repeat scroll 0 0;
	padding: 100px 0 0;

}

#logo-text-big
{
	text-align: center;
	margin-bottom: 0;
}

#button a {
    background: none repeat scroll 0 0 #4396DB;
	opacity: 0.8;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    font-family: 'Open Sans';
    font-size: 21px;
	font-weight: normal;
    padding: 5px 20px;
	text-align: center;
}


#pressButtonText {
    background: url("images/arrows-pressbutton.png") no-repeat scroll 0 0 transparent;
    max-width: 278px;
	margin: 6px auto 20px;
	text-align: center;
	font-family: MonotypeCorsiva;
	font-size: 16px;
	padding: 12px 0;
}
	
@media screen and (max-width: 874px)
{
	.fb-like {
		display: block !important;
		position: relative; 
		max-width: 230px;
		margin: 0 auto 20px;
		height: 100px;
		overflow: none;
	}
}

@media screen and (min-width: 875px)
{
	.fb-like {
		position: absolute !important;
		top: 264px;
		left: 71%;
		max-width: 230px;
		height: 100px;
		overflow: none;
	}
}

@media screen and (max-width: 355px)
{
	#welcomeText1
	{
		font-size: 2.6em;
	}
}

@media screen and (min-width: 356px)
{
	#welcomeText1
	{
		font-size: 2.9375em;
	}
}

@media screen and (max-width: 874px)
{
	#welcomeText2
	{
		font-size: 1.2em;
	}
}

@media screen and (min-width: 874px)
{
	#welcomeText2
	{
		font-size: 1.375em;
	}
}

/* MAIN - 1 */


#metoda {
	padding:0;
	margin: 0 auto;
	overflow: auto;
	background-color: #212121;
}

.centerPurple
{
	display: block;
	margin: 0 auto;
	background-color: #413041;
}

.centerBlue {
	display: block;
	margin: 0 auto;
	background-color: #364b63;
}

.centerBlue h1 {
	font-family: Economica;
	font-size: 1.4375em;
	font-weight: normal;
	color: #FFFFFF;
}

.centerBlue h2 {
	font-family: Economica;
	font-size: 4.25em;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}

.centerBlue p {
	font-family: 'Open Sans';
	font-size: 1.3em;
	font-weight: 100;
	color: #FFFFFF;
	text-align: center;
}

@media screen and (max-width: 391px)
{
	#textBox1
	{
		max-width: 392px;
		padding: 23px 20px;
	}	
}

@media screen and (min-width:392px) and (max-width: 535px)
{
	#textBox1
	{
		max-width: 392px;
		padding: 23px 40px;
	}
}

@media screen and (min-width:536px) and (max-width: 691px)
{
	#textBox1
	{
		max-width: 414px;
		padding: 23px 40px;
	}
}

@media screen and (min-width: 692px)
{
	#textBox1
	{
		max-width: 436px;
		padding: 23px 40px;
	}
}

@media screen and (max-width: 404px)
{
	#horizontalText {
		display: block;
		margin: -50px 0 5px;
		text-align: center;
	}
	
	#verticalTextBox {
		display: none;
	}
}

@media screen and (min-width: 405px)
{
	#horizontalText {
		display: none;
	}
	
	#verticalTextBox {
		display: block;
	}
}

#ikony3 h1 {
	font-family: Economica;
	font-size: 23px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	margin: 5px 0;
}

@media screen and (max-width: 563px)
{
	#ikony3 {
		display: block;
		margin: 0 auto 10px;
		max-width: 120px;
	}

	#glebia, #potencjal, #znaczenie {
		float: left;
	}
	
	#glebia, #znaczenie, #potencjal {
		margin: 0 0 50px;
	}
}

@media screen and (min-width: 564px) and (max-width: 722px)
{
	#ikony3 {
		display: block;
		margin: 0 auto 10px;
		max-width: 548px;
	}

	#glebia, #potencjal, #znaczenie {
		float: left;
	}
	
	#glebia, #znaczenie {
		margin: 0;
	}
	
	#potencjal {
		margin: 0 100px;
	}
}

@media screen and (min-width: 723px)
{
	#ikony3 {
		display: block;
		margin: 0 auto 10px;
		max-width: 688px;
	}

	#glebia, #potencjal, #znaczenie {
		float: left;
	}
	
	#glebia, #znaczenie {
		margin: 0;
	}
	
	#potencjal {
		margin: 0 170px;
	}
}

#ikony2 ul {
	margin: 78px 0;
}


#ikony2 li h1 {
	font-family: Economica;
	font-size: 23px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	margin: 5px -9px;
}

@media screen and (max-width: 399px)
{
	#ikony2 {
		max-width: 290px;
		margin: 0 auto;
	}
}

@media screen and (min-width: 400px) and (max-width: 540px)
{
	#ikony2 {
		max-width: 350px;
		margin: 0 auto;
	}
}

@media screen and (min-width: 541px)
{
	#ikony2 {
		max-width: 453px;
		margin: 0 auto;
	}
}

/* MAIN - 2 */

#metoda-rozwiniecie_content_big h2 {
	font-family: Economica;
	font-size: 5.75em;
	font-weight: normal;
	color: #212121;
	text-align: center;
}
 
#line0 {
	-sand-transform: rotate(59.4703deg);
}

#line1 {
	-sand-transform: rotate(59.4606deg);
}

#line2 {
	-sand-transform: rotate(138.652deg);
}

#line3 {
	-sand-transform: rotate(65.4392deg);
}

#line4 {
	-sand-transform: rotate(90deg);
}

#line5 {
	-sand-transform: rotate(154.663deg);
}

#line6 {
	-sand-transform: rotate(28.5231deg);
}

#line7 {
	-sand-transform: rotate(36.2284deg);
}

#line8 {
	-sand-transform: rotate(144.448deg);
}

#line9 {
	-sand-transform: rotate(66.331deg);
}

#line10 {
	-sand-transform: rotate(41.5222deg)
}

#line11 {
	-sand-transform: rotate(138.5222deg)
}

#stroke1 {
	-sand-transform: rotate(35deg)
}

#stroke2 {
	-sand-transform: rotate(145deg)
}

#stroke3 {
	-sand-transform: rotate(-19deg)
}

#verticalTextBox
{
	-sand-transform: rotate(270deg);
}

#metoda-rozwiniecie div h2 {
	font-family: Economica;
	font-size: 92px;
	font-weight: normal;
	color: #212121;
	text-align: center;

}

#metoda-rozwiniecie div p {
	font-family: 'Open Sans';
	font-size: 26px;
	font-weight: 100;
	color: #212121;
	text-align: center;
}

@media screen and (max-width: 959px)
{
	#linecontainer1, #linecontainer2
	{
		display: none;
	}
	
	#jakToRobimy
	{
		margin: 55px auto 50px;
	}
	
	#metoda-rozwiniecie_content_small
	{
		display: block;
		padding: 0 20px;
	}
	
	#metoda-rozwiniecie_content_big
	{
		display: none;
	}
	
	#metoda-rozwiniecie 
	{
		position: relative;
		padding:0;
		margin: 0 auto;
		overflow: auto;
		background:url(images/pw_maze_white.png) repeat scroll 0 0;
	}
}

@media screen and (min-width: 960px)
{
	#linecontainer1, #linecontainer2
	{
		display: block;
	}
	
	#jakToRobimy
	{
		margin: 55px auto 0;
	}
	
	#metoda-rozwiniecie_content_small
	{
		display: none;
	}
	
	#metoda-rozwiniecie_content_big
	{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 5500px;
		max-width: 960px;
	}
	
	#metoda-rozwiniecie 
	{
		position: relative;
		padding:0;
		margin: 0 auto;
		overflow: auto;
		background:url(images/pw_maze_white.png) repeat scroll 0 0;
		height: 7500px;
	}
	
}

#metoda-rozwiniecie_content_small p
{
	font-size: 1.625em !important;
}

.imgBoxSmall
{
	margin: 20px auto 0; 
	display: block; 
	max-width: 280px;
}

.imgBoxSmall img
{
	max-width:280px;
}

.imgBoxSmall2
{
	margin: 20px auto 0; 
	display: block; 
	max-width: 280px;
}

.imgBoxSmall2 img
{
	max-width:128px;
}

.centerDiv {
	clear:both;
	float: left;
	width: 960px;
}

@media screen and (max-width: 959px)
{
	#opis-analiza h1 {
		font-size: 3.1em; 
		margin-top: 50px;
		text-align: center;
	}
	
	#opis-analiza img {
		display: block;
		margin: 50px auto 0;
	}
	
	#opis-analiza div {
		margin: 50px auto 0; 
	}
	
	#opis-proces h1{
		font-size: 3.1em; 
		margin-top: 50px;
		text-align: center;
	}
	
	#opis-proces img {
		display: block;
		margin: 50px auto 0;
	}
	
	#opis-proces div {
		margin: 50px auto 70px; 
	}
}

@media screen and (min-width: 960px)
{
	#opis-analiza h1 {
		font-size: 3.75em; 
		margin: 79px 0 0 10%; 
		text-align: left;
	}
	
	#opis-analiza img {
		float:right;
		margin: 200px 27px 0 0;
	}
	
	#opis-analiza div {
		margin: 30px 0 0 40px; 
		float: left;
	}
	
	#opis-proces h1{
		font-size: 3.75em; 
		margin: 79px 10% 0 0; 
		text-align: right;
	}
	
	#opis-proces img {
		float:left; 
		margin: 60px 50px 0;
	}
	
	#opis-proces div {
		margin: 30px 40px 110px 0px; 
		float: right;
	}
}

.center
{
	display: block;
	margin: 0 auto;
}


.ulist, .ulist2 {
	list-style: circle;
	color: white;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 1em;
}

.ulist li {
	margin: 15px 0 0;
	padding-left: 10px;
}

.ulist2 li {
	margin: 15px 0 0;
	padding-left: 30px;
	background:url(images/bullet.png) 5px 8px no-repeat;
	list-style:none;
}

@media screen and (max-width: 959px)
{
	#psychoterapia h1 {
		font-size: 13vw;
	}
	
	#psychoterapia-elipsa {
		display: none;
	}
	
	#psychoterapia-krzesla {
		margin: 47px auto 0;
		max-width: 280px;
		height: auto;
	}
	
	#psychoterapia-smutny {
		float: left;
		margin-right: 20px;
		margin-bottom: 30px;
		max-width: 140px;
		height: auto;
	}
	
	#psychoterapia-szczesliwy {
		float: left;
		margin-bottom: 30px;
		max-width: 140px;
		height: auto;
	}
	
	#psychoterapia-imgBox {
		max-width: 320px;
		margin: 60px auto 0;
	}
	
	#psychoterapia-listaBox {
		clear: both;
	}
}

@media screen and (min-width: 960px)
{
	#psychoterapia h1 {
		font-size: 6.25em;
	}
	
	#psychoterapia-elipsa {
		display: block;
	}
	
	#psychoterapia-krzesla {
		margin: 47px auto 0;
	}
	
	#psychoterapia-smutny {
		float: left; 
		margin-top: 128px;
	}
	
	#psychoterapia-szczesliwy {
		float: right; 
		margin-top: 128px;
	}
	
	#psychoterapia-imgBox {
		max-width: 770px;
		margin: 100px auto 0;
	}
	
}

.wrap2colAbout {
	max-width: 880px;
	margin: 0 auto;
}

.wrap2colAbout li h1 {
	font-family: Economica;
	font-size: 1.4375em;
	font-weight: normal;
	color: #212121;
	text-align: center;
	margin: 5px -9px;
}

.wrap2colAbout li p {
	font-family: 'Open Sans';
	font-size: 1.0625em;
	font-weight: 100;
	color: white;
	padding: 25px;
}

/*
@media screen and (min-width: 960px)
{
	#oNas-big {
		display: block;
	}
	
	#oNas-small {
		display: none;
	}
}


@media screen and (max-width: 959px)
{
*/
	#oNas-big {
		display: none;
	}
	
	#oNas-small {
		display: block;
	}
/*
}
*/

@media screen and (min-width: 960px)
{
	#kontakt-big {
		display: block;
	}
	
	#kontakt-small {
		display: none;
	}
}

@media screen and (max-width: 959px)
{
	#kontakt-big {
		display: none;
	}
	
	#kontakt-small {
		display: block;
	}
}


.purpleColumn
{
	background-color: #413041;
	display: block;
	margin: 0 0 0 45px;
	width:260px; 
	height: 445px;
}

.inspiracje {
	font-size: 36px; 
	color: white; 
	font-family: Economica;
}

.circle1 {
	 width: 116px;
	 height: 116px;
	 background-size: 116px 116px;
	 position: relative;
}

.circle2 {
	 width: 232px;
	 height: 232px;
	 background-size: 232px 232px;
	 position: relative;
}


.circle1 .circle_icon:hover, .circle2 .circle_icon:hover, .circle3 .circle_icon:hover, .circle4 .circle_icon:hover {
	transform: rotateY(180deg);
	transform-style: preserve-3d;
	-webkit-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform: rotateY(180deg);
	-moz-transform-style: preserve-3d;
	-o-transform: rotateY(180deg);
	-o-transform-style: preserve-3d;
}

.circle1 .circle_icon, .circle2 .circle_icon, .circle3 .circle_icon, .circle4 .circle_icon {
	bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    margin: auto;
    position: absolute;
    display: block;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s; /* Firefox 4 */
	-webkit-transition: all 0.5s ease 0s; /* Safari and Chrome */
	-o-transition: all 0.5s ease 0s; /* Opera */
}

.circle2 {
	 width: 238px;
	 height: 238px;
	 position: relative;
}



div.line {
/*    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
            transform-origin: 0 50%;*/
                 
    height: 8px; /* Line width of 3 */
    background: #874887;
    opacity: 0.4;
}




#kontakt {
	position: relative;
	padding:0;
	margin: 0 auto;
	overflow: auto;
	background:url(images/pw_maze_white.png) repeat scroll 0 0;
}

#kontakt h1, h2 {
	font-family: Economica;
	font-size: 100px;
	font-weight: normal;
	color: #212121;
	text-align: center;
}

#partnerzy {
	position: relative;
	padding:0;
	margin: 0 auto;
	overflow: auto;
	background:url(images/pw_maze_white.png) repeat scroll 0 0;
}


#partnerzy h1, h2 {
	font-family: Economica;
	font-size: 100px;
	font-weight: normal;
	color: #212121;
	text-align: center;
}


ul {
    list-style: none outside none;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
	
}
h1, h2, h3, h4, h5, h6, p {

	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {;
	color #212121;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color #212121;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color #212121;
	text-decoration: none;
}

/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
	background-color: #ADB96E;
}

/* ~~ The footer ~~ */
footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
	display: block;
}

.error 
{
	font-family: 'Open Sans';
	font-size: 16px;
	font-weight: 100;
	padding-left:10px
}

#form input ,textarea
{
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
	margin-top:10px;
	margin-bottom:10px;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size: 14px;
	padding: 7px;
}

label
{
	color: white;
	font-family: 'Open Sans';
	font-size: 16px;
	font-weight: 100;
}

#form fieldset
{
	border: 0px;
	max-width: 410px;
	margin: 0 auto;
	display: inline;
}

#form input[type=submit]
{
	margin-left:0px;
	margin-top:0px;
	padding:12px;
	font-family: 'Open Sans';
	font-size: 16px;
	font-weight: 100;
	background-color: #2E4B64;
	color: white;
}

.infoRotate
{
	 -sand-transform: rotate(-7deg);
}

.infoRotateRight
{
	 -sand-transform: rotate(7deg);
}