* {
    box-sizing: border-box;
}

.main-menu-flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    -moz-box-pack: left;
    -ms-flex-pack: left;     /* TWEENER - IE 10 - justify-content */
    justify-content: left;
    -ms-flex-align: center;
    align-content: center;
    padding-top: 8px;
    padding-left: 100px; /*68px;*/
    font-family: "Open Sans", Soleil, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    color: #c2c2e8;
    background-color: black;
    margin-right: 1em;
}

.menu-item {
    /*cursor: pointer;*/
    margin: 0;
    padding: 0;
    display: inline-block; /* TWEENER - IE10, and also compatible with display: inline in Chrome and Firefox */
}

.menu-link {
    color: inherit;
    text-decoration: none;
    padding: .25em;
    padding-left: 1em;
    padding-right: 1em;
    display: inline-block;
    -webkit-transition: 0.15s background-color linear;
    -moz-transition: 0.15s background-color linear;
    transition: 0.15s background-color linear;
}

.menu-link:focus, .menu-link:hover, .menu-link:active {
    color: white;
    background-color: #5f5fd3;
}

.menu-button-link {
    color: inherit;
    text-decoration: none;
    border-radius: 5px;
    padding: .25em;
    margin: 0;
    -webkit-transition: 0.15s background-color linear;
    -moz-transition: 0.15s background-color linear;
    transition: 0.15s background-color linear;
}

.menu-button-link:focus, .menu-button-link:hover, .menu-button-link:active {
    color: white;
}

.menu-item-button-border {
    cursor: pointer;
    border: 1px;
    border-style: solid;
    border-color: #5f5fd3;
    border-radius: 5px;
    padding: .25em;
    margin: 0 .25em;
}

.menu-item-button-bg {
    cursor: pointer;
    background-color: #5f5fd3;
    border-radius: 5px;
    padding: .25em;
    margin: 0 .25em;
}

/*.menu-items-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    padding-top: .25em;
}*/

.menu-item-right-align {
    position: absolute;
    right: 8px;
}

.menu-logo {
    cursor: pointer;
    border: 0;
    position: absolute;
    top: 0px;
    left: 16px; /*1px;*/
}

#menu-logo-text {
    position: absolute;
    top: 70px;
    left: 2px;
    /*width: 64px;
    height: auto;*/
    border: 0;
}
/*
.main-menu-flex {
    margin-right: 1em;
}
*/
/*.main-menu-flex > .menu-item:nth-last-child(1) {
    margin-right: 1em;
}*/

/*.main-menu-flex > .menu-item:nth-last-child(2) {
    margin-left: auto;
}*/

.main-menu-flex > .menu-items-top-right {
    margin-left: auto;
}

.menu-link {
    cursor: pointer;
}

@keyframes slideDownOpaque {
    from {transform: translateY(-100%); opacity: 1; };
    /*90% {transform: translateY(10%); };*/
    to {transform: translateY(0%); opacity: 1; };
}

@-webkit-keyframes slideDown {
    from {-webkit-transform: translateY(-100%); opacity: 0; };
    /*90% {-webkit-transform: translateY(10%); };*/
    to {-webkit-transform: translateY(0%); opacity: 1; };
}

@-moz-keyframes slideDown {
    from {-moz-transform: translateY(-100%); opacity: 0; };
    /*90% {-moz-transform: translateY(10%); };*/
    to {-moz-transform: translateY(0%); opacity: 1; };
}

@keyframes slideDown {
    from {transform: translateY(-100%); opacity: 0; };
    /*90% {transform: translateY(10%); };*/
    to {transform: translateY(0%); opacity: 1; };
}

@-webkit-keyframes slideUp {
    0% {transform: translateY(0%); opacity: 1; };
    /*90% {transform: translateY(10%); };*/
    100% {transform: translateY(-100%); opacity: 0; };
}

@-moz-keyframes slideUp {
    0% {transform: translateY(0%); opacity: 1; };
    /*90% {transform: translateY(10%); };*/
    100% {transform: translateY(-100%); opacity: 0; };
}

@keyframes slideUp {
    0% {transform: translateY(0%); opacity: 1; };
    /*90% {transform: translateY(10%); };*/
    100% {transform: translateY(-100%); opacity: 0; };
}

@-webkit-keyframes fadeIn {
    from {transform: translateX(100%), translateY(100%); opacity: 1; };
    to {transform: translateX(0%), translateY(0%); opacity: 1; };
}

@-moz-keyframes fadeIn {
    from {transform: translateX(100%), translateY(100%); opacity: 1; };
    to {transform: translateX(0%), translateY(0%); opacity: 1; };
}

@keyframes fadeIn {
    from {transform: translateX(0%), translateY(0%); opacity: 0; };
    to {transform: translateX(0%), translateY(0%); opacity: 1; };
}

