﻿

.four-design #leftsidebar {
    display: none;
}

.four-design section.content{margin-left:0px !important;}
section.content.section-active{display:none;}
.four-design .second-design-tab {
    display: none;
}
.four-design .second-design-tab-width{width:100%;}
.four-design .four-toggle {
    display: block;
}

.four-toggle {
    display: none;
    position: absolute;
    left: 185px;
    font-size: 16px;
    padding: 3px 10px;
    top: 14px;
    cursor: pointer;
    border: 1px solid #fff;
  
    color:#fff;
    transition:.4s linear
}
    .four-toggle:hover {
        color: var(--main-bg-lcolor);
        background: #fff;
    }
.four-design-nav{display:none;}
    .four-design-nav.four-nav-active {
        display: block;
        margin-top: 65px;
        padding: 20px;
        background: var(--main-bg-rcolor);
        transition: .4s linear;
        /*height: calc(100vh - 65px);*/
        height:100%;
    }
.four-menu {
    width: 100%;
    float: left;
    background: var(--main-bg-lcolor);
}
    .four-menu ul {
        width: 100%;
        float: left;
        margin-bottom: 0px;
        border: 1px solid #fff;
        border-bottom: 0px;
        display: flex;
        flex-wrap: wrap;
    }
        .four-menu ul li img {
            max-width: 35%;
            margin: auto;
            display: block;
        }
        .four-menu ul li p {
            text-align: center;
            color: #fff;
            text-transform: capitalize;
            font-size: 16px;
            margin-bottom: 0px
        }
        .four-menu ul li {
            width: 33.33%;
            float: left;
            padding: 15px 5px;
            border-bottom:1px solid #fff;
            border-right:1px solid #fff;
         }
        .four-menu ul li:nth-child(3n){border-right:0px;}





    @keyframes mymove {
        0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 500px 0px;
    }
}

.four-design .dash-top-second .info-box-4 {
    border-radius: 0px;
    transition: 0.5s;
    background: repeating-linear-gradient( 75grad, rgba(77, 70, 70, 0.84) 25%, rgba(72, 67, 67, 0.23) 26%, rgba(36, 29, 29, 0.37) 50%, var(--border-color) 100% );
    animation: mymove 6s infinite linear;
    background-color: whitesmoke;
}
.four-design .four-toggle.for-four-m {
    display: none;
}
.four-design .four-image-nav {display:none;}
.four-image-nav-second{display:none;}
.four-design .four-image-nav-second {
    display: block;
    width: 30px;margin:auto;
   
}
.four-image-ani {
    -webkit-animation: tada 2s ease infinite;
    animation: tada 2s ease infinite;
}
.four-design .tmw-layoutht .navbar-nav > li > a {
    background-color: transparent !important;
}
    .four-design .tmw-layoutht .navbar-nav > li > a i {
        top: 0px !important;
        position: absolute;
        right: -6px;
        left: auto !important;
        z-index: 9;
        background: var(--main-bg-lcolor);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff !important;font-size:15px !important;
    }
    .four-design .tmw-layoutht .navbar-nav > li > a.btn-circle{overflow:visible;}
    .four-design .tmw-layoutht .navbar-nav > li {
        margin-right: 15px;
    }
.four-design .btn-default:hover, .four-design .btn-default:active, .four-design .btn-default:focus {
    background-color: transparent !important;
}
.four-design .tmw-layoutht button.tlc.btn-default {
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    
}
.nav-mobile-four{display:none;}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    10% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    }

    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    }

    30% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }

    70% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }

    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }

    40% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }

    60% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }

    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}





    /*======== Responcive Design Start ================*/


@media (max-width:1170px) {
    .four-design .for-four-l {
        display: none;
    }
    .four-design .four-toggle.for-four-m {
        display: block;
    }
    .four-design #sidebar-open{display:none !important;}
}
@media (max-width:767px) {
    .four-toggle{top:16px;left:15px;}
    .four-menu {
        margin-bottom: 10px;
    }
        .four-menu ul li p{font-size:14px;}
    .nav-mobile-four {
        display: block;
        font-size: 18px;
        padding: 5px 15px;
        margin: 11px 5px;
        color: #fff;
        font-weight: 500;
       cursor:pointer;text-transform:uppercase;
    }
        .nav-mobile-four span {
            color: #fff;
            float: right;
            font-size: 30px;
            line-height: 20px;
        }
    .four-menu .nav-mobile-four-or {
        display: none;
    }
}
@media (max-width:450px) {
    .four-toggle {
        left: 8px;
        font-size: 13px;
        padding: 3px 3px;
    }
    .four-design-nav-top > .row {
        margin-right: -25px;
        margin-left: -25px;
    }
   
}
