.vid {

    width: 100%;
    position: relative;
    padding-right: 350px;
    background: #1a1a1a;
    overflow: hidden;
    color: #999; }
.vid .vid-video {
    width: 100%;
    padding-top: 56.25%;
    float: left;
    position: relative; }
.vid .vid-video > iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2; }
.vid.r16-9 .vid-video {
    padding-top: 56.25%;
}
.active-list {
  display:flex;
}
.vid.r4-3 .vid-video {
    padding-top: 75%; }
.vid.r2-1 .vid-video {
    padding-top: 50%; }
.vid .vid-items {
    width: 100%;
    position: absolute;
    left: 0;
    top: 70px;
    right: 0;
    bottom: 0;
    overflow-y: auto; }
.vid .vid-playlist {
    width: 350px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: #1b1c26; }
.vid .vid-playlist a {
    color: #fff;}
.vid .vid-playlist a:hover {
    color: #fff; }
.vid .vid-playlist > header {
    width: 100%;
    height: 70px;
    padding: 16px 0 0 8px;
    background: #ff9303;
    border-left: 8px solid #ff9402;
    border-right: 8px solid #ff9203;
    border-bottom: 1px solid #ff9701;
    background: linear-gradient(to left, #ff9800 0%, #ff5722 100%);z-index: 2;
}
.vid .vid-playlist > header ._h1 {
    margin: 0 0 4px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    color: #fff; }
.vid .vid-playlist > header p {
    margin: 0;
    padding: 0;
    color: #fff;}
.vid .vid-playlist ol {
    padding: 0 0 16px 0;
    margin: 0;
    list-style: none;
    counter-reset: item; }
.vid .vid-playlist ol li {
    position: relative;
    vertical-align: middle;
    overflow: hidden;
    padding: 9px 0 8px 8px;
}
.vid .vid-playlist ol li > img {
    width: 18%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid transparent; }
.vid .vid-playlist ol li > p {
    width: 76%;
    margin: 0;
    padding: 0 16px 0 0;
    float: right;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    color: #cacaca; }
.vid .vid-playlist ol li > p > small {
    margin: 0;
    padding: 0;
    font-size: 80%;
    color: #777;
    letter-spacing: 0.3px;
}
.vid .vid-playlist ol li:hover {
    background-color: rgba(255,255,255,0.07);
    cursor: pointer; }
.vid .vid-playlist ol li.selected {
    background-color: #24252f;
    cursor: pointer; }
.vid .vid-playlist ol li.selected > p {
    color: #fff; }
.vid .vid-playlist ol li.selected > img {
    border: 2px solid #DF1A22; }
/*.vid .vid-playlist ol li.selected:before {
    content: 'â–¶';
    font-size: 10px;
    color: #c03636; }*/
/*.vid .vid-playlist ol li:before {
    counter-increment: item;
    content: counter(item);
    font-size: 80%; }*/

.vid-items::-webkit-scrollbar {
    width: 6px;
    background: #3a3a3a; }

.vid-items::-webkit-scrollbar-thumb {
    background: #999; }

@media only screen and (max-width: 639px) {
    .vid {
        padding-right: 0; }
    .vid .vid-playlist {
        width: 100%;
        position: static;
        float: left; }
    .vid .vid-playlist .vid-items {
        position: static;
        max-height: 350px;
        overflow: auto; } }

@media (min-width: 768px) {
    .vid.r16-9 .vid-video {
        padding-top: 50%;
    }
}


.vid-list {
  padding: 10px;
  border-bottom: 1px solid #050506;
  margin-bottom: 5px;
display: flex;}
.vid-list:hover {
  background: linear-gradient(to left, #ff9800 0%, #ff5722 100%);
  cursor: pointer;
}
.vid-list div {
display: inline-block;
}
.vid-resim {
  width: 25%;
  vertical-align: top;
}
.vid-resim img {
  width: 100%;
margin-top: -3px;
margin-left: 0px;
}
.active-list .vid-resim img {
      margin-top: -7px;
      margin-left: -7px;
      width: 84px;
}
.vid-baslik {
  width: 74%;
padding-left: 10px;
color: #fff;
font-size: 14px;
font-weight: 600;
font-family: 'Poppins',sans-serif;
  }
.vid-baslik a {
  color: #fff;
}
.active-list div {
  display: inline-block;
}
.olusturma {

  position: relative;
font-size: 12px;
font-weight: 400;
}
.v-baslik {
  display: block !important;
}
.vid-playlist > header {
  width: 100%;
height: 64px;
padding: 13px 0 0 8px;
background: #DF1A22;
border-left: 8px solid #DF1A22;
border-right: 8px solid #DF1A22;
border-bottom: 1px solid #DF1A22;
z-index: 2;
}
.post-head {
    background: #fff;
    padding: 15px;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}
.home_seven .post-head,
.home_seven .panel_header {
    padding: 0 0 10px;
    border-bottom: 2px solid #527284;
}
.home_seven .post-inner-2 .post-head {
    border-color: #008900;
}
.post-head .title,
.panel_header h4 {
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.filter-nav {
    color: #929292;
    float: right;
    margin-right: 63px;
    margin-top: 3px;
}
.filter-nav ul {
    font-size: 13px;
    font-weight: 400;
    padding: 0 10px;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
}
.filter-nav ul li {
    display: inline-block;
    text-align: center;
}
.filter-nav ul a {
    color: inherit;
    padding: 0 10px;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.filter-nav ul a:hover,
.filter-nav ul a.active {
    color: #527284;
}
.filter-nav ul a.active {
    font-weight: 600;
}
@media(min-width:0px) and (max-width:1199px) {
    .filter-nav {
        display: none;
    }
}