@media only screen and (min-width: 200px) and (max-width: 500px) {}


/*			tablet and ipad size		*/

@media only screen and (min-width: 200px) and (max-width: 767px) {
    .newSliderBox h3 {
        font-weight: 500!important;
        font-size: 12px!important;
        opacity: 1;
    }
    .newSliderBox h4 {
        opacity: 1;
        line-height: 20px;
        font-size: 15px!important;
        font-weight: 700!important;
    }
    .nav>li {
        float: none!important;
    }
    .navbar-nav {
        margin-top: 0;
    }
    .petroLogo {
        float: right;
    }
    .navbar-toggle {
        margin-top: 21px;
        margin-left: 10px;
        border-radius: 0;
    }
    .fixed {
        position: relative;
        top: 0;
        background: rgba(255, 255, 255);
    }
    .dropdown-menu {
        background-color: #5f4a38;
        border: 0 solid #eaeaea;
    }
    .dropdown-menu li a {
        color: #584433!important;
        vertical-align: middle;
    }
    .dropdown-menu li a img {
        width: 20px;
        margin-left: 10px;
    }
    .dropdown-menu li:hover a {
        background: #584433!important;
        color: white!important;
    }
    .dropdown-menu .divider {
        margin: 0!important;
        padding: 1px 0;
        background: #665444;
    }
    .treasuresBox {
        margin: 0!important;
    }
    .docBox {
        margin: 20px 0 0!important;
    }
    .treasuresBox>div {
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
    }
    .treasuresBox div div {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        cursor: url('../images/cursor/angle.ico'), default;
        background: rgba(85, 64, 47, 0);
        background: -moz-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(85, 64, 47, 0)), color-stop(100%, rgba(85, 64, 47, 1)));
        background: -webkit-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -o-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -ms-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: linear-gradient(to bottom, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#55402f', endColorstr='#55402f', GradientType=0);
    }
    .treasuresBox div:hover div {
        top: 0;
        background: rgba(85, 64, 47, 0);
        background: -moz-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(85, 64, 47, 0)), color-stop(100%, rgba(85, 64, 47, 1)));
        background: -webkit-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -o-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: -ms-linear-gradient(top, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        background: linear-gradient(to bottom, rgba(85, 64, 47, 0) 0%, rgba(85, 64, 47, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#55402f', endColorstr='#55402f', GradientType=0);
    }
    .treasuresBox div div h2 {
        top: auto;
        bottom: 20px;
        margin: 0!important;
        visibility: visible;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .treasuresBox div:hover div h2 {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        visibility: visible;
    }
    .book {
        text-align: center;
    }
    .book div div div img {
        width: 35%;
    }
    .book div div div h2 {
        text-align: center;
    }
    .book div div div h3 {
        margin: 20px 20px 0 0 !important;
        padding: 0!important;
        font-family: yekan;
        text-align: center;
        color: #614126;
        font-size: 17px;
        direction: rtl;
    }
    .book div div div p {
        color: #494949;
        margin: 25px 20px 0 0 !important;
        padding: 0!important;
        font-family: IRANsans;
        text-align: justify;
        font-size: 17px;
        line-height: 30px;
        direction: rtl;
    }
    .newsBox {
        height: 270px;
        overflow: hidden;
    }
    .ms-skin-light-3 .ms-nav-next {
        display: none;
    }
    .ms-skin-light-3 .ms-nav-next,
    .ms-skin-light-3 .ms-nav-prev {
        display: none;
    }
    .colright {
        padding-left: 0!important;
        padding-bottom: 30px;
    }
    .pager2 {
        background: white!important;
        position: relative!important;
        top: 0%;
        right: 0;
        padding: 50px 0 50px!important;
        margin: 0 !important;
        z-index: 5;
    }
    .pager2 ul {
        padding: 0!important;
        margin: 0!important;
        font-size: 0;
        text-align: center;
    }
    .pager2 ul a {
        color: #55402f;
        text-decoration: none;
        background: #55402f!important;
        margin-left: 10px;
        margin-right: 10px;
        color: #55402f;
    }
    .pager2 ul li {
        padding: 10px;
        margin: 0 0 20px!important;
        list-style: none;
        font-size: 17px;
        text-align: center;
        display: inline-block;
        font-family: IRANsans;
        border: solid 2px #55402f;
        background: white;
    }
    .pager2 ul a li:hover {
        background: #55402f!important;
    }
    .pager2 ul a:hover {
        color: white;
    }
    .selected {
        padding: 15px !important;
        background: #55402f!important;
        color: white!important;
        cursor: default;
    }
    .contactUS div div div {
        border-bottom: dashed #eee 1px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .contactUS div div div:last-child {
        border-bottom: none;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .breadcrumb {
        margin-left: 0!important;
    }
    .newsBox {
        height: auto!important;
    }
    .newsBox h2 {
        height: auto!important;
    }
    .utility span div h2 {
        font-size: 30px!important;
    }
    .p15 {
        padding: 20px!important;
    }
    .ms-slide:hover a,
    .newSliderBox:hover span:last-child a {
        margin-bottom: 20px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-font-smoothing: antialiased;
    }
    .newSliderBox {
        left: 20px;
        right: 20px;
    }
    .newSliderBox a {
        margin: 0 0 20px;
        padding: 2px 8px;
        text-decoration: none;
        border: solid 2px white;
        color: white;
        font-size: 12px!important;
        visibility: visible;
        border-radius: 5px;
    }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-device-width: 321px) and (orientation: landscape) {}


/*			IPAD SIZE MAX 		*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breadcrumb {
        margin-left: 0!important;
    }
    .p15 {
        padding: 20px!important;
    }
}


/*			DESKTOP SIZE 		*/

@media only screen and (min-width: 992px) {}