* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

@font-face {
    font-family: "Yekan";
    src: url("fonts/Yekan.eot"), url("fonts/Yekan.ttf"), url("fonts/Yekan.woff");
}

body {
    direction: rtl;
    font-family: "Yekan";
    background: lightgrey;
}

#main {
    width: 1020px;
    height: auto;
    border: 1px solid lightgrey;
    margin: 0px auto;
}

nav {
    width: 100%;
    height: auto;
    background-color: #24252a;
}

#logo {
    width: 142px;
    height: auto;
    float: right;
}

#menu {
    width: calc(100% - 342px);
    float: right;
}


nav #menu ul li {
    list-style: none;
    display: inline-block;
    padding: 25px 20px;
}

a {
    text-decoration: none;
}

nav #menu ul li a {
    color: #fffceb;
}

    nav #menu ul li a:hover {
        color: #60c7ce;
    }

.social {
    width: 200px;
    padding: 20px 0px;
    float: left;
    font-size: 25px;
    text-align: left;
}

    .social a {
        margin: 0px 10px;
    }

    .social .fa-google {
        color: #e44134;
    }

    .social .fa-twitter {
        color: #53a8e7;
    }

    .social .fa-instagram {
        color: #fffceb;
    }

    .social .fa-send {
        color: #20b5e1;
    }

.clear-fix {
    clear: both;
}

article {
    width: 100%;
    min-height: 70vh;
    text-align: justify;
    background: white;
}

footer {
    background: #24252a;
    text-align: justify;
    height: auto;
    color: #fffceb;
}

footer h3 {
    color: #60c7ce;
}

footer .footer-col {
    width: 33.333%;
    float: right;
    padding: 10px 20px;
}

footer ul li {
    list-style: none;
}

footer ul li a {
    color: #fffceb;
}
#slider{
    width:100%;
    height:auto;
}
#slider img{
    width:100%;
}
#last-articles{
    width:100%;
    height:auto;
}
#last-articles .title{
    padding:10px 0px;
    text-align:center;
}
#last-articles hr.seprator {
    width: 150px;
    border: 2px solid #60c7ce;
    margin: 0px auto;
}
#last-articles figure{
    width:calc(33.333% - 13.33px);
    border:1px solid #c8c8c8;
    float:right;
    margin:10px 10px 10px 0px;
    
}
#last-articles figure img{
    width:100%;
}
#last-articles figure figcaption{
    width:100%;
    padding:5px;
}
#last-articles figure figcaption h3{
    color:#30676b;
}
#about{
    width:60%;
    height:auto;
    padding:10px 0px;
    text-align:center;
    margin:0px auto;
    line-height:30px;
}
#contact{
    width:60%;
    height:auto;
    text-align:center;
    margin:0px auto;
    line-height:40px;
    padding-top:50px;
}
#login{
    width:50%;
    height:auto;
    padding:50px 20px;
    float:right;
}
#register {
    width: 50%;
    height: auto;
    padding: 50px 20px;
    float: left;
}
#login table, #register table {
    width: 100%;
}
#login form input, #register form input{
    width:100%;
    border:1px solid #c8c8c8;
    border-radius:2px;
    padding:5px;
}
#login form button {
    padding: 5px 20px;
    font-family: Yekan;
    background: #e44134;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    color:white;
}
#login form table {
    border: 1px solid #e44134;
}
#login form table thead th {
    text-align: center;
    padding: 10px 0px;
    background-color: #e44134;
    color:white;
}
#register form button {
    padding: 5px 20px;
    font-family: Yekan;
    background: #60c7ce;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    color: black;
}


#register form table {
    border: 1px solid #60c7ce;
}

#register form table thead th {
    text-align: center;
    padding: 10px 0px;
    background-color: #60c7ce;
    color: black;
}