/* ============================================================================
        - CSS Document
        - Theme Name: EXCEPTION Multi-Purpose Responsive Template.
        - Theme URI: http://demo.it-rays.com/exception
        - Author: IT-RAYS
        - Version: 1.0
============================================================================= */

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.clearfix:after,.container:after,.row:after{
    clear: both;
}
[class*="cell-"],.masonry .post-item {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right:15px;
    float:left
}
.row{
    margin-right:-15px;
    margin-left:-15px
}
.cell-12 {width: 100%;}
.cell-11 {width: 91.66666667%;}
.cell-10 {width: 83.33333333%;}
.cell-9 {width: 75%; padding-left:3%;}
.cell-8 {width: 66.66666667%;}
.cell-7 {width: 58.33333333%;}
.cell-6,.masonry .post-item {width: 50%;}
.cell-5 {width: 41.66666667%;}
.cell-4,.masonry.nobar .post-item {width: 33.33333333%;}
.cell-3 {width: 25%;}
.cell-2 {width: 16.66666667%;}
.cell-1 {width: 8.33333333%;}
.responsive-nav,.menuBtn{
    display:none
}
@media (min-width: 1200px) {
    .container,.pageWrapper.fixedPage {
        width: 1170px;
        margin:auto
    }
}

@media (max-width: 1024px) {
    .dark-bg h2{
        font-size:20px;
    }
    .head2-lft-links{
        float:right !important;
        width:auto !important
    }
    .head2-lft-links li,.head-style2 .right-bar{
        float:left !important
    }
    .bg-head2{
        display:none
    }
    .head2-lft-links li i{
        margin-right:10px;
        float:left;
        margin-top:4px
    }
    .head-style2 .top-menu{
        margin:auto;
        float:none !important;
        clear:both !important;
    }
    .top-nav > ul > li > a{
        padding-right:13px;
        padding-left:13px
    }
    .side-heading{
        font-size:26px
    }
    .team-box .team-socials li a{
        font-size:15px;
        padding:3px 5px
    }
    .pageWrapper.fixedPage{
        width: auto;
    }
    .masonry .post-image {
        max-height: 140px;
        overflow: hidden;
    }
}
@media (max-width: 1070px) {
    .testimonials-img{
        max-width:60px
    }
}
@media (max-width: 1010px) {
    .nav-2 .top-nav > ul > li:after {
    }
    .top-menu{
        margin-top: 2% !important;
        width:100% !important;
    }
    .top-nav{
        width:100% !important;
    }
    nav div > ul > li {
        width: auto !important;
    }
}
@media (max-width: 992px) {
    .mc4wp-form input:first-child {
    margin-top: -2.5%;
}
    [class*="cell-"],.masonry .post-item,.masonry.nobar .post-item,.masonry .post-image img {
        width: 100%;
        float:none;
        clear:both;
    }
    .masonry .post-image,.masonry .post-image img {
        height: auto;
    }
    .staff-3 [class*="cell-"]{
        margin-top:10px
    }
    .staff-3 [class*="cell-"]:first-child{
        margin-top:0px
    }
    header.top-head .logo a{
        background-position:50% 0 !important;
        margin-bottom:15px
    }
    .toolsBar .left,.top-bar [class*="cell-"]{
        clear:none !important;
        float:left !important;
        width:auto !important
    }
    .top-bar .right-bar{
        float:right !important
    }
    .toolsBar .right{
        clear:none !important;
        float:right !important;
        width:auto !important
    }
    .top-menu{
        margin-bottom:15px !important;
        float: none !important;
        display: table;
        margin: auto;
    }
    .service-box-1,.footer-top .cell-3,.service-box-2{
        margin-top:20px
    }
    .service-box-1:first-child,.footer-top .cell-3:first-child,.service-box-2:first-child{
        margin-top:0px
    }
    .staff-1 .cell-2{
        width:50%;
        float:left;
        clear:none
    }
    .staff-1 .cell-4{
        padding-top:30px;
        padding-bottom:30px;
    }
    .portfolio-items > div{
        width:32%;
        float:left;
        clear:none
    }
    .img-over {
        top: -69%;
        left: -46%;
        width: 220%;
        height: 220%;
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        -moz-transform: rotate(-34deg);
        transform: rotate(-34deg);
    }
    .img-over a.link b {
        left: 42%;
        top: 79%;
    }
    .img-over a b {
        left: 57%;
        top: 11%;
    }
    .copyrights{
        text-align:center
    }
    .social-list,.rit-dark{
        float:none !important;
        display:table;
        margin:auto;
        width:auto
    }
    .right-sidebar{
        margin-top:50px
    }
    .top-nav > ul > li > a i:after{
        display:none
    }
    #vertical-ticker{
        height:90px !important
    }
    .viewAll{
        padding:0 0 10px;
        overflow:hidden
    }
    .homeGallery .slick-prev, .homeGallery .slick-next{
        top:-38px
    }
    .homeGallery .slick-prev{
        right: 26px;
        left: auto;
    }
    .homeGallery .slick-next{
        left:auto;
        right: -5px;
    }
    .plan-title{
        height:auto !important;
        padding:20px 0;
        font-size:250%
    }
    .lft-plan .plan-year {
        right: -42px;
    }
    .rit-plan .plan-year {
        left: -47px;
    }
    .plan-year {
        bottom: 30px;
    }
    .team-boxes [class*="cell-"]{
        float:left;
        width:33%;
        clear:none
    }
    .team-boxes-2 [class*="cell-"]{
        float:left;
        width:50%;
        clear:none
    }
    header.top-head .logo a{
        margin:auto
    }
    .portfolio-img-slick{
        margin-bottom:20px
    }
    .project-info{
        margin-top:20px
    }
    .accordion li > h3 a{
        width:80%
    }
    .my-details [class*="cell-"]{
        float:left;
        width:33%;
        clear:none
    }
    .btn.ExtraLargeBtn{
        margin:20px auto 0;
        width:60%
    }
    .blog-thumbs .post-image{
        max-height:none
    }
    .blog-thumbs .post-image,.masonry .post-image{
        max-height:177px;
        overflow:hidden;
        margin-bottom:20px
    }
    .blog-thumbs .post-image img,.masonry .post-image img{
        width:100%
    }
}
@media (max-width: 768px){
    .top-menu,.top-bar .cell-5,.head-style2 .right-bar{
        display:none !important
    }
    .pageWrapper{
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        z-index:9;
        position:relative;
        background:#fff
    }
    body{
        overflow-x:hidden
    }
    .responsive-nav{
        position:fixed;
        width:60%;
        overflow:auto;
        left:0;
        top:0px;
        height:100%;
        z-index:1;
        display:block
    }
    .responsive-nav.shown{
        z-index:6666
    }
    .colBody {
        position:fixed;
        margin-left:60%;
    }
    .colBody:before{
        content:"";
        background:rgba(0,0,0,.8);
        position:fixed;
        width:100%;
        height:100%;
        display:inline-block;
        z-index:99999
    }
    .menuBtn{
        padding: 9px 12px 8px 12px;
        margin: 0;
        cursor:pointer;
        z-index:999;
        top:0px;
        left:0px;
        position: absolute;
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        display:block
    }
    .menuBtn-selected{
        margin-left:60%
    }
    .menuBtn-selected i:before{
        content:"\f00d"
    }
    .menuBtn:focus,.menuBtn:hover{
        color:#fff
    }
    .menuBtn i{
        font-size: 21px;
    }
    .responsive-nav h3{
        color:#fff;
        margin:0px;
        padding:15px;
        font-size:100%;
        text-transform:uppercase;
        font-weight:bold
    }
    .responsive-nav ul li{
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .responsive-nav ul li a{
        display: block;
        color: #fff;
        font-size: 14px;
        outline: none;
        padding:10px 15px;
        text-transform:uppercase
    }
    .responsive-nav ul li a i{
        margin-right:10px
    }
    .responsive-nav > ul > li.selected{
        background:#474747
    }
    .responsive-nav ul li a:hover{
        text-decoration:none
    }
    .responsive-nav ul li ul,.responsive-nav ul li div.div-mega{
        display: none;
    }
    .div-mega-section{
        float:none;
        width:100%
    }
    .responsive-nav ul li ul li a{
        font-size:13px;
        text-transform:none
    }
    .responsive-nav ul li ul li.selected{
        background:#575757
    }
    .responsive-nav ul ul ul{
        margin-left:25px
    }
    .responsive-nav ul ul ul li a{
        font-size:11px
    }
    .portfolio-items > div{
        width:48%;
        float:left;
        clear:none
    }
    .err-404:before{
        left:44.5%
    }
    .steps li {
        display:block;
        width:100%;
        margin:0 0 5px
    }
    .top-nav-style3{
        display:none
    }
    .pricing-table{
        margin-bottom:50px
    }
    .pricing-table-2{
        margin-bottom:40px
    }
    .team-box-2{
        margin-bottom:70px
    }
    #vertical-ticker{
        height:60px !important
    }
    .team-boxes [class*="cell-"]{
        width:50%;
    }
}
@media (max-width: 640px){
    .pager,.pager *{
        transform: skew(0deg, 0);
        -webkit-transform: skew(0deg, 0);
        -moz-transform: skew(0deg, 0);
        -o-transform: skew(0deg, 0);
        -ms-transform: skew(0deg, 0);
    }
    .pager ul li a, .pager ul li span{
        padding:0 15px !important
    }
    .icon-cont:after{
        border-width: 5px 5px 0 5px;
        bottom:-5px;
    }
    .plan-block{
        padding:20px 10px 0 !important
    }
    .lft-plan .plan-year{
        right:0px
    }
    .rit-plan .plan-year{
        left:0px
    }
    .levels-2 li{
        display:block;
        float:none;
        margin:0 0 30px;
        text-align:center;
        width:100%
    }
    .level-out-2{
        display:table;
        margin:auto
    }
    .comment-content p{
        padding-left: 0px;
        padding-top: 15px;
        clear: both;
    }
    ul.child-comment {
        margin-left: 37px;
    }
    ul.child-comment li:before{
        top:35px
    }
    ul.child-comment li:after {
        height: 110%;
        top: -94%;
    }
    article.comment {
        overflow:hidden
    }
    .comment-author{
        background:transparent none
    }
    .author-name{
        margin:0;
        padding: 0;
        float:none
    }
    .comment-reply {
        font-size: 11px;
        padding: 3px 7px;
    }
    .comment-date {
        padding: 3px 10px 0 0;
        float:none
    }
    .comment-avatar{
        position: static;
        float:left
    }
    .product-specs a.btn, .item-avl > div{
        margin-bottom:5px
    }
    .fun-title{
        font-size:250%;
        margin-bottom:15px
    }
    [class*="skew"],.accordion li > h3[class*="skew-"] u::before{
        transform: skew(0deg, 0);
        -webkit-transform: skew(0deg, 0);
        -moz-transform: skew(0deg, 0);
        -o-transform: skew(0deg, 0);
        -ms-transform: skew(0deg, 0);
    }
    .tabs-vertical .tabs-pane,.accordion-horizontal > li.active{
        width:60%
    }
    #vertical-ticker{
        height:30px !important
    }
    #filters li a{
        padding:0 9px
    }
    .my-details [class*="cell-"],.my-img img{
        clear:both;
        margin:auto;
        float:none;
        display:table
    }
    .my-img .my-name{
        margin:15px auto;
        padding:0
    }
    .post-image{
        clear:both;
        margin:0 0 5px;
        float:none !important;
        margin-right:0 !important
    }
    .post-image img{
        width:100% !important;
    }
    .post-item{
        padding-bottom:15px
    }
}
@media (max-width: 500px){
    .login-controls .input-box,.login-controls .check-box-box{
        clear:both;
        margin:0 0 3px
    }
    .login-box .left.main-bg{
        float:none;
        clear:both;
        width:60px;
        margin:0
    }
    .check-box-box a{
        float:none !important;
        clear:both !important;
        display: table;
        margin: 0 !important;
    }
    .filter-by{
        margin-left:10px
    }
    .cart-icon{
        margin-top:10px
    }
}
@media (max-width: 480px){
    .dark-bg .btn-large{
        font-size:18px
    }
    .testimonials-bg > span{
        font-size:11px
    }
    .testimonials-img{
        max-width:60px
    }
    .portfolio-filterable .white-bg,.portfolio-filterable .gry-bg{
        margin:0 25px 10px;
    }
    #filters {
        width:100%
    }
    #filters li{
        display:block;
        float:none;
    }
    .portfolio-items > div{
        width:100%
    }
    .follow-block .follow-link{
        font-size:14px
    }
    .err-404:before{
        left:40.5%
    }
    .small-txt-box{
        margin-bottom:5px
    }
    .small-txt-box input[type=text]{
        width:80px !important
    }
    .products-filter-top{
        padding:10px 0;
    }
    .products-filter-top .left{
        padding:0 0 5px
    }
    .pager ul li a, .pager ul li span{
        padding:0 10px !important
    }
    .shop-bottom-btns .btn{
        clear:both;
        display:table;
        margin:5px auto;
        float:none !important
    }
    .portfolio-filterable .filter-by{
        display:block;
        clear:both;
        margin-bottom:5px
    }
    .portfolio-filterable [class*="skew"],.comment-reply [class*="skew"]{
        transform: skew(0deg, 0);
        -webkit-transform: skew(0deg, 0);
        -moz-transform: skew(0deg, 0);
        -o-transform: skew(0deg, 0);
        -ms-transform: skew(0deg, 0);
    }
    .tabs ul li{
        float:none
    }
    .tabs-vertical > ul{
        float:none;
        width:100%
    }
    .post-image{
        height:auto
    }
    .toolsBar [class*="cell-"]{
        clear:both !important;
        float:none !important;
        width:100% !important;
        padding:10px 0;
        text-align:center
    }
    .list-grid a{
        float:none
    }
    .masonry .post-item,.masonry.nobar .post-item{
        float:none;
        padding:0;
        margin:15px 0;
        width:100%;
        clear:both
    }
    .post-image{
        height:auto !important;
        max-height:200px
    }
    .share-post .sh, .share-post ul li a {
        padding: 5px 6px;
        font-size: 12px;
    }
    .comment-avatar{
        width:50px;
        height:50px
    }
    .comment-author,.comment-author *{
        transform: skew(0deg, 0);
        -webkit-transform: skew(0deg, 0);
        -moz-transform: skew(0deg, 0);
        -o-transform: skew(0deg, 0);
        -ms-transform: skew(0deg, 0);
    }
    .custom-heading{
        font-size:20px
    }
    .social-list li{
        font-size:12px
    }
    [class*="block-bg-"]{
        background-attachment:scroll !important
    }
    .list-grid{
        display:none
    }
    .copyrights span{
        clear:both;
        display:block
    }
    .slick-slider .slick-list{
        padding-bottom:40px
    }
    .portfolio-img-slick .slick-list{
        padding-bottom:0px
    }
    .slick-prev, .slick-next{
        top:auto !important;
        bottom:0
    }
    .slick-prev{
        right:auto !important;
        left:50% !important;
        margin-left:-29px
    }
    .slick-next{
        left:auto !important;
        right:50% !important;
        margin-right:-29px
    }
    .team-boxes [class*="cell-"]{
        float:none;
        width:100%;
        clear:both
    }
    .btn.ExtraLargeBtn{
        margin:20px auto 0;
        width:80%
    }
    .top-bar li:first-child{
        display:none
    }
    .post-lft-info div{
        padding: 15px;
        font-size: 13px;
    }
    .post-lft-info .tri-col{
        border-width: 15px 30px 0 30px;
        bottom: -15px;
    }
    .portfolio-img-slick .slick-prev{
        right: 0 !important;
        left: auto !important;
        margin-right: 65px;
    }
    .portfolio-img-slick .slick-next{
        right: 0 !important;
        left: auto !important;
        margin-right: 0px !important;
    }
    .masonry.nobar .blog-posts{
        padding: 0 15px
    }
}
@media (max-width: 320px){
    .dark-bg .btn-large{
        font-size:18px
    }
    .staff-1 .cell-2 {
        width: 100%;
        float: none;
        clear: both;
    }
    .toolsBar select{
        margin-right:5px
    }
    table *{
        font-size:10px;
    }
    .tabs-vertical .tabs-pane{
        width:100%
    }
}