﻿.api {
    position: fixed;
    bottom: 10px;
    left: 15px;
    z-index: 20;
}

    .api .whatsapp {
        position: relative;
        transition: all .5s ease-in-out;
        z-index: 999;
        margin-top: 10px;
    }

        .api .whatsapp a {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
            font-size: 28px;
            display: block;
            text-align: center;
            line-height: 50px;
            color: white;
            background: #4dc247;
        }

        .api .whatsapp .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            line-height: normal;
            font-size: 15px;
            top: 13px;
            left: 105%;
            height: auto;
        }

        .api .whatsapp:hover a {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .api .whatsapp:hover .tooltiptext {
            visibility: visible;
        }

    .api .telefon {
        position: relative;
        margin-top: 10px;
        transition: all .5s ease-in-out;
        z-index: 999;
    }

        .api .telefon a {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
            font-size: 28px;
            display: block;
            text-align: center;
            line-height: 50px;
            color: white;
            background: #337ab7;
        }

        .api .telefon .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            line-height: normal;
            font-size: 15px;
            top: 13px;
            left: 105%;
            height: auto;
        }

        .api .telefon:hover a {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .api .telefon:hover .tooltiptext {
            visibility: visible;
        }

    .api .telegram {
        position: relative;
        margin-top: 10px;
        transition: all .5s ease-in-out;
        z-index: 999;
    }

        .api .telegram a {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
            font-size: 28px;
            display: block;
            text-align: center;
            line-height: 50px;
            color: white;
            background: #27A7E5;
        }

        .api .telegram .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            line-height: normal;
            font-size: 15px;
            top: 13px;
            left: 105%;
            height: auto;
        }

        .api .telegram:hover a {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .api .telegram:hover .tooltiptext {
            visibility: visible;
        }

    .api .instagram {
        position: relative;
        margin-top: 10px;
        transition: all .5s ease-in-out;
        z-index: 999;
    }

        .api .instagram a {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
            font-size: 28px;
            display: block;
            text-align: center;
            line-height: 50px;
            color: white;
            background: #fd3a67;
        }

        .api .instagram .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            line-height: normal;
            font-size: 15px;
            top: 13px;
            left: 105%;
            height: auto;
        }

        .api .instagram:hover a {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .api .instagram:hover .tooltiptext {
            visibility: visible;
        }

.lang {
    float: left;
    width: 100%;
}

    .lang img {
        display: inline-block;
        height: 16px;
        margin-right: 8px;
        margin-top: 0px;
        margin-bottom: -3px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    .lang .currencyitems a {
        width: 24%;
    }

.activelang {
    opacity: 0.45;
    filter: alpha(opacity=45);
}

.activelangcur {
    opacity: 0.45;
    filter: alpha(opacity=45);
}

.lang h4 {
    float: left;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 24px;
}

.lang a {
    display: inline-block;
    vertical-align: top;
    margin: 5px 10px;
    font-size: 16px;
    color: #9d9d9d;
    padding: 5px 15px;
    border: 1px solid #0000004d;
    border-radius: 5px;
}

    .lang a selected {
        opacity: 0.45;
        filter: alpha(opacity=45);
    }

    .lang a:hover {
        color: #000;
    }

.rounded-25 {
    border-radius: 25%;
}

@media only screen and (max-width: 767px) {
    .api {
        position: fixed;
        bottom: 0px !important;
        left: 0 !important;
        z-index: 999 !important;
        width: 100% !important;
        display: flex;
    }

        .api div {
            flex: 1 0 0%;
        }

        .api a {
            height: 40px !important;
            line-height: 40px !important;
            font-size: 20px !important;
            border-radius: 0 !important;
            width: 100% !important;
        }

        .api:hover a {
            transform: rotate(0deg) !important;
            -webkit-transform: rotate(0deg) !important;
        }
}
