@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@keyframes floating {
    0% {
        transform: translate3d(0, 0, 0);
    }

    45% {
        transform: translate3d(0, -10%, 0);
    }

    55% {
        transform: translate3d(0, -10%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes floatingShadow {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(0.85);
    }

    55% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
}

body {
    background-color: #f7f7f7;
}

.container-body {
    font-family: 'Roboto', sans-serif !important;
    color: #09A6A3;
    position: relative;
    height: 100vh;
    text-align: center;
    font-size: 24px;
}

    .container-body h1 {
        font-size: 32px;
        margin-top: 32px;
    }

.image-wrapper {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    paddig-top: 64px;
    paddig-bottom: 64px;
}

.image {
    width: 25%;    
    margin-left: auto;
    margin-right: auto;    
    overflow: hidden;    
    position: relative;    
    animation: floating 3s ease-in-out infinite;
}


.navbar-wa {
    /*
        #075E54
         #25D366
    */
    background-color: #075E54 !important;
    border-color: #075E54;
}

    .navbar-wa .navbar-brand {
        color: white;
    }


    .navbar-wa .navbar-nav > li > a {
        font-size: 15px;
        color: #E8F3F8;
    }

        .navbar-wa .navbar-nav > li > a:hover, .navbar-wa .navbar-nav > li > a:active, .navbar-wa .navbar-nav > li > a:focus {
            background-color: #25D366;
            color: #FFF;
        }




.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
    /*background-color: #efefef;*/
    text-align: center;
}

.copyright {
    font-size: 1.0em;
}

.navbar-toggle .icon-bar {
    color: white;
}

.shadow {
    width: 128px;
    height: 16px;
    background-color: rgba(234, 234, 234, 0.75);
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 50%;
    animation: floatingShadow 3s ease-in-out infinite;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */
    .image {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;
        animation: floating 3s ease-in-out infinite;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS */
    .image {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;
        animation: floating 3s ease-in-out infinite;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    /* CSS */
    .image {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;
        animation: floating 3s ease-in-out infinite;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    /* CSS */
    .image {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;
        animation: floating 3s ease-in-out infinite;
    }
}