/****** LikeCMS CSS Builder, last build: 2022-06-03 11:38:19 ******/


/*** project-files/css/dgfan.css ***/

body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;

}

html {
font-size:100%;

}

#main {
width:1000px;
margin:0 auto;

}

hr {
border:0px;
height:1px;
background:#ccc;
background:url(/project-files/images/graphics/dottet-horizontal.png) repeat-x;
}

hr.sum {
border:0px;
height:3px!important;
background:url(/project-files/images/backgrounds/sum.png) repeat-x  top!important;

}

html hr.sum  {
background:#3D4899;
border:0px;
height:3px;
background:url(/project-files/images/backgrounds/sum.png) repeat-x  top!important;
}

td {
font-size:12px;

}

.clear {
clear:both;

}

/* editor(linkes Bild) */
.img-left {
float:left;
margin:0px 20px 10px 0px;

}

/* editor(rechtes Bild) */
.img-right {
float:right;
margin:0px 0px 10px 20px;

}

/* editor(pdf) */
.pdf {
background:url(/project-files/images/graphics/pdf-link.png) no-repeat left 3px;
padding:2px 0px 8px 24px;
color:#0070ba;
cursor:pointer;

}

a:link, a:visited {
color:#EF8100;
font-weight:bold;
text-decoration:none;

}

a:active, a:hover {
text-decoration:underline;

}

a.red:link, a.red:visited {
color:#DE0000;
font-weight:bold;
text-decoration:none;
border:0px!important;

}

a.red:active, a.red:hover {
text-decoration:underline;

}

a.lightblue:link, a.lightblue:visited {
color:#00B4FF;
font-weight:bold;
text-decoration:none;
border:0px!important;

}

a.lightblue:active, a.lightblue:hover {
text-decoration:underline;

}

a.green:link, a.green:visited {
color:#66CC00;
font-weight:bold;
text-decoration:none;
border:0px!important;

}

a.green:active, a.green:hover {
text-decoration:underline;

}

h1 {
font-size:2.500em;
color:#3D4899;
line-height:1;

}

h2 {
font-size:2.000em;
color:#3D4899;
line-height:1;

}

h3 {
font-size:1.500em;
color:#3D4899;
line-height:1;
margin-bottom:10px;

}

h4 {
font-size:1.500em;
color:#666;
line-height:1;
margin-bottom:10px;

}

h5 {
font-size:1em;
color:#3D4899;

}

h6 {
font-size:1em;
color:#666;

}

.blue {
color:#3D4899;
font-weight:bold;

}

.top {
width:1000px;
height:155px;

}

.logo {
margin-top:20px;
margin-left:40px;
float:left;

}

* html .logo {
margin-left:0px;

}

.middle {
float:left;
width:1000px;
margin-bottom:20px;

}

.left {
float:left;
width:200px;
height:100%;
padding:40px 0px;

}

.left hr {
width:160px;
margin:15px 20px;

}

.left-nav {

}

a.mainpoint {
width:160px;
display:block;
padding:4px 20px;
background:#3D4899;
color:#fff!important;
text-decoration:none;
font-weight:bold;
white-space:normal;

}

.left-nav ul {
width:158px;
padding:4px 20px 20px 20px;
background:url(/project-files/images/backgrounds/dgfan-navbox-spectrum-left.jpg) no-repeat bottom;
margin-left:1px;

}

.left-nav ul li {
padding:2px 0px;
font-weight:bold;
font-size:1em;

}

.left-nav ul li a:link, .left-nav ul li a:visited {
color:#666;
text-decoration:none;

}

.left-nav ul li a:active, .left-nav ul li a:hover {
color:#3D4899;
text-decoration:none;

}

.left-nav ul li.active a {
color:#3D4899;
text-decoration:none;

}

.left-nav ul li ul {
padding:0px;
background:none;

}

.left-nav ul li ul li {
background:url(/project-files/images/graphics/side-nav-arrow_grey.png) no-repeat left 6px;
padding-left:12px;

}

