:root{
  --primary-color:red;
  --primary-background:linear-gradient(0deg, rgba(0,174,240,1) 0%, rgba(40,139,205,1) 100%);

  --secondary-color:#267ec1;
  --secondary-background:rgb(0,51,85);

  --third-color:white;
  --third-background:linear-gradient(0deg, rgba(0,51,85,1) 0%, rgba(255,0,0,1) 100%);

  --forth-background: linear-gradient(0deg, rgba(218,217,215,1) 0%, rgba(255,255,254,1) 100%);

  --selected-background: lightblue;
  --body-color:darkblue;
  --body-background:lightgray;
  --mostread-background:orangered;
  --categories-background:orange;
  --span-color:gray;
}
body{
    color: var(--body-color);
    background: var(--body-background);
    direction: ltr;
    font-family: 'GretaLight';
    /* font-family: 'FFShamelBook'; */
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'GretaBold';
    /* font-family: 'FFShamelBold'; */
    font-size: medium;
    padding-top: 5px;
}
a {
    color: var(--body-color);
}
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: var(--body-color); 
  box-shadow: inset 0 0 5px var(--body-color); 
}
 
::-webkit-scrollbar-thumb {
  background: var(--mostread-background); 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--categories-background); 
}
.logo{
    width: 180px;
}
.logo img{
    width: 180px;
    border-radius: 5px;
    margin-top: -10px;
    margin-bottom: -15px;
    background-image: url(assets/images/bg.jpg);
    background-position: center;
    object-fit: cover;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 2px;
    padding-left: 2px;
}
.navbar-expand-lg .navbar-nav{
    display: contents;
     margin-left: 2rem;
}
.navbar-brand {
    margin-left: 2rem;
}
.mb-lg-0, .my-lg-0 {
    left: 40px;
    position: absolute;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}
.form-control{
    border-radius: .0rem .25rem .25rem .0rem;
}
.search{
  border-radius: 35px 0 0 35px;
  margin: 0!important;
}
.searchbtn {
    border-radius:0 35px 35px 0;
}
.searchbtn:hover {
    border-radius:0 35px 35px 0;
    background: var(--mostread-background);
    border: 1px solid var(--mostread-background);
}

/* nav bar */
.bg-dark {
    background-color: var(--body-color)!important;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: var(--body-background);
    font-family: 'FFShamelBold';
}

/* slide bar */
.section-slider {
    width: 100%;
    position: relative;
    padding: 15px 30px;
    overflow: hidden;
    background: var(--categories-background);
}

.language-btn{
    position: fixed;
    margin: 10px 0;
    top: 200px;
    background: var(--body-color);
    right: 0;
    border: none;
    padding: 5px 10px;
    border-radius:5px 0 0 5px;
    color: white;
}
.language-btn:hover{
    background: var(--categories-background);
    color: var(--body-color);;
}

.section-slider .swiper-slide {
    width: 225px;
    padding: 6px 20px 0px 20px;
    margin-left: 10px;
    text-align: center;
    /* background-color: var(--body-color); */
    border: solid;
    border-radius: 5px;
    color: var(--third-color);
    font-size: 12px;
    cursor: pointer;
}
.section-slider .swiper-slide a{
    background: var(--third-color);
}
.section-slider .swiper-slide a:hover {
    color: var(--third-color);
    text-decoration: none;
}

.section-slider .swiper-button-next, .section-slider .swiper-button-prev {
    background-color: var(--third-color);
    box-shadow: none;
}
.section-slider .swiper-button-next.swiper-button-disabled, .section-slider .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.section-slider .swiper-button-next:before, .section-slider .swiper-button-prev:before {
    content: '';
    position: absolute;
    top: -15px;
    bottom: 14px;
    width: 55px;
    height: calc(100% + 30px );
}

.section-slider .swiper-button-next svg, .section-slider .swiper-button-prev svg {
    width: 15px;
    height: 15px;
    fill: var(--body-color);
    position: relative;
	transition: 0.3s ease-in-out;
}
.section-slider .swiper-button-next:hover svg, .section-slider .swiper-button-prev:hover svg {
	fill: var(--categories-background);
}

.swiper-button-next, .swiper-button-prev {
    transition: 0.3s ease-in-out;
}
.main-slider {
    position: relative;
    width: 100%;
	padding-right: 30px;
}
.swiper-button-next, .swiper-button-prev {
    background-image: none;
}
.swiper-button-next, .swiper-button-prev {
    top: 35%;
    width: 35px;
    height: 35px;
    display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
	border-radius: 50%;
    background-color: var(--third-color);
	box-shadow: 1px 0 5px 0 rgba(0,0,0,.1);
}
.swiper-button-next {
    right: 15px;
    left: auto;
}
.swiper-button-prev {
    left: 15px
}

