*{ margin: 0; padding: 0;}
body{background: #CFE0EE; color:#ddd; font-family: sans-serif}
.wrapper{display: grid; grid-template-columns: 190px auto 170px; grid-gap: 2px;
         width: 900px; margin: 0 auto;}
.wrapper header{grid-column: 1 / -1;}
.wrapper footer{grid-column: 1 / -1;}
header, footer, nav, aside{background:#1162AB;}
header{height:144px; font-size: 12px; text-align: center; }
header p {color:#CFE0EE; font-size: 12px;}
nav{}

main.list{display: grid; grid-gap: 5px; background:#CFE0EE; color:#009;}
article.list{display: grid; grid-gap: 3px; margin: 0 auto;
grid-template-columns: 144px auto;
overflow: hidden; margin-bottom: 3px;}
article.list h1, article.play h1{
           grid-column: 1 / -1; background: #00a; color: #fff; font-weight: 600;
           overflow: hidden; font-size: 13px; padding: 2px 0 2px 20px;
           height:16px;}
article.list img, article.list div{height: 81px;}
article.list img{display: block; width: 144px;}
article.list div{font-size: 13px; padding: 0; overflow: hidden;}

main.list2{display: grid; grid-gap: 3px; background:#CFE0EE; color:#007;}
article.list2{display: grid; grid-gap: 10px; margin: 0 auto;
grid-template-columns: 144px auto; overflow: hidden; margin-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px solid #333;}
article.list2 h1, article.list2 h2{font-size: 14px; margin-bottom: 3px;}
article.list div{height: 81px;}
article.list2 img{display: block; width: 144px;}
article.list2 div{font-size: 13px; padding: 0; overflow: hidden; color:#009;}
article.list2 img{height: 81px;}

main.play{background:#CFE0EE; color:#008;}
article.play{display: grid; grid-gap: 0px; background:#CFE0EE;margin: 0 auto;
grid-template-columns: 540px; margin-bottom: 3px;}
article.play iframe{width: 100%; height: 296px;}
article.play div{font-size: 14px;}


aside{}
footer{display: grid; grid-template-columns: 200px 200px; grid-gap: 20px;
  padding:10px; padding-top:10px;color: #CFE0EE; font-size: 14px;}
footer section{}
footer a{display: block; color: #fff;}
footer a:hover{color: #cff;}
footer h1{color: #CFE0EE; font-size: 16px; font-weight:bold;}
footer hr{color: #CFE0EE;}
footer summary{list-style: none; cursor: pointer; margin:6px 0 0 10px;}
footer summary:hover{color: #cff;}
footer p{margin-left: 25px;}



/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .wrapper{
    width: 100%;
    background: #1162AB;
    grid-template-columns: 100%;}
  nav, aside, header p, header img, article.list div{ display: none;}
  body{background: #1162AB;}
  header { background: url("http://www.skat.bg/_logo_new_i.png") no-repeat;
           background-position: left 15px top 10px; height:64px; }
  main.list{ background: #1162AB; padding:10px; margin: 0 auto;}
  article.list, article.list2{ background: #CFE0EE; padding:5px; width: 98%;
  grid-template-columns: 144px auto;
  grid-column-gap:15px; border-radius: 3px;
  }
  article.list h1 { grid-column: 2; grid-row: 1; font-size:16px; padding: 0px;
               background: none; color: #007;  font-weight: normal;
             height: 74px; overflow: hidden;}
  article.list img{ grid-column: 1; grid-row: 1;}

  main.play{ background: #1162AB; padding:10px; margin: 0 auto;}
  article.play{ grid-template-columns: 100%; margin-bottom: 3px;grid-gap: 3px;}
  article.play iframe{width: 100%;max-height: 250px;}
  article.play h1{grid-row: 2; width: 98%; padding: 5px 0 3px 3px; overflow: visible;
      margin-bottom: 5px;           background: #CFE0EE; color: #008; font-size:17px;}
  article.play div{font-size: 14px;}


}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 340px) {
  .wrapper{width: 320px; background: #1162AB; margin-top:5px; }
  header { background-position: left 5px top 0; height:60px;}
  main.list{grid-gap: 2px; padding:5px;  padding-top:0px;}
  article.list {grid-column-gap:5px; border-radius: 5px; padding:5px;}
  article.list h1 { font-size:15px; }
}