@media only screen and (min-width: 640px) { /*(min-width: 460px) {*/

    .no-touch .has-submenu:hover > .submenu {
        visibility: visible;
/*-webkit-animation: fadeIn 1s ease;
-moz-animation: fadeIn 1s ease;
animation: fadeIn 1s ease;*/
/*-webkit-animation: slideDownOpaque 1s ease;
-moz-animation: slideDownOpaque 1s ease;
animation: slideDownOpaque 1s ease;*/
        /*transition-property: all;
        transition-duration: 1.5s;
        transition-timing-function: linear;*/
    }

    .has-submenu > .submenu {
        position: absolute;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        background-color: #121212; /*#5f5fd3;*/
/*border: 1px solid #333333;*/ /*#5f5fd3;*/
        /*border-radius: 4px;*/
        /*box-shadow: 1px 1px 2px rgba(0,0,0,0.2);*/
        /*box-shadow: 1px 1px 2px #555555;*/ /*rgba(0,0,0,0.2);*/
/*visibility: hidden;*/
    }

    .show-mobile-submenu {
        /*-webkit-animation: slideDownOpaque 1s ease;
        -moz-animation: slideDownOpaque 1s ease;
        animation: slideDownOpaque 1s ease;*/
        visibility: visible;
    }

    .hide-mobile-submenu {
        visibility: hidden;
    }

    .active-mobile-menu {
        background-color: #5f5fd3;
        color: white;
    }

    .inactive-mobile-menu {
        background-color: inherit;
        color: inherit;
    }
}

.submenu > .menu-item {
    display: block;
    width: 100%;
    color: inherit;
    border-bottom: 1px solid #333333; /*#5f5fd3;*/
    /*box-shadow: 4px 8px 20px #555555;*/ /*rgba(0,0,0,0.2);*/
    font-size: .92em;
}

.submenu > .menu-item:last-child {
    border-bottom: 0;
}

.submenu > .menu-item > a {
    width: 100%;
    text-align: left;
    color: inherit;
    /*background-image: url("img/hcio.icon32x32.png");
    background-repeat: no-repeat;*/
}
/*
.submenu > .menu-item:first-child > a {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.submenu > .menu-item:last-child > a {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
*/
.submenu a:hover {
    background-color: #5f5fd3;
    color: white;
}