/* btn success*/
.btn-outline-success {
    color: var(--categories-background);
    border-color: var(--categories-background);
}

/* most reads */
.maincards{
    background: var(--mostread-background)!important;
}
.maincards:hover{
    box-shadow: 0px 0px 10px var(--mostread-background);
}
.maincard{
    margin: 5px 0px;
    padding: 5px;
    background: var(--body-color);
    border-radius: 5px;
}
.maincard h3{
    color: var(--third-color);
}
.white-color a{
    color: var(--third-color);
    text-decoration: none;
}
.mcbody{
    padding: 5px;
    background: var(--third-color);
    border-radius: 5px;
}
.mcbody img{
    width: 130px;
    height: 160px;
    object-fit: cover;
    border-radius: 5px;
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}
.reads{
    background: var(--mostread-background);
    color: var(--third-color);
    border-radius: 40px 40px 0px 0px;
    position: fixed;
    left: 0;
    right: 0;
    height: 25px;
    margin: auto;
    width: 50%;
    bottom: 0;
    font-size: initial;
}
.read-news{
  background: var(--mostread-background);
    color: var(--third-color);
    border-radius: 40px 40px 0px 0px;
    position: fixed;
    left: 5px;
    height: 25px;
    margin: auto;
    width: 125px;
    font-size: initial;
    bottom: 0;
    text-align: center;
    box-shadow:0px -5px 2px -2px rgba(0,0,0,0.21);
}
.read-arts{
  position: absolute;
  top: 118px;
}
/******************************************** like buttons */
.like-buttons{
  position: absolute;
  right:5px;
  bottom:5px;
  background: var(--primary-background);
  color: var(--third-color);
  border-radius: 25px;
  padding: 0 5px;
  margin: auto;
}

.like-buttons :hover{
  color: var(--third-color);
  text-decoration:none;
  cursor:pointer;
}
/******************************************** deslike buttons */
.deslike-buttons{
  position: absolute;
  right:50px;
  bottom:5px;
  background: var(--primary-color);
  color: var(--third-color);
  border-radius: 25px;
  padding: 0 5px;
  margin: auto;
  
}

.deslike-buttons :hover{
  color: var(--third-color);
  text-decoration:none;
  cursor:pointer;
}
/* mcreads */
.mcreads{
    padding: 5px;
}
.mcreads h4{
    max-height: 60px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    font-size: 120%;
}
.mcreads h4 a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcreads h4 a:hover{
    text-decoration: none;
    color: var(--categories-background);
}
.mcreads span a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcreads span a:hover{
    text-decoration: none;
    color: var(--categories-background);
}
.mcreads p{
    height: 65px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
}

/* mcdetails */
.mcdetails{
    padding: 5px;
    height: 125px!important;
    overflow: hidden;
}

.mcdetails h4{
    height: 57px;
    width: 95%;
    overflow: hidden;
    line-height: inherit;
    font-size: 110%;
    margin-top: -8px;
    margin-bottom: 5px;
}
.mcdetails h4 a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails h4 a:hover{
    text-decoration: none;
    color: var(--mostread-background);
}
.mcdetails span a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails span a:hover{
    text-decoration: none;
    color: var(--categories-background);
}
.mcdetails p{
    height: 50px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    border-top: 1px solid lightgray;
}
/* ---------------------------HOME------------------ */
.mcdetails-home{
  padding: 5px;
  height: 140px!important;
  overflow: hidden;
}
.mcdetails-home h4{
    height: 57px;
    width: 95%;
    overflow: hidden;
    line-height: inherit;
    font-size: 110%;
    margin-top: -8px;
    margin-bottom: 5px;
}
.mcdetails-home h4 a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails-home h4 a:hover{
    text-decoration: none;
    color: var(--mostread-background);
}
.mcdetails-home p{
    height: 50px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    border-top: 1px solid lightgray;
}
.mcdetails-home span a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails-home span a:hover{
    text-decoration: none;
    color: var(--categories-background);
}

/* ---------------------------END HOME------------------ */
/* ---------------------------ARTS------------------ */
.mcdetails-art{
  padding: 5px;
  /* height: 125px!important; */
  overflow: hidden;
}
.mcdetails-art h4{
    height: 57px;
    width: 95%;
    overflow: hidden;
    line-height: inherit;
    font-size: 110%;
    margin-top: -8px;
    margin-bottom: 5px;
}
.mcdetails-art h4 a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails-art h4 a:hover{
    text-decoration: none;
    color: var(--mostread-background);
}
.mcdetails-art p{
    height: 25px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    border-top: 1px solid lightgray;
}
.mcdetails-art span a:link{
    text-decoration: none;
    color: var(--body-color);
}
.mcdetails-art span a:hover{
    text-decoration: none;
    color: var(--categories-background);
}
.mcdetails-art p{
    height: 50px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    border-top: 1px solid lightgray;
}
.square-image{
  height: 92px;
  overflow: hidden;
}
/* ---------------------------END ARTS------------------ */

