﻿/*! AryaVtd Responsive MegaMenu by Mehdi Rizvandi 13960720
 * Animation dependency: animate.css
 * aryavtd.megamenu.sticky.css v0.9 based on bootstrap v4alpha6 | AryaVTD | https://AryaVandidad.com
 * aryavtd.megamenu.sticky.js  v0.9 based on bootstrap v4alpha6 | AryaVTD | https://AryaVandidad.com
 * Ver 0.91 13961202 2053
 * Update:  ltr add to exmenu
*/
/* Template:
        <nav id="av-megamenu" class="navbar navbar-toggleable-md av-megamenu">
            <div class="container">
                <button id="navbar-toggler" class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-2x fa-bars"></i>
                </button>
                <div class="av-megamenu-container">
                    <div id="navbarNav" class="navbar-collapse collapse">
                        <ul class="navbar-nav">
                            <li class="nav-item"><a runat="server" class="nav-link" href="#">صفحه نخست</a></li>
                            <li class="nav-item av-megamenu-item">
                                <a class="nav-link av-megamenu-title" href="#">MEGAMENU TITLE</a>
                                <div>
                                    <div class="row">
                                        <div class="col-12 col-md-4 col-lg-3 av-megamenu-col">
                                            <h4>MEGAMENU CATEGORY TITLE</h4>
                                            <a href="..." runat="server">...</a>
                                            ...
                                        </div>
                                        <div class="col-12 col-md-4 col-lg-3 av-megamenu-col">
                                            <a href="..." class="av-megamenu-hotlink">MEGAMENU SPECIAL LINK</a>
                                            <hr class="av-megamenu-seperator" />
                                            ...
                                        </div>
                                        </div>
                                </div>
                            </li>
                            ...
                        </ul>
                        <ul class="navbar-exmenu float-left">
                            <li class="nav-item">
                                <a href="...">
                                    <i class="fa fa-2x fa-fw fa-..."></i>
                                </a>
                            </li>
                            ...
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
 */

.av-tp-nav {
/*    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding-top: 40px;*/
    transition: 500ms;
    /*background: #fff;*/
}

    .av-tp-nav .nav-item {
        /*margin: 0 1rem;*/
        margin-top: 5px;
        font-size: 1rem;
        margin-left: 1.3rem;
    }

        .av-tp-nav .nav-item > .nav-link {
            color: var(--av-brand-color1) !important;
            border-bottom: 3px solid transparent;
            transition-duration: 500ms;
            font-family: "HeadingFont";
        }

            .av-tp-nav .nav-item > .nav-link:hover {
                border-bottom: 3px solid #0083ca;
                transition-duration: 300ms;
            }

    .av-tp-nav.av-tp-opaque {
        padding-top: 5px;
        background-color: #fff;
        box-shadow: 0 3px 5px 1px rgba(0,0,0,0.05);
        transition: 500ms;
    }

    .av-tp-nav .nav-brand .nav-link {
        padding: 0 !important;
        border: 0 !important;
    }

        .av-tp-nav .nav-brand .nav-link:hover {
            border: 0 !important;
        }

    .av-tp-nav .navbar-toggler {
        border: 1px solid #000;
    }

    .av-tp-nav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }





/* AV Mega Menu */
.av-megamenu {
    /*padding: 0.5rem 1rem;*/
    transition:0.5s;
    /*background-color:#373737;*/
    /*position:fixed;
    top:80px;
    left:0;
    right:0;
    height:80px;*/
    z-index:1035;
    padding-top:0 !important;
}



    /* menubar background color when its need background (at scroll and open toggler button) */
    /*.av-megamenu.navbar-opaque {*/
        /*background-color: #235fa7;*/
        /*border-bottom: 2px solid #676767;
        box-shadow: 0px 10px 15px -7px #333;*/
        /*padding: 0 1rem;*/
        /*transition-duration:0.5s;
    }

    .av-megamenu .brandbar {
        max-width: 200px;
    }*/


    /*.av-megamenu .navbar-toggler {
        border-color: #aaa;*/
        /*margin-top: 0.5rem;*/
        /*color: #eee;
        z-index: 1040;
    }*/

.av-megamenu-container {
    position: relative;
    /* container width, if standard container need, remove the below lines (width and margin-right) */
    /*width: calc(100% - 4rem);*/ /* 4rem is toggler button width */
    width:100%;
    margin-right: 0rem; /* dont move over toggler button */
    /*min-height:50px;*/
}

    .av-megamenu-container > div { /* navbarNav : menuitem bar only */
        padding-top: 0.5rem;
    }

    .av-megamenu-container .navbar-brand {
        /*background-color:#fff;*/
        /*border-radius:5px;*/
        max-height:50px;
        padding:0 !important;
        border-radius:5px;
    }

