body,
html {
  height: 100%;
  line-height: 1.8;
}

/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("/images/whiterabbit.jpg");
  min-height: 100%;
}

.bgimg-1b {
  background-position: center;
  background-size: cover;
  background-image: url("/images/bg.jpg");
  min-height: 100%;
}


.bgimg-2 {
  background-position: center;
  background-size: cover;
  background-image: url("/images/site2.jpeg");
  min-height: 100%;
}

.w3-bar .w3-button {
  padding: 16px;
}

.leftalign {
  text-align: left;
}

.horizontale {
  border-top: 2px solid #444;
  width: 100%;
  display: block;
  padding-top: 1em;
}

#myBulb {
  display: block;
  top: 100px;
  right: 10px;
  position: fixed;
  padding: 5px;
  transform: scale(0.75);
  z-index: 4;
}

.myBulbOff {
  filter: grayscale(1);
}

.myBulbOn {
  animation: scbulb linear 6 500ms;
}

@keyframes scbulb {
  40% {
    filter: grayscale(1);
    transform: scale(1.02);
  }
}

#myRabbit {
  background-color: #4d4686;
  display: block;
  bottom: 10px;
  right: 10px;
  position: fixed;
  padding: 5px;
  border-radius: 50%;
  box-shadow: 3px 3px 5px #0003;
  z-index: 4;
  cursor: help;
}

#myRabbit:hover {
  box-shadow: 3px 3px 15px #0007;
}

.myRabbitOn {
  animation: scrabbit linear 12 500ms, wiggle linear 3 2s;
}

@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

@keyframes scrabbit {
  40% {
    transform: translate(5px);
    transform: scale(1.02);
    background-color: #9e9d9d;
  }
}

#myRabbitSpeak {
  background-color: #ddd;
  display: block;
  bottom: 180px;
  right: 80px;
  position: fixed;
  padding: 1px;
  border-radius: 10px;
  z-index: 4;
  box-shadow: inset 2px 2px 1px lightgray;
  font-family: "Raleway", sans-serif;
}

#myRabbitSpeakIn {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 2px 2px 2px #0003;

}

#myRabbitSpeak::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  /*left: 80%;*/
  right: 30px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ddd transparent transparent transparent;
}

.myRabbitOn #circleRabbit {
  background-color: #4d4686;
  animation: shineRabbit 3500ms linear infinite 3000ms;
}

@keyframes shineRabbit {
  40% {
    background-color: #402c74;
  }
}

#circleRabbit {
  background: rgb(78, 32, 185);
  background: linear-gradient(120deg, rgba(78, 32, 185, 1) 0%, rgba(0, 96, 167, 1) 9%, rgba(64, 39, 144, 1) 36%, rgba(0, 0, 0, 1) 100%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 1em 1em #fd03;
}

#circleRabbit:hover {
  background: rgb(78, 32, 185);
  background: linear-gradient(120deg, rgba(78, 32, 185, 0.5438550420168067) 0%, rgba(0, 96, 167, 1) 9%, rgba(64, 39, 144, 0.5242471988795518) 36%, rgba(0, 0, 0, 0.3477766106442577) 100%);
  border-radius: 50%;
  overflow: hidden;
  animation: shineRabbithover 3500ms linear infinite 3000ms;
  box-shadow: inset 2em 2em #fd02;
}

@keyframes shineRabbithover {
  40% {
    background-color: #402c74;
  }
}

.mailDisplay {
  background-color: #ddd;
  color: #000;
  padding: 1em;

}

.animsc {
  animation: scgrow linear infinite 3000ms;
}

@keyframes scgrow {
  40% {
    scale: 1.02;
  }
}


.classMsg {
  background-color: #0007;
  animation: glow 2500ms linear infinite 2000ms;

}

@keyframes glow {
  40% {
    text-shadow: 1px 1px 3px #fff, -1px -1px 3px #fff;
  }
}




