/* WEBKRAFT LOGO */
.webkraft-logo {
  overflow: hidden;
  vertical-align: middle;
  padding-right: 10px;
  float: left;
  display: none;
  /*display: inline-block;
  float: left;*/
}
.svg-supported .webkraft-logo {
  display: inline;
}
.webkraft-logo #svg_logo {
  position: relative;
  left: -3px;
  width: 160px;
  height: 40px;
  cursor: pointer;
}

.webkraft-text {
  display: inline;
  /*display: inline-block;*/
  line-height: 37px;
  vertical-align: middle;
}
.webkraft-name {
  font-size: 20px;
  display: inline;
}
.svg-supported .webkraft-name {
  display: none;
}
/*#site-header.sticky #svg_logo {
  width: 200px;
  height: 50px;
}*/
@media only screen and (max-width: 960px) {
  .webkraft-logo {
    float: none;
  }
}

/*.path_black {display: none;}
.fill_yellow {display: none;}*/
/*.path_black,*/
.path_yellow,
.path_orange,
.path_plum,
.path_purple,
.path_violet
{opacity: 0;}

/*.path_black, .fill_black {
  fill: transparent;
  stroke: #000;
  stroke-width: 3px;
  animation: dash 1s ease-in-out forwards;
}
.fill_yellow, .path_yellow {
  fill: transparent;
  stroke: #F5874B;
  stroke-width: 1px;
  animation: fillyellow 1.5s ease-in-out forwards;
}
.fill_orange, .path_orange {
  fill: transparent;
  stroke: #E66455;
  stroke-width: 1px;
  animation: fillorange 2s ease-in forwards;
}
.fill_plum, .path_plum {
  fill: transparent;
  stroke: #8B3467;
  stroke-width: 1px;
  animation: fillplum 2.5s ease-in-out forwards;
}
.fill_purple, .path_purple {
  fill: transparent;
  stroke: #582051;
  stroke-width: 1px;
  animation: fillpurple 3s ease-in-out forwards;
}
.fill_violet, .path_violet {
  fill: transparent;
  stroke: #2B1535;
  stroke-width: 1px;
  animation: fillviolet 3.3s ease-in-out forwards;
}*/

#svg_logo:hover .path_black,
#svg_logo:hover .fill_black {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  animation: dash 1s ease-in-out forwards;
  -webkit-animation: dash 1s ease-in-out forwards;
}
#svg_logo:hover .fill_yellow,
#svg_logo:hover .path_yellow {
  fill: transparent;
  stroke: #F5874B;
  stroke-width: 1px;
  animation: fillyellow 1.5s ease-in-out forwards;
  -webkit-animation: fillyellow 1.5s ease-in-out forwards;
}
#svg_logo:hover .fill_orange, #svg_logo:hover .path_orange {
  fill: transparent;
  stroke: #E66455;
  stroke-width: 1px;
  animation: fillorange 2s ease-in forwards;
  -webkit-animation: fillorange 2s ease-in forwards;
}
#svg_logo:hover .fill_plum, #svg_logo:hover .path_plum {
  fill: transparent;
  stroke: #8B3467;
  stroke-width: 1px;
  animation: fillplum 2.5s ease-in-out forwards;
  -webkit-animation: fillplum 2.5s ease-in-out forwards;
}
#svg_logo:hover .fill_purple, #svg_logo:hover .path_purple {
  fill: transparent;
  stroke: #582051;
  stroke-width: 1px;
  animation: fillpurple 3s ease-in-out forwards;
  -webkit-animation: fillpurple 3s ease-in-out forwards;
}
#svg_logo:hover .fill_violet, #svg_logo:hover .path_violet {
  fill: transparent;
  stroke: #2B1535;
  stroke-width: 1px;
  animation: fillviolet 3.3s ease-in-out forwards;
  -webkit-animation: fillviolet 3.3s ease-in-out forwards;
}

