/*Header*/
img#logo {
    padding-bottom: 5px;
}

.bcms-header-top{
    border-bottom: 1px solid #e5e5e5;
}
.logo-mobile{
    padding-top: 10px;
    max-width: max-content !important;
}
.bcms-header-logo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
}

.bcms-header-logo:hover {
    text-decoration: none;
}

.bd-button-header{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: white;
    border: 1px solid transparent;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/*Header*/
#bd-navbar{
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    margin-bottom: 1rem ;
    padding-left: 0px;
    padding-right: 0px;
}
/*#menu_area{display: none}*/
#main-menu-nav{
    border-top: 1px solid rgb(178, 178, 178);
    border-bottom: 1px solid rgb(178, 178, 178);
}

.menu-area{background: #fff}

#menu_area,.mainmenu {
    width: 100%;
}


.item-children.dropdown {
    list-style: none;
}

.navbar-nav {
    padding-left: 0px;
}

.dropdown-menu{padding:0 !important;margin:0 !important;border:0 solid !important;border:0 solid rgba(0,0,0,.15) !important;border-radius:0 !important;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{padding:12px 7px;font-family:'Roboto',sans-serif;display: block !important;}
.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: grey;background: #eeeeee;outline: 0;}
/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{background: #eeeeee;}
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #eeeeee;}
.mainmenu .collapse ul ul ul > li:hover > a{background: #eeeeee;}

.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#eeeeee;}
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#eeeeee}
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#eeeeee}

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}

.menu-area .d-md-none .d-flex{padding: 5px !important;}

.mainmenu span
{
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #000;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

.mainmenu span:first-child
{
    transform-origin: 0% 0%;
}

.mainmenu span:nth-last-child(2)
{
    transform-origin: 0% 100%;
}


/*CSS-only mobile menu*/
#menu-mobileBodyContent {
    background: #f8f7f5;
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -khtml-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#menu-mobile {
    height: 80px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -khtml-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: fixed !important;
    top: 0%;
    left: 0%;
    z-index: 1000;
}


#title {
    height: 20px;
    width: 200px;
    margin: 40px auto;
    background: #eae8e5;
}

#text .item {
    height: 10px;
    width: calc(100% - 40px);
    margin: 20px auto;
    background: #eae8e5;
}

#burgerBtn {
    border-top: 2px solid black;
    height: 25px;
    width: 45px;
    box-sizing: border-box;
    position: absolute;
    z-index: 30;
    right: 20px;
    top: 55px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -khtml-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
#burgerBtn:before {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 45px;
    left: 0;
    background: black;
    top: 10px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -khtml-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
#burgerBtn:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 45px;
    left: 0;
    background: black;
    bottom: 0;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -khtml-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

#nav {
    position: absolute;
    z-index: 10;
    list-style-type: none;
    margin-top: 20%;
    margin-left: 3%;
    margin-right: auto;
    padding: 0;
    overflow: hidden;
    width: 94%;
}
#nav li {
    height: 30px;
    width: 0;
    margin: 30px 0;

    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -khtml-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
#nav li + li {
    margin-left: -40px;
}
#nav li + li + li {
    margin-left: -80px;
}
#nav li + li + li + li {
    margin-left: -120px;
}

.navigation{
    height: 100vh !important;
    min-height: 50px;
    display: block;
    overflow: auto !important;
}

.navigation #nav li {
    width: 100%;
    margin-left: 0;
}
.navigation #burgerBtn {
    border-color: transparent;
}
.navigation #burgerBtn:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -khtml-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 33px;
    left: -2px;
}
.navigation #burgerBtn:after {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -khtml-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    bottom: 11px;
    width: 33px;
    left: -2px;
}

.navigation #menu-mobileBodyContent {
    margin-left: 100%;
    -webkit-opacity: 0.9;
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    -o-opacity: 0.9;
    opacity: 0.9;
}

#nav ul {
    float: none;
    font-family: 'icons';
    display: block;
    margin: 0;
    width: auto;
    opacity: 0;
    max-height: 0;
    background: #37474f;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0, 0.7, 0, 1), opacity 0.2s ease-in-out;
    border-radius: 0 0 4px 4px;
    top: 1px;
    border: 0;
    position: relative;
}

#nav li {
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: hidden;
    border: 0;
    border-top: 1px dotted #455a64;
}

#nav li:first-child {
    border-top: 0;
}


#nav a, #nav span.submenu {
    float: none;
    display: block;
    margin: 0;
    height: auto;
    color:#000;
    line-height: 3.6em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    text-align: left;
    font-size: 16px !important;
    font-weight: normal;
    font-family: 'Open Sans', 'Helvetica Neue', Tahoma, Arial, sans-serif;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background 0.17s linear 0s;
}
#nav > li > span:not(.not-arrows):after,.mob-arrow:after{
    float: right;
    margin-left: 10px;
    width: 15px;
    height: inherit;
    content: "\00BB";
    color: inherit;
    font-family: 'icons';
    text-align: center;
    font-size: 105%;
    vertical-align: top;
}

.mob-arrow:after{
    width: 100px !important;
}

.not-arrows{
    float: left !important;
    width: 30%
}

.mob-arrow::after {
    float: right;
    margin-top: -70px;
}

