/* Menu Items */

@media screen and (min-width: 601px) and (max-width: 1001px) {

    .utHorizontalMenuItem {
        font-size: 12px;
        color: silver;
        padding: 10px;
        cursor: pointer;
        float: left;
    }

    .min1200scale05 {
        transform: scale(0.7, 0.7);
    }

    .utHorizontalMenuItemSelected{
        font-size: 12px;
        color: orange;
        padding: 10px;
        cursor: pointer;
        float: left;
        text-decoration: underline;
    }
}

@media screen and (min-width: 1001px) {

    .utHorizontalMenuItem {
        font-size: 16px;
        font-weight: bold;
        color: silver;
        padding: 20px;
        cursor: pointer;
        float: left;
    }

    .utHorizontalMenuItem:hover{
        color: orange;
        text-decoration: underline;
    }

    .utHorizontalMenuItemSelected{
        font-size: 16px;
        font-weight: bold;
        padding: 20px;
        cursor: pointer;
        float: left;
        color: orange;
        text-decoration: underline
    }

    @-webkit-keyframes utHorizontalMenuOn{
        0%   {top: -50px; opacity: 0.5;}
        100% {top: 0px; opacity: 0.9;}
    }

    @keyframes utHorizontalMenuOn{
        0%   {top: -50px; opacity: 0.5;}
        100% {top: 0px; opacity: 0.9;}
    }

    @-webkit-keyframes utHorizontalMenuOff{
        0%   {top: 0px;}
        100% {top: -50px;}
    }

    @keyframes utHorizontalMenuOff{
        0%   {top: 0px;}
        100% {top: -50px;}
    }
}

@media screen and (max-width: 600px) {

    .utHorizontalMenuItem {
        clear: both;
        font-size: 12px;
        color: silver;
        padding: 2px;
        padding-left: 20px;
        cursor: pointer;

        border-style: solid;
        border-color: rgba(66,66,66, 0.1);
        border-width: 1px;
    }

    .utHorizontalMenuItem:hover{
        background-color: darkgreen;
        color: orange;
        text-decoration: underline;
    }

    .utHorizontalMenuItemSelected{
        clear: both;
        font-size: 12px;
        color: orange;
        padding: 2px;
        padding-left: 20px;
        cursor: pointer;

        text-decoration: underline;

        border-style: solid;
        border-color: rgba(66,66,66, 0.1);
        border-width: 1px;
    }

    @-webkit-keyframes utHorizontalMenuOn{
        0%   {top: -185px; opacity: 0.5;}
        100% {top: 0px; opacity: 0.9;}
    }

    @keyframes utHorizontalMenuOn{
        0%   {top: -185px; opacity: 0.5;}
        100% {top: 0px; opacity: 0.9;}
    }

    @-webkit-keyframes utHorizontalMenuOff{
        0%   {top: 0px;}
        100% {top: -185px;}
    }

    @keyframes utHorizontalMenuOff{
        0%   {top: 0px;}
        100% {top: -185px;}
    }

    .min1200scale05 {
        transform: scale(0.6, 0.6);
    }
}

/* Logos in horizontal menu */
@media screen and (min-width: 1201px) {
    .min1200hide{
        display: block;
    }
}

@media screen and (max-width: 1200px) {
    .min1200hide {
        display: none;
    }
}

.utHorizontalMenuItemLogo {
    width: 60px;
    height: 35px;
    background-image: url('../img/transformLogo/Transform_payoff_silver_120px.png');
    background-size: 60px 35px;
}

.utHorizontalMenuItemLogo:hover {
    background-image: url('../img/transformLogo/Transform_payoff_orange_120px.png');
}

.utHorizontalMenuItemLogoCartoonW {
    width: 60px;
    height: 35px;
    background-image: url('../img/transformLogo/Transform_payoff_bw_120px.png');
    background-size: 60px 35px;
}

.utHorizontalMenuItemLogoCartoonW:hover {
    background-image: url('../img/transformLogo/Transform_payoff_orange_120px.png');
}

.utHorizontalMenuOn {
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: green;
    width: 100%;
    z-index: 2000;

    -webkit-animation: utHorizontalMenuOn 1s ease 0s 1;
    animation: utHorizontalMenuOn 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.utHorizontalMenuOff{
    position: fixed;
    left: 0px;
    top: -50px;
    background-color: green;
    width: 100%;
    z-index: 2000;
    opacity: 0.5;

    -webkit-animation: utHorizontalMenuOff 1s ease 0s 1;
    animation: utHorizontalMenuOff 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}