/*nav menu css*/
.menu-container {
    overflow: hidden;
    background-color: #333;
/*    position: fixed;*/
    top: 0;
    width: 100%;
    z-index: 10;
    margin: 0;
}

.navbtn {
    background: black;
    display: block;
    width: 45px;
    opacity: 1;
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 0;
    border: 0;
    z-index: 99991;
}

.nav-icon {
    display: inline-block;
    width: 30px;
    height: 25px;
}

    .nav-icon span {
        display: block;
        position: absolute;
        height: 3px;
        background: blueviolet;
        border-radius: 2px;
        opacity: 1;
        right: 10px;
        width: 100%;
    }

.burger-bar1 {
    top: 2px;
    transition: 0.5s ease-in-out;
}

.burger-bar2 {
    top: 15px;
    transition: 1s ease-in-out;
    animation: burgerbarpulse 1s infinite alternate;
}

.burger-bar3 {
    top: 26px;
    transition: 0.5s ease-in-out;
}

.navbtn:hover .burger-bar2 {
    transition: 1s ease-in-out;
    opacity: 0.9;
}

.navbtn:hover .burger-bar1 {
    transform: rotate(45deg) translate(4px, 1px) scaleX(0.8);
}

.navbtn:hover .burger-bar3 {
    transform: rotate(-45deg) translate(4px, -1px) scaleX(0.8);
}

.navbtn:hover .burger-bar2 {
    transform: rotate(0deg) translate(-4px, 1px) scaleX(0.8);
}

.navbtn:hover span {
    background: #fff;
}

    .navbtn:hover span.nav-icon {
        background-color: transparent;
    }

.navbtn:hover, .navbtn--active {
    transition: 0.5s ease-in-out;
    background-color: black;
}

    .navbtn--active span {
        background: #fff;
    }

        .navbtn--active span.nav-icon {
            background-color: transparent;
        }

.navbtn.navbtn--active .burger-bar1 {
    transform: rotate(45deg) translate(8px, 8px) scaleX(1.2);
}

.navbtn.navbtn--active .burger-bar2 {
    opacity: 0;
}

.navbtn.navbtn--active .burger-bar3 {
    transform: rotate(-45deg) translate(7px, -8px) scaleX(1.2);
}

.navbtn.navbtn--active:hover .burger-bar1 {
    transform: rotate(45deg) translate(10px, 16px) scaleX(0.8);
}

.navbtn.navbtn--active:hover .burger-bar3 {
    transform: rotate(-45deg) translate(10px, -16px) scaleX(0.8);
}

.navbtn.navbtn--active:hover .burger-bar2 {
    opacity: 1;
    transform: rotate(0deg) translate(3.5px, 0px) scaleX(0.9);
}

/*nav menu css*/
.navMenu {
    width: 50px;
    height: 90px;
    line-height: 50px;
    float: left;
    margin-top: 6vh;
}

    .navMenu span {
        background-color: black;
        font-size: 1rem;
        cursor: pointer;
    }

.navCloseMenu {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1rem;
    float: left;
    background-color: black;
    color: #7E00FF;
}

.navBackMenu {
    width: 36px;
    height: 36px;
    line-height: 36px;
    float: right;
    background-color: #7E00FF;
}

.navCloseMenuSpecial {
    position: absolute;
    top: 10%;
}

.bs-icon-nav-whith-back {
    font-size: 3em;
    color: #ffffff;
}

.itemBack {
    position: absolute !important;
    right: 0 !important;
    padding: 0 !important;
    top: 10% !important;
}

.bs-icon-nav-font {
    font-size: 2.3em; /*color: #ffffff;*/
}

.bs-icon-nav-whith, .bs-icon-nav-whith-unclick {
    /*font-size: 1.3em;*/
    color: #ffffff;
}

    .bs-icon-nav-whith:hover {
        color: #333333;
    }

.itemMargin {
    margin-left: 15%;
}

.itemMargin1 {
    margin-left: 12%;
}

.itemColor {
    text-decoration: none !important;
    color: #ffffff;
}

.itemWidth {
    /*  width: 90%;*/
    text-align: left;
    line-height: 25px;
    text-transform: capitalize;
    font-weight: bold;
}

    .itemWidth .icon-stroke_Arrow-right {
        float: right;
    }

