@charset "utf-8";
/* 
================================
max-width: 1199px; 
================================
*/

@media screen and (max-width: 1199px) {
    .totop {
        display: none!important
    }
    .comment-list .comment .comment {
        padding: 10px 0;
        margin-left: -20px
    }
}
/* 
================================
max-width: 1191px; 
================================
*/

@media screen and (max-width: 1191px) {
    .tag-news-caption p {
        font-size: 80px
    }
}
/* 
================================
min-width:992px; 
================================
*/

@media screen and (min-width: 992px) {
    .open-menu {
        background-color: #111
    }
    .open-menu .header {
        top: 0
    }
    .open-menu .header .menu-main {
        z-index: 1;
        opacity: 1
    }
    .open-menu .wrap {
        transform: translate3d(0px, 400px, 0px) scale(0.98);
        border: 2px solid transparent
    }
    .open-menu .wrap:before {
        content: "";
        display: block;
        position: absolute;
        left: 20px;
        right: 20px;
        height: 15px;
        top: -18px;
        background-color: #fff;
        visibility: visible;
        opacity: 1
    }
    .open-menu .wrap:after {
        content: "";
        display: block;
        position: absolute;
        left: 40px;
        right: 40px;
        height: 15px;
        top: -34px;
        background-color: #fff;
        visibility: visible;
        opacity: 1
    }
    .open-menu .footer {
        transform: translate3d(0px, 400px, 0px);
        color: #fff
    }
    .open-menu .footer .social-footer {
        padding: 20px 0;
        text-align: center
    }
    .open-menu .footer .social-footer a {
        color: #fff
    }
    .open-menu .footer .social-footer a i {
        transform: rotate(45deg)
    }
    .open-menu .footer .social-footer a:before {
        content: "";
        display: block;
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 1px solid #222;
        opacity: 1;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }
    .open-menu .footer .social-footer a:hover {
        background-color: #ca2026
    }
    .open-menu .footer .social-footer a:hover:before {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0
    }
    .open-menu .footer .social-footer a.facebook {
        background-color: #3b5998
    }
    .open-menu .footer .social-footer a.twitter {
        background-color: #3a92c8
    }
    .open-menu .footer .social-footer a.google {
        background-color: #dd4b39
    }
    .open-menu .footer .social-footer a.pinterest {
        background-color: #cb2027
    }
    .open-menu .footer .social-footer a.youtube {
        background-color: #b00
    }
    .category-item .post-thumb {
        margin-bottom: 0
    }
}
/* 
================================
max-width:991px; 
================================
*/