.btn-shine {
  color: #ffffff;
  background: linear-gradient(to right, #9e9d9d 0, white 10%, #9e9d9d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes shine {
  0% {
    background-position: 0;
  }

  60% {
    background-position: 600px;
  }

  100% {
    background-position: 600px;
  }
}

#cwe {
  position: fixed;
  top: 15%;
  background-color: black;
  /* background: rgb(2,0,36); */
  background: linear-gradient(120deg, rgba(2, 0, 36, 1) 0%, rgba(163, 52, 0, 1) 28%, rgba(74, 1, 1, 1) 36%, rgba(0, 0, 0, 1) 100%);
  /*
    width: 50%;
    left: 25%;
    /**/
  /**/
  /*// XXX Diaporama*/
  width: 10%;
  left: 45%;
  /**/
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000a, inset 1px 1px 5px #fffa;
  padding: 1em;
  animation-duration: 0.5s;
  animation-name: slidein;
  animation-timing-function: cubic-bezier(.04, .75, .39, 1.08);
  z-index: 5;
  /*animation-iteration-count: infinite;*/
  animation: shinecwe 5s linear;
}


@keyframes shinecwe {
  0% {
    background-position: 0 0;
    background-size: 100%;
  }

  60% {
    background-position: 0;
    background-size: 150%;
  }

  100% {
    background-position: 0;
    background-size: 150%;
  }
}

@keyframes slidein {
  from {
    margin-top: -100%;

  }

  to {
    margin-top: 0%;

  }
}

#closecwe:hover {
  background-color: transparent !important;
  color: lightgray !important;
}

#closecwe {
  color: #ffffff44 !important;
}

.cweframe {
  display: none;
  position: absolute;
  top: 20%;
  right: 5%;
  z-index: 2;
  width: 20%;
  flex-wrap: wrap;
}

.captureframe {
  position: absolute;
  bottom: 0%;
  right: 25%;
  width: 50%;
  z-index: 2;
}

.burpframe {
  position: absolute;
  top: 0%;
  right: 25%;
  width: 50%;
  z-index: 2;
}

.notfound {
  filter: grayscale(0.9) brightness(0.5);

}

#burpcontent {
  transition: all 600ms;
  opacity: 0;
  display: none;
}

#burpframe {
  transition: all 500ms;
  transition-timing-function: ease-in-out;
}

#burpResultPre:hover {
  background-color: #392380;

}

#captureframe {
  transition: all 500ms;
  transition-timing-function: ease-in-out;
}

#captureframeContent {
  transition: all 500ms;
  transition-timing-function: ease-in-out;
}

.replayButton {
  background-color: #0002;
  box-shadow: 1px 1px 1px black;
}


/**
 * Tabs
 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  /*/ make sure it wraps*/
}

.tabs label {
  order: 1;
  /*/ Put the labels first*/
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: white;
  border: solid 1px gray;
  font-weight: bold;
  background-image: url("/images/corner.png");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: top right;
  transition: all ease 0.2s;
}

.tabs label:hover {
  color: black;
  transition: all ease 0.2s;
  background-image: url("/images/corner.png");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: top right;
  background-color: rgb(79, 196, 237, 0.7);
  transition: all ease 1s;
  /*background: linear-gradient(66deg, rgba(79,196,237,1) 0%, rgba(154,229,255,1) 5%, rgba(20,150,246,1) 35%, rgba(79,196,237,1) 47%, rgba(79,196,237,1) 100%);
  */
}

.tabs .tab {
  order: 99;
  /*/ Put the tabs last*/
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
  /* border: solid 1px rgb(79,196,237);*/
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked+label {
  background-color: rgb(79, 196, 237);
  background-image: url("/images/corner.png");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: top right;
  color: black;
}

.tabs input[type="radio"]:checked+label+.tab {
  display: block;
}

@media (max-width: 45em) {

  .tabs .tab,
  .tabs label {
    order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

.rotateClock1 {
  width: 60%;
  position: absolute;
  left: 20%;
  top: 50%;
  animation: rotation 5s infinite linear, oppclock 3s;
}

.rotateClock2 {
  width: 60%;
  position: absolute;
  left: 20%;
  top: 50%;
  animation: rotation 2s infinite linear, oppclock 3s;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

@keyframes oppclock {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

/**
 * Generic Styling
*
body {
  background: #eee;
  min-height: 100vh;
	box-sizing: border-box;
	padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

*/