.itemMarginSpan {
    position: absolute;
    right: 50px;
    line-height: inherit !important;
}

.itemMarginSpan1 {
    margin-top: 10%;
}

.itemMarginSpan2 {
    margin-left: 50%;
}

.itemWidthSpan {
    width: 80%;
}

.itemTitle {
    margin-top: 4vh; /*width: 100%;*/
    margin-left: 25%;
    height: 50px;
    overflow-y: hidden;
}

.titleFont {
    font-size: 1.5rem !important;
    line-height: 28px;
    color: #ffffff;
    font-family: GraphikRegular;
}

.navTileSplitWhite {
    width: 155px;
    background-color: #ffffff;
    height: 2px !important;
    padding-right: 15px;
    margin-top: 0;
    margin-left: 25%;
    margin-bottom: 3% !important;
    margin-top: 6%;
}

.subTitleFont {
    font-size: 1rem;
    line-height: 16px; /*font-weight:bold;*/
}

.subitemTitle {
    /*margin-left: 5% !important;*/
}

.subitemTitle1 {
    margin-left: 13.5% !important;
}

.subitemContent1 {
    /*margin-left: 14%;*/
    color: #ffffff;
}

.subitemContent2 {
    padding-top: 0 !important;
}

.subitemContent3 {
    /*margin-left: 10%;*/
    color: #ffffff;
}

.subitemContent4 {
    /*margin-left: 7%;*/
    color: #ffffff;
}

.navSplitWhite {
    margin-left: 25%;
    margin-bottom: 3%;
    margin-top: 1% !important;
}

.mp-menu ol li > a {
    padding-top: 0;
    padding-bottom: 0; /*margin-bottom:1em;*/
    font-size: 1rem;
    line-height: 20px;
    /* width: 80%;*/
}

/*new menu*/
ol.secondlevel {
    display: none;
    /*  padding-left: 10%;*/
    /* background-color: #7500C0;*/
}

    ol.secondlevel.show {
        display: block;
    }

.firstlevel .itemWidth {
    font-size: 1rem;
    padding: 5px 0px 5px 0px;
    text-transform: capitalize;
}

.secondlevel {
    padding-left: 10%;
}

ol.secondlevel.show > .active {
    background-color: rebeccapurple;
    /*   padding-left: 10%;*/
}
/*.secondlevel .itemWidth {
        font-weight: normal;
    }*/
.secondlevel .itemWidth span {
    display: inline-block;
    line-height: 25px;
    margin-left: -10px;
    padding: 0 20px;
}

.itemWidth .clearfix span:first-child {
    border: 1px solid transparent;
}

.firstlevel.active {
    background-color: indigo;
    font-weight: bold;
}

.firstlevel a .itemWidth span {
    border: 1px solid transparent;
}

.secondlevel a .itemWidth span {
    border: 1px solid transparent;
}

.itemWidth .clearfix:hover span:first-child, .itemWidth .clearfix:focus span:first-child {
    border: 1px solid #fff;
}

.firstlevel a:hover .itemWidth span, .firstlevel a:focus .itemWidth span {
    border: 1px solid #fff;
}

.secondlevel a:hover .itemWidth span, .secondlevel a:focus .itemWidth span {
    border: 1px solid #fff;
}

.itemWidth .clearfix .leftCon {
    float: left;
    line-height: 42px;
    margin-left: -7px;
    padding: 0 7px;
    position: relative;
    z-index: 1111;
    text-transform: capitalize;
    font-weight: bold;
}

.itemWidth .clearfix .rightCon {
    float: right;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    line-height: 40px;
    font-weight: bolder;
}

.itemWidth .clearfix.arrowAnimation .rightCon {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 40px;
    font-weight: bolder;
}



[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'bsIcons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 3em;
    /*color:#ffffff;*/
}


.icon-fill_Add-category:before {
    content: "\e900";
}

.icon-fill_Add-showcase:before {
    content: "\e901";
}

.icon-fill_Ad-production-hub:before {
    content: "\e902";
}

.icon-fill_Agency-directory:before {
    content: "\e903";
}