.left-nav ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_blue.png) no-repeat left 6px;

}

.left-nav ul li.active ul li a {
color:#666;

}

.left-nav ul li ul li.active {
background:url(/project-files/images/graphics/side-nav-arrow_blue.png) no-repeat left 6px;

}

.left-nav ul li ul li.active a {
color:#3D4899!important;

}

.left-nav ul li ul li:hover a {
color:#3D4899!important;

}

* html .left-nav ul li.active {
border:0px!important;
padding:0px!important;
background:none!important;

}

.chrome .left-nav ul li.active {
padding:2px 0px!important;

}

.chrome .left-nav ul li ul li.active {
padding:2px 12px!important;

}

* html .left-nav ul li.active a {
color:#3D4899!important;

}

* html .left-nav ul li.active ul li a {
color:#666!important;

}

* html .left-nav ul li.active ul li.active {
border:0px!important;
padding-left:12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_blue.png) no-repeat left 6px!important;

}

* html .left-nav ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_blue.png) no-repeat left 6px!important;

}

* html .left-nav ul li.active ul li a:hover {
color:#3D4899!important;

}

* html .left-nav ul li.active ul li.active a {
color:#3D4899!important;

}

.left-nav.red a.mainpoint {
background:#d20000;

}

.left-nav.red ul li a:active, .left-nav.red ul li a:hover {
color:#d20000;

}

.left-nav.red ul li.active a {
color:#d20000;

}

.left-nav.red ul li ul li a {
color:#666!important;

}

.left-nav.red ul li ul li.active a {
color:#d20000!important;

}

.left-nav.red ul li ul li:hover a {
color:#d20000!important;

}

.left-nav.red ul li ul li {
background:url(/project-files/images/graphics/side-nav-arrow_grey.png) no-repeat left 6px;
padding-left:12px;

}

.left-nav.red ul li ul li.active {
background:url(/project-files/images/graphics/side-nav-arrow_red.png) no-repeat left 6px;

}

.left-nav.red ul li.active ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_red.png) no-repeat left 6px!important;

}

.chrome .left-nav.red ul li.active {
padding:2px 0px!important;

}

.chrome .left-nav.red ul li.active ul li.active {
padding:2px 12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_red.png) no-repeat left 6px!important;

}

* html .left-nav.red ul li.active a {
color:#d20000!important;

}

* html .left-nav.red ul li.active ul li a {
color:#666!important;

}

* html .left-nav.red ul li.active ul li.active {
border:0px!important;
padding-left:12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_red.png) no-repeat left 6px!important;

}

* html .left-nav.red ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_red.png) no-repeat left 6px!important;

}

* html .left-nav.red ul li.active ul li a:hover {
color:#d20000!important;

}

* html .left-nav.red ul li.active ul li.active a {
color:#d20000!important;

}

.left-nav.lightblue a.mainpoint {
background:#00B4FF;

}

.left-nav.lightblue ul li a:active, .left-nav.lightblue ul li a:hover {
color:#00B4FF;

}

.left-nav.lightblue ul li.active a {
color:#00B4FF;

}

.left-nav.lightblue ul li ul li a {
color:#666!important;

}

.left-nav.lightblue ul li ul li.active a {
color:#00B4FF!important;

}

.left-nav.lightblue ul li ul li:hover a {
color:#00B4FF!important;

}

.left-nav.lightblue ul li ul li {
background:url(/project-files/images/graphics/side-nav-arrow_grey.png) no-repeat left 6px;
padding-left:12px;

}

.left-nav.lightblue ul li ul li.active {
background:url(/project-files/images/graphics/side-nav-arrow_lightblue.png) no-repeat left 6px;

}

.left-nav.lightblue ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_lightblue.png) no-repeat left 6px;

}

.chrome .left-nav.lightblue ul li.active {
padding:2px 12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_lightblue.png) no-repeat left 6px;

}

* html .left-nav.lightblue ul li.active a {
color:#00B4FF!important;

}

* html .left-nav.lightblue ul li.active ul li a {
color:#666!important;

}

