.wrapper {
	display: flex;  
	flex-flow: row wrap;
	font-weight: bold;
	text-align: center; 
}	
.wrapper > * {
	/* padding: 3px; */
	padding-bottom: 3px;
	flex: 1 100%; 	
	background: pink; 
}
.header {
	/* background: tomato; */
	background: transparent;
	border-radius:0 0 14px 14px;	
}
.footer {
	background: lightgreen;
	border-radius:0 0 14px 14px;
}
.main {
	text-align: center;
	background: lightblue;
}
.aside-1 {
	background: red;
}
.aside-2 {
	background: black;
}
@media all and (min-width: 600px) { 
	.aside { flex: 1 0 0; }
}
/* @media (min-width: 320px) and (max-width: 480px) {*/
@media all and (min-width: 800px){ 
	.main    { flex: 3 0px; }
	.aside-1 { order: 1;}  
	.main    { order: 2; }
	.aside-2 { order: 3; }
	.footer  { order: 4;}

}
body {
/*	padding: 2em;	*/
	padding: 1px;
}

/* menu poziome - początek */
.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  
  list-style: none;
  margin: 0; 
  background: deepskyblue;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #1565C0;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}



/* =====================================================
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
/* =====================================================
@media (min-width: 1281px) {
===================================================== */
	/* CSS */
/* ============ do skasowania	
	.main {
		width:100%;
		text-align: center;
	}

	#main_container {
		margin: 0 auto;
		width: 1281px;
		height: auto;
		text-align: center;
	}

	#top {
==========================* /
	/*		margin: 0 auto;	 */	
/* ==========================
	width:1281px;
		height:30px;
		background-color:transparent;
	/*		text-align: center; */	
	}
========================== * /
/* ==========================
	.td_top {
		widht:167px;
	}
	.przycisk_gora {
		width:167px;
		height:24px;
		background-color:#F7FBFD;
		font-weight: bold
	}
	#left {
		width:160px;
		height:auto;
		float:left;
		background-color:transparent;
		   clear: both;
	}
	#center_body {
		width:925px;
		height:auto;
		float:left;
		background-color:#cccc66;
		   clear: both;
	}

	#right {
		width:160px;
		height:auto; 
		float:left;
		background-color:transparent;
		   clear: both;
	}
	#footer {
		width:1200px;
		height:30px;
		clear:both;
		background-color:brown;
	}
	.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
}

========================== * /
/* ======================================================= */
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
/* ==========================
@media (min-width: 1025px) and (max-width: 1280px) {  
  /* CSS */
/* =======================================================
	#main_container {
		margin: 0 auto;
		width: 1025px;
		height: auto;
		text-align: center;
	}

	#top {
		width:1025px;
		height:30px;
		background-color:transparent;
	}

	.td_top {
		widht:167px;		
	}
	.przycisk_gora {
		width:167px;
		height:24px;
		background-color: #F7FBFD;
	}
	#left {
		width:160px;
		height:870px;
		float:left;
		background-color:transparent;
	}
	#center_body {
		width:669px;
		height:auto;
		float:left;
		background-color: green;
	}
	#right {
		width:160px;
		height:870px; 
		float:right;
		background-color:transparent;
	}
}
======================================================= */
/* ==========================
/* ======================================================= */
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 768px to 1025px
*/
/* ================================================
@media (min-width: 768px) and (max-width: 1024px) { 
================================================ */
  /* CSS */
 /* ================================================
	#main_container {
		margin: 0 auto;
		width: 768px;
		height: auto;
		text-align: center;
	}

	#top {
		width:768px;
		height:30px;
		background-color:transparent;
	}

	.td_top {
		widht:167px;
	}
	.przycisk_gora {
		width:167px;
		height:24px;
		background-color:grey;
	}
	#left {
		width:160px;
		height:870px;
		float:left;
		background-color:transparent;
	}
	#center_body {
		width:669px;
		height:870px;
		float:left;
		background-color:yellow;
	}
	#right {
		width:160px;
		height:870px; 
		float:right;
		background-color:transparent;
	}
	
	
}
================================================ */
/* ======================================================= */
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 481px to 767px
*/
/* =======================================================
@media (min-width: 481px) and (max-width: 767px) {
================================================ */  
  /* CSS */
/* =======================================================
	.main {
		width:100%;
		text-align: center;
	}
}
================================================ */
/* ======================================================= */
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 320px to 480px
*/
/* =======================================================
@media (min-width: 320px) and (max-width: 480px) {
================================================ */  
  /* CSS */
/* =======================================================
	.main {
		width:100%;
		text-align: center;
	}
  
}
/* ======================================================= */
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
/* =====================================================
@media (min-width: 768px) and (max-width: 1024px) { 
 ==================================================== */
 /* CSS */
 /* ===================================================== 
  	.main {
		width:100%;
		text-align: center;
	}
}
 ==================================================== */
/* ======================================================= */
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
 /* ===================================================== 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 
 ==================================================== */
  /* CSS */
 /* =====================================================  
 .main {
		width:100%;
		text-align: center;
	}
}
==================================================== */
/* ======================================================= */
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
/* =======================================================
@media (min-width: 481px) and (max-width: 767px) { 
  ================================================= */
  /* CSS */
/* =======================================================
  	.main {
		width:100%;
		text-align: center;
	}
}
================================================= */
/* ======================================================= */

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 480px
*/
/* =======================================================
@media (min-width: 320px) and (max-width: 480px) {
 ======================================================= */ 
  /* CSS */
/* =======================================================
  	.main {
		width:100%;
		text-align: center;
	}
  
}
======================================================= */