@import url('https://fonts.googleapis.com/css2?family=Signika&display=swap');

html, body {
		       margin:0;
		       padding:0;
		       height:100%;
        }
body{
  background-color: #343333;
  margin: 0;
  padding: 0;
  position: relative;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.center-text{
text-align: center;
}
header{
  position: relative;
}

header #media{
  display: inline-flex;
  position: absolute;
  top: 71%;
  left: 0;
  z-index: ;
}
#media .fa{
  margin-right:  0.4em;
}

header h1{
float:right;
width:292px;
}
#logo h1 {
color: #808000;
text-shadow: 10px 10px 10px #808080;
padding:15%;

}
#logo a{
text-decoration:none;
}
#logo {
background-color:#202020;
color:#000000;
height:230px;/*200*/
width:250px;/*360*/
/*! border:10px solid #F76; */
border-radius:200px 200px 10px 10px;
/*! border-style:ridge; */
box-shadow: 1px 1px 10px 1px #808080;
  right:-1000px;
margin:0 auto;

}
#logo img{
    height: 100%;
  width: 100%;
}
nav{
   background-color: #90fccb;
  height: 40px;
  width:100%;
  float: right;
  clear: both;
}
nav.sticky{
	position: sticky;
	top:0;
}
aside{
  width: 10%;
  float:left;
height: 370px;
padding:10px;
  /*! display: inline-block; */
  display: none;
}
article{
  background-color: #343333;
  box-shadow: 0px 0px 10px 0px #000;
  padding-left:5%;
  padding-right: 5%;
  padding-bottom: 3%;
  padding-top: 2%;
  margin-top: %;
  overflow: auto;
  font-family: 'Signika', sans-serif;
  font-size: 13pt;
  color: #E8FFF3;
  text-shadow: 1px 1px 1px #001;
  height: auto;
  min-height:100%;
  /*position: static;*/
}
article a{
  color: #FEF38F;
}

article h1,article h2{
  background-color: #817D7F;
  color: #060602;
  width:98%;
  padding:1%;
  text-align: center;
  border-radius: 100px 100px 100% 100%;
  font-size: 22pt;
  margin: 0px;
}
article #audio iframe, article #audio img{
width:560px;
height:315px;
}
article p{
  padding-left: 2%;
}
article .slide img {
  width: 100%;
}
.imgCentre{
	display: block;
  margin-left: auto;
  margin-right: auto;
}
footer{
  background-color: #90fccb;
  height: auto;
  width:100%;
  float: right;
  clear: both;
  color: #000;
text-align: center;
position: absolute;
padding-bottom: 10px;
padding-top: 10px;
}

@media all and  (min-width:1425px) {
 

}

#menu {
  text-align: center; 
  display: flex;
  justify-content: center;
  align-items: center;
        }
#menu ol a{
  display: block;
  text-decoration: none;
  list-style-type: none;
  text-align: center;
  color: #000;
  -webkit-transition: max-height 1s ease-out;
  /*! margin: 0 auto; */
}

#menu ol,ol > li >ul {
  padding: 0;
  margin: 0;
  
  list-style-type: none;
}
#menu ol{
  height: 2em;
  line-height: 2em;
  font-size: 18px;
  -webkit-transition: max-height 1s ease-out;
}
#menu li{
  -webkit-transition: background .7s ease-in;
}
#menu ol > li
{
  float: left;
  background-color: #90fccb;
  width: 100px;
  height: auto;
  position: relative;
}

#menu li > ul{
  display: none;
}
#menu li:hover > ul {
  display: block;
   -webkit-transition: max-height 1s ease-in;
}
#menu  li:hover > a{
  color:blue;
}


@media all and  (max-width:825px) {
 
  .fm {
    background-color:red;
    width: 50%;
    padding-left:1%;
  }
  
  #logo{
    height:230px;
    width:250px;
        }
#logo h1{
    height:23px;
    width:1px;
    margin: 20px;
    
  }
header #media{
  display: block;
  top:40%;
  }

article #audio iframe, article #audio img{
width:250px;
height:215px;
}
aside{
width: 20%;
}

/*checkbox*/



input[type=checkbox] {
   position: absolute;
}
label.one { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: block;
  cursor: pointer;
  margin-left: auto; 
  margin-right: auto; 
  width: 250px;
  height: 30px;
  padding-top: 10px;
  background-color: #90fccb;
}
label.one:active {
	background-color: #6dc59d;
}
label:active, label:hover{
  /*color: #23F;*/
}
label{
  text-decoration: none;
  list-style-type: none;
  text-align: center;
  -moz-user-select: none; /* nie pozwól na zaznaczenia */
user-select: none; /* nie pozwól na zaznaczenia */
}
label a{
  display: block;
  text-decoration: none;
}
#check > label.one {
	background-color: #6dc59d;
}
#check {
  background-color: blue; 
   width: 100%;
   height: 500px;
   /*! line-height: 100px; */
   color: white;
   text-align: center;
   display:none;
   position: absolute;
    }


input[type=checkbox]:checked ~ #check {
float: left;
  background-color: #333;
  display: block;
  
}
  
#toggle-1{
  display: none;
}

  #check:checked{
    display: none;
    
  }
  nav input{
    display: none;
  }

/*menu*/
#menu {
  left: 50%;
  right: 50%; 
  position: absolute;
  background-color: red;
}

#menu ol a{
  display: block;
  text-decoration: none;
  list-style-type: none;
  text-align: center;
  color: #000;
}

#menu ol,ol > li >ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#menu ol{
  height: 2em;
  line-height: 2em;
  font-size: 18px;
}
#menu ol > li
{
  float: none;
  background-color: #90fccb;
  width: 250px;
}

#menu li > ul{
  display: none;
}
#menu li:hover > ul {
  display: block;
 
}
#menu  li:hover > a{
  color:blue;
}

  label, #toggle-1{
    
    display: none;
  }
header h1{
display:none;
}
}
@media all and  (max-width:833px) {
header h1{
display:none;
}
}


input[type=checkbox]:checked ~ #check {
  float: left;
  background-color: #333;
  display: block;
  
}
  
#toggle-1{
  display: none;
}

  #check:checked{
    display: none;
    
  }
  nav input{
    display: none;
  }

label{
display:none;
}


/*media */

/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 100%;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin-top: 4%;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

.fa {
  background: #125688;
  color: white;
  /*! border: 2px solid black; */
  height: auto;
  width: auto;
  padding-top: 12%;
  /*! padding-left: 16px; */
  outline-offset: 10px;
  border-radius: 100px 100px 10px;
  text-align: center;
  text-decoration: none;
}

/* cookies */

#cookie-message{
display:none;
border: #000;
background-color: #000;
}
#cookie-message a{
text-decoration:none;
color:red;
background-color: #9342;
padding:2px;
}
#cookie-message a:hover{
color: grey;
}

#cookie-message{
background-color: #FFCCCC;
border: solid black 1px;
width:100%;
height:auto;
padding:1%;
}

#cookie-message-container img{
height:60px;
width:60px
}
/* Animation */
@keyframes latanie{
0%{margin-top:0px;}
100%{margin-top:20px;}
}
@-webkit-keyframes latanie{
0%{margin-top:0px;}
100%{margin-top:20px;}
}
.sticky{
position:fixed;
top:0;
width:100%;
}
.sticky+content{
padding-top:60px;
}
#check a{
text-decoration:none;display:block;
}
#check{
/*background-color:blue;*/
}
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family: sans-serif; }

.gallery-static {
  background: #EEE;
}

.gallery-cell {
float:left;
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

/* column */

.double-column{
	float: left;
	width: 50%;
	height: 200px;
}