/* articles body */
.artbody{
    padding: 5px;
    background: var(--third-color);
    border-radius: 5px;
    margin: inherit;
}
.artbodyimg{
  height: 75px;
  overflow: hidden;
}
.artbodyreads{
  height: 35px;
  font-size: small;
  color: gray;
}
.artbody img{
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 100%;
    background: var(--body-background);
    background-image: url(assets/images/author.png);
    background-position: center;
}
.artsource{
    background: var(--body-color);
    border-radius: 5px;
    color: var(--third-color);
    font-size: 80%;
    padding: 5px;
    
}
.artsource > a{
  color: white;
  text-decoration: none;
}
.artsource a:hover{
  color: orange;
}
/* latest news */
.latestnews{
    color: var(--third-color);
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0px;
}
span{
    color: var(--span-color);
    /* font-size: 15px; */
    font-size: 80%;
}

/* cards */
.card{
    margin: 5px 0px;
    background: var(--third-color);
    border-radius: 5px;
    padding: 5px;
    width:100%;
}

.card:hover{
    box-shadow: 0px 0px 10px var(--mostread-background);
    box-shadow: 0px 0px 10px var(--mostread-background);
}
.card img{
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 5px;
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}

/* articles */
.articles{
    margin: 5px 0px;
    background: var(--third-color);
    border-radius: 100px;
    padding: 5px;
}

.articles:hover{
    box-shadow: 0px 0px 10px var(--mostread-background);
    box-shadow: 0px 0px 10px var(--mostread-background);
}
.articles p {
    height: 22px;
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
    background: var(--body-color);
    color: var(--third-color);
    border-radius: 5px;
    font-size: 90%;
}
.articles p a{
    color: var(--third-color);
    text-decoration: none;
}
.articles img{
    width: 106px;
    height: 106px;
    object-fit: cover;
    border-radius: 100px;
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}

/* ads */
.rightads{
    height: 400px;
    margin: 5px 0px;
}
.rightads img{
    height: 100%;
    width: 100%;
    background: var(--span-color);
    object-fit: cover;
}
.centerads{
    height: 100px;
}
.centerads img{
    height: 100px;
    width: 100%;
    background: var(--span-color);
    object-fit: cover;
}
.catsads{
    background: var(--third-color);
    width: 100%;
}
.catsads img{
    height: 100%;
    width: 100%;
    background: var(--span-color);
    object-fit: cover;
}
.leftads{
    height: 747px;
    padding: 5px 0 0 0;
}
.leftads img{
    height: 100%;
    width: 100%;
    background: var(--span-color);
    object-fit: cover;
}

/* news sources */
.table th {
    background: var(--body-color);
    color: var(--third-color);
    padding: 3px;
    font-size:small;
}
.table td{
    padding: 3px;
    font-size:small;
    color: var(--body-color);

}

/* sources */
.sources{
    height: 195px;
    margin: 5px 0px;
    padding: 5px;
    background: var(--body-color);
    border-radius: 5px;
}
.sources h3{
    color: var(--third-color);
}
.sourcesdata{
    height: 110px;
    padding: 5px;
    background: var(--third-color);
    border-radius: 5px;
    text-align: center;
    position: relative;
    top: 75px;
}
.sourcesdata img{
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 100px;
    position: absolute;
    top: -65px;
    right: 0px;
    left: 0px;
    margin: auto;
    box-shadow: 0px 0px 5px var(--span-color);
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}
.srcdata{
    padding: 40px 0px 0px 0px;
}
.srcdata h4{
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
}
.srcdata h4 a:hover{
    text-decoration: none;
    color: var(--mostread-background);
}
.srcdata p{
    overflow: hidden;
    line-height: inherit;
    margin-bottom: auto;
}
.srcdata span{
    font-size: 70%;
}
/* paging */
.paging{
    display: block;
    padding: 5px 0px;
    border-radius: 5px;
}
.pagings{
    display: inline-flex;
}
.paging nav{
    height: 35px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: block;
}
.pagings a {
    display: block;
    padding: 5px 10px 0px 10px;
    border-radius: 5px;
    background: var(--categories-background);
    color: var(--body-color);
    margin: 3px 4px;
}
.pagings a:hover {
    background: var(--body-color);
    color: var(--categories-background);
}
.pagings a:active {
    background: var(--mostread-background);
    color: var(--third-color);
}
.pagings-active {
    background: var(--mostread-background)!important;
    /* color: var(--third-color)!important; */
    border-radius: 5px!important;
    /* margin: 3px 4px!important; */
    /* display: block; */
    /* padding: 5px 10px 0px 10px; */
}

