.templates {
  height: 100%;
  text-align: center;
  width: calc(100% - 288px);
  margin-bottom: 90px;
}

img#example {
  width: 180px;
  margin-right: 40px;
  vertical-align: top;
}

.quest {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 50px;
}

.quest p {
  font-size: 2rem;
  margin-right: 20px;
  max-width: 300px;
}

.templates hr {
  border: 0;
  border-top: 2px solid #84c341;
  display: block;
  height: 2px;
  margin: 20px 0 8px;
  width: 100%;
}

.inputExercice.pot {
  -ms-flex-item-align: start;
  align-self: flex-start;
  border-color: #6309c3;
  margin-left: 5px;
  width: 30px;
}

input.inputExercice.pot,
input.inputExercice.log {
  width: 25px;
  height: 30px;
  vertical-align: top;
  margin: 0;
}

.squareRoot section {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  margin-bottom: 25px;
  margin: 0 auto;
  width: 250px;
}

article.raiz {
  background-image: url(../images/raiz.svg);
  background-position: center 10px;
  background-repeat: no-repeat;
  background-size: contain;
  height: 65px;
  position: relative;
  width: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.squareRoot .raiz input.inputExercice.pot {
  left: 15px;
  position: relative;
  top: 16px;
}

.logSpan {
  font-size: 2.5rem;
  margin-right: 2px;
}

.inputExercice.log {
  border-color: #001747;
  margin-top: 20px !important;
}

.logarithm {
  width: 75%;
  margin: 0 auto;
}

/* template_1 */

.template_1 form,
.template_4 form {
  -ms-flex-align: center;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  align-items: center;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  flex-direction: column;
  padding: 0 40px;
  position: relative;
  vertical-align: top;
}

.template_1 img#example {
  margin-right: 30px;
}

.template_1 img#exercice {
  width: max-content;
  max-width: 172px;
}

.template_4 img#exercice {
  max-width: 95px;
  object-fit: contain;
}

.template_1 form {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.operator {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  align-items: center;
  color: #84c341;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  font-size: 3em;
  justify-content: center;
}

.operator.float {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#exercice.shepherd-enabled.shepherd-target,#example.shepherd-enabled.shepherd-target {
  padding: 25px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.templates input {
  background-color: transparent;
  border: 2px solid #f7931e;
  color: #000;
  font-size: 2rem;
  margin: 0;
  max-height: 30px;
  max-width: 63px;
  padding: 4px 0;
  text-align: center;
  position: relative;
}

.templates input.incorrect {
  background-color: #f7931e;
  border-color: #ed1c24;
}

/* template_1 */

/* template_2 */

.template_2 {
  -ms-flex-align: center;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
}

.template_2 h2 {
  margin-bottom: 20px;
}

#slideQ {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  width: 500px;
}

#slideQ ul {
  height: 100%;
  position: relative;
}

#slideQ ul li {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  align-items: center;
  color: #1a1a1a;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  float: left;
  font-family: "MouseMemoir";
  font-size: 2.5em;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 440px;
}

#slideQ ul li input {
  background: transparent;
  border: 2px solid #f7931e;
  color: #1a1a1a;
  font-family: "Nunito";
  font-size: 1.8rem;
  margin-bottom: 0;
  margin-left: 15px;
  padding: 5px 0;
  text-align: center;
  width: 86px;
}

#slideQ ul li input.incorrect {
  background-color: #f7931e;
}

.dots {
  -ms-flex-align: center;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  -webkit-box-align: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  grid-column-gap: 10px;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  grid-template-columns: repeat(5, 1fr);
  margin: 10px auto;
  max-width: 85px;
}

.dots li {
  background-color: #00ddcc;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.dots li.active {
  height: 11px;
  width: 11px;
}

.dots li.complete {
  height: 7px;
  width: 7px;
}

.dots li.nocomplete {
  height: 11px;
  opacity: 0.2;
  width: 11px;
}

/* template_2 */

/* template_3 */

.template_3 input {
  width: 60px;
}

.template_3 img#exercice {
  vertical-align: bottom;
}

.numbers_2 {
  -ms-flex-align: center;
  -ms-flex-direction: column;
  -ms-flex-pack: distribute;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  align-items: center;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  flex-direction: column;
  height: 110px;
  justify-content: space-around;
  margin-right: 15px;
  vertical-align: middle;
  width: 77px;
}