@media screen and (max-width: 991px) {
    .wrap {
        padding: 20px 15px;
        margin: 0 auto
    }
    .logo-show {
        padding: 10px 0
    }
    .mobile-bar {
        height: 40px;
        margin: 0 10px;
        position: relative
    }
    .mobile-bar.show-search-mobile .search-box-mobile {
        z-index: 2;
        opacity: 1;
        visibility: visible
    }
    .mobile-bar.show-search-mobile .search-icon-mobile i:before {
        content: "\f00d"
    }
    .mobile-bar.show-search-mobile .menu-icon-mobile {
        opacity: 0;
        visibility: hidden
    }
    .menu-icon-mobile {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        color: #FFF;
        font-weight: bold;
        cursor: pointer;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
        margin: 0;
        text-transform: uppercase
    }
    .menu-icon-mobile i {
        font-size: 20px
    }
    .menu-icon-mobile span {
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: 2px;
        font-weight: 400;
        font-size: 16px
    }
    .search-icon-mobile {
        height: 40px;
        width: 40px;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 40px;
        font-size: 16px;
        color: #FFF;
        text-align: center;
        cursor: pointer
    }
    .search-box-mobile {
        position: absolute;
        top: 0;
        left: 0;
        right: 40px;
        height: 35px;
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }
    .search-box-mobile input {
        width: 100%;
        padding: 0;
        text-align: center;
        line-height: 35px;
        border: none;
        outline: none;
        text-align: left;
        text-transform: uppercase;
        font-family: "Oswald", serif;
        letter-spacing: 2px;
        font-size: 14px;
        background-color: transparent;
        color: #111
    }
    .menu-res {
        width: 280px;
        background-color: #000;
        position: fixed;
        top: 0;
        z-index: 999;
        overflow: auto;
        bottom: 0;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
        left: 0;
        -moz-transform: translateX(-280px);
        -webkit-transform: translateX(-280px);
        -o-transform: translateX(-280px);
        -ms-transform: translateX(-280px);
        transform: translateX(-280px)
    }
    .page {
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }
    .menu-res-inner {
        padding: 30px 20px 20px
    }
    .menu-res-inner ul {
        padding: 0;
        list-style: none
    }
    .menu-res-inner ul > li {
        border-bottom: 1px solid #111;
        position: relative
    }
    .menu-res-inner ul > li .fa-home {
        margin: 0 5px 0 0
    }
    .menu-res-inner ul > li a {
        font-size: 13px;
        text-transform: uppercase;
        color: #999;
        display: block;
        line-height: 40px;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }
    .menu-res-inner ul > li a:hover {
        color: #fff
    }
    .menu-res-inner ul > li.menu-item-has-children:before {
        display: block;
        content: "\f107";
        width: 40px;
        height: 40px;
        position: absolute;
        top: 0;
        right: 0;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #999
    }
    .menu-res-inner ul > li.open-submenu-active:before {
        content: "\f106"
    }
    .menu-res-inner ul > li > ul {
        padding: 0 0 10px 10px;
        display: none
    }
    .menu-res-inner ul > li > ul li {
        border: none;
        border-bottom: 1px solid #111
    }
    .menu-res-inner ul > li > ul li:last-child {
        border: none
    }
    .menu-res-inner ul > li > ul li a {
        display: block;
        line-height: 35px;
        text-transform: none;
        color: #666;
        padding: 0;
        font-weight: 400;
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
        text-transform: uppercase
    }
    .menu-res-inner ul > li > ul li a:hover {
        color: #fff
    }
    .menu-res-inner ul > li > ul li > ul {
        padding: 0 0 0 20px
    }
    .open-menu-mobile {
        overflow: hidden
    }
    .open-menu-mobile .page {
        -moz-transform: translateX(280px);
        -webkit-transform: translateX(280px);
        -o-transform: translateX(280px);
        -ms-transform: translateX(280px);
        transform: translateX(280px);
        -moz-transition: all ease .5s;
        -o-transition: all ease .5s;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }
    .open-menu-mobile .menu-res {
        right: 0;
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px)
    }
    .cols {
        padding: 0
    }
    .cols:before {
        display: none
    }
    .cols .colleft {
        float: none
    }
    .cols .colright {
        width: 100%;
        float: none;
        margin: 0
    }
    .sidebar-left .cols {
        padding: 0
    }
    .sidebar-left .cols:before {
        display: none
    }
    .sidebar-left .cols .colleft {
        float: none
    }
    .sidebar-left .cols .colright {
        width: 100%;
        float: none;
        margin: 0
    }
    .big-sticky-post {
        margin: -20px -15px 0
    }
    .big-sticky-post h1 {
        font-size: 35px;
        margin: 10px 0
    }
    .category-mid-post h2 {
        font-size: 25px
    }
    .category-mid-post-two h2 {
        font-size: 25px
    }
    .category-list-post {
        margin-top: 10px
    }
    .category-big-post h2 {
        font-size: 25px
    }
    .big-page-caption {
        border-bottom: 5px solid #111;
        margin: 0 0 30px
    }
    .big-page-caption p {
        font-size: 100px
    }
    .big-page-caption p {
        font-size: 80px
    }
    .grids.grids-small .grids-item {
        float: left;
        width: 50%
    }
    .grid-item {
        width: 50%
    }
    .grid-item.grid-item-large {
        width: 100%;
        float: none
    }
    .grids-small .grid-item {
        float: none;
        width: 50%
    }
    .bottom .bottom-col {
        float: none;
        width: 100%;
        margin-bottom: 20px
    }
    .bottom .bottom-col:nth-child(2) {
        border: none!important
    }
    .sitemap a i {
        font-size: 12px
    }
    .sitemap a {
        font-size: 12px
    }
    .sitemap span {
        font-size: 12px;
        margin: 0 6px
    }
    .category-item {
        padding: 15px 0;
        border: none
    }
    .category-small-item {
        padding: 20px 0
    }
    .detail-page {
        margin: 20px 0 0
    }
    .detail-meta {
        margin-bottom: 30px
    }
    .box-detail-caption {
        font-size: 18px
    }
    .comments-area .detail-caption {
        font-size: 18px
    }
    .article-bar {
        margin-top: -15px
    }
    .article-bar span {
        font-size: 14px
    }
    .article-fullpage h1 {
        font-size: 50px
    }
    .article-fullpage .sapo p {
        font-size: 18px;
        margin: 10px auto
    }
    .article-fullpage .post-content {
        margin: 30px 0
    }
    .article-fullpage .post-content p {
        font-size: 16px
    }
    .tag-news-caption {
        border-top: 5px solid #111;
        margin: 20px 0
    }
    .tag-news-caption p {
        font-size: 40px
    }
    .about-me .about-img {
        margin: -20px -15px 0
    }
    .shopbar h3 {
        float: none
    }
    .shopbar .sortby {
        float: none;
        width: 100%
    }
}
/* 
================================
max-width:767px; 
================================
*/