* html .left-nav.lightblue ul li.active ul li.active {
border:0px!important;
padding-left:12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_lightblue.png) no-repeat left 6px!important;

}

* html .left-nav.lightblue ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_lightblue.png) no-repeat left 6px!important;

}

* html .left-nav.lightblue ul li.active ul li a:hover {
color:#00B4FF!important;

}

* html .left-nav.lightblue ul li.active ul li.active a {
color:#00B4FF!important;

}

.left-nav.green a.mainpoint {
background:#66CC00;

}

.left-nav.green ul li a:active, .left-nav.green ul li a:hover {
color:#66CC00;

}

.left-nav.green ul li.active a {
color:#66CC00;

}

.left-nav.green ul li ul li a {
color:#666!important;

}

.left-nav.green ul li ul li.active a {
color:#66CC00!important;

}

.left-nav.green ul li ul li:hover a {
color:#66CC00!important;

}

.left-nav.green ul li ul li {
background:url(/project-files/images/graphics/side-nav-arrow_grey.png) no-repeat left 6px;
padding-left:12px;

}

.left-nav.green ul li ul li.active {
background:url(/project-files/images/graphics/side-nav-arrow_green.png) no-repeat left 6px;

}

.left-nav.green ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_green.png) no-repeat left 6px;

}

.chrome .left-nav.green ul li.active {
padding:2px 12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_green.png) no-repeat left 6px;

}

* html .left-nav.green ul li.active a {
color:#66CC00!important;

}

* html .left-nav.green ul li.active ul li a {
color:#666!important;

}

* html .left-nav.green ul li.active ul li.active {
border:0px!important;
padding-left:12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_green.png) no-repeat left 6px!important;

}

* html .left-nav.green ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_green.png) no-repeat left 6px!important;

}

* html .left-nav.green ul li.active ul li a:hover {
color:#66CC00!important;

}

* html .left-nav.green ul li.active ul li.active a {
color:#66CC00!important;

}

.info-box-left {
width:158px;
padding:0px 20px 20px 20px;
margin-left:1px;
float:left;
background:url(/project-files/images/backgrounds/dgfan-navbox-spectrum-left.jpg) no-repeat bottom;
position:relative;

}

.info-box-left h1 {
width:158px;
display:block;
padding:4px 20px;
margin:0px -20px 10px -20px;
background:#666;
color:#fff;
font-size:1em;
font-weight:bold;

}

.info-box-left h2 {
font-size:1em;
font-weight:bold;
color:#3D4899;
margin:4px 0px;

}

a.more:link, a.more:visited {
color:#666;
text-decoration:none;
width:146px;
border-top:1px solid #666;
text-align:right;
display:block;
margin-top:20px;
padding:4px 6px 0px 6px;

}

a.more:active, a.more:hover {
color:#333;
border-top:1px solid #333;

}

.center {
float:left;
width:540px;
padding:0px 30px;

}

.center-home {
float:left;
width:740px;
padding:0px 30px;

}

.center-top-line {
width:540px;
height:20px;
padding:10px 0px;
float:right;
color:#666;

}

.center-top-line a {
font-weight:normal!important;
color:#3D4899;

}

.center-top-line a.active {
color:#EF8100;
padding:0px!important;

}

* html .center-top-line a.active {
background:none!important;
border:none!important;

}

.center-top-line .left {
float:left;
width:360px;
background:none;
margin:0px;
padding:0px;

}

.center-top-line .right {
float:right;
width:160px;
background:none;
margin:0px;
padding:0px;

}

.content {
width:540px;
float:left;
padding-bottom:40px;

}

.content-home {
width:740px;
float:left;
padding-bottom:40px;

}

html .content-home {
width:750px;

}

.content hr {
border:0px;
height:1px;
background:url(/project-files/images/graphics/dottet-horizontal.png) repeat-x;

}

.content li {
list-style:disc;
margin-left:16px;

}

.content li li {
list-style:circle;
margin-left:16px;

}

.box-row {
margin:0px -15px;

}

