@font-face{font-family:"Yekan";font-style:normal;font-weight:400;src:url(fonts/Yekan.eot?#iefix) format("embedded-opentype"),url(fonts/Yekan.woff) format("woff"),url(fonts/Yekan.ttf) format("truetype"),url(fonts/Yekan.svg#BYekan) format("svg")}

* {
  box-sizing: border-radius;
  font-family: Yekan,'BYekan',tahoma;
}
body {
	direction: rtl;
  background-image: url('gradiant.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
background: rgb(3, 77, 145)
}
a {
	text-decoration: none;
	color: #fff;
}
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: grid;
  place-items: center;
}


.items {
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-top: 10px solid #f6c254;
  color: #fff;
}

.items-head h2 {
  padding: 0px 20px;
  margin: 10px;
  color: #f6c254;
  font-size: 20px;
  font-family: Yekan,'BYekan',tahoma;
}

.items-head h3 {
  padding: 0px 20px;
  margin: 10px;
  color: #ffffff;
  font-size: 15px;
  font-family: Yekan,'BYekan',tahoma;
}

.items-head hr {
  width: 80%;
  margin: 0px 30px;
  border: 1px solid #f6c254;
}

.headbox {
	margin: 0 auto;
text-align: center;
}

.headbox img {
	margin: 0 auto;
    width: 20%;
    display: list-item;
}

@media (max-width: 480px) {
    .headbox img {
    	margin: 0 auto;
        width: 50%;
        display: list-item;
    }
}

.items-body {
  padding: 10px;
  margin: 10px;
  display: grid;
  grid-gap: 10px;
}

.items-body li {
  list-style: none;
}

.items-body img {
	display: inline-block;
	vertical-align: top;
    border-radius: 5px;
}

@media (max-width: 480px) {
    .items-body img {
        width: 100%;
        display: list-item;
        vertical-align: top;
        border-radius: 5px;
    }
}

.items-body figure {
  width: 100%;
  display: inline-flex;
  margin: 0;
  cursor: default;
}

@media (max-width: 480px) {
    .items-body figure {
      width: 100%;
      display: inline-block;
      margin: auto;
    }
}

.items-body figure img,
.items-body figure figcaption {
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 480px) {
    .items-body figure img,
    .items-body figure figcaption {
      display: list-item;
      vertical-align: top;
    }
}

.items-body li figure figcaption {
  margin: 10px 0;
  line-height: 2.2em;
  padding-right: 1em;
}

.items-body-content {
  padding: 15px;
  padding-right: 0px;
  display: grid;
  font-size: 15px;
  grid-gap: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  border-bottom: 1px solid #f6c254;
}
.fa {
  font-size: 20px !important;
	color: #fff;
}

.items-body-content:hover {
  border-bottom: 1px solid #f8c254;
}
.countmusic {float: left;background: #f33492;padding: 5px 8px;border-radius: 89px;color: #ffffff;}

.fa.social-icon {
	margin: 4px;
	font-size: 25px !important;
}

.items-body-content i {
  align-self: center;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: #cecece;
  border-radius: 10px;
}
.badge:empty {
  display: none;
}
.badge.blue {
  background: #67c1ef;
  border-color: #30aae9;
  background-image: -webkit-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -moz-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -o-linear-gradient(top, #acddf6, #67c1ef);
  background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
}
.badge.green {
  background: #77cc51;
  border-color: #59ad33;
  background-image: -webkit-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: -moz-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: -o-linear-gradient(top, #a5dd8c, #77cc51);
  background-image: linear-gradient(to bottom, #a5dd8c, #77cc51);
}
.badge.yellow {
  background: #faba3e;
  border-color: #f4a306;
  background-image: -webkit-linear-gradient(top, #fcd589, #faba3e);
  background-image: -moz-linear-gradient(top, #fcd589, #faba3e);
  background-image: -o-linear-gradient(top, #fcd589, #faba3e);
  background-image: linear-gradient(to bottom, #fcd589, #faba3e);
}
.badge.red {
  background: #fa623f;
  border-color: #fa5a35;
  background-image: -webkit-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -moz-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -o-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: linear-gradient(to bottom, #fc9f8a, #fa623f);
}

@keyframes icon {
  0%, 100% {
    transform: translate(0px);
  }
  50% {
    transform: translate(3px);
  }
}