html {
  height: 100%;
}

body {
  font-family: 'RosesareFF0000', Arial, Helvetica, sans-serif;
  font-size: 8px;
  color: #ff0000;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

table.master {
   height: 100%;
   width: 100%;
}

@font-face {
  font-family: RosesareFF0000;
  src: url("font/RosesareFF0000.woff") format("woff");
}

.font {
  font-family: 'RosesareFF0000', Arial, Helvetica, sans-serif;
  font-size: 8px;
  color: #ff0000;
}

.sonderausgaben {
  font-family: 'RosesareFF0000', Arial, Helvetica, sans-serif;
  font-size: 6px;
  line-height: 12px;
  color: #ff0000;
}

a.contact:link {
  color: #ff0000;
  text-decoration: none;
}
a.contact:visited {
  color: #ff0000;
  text-decoration: underline;
}
a.contact:hover {
  color: #ff0000;
  text-decoration: underline;
}
a.contacttel:link {
  color: #ff0000;
  text-decoration: none;
}
a.contacttel:visited {
  color: #ff0000;
  text-decoration: none;
}
a.contacttel:hover {
  color:#ff0000;
  text-decoration: none;
}

a[href^="tel"] {
  text-decoration: none;
  cursor: default;
}

@media only screen and (max-device-width: 480px) {
  a[href^="tel"] {
    text-decoration: none;
    cursor: pointer;
  }
}

.copyleft {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  display: inline-block;
}

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rgba(0, 0, 0, 0.9) rgba(255, 0, 0, 0.4);
  scrollbar-width: thin;
}

.circle-audio-player {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
#playerContainer {
  padding-bottom: 22px;
}

.modal {
  position: fixed;
  padding: 10px;
  max-width: 157px;
  top: 33%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal .close {
  position: absolute;
  right: 75px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal:target + .close-modal{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal1 {
  position: fixed;
  padding: 10px;
  max-width: 157px;
  top: 33%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal1:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal1-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal1 .close {
  position: absolute;
  right: 79px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal1 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal1 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal1:target + .close-modal1{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal2 {
  position: fixed;
  padding: 10px;
  max-width: 150px;
  top: 31%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal2:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal2-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal2 .close {
  position: absolute;
  right: 75px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal2 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal2 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal2:target + .close-modal2{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal3 {
  position: fixed;
  padding: 10px;
  max-width: 80px;
  top: 22%;
  left: 46.8%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal3:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal3-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal3 .close {
  position: absolute;
  right: -40px;
  top: 5px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal3 .close:hover {
  color: #ffffff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal3 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal3:target + .close-modal3{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal4 {
  position: fixed;
  padding: 10px;
  max-width: 220px;
  top: 26%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal4:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal4-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal4 .close {
  position: absolute;
  right: 76px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal4 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal4 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal4:target + .close-modal4{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal5 {
  position: fixed;
  padding: 10px;
  max-width: 150px;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal5:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal5-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal5 .close {
  position: absolute;
  right: 74px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal5 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal5 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal5:target + .close-modal5{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal8 {
  position: fixed;
  padding: 10px;
  max-width: 160px;
  top: 30.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal8:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal8-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal8 .close {
  position: absolute;
  right: 80px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal8 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal8 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal8:target + .close-modal8{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal9 {
  position: fixed;
  padding: 10px;
  max-width: 457px;
  top: 26%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal9:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal9-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal9 .close {
  position: absolute;
  right: 50px;
  top: 2px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal9 .close:hover {
  color: #ffffff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal9 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal9:target + .close-modal9{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal10 {
  position: fixed;
  padding: 10px;
  max-width: 450px;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal10:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal10-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal10 .close {
  position: absolute;
  right: 124px;
  top: 19px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal10 .close:hover {
  color: #ffffff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal10 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal10:target + .close-modal10{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal11 {
  position: fixed;
  padding: 10px;
  max-width: 350px;
  top: 26%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.0);
  visibility: hidden;
  opacity: 0;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.modal11:target {
  visibility: visible;
  opacity: 1;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.modal11-close {
  position: absolute;
  padding: 10px;
  max-width: 500px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.9);
}
.modal11 .close {
  position: absolute;
  right: 69px;
  top: 0px;
  padding: 5px;
  color: #ff0000;
  transition: color .3s;
  font-size: 1em;
  line-height: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.modal11 .close:hover {
  color: #fff;
  animation: 
  blink-caret .5s step-end infinite;
  text-decoration: none;
}
.close-modal11 {
  background: rgba(0,0,0,.85);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}
.modal11:target + .close-modal11{  
  opacity: 1;
  visibility: visible;
  /* cancel visibility transition delay */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.line-1{
  position: relative;
  top: 50%;
  width: 7.3em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter1{
  animation: typewriter1 1s steps(6) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter1{
  from{width: 0;}
  to{width: 8.0em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.line-2{
  position: relative;
  top: 50%;
  width: 22em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 7px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter2{
  animation: typewriter2 1s steps(6) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter2{
  from{width: 0;}
  to{width: 25.0em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.line-3{
  position: relative;
  top: 50%;
  width: 19em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter3{
  animation: typewriter3 1s steps(6) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter3{
  from{width: 0;}
  to{width: 11.7em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.line-4{
  position: relative;
  top: 50%;
  width: 11.5em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter4{
  animation: typewriter4 1s steps(6) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter4{
  from{width: 0;}
  to{width: 12.7em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.line-5{
  position: relative;
  top: 50%;
  width: 10.9em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter5{
  animation: typewriter5 1s steps(10) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter5{
  from{width: 0;}
  to{width: 12.2em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.line-6{
  position: relative;
  top: 50%;
  width: 19em;
  margin: 0 auto;
  border-right: .30em solid #ff0000;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter6{
  animation: typewriter6 1s steps(6) 1s 1 normal both,
             blinkTextCursor 500ms steps(6) infinite normal;
}
@keyframes typewriter6{
  from{width: 0;}
  to{width: 18.1em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #ff0000 }
}

.sprite {
    width: 89px;
    height: 49px;
    position: absolute;
    top: 73%;
    left: 29%;
    transform: translate(-50%, -50%);
    background-image: url('images/avi_4_visual/avi_4_visual_anim_png.png');
    transform: scale(1);    
    animation: play 2s steps(4) infinite;
}
@keyframes play {
   from { background-position: 356px; }
     to { background-position: 0px; }
}

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
#delay:hover {
  font-size: 36px;
}

.box {
    border-style: 0px;
    border-width: 0px;
    display: block;
    width: 100px;
    height: 100px;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    width: 100px;
    height: 100px;
    transform: rotate(360deg);
}

.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}