@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

.display, .footer_2, .line_footer, .footer_1, .SocialMedia, .BoxContentSocialMedia, .EmailBox button, .EmailBox, .ContentEmailInput, .ContentEmail, .BoxContentEmail, .ImagenFreeTrialSecond, .ImagenFreeTrial, .ContentImagenFreeTrial, .HeaderCardTrial h3, .HeaderCardTrial, .CardTrialPlan, .ContentCardPlan, .BoxButtonPlan, .PlanHeaderContentPrice, .PlanHeaderRecurrence, .ContentSelectionPlan, .ContentPlanList ul li i, .ContentPlanTrialList ul li i, .ContentPlanListMobile ul li i, .ContentPlanList ul li, .ContentPlanTrialList ul li, .ContentPlanListMobile ul li, .ContentPrice, .PlanHeader, .ContentPlanDesktop, .CategoryImageMobile, .BoxContentMobileExploreCatalogo, .ButtonCategory, .ButtonCategoryMobile, .BoxContent_CategorySelection, .BoxContent_CTA a, .BoxContent_CTA, .BoxContentSecondary, .Principal_CTA, .BoxContent, .PrincipalBoxContent, .Navbar_Mobile_MenuActions ul li, .Navbar_Mobile_MenuActions ul, .Navbar_Mobile_MenuOptions ul, .Navbar_Mobile_Menu, .Navbar_Desktop, nav ul, .containerLogo, .containerHeader, .button i, .footer_1 .FooterContact a i, .ButtonGoPlan i, .buttonGoPlanTrial i, .ButtonGoPlanMobile i, .BoxContent_CTA a i, .button, .footer_1 .FooterContact a, .ButtonGoPlan, .buttonGoPlanTrial, .ButtonGoPlanMobile, .BoxContent_CTA a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button, .footer_1 .FooterContact a, .ButtonGoPlan, .buttonGoPlanTrial, .ButtonGoPlanMobile, .BoxContent_CTA a {
  border-radius: 10px;
  font-size: 1.5em;
  height: 60px;
}
.button i, .footer_1 .FooterContact a i, .ButtonGoPlan i, .buttonGoPlanTrial i, .ButtonGoPlanMobile i, .BoxContent_CTA a i {
  border-radius: 10px;
  font-size: 50px;
  width: 60px;
  height: 100%;
}
.button span, .footer_1 .FooterContact a span, .ButtonGoPlan span, .buttonGoPlanTrial span, .ButtonGoPlanMobile span, .BoxContent_CTA a span {
  width: calc(100% - 60px);
  font-weight: 600;
}

.body--onMenuActiveMenu {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.containerHeader {
  height: 90px;
  background-color: #ff4747;
  padding: 0 10px;
}
@media screen and (max-width: 768px) {
  .containerHeader {
    height: 80px;
  }
}

.containerHeader--ActiveMobile {
  background-color: #3a3b3c;
}

@media screen and (max-width: 768px) {
  .containerLogo {
    z-index: 2;
    width: 100%;
  }
}
.containerLogo .Logo {
  width: 150px;
}
@media screen and (max-width: 768px) {
  .containerLogo .Logo {
    width: 200px;
  }
}

nav {
  width: 100%;
  max-width: 900px;
}
@media screen and (max-width: 768px) {
  nav {
    width: auto;
  }
}
nav ul li {
  font-size: 1em;
  list-style: none;
  margin: 0 10px;
}
nav ul li a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}

.Navbar_Desktop {
  width: 100%;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .Navbar_Desktop {
    display: none;
  }
}

.Navbar_Mobile,
.Navbar_Mobile_Menu {
  display: none;
}
@media screen and (max-width: 768px) {
  .Navbar_Mobile,
  .Navbar_Mobile_Menu {
    display: block;
  }
}

.Navbar_Mobile_Menu {
  position: relative;
  z-index: 2;
  justify-content: flex-end;
  padding-right: 20px;
}
.Navbar_Mobile_Menu i {
  cursor: pointer;
  font-size: 2.1em;
  background-color: #fff;
  color: #3a3b3c;
  padding: 5px;
  border-radius: 10px;
}
.Navbar_Mobile_Menu .CloseMenuMobile {
  display: none;
}

