/* 20231111 */

/*
#476818 primary rgb(71, 104, 24)
#003300 dark rgb(0, 51, 0)
#e5eedd light rgb(229, 238, 221)
*/

:root,[data-theme=light] {
  --color-primary: #476818;
  --color-secondary: #d8bc29; /* gelb*/
  --color-dark: #003300;
  --color-light: #e5eedd;
  --font-color: #000;
  --link-color: #476818;
  --body-bg: #fff;
  --bg-invers: #222;
  --text-invers: #fff;
  --lightest-gray: #f6f6f3;
 /* --footer-bg: #292929;*/
  --footer-bg: #dcdcd8;
  --footer-color: #999;
  --topnav-link-color: #454d5d;
  --topnav-scrolled-bg: #fff;
  --btn-font-color: #476818;
  --btn-bg-color: #fff;
  --btn-hover-font-color: #476818;
  --btn-hover-bg-color: #e5eedd;
  --header-bg: rgba(255,255,255,0);
  --modal-bg: #fff;
  --bottom-wave-fill: #fff;
  --bg-img: url(/assets/img/wavetop-light5.svg);
  --wave-one: #e7e7e4;
  --light-green: rgba(229,238,221,1);
  --middle-gray: #666;
  --waveback05: url(/assets/img/wave-back-05-green.svg);

  --gray1: #f9f9f6; /* lightest */
  --gray2: #f3f3f0;
  --gray3: #ededea;
  --gray4: #e7e7e4;
  --gray5: #e1e1de;
  --gray6: #dbdbd8;
  --gray7: #d5d5d2;
}

[data-theme=dark] {
  /* go for https://www.halo-lab.com/blog/dark-ui-design-11-tips-for-dark-mode-design */
  --color-primary: #68952f;
  --color-secondary: #d8bc29; /* gelb*/
  --color-dark: #003300;
  --color-light: #fffbf7;
   --font-color: #ddd;
   --link-color: #68952f; /* #a5b04a;  #54c4c5; */
   --body-bg: #171715;
   /* --lightest-gray: #f6f7f8;*/
   --bg-invers: #fff;
   --text-invers: #222;
   --lightest-gray: #333;
   --footer-bg: #2f2f2c;
   --footer-color: #ccc;
   --topnav-link-color: #d8bc29;
   --topnav-scrolled-bg: #171715;
   --btn-font-color: #fffcfe;
   --btn-bg-color: #222;
   --btn-hover-font-color: #fffcfe;
   --btn-hover-bg-color: #393939;
   --header-bg: rgba(0, 0, 0, 0);
   --modal-bg: #292929;
   --bottom-wave-fill: #171715;
   --bg-img: url(/assets/img/wavetop-dark.svg);
   --light-green: #263026;
   --middle-gray: #666;
   --waveback05: url(/assets/img/wave-back-05-orange.svg);

  --gray1: #11110e; /* lightest */
  --gray2: #171714;
  --gray3: #1d1d1a;
  --gray4: #232320;
  --gray5: #292926;
  --gray6: #2f2f2c;
  --gray7: #353532;
  --gray8: #3b3b35;
}


@font-face {
    font-family: "Droid Sans";
    src: url(/assets/fonts/DroidSans.woff2) format("woff2"), url(/assets/fonts/DroidSans.woff) format("woff"), url(/assets/fonts/DroidSans.otf) format("opentype");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: "Droid Sans";
    src: url(/assets/fonts/DroidSans-Bold.woff2) format("woff2"), url(/assets/fonts/DroidSans-Bold.woff) format("woff"), url(/assets/fonts/DroidSans-Bold.otf) format("opentype");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: "MuseoSlab";
    src: url(/assets/fonts/Museo_Slab_500.woff2) format("woff2"), url(/assets/fonts/Museo_Slab_500.woff) format("woff"), url(/assets/fonts/Museo_Slab_500.otf) format("opentype");
    font-style: normal;
    font-weight: 700
}