.home-box {
width:206px;
margin:0px 15px;
padding:0px 10px 20px 10px;
border-top:1px solid #3D4899;
border-bottom:10px solid #3D4899;
background:url(/project-files/images/backgrounds/home-box-bg.jpg) repeat-x bottom;
float:left;

}

* html .home-box {
margin:0px 7px;

}

html .home-box {
margin:0px 10px;

}

.home-box h3 {
padding:7px 0px;
margin:0px;

}

.home-box img {
margin:0px -10px 10px -10px;

}

.home-box a {
color:#3D4899;

}

.home-box.red {
border-top:1px solid #DE0000;
border-bottom:10px solid #DE0000;
width:335px;

}

.home-box.red h3, .home-box.red a {
color:#DE0000;

}

.home-box.lightblue {
border-top:1px solid #00B4FF;
border-bottom:10px solid #00B4FF;
width:335px;

}

.home-box.lightblue h3, .home-box.lightblue a {
color:#00B4FF;

}

.home-box.green {
border-top:1px solid #66CC00;
border-bottom:10px solid #66CC00;
width:720px;
padding:0px 10px 0px 10px;

}

* html .home-box.green {
width:710px;

}

html .home-box.green {
width:710px;

}

* html .home-box.green img {
width:730px;

}

html .home-box.green img {
width:730px;

}

.home-box.green img {
margin:0px -10px 0px -10px;

}

.home-box.green h3, .home-box.green a {
color:#66CC00;

}

.list-box {
width:100%;
background:url(/project-files/images/backgrounds/home-box-bg.jpg) repeat-x bottom;
border-bottom:1px solid #ccc;
padding:0px 0px 20px 0px;
margin-top:20px;

}

.list-box img {
float:left;
margin-right:30px;
display:table-cell;

}

* html .list-box img {
margin-bottom:30px;

}

html .list-box img {
margin-bottom:30px;

}

.list-box .txt {
display:inline;
float:left;

}

.more-line {
background:#3D4899;
width:100%;
float:left;

}

.more-line a {
color:#fff;
margin:5px 10px;
display:block;

}

.table {

}

.normtable tr {
background-color:#fff!important;
border-bottom:0px!important;
background:#fff!important;

}

.table th {
background:#3D4899;
color:#fff;
padding:4px 10px;
font-weight:bold;

}

.table td {
padding:4px 10px;

}

.table td.nowrap {
white-space:nowrap;

}

.table td.inactive {
filter:Alpha(opacity=70);
opacity:0.2;
moz-opacity:0.2;

}

.table td.inactive a {
cursor:default;

}

table.basket th {
background:#3D4899;
color:#fff;
padding:4px 10px;
font-weight:bold;
}

table.basket td {
padding:4px 10px;

}

table.basket tr:first-child {
	background:#000!important;
}
table.basket tr:nth-child(4n), table.basket tr:nth-child(4n-1) {
    background: #fff;
}
table.basket tr:nth-child(4n+4), table.basket tr:nth-child(4n-3) {
    background: #F5F5F5;
}



.right {
float:left;
width:200px;

}

* html .right {
width:190px;

}

.language {
width:178px;
height:18px;
padding:6px 10px;
margin-right:1px;
background:url(/project-files/images/backgrounds/dgfan-navbox-spectrum-right.jpg) no-repeat bottom;
float:right;
color:#999;

}

* html .language {
width:168px;

}

ul.language-selector {
float:right;
margin-right:0px;

}

* html ul.language-selector {
position:absolute;
margin-left:40px;

}

html ul.language-selector {
position:absolute;
margin-left:40px;

}

ul.language-selector li {
position:relative;

}

ul.language-selector li ul {
display:none;

}

ul.language-selector li:hover ul {
display:block;
position:absolute;
z-index:10;
background:#fff;
border:1px solid #ccc;
margin-left:-10px;

}

ul.language-selector li ul li {
width:100px;
display:block;
padding:4px 10px;

}

.right-nav {
margin-top:10px;
float:left;

}