.Navbar_Mobile_Menu--ActiveMobile .IconMenuMobile {
  display: none;
}
.Navbar_Mobile_Menu--ActiveMobile .CloseMenuMobile {
  display: flex;
}

.Navbar_Mobile {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  background-color: #3a3b3c;
  position: fixed;
  z-index: 1;
  top: 0px;
  padding-top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
}

.Navbar_Mobile--ActiveMobile {
  display: flex;
}

.Navbar_Mobile_MenuOptions ul {
  margin-left: 20px;
  flex-direction: column;
  align-items: flex-start;
}
.Navbar_Mobile_MenuOptions ul li {
  margin: 20px 0;
}

.Navbar_Mobile_MenuActions ul {
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
}
.Navbar_Mobile_MenuActions ul li {
  width: 100%;
}
.Navbar_Mobile_MenuActions ul li a {
  width: 95%;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
}
.Navbar_Mobile_MenuActions ul li:first-child a {
  border: 2px solid #fff;
}
.Navbar_Mobile_MenuActions ul li:last-child {
  margin-top: 10px;
}
.Navbar_Mobile_MenuActions ul li:last-child a {
  background-color: #fff;
  color: #3a3b3c;
}

.Navbar_MenuOptions {
  padding-left: 10px;
}

.Navbar_MenuActions ul li:last-child {
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
}
.Navbar_MenuActions ul li:last-child a {
  font-weight: 600;
  color: #e94345;
}

.PrincipalBoxContent {
  position: relative;
  background-size: cover;
  background-position: center bottom;
  background-repeat: repeat-x;
  margin-top: -2px;
}
@media screen and (max-width: 768px) {
  .PrincipalBoxContent {
    flex-direction: column;
  }
}

.BoxContent {
  width: 100%;
  min-height: calc(100vh - 140px);
}
@media screen and (max-width: 768px) {
  .BoxContent {
    flex-direction: column;
  }
}

.Principal_BoxImage {
  padding: 0 20px;
}
.Principal_BoxImage .Principal_Image {
  width: 300px;
}
@media screen and (max-width: 768px) {
  .Principal_BoxImage .Principal_Image {
    width: 95%;
  }
}

.Principal_CTA {
  flex-direction: column;
}
.Principal_CTA h2 {
  text-align: center;
  font-weight: 600;
  font-size: 1.8em;
  color: #fff;
  max-width: 70%;
}
.Principal_CTA a {
  text-align: center;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #fff;
  color: #e94345;
  font-weight: 600;
  width: 60%;
  font-size: 1.5em;
}
@media screen and (max-width: 768px) {
  .Principal_CTA {
    margin: 30px 0;
    padding: 0 10px;
  }
  .Principal_CTA h2 {
    max-width: 100%;
  }
  .Principal_CTA a {
    margin-top: 20px;
    width: 80%;
  }
}

.BoxContentSecondary {
  min-height: 650px;
}
@media screen and (max-width: 768px) {
  .BoxContentSecondary {
    justify-content: flex-start;
    min-height: none;
  }
}

.BoxContent_CTA {
  width: 60%;
  flex-direction: column;
  text-align: center;
}
.BoxContent_CTA h2 {
  font-weight: 700;
  font-size: 1.8em;
  color: #3a3b3c;
  max-width: 70%;
}
.BoxContent_CTA h2 b {
  font-weight: inherit;
  color: #ff4747;
}
.BoxContent_CTA p {
  max-width: 70%;
}
@media screen and (max-width: 768px) {
  .BoxContent_CTA {
    width: 100%;
  }
  .BoxContent_CTA h2 {
    max-width: 95%;
  }
  .BoxContent_CTA p {
    max-width: 90%;
  }
}
.BoxContent_CTA a {
  border-radius: 10px;
  background-color: #ff4747;
  margin-top: 20px;
  color: #fff;
  width: 50%;
  min-width: 300px;
}
@media screen and (max-width: 768px) {
  .BoxContent_CTA a {
    width: 95%;
  }
}
.BoxContent_CTA a i {
  background-color: #e63c3f;
}
.BoxContent_CTA .BoxContent_CTA_TextBold {
  font-weight: 600;
}

