@font-face

{

font-family:columbia;

src:url(columbia.otf);

}
body {
	background: rgb(12,12,12);
background: linear-gradient(180deg, rgba(12,12,12,1) 0%, rgba(72,30,20,1) 84%);

  color:#F2613F; 	font-family:columbia; font-size:25px;
}



body, td, th, h3, h6 {
	color: #F2613F;
}

h1, h2, h4, h5 {
 color:#481E14;	 sans-serif; font-size:1.8em; font-family:columbia;
}

a {
	color: #FEB487;}
	a:link {
	color: #FEB487;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FEB487;
}
a:hover {
	text-decoration: none;
	color: #FEB487;
}
a:active {
	text-decoration: none;
	color: #FEB487;
}

.welcome {border: 5px solid #F2613F; margin:0 auto; margin-top:100px;  
 
  height: 300px;	border-radius:50%;
  width: 300px;
 
  overflow: hidden;
  
   }

.welcome img{
    margin: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.welcome img:hover {
  margin-left: -300px;
}

.menu {position:absolute; right:0px; height:60px; top:10px; color:#F79B84; font-size:1.4em; border-radius:50px 0 0 50px ; background-color:#9B3922; padding: 2px 30px 2px 30px; }


.logo {position:absolute; border-bottom:1px solid #F2613F; border-top:1px solid #F2613F; border-right:2px solid #F2613F; left:0px;height:60px; width:55%; top:10px; color:##F79B84; font-size:1.6em;	 letter-spacing: 8px;
background-color:#481E14; border-radius:0 50px 50px 0; padding: 2px 30px 2px 30px; }







.header {
  text-align: center;
  padding: 32px 5px 5px 5px;	overflow:hidden;	
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;	
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px; margin-top:40px; 
}



/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 32%; /* IE10 */
  flex: 32%;	
  max-width: 32%; margin:1PX;

}

.column img {

  vertical-align: middle;
  width: 90%;    PADDING: 18px;  margin:5px; background-color:#FFF;  
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


.nawigacja {background-color:#0C0C0C;border:1px solid #F2613F; font-size:1em; width:30%; float:left; font-weight:bold; padding:2px 0 2px 0; margin-left:17px; display:block;
}
.nawigacja_l {background-color:#0C0C0C; border:1px solid #F2613F; font-size:1em; width:30%; float:left; font-weight:bold; padding:2px 0 2px 0; margin-left:17px; display:block;
border-radius: 20px 0 0 20px;}
.nawigacja_p {background-color:#0C0C0C;border:1px solid #F2613F; font-size:1em; width:30%; float:left; font-weight:bold; padding:2px 0 2px 0; margin-left:17px; display:block;
border-radius: 0  20px  20px 0;}
.nawi_div {margin:0 auto; font-size:24px; width:100%; margin-bottom:5px; text-align:center; }
.navi_middle {width:50%; margin:0 auto;}
.image {margin:0 auto; padding:20px; background-color:#FFF; width:32%; }
.image img {width:100%;  }
.licznik {width:200px; margin:0 auto; font-size:0,5em;	text-align:center;  color:#F2613F;	margin-top:140px; }