.form {
    border-radius: 0.37rem;
    background-color: #ebf5ef;
    box-shadow: 0 0 0.31rem 0.06rem rgba(0, 0, 0, 0.1);
    overflow-y: hidden;
    overflow-x: hidden;
    margin-top:20px;
	 margin-top:1.25rem;
}

form{
    margin: 0px !important;
    margin: 0rem !important;
}

.visible-tab {
   display: block; 
}

.hidden-tab {
   display: none; 
}

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

div[role="radiogroup"]{
    display: flex;
    left: calc(50% - 4.5rem);
  position: relative;
    }

div[role="radiogroup"]#quiz2q3{
    display: flex;
    left: calc(50% - 7.5rem);
  position: relative;
    }    
div[role="radiogroup"] div {
  margin:5px;
} 


label.secondaire{
    color: #007944;
    background-color: #fff;
    border: 0.992px solid #007944;
    border: 0.062rem solid #007944;
}

label.principal{
    color: #fff;
    background-color: #00884e;
    border: 0.992px solid #00884e;
    border: 0.062rem solid #00884e;
}
label.principal, label.secondaire {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 5.92px 12px;
    padding: 0.37rem 0.75rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.23077;
    cursor: pointer;
}

#contenu section {
    padding: 20px;
    padding: 1.25rem;
}

h2 {
    margin-top: 0px !important;
    margin-top: 0rem !important;
}


.answer {
    margin-bottom: 1.25rem;
    background-color: #fff;
    border: solid 0.96px #00884e;
    border: solid 0.06rem #00884e;
    padding: 20px;
    padding: 1.25rem; 
        }

.saviezvous {
    margin-bottom: 1.25rem;
    border-radius: 0.37rem;
    background-color: #c0e0cd;
    padding: 20px;
    padding: 1.25rem; 
}

.saviezvous h2 {
    color: #00884e !important;
    }



.answer .image-anime {
    content:" ";
    position:absolute;
    width: 160px !important;
    width:10rem !important;
    height:10rem !important;
    background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   max-width:260px;
    }

.b10-anim-sablier {
  background-image: url('/ressources/images/b10-anim-sablier.gif')
  }
.b10-anim-cellulaire {
  background-image: url('/ressources/images/b10-anim-cellulaire.gif')
  }
.b10-anim-robot {
  background-image: url('/ressources/images/b10-anim-robot.gif')
  }
.b10-anim-verre {
  background-image: url('/ressources/images/b10-anim-verre.gif')
  }      
.b10-pouce {
  background-image: url('/ressources/images/b10-pouce.jpg')
  }

.answer .text {
    margin-left: 170px;
    margin-left: 10.63rem;
    width:100%;
}


@media (min-width: 768px){

html:not([style="font-size: 150%;"]):not([style="font-size: 200%;"]) .half .answer {margin-right:1.25rem;}

 html:not([style="font-size: 150%;"]):not([style="font-size: 200%;"]) .half {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  }

    .answer {
        min-height: 11rem;
        min-width: 33.13rem;
        min-width: 530px;
        min-height: 199px;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
            }
}



@media (max-width: 767px){
    .answer {
            background-color: #fff;
            margin:0px;
            margin-bottom: 1.25rem;
        border: solid 0.06rem #00884e;
        padding: 1.25rem;
            }

    .saviezvous {
        padding: 1.25rem;
        margin:0rem;
        margin-bottom: 1.25rem;
        border-radius: 0.37rem;
        background-color: #c0e0cd;
    }

    .image-anime {
      content: '';
      left: calc(50% - 4.5rem);
      position: relative;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;   
        }
	 .answer .text {
	    margin-left: 0px;
	    margin-top: 10.63rem;
	    margin-left: 0rem;
	    margin-top: 170px;
	 }

  }

/* Animation*/

.slide-left-out {
    -webkit-animation: slideleft 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5);
    animation: slideleft 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5);
    }

.slide-left-in {
   -webkit-animation: slideleft 0.5s ease-in reverse;
    animation: slideleft 0.5s ease-in  reverse;
    }

@-webkit-keyframes slideleft{
  from { -webkit-transform: translateX(0); transform: translateX(0); }
   to { -webkit-transform: translateX(-58.75rem); transform: translateX(-58.75rem); }
    }

@keyframes slideleft{
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-58.75rem); transform: translateX(-58.75rem); }
    }


.slide-right-out {
  -webkit-animation: slideright 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5);
  animation: slideright 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5) ;
    }

.slide-right-in {
  -webkit-animation: slideright 0.5s ease-in  reverse;
  animation: slideright 0.5s ease-in reverse ;
    }


@-webkit-keyframes slideright {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(58.75rem); transform: translateX(58.75rem); }
    }

@keyframes slideright {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(58.75rem); transform: translateX(58.75rem); }
    }


.slide-top-up {
  -webkit-animation: slidetop 0.5s cubic-bezier(0.55, 0.06, 0.96, 0.3);
  animation: slidetop 0.5s cubic-bezier(0.55, 0.06, 0.96, 0.3); 
        }
.slide-top-down {
  -webkit-animation: slidetop 0.5s ease-in reverse;
  animation: slidetop 0.5s ease-in reverse; 
        }        

@-webkit-keyframes slidetop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(-16rem); transform: translateY(-16rem); }
    }

@keyframes slidetop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(-16rem); transform: translateY(-16rem); }
    }


.slide-bottom-down {
  -webkit-animation: slidebottom 0.5s ease-in;
  animation: slidebottom 0.5s ease-in ;
        }
.slide-bottom-up {
  -webkit-animation: slidebottom 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5) reverse ;
  animation: slidebottom 0.5s cubic-bezier(0.55, 0.06, 0.85, 0.5) reverse ;
        }        

@-webkit-keyframes slidebottom {
   from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(16rem); transform: translateY(16rem); }
    }

@keyframes slidebottom {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(16rem); transform: translateY(16rem); }
    }

 .fadeout {
    -webkit-animation: fade 0.3s; /*etait a 3s */
    animation: fade 0.3s; /*etait a 3s */
 }

.fadein {
    -webkit-animation: fade reverse 0.3s; /*etait a 3s */
    animation: fade reverse 0.3s; /*etait a 3s */
 }

@-webkit-keyframes fade {
   0% {opacity: 1;-}
   100% {opacity: 0;}
}

@keyframes fade {
   0% {opacity: 1;}
   100% {opacity: 0;}
}