@font-face {
    font-family: "Gloock";
    src: url(/assets/fonts/Gloock-Regular.otf) format("opentype");
    font-style: regular;
    font-weight: 400
}

html {
  font-size: 20px;
}

body {
  font-family: 'Droid Sans', 'Lucida Grande', Verdana, Arial, Sans-Serif;
  font-size: 1rem;
  background-color: var(--body-bg);
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  color: var(--font-color);
 /* transition: all 0.5s ease;*/
}

h1,.hero h1, h2, .gloock {
  font-family: 'Gloock', Serif;
  font-weight:400;
  color: var(--font-color);
  line-height: 1em;
}

main h2, main h3 {
  margin-top:1em;
}

/*main p {
  -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}*/

/* h2 { font-size: 2.5rem;} */
h1.article-title {font-size: 2rem;  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

@media (min-width: 501px) {
  h1.article-title {font-size: 3rem;  }
}


h2.article-subline {font-size:1.5rem; font-family: 'Droid Sans', 'Lucida Grande', Verdana, Arial, Sans-Serif !important;}
.droid {font-family: 'Droid Sans', 'Lucida Grande', Verdana, Arial, Sans-Serif !important;}
.gloock {font-family: 'Gloock', Serif !important;}

h3,h4,h5,h6 {
  font-family: 'Droid Sans', 'Lucida Grande', Verdana, Arial, Sans-Serif;
  font-weight: 700;
  color: var(--font-color);
}




a, a:link, a:visited {color: var(--link-color); }
a:hover {color: var(--font-color); }

#body-wrapper p a,
#body-wrapper li a {
  text-decoration: underline;
  /* box-shadow: inset 0 -1px 0 0 #fff, inset 0 -8px 0 0 rgba(71,104,24,0.3); */
  transition: all 0.2s ease;
}

#body-wrapper p a:hover,
#body-wrapper li a:hover {

  /* box-shadow: inset 0 -1px 0 0 #fff, inset 0 -4px 0 0 rgba(0,0,0,0.3); */
}



a[rel="lightbox"]:after { background-image: none !important; }

/* header */

img.brand-logo { height: 14px;}

@media (min-width: 501px) {
  img.brand-logo { height: 20px;}
}

[data-theme=dark] img.brand-logo {filter: brightness(0) invert(1);}
[data-bs-theme=light] .btn-close, [data-theme=light] .btn-close {
    filter: none;
}


header ul.navbar-nav li a:link, header ul.navbar-nav li a:visited {
  color: var(--topnav-link-color);
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 0.5em;

}
header ul.navbar-nav li a:hover,
header ul.navbar-nav li a:focus,
header ul.navbar-nav li a.active {
  color: var(--link-color) !important;
}




/* boxes */

  .notices {
      padding: 1px 30px 1px 30px;
      border-radius: 0.5em;
  }
  .notices.green {
      /* border-left: 10px solid rgba(71,104,24,0.7); */
      border: none;
      background: rgba(229,238,221,1);
      color: #222;
  }

   .notices.green h2, .notices.green h3 {
      color: #222;
  }

  .notices h2 {
    font-size: 2rem;

  }

  .notices.green a:link,
  .notices.green a:visited {
      color: var(--link-color) ;
  }

  .notices.gray {
      border-left: 10px solid var(--footer-color);
      background: var(--lightest-gray);
      color: color: var(--font-color) ;
  }

  .notices.gray a:link,
  .notices.gray a:visited {
      color: var(--font-color) ;
  }

  [data-theme=dark] .notices.green a.btn:link,
  [data-theme=dark] .notices.green a.btn:visited {
      color: var(--font-color);
  }

[data-theme=dark] .table.table-striped tbody tr:nth-of-type(odd),
[data-theme=dark] .table>:not(caption)>*>* {
    background: #101010;
    color: var(--font-color);
}
[data-theme=dark] .table.table-striped tbody tr:nth-of-type(even), {
    background: #000;
    color: var(--font-color);
}
[data-theme=dark] .table td, .table th,
[data-theme=dark] .table>:not(caption)>*>* {
    border-bottom: 0.05rem solid #000;
}