.BoxContent_CTA_Image {
  padding: 0 10px;
  position: relative;
  width: 280px;
  height: 600px;
}
@media screen and (max-width: 768px) {
  .BoxContent_CTA_Image {
    padding: 0;
    margin-top: 30px;
  }
}
.BoxContent_CTA_Image img {
  position: absolute; /* Overlaps images */
  left: 0;
  width: 100%;
  opacity: 0; /* Initially hidden */
  transition: opacity 1s ease-in-out; /* Smooth transition */
}
.BoxContent_CTA_Image img:first-child {
  left: 20px;
  animation: fade-in-out 12s infinite; /* Animation for image 1 */
}
.BoxContent_CTA_Image img:last-child {
  top: 120px;
  animation: fade-in-out 12s infinite 6s; /* Animation for image 2, delayed by 2s */
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.TitleNextContent {
  color: #3a3b3c;
  text-align: center;
  font-weight: 700;
  font-size: 2em;
}
@media screen and (max-width: 768px) {
  .TitleNextContent {
    margin-bottom: 40px;
    font-size: 1.5em;
  }
}

.BoxContentExploreCatalogo {
  min-height: 100%;
  margin: 30px 0;
}
@media screen and (max-width: 768px) {
  .BoxContentExploreCatalogo {
    display: none;
  }
}

.BoxContent_CategorySelection {
  flex-direction: column;
  min-width: 380px;
  width: 100%;
  max-width: 600px;
}

.ButtonCategory, .ButtonCategoryMobile {
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.42, 0, 0.58, 1); /* Duración: 0.5s, Curva personalizada */
  width: 350px;
  min-width: 300px;
  height: 70px;
  border: 0;
  background-color: transparent;
  color: #a3a3a3;
  font-weight: 400;
  letter-spacing: 0.6px;
  border-bottom: 2px solid #eaeaea;
}
.ButtonCategory span, .ButtonCategoryMobile span {
  font-size: 1.5em;
  padding-left: 20px;
  text-align: start;
  width: 100%;
  font-weight: inherit;
}
.ButtonCategory i, .ButtonCategoryMobile i {
  width: 70px;
  font-size: 3em;
}

.ButtonCategory--Active, .ButtonCategoryMobile--Active {
  border-radius: 5px;
  border-bottom: 0;
  font-weight: 500;
  background-color: #ff4747;
  color: #fff;
  box-shadow: 0px -12px 12px -12px rgba(0, 0, 0, 0.2509803922), 0px 12px 12px -12px rgba(0, 0, 0, 0.2509803922);
}
.ButtonCategory--Active i, .ButtonCategoryMobile--Active i {
  animation: arrow-movement 1.8s ease-in-out infinite;
}

@keyframes arrow-movement {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
  100% {
    transform: translateX(0);
  }
}
.BoxContent_CategoryBoxImage img {
  display: none;
  width: 450px;
}
.BoxContent_CategoryBoxImage .CategoryImage--Active {
  display: flex;
}

.BoxContentMobileExploreCatalogo {
  flex-direction: column;
  display: none;
}
@media screen and (max-width: 768px) {
  .BoxContentMobileExploreCatalogo {
    display: flex;
  }
}

.ButtonCategoryMobile {
  min-height: 70px;
  width: 95%;
}
.ButtonCategoryMobile i {
  font-size: 2em;
}

.ButtonCategoryMobile--Active i {
  font-size: 3.5em;
  animation: arrow-movement-mobile 1.8s ease-in-out infinite;
}

.CategoryImageMobile {
  width: 100%;
  height: 0;
  overflow: hidden;
}
.CategoryImageMobile img {
  width: 100%;
  max-width: 100vw;
}

.CategoryImageMobile--Active {
  height: 100%;
  margin: 25px 0;
}

@keyframes arrow-movement-mobile {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}
.TitleNextContentPlan {
  background-color: #f3f3f3;
  padding: 5% 0;
  margin: 0;
}

.BoxContentPlan {
  padding-top: 20px;
  height: 100%;
  background-color: #f3f3f3;
}
@media screen and (max-width: 768px) {
  .BoxContentPlan {
    display: none;
  }
}

.ContentPlanDesktop {
  background-color: transparent;
  margin: 30px 0;
}

.plan {
  width: 280px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2509803922);
  transform: translateY(20px);
}
.plan:nth-child(2) {
  transform: translateY(-20px);
  z-index: 1;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2509803922);
}
.plan:nth-child(2) .PlanHeader {
  background-color: #ff9a00;
}

