/*@charset "utf-8"; */
/* CSS Document */
@charset "utf-8";
@font-face {
    font-family:'BYekan';
    src:url('../font/BYekan.eot'); 
	src:local('☺'), 
		  url('../font/BYekan.ttf') format('truetype'), 
		  url('../font/BYekan.woff') format('woff'); 
}
@font-face {
    font-family:'Lalezar-Regular';
    src:url('../font/Lalezar-Regular.otf'); 
	src:local('☺'), 
	      url('../font/Lalezar-Regular.otf') format('truetype')
		  url('../font/Lalezar-Regular.ttf') format('truetype'); 
}


/*
@font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');


src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
    
  */  
    
    
* {
    box-sizing: border-box;
}
body {
	margin:0px;
	font-family:'BYekan';
	font-size:14px;
    color:#333;
    background: url('../images/bg.png');
}
.BASE {
    width: 90%;
    margin: 0 auto;
}
/*    MENU.css   */
.carousel-caption {
    font-family:'Lalezar-Regular';
    font-size:50px;
}
.header {
    background-color: #333;
    color: #fff;
    text-align: center;
    direction: rtl;
    padding: 8px 15px 5px 15px;
}
.row-1::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 0px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.empty1 {
    padding: 10px;
}
/* row-1 ---------------*/
/* FOOTER ---------------*/
.empty2 {
    padding: 5px;
}
.footer {
    background-color: #222;
    color: #ccc;
    height: 150px;
    text-align: center;
    font-size: 12px;
    padding: 15px;
    margin: 0px 16.66%;
    border-top: 1px dotted #000;
}
.footermg {
    height: 30px;
    margin-top: 30px;
}
.footermg img {
    padding-left: 5px;
}













/* row-1 -----------------------------------------*/
.col-base {
    border-left: 1px dotted #000;
    border-right: 1px dotted #000;
    padding: 0px 40px 20px 40px;
    background-color: #ddd;
}









/* ADS - MORE ------------------------------------*/
.ads {
    padding: 0px 10px 30px 0px;
}
.more {
    padding: 0px 0px 30px 10px;
}
.ads2 {
    display: none;
}

/* common -------------------*/
.title {
    text-align: center;
    padding: 10px 0px 10px;
    background-color: #999;
    font-family: 'Lalezar-Regular';
    font-size: 16px;
    color: white;
    box-shadow: 0 3px 5px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.50);
}
.banneritem {
    width: 100%;
    float: left;
    margin-bottom: 15px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.50);
}
.banneritem img {
    width: 100%;
}

/* mostread -----------------*/
ul.mostread {
    list-style-type: none;
    margin: 0;
    margin-bottom: 30px;
    padding: 0;
    text-align: center;
    box-shadow: 0 3px 5px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.50);
}
ul.mostread li a {
    display: block;
    text-decoration: none;
    color: #555;
    background-color: #EEE;
    padding: 10px;
    border-bottom: 1px dotted #fff;
}
ul.mostread li a:hover {
    text-decoration: none;
    color: #fff;
    background-color: #f9b233;
}

/* more2 --------------------*/
.bannergroup2 {
    text-align: center;
    padding: 10px 0px 10px;
    font-family: 'Lalezar-Regular';
    font-size: 16px;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.50);
}
.bannergroup2:hover {
    color: #FFF;
    background-color: #f9b233;
}
.bannergroup2 .banneritem {
    margin-top: 10px;
    margin-bottom: 15px;
}













/* @  -------------------------------------------------*/
@media only screen and (max-width: 768px) {
    .BASE {
        width: 100%;
    }
    .carousel-caption {
        font-size:20px;
    }
    [class*="col-"] {
        width: 100%;
    }
    .ads1 {display: none;}
    .ads2 {display: inline-block; margin-bottom: 30px;}
    .more1 {margin-top: 30px;}
    .more2 {margin-bottom: 20px;}
    .ads, .more {
        padding: 0px 80px 0px 80px;
    }
    .footer {
        margin: 0px;
    }
}