@import url("https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic");
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: #ffbc0d;
  font-family: 'Roboto', serif;
}
#root {
  display: flex;
  height: inherit;
  align-items: center;
  justify-content: center;
}
.s-container {
  background: #26522f;  
  margin: auto;
  box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  /* position: absolute; */
}
.s-container .curve-background {
  overflow: hidden;
  position: absolute;  
  left: 0;
  height: 405px;
  width: 100%;
  height: 100%;
}
.survey-open .s-container .curve-background .curve-close {
  opacity: 0;
}
.survey-close .s-container .curve-background .curve-close {
  opacity: 1;
}
.s-container .header {
  display: flex;
  justify-content: right;
}

.s-container .header .survey {
  width: 60px;
  height: 60px;
  background: #313131;
  transition: background 0.5s ease-out 0s;
  z-index: 50;
  position: relative;
  cursor: pointer;
}

.survey-open .s-container .header .survey {
  background: #ffbc0d;
}

.survey-close .s-container .header .survey {
  background: #313131;
}

.s-container .header .survey .close {
  opacity: 0;
  font-size: 2.5rem;
  color: #fff;
  position: absolute;
  left: 15px;
  top: 0;
}

.survey-open .s-container .header .survey .close {
  opacity: 1;
}
.survey-close .s-container .header .menu .close,
.survey-close .s-container .header .survey .close {
  opacity: 0;
}
.s-container .header .survey {
  border-bottom-left-radius: 50%;
  text-align: center;
  padding: 13px 0;
}
.s-container .header .survey circle,
.s-container .header .survey .survey-line {
  stroke: #fff;
  transition: stroke 0.4s ease-out;
}
.survey-open .s-container .header .survey .survey-icon {
  animation: survey-open 1s forwards;
}
.survey-open .s-container .header .survey .survey-icon circle,
.survey-open .s-container .header .survey .survey-icon .survey-line {
  stroke: #313131;
}
.survey-close .s-container .header .survey .survey-icon {
  animation: survey-close 0.5s forwards;
}
.survey-close .s-container .header .survey .survey-icon circle,
.survey-close .s-container .header .survey .survey-icon .survey-line {
  stroke: #fff;
}
.s-container .text {
  text-align: center;
  color: #fff;
  z-index: 10;
  font-size: 1.3rem;  
  transition: opacity 0.5s ease-in;
}
.s-container .text p {
	padding: 0 60px;
}
.s-container .text .survey-input {
  height: 60px;
  border: none;
  border-radius: 3px;
  width: 0;
  transition: all 0.5s ease-out 0.4s;
  padding: 0;
}
.survey-open .s-container .text .survey-input {
  width: 300px;
  font-size: 20px;
  padding: 0 10px;
}
.survey-close .s-container .text .survey-input {
  transition: all 0s;
  width: 0;
}
.s-container .text .survey-text {
  transform: translate(0, 40px);
  margin: 0;
  transition: all 0.5s ease-out 0.4s;
  opacity: 0;
  margin-bottom: 10px;
}
.survey-open .s-container .text .survey-text {
  opacity: 1;
  transform: translate(0, 0);
}
.survey-close .s-container .text .survey-text {
  transition: all 0s;
  transform: translate(0, 40px);
  opacity: 0;
}
.s-container .intro {
  color: #fff;
  text-align: center;
  position: absolute;
  top: 165px;
  width: 100%;
  transition: opacity 0.3s ease-in;
}
.survey-open .s-container .intro {
  opacity: 0;
}
.survey-close .s-container .intro {
  opacity: 1;
}