/* footer */
footer{
    background:var(--body-color);
    padding: 40px 0px;

}
footer p{
    color: var(--third-color);

}
footer a{
    color: var(--categories-background);
}
footer a:hover{
    color: var(--body-color);
}
footer a i{
    font-size: 20px;
}
/* icons */
.span-icons{
    border-radius: 100px;
    font-size: small;
    color: gray;
    text-align: center;
}
.fa{
    border-radius: 100px;
    width: 25px;
    /*height: 25px;*/
    text-align: center;
}
.fa-angle-down{
    font: normal normal normal 14px/1 FontAwesome
}
.fa-whatsapp{
    background: #25D366;
    border: 3px solid #25D366;
    padding: 2px;
    width: 38px;
    height: 38px;
}

.fa-facebook{
    background: #3b5998;
    border: 3px solid #3b5998;
    padding: 2px;
    width: 38px;
    height: 38px;
}
.fa-twitter{
    background: #00acee;
    border: 3px solid #00acee;
    padding: 1px;
    width: 38px;
    height: 38px;
}
.fa-youtube{
    background: red;
    width: 38px;
    height: 38px;
}
.fa-instagram{
    background: #f09433; 
    width: 38px;
    height: 38px;
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 );
}
.fa-whatsapp:before,
.fa-facebook:before,
.fa-twitter:before,
.fa-instagram:before,
.fa-telegram:before,
.fa-envelope-o:before,
.fa-youtube:before
 {
    font-size: xx-large;
    color: var(--third-color);
}
.fa-telegram{
    background: #0088cc;
    border: 3px solid #0088cc;
    padding: 2px;
    width: 38px;
    height: 38px;
}

.fa-envelope-o{
    background: black;
    width: 38px;
    height: 38px;
}

/* ifream style */
.ifream{
    padding: 5px;
    height: 60px;
    overflow: hidden;
    background: var(--body-color);
    border-bottom: 3px solid var(--categories-background);
}
.ifream a{
    color: var(--third-color);
}
.ifream img{
    height: 44px;
    float: right;
    border-radius: 3px;
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}
.ifream h4{
    height: 30px;
    overflow: hidden;
    line-height: inherit;
    /* font-size: small; */
    padding: 0px;
    margin: auto;
}
.ifream i{
    width: 25px;
    height: 25px;
    padding: 3px;
    vertical-align: middle;
    border: 1px solid var(--third-color);
}
.ifream p{
    color: var(--categories-background);
    font-size: 60%;
}
.sourceView {
	width:100vw;
	height: 88vh;
	z-index:10;
    position: relative;
}

/* contact */
.contact{
    background: var(--categories-background);
    border-radius: 25px;
    padding: 15px;
    margin: 10px 0px;
}
.formcontact{
    font-size: small;
    background: var(--third-color);
    border-radius: 5px;
    margin: -20px -3px -21px -3px;
    padding: 10px;
}
.formcontact input, .formcontact textarea{
    font-size: small;

}
.formcontact button{
    font-size: small;
    color: var(--third-color);
    
}

/* share icons */
.share-div {
    position: absolute;
    right: 0;
    color: var(--light);
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: var(--success);
    display: inline-block;
    padding-top: 6px;
}

.share-div .list-social-media {
    visibility: hidden;
    display: block;
    height: 50px;
    margin-left: -200px;
    margin-top: -40px;
    background: var(--body-background);
    padding: 5px;
    border-radius: 10px;
}
.list-social-media {
  width: 200px;
}
.share-div:hover .list-social-media {
    visibility: visible;
    z-index: 9;
}







/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .pagings-active{
    margin: -5px 4px!important;
    }
/* ifream style */
.ifream{
    padding: 5px;
    height: 60px;
    overflow: hidden;
    background: var(--body-color);
    border-bottom: 3px solid var(--categories-background);
}
.ifream a{
    color: var(--third-color);
}
.ifream img{
    height: 44px;
    float: right;
    border-radius: 3px;
    background: var(--body-background);
    background-image: url(assets/images/bg.jpg);
    background-position: center;
}
.ifream h4{
    display: none;
}
.ifream i{
    width: 25px;
    height: 25px;
    padding: 3px;
    vertical-align: middle;
    border: 1px solid var(--third-color);
}
.ifream p{
    color: var(--categories-background);
    font-size: 60%;
}
/* .span-icons{
  font-size: small;
    color: gray;
    display: block;
    border: 1px solid red;
    overflow: hidden;
} */
.mcdetails-home{
  height: 125px!important;
}
.mcdetails-home p{
  display: none;
}
.mcreads p{
  display: none;
}
.card img{
    width: 52px;
    height: 53px;
}
.read-news{
  right: 0;
  /* left: 0; */
}
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
.leftads {
    display: none;
    }
.pagings a{
    margin: -5px 4px;
    }
.pagings-active{
    margin: -5px 4px!important;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}