.template_3 h2 {
  margin: 0 auto 75px;
}

.template_3 .operator {
  color: #eb008b;
  margin: 0 5px;
}

.template_3 form {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  float: right;
  height: 60px;
  padding: 0 64px;
  position: relative;
  vertical-align: middle;
}

/* template_3 */

/* template_5 */

.template_5 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 20px auto 0;
  width: 290px;
}

.template_5 img#example {
  display: block;
  margin: 0 auto 30px;
}

.template_5 img#exercice {
  max-width: 200px;
  margin: 0 auto 30px;
}

/* template_5 */

/* template_6 */

.template_6 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  grid-row-gap: 20px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  margin: 20px auto 0;
  width: 80%;
}

.template_6 form div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 30px;
  width: 100%;
}

.template_6 .btnsNumber,.template_13 .btnsNumber {
  left: 50% !important;
  bottom: -135px;
  
}
.template_4 .btnsNumber {
  bottom: -25%;
}
.template_7 .btnsNumber {
  bottom: -145px;
  
}

.template_6 img#example, .template_7 img#example {
  max-width: 150px;
  display: block;
  margin: 0 auto 30px;
}
.template_6 img#exercice {
  max-width: 150px;
  display: block;
  margin: 0 auto 30px;
}

.template_7 img#exercice {
  max-width: 250px;
  display: block;
  margin: 0 auto 30px;
}

/* template_6 */

/* template_7 */

.template_7 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  margin: 20px auto 0;
  width: 60%;
}

.templates.template_7 img.large {
  height: 140px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

/* template_7 */

/* template_8 */

.template_8 form .frac {
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin-left: 50px;
  vertical-align: top;
}

.template_8 form section {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-inline-grid;
  display: inline-grid;
}

.template_8 form section hr {
  width: 100%;
}

.template_8 img#exercice {
  max-width: 90px;
  max-height: 100px;
}

/* template_8 */

/* template_9 */

.template_9 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  -ms-flex-pack: distribute;
  justify-content: center;
  min-height: 250px;
  width: 80%;
}

.template_9 form > div:nth-child(1) {
    min-height: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.template_9 form > div:nth-child(1) > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          width: 100%;
          margin-bottom: 20px;
}

.template_9 form .inputs div hr {
    width: 100%;
}

.template_9 img#exercice {
  max-width: 250px;
  max-height: 100px;
}

.template_9 form .inputs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
            min-height: 200px;
}

.template_9 form .inputs > div {
  height: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.template_9 form .inputs.shepherd-enabled.shepherd-target {
    padding: 15px;
}

.template_9 form div > div > p {
    font-size: 2rem;
    max-width: 320px;
}

/* template_9 */

/* template_10 */

.template_10 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  margin: 20px auto 0;
  width: 80%;
}

/* template_10 */

/* template_11 */

.template_11 img#exercice {
  display: block;
  height: 150px;
  margin: 30px auto;
  width: 280px;
}

.template_11 form {
  display: -ms-grid;
  display: grid;
  margin: 20px auto;
  width: 50%;
}

.fieldCenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 50px;
}

.template_11 input {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/* template_11 */

/* template_12 */

.template_12 form {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 50px;
}

/* template_12 */

.template_14 form {
  margin: 20px auto 0;
  width: 70%;
}

.template_15 form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 20px auto 0;
  width: 80%;
}

.template_16 form {
  display: inline-block;
  vertical-align: middle;
  width: 240px;
}

.template_16 form section {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 20px;
}

.image_acomp {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #1f4cc8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50px;
}

.image_acomp img {
  height: 80%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 70%;
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .templates input {
    border: 2px solid #ccc;
  }
  .template_13 form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
  }
  .template_12 form .squareRoot, .template_13 form .squareRoot {
    width: 100%;
  }
  .template_12 form .squareRoot section, .template_13 form .squareRoot section {
    width: 50%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .squareRoot .raiz input.inputExercice.pot {
    left: -3px;
    position: relative;
    top: -20px;
  }
  .template_1 form {
      padding: 0 70px;
  }
}

@supports not ((display: -ms-grid) or (display: grid)) {
  .template_6 form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}