.header-activacion-renovacion {
   padding: 40px 0;


   border-bottom-style: double;
   border-bottom-color: #f5d588;
   border-bottom-width: 10px;

 }


 .header-activacion-renovacion .logo {
   width: 300px;
   height: auto;
   margin: 0 auto;
   display: block;
   margin-bottom: 20px;
 }


 .hero {


   border-bottom: #f5d588 solid 10px;
   border-top-color: #f5d588;
   border-top-width: 10px;

   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   color: #fff;
   background: rgba(24, 25, 46, 1);
 }


 .hero .bienvenido {
   font-size: 3.4rem;
 }

 .hero .title_cuenta {
   font-size: 2.9rem;
   color: #fff;
   font-weight: 700;


 }

 .hero .title_protector {
   font-family: 'Cinzel-Bold';
   font-size: 2.8rem;
   font-weight: 700;
   color: #f5d588;
   line-height: 3rem;

 }


 .hero .title_efos {
   font-family: 'Aeternum';
   font-size: 3.5rem;
   line-height: 3.5rem;
   color: #fff;
   font-weight: lighter;
 }

 .hero .linea {
   height: 180px;
   width: 2px;
   border-left: silver solid 5px;
   border-left-style: dotted;

 }

 .hero .info {
   font-size: 1.3rem;
   font-weight: lighter;
 }

 .hero .validacion {
   font-size: 2.5rem;

 }

 @media (max-width:1500px) {
   .hero .title_cuenta {
     font-size: 2rem;
     line-height: 2.1rem;
   }

   .hero .title_protector {
     font-size: 2rem;
     line-height: 1.9rem;
   }

   .hero .title_efos {
     font-size: 2.5rem;
     line-height: 2.5rem;
   }
 }

 @media (max-width:1200px) {
   .hero .linea {
     display: none;
   }
 }


 @media (max-width:576px) {
   .hero .bienvenido {
     font-size: 3.2rem;
     text-align: justify;
   }

   .hero .validacion {
     font-size: 1.8rem;
      
   }
 }





 /*--------------------------------------------------------------
# Activacion y Renovacion
--------------------------------------------------------------*/

 .activacion-renovacion {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom bottom;
   background: rgb(226, 227, 248);
   color: var(--color-navy-blue);


 }

 .activacion-renovacion .line {
   width: 20px;
   height: 100%;
   border-left: 8px solid #abadbb;
   border-left-style: dotted;
   min-height: 30px;


 }

 .activacion-renovacion .line-dorado {
   border-left: 8px solid #9a8439;
   border-left-style: dotted;
 }

 .activacion-renovacion .text-izquierdo {
   font-size: 1.5rem;

 }

 .activacion-renovacion .text-recho {
   font-size: 1.2rem;
 }


 .activacion-renovacion .help {
   width: 100%;
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: bold;
 }

 .activacion-renovacion .help span {
   color: #99843a;
   font-size: 2.2rem;
   line-height: 2rem;
 }

 .activacion-renovacion .text-youtube {
   font-size: 1.8rem;
   font-weight: bold;
 }


 .activacion-renovacion .text-evaluacion {
   font-size: 2rem;

   font-weight: bold;
 }




 /* Rating */

 .activacion-renovacion .rating {
   display: flex;
   width: 100%;
   justify-content: center;
   overflow: hidden;
   flex-direction: row-reverse;

   position: relative;
 }

 .activacion-renovacion .rating-0 {
   filter: grayscale(100%);
 }

 .activacion-renovacion .rating>input {
   display: none;
 }

 .activacion-renovacion .rating>label {
   cursor: pointer;
   width: 80px;
   height: 80px;
   margin-top: auto;
   background-image: url("https://protectorfiscal.mx/wp-content/themes/protector_fiscal/activacion-renovacion/img/estrella1.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 76%;
   transition: .3s;
 }

 .activacion-renovacion .rating>input:checked~label,
 .activacion-renovacion .rating>input:checked~label~label {
   background-image: url("https://protectorfiscal.mx/wp-content/themes/protector_fiscal/activacion-renovacion/img/estrella2.png");
 }


 .activacion-renovacion .rating>input:not(:checked)~label:hover,
 .activacion-renovacion .rating>input:not(:checked)~label:hover~label {
   background-image: url("https://protectorfiscal.mx/wp-content/themes/protector_fiscal/activacion-renovacion/img/estrella2.png");
 }

 .activacion-renovacion .emoji-wrapper {
   width: 100%;
   text-align: center;
   height: 100px;
   overflow: hidden;
   position: absolute;
   top: 0;
   left: 0;
 }

 .activacion-renovacion .emoji-wrapper:before,
 .activacion-renovacion .emoji-wrapper:after {
   content: "";
   height: 15px;
   width: 100%;
   position: absolute;
   left: 0;
   z-index: 1;
 }

 .activacion-renovacion .emoji-wrapper:before {
   top: 0;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
 }

 .activacion-renovacion .emoji-wrapper:after {
   bottom: 0;
   background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
 }

 .activacion-renovacion .emoji {
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: .3s;
 }

 .activacion-renovacion .emoji>svg {
   margin: 15px 0;
   width: 70px;
   height: 70px;
   flex-shrink: 0;
 }

 #rating-1:checked~.emoji-wrapper>.emoji {
   transform: translateY(-100px);
 }

 #rating-2:checked~.emoji-wrapper>.emoji {
   transform: translateY(-200px);
 }

 #rating-3:checked~.emoji-wrapper>.emoji {
   transform: translateY(-300px);
 }

 #rating-4:checked~.emoji-wrapper>.emoji {
   transform: translateY(-400px);
 }

 #rating-5:checked~.emoji-wrapper>.emoji {
   transform: translateY(-500px);
 }

 .activacion-renovacion .feedback {

   background-color: transparent;
   width: 100%;

   border-radius: 8px;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: center;

 }


 /*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
 .activacion-renovacion {
   background: rgba(243, 243, 243, 1);
 }

 .activacion-renovacion .php-email {
   width: 100%;
   background: rgba(243, 243, 243, 1);
   padding: 30px;
   border-radius: 20px;
   border: 3px solid rgba(128, 128, 128, 0.2);
   color: var(--color-navy-blue);

   box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.66);
   -webkit-box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.66);
   -moz-box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.66);
 }

 .activacion-renovacion .php-email .form-group {
   padding-bottom: 8px;
 }

 .activacion-renovacion .php-email .validate {
   display: none;
   color: red;
   margin: 0 0 15px 0;
   font-weight: 400;
   font-size: 13px;
 }

 .activacion-renovacion .php-email .error-message {
   display: none;
   color: #fff;
   background: #ed3c0d;
   text-align: left;
   padding: 15px;
   font-weight: 600;
 }

 .activacion-renovacion .php-email .error-message br+br {
   margin-top: 25px;
 }

 .activacion-renovacion .php-email .sent-message {
   display: none;
   color: #fff;
   background: #18d26e;
   text-align: center;
   padding: 15px;
   font-weight: 600;
 }

 .activacion-renovacion .php-email .loading {

   background: transparent;
   text-align: center;
   padding: 15px;
 }

 .activacion-renovacion .php-email .loading:before {
   content: "";
   display: inline-block;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   margin: 0 10px -6px 0;
   border: 3px solid var(--color-dorado-oscuro);
   border-top-color: transparent;
   -webkit-animation: animate-loading 1s linear infinite;
   animation: animate-loading 1s linear infinite;
 }

 .activacion-renovacion .php-email .form-check-input {
   scale: 2.2;
 }

 .activacion-renovacion .php-email .form-check-input,
 .activacion-renovacion .php-email select,
 .activacion-renovacion .php-email input[type="email"],
 .activacion-renovacion .php-email input[type="tel"],
 .activacion-renovacion .php-email textarea {
   border-radius: 4px;
   box-shadow: none;
   font-size: 14px;
 }


 .activacion-renovacion .php-email select,
 .activacion-renovacion .php-email input[type="text"],
 .activacion-renovacion .php-email input[type="email"],
 .activacion-renovacion .php-email input[type="tel"] {
   height: 44px;
 }

 .activacion-renovacion .php-email textarea {
   padding: 10px 12px;
 }

 .activacion-renovacion .php-email button[type="submit"] {

   font-variant: small-caps;
   border: 0;
   padding: 10px 32px;
   font-weight: bold;
   color: var(--color-navy-blue);
   transition: 0.4s;
   border-radius: 50px;
   border: 2px solid white;
   background: #c8b05a;
   width: 100%;
   box-shadow: 7px 8px 28px -4px rgba(0, 0, 0, 0.75);
   -webkit-box-shadow: 7px 8px 28px -4px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 7px 8px 28px -4px rgba(0, 0, 0, 0.75);
 }

 .activacion-renovacion .php-email button[type="submit"]:hover {
   background: var(--color-dorado);
 }