html, body {
    height: 100% !important;
    font-family: web_Yekan;
    margin: 0;
    padding: 0
}

.bgx {
    width: 100%;
    min-height: 100%;
    background-image: url('/Images/Content/CityBg.jpg?t=1');
    background-repeat: repeat-y;
    background-size: cover;
}

.RadBox {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
    border: silver solid 1px;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    direction: rtl;
    vertical-align: middle !important
}

.RadBox * {
    color: black;
    font-weight: bold
}

@keyframes imggrayscale {
    from {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
    }
    50% {
        filter: grayscale(0.5);
        -webkit-filter: grayscale(0.5);
    }
    to {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
    }
}
@keyframes imgnormal {
    from {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
    }

    50% {
        filter: grayscale(0.5);
        -webkit-filter: grayscale(0.5);
    }

    to {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
    }
}


.RadBox:hover > a img {
    animation: imggrayscale 0.5s ease-in-out forwards;
    animation-iteration-count: 1
}
.RadBox img {
    animation: imgnormal 0.5s ease-in-out forwards;
    animation-iteration-count: 1
}

.logo { width: 100% }

.fancy-tooltip em {
    color: white;
}

.btn {
    font-weight: 400;
    font-size: 1em !important;
    color: white
}