/* smaller screens */

@media only screen and (max-width:480px) {
    body {
        font-size: 12px
    }
    .navbar {
        margin-top: 70px;
    }
    .title {
        font-size: 16px
    }
    .title img {
        width: 50px
    }
}

/* xs screens */

@media only screen and (max-width:768px) {
    body {
        font-size: 13px
    }
    .wide-slider ul.view,
    .wide-slider ul.view li,
    .wide-slider ul.view li img {
        height: 300px
    }
    .nav.navbar-nav {
        background: url(../images/light-60.png);
        text-align: center
    }
    .navbar {
        margin-top: 160px;
    }
    .header {
        height: 230px
    }
    .padding {
        padding-top: 10px
    }
    .elsalam-logo {
        height: 80px
    }
    .navbar-form {
        margin: 0
    }
    .search-box {
        background: transparent;
        height: auto;
        border: none
    }
    .search-box input,
    .search-box input:focus {
        border: 1px solid #b3b3b3
    }
    .nav > li {
        border-bottom: 1px solid #eee
    }
    .nav > li:hover {
        background-color: #eee;
        border-bottom: 1px solid #bbb
    }
    .title {
        font-size: 20px
    }
    .title img {
        width: 50px
    }
    .item {
        max-width: 250px;
        height: 140px;
    }
    h2 {
        font-size: 22px
    }
    h3 {
        font-size: 18px
    }
    .media-text {
        max-height: 60px;
        overflow: hidden;
    }
    .block-hieght {
        height: 40px;
        overflow: hidden
    }
    .list-hieght {
        height: 100px;
        overflow: hidden
    }
    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        overflow: visible
    }
    .search-box .btn {
        position: absolute;
        top: 0px;
        right: 80vw;
    }
    .navbar-form .form-control
    {
        width: 100%
    }
    .navbar-form {
        max-width: 90vw;
        margin-right: 5vw
    }
    #nt-title-container {
        display: none
    }
    #jssor_3 {
        max-width: 80vw
    }
       /** edit 2018/2 */
    .books .media-text
    {
     max-height: 3em;
    }
      .books h3 {
        margin-top: 20px
    }
    
}

/* sm screens */

@media only screen and (min-width: 769px) and (max-width:992px) {
    body {
        font-size: 14px
    }
    .wide-slider ul.view,
    .wide-slider ul.view li,
    .wide-slider ul.view li img {
        height: 400px
    }
    .navbar {
        height: 70px;
        margin-top: 200px;
    }
    .navbar-form {
        max-width: 18vw
    }
    .search-box {
        height: 30px
    }
    .search-box .btn {
        margin-top: -0.5em;
    }
    .navbar-form .form-control {
        width: 8vw;
        height: 25px;
        padding-right: 5px
    }
    .data-view {
        padding: 0.9em .5em;
    }
    .search-box .btn img {
        height: 30px;
        margin-top: 5px;
    }
    .header {
        height: 290px
    }
    .navbar-default .navbar-nav > li > a {
        font-size: 17px;
    }
    .nav > li > a {
        padding: 15px 6px
    }
    .search-box input {
        max-width: 130px
    }
    .search-box .btn {
        max-width: 40px
    }
    .title {
        font-size: 24px
    }
    .title img {
        width: 100px
    }
    .item {
        max-width: 500px;
        height: 140px;
    }
    .media-text {
        max-height: 60px;
        overflow: hidden;
    }
    .block-hieght {
        height: 40px;
        overflow: hidden
    }
    .list-hieght {
        height: 100px;
        overflow: hidden
    }
    
    /** edit 2018/2 */
    .books .media-text
    {
     max-height: 3em;
    }
      .books h3 {
        margin-top: 20px
    }
    
}

/* md screens */

@media only screen and (min-width: 993px) and (max-width:1200px) {
    body {
        font-size: 15px
    }
    .navbar {
        margin-top: 200px;
    }
    .wide-slider ul.view,
    .wide-slider ul.view li,
    .wide-slider ul.view li img {
        height: 500px
    }
    .navbar-default .navbar-nav > li > a {
        font-size: 20px;
    }
    .title {
        font-size: 30px
    }
    .title img {
        width: 120px
    }
    .data-view {
        padding: 0.9em .5em;
    }
}

/* lg screens */
@media only screen and (min-width: 1201px) and (max-width:1390px) {
    .navbar {
        margin-top: 230px;
    }
}

/* xlg screens */