@keyframes dash {
  to {
    fill: #000;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillyellow {
  to {
    fill: #F5874B;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillorange {
  to {
    fill: #E66455;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillplum {
  to {
    fill: #8B3467;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillpurple {
  to {
    fill: #582051;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes fillviolet {
  to {
    fill: #2B1535;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.fadeout {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeout 2s ease-in-out forwards;
  -webkit-animation: fadeout 2s ease-in-out forwards;
}
.fadeout-up {
  opacity: 1;
  position: relative;
  top: 0;
  transition: all 1s ease;
  animation: fadeoutup 1s ease-in-out forwards;
  -webkit-animation: fadeoutup 1s ease-in-out forwards;
}
.sticky .fadeout-up { /* hide STUDIOS on sticky header */
  display: none;
  opacity: 0;
}
.fadeout-e {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeoute 2s ease-in-out forwards;
  -webkit-animation: fadeoute 2s ease-in-out forwards;
}
.fadeout-b {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeoutb 2s ease-in-out forwards;
  -webkit-animation: fadeoutb 2s ease-in-out forwards;
}
.fadeout-r {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeoutr 2s ease-in-out forwards;
  -webkit-animation: fadeoutr 2s ease-in-out forwards;
}
.fadeout-a {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeouta 2s ease-in-out forwards;
  -webkit-animation: fadeouta 2s ease-in-out forwards;
}
.fadeout-f {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeoutf 2s ease-in-out forwards;
  -webkit-animation: fadeoutf 2s ease-in-out forwards;
}
.fadeout-t {
  opacity: 1;
  position: relative;
  left: 0;
  animation: fadeoutt 2s ease-in-out forwards;
  -webkit-animation: fadeoutt 2s ease-in-out forwards;
}

@keyframes fadeoute {
  to {
    opacity: 0;
    transform: translate(-120px, 0);
    -webkit-transform: translate(-120px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeoutb {
  to {
    opacity: 0;
    transform: translate(-150px, 0);
	-webkit-transform: translate(-150px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeoutr {
  to {
    opacity: 0;
    transform: translate(-250px, 0);
	-webkit-transform: translate(-250px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeouta {
  to {
    opacity: 0;
    transform: translate(-300px, 0);
	-webkit-transform: translate(-300px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeoutf {
  to {
    opacity: 0;
    transform: translate(-350px, 0);
	-webkit-transform: translate(-350px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeoutt {
  to {
    opacity: 0;
    transform: translate(-400px, 0);
	-webkit-transform: translate(-400px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeout {
  to {
    opacity: 0;
    transform: translate(-150px, 0);
    -webkit-transform: translate(-150px, 0);
    /*left: -100px;*/
  }
}
@keyframes fadeoutup {
  to {
    opacity: 0;
    transform: translate(-200px, -80px);
    -webkit-transform: translate(-200px, -80px);
    /*top: -100px;*/
  }
}

.moveleft {
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
  animation: moveleft 2s ease-in-out forwards;
}
@keyframes moveleft {
  to {
    transform: translate(-233px,0);
    -webkit-transform: translate(-233px,0);
    fill: #000;
    stroke: #000;
  }
}

#XMLID_132_ {
  stroke-dasharray: 293.279;
  stroke-dashoffset: 293.279;
}
#XMLID_126_ {
  stroke-dasharray: 293.279;
  stroke-dashoffset: 293.279;
}
#XMLID_119_ {
  stroke-dasharray: 293.279;
  stroke-dashoffset: 293.279;
}

/* K Paths */
#XMLID_108_ {
  display: none;
  stroke-dasharray: 115.279;
  stroke-dashoffset: 115.279;
}
#XMLID_101_ {display:none}
#XMLID_95_ {
  stroke-dasharray: 167.723;
  stroke-dashoffset: 167.723;
}
#XMLID_89_ {display:none}
#XMLID_83_ {
  stroke-dasharray: 146.453;
  stroke-dashoffset: 146.453;
}
#XMLID_28_ {display:none}

/* Paths R */
#XMLID_203_ {
  stroke-dasharray: 146.453;
  stroke-dashoffset: 146.453;
}
#XMLID_81_ {
  stroke-dasharray: 169.279;
  stroke-dashoffset: 169.279;
}

/* Paths A */
#XMLID_130_ {
  stroke-dasharray: 298.655;
  stroke-dashoffset: 298.655;
}
#XMLID_94_ {
  stroke-dasharray: 295.669;
  stroke-dashoffset: 295.669;
}
#XMLID_11_ {
  stroke-dasharray: 81.279;
  stroke-dashoffset: 81.279;
}

/* Paths F */
#XMLID_16_ {
  display: none;
  stroke-dasharray: 171.279;
  stroke-dashoffset: 171.279;
}
#XMLID_14_ {
  stroke-dasharray: 125.28;
  stroke-dashoffset: 125.28;
}
#XMLID_22_ {
 display: none;
 stroke-dashoffset: 104.279;
 stroke-dashoffset: 104.279;
}

/* T Paths */
#XMLID_9_ {
  display: none;
  stroke-dasharray: 216.28;
  stroke-dashoffset: 216.28;
}
#XMLID_8_ {
  stroke-dasharray: 223.279;
  stroke-dashoffset: 223.279;
}