html { background-color: #fff; overflow: hidden; } body { display: flex; flex-flow: wrap; height: 100vh; justify-content: space-between; flex-direction: column; } .header { height: 200px; width: 100% } svg { padding-top: 2em; } .impulsPath { fill: none; stroke: #04669c; stroke-miterlimit: 1; stroke-width: 6px; stroke-dasharray: 1946.243; stroke-dashoffset: 0; stroke-linejoin: round; stroke-linecap: round; animation: dash 10s ease-out infinite; animation-direction: normal; } .FET-logotext-stroke { fill: #fff; } #FET-logotext { opacity: 0; animation: logotext 10s ease-in infinite; } .content-area { height: auto; width: 100%; } .footer { width: 100%; height: 150px; background-color: #04669c; padding-bottom: 10px; display: flex; flex-wrap: nowrap; justify-content: space-between; color: #fff; flex-basis: bottom; } .footer h3, p { margin: 0; padding: 0 20px; font-family: Helvetica, Arial; letter-spacing: 0.1em; } .footer h3 { padding-top: 20px; } .footer .adress { margin: auto; text-align: left; } .footer .contact { margin: auto; text-align: center; } .footer .servicecontainer{ display: inline-flex; margin: auto; } .footer .servicecontainer .servicetime { margin: auto; text-align: right; } .footer .servicecontainer .servicetime #time { font-size: 0.7em } .footer .servicecontainer .servicestatus{ margin: auto; width:20px; height: 100% padding-right: 30px; background-color: #fff; } /*K E Y F R A M E S*/ @keyframes dash { from { stroke-dashoffset: 1946.243; opacity: 0; stroke-width: 0.5; } to { opacity: 1; stroke-dashoffset: 0; stroke-width: 5px; } } @keyframes logotext { from { opacity: 0; } to { opacity: 1; } }