:root {
  --main-radius: 5px 5px 5px 5px; /* owalna ramka contentow */
  --main-padding: 15px; /* glowna odleglosc elementow od ramki */
  --top-border-radius: 15px 15px 15px 15px; /* ovalna ramka top footer menu */
  --media-fonts-color: black; /* kolor czcionek linkow zewnetrznych media */
  --media-fonts-hover-color: orange; /* kolor czcionek po najecaniu linkow zewnetrznych media */
  --top-menu-mobile-label-color: black; /* kolor mobile menu label */
  --top-menu-background-color: transparent; /* tlo buttonow menu */
  --top-menu-background-hover-color: rgb(255, 237, 0); /* tlo buttonow po najechaniu menu */
  --banner-border-color: white; /* kolor ramki glownego bannera */




}


body {
//  margin: 10px 10px 10px 10px;
  margin: 20px;
  color: #000;
  padding: 0px 0px;
  word-wrap: normal;
//  background: transparent radial-gradient(ellipse at top, #fff 0,01%, #000 90%);



  background-image: url('./img/tlo.png');
  background-repeat: no-repeat;
//  background-attachment: fixed;
//  background-attachment: scroll;
  background-position: top;
  background-color: #000;
}



a {
  font-weight: 600;
//  color: #777;
  color: rgb(136,107,52);
  text-decoration: none;
  background-color: none
}
a:hover {
  font-weight: 600;
//  color: #333;
  color: rgb(228, 230, 000);
  text-decoration: none;
  background-color: none
}
a:visited {
  font-weight: 600;
//  color: #777;
  color: rgb(255, 237, 0);
  text-decoration: none;
  background-color: none
}



.container {
  margin: 0 auto;
  max-width: 60rem;
  display: grid;
  height: 100vh;
  grid-template-columns: 1.6fr 1.6fr 1.4fr;
  grid-template-rows: 0.1fr 0.1fr 20.1fr 0.3fr 0.1fr;
  grid-template-areas:
    "top top top"
    "nav nav nav"
    "banner banner banner"
    "content1 content1 content2"
    "footer footer footer";
  grid-gap: 0.6rem 0.6rem;
  font-family:'arial';
  font-weight: 400;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.6;
}


top {
  grid-area:top;
  padding-top:3px;
  padding-bottom:3px;
  text-align:left;
  font-weight:800;
  background-color: transparent;
  color: #ccc;
  background-color: #fff;
  border-radius:var(--top-border-radius);
}


/*
div.logo {
content:url('./img/radio-cenzura-logo.jpg');
  display: inline-block;
  width: 240px;
	height: 62px;
	border-color: #000;
	border-style: solid;
	border-width: 0px;
}
*/




#social-media-container {
	background-color: transparent;
	height: 40px;
	width: 100%;
}
ul#social-media {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

ul#social-media li a {
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	text-indent: -9000px;
	position: absolute;
}
ul#social-media li a:hover{
	background-position: left bottom;
}
ul#social-media li a span{
	background-repeat: no-repeat;
	display: none;
	position: absolute;
}
ul#social-media li a:hover span{
	display: block;
}
ul#social-media li a.menu1 {
	background-image: url(./img/icons-youtube-rollover-saturation-small.png);
	height: 40px;
	width: 50px;
	top: 0px;
	left: 10px;
}
ul#social-media li a.menu2 {
	background-image: url(./img/icons-facebook-rollover-saturation-small.png);
	height: 40px;
	width: 50px;
	top: 0px;
	left: 60px;
}
ul#social-media li a.menu3 {
	background-image: url(./img/icons-instagram-rollover-saturation-small.png);
	height: 40px;
	width: 50px;
	top: 0px;
	left: 105px;
}
ul#social-media li a.menu4 {
	background-image: url(./img/icons-mail-rollover-saturation-small.png);
	height: 40px;
	width: 50px;
	top: 0px;
	left: 155px;
}










nav {
//  height: 100%;
  background:transparent;
  background-image: url('./img/radio-cenzura-logo.png');
  background-repeat: no-repeat;
  background-position: left 20px center;
//  border-right: 10px solid transparent;
  grid-area:nav;
  border-radius:var(--top-border-radius);
  padding-left:260px;
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
  font-weight:600;
//  background-color: #fff;
  background-color:var(--top-menu-background-color);
  border-radius:var(--top-border-radius);
}


banner {
  background-color:transparent;
  grid-area:banner;
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
  font-weight:800;
  background-color: #fff;
  border-radius:var(--top-border-radius);
}


div.banner {
content:url('./img/radio-cenzura-banner.jpg');
  display: inline-block;
  width: 97%;
  height: 100%;
  border-color:var(--banner-border-color);
//  border-color: RGB(253,253,253);
  border-style: solid;
  border-width: 4px;
  border-radius:var(--top-border-radius);
}






/*
.spacer {
//  margin: 10px 10px 10px 10px;
  padding: 15px;
}
*/

/*
hr.spacer{
  width: 50%;
  height: 1px;
  border-width: 0;
  color: black;
  background-color: black;
}
*/