.err {
	display: none;
    opacity: 0;
    color: #ff4a4a;
    background: #000000;
    padding: 15px;
    position: fixed;
    transition: all 0.2s ease-in;
    width: 100vw;    
    height: 100px;
    top: calc(50vh - 50px);
    z-index: 99999;
    left: 0;
    border: 10px solid #ff4a4a;
    transition: all 0.2s ease-in;
    border-left: 0px solid;
    border-right: 0px solid;
    pointer-events: none;
}
.err.on {
	display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.text2 {
	z-index: 10;
    padding: 0 80px;
    color: #FFF;
}

.text-done {
	display: none;	    
    z-index: 10;
    color: #fff;
    font-size: 40px;
    margin: 50px;    
    font-weight: bold;
}

@-moz-keyframes survey-open {
  50% {
    transform: translate3d(-350px, 187px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-225px, 187px, 0) rotate(360deg);
  }
}
@-webkit-keyframes survey-open {
  50% {
    transform: translate3d(-350px, 187px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-225px, 187px, 0) rotate(360deg);
  }
}
@-o-keyframes survey-open {
  50% {
    transform: translate3d(-350px, 187px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-225px, 187px, 0) rotate(360deg);
  }
}
@keyframes survey-open {
  50% {
    transform: translate3d(-350px, 187px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-225px, 187px, 0) rotate(360deg);
  }
}
@-moz-keyframes survey-close {
  0% {
    transform: translate3d(-225px, 187px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0) rotate(360deg);
  }
}
@-webkit-keyframes survey-close {
  0% {
    transform: translate3d(-225px, 187px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0) rotate(360deg);
  }
}
@-o-keyframes survey-close {
  0% {
    transform: translate3d(-225px, 187px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0) rotate(360deg);
  }
}
@keyframes survey-close {
  0% {
    transform: translate3d(-225px, 187px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0) rotate(360deg);
  }
}




button.act {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  font-size: inherit;  
  padding: 0.75em 1em;
  background: #ffbc0d;
  color: #000000;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 10px;
  font-weight: bold;
  font-size: 22px;
  color:#FFF;
}

.spinner {
  --size: 1.25em;
  --offset-r: calc(var(--size) * -1);
  --offset-l: 0;
  --opacity: 0;
  position: relative;
  display: inline-flex;
  height: var(--size);
  width: var(--size);
  margin-top: calc(var(--size) * -0.5);
  margin-right: var(--offset-r);
  margin-bottom: calc(var(--size) * -0.5);
  margin-left: var(--offset-l);
  box-sizing: border-box;
  border: 0.125em solid rgba(255, 255, 255, 0.333);
  border-top-color: white;
  border-radius: 50%;
  opacity: var(--opacity);
  transition: 0.25s;
}

button.act.on {
	cursor: wait;
}

button.act.on .spinner, button.act.on:active .spinner, button.act.on:focus .spinner, button.act.on:hover .spinner {
  --width: 1em;
  --offset-r: 0.333em;
  --offset-l: -0.333em;
  --opacity: 1;
  -webkit-animation: 0.666s load infinite;
          animation: 0.666s load infinite;

}
@-webkit-keyframes load {
  to {
    transform: rotate(360deg);
  }
}
@keyframes load {
  to {
    transform: rotate(360deg);
  }
}



[lang="fr"] {
	display: none;
}

.lang-switch-cnt {
	position: absolute;
    left: 5px;
    top: 5px;
	z-index: 9999;
}

.lang-switch {
	position: relative;
    width:44px;
	height:44px;
    cursor: pointer;
    border: 2px solid #29532f;
    border: 2px solid #f5c119;
    border-radius: 50%;
    margin: 4px;
    top: 0;
    left: 0;
}

.lang-switch img {
	width:40px;
	height:40px;
}

.lang-switch .fr-lang, .lang-switch .de-lang {
	position: absolute;
    width:40px;
	height:40px;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.lang-switch .fr-lang {
    transform: rotateX(180deg);
}

.lang-switch.on .de-lang {
    transform: rotateX(180deg);
}

.lang-switch.on .fr-lang {
    transform: rotateX(0);
}

.logo {
	z-index:10;
	text-align: center;
    position: relative;    
    margin: 20px;
}

.logo img {	
	height:100px;
}