@media screen and (max-width: 767px) {
    .container {
        max-width: 390px
    }
    .middle {
        padding: 50px 0 0
    }
    .post-des p {
        font-size: 16px
    }
    .tag-news-caption p {
        font-size: 25px
    }
    .big-sticky-post .post-meta {
        display: none
    }
    .big-sticky-post h1 {
        font-size: 30px;
        margin: 20px 10px
    }
    .big-sticky-post .post-des p {
        font-size: 16px;
        margin: 10px
    }
    .category-list-post.category-list-post-two li {
        float: none;
        width: 100%
    }
    .category-list-post.category-list-post-two li:nth-child(2) > div {
        border-top: 1px dotted #111
    }
    .three-articles .three-item {
        min-height: 100px;
        border-top: 1px dotted #111;
        padding: 15px 0
    }
    .three-articles .three-item img {
        float: left;
        width: 100px;
        height: 70px;
        margin: 0 15px 0 0
    }
    .three-articles .three-item h3 {
        min-height: 70px;
        align-content: center;
        align-items: center;
        margin: 0;
        display: flex
    }
    .author-single .author-single-inner {
        padding: 20px 0 20px 100px
    }
    .big-page-caption p {
        font-size: 25px
    }
    .grids:before {
        display: none
    }
    .grids:after {
        display: none
    }
    .grids .grids-item {
        float: none;
        width: 100%
    }
    .grids.grids-large .grids-item {
        float: none;
        width: 100%
    }
    .grids-small .grid-item {
        float: none;
        width: 100%
    }
    .grids.grids-small .grids-item {
        float: none;
        width: 100%
    }
    .colleft .grids .grids-item {
        float: none;
        width: 100%
    }
    .grid-item {
        float: none;
        width: 100%
    }
    .grid-item.grid-item-large {
        float: none;
        width: 100%
    }
    .grids-large .grid-item {
        float: none;
        width: 100%
    }
    .social a {
        margin: 0 5px 10px
    }
    .detail-title h1 {
        font-size: 25px
    }
    .detail.detail-three-col {
        -moz-columns: 1;
        -webkit-columns: 1;
        columns: 1;
        text-align: left
    }
    .detail > p:first-child:first-letter {
        font-size: 40px;
        line-height: 30px;
        width: 30px;
        height: 30px
    }
    .author-single img {
        margin: 0 0 0 -80px;
        width: 60px;
        height: 60px
    }
    .article-fullpage h1 {
        font-size: 30px
    }
    .article-fullpage .post-content:first-letter {
        font-size: 40px;
        line-height: 30px;
        width: 30px;
        height: 30px
    }
    .article-fullpage .post-content:before {
        display: block;
        left: 0;
        width: 0
    }
    .article-fullpage .post-content {
        -moz-columns: 1;
        -webkit-columns: 1;
        columns: 1;
        text-align: left
    }
    .custom2-image, .post-des p, .ciz-post .post-title{
        height:auto;
        min-height: auto;
    }
    .open-login{
        top:0;
    }
}
/* 
================================
(min-width: 992px) and (min-height: 620px); 
================================
*/

@media screen and (min-width: 992px) and (min-height: 620px) {
    .affix {
        position: fixed!important;
        top: 20px;
        width: 300px
    }
}
/* 
================================
max-width: 600px; 
================================
*/

@media screen and (max-width: 600px) {
    .category-small-item .category-mid-post-two h2 {
        font-size: 18px;
        border-bottom: none!important
    }
    .category-small-item .category-mid-post-two h2:hover {
        border-bottom: none!important
    }
    .category-small-item .post-thumb {
        margin: 10px -15px 0 0
    }
}