.PlanHeader {
  position: relative;
  flex-direction: column;
  border-radius: 10px;
  padding: 5px 0;
  width: 100%;
  background-color: #ff4747;
}
.PlanHeader h3 {
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 1.4em;
}

.PlanPopularText {
  position: fixed;
  top: -24px;
  box-shadow: 0 0 15px #ff4747;
  border-radius: 5px;
  padding: 5px 0;
  text-align: center;
  width: 140px;
  color: #fff;
  font-size: 0.9em;
  background-color: #ff4747;
}

.ContentPrice {
  color: #fff;
  text-align: center;
  height: 60px;
  margin: 10px 0;
}
.ContentPrice .currency {
  font-size: 1.1em;
  align-self: flex-start;
  font-weight: 500;
}
.ContentPrice .price {
  font-size: 4em;
  font-weight: 700;
  margin: 0 2px;
}
.ContentPrice .period {
  font-size: 0.9em;
  font-weight: 500;
  align-self: flex-end;
}

.ContentPlanList, .ContentPlanTrialList, .ContentPlanListMobile {
  padding: 10px 0;
}
.ContentPlanList ul li, .ContentPlanTrialList ul li, .ContentPlanListMobile ul li {
  justify-content: flex-start;
  padding: 0 5px;
  list-style: none;
  margin: 5px 0;
}
.ContentPlanList ul li i, .ContentPlanTrialList ul li i, .ContentPlanListMobile ul li i {
  margin-right: 5px;
  font-size: 1.8em;
  color: #757575;
}
.ContentPlanList ul li span, .ContentPlanTrialList ul li span, .ContentPlanListMobile ul li span {
  font-size: 0.9em;
  color: #757575;
  font-weight: 400;
}

.ButtonGoPlan, .buttonGoPlanTrial, .ButtonGoPlanMobile {
  background-color: #ff4747;
  color: #fff;
  height: 50px;
  justify-content: flex-start;
  border-radius: 8px;
}
.ButtonGoPlan i, .buttonGoPlanTrial i, .ButtonGoPlanMobile i {
  border-radius: 8px;
  width: 50px;
  font-size: 1.2em;
  background-color: #e63c3f;
}
.ButtonGoPlan span, .buttonGoPlanTrial span, .ButtonGoPlanMobile span {
  font-weight: 500;
  text-align: center;
  font-size: 0.8em;
}

.BoxContentMobilePlan {
  display: none;
}
@media screen and (max-width: 768px) {
  .BoxContentMobilePlan {
    display: block;
  }
}

.ButtonSelectionPlan {
  background-color: transparent;
  border: 0;
  border-top: 1px solid #a3a3a3;
  border-bottom: 1px solid #a3a3a3;
  border-right: 1px solid #a3a3a3;
  height: 50px;
  width: 100%;
  color: #757575;
  font-weight: 500;
  font-size: 1em;
}
.ButtonSelectionPlan:last-child {
  border-right: 0;
}

.ButtonSelectionPlan--Active {
  background-color: #ff4747;
  color: #fff;
  border: 1px solid #ff4747;
}

.PlanHeaderRecurrence {
  justify-content: space-around;
  margin: 20px 0;
}
.PlanHeaderRecurrence .period {
  text-align: center;
  font-size: 1.8em;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #757575;
}
.PlanHeaderRecurrence .PlanHeaderMobilePopular {
  color: #fff;
  padding: 10px 25px;
  border-radius: 5px;
  box-shadow: 0 0 10px #ff4747;
  background-color: #ff4747;
}
.PlanHeaderRecurrence .PlanHeaderMobilePopular--Inactive {
  display: none;
}

.PlanHeaderContentPrice {
  color: #757575;
  text-align: center;
  height: 60px;
}
.PlanHeaderContentPrice .currency {
  font-size: 1.3em;
  align-self: flex-start;
  font-weight: 500;
}
.PlanHeaderContentPrice .price {
  font-size: 5em;
  font-weight: 700;
  margin: 0 10px;
}
.PlanHeaderContentPrice .period {
  font-size: 1em;
  font-weight: 500;
  align-self: flex-end;
}

.ContentPlanListMobile ul li {
  margin: 10px 0;
  padding-left: 15px;
}
.ContentPlanListMobile ul li span {
  font-size: 1em;
}