.icon-fill_Asset-library:before {
    content: "\e904";
}

.icon-fill_Binders:before {
    content: "\e905";
}

.icon-fill_Brand-FAQs:before {
    content: "\e906";
}

.icon-fill_Brand-guidelines:before {
    content: "\e907";
}

.icon-fill_Brand-positioning:before {
    content: "\e908";
}

.icon-fill_Brand-review:before {
    content: "\e909";
}

.icon-fill_Brand-strategy:before {
    content: "\e90a";
}

.icon-fill_Brand-vision:before {
    content: "\e90b";
}

.icon-fill_Business-brand:before {
    content: "\e90c";
}

.icon-fill_Campaign-showcase:before {
    content: "\e90d";
}

.icon-fill_Carousel-off:before {
    content: "\e90e";
}

.icon-fill_Carousel-on:before {
    content: "\e90f";
}

.icon-fill_Colours:before {
    content: "\e910";
}

.icon-fill_Dashboard:before {
    content: "\e911";
}

.icon-fill_Design-examples:before {
    content: "\e912";
}

.icon-fill_eCards-banners:before {
    content: "\e913";
}

.icon-fill_Events-materials:before {
    content: "\e914";
}

.icon-fill_Expand:before {
    content: "\e915";
}

.icon-fill_Folders:before {
    content: "\e916";
}

.icon-fill_Glossary:before {
    content: "\e917";
}

.icon-fill_Holiday-card:before {
    content: "\e918";
}

.icon-fill_Identity:before {
    content: "\e919";
}

.icon-fill_Incorrect-cross:before {
    content: "\e91a";
}

.icon-fill_Incorrect-tick:before {
    content: "\e91b";
}

.icon-fill_Internal-documents:before {
    content: "\e91c";
}

.icon-fill_large-format:before {
    content: "\e91d";
}

.icon-fill_Latest-blog:before {
    content: "\e91e";
}

.icon-fill_Like:before {
    content: "\e91f";
}

.icon-fill_Merchandise:before {
    content: "\e920";
}

.icon-fill_More:before {
    content: "\e921";
}

.icon-fill_Mute:before {
    content: "\e922";
}

.icon-fill_Name:before {
    content: "\e923";
}

.icon-fill_Order-item:before {
    content: "\e924";
}

.icon-fill_Other-faqs:before {
    content: "\e925";
}

.icon-fill_Pause:before {
    content: "\e926";
}

.icon-fill_Pin:before {
    content: "\e927";
}

.icon-fill_Play:before {
    content: "\e928";
}

.icon-fill_Presentation:before {
    content: "\e929";
}

.icon-fill_Profile-default:before {
    content: "\e92a";
}

.icon-fill_Proposals:before {
    content: "\e92b";
}

.icon-fill_Quote:before {
    content: "\e92c";
}

.icon-fill_Select-agency:before {
    content: "\e92d";
}

.icon-fill_Select-capability:before {
    content: "\e92e";
}

.icon-fill_Select-category:before {
    content: "\e92f";
}

.icon-fill_Select-country:before {
    content: "\e930";
}

.icon-fill_Select-size:before {
    content: "\e931";
}

.icon-fill_Select-type:before {
    content: "\e932";
}

.icon-fill_Share:before {
    content: "\e933";
}

.icon-fill_Social-posts:before {
    content: "\e934";
}

.icon-fill_Stationary:before {
    content: "\e935";
}

.icon-fill_Stock-footage:before {
    content: "\e936";
}

.icon-fill_Tag:before {
    content: "\e937";
}

.icon-fill_Templates:before {
    content: "\e938";
}

.icon-fill_Tick:before {
    content: "\e939";
}

.icon-fill_Training-videos:before {
    content: "\e93a";
}

.icon-fill_Volume:before {
    content: "\e93b";
}

.icon-fill_Word-docs:before {
    content: "\e93c";
}

.icon-stroke_Arrow-down:before {
    content: "\e93d";
}

.icon-stroke_Arrow-left:before {
    content: "\e93e";
}

.icon-stroke_Arrow-right:before {
    content: "\e93f";
}

.icon-stroke_Arrow-up:before {
    content: "\e940";
}

