/*---------------------------------------------------------------*/
/*-------------------------- global.css -------------------------*/
@media screen and (max-width: 880px) {
    #content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .social-container {
        width: 100%;
    }

        .social-container .social-items {
            position: static;
            margin-left: 0px;
            top: 0px;
            overflow: hidden;
            clear: both;
            /*width: 230px;*/
            width: 34px;
        }

            .social-container .social-items .social-item {
                padding: 4px;
                float: left;
            }

    #footer {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media screen and (min-width: 811px) {
    .main-menu {
        display: block !important;
    }
}

@media screen and (max-width: 810px) {
    #content {
        padding-left: 20px;
        padding-right: 20px;
    }

    #main-container {
        width: 92%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .main-menu {
        display: none;
    }

        .main-menu .main-menu-item {
            width: 100%;
            float: none;
        }

            .main-menu .main-menu-item a div {
                text-align: left;
                padding-left: 15px;
                border-bottom: 1px solid #3d6ec9;
            }

    #content-holder {
        padding: 20px 0px;
    }

    #ShowHide-menu {
        display: block;
    }

        #ShowHide-menu img {
            position: absolute;
            top: 10px;
            left: 15px;
            height: 30px;
        }

    .sub-menu .seperator {
        padding: 0px 15px;
    }

    #mainNav {
        margin-left: 30px;
    }
}

@media screen and (max-width: 740px) {
    #content {
        padding-left: 25px;
        padding-right: 25px;
    }

    .gallery .gallery-floater {
        float: none;
        width: 100%;
    }

    #mainNav {
        margin-left: 30px;
    }
}

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


@media screen and (max-width: 670px) {
    #content {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hide-for-mobi {
        display: none;
    }

    #mainNav {
        margin-left: 50px;
    }
}

@media screen and (max-width: 655px) {
    /*    #content{
        padding-left:50px;
        padding-right:50px;
    }*/

    #contact-details-cont .contact-details-item {
        float: none !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 500px) {
    .sub-menu .seperator {
        padding: 0px 10px;
    }
}


/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------------------------- FORM -------------------------*/
@media screen and (max-width: 570px) {
    #content #mainNav {
        display: none;
    }

    #content {
        padding-top: 20px;
    }

    .form .field {
        text-align: left !important;
    }

    .form .sec-caption {
        margin-left: 0px !important;
    }
}

/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------------------------- ZONE MENU -------------------------*/
@media screen and (max-width: 670px) {
    .sub-menu {
        padding: 0px;
        border-left: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
    }

        .sub-menu .sub-menu-item {
            display: block;
        }

            .sub-menu .sub-menu-item > a {
                border-bottom: 1px solid #e5e5e5;
                display: block;
                text-align: left;
                padding-left: 10px;
            }

                .sub-menu .sub-menu-item > a:before {
                    display: none;
                }

                .sub-menu .sub-menu-item > a:hover {
                    background-color: #eee;
                }

            .sub-menu .sub-menu-item .menu-group {
                position: static;
                box-shadow: none;
                background-color: #e5e5e5;
                border-top: none;
            }

                .sub-menu .sub-menu-item .menu-group .menu-group-item {
                    border-bottom: 1px solid #ddd;
                    color: #555;
                    padding-left: 30px;
                }

                    .sub-menu .sub-menu-item .menu-group .menu-group-item:hover {
                        background-color: #ddd;
                    }

        .sub-menu .has-group > a:after {
            right: 20px;
        }
}