.BoxButtonPlan {
  width: 100%;
}

.ButtonGoPlanMobile {
  width: 98%;
  color: #fff;
  box-shadow: 0 0 10px #ff4747;
}

.BoxContentFreeTrial {
  justify-content: space-evenly;
  background-color: #f3f3f3;
  height: 100%;
  min-height: auto;
  padding: 20px 0;
}
@media screen and (max-width: 768px) {
  .BoxContentFreeTrial {
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .ContentCardPlan {
    width: 100%;
  }
}

.CardTrialPlan {
  flex-direction: column;
  width: 300px;
  min-width: 300px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2509803922);
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .CardTrialPlan {
    width: 90%;
  }
}

.HeaderCardTrial {
  background-color: #3a3b3c;
  color: #fff;
  width: 100%;
  border-radius: 10px;
  height: 100px;
}
.HeaderCardTrial h3 {
  width: 100%;
  font-weight: 600;
  font-size: 2em;
}

.ContentPlanTrialList {
  width: 100%;
}

.buttonGoPlanTrial {
  width: 100%;
}

.ContentImagenFreeTrial {
  min-width: 450px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .ContentImagenFreeTrial {
    min-width: 0;
    margin: 10px 0;
    min-height: 450px;
    width: 100%;
  }
}

.ImagenFreeTrial {
  min-width: 450px;
  position: absolute;
  opacity: 0;
  animation: fade-in-out 12s infinite; /* Animation for image 2, delayed by 2s */
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrial {
    min-width: 0;
    margin: 30px 0;
    min-height: 350px;
    width: 0px;
  }
}
.ImagenFreeTrial img {
  position: absolute;
  width: 350px;
}
.ImagenFreeTrial img:first-child {
  border-radius: 20px;
  left: 100px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2509803922);
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrial img:first-child {
    left: -125px;
    width: 310px;
  }
}
.ImagenFreeTrial img:last-child {
  top: -150px;
  left: -50px;
  width: 280px;
  animation: img-flotar infinite 2s ease-in-out;
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrial img:last-child {
    width: 220px;
    top: -35px;
    left: -180px;
  }
}

.ImagenFreeTrialSecond {
  min-width: 450px;
  position: absolute;
  opacity: 0;
  animation: fade-in-out 12s infinite 6s;
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrialSecond {
    min-width: 0;
    min-height: 350px;
    width: 0px;
  }
}
.ImagenFreeTrialSecond img {
  position: absolute;
  width: 350px;
}
.ImagenFreeTrialSecond img:first-child {
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2509803922);
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrialSecond img:first-child {
    left: -180px;
  }
}
.ImagenFreeTrialSecond img:last-child {
  top: -230px;
  left: 250px;
  width: 200px;
  animation: img-flotar infinite 2s ease-in-out;
}
@media screen and (max-width: 768px) {
  .ImagenFreeTrialSecond img:last-child {
    width: 200px;
    top: -50px;
    left: -10px;
  }
}

