@charset "utf-8";
/* CSS Document */

/*
----------------- TRANSFER CLOSE BUTTON ----------------------
*/
#Nav_CloseButton_Menu_AufgabenKurs{
    position: fixed;
    display: none;
    left: 20px;
    top: 20px;
    width: 70px;
    height: 70px;
    z-index: 25;
}

#Nav_CloseButton_Menu_AufgabenKurs.stand_by{
    z-index: 10;
}
/*
----------------- TRANSFER BUTTON AUFGABEN ----------------------
*/
#Nav_Root_aufgabe{
    position: relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#Nav_CloseButton_Menu_AufgabenKurs.transform{
    display: block;
}

#nav_btn_aufgabe.transform{
	height: 90px;
	width: 90px;
	background: url(../img/close_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
}

#Nav_Root_aufgabe.transform{
    --PosLeft: 0;
    --PosTop: 0;
    z-index: 21;
    position: fixed;
    top: var(--PosTop);
    left: var(--PosLeft);
    animation-name: animation_btn_aufgabe;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_aufgabe.transform_klein{
    --PosLeft: 0;
    --PosTop: 0;
    z-index: 21;
    position: fixed;
    top: var(--PosTop);
    left: var(--PosLeft);
    animation-name: animation_btn_aufgabe_klein;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_aufgabe.transform_return{
    animation-name: animation_btn_aufgabe_Return;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_aufgabe.transform_return_klein{
    animation-name: animation_btn_aufgabe_Return_klein;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_aufgabe.transform_off{
    display: none;
}

#Nav_Root_aufgabe label.transform{
    display: none;
}
/*
----------------- TRANSFER BUTTON KURS ----------------------
*/
#Nav_Root_kurse{
    position: relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#nav_btn_kurse.transform{
	height: 90px;
	width: 90px;
	background: url(../img/close_black.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center center;
}

#Nav_Root_kurse.transform{
    --PosLeft: 0;
    --PosTop: 0;

    position: fixed;
    top: var(--PosTop);
    left: var(--PosLeft);
    animation-name: animation_btn_aufgabe;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    z-index: 30;
}

#Nav_Root_kurse.transform_klein{
    --PosLeft: 0;
    --PosTop: 0;
    position: fixed;
    top: var(--PosTop);
    left: var(--PosLeft);
    animation-name: animation_btn_aufgabe_klein;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    z-index: 30;
}

#Nav_Root_kurse.transform_return{
    animation-name: animation_btn_aufgabe_Return;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_kurse.transform_return_klein{
    animation-name: animation_btn_aufgabe_Return_klein;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

#Nav_Root_kurse.transform_off{
    display: none;
}

#Nav_Root_kurse label.transform{
    display: none;
}
/*
----------------- TRANSFER KEYFRAME ----------------------
*/
@-webkit-keyframes animation_btn_aufgabe {
  0% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(0deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
  100% {
      left: 20px;
      top: 20px;
      transform: rotate(720deg);
      width: var(--Poswidth_close);
      height: var(--Posheight_close);
    }
}

@keyframes animation_btn_aufgabe {
  0% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(0deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
  100% {
      left: 20px;
      top: 20px;
      transform: rotate(720deg);
      width: var(--Poswidth_close);
      height: var(--Posheight_close);
    }
}



@-webkit-keyframes animation_btn_aufgabe_klein {
  0% {
      width: var(--Poswidth_close);
      height: var(--Posheight_close);
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(0deg);
    }
  100% {
      left: 20px;
      top: 20px;
      transform: rotate(720deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
}
@keyframes animation_btn_aufgabe_klein {
  0% {
      width: var(--Poswidth_close);
      height: var(--Posheight_close);
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(0deg);
    }
  100% {
      left: 20px;
      top: 20px;
      transform: rotate(720deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
}






@-webkit-keyframes animation_btn_aufgabe_Return {
  0% {
      left: 20px;
      top: 20px;
      transform: rotate(0deg);
      width: 70px;
      height: 70px;
    }
  100% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(-720deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
}
@keyframes animation_btn_aufgabe_Return {
  0% {
      left: 20px;
      top: 20px;
      transform: rotate(0deg);
      width: 70px;
      height: 70px;
    }
  100% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(-720deg);
      width: var(--Poswidth);
      height: var(--Posheight);
    }
}


@-webkit-keyframes animation_btn_aufgabe_Return_klein {
  0% {
      left: 20px;
      top: 20px;
      transform: rotate(0deg);
    }
  100% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(-720deg);
    }
}
@keyframes animation_btn_aufgabe_Return_klein {
  0% {
      left: 20px;
      top: 20px;
      transform: rotate(0deg);
    }
  100% {
      left: var(--PosLeft);
      top: var(--PosTop);
      transform: rotate(-720deg);
    }
}