.right-nav ul {
width:198px;
padding:4px 0px 20px 0px;
background:url(/project-files/images/backgrounds/dgfan-navbox-spectrum-right.jpg) no-repeat bottom;
margin-left:1px;

}

* html .right-nav ul {
width:166px;

}

.right-nav ul li {
padding:2px 20px;
font-weight:bold;
font-size:1em;

}

.right-nav ul li.active {
background:#3D4899;
margin-bottom:10px;

}

.chrome .right-nav ul li.active {
padding:2px 20px!important;

}

.chrome .right-nav ul li ul li.active {
padding:2px 12px!important;

}

.right-nav ul.singlenav li.active {
margin-bottom:0px;

}

* html .right-nav ul.singlenav li.active {
width:170px!important;
padding-left:20px!important;

}

.right-nav ul li.active ul li, .right-nav ul li.active ul li ul li {
margin:0px;

}

.right-nav ul li.active ul {
padding-bottom:10px;

}

.right-nav ul li.active ul li ul {
padding-bottom:2px;

}

.right-nav ul li:hover {
background:#3D4899;

}

.right-nav ul li:hover a, .right-nav ul li:hover a:hover {
color:#fff!important;

}

.right-nav ul li a:link, .right-nav ul li a:visited {
color:#666;
text-decoration:none;

}

.right-nav ul li a:active, .right-nav ul li a:hover {
color:#EF8100!important;
text-decoration:none;

}

.right-nav ul li.active a {
color:#EF8100!important;

}

.right-nav ul li.active a:hover {
color:#EF8100!important;

}

.right-nav ul li.active ul li a {
color:#fff!important;

}

.right-nav ul li.active ul li.active a {
color:#EF8100!important;

}

.right-nav ul li.active ul li.active ul li a {
color:#fff!important;

}

.right-nav ul li.active:hover ul li:hover a {
color:#EF8100!important;

}

.right-nav ul li.active:hover ul li:hover ul li a {
color:#fff!important;

}

.right-nav ul li.active:hover ul li:hover ul li:hover a {
color:#EF8100!important;

}

.right-nav ul li.active ul li.active ul li.active a {
color:#EF8100!important;

}

.right-nav ul li ul {
padding:0px;
background:none;

}

.right-nav ul li ul li {
background:url(/project-files/images/graphics/side-nav-arrow_white.png) no-repeat left 6px;
padding-left:12px;

}

.right-nav ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_orange.png) no-repeat left 6px;

}

.right-nav ul li ul li.active {
background:url(/project-files/images/graphics/side-nav-arrow_orange.png) no-repeat left 6px;

}

* html .right-nav ul li {
width:150px!important;

}

* html .right-nav ul li.active {
border:0px!important;
padding:0px 0px 0px 12px!important;
background:#3D4899!important;

}

* html .right-nav ul li.active a {
color:#EF8100!important;

}

* html .right-nav ul li.active ul li a {
color:#fff!important;

}

* html .right-nav ul li.active ul li.active {
border:0px!important;
padding-left:12px!important;
background:url(/project-files/images/graphics/side-nav-arrow_orange.png) no-repeat left 6px!important;

}

* html .right-nav ul li ul li {
width:120px!important;

}

* html .right-nav ul li ul li:hover {
background:url(/project-files/images/graphics/side-nav-arrow_orange.png) no-repeat left 6px!important;

}

* html .right-nav ul li.active ul li a:hover {
color:#EF8100!important;

}

* html .right-nav ul li.active ul li.active a {
color:#EF8100!important;

}

.right-box, .shopping-card-right {
width:158px;
padding:20px;
background:url(/project-files/images/backgrounds/dgfan-navbox-spectrum-right.jpg) no-repeat bottom;
margin-left:1px;
float:left;
font-size:1em;
position:relative;

}

* html .right-box, * html .shopping-card-right {
width:148px;

}

.right-box input {
margin-bottom:5px;

}

.shopping-card-right h1 {
font-size:1.333em;
background:url(/project-files/images/graphics/shoppingcard-right.png) no-repeat left top;
padding-left:24px;
margin-bottom:6px;
float:left;

}