.publish-post {
//  margin: 10px 10px 10px 10px;
//  padding-top: 50px;
//  padding-right: 30px;
//  padding-bottom: 50px;
//  padding-left: 80px;
  padding: 10px
}


.publish-date {
  background-color: #ccc;
  color: red;
}
.publish-author {
  background-color: #aaa;
  color: green;
}
.publish-content {
//  text-indent: 30px;
  text-align: justify;
  font-weight: 600;
  color: black;
  background-color: #fff;
}
.publish-keywords {
  background-color: #888;
  color: orange;
}






#content1 {
  background:white;
//  background:transparent;
  color: black;
  grid-area:content1;
  border-radius:var(--main-radius);
  padding-top:var(--main-padding);
  padding-left:var(--main-padding);
  padding-right:var(--main-padding);
  padding-bottom:var(--main-padding);
  border-radius:var(--top-border-radius);
//  text-indent: -999em;
}



#content2 {
  background:white;
//  background:transparent;
  color: black;
  grid-area:content2;
  border-radius:var(--main-radius);
  padding-top:var(--main-padding);
  padding-left:var(--main-padding);
  padding-right:var(--main-padding);
  padding-bottom:var(--main-padding);
  border-radius:var(--top-border-radius);
}

.text {
  // text-indent: 1cm;
  text-align: justify;
  font-weight:800;
  color:black;
  }

.content-icon {
	float:left;
	margin-top:5px;
	margin-left:5px;
	margin-right:12px;
	margin-bottom:12px;
	border: 1px solid black;
}

.textr {
  text-indent: 1cm;
  text-align: justify;
  font-weight:800;
  }

footer {
  background:white;
  grid-area:footer;
  border-radius:var(--top-border-radius);
  padding-top:3px;
  padding-bottom:3px;
  padding-left:0px;
  text-align: center;
  font-weight:800;
  color:black;
}


.menu-hide {
  display: none;
}


.top-menu li {
  display:inline-block;
  float:left;
  margin-right:2px;
  margin-top:2px;
}


.top-menu {
  display:block;;
  position:relative;
  width:100%;
  margin:0 0 0 -20;
//  margin:0 auto;
  z-index:1;
}


.top-menu  a {
  display:block;
  position:relative;
  width:200px;
  height:40px;  
  text-decoration:none;
  font-family:'arial';
  text-align:center;
  letter-spacing:2px;
  line-height:40px;
  color:#000;
  padding:0px 0 0 0px;
  background-color: RGB(253,253,253);
//  background-color: var(--top-menu-background-color);
  border-radius: var(--top-border-radius);
//  border-color: RGB(253,253,253);
  border-color: black;
  border-style: solid;
  border-width: 3px;
}


.top-menu li:hover > a {
  background-color: var(--top-menu-background-hover-color);
}


.wrap {
  margin-bottom: 1.2rem 0;
}


input[type='checkbox'] {
  display: none;
}


.top-menu {
  list-style:none;
}
























/* MOBILE */
@media only screen and (max-width: 767px) {
  .container {
    grid-template-columns: 20fr;
    grid-template-rows: 0.1fr 0.1fr 0.4fr 0.4fr 0.4fr 0.05fr;
    grid-template-areas:
      "top"
      "nav"
      "banner"
      "content1"
      "content2"
      "footer";
  }

  body {
    margin: 10px 10px 0px 10px;
  }


  main {
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }


  //menu rozwijanie
  .wrap {
    margin-bottom: 1.2rem 0;
  }


  input[type='checkbox'] {
    display: none;
  }


  /* ukrycie slowa MENU w mobile mode*/
  .menu-hide {
      display: block;
      display: initial;
  }


  /*wylistowanie elementow jeden pod drugim*/
  .top-menu li {
  //  display:inline-block;
  //  float:left;
      display: block;
      display: initial;
      margin-right:4px;
      margin-bottom:1px;
  }




  .label {

/*
    font-weight: bold;
    font-family:'arial';
    font-size: 1.4rem;
    text-transform: uppercase;
    text-align: left;
    padding-top: 0.7rem;
    padding-bottom: 0.5rem;
    padding-left: 0.1rem;
//    color:var(--top-menu-mobile-label-color);
    color: RGB(253,253,253);
    background: transparent;
*/

    cursor: pointer;
    display: block;
	background-image: url(./img/menu-mobile-small.png);
	height: 60px;
	width: 80px;
	top: 0px;
	left: 0px;
//	margin-left: 1.7rem;
	padding 0px;
  }


  .label:hover {
    color: orange;
  }


  .label::before {
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
  }


  .hidden {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
  }


  .toggle:checked + .label + .hidden {
    max-height: 1300px;
  }


  .hidden .hidden-content {
    background: transparent;
    padding: .6rem;
  }


  .top-menu  a {
    display:block;
    position:relative;
    width:250px;
    height:42px;  
    text-decoration:none;
    font-family:'arial';
    text-align:left;
    letter-spacing:2px;
    line-height:40px;
    color:#000;
    padding:6px 0 0 20px;
    background-color: white;
  }


  div.banner {
    height: 250px;
  }


  nav {
//    padding-top:15px;
    padding-left:10px;
    background-position: top 10px right 10px;

  }
}