[data-theme=dark] button.navbar-toggler { background: var(--font-color) }


#body-wrapper h1:first-of-type,
#body-wrapper h2:first-of-type,
#body-wrapper h3:first-of-type {margin-top:1rem; hyphens: auto; line-height: 1em;}



/* footer */

  footer {background: var(--footer-bg); color: var(--footer-color); font-size: 0.8rem; text-align: left; padding: 0 0 5em 0;}
  footer a:link, footer a:visited {color: var(--footer-color); text-decoration: underline;}

/* mobile menu */


  .mobile-menu .button_container span {
      background: var(--color-primary);
  }

  .mobile-logo svg, .mobile-logo img { margin-top: 1.3em; height: 20px;   margin-left: 1rem;}


  ul.tree {list-style: none;}
  ul.tree li {list-style: none; font-size: 1.2rem; padding: 1.5em 1em; text-align: center;}
  ul.tree li span.toggler {display: none;}
  ul.tree li a {font-size: 2rem; text-decoration: none; color: #fff;}
  ul.treemenu li a:hover, .treemenu li a:focus, .treemenu li a.active {
      color: #e5eedd !important;
  }

  @media (max-width: 840px) {
    header .navbar-section {
        margin-right: 4rem;
    }
    .header-fixed #body-wrapper {
      padding-top: 2rem;
    }
    .treemenu li a {
      margin-left: 0rem;
    }

    #body-wrapper h1 {font-size: 2.5rem;}

    main ul {padding-left:1em;} /* bulletlisten am handy ohne Einzug */

  }
/* buttons */

  .btn {text-decoration: none !important; }
  #body-wrapper a.btn:after {background-image: none;}
  #body-wrapper #mastodon-comments-list a:link:after,
  #body-wrapper #mastodon-comments-list a:visited:after {background-image: none;}

  #body-wrapper #mastodon-comments-list a { box-shadow: none; }


  .btn, .button, #body-wrapper p a.btn {
      background: var(--btn-bg-color);
     /* border: 0.05rem solid var(--btn-font-color);*/
      border: 0.05rem solid var(--btn-bg-color);
      border-radius: 0.2rem;
      color: var(--btn-font-color);
      box-shadow:none;
  }
  .btn:hover, .button:hover, #body-wrapper p a.btn:hover {
      background: var(--btn-hover-bg-color);
      border-color: var(--btn-hover-font-color);
  }
  .btn.btn-sm {border-radius: 4px;}
  .btn.btn-primary, .btn-primary.button,
  .btn.btn-primary:focus, .btn-primary.button:focus {
      background: var(--link-color);
      border-color: var(--link-color);
      color: var(--text-invers);
  }



  .btn.btn-primary:hover, .btn.btn-primary:active {
      background: var(--bg-invers);
      border-color: var(--bg-invers);
  }


.btn.btn-link { color: var(--link-color); text-decoration: underline !important;}
.btn.btn-link:hover { color: var(--font-color);}

.btn-white {
  background: var(--body-bg);
  border-color: var(--body-bg);
}

.btn-white:hover,.btn-white:active  {
  background: var(--bg-invers);
  border-color: var(--bg-invers);
  color: var(--text-invers);
}

.btn-light:hover,.btn-light:active  {
  color: var(--font-color);
}
/* tags */

ul.tags {list-style: none; padding:0;}
ul.tags li {text-transform: uppercase; font-size: 0.8em; display: inline-block; margin-right:0.5em;}

  .label.label-secondary {
      background: var(--bg-invers);
      color: var(--text-invers);
      text-decoration: none;
  }

  .label.label-primary {
      background: var(--color-primary) ;
      color: var(--text-invers);
      text-decoration: none;
  }

