﻿/** {
  box-sizing: border-box;
}

body {
  background-color: #462882;
  height: 100vh;
  width: 100vw;
  position: relative;
}*/

.ccontainer {
    position: absolute;
    z-index: 9999;
    /*bottom: 4em;*/
    right: 5px;
}



.menu-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #00589e;
    box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 5;
    bottom: -7px;
    right: -1px;
    display: table;
    text-align: center;
}

    .menu-toggle .fa {
        color: #fff;
        font-size: 2em;
        display: table-cell;
        vertical-align: middle;
        transition: 0.4s;
    }

    .menu-toggle.open .fa {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

.btn-app {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    position: absolute;
    background-color: #0078d7;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 8px;
}

    .btn-app .fa {
        line-height: 2.5em;
    }

.open .btn-app {
    box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}

.menu-round {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
}

    .menu-round .btn-app {
        bottom: 0.25em;
        right: 0.25em;
        transition: 0.4s;
    }

    .menu-round.open .btn-app:nth-of-type(1) {
        right: 0.5em;
        bottom: 4.25em;
        transition-delay: 0.2s;
    }

    .menu-round.open .btn-app:nth-of-type(2) {
        right: 3.5em;
        bottom: 3.5em;
        transition-delay: 0.1s;
    }

    .menu-round.open .btn-app:nth-of-type(3) {
        right: 4.25em;
        bottom: 0.5em;
    }

.menu-line {
    position: absolute;
    z-index: 2;
}

    .menu-line .btn-app {
        bottom: 0;
        right: 0.5em;
        transition: 0.3s;
        transition-delay: 0.5s;
        line-height: 1;
    }

@media screen and (min-width: 751px) {
    .menu-line.open .btn-app:nth-of-type(1) {
        bottom: 4.25em;
    }

    .menu-line.open .btn-app:nth-of-type(1) {
        bottom: 7.25em;
    }

    .menu-line.open .btn-app:nth-of-type(2) {
        bottom: 10.25em;
    }

    .menu-line.open .btn-app:nth-of-type(3) {
        bottom: 13.25em;
    }

    .menu-line.open .btn-app:nth-of-type(4) {
        bottom: 16.25em;
    }

    .menu-line.open .btn-app:nth-of-type(5) {
        bottom: 19.25em;
    }

    .menu-line.open .btn-app:nth-of-type(6) {
        bottom: 22.25em;
    }

    .menu-line.open .btn-app:nth-of-type(7) {
        bottom: 25.25em;
    }
}

@media screen and (max-width: 750px) {

    .menu-round.open .btn-app:nth-of-type(3) {
        right: 4.45em;
        bottom: 0.4em;
    }

    .menu-line .btn-app {
        bottom: 5px;
    }

    .menu-line.open .btn-app:nth-of-type(1) {
        right: 4.25em;
    }

    .menu-line.open .btn-app:nth-of-type(1) {
        right: 7.25em;
    }

    .menu-line.open .btn-app:nth-of-type(2) {
        right: 10.25em;
    }

    .menu-line.open .btn-app:nth-of-type(3) {
        right: 13.25em;
    }

    .menu-line.open .btn-app:nth-of-type(4) {
        right: 16.25em;
    }

    .menu-line.open .btn-app:nth-of-type(5) {
        right: 19.25em;
    }

    .menu-line.open .btn-app:nth-of-type(6) {
        right: 22.25em;
    }

    .menu-line.open .btn-app:nth-of-type(7) {
        right: 25.25em;
    }
}


.fa {
    font: normal normal normal 14px/1 FontAwesome !important;
    padding-top: 2px;
}
