﻿#dock-container {
    position: fixed;
    bottom: 10px;
    /*position: absolute;*/
    text-align: center;
    /*margin-left: 220px;*/
    right: 5%;
    left: 5%;
    width: 90%;
    /*background: rgba(255,255,255,0.9);*/
    /*background: rgba(47,61,76,0.9);*/
    /*background: #ca5118cc;*/
    /*background: rgba(0,0,0,0.8);*/
    /*border-radius: 10px 10px 0 0;*/
    border-radius: 0 0 10px 10px;
    /*border: 5px solid rgb(202, 81, 0);*/
    border-top: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}
    #dock-container ul {
        position: initial;
        margin: revert;
        padding: 0;
    }

    #dock-container li {
        list-style-type: none;
        display: inline-block;
        position: relative;
       
    }

    #dock-container.proyectos li.active img {
        background: #fff;
        border: 3px solid #006AEA;
        /*-webkit-transform: scale(1.5);
            margin: 0 1em;*/
    }

    #dock-container.programa li.active img {
        background: #fff;
        border: 3px solid #ff8800;
        /*-webkit-transform: scale(1.5);
            margin: 0 1em;*/
    }

    #dock-container.operacion li.active img {
        background: #fff;
        border: 3px solid #009A00;
        /*-webkit-transform: scale(1.5);
            margin: 0 1em;*/
    }

    #dock-container.terminacion li.active img {
        background: #fff;
        border: 3px solid #dc3545;
        /*-webkit-transform: scale(1.5);
            margin: 0 1em;*/
    }

        #dock-container li.active span {
            /*display: block;
            color: #fff;*/
        }

    #dock-container li img {
        background: rgba(0,0,0,0.05);
        /*background: rgba(255,255,255,0.5);*/
        /*border: 4px solid rgba(202, 81, 0, 0.3);*/
        border-radius: 10px;
        padding: 10px;
        width: 54px;
        height: 54px;
        -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5))); /* reflection is supported by webkit only */
        -webkit-transition: all 0.3s;
        -webkit-transform-origin: 50% 100%;
    }
    #dock-container.proyectos li img {
        background: rgba(0,106,234,0.2);
    }
    #dock-container.programa li img {
        background: rgba(238,91,33,0.2);
    }
    #dock-container.operacion li img {
        background: rgba(0,154,0,0.2);
    }
    #dock-container.terminacion li img {
        background: rgba(220,53,69,0.2);
    }

        #dock-container li:hover img {
            /*-webkit-transform: scale(2);
            margin: 2em;*/
            -webkit-transform: scale(1.5);
            margin: 0 1em;
        }

        #dock-container li:hover + li img,
        #dock-container li.prev img {
            /*-webkit-transform: scale(1);*/
            /*margin: 2em 1em 0 1.5em;*/
        }

        #dock-container li span {
            display: none;
            position: absolute;
            bottom: 85px;
            /*bottom: -50px;*/
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.75);
            padding: 4px 0;
            border-radius: 12px;
            font-size: inherit;
        }

        #dock-container li:hover span {
            display: block;
            color: #fff;
        }

    #dock-container .option {
        padding: 4px 10px;
        font-weight: bold;
        border-radius: 12px;
        color: #2f4050;
    }
        #dock-container .option:hover {
            background: rgba(0,0,0,0.1);
        }
        #dock-container .option.active {
            /*background: rgba(255,255,255,0.8);*/
            background-color: rgba(0,0,0,0.75);
            color: #fff;
        }

    #dock-container.proyectos .option.active {
        background-color: #006AEA;
        color: #fff;
    }

    #dock-container.programa .option.active {
        background-color: #ee5b21;
        color: #fff;
    }

    #dock-container.operacion .option.active {
        background-color: #009A00;
        color: #fff;
    }

    #dock-container.terminacion .option.active {
        background-color: #dc3545;
        color: #fff;
    }