/* /tags */

.break-long-lines {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.label { padding: 0.1rem 0.3rem 0.05rem 0.3rem; line-height: 1rem;
  vertical-align: text-top;}
.blog-date { margin-right: 0.8em; }
.blog-listing .blog-date { font-size: 0.8rem;}

.mt-3 {margin-top:0.5em !important;}
.mt-4 {margin-top:1em !important;}
.mt-5 {margin-top:2em !important;}
.mb-3 {margin-bottom:0.5em !important;}
.mb-4 {margin-bottom:1em;}
.mb-5 {margin-bottom:2em;}

.search-title h3 {margin-bottom:0;}
.search-details {font-size: 0.8em; margin-bottom: 1em;}

#sidebar h4:first-of-type {
  margin-top: 0;
}

.card { background: var(--text-invers);}

.toggle-theme {background: none; border: none; color: var(--topnav-link-color);}
.toggle-theme:hover,.toggle-theme:active {background: none; border: none; color: var(--font-color); }
.toggle-theme svg {width: 1.5rem; height: 1.5rem; transition: all 0.5s ease;}

/* anchors */

  a.anchorhash {
      display: inline-block;
      margin-left: -0.8em;
      width: 0.8em;
      font-weight: 300;
      opacity: .3;
      text-decoration: none;
  }
  a.anchorhash:hover {
      opacity: 1;
  }

  @media (max-width: 1045px) {
    a.anchorhash {
       margin-left: auto;
    }
  }

  .tile { background: var(--lightest-gray); padding: 1em; border-radius: 0.5em; margin-top:0.5em; }

  .tile a.date:link, .tile a.date:visited,
  .tile a.name:link, .tile a.name:visited  { color: var(--font-color); text-decoration:none;}
  .tile .tile-subtitle a:link, .tile .tile-subtitle a:visited {
    text-decoration: none;
  }

.avatar {
  background: var(--body-bg);
}

  .squares img {
      object-fit: cover;
      width: 307px;
      height: 307px;
  }



  @media (max-width: 840px) {
    .squares img {
        object-fit: cover;
        width: 409px;
        height: 409px;
    }
  }

  @media (max-width: 600px) {
    .squares img {
        object-fit: cover;
        width: 600px;
        height: 600px;
    }
  }
a img {transition: all 0.2s ease;}
a.hop:hover img { transform: translate(0px, -7px)}
a:hover img {filter: brightness(0.8);}

/* pixelfed squarepix */

.squareImage{
     position:relative;
     overflow:hidden;
     padding-bottom:100%;
     background: var(--lightest-gray);
     margin-bottom: 0.9em;
     border-radius: 0.5rem;
 }

.squareImage img{
    position:absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    aspect-ratio: 1; /* will make width equal to height (500px container) */
    object-fit: cover; /* use the one you need */
 }

 .squareImage img:hover{
     transform: translateX(-50%) translateY(-50%) scale(1.1);
  }



.squareAudio{
     position:relative;
     overflow:hidden;
    /* padding-bottom:100%;*/
     background: var(--lightest-gray);
     margin-bottom: 0.9em;
     border-radius: 0.5rem;
 }


.squareAudio div.descr{
    position:absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    aspect-ratio: 1; /* will make width equal to height (500px container) */
    object-fit: cover; /* use the one you need */
 }

.modal-container {
  background: var(--modal-bg);
  color: var(--font-color);
}

pre code,
pre code:not(.hljs):not([class*="language-"]) {
  background: var(--modal-bg);
  border-left: 8px solid #d73e48;
  display: block;



    padding: 1rem !important;
    line-height: 1.5;
    color: inherit;

    overflow-x: auto;

}
.text-muted { color: var(--middle-gray) !important; }

.u {text-decoration: underline !important;}

#bottomwave { fill: var(--bottom-wave-fill);}

