/*
*
*   Designer By Onur KIRKLAROĞLU
*
*   @author Onur KIRKLAROGLU
*   @since Friday, September 07, ‎2018
*   @category  E-Belediye Custom Layout Design
*   @version 1.0.03
*
*   @Design 2
*   
*   @ Belediyenin Theme Layout Design Alanıdır. 
*
*   @ Bu alan ilgili layout yapısına göre tasarlandığı yapıdır. 
*   @ Layoutalanında ID tanımına layoutDesignFour denildiğinde çalışacaktır.
*   @ Aksi takdirde tasarım bozuk görünecektir.
*
*
*   @ Burada yazılan kod içerisinde oluşan yazım hatasından 
*   @ Universal Yazılım A.Ş. hiç bir şekilde sorumlu değildir.  
*/


/* Layout Second Design Görsel Değişiklikleri */

/* Left Area */

#layoutDesignSecond {
    background-color: #f7f7f7;
}

    #layoutDesignSecond .mobileMenuButton {
        display: none;
    }

    #layoutDesignSecond .leftArea {
        left: -15px;
    }

        #layoutDesignSecond .leftArea .leftLayout {
            position: fixed;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px #666;
        }

        #layoutDesignSecond .leftArea .logoArea img {
            width: 90%;
            margin: 5px auto;
            display: block;
        }

        #layoutDesignSecond .leftArea .userPicture .fa {
            margin: 15px auto;
            display: block;
            text-align: center;
            font-size: 100px;
            color: #a2a2a2;
        }

    #layoutDesignSecond .logoutBtnArea {
        color: #525e64;
        font-size: .813em;
    }

    #layoutDesignSecond .userlogon {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        color: #525e64;
    }

    #layoutDesignSecond .leftArea .navbar-right {
        margin-top: 0px;
        position: absolute;
        margin-left: -15px;
        width: calc(100% + 10px);
        background-color: #ccc;
        border-radius: 0px;
        border-color: transparent;
    }

    #layoutDesignSecond .leftArea .rightMenuloginArea {
        padding-left: 2px;
    }

        #layoutDesignSecond .leftArea .rightMenuloginArea i {
            margin-left: 0px;
        }

        #layoutDesignSecond .leftArea .rightMenuloginArea .btnloginAreaforRight {
            padding: 0px 2px;
        }

    #layoutDesignSecond .leftArea .menuLoginBtn {
        padding: 12px 2px;
    }

    #layoutDesignSecond .leftArea .kusak {
        position: absolute;
        right: -10px;
        margin-top: 42px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 9px 0 0;
        border-color: #525e64 transparent transparent transparent;
    }

    #layoutDesignSecond .leftArea .nav-side-menu {
        margin-top: 65px;
        margin-bottom: 10px;
        overflow: auto;
    }

    #layoutDesignSecond .footer {
        border-top: 0px;
        right: -5px;
        bottom: inherit;
        height: 75%;
        width: auto;
        transform: translate(0%, 50%);
        background: none !important;
    }

        #layoutDesignSecond .footer .sosyalAglar {
            padding: 0px;
            width: 100%;
            text-align: left;
            display: grid;
        }

#layoutDesignSecond .footer .sosyalAglar a {
    margin: 2px 0px;
    padding: 5px 10px;
    border-radius: 5px 0px 0px 5px !important;
}

    #layoutDesignSecond .slideArea .col-md-9 {
        padding-left: 15px;
    }

    #layoutDesignSecond .slideArea .col-md-3 {
        padding-right: 15px;
    }

    #layoutDesignSecond .slideArea .rightArea span {
        right: 15px;
        margin-top: -44px;
    }

    #layoutDesignSecond .slideArea .rightArea img {
        margin-bottom: 14px;
    }

    #layoutDesignSecond .textSeperatorArea {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #layoutDesignSecond .onlineContentArea .colorArea {
        padding-left: 0.250em;
        padding-right: 0.250em;
    }

    #layoutDesignSecond .diplayArea {
        background-color: #fff;
        padding: 0.875em;
        display: inline-block;
        width: 100%;
    }

    #layoutDesignSecond .onlineContentArea .buttonArea {
        height: 100px;
    }

        #layoutDesignSecond .onlineContentArea .buttonArea i {
            font-size: 3em !important;
            text-shadow: 2px 2px 3px #000;
            margin: 18px 0px;
        }

        #layoutDesignSecond .onlineContentArea .buttonArea span {
            font-size: 0.8em !important;
            text-align: left;
            position: absolute;
            bottom: 15px;
            padding-left: 5px;
        }

.togglebutton {
    left: -15px !important;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

#layoutDesignSecond .borcOdemeTopLayout .borcBilgi {
    right: 15px;
}

#layoutDesignSecond .borcOdemeTopLayout .iconArea {
    right: 25px;
}

@media only screen and (max-width: 991px) {
    #layoutDesignSecond .mobileMenuButton {
        display: block;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 9999;
        background-color: #357ceb;
        color: #fff;
        border-radius: 0px 0px 20px 0px;
        padding: 8px 10px;
        font-size: 1.2em;
        cursor: pointer;
    }

    #layoutDesignSecond .leftArea {
        z-index: 999;
        left: -800px;
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;
        transition: 1s ease-in-out;
    }

        #layoutDesignSecond .leftArea .leftLayout {
            width: 40%;
        }


    #layoutDesignSecond .slideArea .col-md-9 {
        padding-left: 0px;
    }
    #layoutDesignSecond .slideArea .col-md-3 {
        padding-right: 0px;
    }

    #layoutDesignSecond .slideArea .rightArea img {
        margin-bottom: 6px;
    }

    #layoutDesignSecond .footer {
        top: 0px;
        position: fixed;
    }

    #layoutDesignSecond .leftArea .rightMenuloginArea {
        padding: 10px 0px !important;
        margin-right: 2px;
    }

    #layoutDesignSecond .logoutBtnArea a {
        padding-right: 5px !important;
    }

}

@media only screen and (max-width: 767px) {
    #layoutDesignSecond .leftArea .leftLayout {
        width: 75%;
    }
}