/*    .av-megamenu .nav-item,
    .av-megamenu-item a.nav-link,
    .av-megamenu a.nav-link {
        color:#fff;
        border:1px solid transparent;
    }
*/
    .navbar-nav {margin-top:42px;/*move menu to under the toggler button on mobile*/}

/*    .av-megamenu.navbar-opaque .nav-item,
    .av-megamenu.navbar-opaque .av-megamenu-item a.nav-link,
    .av-megamenu.navbar-opaque a.nav-link {
        color:#ddd;
    }
*/
    /* menu title effect : add effect on all size */
    .av-megamenu .nav-item:hover a.nav-link {
        /*color:#000000;*/
        /*background-color:#fff;*/
        /*border-radius:5px;*/
        /*border-top-left-radius:5px;
        border-top-right-radius:5px;*/
        /*border:1px solid #ddd;*/
/*        padding-left:1rem;
        padding-right:1rem;
*/        transition:300ms;
    }

    /* tab like menu title button */
/*    .av-megamenu .nav-item.av-megamenu-item:hover a.nav-link {
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }
*/
.av-megamenu-item {
}

    .av-megamenu-item > div {
        /*background-color: #fff;*/
        /*background: #fff url(../img//pattern/greyzz.png);*/
        /*background-color:#fff;*/
        /*overflow:hidden;*/
        padding: 0 2rem;
        height: 0px;
        box-sizing: border-box;
        transition-duration: 0.5s;
        visibility:collapse;/* bugfixed: mobile cant select item, use visibility:collapse and height=0 to hide the megamenu, instead of overflow:hidden or display:none */
    }
    .av-megamenu-item >.av-megamenu-title:after {
        content: " \f103";
        font-family:FontAwesome;
        animation-name:none;
        vertical-align:middle;/*fixed moving down title*/
    }
    .av-megamenu-item:hover >.av-megamenu-title:after {
        animation-duration: 1s;
        animation-iteration-count: infinite;
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
        animation-direction:alternate-reverse;
    }

        .av-megamenu-item > div > div {
            padding: 1rem 0;
        }
        .av-megamenu-item > div > div > * {
            opacity:0;/* bugfixed: mobile cant select item */
        }

    .av-megamenu-item > a:focus + div {
        height: auto;
        border: 1px solid #ddd;
        box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
        transition-duration: 0.5s;
        margin-bottom: 1rem;
        visibility:visible;
        border-radius:0 0 25px 25px;
    }
    .av-megamenu-item > a:focus + div > div > * {
        opacity:1.0;/* bugfixed: mobile cant select item */
    }
    .av-megamenu-item > a:focus .av-megamenu-title {
        color: #0083ca;
    }

.av-megamenu-col {
}

    .av-megamenu-col a {
        display:block;
        /*color:#666;*/
        padding-right:1rem;
        transition:1200ms;
    }
html[dir=rtl] .av-megamenu-col a:before {
    content: '\f104 ';
    margin-left: 0.5rem;
    font-family: FontAwesome;
    font-size: 0.8em;
    color: #0083ca;
}
html[dir=ltr] .av-megamenu-col a:after {
    content: '\f105 ';
    margin-left: 0.5rem;
    font-family: FontAwesome;
    font-size: 0.8em;
    color: #0083ca;
}
.av-megamenu-col a:hover {
    color: #fff !important;
    padding-right: 2rem;
    transition: 400ms;
    background-color: #0083ca;
    text-decoration: none;
    border-radius: 0.25rem;
}
html[dir=rtl] .av-megamenu-col a.av-megamenu-hotlink:before {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    content: '\f192 ';
    margin-left: 0.5rem;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-direction: alternate-reverse;
}
.av-megamenu-col:hover .av-megamenu-hotlink:before {
    color: #fff;
}
    /* add delay animation on hotlinks */
    .av-megamenu-col a.anim-delay-100.av-megamenu-hotlink:before {-moz-animation-delay: 100ms;-o-animation-delay: 100ms;-webkit-animation-delay: 100ms;animation-delay: 100ms;}
    .av-megamenu-col a.anim-delay-200.av-megamenu-hotlink:before {-moz-animation-delay: 200ms;-o-animation-delay: 200ms;-webkit-animation-delay: 200ms;animation-delay: 200ms;}
    .av-megamenu-col a.anim-delay-300.av-megamenu-hotlink:before {-moz-animation-delay: 300ms;-o-animation-delay: 300ms;-webkit-animation-delay: 300ms;animation-delay: 300ms;}
    .av-megamenu-col a.anim-delay-400.av-megamenu-hotlink:before {-moz-animation-delay: 400ms;-o-animation-delay: 400ms;-webkit-animation-delay: 400ms;animation-delay: 400ms;}
    .av-megamenu-col a.anim-delay-500.av-megamenu-hotlink:before {-moz-animation-delay: 500ms;-o-animation-delay: 500ms;-webkit-animation-delay: 500ms;animation-delay: 500ms;}
    .av-megamenu-col a.anim-delay-600.av-megamenu-hotlink:before {-moz-animation-delay: 600ms;-o-animation-delay: 600ms;-webkit-animation-delay: 600ms;animation-delay: 600ms;}
    .av-megamenu-col a.anim-delay-700.av-megamenu-hotlink:before {-moz-animation-delay: 700ms;-o-animation-delay: 700ms;-webkit-animation-delay: 700ms;animation-delay: 700ms;}
    .av-megamenu-col a.anim-delay-800.av-megamenu-hotlink:before {-moz-animation-delay: 800ms;-o-animation-delay: 800ms;-webkit-animation-delay: 800ms;animation-delay: 800ms;}
    .av-megamenu-col a.anim-delay-900.av-megamenu-hotlink:before {-moz-animation-delay: 900ms;-o-animation-delay: 900ms;-webkit-animation-delay: 900ms;animation-delay: 900ms;}
    .av-megamenu-col a.anim-delay-1s.av-megamenu-hotlink:before {-moz-animation-delay: 1s;-o-animation-delay: 1s;-webkit-animation-delay: 1s;animation-delay: 1s;}
    .av-megamenu-col a.anim-delay-2s.av-megamenu-hotlink:before {-moz-animation-delay: 2s;-o-animation-delay: 2s;-webkit-animation-delay: 2s;animation-delay: 2s;}
    .av-megamenu-col a.anim-delay-3s.av-megamenu-hotlink:before {-moz-animation-delay: 3s;-o-animation-delay: 3s;-webkit-animation-delay: 3s;animation-delay: 3s;}