.stay-safe-home {
  margin-top: 3rem;
  width: 300px;
  height: 150px;
  display: block;
  background-color: var(--footer-color);
  -webkit-mask: url(/assets/img/stay-safe.svg) no-repeat center;
  mask: url(/assets/img/stay-safe.svg) no-repeat center;
}

.p-3 {padding: 1rem;}
.p-4 {padding: 1.5rem;}
.p-5 {padding: 2rem;}

button.btn.btn-link { text-decoration: underline; background: none; color: var(--link-color); padding: 0; }

mark, .highlight, mark a:link, mark a:visited {
  background: url(/assets/img/mark-black.svg) no-repeat;
  background-size: cover;
  color:#fff !important;
  padding: 2px 4px;
  border: none;
  text-decoration: none;
}

html[data-theme=dark] mark, html[data-theme=dark] .highlight, html[data-theme=dark] mark a:link, html[data-theme=dark] mark a:visited {
  background: url(/assets/img/mark-white.svg) no-repeat;
  color:#000 !important;
  background-size: cover;
  border: none;
}

/* die schoene variante */

.likeblock {
  width: 100px;
  height: 60px;
  background: white;
  border-radius: 9px;
  box-shadow: 0 10px 25px rgba(124, 130, 141, 0.2);
  cursor: pointer;
  transition: all 0.25s ease-out;
  position: relative;
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  user-select: none;
  border-width: 0;
}

.likeblock.likeblocktrans {
  width: 70px;
  background: transparent;
  box-shadow: none;
}

.likeblock .heart-icon {
  user-select: none;
  position: absolute;
  left: 20%;
  top: 53%;
  height: 1.5em;
  transform: translate(-20%, -50%);
  fill: transparent;
  transition: transform 0.25s ease-out;
  transform-origin: 50% 50%;
}
.likeblock .heart-icon .fill-color-shape {
  fill: transparent;
}
.likeblock .heart-icon.isLiked {
/*  filter: drop-shadow(0 3px 5px #c44133);*/
}
.likeblock .heart-icon.isLiked .fill-color-shape, .likeblock.liked .fill-color-shape, .likeblock.has_liked .fill-color-shape{
  transition: fill 0.5s linear;
  fill: #e74c3c;
}
.likeblock:hover .heart-icon {
  transform: translate(-20%, calc(-50% - 3px)) scale(1.03);
}
.likeblock .number-of-likes {
  font-size: 1em;
  user-select: none;
  position: absolute;
  left: 80%;
  top: 53%;
  transform: translate(-80%, -50%);
  color: #222;
  user-select: none;
}

td .number-of-likes {
  color: var(--font-color) !important;  
}



#like-button-message {
    font-size: 0.8em;
    position: absolute;
    left: 120px;
    top: 53%;
    transform: translate(0%, -50%);
    width: 200px;
    text-align: left;
    color: var(--font-color);
  }

  .likeblock:focus { outline-color: #ccc; }

  .ghostbtn {
    background: white;
    border-radius: 9px;
    box-shadow: 0 10px 25px rgba(124, 130, 141, 0.2);
    cursor: pointer;
    transition: all 0.25s ease-out;
    border-width: 0;
    padding: 0 1rem;
    color: #000 !important;
    text-decoration: none !important;
    height: 60px;
  }

  a.ghostbtn {padding: 16px 1rem 19px 1rem;}

  .dib {display: inline-block;}

  .ghostbtn:hover .bi {
    transform: translate(0, -3px) scale(1.03);
  }

  .ghostbtn .bi {
      transition: transform 0.25s ease-out;
  }

  svg.bi {width: 1.25rem; height: 1.25 rem; vertical-align: text-bottom;}


  @media only screen and (max-width: 599px)  {
      .text-sm-left {
          text-align: left;
      }
  }

.ml-5 {margin-left: 1rem;}
.ml-10 {margin-left: 2rem;}

#initialTootContent { word-break: break-all; }


#pagemeta {font-size: 0.8em;}
#pagemeta .bi {height: 1.25em;}



.alert-lightgray {
  background-color: var(--lightest-gray);
  border-color: var(--lightest-gray);
}


.alert-lightgreen {
  background-color: var(--light-green);
  border-color: var(--light-green);
}

#initialTootContent .invisible {visibility: visible!important; }
#initialTootContent a:link, #initialTootContent a:visited { color: var(--footer-color) }


#comments-wrapper img.avatar {
  width:64px; float:left; margin-right: 1em;
}