#fav-right h1 {

background:url(/project-files/images/graphics/fav-right.png) no-repeat left top!important;

}

.shopping-card-right .item {
float:left;
margin-left:24px;
font-weight:bold;
font-size:1.077em;
color:#666;

}

* html .shopping-card-right .item {
margin-left:14px;
width:120px;

}

.shopping-card-right .item .name {
float:left;
width:100px;

}

* html .shopping-card-right .item .name {
width:70px!important;

}

.shopping-card-right .item .number {
float:right;
text-align:right;

}

.price {
float:right;
text-align:right;
color:#3D4899;
font-weight:bold;
font-size:1.077em;

}

.search {
margin-top:4px;

}

fieldset.search {
border: none;

}

.search input, .search button {
border: none;
float: left;

}

.search input.box {
color:#999;
font-size: 12px;
width: 160px;
height: 14px;
background: url(/project-files/images/backgrounds/search-bg.png) no-repeat;
margin-right: 0px;
padding:2px 20px 2px 4px;

}

* html .search input.box {
width: 126px;

}

.search input.box:focus {
background: url(/project-files/images/backgrounds/search-bg.png) no-repeat left -18px;
outline: none;
color:#666;

}

.search input.btn {
width: 30px;
height: 18px;
margin-left:-30px;
cursor: pointer;
text-indent: -9999px;
background:none;

}

* html .search input.btn {
margin-left:-30px;

}

.search input.btn value {
display:none;

}

.member-login {
margin-top:4px;

}

fieldset.member-login {
border: none;

}

.member-login input, .member-login button {
border: none;
float: left;

}

.member-login input.box {
color:#999;
font-size: 12px;
width: 136px;
height: 14px;
background: url(/project-files/images/backgrounds/member-login-bg.png) no-repeat;
margin-right: 0px;
padding:2px 20px 2px 4px;

}

* html .member-login input.box {
width: 126px;

}

.member-login input.box:focus {
background: url(/project-files/images/backgrounds/member-login-bg.png) no-repeat left -18px;
outline: none;
color:#666;

}

.member-login input.btn {
cursor: pointer;
background:none;
color:#EF8100;
font-size:1em;
font-weight:bold;
padding:0px;

}

.member-login input.btn value {
display:none;

}

.footer {
width:1000px;
float:left;

}

.footer .right {
width:158px;
padding:10px 20px;
float:right;

}

.footer .right a {
color:#999;
text-decoration:none;
float:left;
padding-left:14px;
margin-right:10px;

}

a.back {
color:#999;
text-decoration:none;
background:url(/project-files/images/graphics/back.png) no-repeat left;
padding-left:14px;

}

/* #marquee div {
    display: flex;
    align-items: center;
    height: 30px;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee 10s linear infinite;
}

#marquee span {
    float: left;
    color: red;
    font-weight: bold;
    flex-grow: 0;
}

#marquee span.stars {
    content: '*****';
    letter-spacing: 10px;
    text-align: center;
    display: inline-block;
    flex-grow: 1;
}

#marquee span:hover {
    animation-play-state: paused 
}

@keyframes marquee {
    0%   { left: 0; }
    100% { left: -100%; }
} */


#marquee {
    max-width: 100vw; /* iOS braucht das */
    white-space: nowrap;
	overflow: hidden;
	width: 100%;
	background: white;
	box-sizing: border-box;
	border-left: 1px solid hsl(0,0%,80%);
	border-right: 1px solid hsl(0,0%,80%);
	border-bottom: 1.5px dotted hsl(0,0%,60%);
	position: relative;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    /* hier evtl. noch font-size, color usw. */
}

#marquee div {
    display: inline-block;
    padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
    animation: marquee 40s linear infinite;
}

#marquee span.stars {
    letter-spacing: 10px;
    text-align: center;
    display: inline-block;
    flex-grow: 1;
}

/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
#marquee div:hover {
    animation-play-state: paused 
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}