html{ height:100%; }
body{
    height:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial;
    margin: 0; /*background-image: url('image/background.jpg'); background-size: cover;*/ color:#322F31;
    background: linear-gradient(#202042, #202042);
}

main{ flex-shrink: 0; margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; text-align: center; color: #6c757d; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
main #logo{ max-width: 70%; width: 600px; margin-bottom: 2rem; transition: 1s; image-rendering: -webkit-optimize-contrast;   }
main #logo:hover{ transform: scale(1.1); }
main h1.company{ color: #FFF; }
main #motto{ font-weight: 400; font-family: system-ui; text-align: center; font-size: 1rem; color: #FFF; text-shadow: none; }
main #phone a{ color: #FFF; font-weight: 500; text-shadow: none; font-size: 1.1rem; text-decoration: none; /*background-color: rgba(0,0,0,0.2);*/ padding: 5px 15px; border-radius: 50px; }
main #phone i{ font-size: 20px; margin-right: 10px; }
main #address{ color: #FFF; font-weight: 500; text-shadow: none; font-size: 1.1rem; text-decoration: none; /*background-color: rgba(0,0,0,0.2);*/ padding: 5px 15px; border-radius: 50px; }
footer { text-align: center; }
footer .social{ font-size: 48px; margin-top: .5rem;  }
footer .social .item-wrapper{ display: inline-block; }
footer .social .item{
    line-height: 0; width: 44px; height: 44px; display: flex; align-items: center;
    transition-duration: .2s; border-radius: 100%; margin: 0 .2rem; border: 1px solid rgba(0,0,0,0.1);
    background: #FFF;/*radial-gradient(#DDD, #DDD)*/
}
footer .social .item:hover{ border-radius: 20%; }
footer .social a{ text-decoration: none;  }
footer .social i{ font-size: 1.75rem; margin-left: auto; margin-right: auto; color:#202042; }
footer{ margin-top: auto; padding-bottom: 1rem; }

#copyright{ margin-top: 2rem; color: #FFF; font-size: 0.85rem; font-family: system-ui; }
#copyright a{ text-decoration: none; color: #CCC; }
#copyright .line-1{ margin-bottom: .25rem; }


/* ANIMATION */
#motto{ animation: opacity1 5s linear infinite; }
#logo { animation: opacity1 5s linear infinite; }
h1.company { animation: opacity1 5s linear infinite; }
@keyframes opacity1 {
    0%   { opacity: 1; }
    50%  { opacity: .2; }
    100% { opacity: 1; }
}