#comments-wrapper img.avatar {
  width:64px; float:left; margin-right: 1em;
}

.commentdate, .commentname { color: var(--middle-gray) !important; text-decoration:none !important; }

blockquote {
  border-left: 4px solid var(--wave-one);
  padding: 1em;
}

.bg-lightestgray {
  background: var(--lightest-gray);
  color: var(--font-color);
}

.bg-waveone {
  background: var(--wave-one);
}


.bg-white {
  background: var(--body-bg) !important;
  color: var(--font-color);
}

.bg-invers {
  background: var(--bg-invers) !important;
  color: var(--text-invers);
}

.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--text-invers);
}
.bg-primary h5, .bg-primary h2 {  
  color: var(--text-invers);
}

.bg-primary a {  
  color: var(--text-invers);
}

.bg-primary a.btn-white {  
  color: var(--font-color);
}

.bg-primary a.btn-white:hover {  
 color: var(--text-invers);
}



.text-invers {
   color: var(--text-invers) !important;
}

.breakmylifeintopieces {
  -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
}

#navModal .modal-header {border-bottom: 0}

#navModal .modal-content {
  background-color: var(--body-bg);
  background-image: var(--bg-img);
  background-repeat: no-repeat;
}

#navModal li a, #navModal li a:link, #navModal li a:visited {
  text-decoration: none;
}

svg.heart {
  width:28px;
  height:28px;
  fill: var(--text-invers);
}

.waveback4 {
  background-image: var(--waveback05);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: bottom;
}

.bg-gray1 { background-color: var(--gray1); }
.bg-gray2 { background-color: var(--gray2); }
.bg-gray3 { background-color: var(--gray3); }
.bg-gray4 { background-color: var(--gray4); }
.bg-gray5 { background-color: var(--gray5); }
.bg-gray6 { background-color: var(--gray6); }
.bg-gray7 { background-color: var(--gray7); }

.fill-gray3 { fill: var(--gray3) }
.fill-bg { fill: var(--body-bg) }

[data-theme=dark] .bottomWaveFill1 { fill: #171714 }
[data-theme=dark] .bottomWaveFill2 { fill: #232320 }
[data-theme=dark] .bottomWaveFill3 { fill: #2f2f2c }

[data-theme=light] .bottomWaveFill1 { fill: #FFFFFF }
[data-theme=light] .bottomWaveFill2 { fill: #ededea }
[data-theme=light] .bottomWaveFill3 { fill: #dcdcd8 }

/* bubbles right side */
  .bubbles {
      position: fixed;
      right: 25px;
      height: 68px;
      width: 68px;
      display: none;
      lineheight: 34px;
  }

  .back-to-top {
      bottom: 25px;
  }

  .sideham {
      bottom: 105px;    
  }
/* /bubbles right side */

.myAvatar {
 border: 8px solid var(--body-bg);
}

.squareImage p {font-size:0.8em;}
.squareImage svg.bi {height: 1.75em; width:auto; margin-bottom: 10px;}

#theme-toggle-nav {font-size: 0.5em; text-transform: none; cursor: pointer;}

.spinit {
  animation: spin 6s infinite;
}

@keyframes spin {
   from {transform:rotate(0deg);}
   to {transform:rotate(359deg);}
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 6s linear infinite;
  -moz-animation: rotating 6s linear infinite;
  -ms-animation: rotating 6s linear infinite;
  -o-animation: rotating 6s linear infinite;
  animation: rotating 6s linear infinite;
}