body
	{
		background-color: #fff;
		margin: 0;
		padding: 0;
		font-family: 'Montserrat', sans-serif;
	}
	
	/*
	===========================
		HEADER
	===========================
	*/
	
	header
	{
		width: 100%;
		height: auto;
	}
	
	header #logo
	{
		background-image: url(img/logo.png);
		background-repeat: no-repeat;
		width: 296px;
		height: 89px;
		margin: 0 auto;
	}
	

	@media screen and (max-width: 300px)
	{
		header #logo
		{
			background-image: url(img/logo-mobile.png);
			width: 200px;
			height: 60px;
		}
	}
	
	nav 
	{
		background-color: #fe67b4;
		width: 100%;
	}
	
	nav #menu
	{
		max-width: 700px;
		margin: 0 auto;
		text-align: center;
	}
	
	nav #menu ul
	{
		display: inline-block;
		padding: 0px;			/* usuwa wciecie listy */
	}
	
	nav #menu ul li
	{
		list-style: none;
		float: left;
	}
		
		
	@media screen and (max-width: 700px)
	{
		nav #menu ul li
		{
			display: flex;
			flex-direction: column;
			width: 100%;
		}
	}
	
	nav #menu ul li a
	{
		padding: 10px;
		text-transform: uppercase;
		color: white;
		text-decoration: none;
	}
	
	nav #menu ul li a:hover
	{
		color: black;
	}
	
	/*
	===========================
		MAIN
	===========================
	*/
	
	main #picture-area-1
	{
		width: 100%;
		height: auto;
		margin-bottom: 0px;
		padding-bottom: 0;
		background-color: #fe67b4;
	}
	
	main #picture-area-1 > img
	{
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;

	}
	
	/* Pink 1 */
	
	main .pink
	{
		width: 100%;
		height: auto;
		background-color: #fe67b4;
		padding-top: 20px;
	}
	
	main .pink h2
	{
		padding: 10px;
		margin: 0;
		text-align: center;
		color: white;
		font-weight: lighter;
		font-size: 35px;
	}
	
	main .pink h2:after
	{
		content: url(img/arrow.png);
		display: block;
		margin-top: 20px;
	}
	
	/* First text area */
	
	main .content
	{
		width: 100%;
		height: auto;
	}
	
	main .content div
	{
		display: flex;
		max-width: 1200px;
		height: auto;
		margin: 30px auto;
		align-items: center; 
	}
	
	@media screen and (max-width: 700px)
	{
		main .content div
		{
			flex-direction: column;
		}
	}
	
	main .content div #photo
	{
		min-width: 300px;
		height: 357px;
		background-image: url('img/business-woman2.jpg');
		background-repeat: no-repeat;
		background-size: contain;
		border: 1px #e8e8e8;
		box-shadow: 5px 5px 10px #979797; 
	}
	
	@media screen and (max-width: 700px)
	{
		main .content div #photo
		{
			min-width: 200px;
			height: 238px;
		}		
	}
	
	main .content div .text
	{
		max-width: 1200px;
		height: auto;
		flex-direction: column;
	}
	
	main .content div .text h3
	{
		color: #fe67b4;
		font-weight: lighter;
		letter-spacing: 0.2em;
		padding: 20px;
	}
	
	main .content div .text p
	{
		padding: 20px;
		font-size: 18px;
	}
	
	/* Picture area 2 */
	
	main #picture-area-2
	{
		background-image: url('img/bathroom.jpg');
		background-size: cover;
		width: 100%;
		height: 473px;
		margin-bottom: 0px;
		padding-bottom: 0;
		border-top: 1px solid #fe67b4;
	}
	
	main #picture-area-2 #semi-tranparent
	{
		width: 650px;
		height: 273px;
		margin: 100px auto;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 5px;
	}
	
	@media screen and (max-width: 700px)
	{
		main #picture-area-2 #semi-tranparent
		{
			max-width: 250px;
			height: 273px;		
		}
	}
	
	main #picture-area-2 #semi-tranparent h3
	{
		text-transform: uppercase;
		font-size: 30px;
		letter-spacing: 0.1em
	}

	@media screen and (max-width: 700px)
	{
		main #picture-area-2 #semi-tranparent h3
		{
			font-size: 16px;
		}
	}
		
	main #picture-area-2 #semi-tranparent p
	{
		font-size: 25px;
		color: #fe67b4;
		padding: 20px 0;
	}
	
	main #picture-area-2 #semi-tranparent a
	{
		padding: 20px 50px;
		background-color: #fe67b4;
		color: white;
		text-decoration: none;
		border-radius: 5px;
	}
	
	main #picture-area-2 #semi-tranparent a:hover
	{
		background-color: #979797;
	}
	
	/* Thrid area */
	
	main #content2
	{
		width: 100%;
		height: auto;
		text-align: center;
	}
	
	main #content2 h3
	{
		font-size: 25px;
		padding: 20px 0;
	}
	
	main #content2 #mini-greed
	{
		position: relative;
		display: inline-block;
		width: auto;
	}
	
	@media screen and (max-width: 1293px)
	{
		main #content2 #mini-greed
		{
			max-width: 650px;
		}
	}
	
	@media screen and (max-width: 700px)
	{
		main #content2 #mini-greed
		{
			max-width: 230px;
		}
	}
	
	main #content2 #mini-greed #upper
	{
		width: auto;
		height: auto;
		margin: 5px auto;
		float: left;
	}
	
	main #content2 #mini-greed #down
	{
		width: auto;
		height: auto;
		margin: 5px auto;
		float: left;
	}
	
	.projects
	{
		width: 300px;
		height: 200px;
		background-color: pink;
		margin: 10px;
		float: left;
		position: relative;
	}
	
	@media screen and (max-width: 700px)
	{
		.projects	
		{
			width: 200px;
			height: 133px;
		}		
	}
	
	.one
	{
		background-image: url('img/kuchnia2.jpg');
		background-size: cover;
	}
	
	.two
	{
		background-image: url('img/lazienka2.jpg');
	}
	
	.three
	{
		background-image: url('img/salon2.jpg');
	}
	
	.four
	{
		background-image: url('img/sypialnia2.jpg');
	}
	
	.overlay
	{
		width: 300px;
		height: 100px;
		background-color: rgba(255, 255, 255, 0.8);
		transition: height 0.5s;
		position: absolute;
		top: 0px;
	}
	
	.overlay:hover
	{
		height: 130px;
	}
	
	.overlay h4
	{
		color: #fe67b4;
		font-size: 30px;
		font-weight: lighter;

	}
	
	@media screen and (max-width: 700px)
	{
		.overlay
		{
			width: 200px;
			height: 60px;
		}
		
		.overlay:hover
		{
			height: 80px;
		}
		
		.overlay h4
		{
			font-size: 25px;
			font-weight: lighter;
			padding: 0;
			position: relative;
			top: -20px;
		}
	}
	
	/* Fourth area */
	
	main #references
	{
		width: 100%;
		height: auto;
		background-color: #dfdfe0;
		text-align: center;
	}
	
	main #references h3
	{
		font-size: 30px;
		padding: 30px 0 10px 0;
		font-weight: lighter;
		letter-spacing: 0.1em;
	}
	
	main #references p
	{
		padding: 0 20px 30px 20px;
	}
	
	/*
	===========================
		FOOTER
	===========================
	*/
	
	footer
	{

		width: 100%;
	}
	
	footer #foot
	{
		max-width: 700px;
		border-top: 1px solid #fe67b4;
		border-bottom: 1px solid #fe67b4;
		margin: 0 auto;
		text-align: center;
	}
	
	footer #foot ul
	{
		display: inline-block;
		padding: 0px;			/* usuwa wciecie listy */
	}
	
	footer #foot ul li
	{
		list-style: none;
		float: left;
	}
		
		
	@media screen and (max-width: 700px)
	{
		footer #foot ul li
		{
			display: flex;
			flex-direction: column;
			width: 100%;
		}
	}
	
	footer #foot ul li a
	{
		padding: 10px;
		text-transform: uppercase;
		color: #525252;
		text-decoration: none;
	}
	
	footer #foot ul li a:hover
	{
		color: #fe67b4;
	}
	
	footer #under-foot-menu
	{
		text-align: center;
		font-size: 10px;
		color: #525252;
	}