@media only screen and (max-width: 640px) { /*(max-width: 460px) {*/

    /**
     * Start: Mobile Menu CSS
     */
    .main-menu-flex {
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden; 
        height: 0;
    }

    .menu-logo {
        left: 1px;
    }

    #menu-logo-text {
        width: 64px;
        height: auto;
    }

    .show-mobile-menu-icon {
        cursor: pointer;
        margin: 1em 1em 1.5em 1em;
    }

    .hide-mobile-menu-icon {
        cursor: pointer;
        /*margin: .5em;*/ /* interferes with top of mini logo */
    }

    .show-mobile-menu-icon:after {
        content: "";
        position: absolute;
        top: 1em;
        right: 1em;
        width: 1em;
        height: 0.15em;
    }

    .hide-mobile-menu-icon:after {
        content: "";
        position: absolute;
        top: 0.5em;
        right: 1em;
        width: .5em;
        height: 0.15em;
    }

    .show-mobile-menu-icon:after {
        border-top: 0.5em double white;
        border-bottom: 0.15em solid white;
    }

    .hide-mobile-menu-icon:after {
        content: "X";
        font-size: 1.25em;
        font-style: normal;
    }

    .show-mobile-menu {
        height: auto;
        /*max-height: 200px;*/
        padding-top: 40px;
        /*-webkit-animation-name: slideDown;
        -ms-animation-name: slideDown;
        -moz-animation-name: slideDown;
        animation-name: slideDown;
        -webkit-animation-duration: 2s;
        -ms-animation-duration: 2s;
        -moz-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-timing-function: ease;
        -ms-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease;
        -webkit-animation-direction: normal;
        -ms-animation-direction: normal;
        -moz-animation-direction: normal;
        animation-direction: normal;*/
        -webkit-animation: slideDown 1.5s ease;
        -moz-animation: slideDown 1.5s ease;
        animation: slideDown 1.5s ease;
    }

    .show-mobile-menu-transition {
        height: auto; /*auto;*/ /*24rem;*/ /*100%;*/
        /*max-height: 24rem;*/
        padding-top: 40px;
        /*transition-property: height;*/
        /*transition-duration: 1.5s;
        transition-timing-function: linear;*/
        /*transition: all 1.5s linear;*/
        animation: slideDown 1.5s ease;
    }

   .hide-mobile-menu {
        height: 0;
        /*-webkit-animation-name: slideup;
        -ms-animation-name: slideUp;
        -moz-animation-name: slideUp;
        animation-name: slideUp;
        -webkit-animation-duration: 2s;
        -ms-animation-duration: 2s;
        -moz-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-timing-function: ease;
        -ms-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease;
        animation-direction: reverse;*/
        /*-webkit-animation: slideUp 2s ease reverse;
        -ms-animation: slideUp 2s ease reverse;
        -moz-animation: slideUp 2s ease reverse;
        animation: slideUp 2s ease reverse;*/
    }

    .main-menu-flex > .menu-items-top-right {
        margin-left: 4px;
        margin-bottom: 14px;
        -ms-flex-order: -1;
        order: -1;
    }

    .main-menu-flex > .has-submenu {
        /*background-color: #5f5fd3;*/ 
        /*overflow: hidden;*/
        width: 100%;
    }

    .has-submenu > .submenu {
        background-color: black;
        -ms-flex-align: center;
    }

    .submenu > .menu-item {
        /*margin-left: 4px;*/
        margin-right: auto;
    }

    .submenu > .menu-item > a {
       /*margin-bottom: 100px;*/
       text-align: center;
    }

    /**
    * Start: Mobile Menu Specific CSS Overrides
    */
    .show-mobile-submenu /* .has-submenu:hover > .submenu */ {
        visibility: visible;
        display: block;
        position: static;
        /*-webkit-animation: fadeIn 1s ease;
        -moz-animation: fadeIn 1s ease;
        animation: fadeIn 1s ease;*/
        /*transition-property: all;
        transition-duration: 1.5s;
        transition-timing-function: linear;*/
        /*transition: 1.5s linear;*/
        -webkit-animation: slideDown 1.5s ease;
        -moz-animation: slideDown 1.5s ease;
        animation: slideDown 1.5s ease;
    }

    .hide-mobile-submenu /* .has-submenu > .submenu */ {
        /*position: absolute;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;*/
        position: fixed;
        /*background-color: #121212;*/ /*#5f5fd3;*/
        /*border: 1px solid #333333;*/ /*#5f5fd3;*/
        /*border-radius: 4px;*/
        /*box-shadow: 1px 1px 2px rgba(0,0,0,0.2);*/
        /*box-shadow: 1px 1px 2px #555555;*/ /*rgba(0,0,0,0.2);*/
        visibility: hidden;
        display: hidden;
    }

    .submenu > .menu-item {
        display: hidden; /*display: block;*/
        /*width: 100%;*/
        color: inherit;
        /*border-bottom: 1px solid #333333;*/ /*#5f5fd3;*/
        /*box-shadow: 4px 8px 20px #555555;*/ /*rgba(0,0,0,0.2);*/
    }

    .submenu > .menu-item:last-child {
        border-bottom: 0;
    }

    .submenu > .menu-item > a {
        width: 100%;
        text-align: left;
        color: inherit;
        /*background-image: url("img/hcio.icon32x32.png");
        background-repeat: no-repeat;*/
    }
    /*
    .submenu > .menu-item:first-child > a {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

    .submenu > .menu-item:last-child > a {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    */
    .submenu a:hover {
        background-color: #5f5fd3;
        color: white;
    }
    /**
    * End: Mobile Menu Specific CSS Overrides
    */

    .active-mobile-menu {
        background-color: #5f5fd3;
        color: white;
    }

    .inactive-mobile-menu {
        background-color: inherit;
        color: inherit;
    }

    /*.main-menu-flex > .menu-item {
        margin: 4px;
        width: 100%;
    }*/

    /*.main-menu-flex > .menu-item > .menu-link {*/
        /*display: inline-block;*/
        /*width: 100%;*/
        /*margin-left: 4px;*/
        /*padding-top: 10px;
        padding-bottom: 10px;*/
        /*-ms-flex-align: center;
        -ms-flex-item-align: center;
        align-content: center;
        -ms-flex-pack: center;
        justify-content: center;*/
    /*}*/

    .main-menu-flex .menu-item > .menu-link {
        width: 100%;
        margin-left: 4px;
        padding-top: 1.25em;
        padding-bottom: 1.25em;
        border-top: 1px;
        border-top-style: solid;
        border-top-color: #555555;
    }

    /* .main-menu-flex > .menu-link:first-child {
        margin-top: 10px;
    }

    .main-menu-flex > .menu-item:nth-last-child(2) {
        margin-left: 4px;
    }
    .main-menu-flex > .menu-item-button-border {
        order: -1;
    }

    .main-menu-flex > .menu-item-button-bg {
        order: -1;
    }*/

    /**
    * End: Mobile Menu CSS
    */
}

footer > .menu-item {
    margin: 0 .5rem 0 .5rem;
    padding: 0 .5rem 0 .5rem;
    text-align: center;
}

@media only screen and (max-width: 480px) {
    footer > .menu-item {
        margin: 0 .25rem 0 .25rem;
        padding: 0 .25rem 0 .25rem;
    }
}

/*  devices (phones in portrait) */
@media only screen and (max-width: 320px) {
    footer > .menu-item {
        font-size: .75rem;
    }
}

/*  devices (phones in portrait) */
@media only screen and (min-width: 321px) and (max-width: 480px) {
    footer > .menu-item {
        font-size: .8333rem;
    }
}