body {
  color: #3496d5;
  background-color: #000E29;
  font-family: 'Lato', sans-serif;
  font-size: 80%;
	background-repeat: no-repeat;
	margin:0;
}

* {
  box-sizing: border-box;
}

a { text-decoration:none;color:#3496d5;cursor:pointer;}
h1 { padding-bottom: 10px;border-bottom:2px white solid;color:white;font: 600 35px/35px 'Lato', sans-serif;}
h2 { font: 600 35px/35px tahoma;font-family: 'Lato', sans-serif; color:white;}
h3 { font: 400 22px/27px tahoma;    font-family: 'Lato', sans-serif;;border: 0px solid;width: 200px;padding: 15px;background: #3496d5;border-radius: 6px;color:#fff; }
h4 { font: 600 20px tahoma;font-family: Camphor,Open Sans-serif,Segoe UI,sans-serif; color:white}
h5 { font: 100 16px/20px tahoma;font-family: Camphor,Open Sans-serif,Segoe UI,sans-serif; }
p { font: 100 20px/30px tahoma }

.premiera{
  background-color: #b20101;
  padding: 2px;
  border-radius: 10px;
  margin: 10px;
  color: white;
}
/* MENU */
#navbar{
  /* background-image: url(../image/background.jpg); */
  background-color: #0A0A0A;
  /* background-color: #450000; */
  height: 140px;
  padding: 10px;
  width: 100%;
  margin-bottom: 0px;
  border-bottom: 1px solid #33415C;
}

#logo_img{float:left;margin-left:50px;width:300px;}
#links{width: calc(100% - 700px);display: flex;
  justify-content: center;
  align-items: center;}
#icons{float:right;width:300px;margin-left:0px;margin-top:25px;padding: 20px 0px;border-left: 2px solid #b20101;}

#q24q{height:40px;margin-top:45px;float:right;margin-right: 20px;}
.logo{
    height: 50px;
    margin-top: 40px;
    float: right;
    margin-right: 30px;
  }

.icon-twitter,.icon-youtube-play,.icon-instagram,.icon-facebook-squared{
  color: white;
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
  float:right;
}

.icon-youtube-play:hover{color:#FF0000}

.icon-instagram:hover{
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  border-radius: 10px;
  color: white;
}

.icon-twitter:hover{color:#1DA1F2;}
.icon-twitter{margin-right:30px;}

.icon-facebook-squared:hover{color:#4267B2}

.link {
  float: left;
  display: block;
  color: white;
  text-decoration: none !important;
  text-align: center;
  font-size: 150% !important;
  padding: 44px 30px 10px 30px;
  margin-top:40px;
}

.link:hover{
  border-bottom:5px solid white;
  //border-top:2px solid red;
  //background-color: #363636;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
  color: white;
  text-decoration: none;
}

/* CONTENT */
#content { margin:0px;}
#video{background-color: rgba(0, 0, 0, 0.2);width:100%;}

#advert_img{height:624px}

/* Container needed to position the button. Adjust the width as needed */
.message {
  position: relative;
  width: 50%;
}

/* Make the image responsive */
.message img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.message .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: red;
  color: black;
  font-size: 40px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition: border 1s;
    -webkit-transition: padding 1s;
    -webkit-transition: background-color 1s;
    -webkit-transition: color 1s;
}

@keyframes przycisk_on {
  from {padding: 10px 20px;background-color: red;border-radius: 0px;}
  to {padding: 10px 20px;background-color: black;border-radius: 50px;}
}

.message .btn:hover {
  background-color: black;
  color: white;
  animation-name: przycisk_on;
  animation-duration: 0.4s;
  padding: 10px 20px;
  border-radius: 50px;
}


 #tytul{font-size:140%; margin-top:10px;margin-bottom:10px;}
/* #3496d5 */
.zamknij{height: 30px; background-color: #b20101; width: 100%;font-size:20px;}
.zamknij a {color: black;font-size:25px;background-color: white;padding-left: 10px;padding-right: 10px;float:right;}
.zamknij a:hover{color: red;}

.artykul{
    background: rgba(255,255,255,0.4);
    background-color: #000E29;
    color:white;
    float:left;
    padding-bottom:51px;
    padding-top:10px;
    width: 70%;
    height: 710px;
  }

.program{
      background-color: #001845;

      width: 30%;
      height: 710px;
      color: white;
      overflow: auto;
      float:left;
}


.program a { color: white;}
.program p { text-align: left; color: white; }
.program h1 {width: 75%;}

 .yt-frame{
  width:100%;
  height:640px;
}

table{//border: 2px solid white;}

th{
  font-size: 20px;
  padding:5px;
}

td{
  background: rgba(255,255,255,0.4);
  background-color: 	#001233;
  border-left:2px solid white;
  padding-left: 10px;
  width:100%;
  height: 100px;
  font-size: 20px;
  text-align: left;
}

td:hover{
  background-color: rgba(0,0,0, 0.3);
  border-left:2px solid #b20101;
}

#program_table{
  margin-right: 12%;
  margin-left: 12%;
  width:75%;
  padding-bottom: 40px;
}

.magazyn{}

/* FOOTER */

.footer {
  background-color: #001233;
  width: 100%;
  height: 80px;

}

@media only screen and (min-width: 600px) and (max-width: 1470px) {
  #navbar {
    height: 250px;
  }
    #links {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
}


@media only screen and (max-width: 1000px) {
  #links{width:100%;margin-top: 60px;}
  #icons{width:100%;height: 20%; margin-left: 30%;border:none;margin-top: 20px;margin-bottom: 20px;}
  .program{float: none;width: 100%;}
  .artykul{float: none;width: 100%;height: 530px;}
  #logo_img{width:50%;margin-left: 25%;margin-right: 25%;}
  #navbar{height: 400px; text-align: center;}
  .link{height:50px;padding: 0px 30px 10px 30px;}
  .icon-twitter,.icon-youtube-play,.icon-instagram,.icon-facebook-squared{margin-top:0px;float: none; }
  #q24q{margin-top:0px; float: none;height: 60px}
  .logo{margin-top:0px; float: none;height: 60px}
  #advert_img{width:90%;}
  .icon-twitter{margin-right:0px;}
  td{font-size: 40px;}
  th{font-size: 40px;}
  .artykul h4 {font-size: 40px; }
  .program{height: 650px}
  .program h1 {font-size: 60px;}
  h2{font-size: 60px;}
  .program tr td{font-size: 16px;}
  #video{padding: 0px;}
    .yt-frame{width:100%;height:400px;}
}

@media only screen and (max-width: 600px) {
  #icons{width:100%;height: 20%; margin-left: 30%;border:none;margin-bottom: 10px;}
  .program{float: none;width: 100%;}
  .artykul{float: none;width: 100%;height: 330px;}
  .link{height:50px;padding: 0px 30px 10px 30px;}
  #logo_img{width:80%;margin-left: 10%;}
  #navbar{height: 450px; text-align: center;}
  .icon-twitter,.icon-youtube-play,.icon-instagram,.icon-facebook-squared{margin-top:0px;float: none; }
  #links{width:100%;clear:both;display: flow;}
  .logo{margin-top:0px; clear:both;height: 60px}

  .yt-frame{width:100%;height:200px;}
  .icon-twitter{margin-right:0px;}
  td{font-size: 40px;}
  th{font-size: 40px;}
  .artykul h4 {font-size: 40px; }
  .program{height: 650px}
  .program h1 {font-size: 40px;}
  h2{font-size: 40px;}
  .program tr td{font-size: 16px;}
  .program th{font-size: 20px;}

}