/**
 * Quick Access in Elementor Preview
 *
 * @since 2.6.0
 */
.porto-qa-item {
    width: 30px;
    height: 30px !important;
    background-color: #08c;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 1px rgb(60 67 74 / 15%);
    text-align: center;
    padding: 3px !important;
    line-height: 14px !important;
    z-index: 9999;
    border-radius: 50%;
    animation: both .4s qa-appear;
}
.porto-qa-item svg {
    fill: #fff;
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    margin: auto;
}
.porto-qa-item .region {
    position: absolute;
    top: 13px;
    left: 13px;
    border: 3px solid #08c;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.porto-qa-item:hover .region {
    opacity: 1;
    visibility: visible;
}
.sidebar-menu>li.menu-item .popup,
.sidebar-menu .narrow ul.sub-menu ul.sub-menu {
    animation: none !important;
}
.mega-menu>li.menu-item.open .popup {
    top: 100%;
    transform: translate3d(0,0,0)
}
@keyframes qa-appear {
    20%,40%,60%,80%,from,to {
        animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

/*
 * Go To the Type Builder
 *
 * @since 2.6.0
 */
.porto-tb-item {
    position: relative;
}
.overlay-slidetop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    background-color: rgb(0,136,204,0.7);
    overflow: hidden;
    width: 100%;
    animation: overlayDown .5s both;
    z-index: 99;
}
.overlay-slidetop a {
    display: block;
    --porto-ov-size: 50px;
    width: var(--porto-ov-size);
    height: var(--porto-ov-size);
    line-height: var(--porto-ov-size);
    background: #fff;
    font-size: calc( var(--porto-ov-size) / 2 );
    text-align: center;
    border-radius: 50%;
}
.overlay-slidetop i {
    line-height: inherit;
    color: var(--porto-dark-color);
}
.overlay-slidetop a:hover i {
    animation: navItemArrow ease-out .3s;
}
@keyframes overlayDown {
    from { bottom: 100%; height: 0; } 
    to {  bottom: 0; height: 100%; }  
}

.porto-view-switcher.show .menu-item .popup,
.mega-menu>li.menu-item.show .popup {
    top: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.mega-menu.show>li.menu-item li.menu-item>a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
li.menu-item.sub.show > ul {
    display: block;
    opacity: 1;
    top: 5px;
}
li.menu-item.show .popup,
#main-toggle-menu.show .toggle-menu-wrap {
    display: block !important;
}

/*
* Go to Main Header option for the section of header template builder, Porto Section(Column) Additional Settings
*
* @since 2.10.0
**/
.elementor-section > .porto-el-section-shortcodes,
.elementor-column > .porto-el-column-shortcodes,
.e-con > .porto-el-container-shortcodes {
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}
.elementor-section.elementor-element-editable > .porto-el-section-shortcodes,
.elementor-column.elementor-element-editable > .porto-el-column-shortcodes,
.e-con.elementor-element-editable > .porto-el-container-shortcodes {
    opacity: 1;
    visibility: visible;
}
.elementor-section .porto-el-section-shortcode,
.elementor-section .porto-el-column-shortcode,
.e-con .porto-el-container-shortcode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 20px;
    background: #08c !important;
    color: #fff !important;
    border-radius: 2px;
    margin: 3px;
}

.elementor-section .porto-el-column-shortcode {
    background-color: #f14705 !important;
}

@media(max-width: 991px) {
    .header-side .page-wrapper .elementor-section-wrap > .elementor-section,
    .header-side .page-wrapper .elementor-section-wrap > .e-con,
    .header-side #elementor-add-new-section .elementor-add-section-inner { max-width: none; }
}

/*
 * Mobile Toggle
 * @since 3.2.0
 */

#header a.mobile-toggle {
    display: inline-block;
}