body {
}


.nav-link:hover {
    font-weight:bold !important;
}
.nav-link.active {
    font-weight: bold !important;
}



/*FOOTER*/


footer {
    background-color: #33383c;
    padding: 70px 0px;
}

    footer ul li {
        padding: 5px 0px;
    }

.adress span, .contact span, .social span {
    color: #FFF;
    font-weight: 800;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: block;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 3px;
}

.adress li p, .contact li a, .social li a {
    color: #FFF;
    letter-spacing: 2px;
    text-decoration: none;
    font-size: 15px;
}

.social li {
    float: left;
}

.adress, .contact, .social {
    list-style: none;
}

.fa {
    color: #9c9c9c;
    margin-right: 15px;
    font-size: 14px;
}


/* END*/



.tooltip-inner {
    min-width: 100px;
    max-width: 100%;
}

/*LOADING*/



.loading {
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: absolute;
    left: 20px;
    top:200px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.is-loading {
    animation: spinAround 1.5s infinite linear;
    width: 32px;
    height: 32px;
    background: linear-gradient(#3DD3AE, #3DD3AE 48%, #000 48%, #000 52%, #FF2B5A 52%, #FF2B5A);
    border-radius: 50%;
    position: relative;
}

    .is-loading:after {
        content: " ";
        position: absolute;
        border-radius: 50%;
        background: #fff;
        width: 26px;
        height: 26px;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*END*/




p { /* MIN */
    font-size: 11pt;
    margin-bottom:10px;
}

#mydiv {
    position: absolute;
    z-index: 9;
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #d3d3d3;
    padding: 0px;
    margin: 0px;
}
#pu_release, #pu_edit {
    position: absolute;
    z-index: 9;
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #d3d3d3;
    padding: 0px;
    margin: 0px;
}

#mydivheader, #pu_releaseheader, #pu_editheader {
    padding: 5px;
    font-size: 9pt;
    cursor: move;
    z-index: 10;
    background-color: #A8A8A8;
    color: #fff;
}



@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Quicksand);

body {
    background: #292426;
    font-family: 'Open Sans', sans-serif;
    color: #4d4e4c;
}

h1 {
    font-weight: normal;
    line-height: 1.1;
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
    font-size: 3em;
    color: #fff;
}

.container {
    width: 850px;
    margin: 20px auto;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sitemap {
    width: 692px;
    margin: 50px auto;
}

    .sitemap a {
        color: #000;
        text-decoration: none;
        display: inline-block;
        text-transform: uppercase;
        margin: 0 5px;
        border-radius: 7px;
        text-align: center;
        position: relative;
    }

.first > li > a {
    background: #b4b5b4;
    width: 350px;
    height: 70px;
    line-height: 70px;
    display: block;
    margin: auto;
}

    .first > li > a:after {
        content: "";
        position: absolute;
        left: 50%;
        width: 1px;
        height: 10px;
        background: #9e9f9e;
        top: 100%;
    }

.second {
    padding-top: 20px;
}

    .second > li {
        display: inline-block;
        vertical-align: top;
    }

    .second a {
        background: #cbcccb;
        font-size: 14px;
        width: 125px;
        height: 50px;
        line-height: 50px;
        z-index: 10;
    }

    .second a:hover {
        background: #b9f0fc;
       
    }

        .second a:before {
            content: "";
            position: absolute;
            border: 1px solid #9e9f9e;
            border-left: none;
            border-bottom: none;
            height: 9px;
            top: -10px;
            left: -76px;
            width: 139px;
        }

    .second li:first-child a:before {
        border-top: none;
    }

.third {
    margin-left: 16px;
    padding-top: 20px;
}

    .third a {
        background: #e4e4e3;
        width: 100px;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        z-index: 5;
        font-size: 10px;
    }

        .third a:before {
            border: 1px solid #9e9f9e;
            border-right: none;
            border-top: none;
            height: 55px;
            top: -35px;
            left: -8px;
            width: 7px;
        }



/* ========================== */
/*tooltip Box*/
.con-tooltip {
    position: relative;
   
    border-radius: 9px;
    padding: 0 0px;
    margin: 10px;
    display: inline-block;
    text-align: left;
    transition: all 0.3s ease-in-out;
    cursor: default;
}

/*tooltip */
.tooltip {
    visibility: hidden;
    z-index: 999;
    opacity: .40;
    width: 500px;
    padding: 0px 20px;
    background: #FFF;
    color: #000;
    position: absolute;
    top: -180%;
    left: -25%;
    border-radius: 9px;
    font: 16px;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}


    /* tooltip  after*/
    .tooltip::after {
        content: " ";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 12.5px 0 12.5px;
        border-color: #333 transparent transparent transparent;
        position: absolute;
        left: 40%;
    }

.con-tooltip:hover .tooltip {
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite alternate;
}

@keyframes odsoky {
    0% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(1px);
    }
}

/*hover ToolTip*/
.left:hover {
    transform: translateX(-6px);
}

.top:hover {
    transform: translateY(-6px);
}

.bottom:hover {
    transform: translateY(6px);
}

.right:hover {
    transform: translateX(6px);
}



/*left*/

.left .tooltip {
    top: -20%;
    left: -170%;
}

    .left .tooltip::after {
        top: 40%;
        left: 90%;
        transform: rotate(-90deg);
    }




/*bottom*/

.bottom .tooltip {
    top: 115%;
    left: -20%;
}

    .bottom .tooltip::after {
        top: -17%;
        left: 40%;
        transform: rotate(180deg);
    }



/*right*/

.right .tooltip {
    top: -20%;
    left: 115%;
}

    .right .tooltip::after {
        top: 40%;
        left: -12%;
        transform: rotate(90deg);
    }

h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
    width: 8em;
    margin: 20% auto 1% auto;
}