#nav span.submenu.is-active {
    border-bottom: 1px dotted #455a64;
}
.mob-arrow{
    margin-top: 70px !important;
}
#nav span.submenu.is-active:not(.not-arrows):after {
    content: "\00BB";
}
#nav ul.submenu {
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 0;
    background: none;
    opacity: 1;
    position: relative;
    top: 0;
    transition: max-height 0.15s linear 0s;
}
#nav span.submenu.is-active + ul.submenu {
    max-height: 360px;
    overflow-y: auto;
}
#nav ul.submenu a {
    padding-left: 40px;
    background: none;
    color: black;
}
#nav ul.submenu a:before {
    display: inline-block;
    margin-right: 5px;
    margin-left: -15px;
    width: 10px;
    height: inherit;
    content: "\00BB";
    color: inherit;
    font-family: 'icons';
    text-align: center;
    font-size: inherit;
    vertical-align: top;
}
.mob-arrow:hover, #nav a.is-active, #nav ul.submenu a.is-active, ul#nav li:hover
{
    background: var(--midnightblue) !important;
    color: white !important;
}
ul#nav li.top-menu-mobile:hover{
    background: white !important;
}

#nav li:hover ul li a

ul#nav li:hover .mob-arrow::after,#nav li:hover ul li a{
    color: white !important;
}

ul#nav li:hover span a{
    color: white !important;
}



/*.top-menu-mobile*/
/*{*/
/*    padding: 5px !important;*/
/*    display: inline-block !important;*/
/*    margin-bottom: 10px !important;*/
/*    transition: none !important;*/
/*    background: inherit !important;*/
/*}*/

.top-menu-mobile > div > a{
    display: block !important;
    float: left !important;
    padding: 4px 2px !important;
    margin: 0px 4px !important;
}

.menu-mobile-sep {
    height: 5rem;
}

.menu-top-mobile{
    margin-top: 5px !important;
    text-align: center !important;
    width: 100%;
}

.menu-top-mobile a{
    /*position: absolute;*/
    /*z-index: 1000;*/
}

.dot{
    width: 100%;
    position: absolute;
}
.dot::after {
    content: '';
    width: 100%;
    height: 1px;
    background: black;
    display: block;
    position: relative;
    top: 22px;
    z-index: -20;
}

.logo-mobile{
    max-width: max-content !important;
}


@media only screen and (min-width: 767px) {
    .mainmenu .collapse ul li:hover> ul{display:block}
    .mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    /*******/
    .mainmenu .collapse ul ul li{position:relative}
    .mainmenu .collapse ul ul li:hover> ul{display:block}
    .mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    /*******/
    .mainmenu .collapse ul ul ul li{position:relative}
    .mainmenu .collapse ul ul ul li:hover ul{display:block}
    .mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}
}

@media (max-width: 575px){
    #nav{
        /*margin-top: 5.5rem !important;*/
    }
}

@media (max-width: 500px){
    img#logo {
        max-width: 80%;
        max-height: 80%;
        vertical-align: middle;
    }

    .logo-mobile{
        max-width: max-content !important;
        margin-top: 2rem;
    }
}

@media (min-width: 501px) and (max-width: 991px){
    img#logo {
        max-width: 80%;
        max-height: 80%;
        vertical-align: middle;
    }
    .logo-mobile{
        margin-top: 2rem;
        text-align: center !important;
        max-width: max-content !important;
    }
}

@media (max-width: 991px){



    #nav a, #nav span.submenu{
        font-size: 14px !important;
    }

    .topList {
        /*margin-top: 10%;*/
    }


    #nav {
        position: absolute;
        z-index: 10;
        list-style-type: none;
        margin-top: 8.5rem !important;
        margin-left: 20px;
        margin-right: 20px;
        padding: 0;
        overflow: hidden;
        width: 94%;
    }
    #menu_area{
        margin-left: 0px !important;
    }
    .item-children{
        width: 100% !important;
        float: left;
        text-align: left !important;
        border-bottom: 1px solid #eee;
    }

    .item-children:first-child{
        padding-top: 15px;
    }
    #menu-mobile {
        height: 7rem;
        width: 100vw;
        background: #fff;
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        -khtml-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        position: fixed !important;
        top: 0%;
        left: 0%;
        z-index: 1000;
        padding-bottom: 8px;
    }
}

@media (min-width: 992px){
    .bd-footer > .container > .d-none.d-lg-block{
        display: flex !important;
    }
}

@media (max-width: 450px){
    #nav{
        margin-top: 20%;
    }
}

/* Landscape */
@media only screen
and (orientation: landscape) {

    /* Inline #8 | http://localhost/bcms/demo/home */

    /*.logo-mobile {*/
    /*    width: 100vw;*/
    /*    height: 100px;*/
    /*}*/

    #logo{
        height: 100%;
    }

    /*!* Element | http://localhost/bcms/demo/home *!*/

    /*div.col-md-6:nth-child(4) {*/
    /*    width: 100vw;*/
    /*    height: 100px;*/
    /*}*/

    /*!* Element | http://localhost/bcms/demo/home *!*/

    /*div.col-md-6:nth-child(4) > a:nth-child(1) > img:nth-child(1) {*/
    /*    height: 100%;*/
    /*}*/

}