.icon-stroke_Burger-nav:before {
    content: "\e941";
}

.icon-stroke_Close:before {
    content: "\e942";
}

.icon-stroke_Close-thick:before {
    content: "\e943";
}

.icon-stroke_Delete:before {
    content: "\e944";
}

.icon-stroke_Download:before {
    content: "\e945";
}

.icon-stroke_Download:hover {
}

.icon-fill_Download:before {
    content: "\e945b";
}

.icon-stroke_Edit:before {
    content: "\e946";
}

.icon-stroke_Email:before {
    content: "\e947";
}

.icon-black_Email:before {
    content: "\e947b";
}

.icon-stroke_Error:before {
    content: "\e948";
}

.icon-stroke_Home:before {
    content: "\e949";
}

.icon-stroke_Home, .icon-stroke_Home:hover {
}

    .icon-fill_Home:before, .icon-stroke_Home:hover::before {
        content: "\e949b";
    }

.icon-stroke_Like:before {
    content: "\e94a";
}

.icon-stroke_Minus:before {
    content: "\e94b";
}

.icon-stroke_Mouse:before {
    content: "\e94c";
}

.icon-stroke_Notification:before {
    content: "\e94d";
}

.icon-fill_Notification:before, .icon-stroke_Notification:hover:before {
    content: "\e94db";
}

.icon-stroke_Phone:before {
    content: "\e94e";
}

.icon-stroke_Pin:before {
    content: "\e94f";
}

.icon-stroke_Play-large:before {
    content: "\e950";
}

.icon-stroke_Play-small:before {
    content: "\e951";
}

.icon-stroke_Plus:before {
    content: "\e952";
}

.icon-stroke_Search:before {
    content: "\e953";
}

.icon-fill_Search:before, .icon-stroke_Search:hover:before {
    content: "\e953b";
}

.icon-stroke_Share:before {
    content: "\e954";
}

.icon-forwards_arrow:before {
    content: "\e955";
}

.icon-backwards_arrow:before {
    content: "\e956";
}

.icon-upwards_arrow:before {
    content: "\e957";
}

.menu-item-profile {
    padding-left: 10px;
}

.menu-item {
    text-transform: capitalize;
    padding-left: 5px;
    padding-right: 5px;
}

    .menu-item:hover {
        background-color: #A100FF;
    }

    .menu-item.active {
        background-color: #A100FF;
        font-weight: bold;
    }

.side-menu {
    background: black;
    border: none;
    color: blueviolet;
    background: #3333;
    float: right;
    padding-top: 10px;
}

    .side-menu:hover {
        color: white;
    }

    .side-menu:focus {
        outline-style: none;
    }

.navbar-close {
    font-size: 1.5rem;
    color: white;
    float: right;
    position: relative;
}

.menu-icon {
    width: 35px;
    height: 4px;
    background-color: #A100FF;
    margin: 7px 0;
    border-radius: 10px;
}

.side-menu:hover .menu-icon {
    background-color: white;
}


/* nav-icon-5 */
.nav-icon-5 {
    width: 35px;
    height: 30px;
    margin: 10px 10px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

    .nav-icon-5 span {
        background-color: #fff;
        position: absolute;
        border-radius: 2px;
        transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        width: 100%;
        height: 4px;
        transition-duration: 500ms
    }

        .nav-icon-5 span:nth-child(1) {
            top: 0px;
            left: 0px;
        }

        .nav-icon-5 span:nth-child(2) {
            top: 13px;
            left: 0px;
            opacity: 1;
        }

        .nav-icon-5 span:nth-child(3) {
            bottom: 0px;
            left: 0px;
        }

    .nav-icon-5:not(.open):hover span:nth-child(1) {
        transform: rotate(-3deg) scaleY(1.1);
    }

    .nav-icon-5:not(.open):hover span:nth-child(2) {
        transform: rotate(3deg) scaleY(1.1);
    }

    .nav-icon-5:not(.open):hover span:nth-child(3) {
        transform: rotate(-4deg) scaleY(1.1);
    }

    .nav-icon-5.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 13px;
    }

    .nav-icon-5.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-icon-5.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 13px;
    }