.av-megamenu-col h4 {
    color:#0083ca;
    border-bottom:3px solid #0083ca9d;
    padding-bottom:0.2rem;
}
html[dir=rtl] .av-megamenu-col h4:before {
    content: '\f100  ';
    font-family: FontAwesome;
    font-size: 0.8em;
}
html[dir=ltr] .av-megamenu-col h4:after {
    content: '  \f101';
    font-family: FontAwesome;
    font-size: 0.8em;
}
.av-megamenu-seperator {
    /*border-bottom: 2px solid #ddd;*/
    color:#0083ca;
}

.av-megamenu-img {
    width: 100%;
    height: auto;
    max-height: 300px;
    border-bottom-left-radius:1rem;
    border:3px solid #eee;
    box-shadow:0px 0px 3px 1px rgba(0,0,0,0.5);
}

/*.navbar-exmenu {
    list-style:none;
    margin:0 !important;*/
    /*position:absolute;
    left:0;*/
/*}
.navbar-exmenu a {*/
    /*background:#fff;*/
    /*color:#fff;
    line-height:1;
    border:1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    text-decoration:none;*/
    /*padding:0 !important;
    margin:0 2px;*/
/*}
    .navbar-exmenu a:hover {
        border: 1px solid #6c757d;
        color: #92278f;*/
        /*margin:0 2px;
    padding:0 !important;*/
    /*}
@media (max-width: 990px) {
    .mfixed-top
{
    position:relative;
    width:100%;
    transition-duration:0.5s;
}
}*/

/* larg screen - normal view */
@media (min-width: 992px) {
/*    .mfixed-top {
        position: fixed;
        top: 0px;
        width: 100%;
        transition-duration: 0.5s;
    }*/

    .navbar-nav {margin-top:0;/*move menu to base position, reset mobile size margin*/}

    /* mega menu fall down content */
    .av-megamenu-item > div {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        height: auto;
        background-color:#fff;
        /*background-color: #fff;*/
        /*border: 1px solid #ddd;*/
        box-shadow: 0 0 3px 1px rgba(0,0,0,0.05);
        padding:1.5rem 2rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    /* menu title effect : reset padding at mouse hover on larg size */
    .av-megamenu .nav-item:hover a.nav-link {
        padding-left:0.5rem;
        padding-right:0.5rem;
        transition:100ms;
    }
    .form-inline .nav-item:hover a.nav-link {
        padding-left:1rem !important;
        padding-right:1rem !important;
    }

    .av-megamenu-item:hover .av-megamenu-title {
        color: #92278f;
    }

    .av-megamenu-item:hover > div {
        display: block;
        visibility:visible;/* bugfixed: mobile cant select item */
    }
    .av-megamenu-item:hover > div >div > * {
        opacity:1;/* bugfixed: mobile cant select item */
    }

/*    ul.navbar-exmenu {
        list-style:none;
        position:absolute;
    }
    html[dir=rtl] ul.navbar-exmenu  {
        left:0;
    }
    html[dir=ltr] ul.navbar-exmenu  {
        right:0;
    }
*/}