.fra h1 {
  font-family: 'Bricolage Grotesque';
  font-size: 3rem;
  font-weight: bold;
  background-image: linear-gradient(#D27063, #D27063, #DE8551);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
}

.hipervinculoGeneral {
  font-family: 'Quicksand';
  font-weight: 900;
  color: #5BC5AB !important;
}

p {
  align-content: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 30px;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  color: black;
}

.wavtit h2 {
  text-align: center;
  font-family: 'Bricolage Grotesque';
  font-size: 5rem;
  font-weight: 500;
  color: #F3F3FA;
  display: grid;
  align-items: center;
  max-width: 100%;
}


@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% - 30px);
    flex-basis: calc(50% - 30px);
  }

  .ag-courses-item_title {
    font-size: 24px;
  }
}

/*TarjetaValidacion */
/* GENERAL */

.credit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.credit a {
  color: inherit;
}

/* Main Circle */
.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080, #FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%)
}

/* Phone */
.phone {
  position: relative;
  z-index: 2;
  width: 1140px;
  height: 17rem;
  background-color: inherit;
  -webkit-box-shadow: 0 4px 35px rgba(0, 0, 0, .1);
  box-shadow: 0 4px 35px rgba(0, 0, 0, .1);
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}



/* Top */
.menu {
  /*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: .5rem;
}

.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}

.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

/* Middle */
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  -webkit-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}

.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080, #FF8C00 70%);
  margin: auto;
}

.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label,
.toggle {
  height: 2.8rem;
  border-radius: 100px;
}

label {
  width: 100%;
  background-color: rgba(0, 0, 0, .1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0;
  cursor: pointer;
}

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
  box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
  font-size: 90%;
  font-weight: bolder;
  color: black;
  width: 65%;
  margin-left: 17.5%;
  margin-top: 1.0%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  opacity: .5;
}

.mark {
  border-radius: 100px;
  background-color: black;
}

.time {
  color: black;
  font-size: 1rem;
}

/* -------- Switch Styles ------------*/
[type="checkbox"] {
  display: none;
}

/* Toggle */
[type="checkbox"]:checked+.app .toggle {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #34323D;
}

[type="checkbox"]:checked+.app .dark {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked+.app .light {
  opacity: 1;
  color: white;
}

/* App */
[type="checkbox"]:checked+.app .body {
  background-color: #26242E;
  color: white;
}

/* Circle */
[type="checkbox"]:checked+.app .crescent {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: #26242E;
}

[type="checkbox"]:checked+.app .circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked+.app .main-circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked+.time {
  color: white;
}

[type="checkbox"]:checked+.app .body .phone .menu .time {
  color: white;
}

[type="checkbox"]:checked+.app .body .phone .menu .icons .network {
  border-color: transparent transparent white transparent;
}

[type="checkbox"]:checked+.app .body .phone .menu .icons .battery {
  background-color: white;
}

[type="checkbox"]:checked+.app .body {
  border-radius: 40px;
  ;
}

.menu {
  /*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}


/*SUBTÍTULOS DE COLORES*/
.subtitleF1,
.subtitleF2,
.subtitleF3,
.subtitleF4,
.subtitleF5 {
  text-align: center;
  font-family: 'Bricolage Grotesque';
  font-size: 3vw;
  font-weight: 500;
  color: #302535;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;
  align-items: center;
  max-width: 100%;
  padding-top: 100px;
}

.subtitleF1:after,
.subtitleF1:before {
  content: " ";
  display: block;
  border: 2px solid #447D9C;
  background-color: #f8f8f8;
}

.subtitleF2:after,
.subtitleF2:before {
  content: " ";
  display: block;
  border: 2px solid #D27063;
  background-color: #f8f8f8;
}

.subtitleF3:after,
.subtitleF3:before {
  content: " ";
  display: block;
  border: 2px solid #447D9C;
  background-color: #f8f8f8;
}

.subtitleF4:after,
.subtitleF4:before {
  content: " ";
  display: block;
  border: 2px solid #D27063;
  background-color: #f8f8f8;
}

.subtitleF5:after,
.subtitleF5:before {
  content: " ";
  display: block;
  border: 2px solid #447D9C;
  background-color: #f8f8f8;
}

/*Tarjetas desplegables*/
.accordion {
  width: 100%;
  max-width: 1080px;
  margin: 0.5rem;
}

.accordion-item, .accordion-item2, .accordion-item3, .accordion-item4, .accordion-item5{
  justify-self: center;
  background-color: #ffffff;
  color: #111;
  margin: auto;
  border-radius: 3px;
  width: 80%;
  margin-bottom: 20px;
  border: solid 0.5px #EBEBF1;

}
.accordion-item{
  background: white;
  color: black;
  border-radius: 2vw;
  box-shadow: 7px 7px #447D9C;
  border-color: #447D9C;
  border-width: 0.2vw;
}
.accordion-item2{
  background: white;
  color: black;
  border-radius: 2vw;
  box-shadow: 7px 7px #D27063;
  border-color: #D27063;
  border-width: 0.2vw;
}

.accordion-item-header {
  min-height: 60px;
  font-size: 1.2rem;
  padding: 0.5rem 3rem 0.5rem 1rem;
  line-height: 1.5;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: 'Bricolage Grotesque';
  font-size: 1.5rem;
}

.accordion-item-header::after {
  content: "\002B";
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
}

.accordion-item-header.active::after {
  content: "\2212";
}

.accordion-item-body, .accordion-item-body2, .accordion-item-body3, .accordion-item-body4, .accordion-item-body5 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 20px;
  padding-right: 20px;
}

.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
  justify-content: center;
  font-weight: 600;
  font-family: 'Quicksand';
  text-align: justify;
  margin-left: 20px;
  margin-right: 20px;
}
.product{
  width: 800px;
  margin-left: 300vh;
}

.footImageResults { /*Esta cosa sirve para poner un pie de pagina que se ajuste a la responsividad del formato de la instruccion de arriba*/
  width: 100%;
  max-width: 1000px;
  height: auto;
  align-items: center;
  display: block;
  margin: auto;
  text-align: justify;
  font-style: italic;
  font-size: medium;
  text-indent: 0;
  color: gray;
  }