@keyframes img-flotar {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.BoxContentEmail {
  background-color: #3a3b3c;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 150px);
}
@media screen and (max-width: 768px) {
  .BoxContentEmail {
    flex-direction: column;
    min-height: 0;
    height: 500px;
  }
}
.BoxContentEmail .line_left, .BoxContentEmail .line_right {
  position: absolute;
  left: 10px;
  top: 0;
  width: 15px; /* Ajusta el ancho de la línea */
  height: 100%; /* Ajusta la altura de la línea */
  background: repeating-linear-gradient(to bottom, white 0, white 50px, transparent 50px, transparent 65px); /* Crea un patrón de líneas rojas y espacios transparentes */
  clip-path: inset(0 0 0 50%); /* Recorta la mitad derecha del div */
}
@media screen and (max-width: 768px) {
  .BoxContentEmail .line_left, .BoxContentEmail .line_right {
    display: none;
  }
}
.BoxContentEmail .poligon_left, .BoxContentEmail .poligon_right {
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 60px; /* Ajusta el ancho según sea necesario */
  height: 200px; /* Ajusta la altura según sea necesario */
  background-color: #ff4747; /* Color rojo */
  border-radius: 0 80px 80px; /* Crea la curva en la esquina superior derecha */
}
@media screen and (max-width: 768px) {
  .BoxContentEmail .poligon_left, .BoxContentEmail .poligon_right {
    display: none;
  }
}
.BoxContentEmail .line_right {
  left: auto;
  right: 10px;
}
.BoxContentEmail .poligon_right {
  top: -100px;
  right: -5px;
  left: auto;
  border-radius: 0;
  border-radius: 0 0 0 40px;
}

.ContentEmail {
  flex-direction: column;
  color: #fff;
}
.ContentEmail .TitleEmail {
  text-align: center;
  max-width: 500px;
  font-size: 2.1em;
  font-weight: 600;
}
.ContentEmail .TextEmail {
  text-align: center;
  max-width: 500px;
  font-size: 1em;
  font-weight: 400;
}

.ContentEmailInput {
  width: 100%;
  max-width: 450px;
}

.EmailBox {
  position: relative;
  width: 100%;
  border-radius: 5px 7px 7px 5px;
  background-color: #fff;
  height: 60px;
  box-shadow: 0 0 3px #f3f3f3;
}
@media screen and (max-width: 768px) {
  .EmailBox {
    width: 95%;
  }
}
.EmailBox input {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 3px 0 0 3px;
  padding: 0 20px;
  border-radius: 5px 0 0 5px;
  outline: 0;
  color: #757575;
  font-size: 1em;
}
.EmailBox input::placeholder {
  color: #a3a3a3;
}
.EmailBox button {
  box-shadow: 0 0 5px #ff4747;
  cursor: pointer;
  border: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  background-color: #ff4747;
  padding: 0 20px;
  height: 100%;
  width: 120px;
  border-radius: 6px;
}

.EmailBox span {
  position: absolute;
  top: 0;
  left: 1px;
  bottom: 0;
  right: 0;
  width: 335px;
  height: 0px;
  display: block;
  box-sizing: border-box;
}

.EmailBox:hover .EmailBox span::before {
  background-color: transparent;
  box-shadow: none;
}

.EmailBox span:nth-child(1) {
  top: 0px;
  transform: rotate(0deg);
}

.EmailBox span:nth-child(2) {
  top: 60px;
  transform: rotate(180deg);
}

.EmailBox span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ff4747;
  box-shadow: 0 0 5px 1px #ff4747;
  animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.SubtitleEmail {
  font-size: 1em;
  letter-spacing: 1px;
  font-weight: 600;
}

.BoxContentSocialMedia {
  background-color: #ff4747;
  flex-wrap: wrap;
}

.SocialMedia {
  width: 25%;
  height: 90px;
  color: #fff;
  text-decoration: none;
}
.SocialMedia i {
  font-size: 2em;
  margin-right: 10px;
}
.SocialMedia span {
  font-weight: 600;
}
.SocialMedia:hover {
  background-color: #e63c3f;
}
@media screen and (max-width: 768px) {
  .SocialMedia {
    width: 50%;
  }
  .SocialMedia i {
    font-size: 3.2em;
  }
}

footer {
  background-color: #3a3b3c;
}

.footer_1 {
  padding: 30px 0;
  justify-content: space-around;
}
@media screen and (max-width: 768px) {
  .footer_1 {
    flex-direction: column;
  }
}
.footer_1 .FooterImage img {
  width: 250px;
}
@media screen and (max-width: 768px) {
  .footer_1 .FooterContact {
    margin: 20px 0;
  }
}
.footer_1 .FooterContact h3 {
  text-align: center;
  font-size: 1.2em;
  color: #fff;
  font-weight: 500;
  margin-bottom: 10px;
}
.footer_1 .FooterContact a {
  font-size: 0.9em;
  background-color: #ff4747;
  color: #fff;
}
.footer_1 .FooterContact a i {
  font-size: 2.5em;
  background-color: #e63c3f;
}
.footer_1 .FooterContact a span {
  width: 200px;
  text-align: center;
  font-weight: 500;
  font-size: 1.2em;
}

.line_footer {
  margin: 30px 0;
}
.line_footer hr {
  width: 60%;
  height: 2px;
  background-color: #fff;
  border: 0;
}

.footer_2 {
  justify-content: space-around;
  color: #fff;
  font-weight: 500;
  font-size: 0.9em;
  padding: 10px 0;
}
.footer_2 a {
  margin: 20px 0;
  color: #fff;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .footer_2 {
    flex-direction: column;
  }
}