/*Estilos de propiedades generales*/
:root {
    --bg: #960428;/*color principal, menu, botones*/
    --bg1:#F3F3F3;/*color formularios, body*/
    --bg2:#FFFFFF;/*color fondo, inputs, fuentes con fondo principal*/
    --bg3:#333333;/*color de textos y marcos*/
 }
 #Capa_x0020_1 {fill:green;}
 body{
     padding: 0;
     margin: 0;
     font-family: 'Segoe UI',  'Open Sans', 'Helvetica Neue', sans-serif;
     color: var(--bg3);
     background-color: var(--bg1);
     white-space: initial;
     word-wrap:break-word
 }
 a, li, ul{
     text-decoration: none;
     list-style:none;
     color: var(--bg3);
     padding: 0;
 }
 b{
     color: var(--bg2);
 }
 input, select{
     background-color: var(--bg2);
     border: 0;
     border-radius: 2px;
     height: 30px;
     transition: 0.3s;
     padding: 0 2% 0 2%;
     margin: 0;
     outline: none;
 }
 /*Estilos del menu*/
 header{
     width: 96%;
     height: 100px;
     padding: 2%;
     background-color:var(--bg);
 }
 section .aMenu ul{
     width: 100%;
     height: 96%;
     display: grid;
     grid-column-gap: 2%;
     align-items: center;
     margin: 0;
 }
 section .aMenu #ckmenu{
     display: none;
 }
 section .aMenu a, .aMenu b{
   color: var(--bg2);
 }
 section .aMenu .liItenU, .aMenu .liIten0{
     display: none;
 }
 section .aMenu .liIten1{
     grid-column: 1 / span 1;
     grid-row: 1 / span 2;
 }
 section .aMenu .liIten1 img{
     height: 15%;
 }
 section .aMenu .liIten2{
     grid-column: 2 / span 1;
     grid-row: 1;
 }
 section .aMenu .liIten3{
     grid-column: 3 / span 1;
     grid-row: 1;
 }
 section .aMenu .liIten4{
     grid-column: 4 / span 1;
     grid-row: 1;
     text-align: right;
 }
 section .aMenu .liIten5{
     grid-column: 2 / span 1;
     grid-row: 2;
 }
 section .aMenu .liIten6{
     grid-column: 3 / span 2;
     grid-row: 2;
     display: grid;
     align-items: center;
     grid-column-gap: 90%;
     vertical-align: middle;
     align-content: center;
 }
 section .aMenu .liIten6 input{
     grid-column: 1/ span 2;
     grid-row: 1;
 }
 section .aMenu .liIten6 img{
     grid-column: 2/ span 1;
     grid-row: 1;
     cursor: pointer;
 }
 /*Estilos del foot*/
 footer{
     width: 96%;
     background-color:var(--bg);
     color: var(--bg2);
     bottom: 0;
     padding: 2%;
 } 
 footer section {
     display: grid;
     align-items: center;
     grid-column-gap: 30%;
     margin: 0;
     padding: 20px;
 }
 footer section li a{
     color: var(--bg2);
     height: 20px;
     display: flex;
     align-items: center;
     margin-left: 30px;
     margin-top: 10px;
 }
 footer section li img{
     height: 20px;
     width: 20px;
     margin-right: 2%;
 }
 section .footLeft{
     grid-column: 1 /  2;
     grid-row: 1;
 }
 section .footRight{
     grid-column: 2 / 2;
     grid-row: 1;  
 }
 section .footFinal{
     margin-top: 20px;
     grid-column: 1 / span 2;
     grid-row: 2;
     text-align: center;
 }
 /*Estilos de los aSegmentos*/
 section .aSegmento{
     width: 90%;
     margin: 0 auto;
     background-color:var(--bg2);
     padding: 2%;
 }
 section .aSegmento b{
     color: var(--bg); 
 }
 section .aSegmento p{
     margin: 0 10% 0 10%;
     text-align: justify;
 }
 section .aSegmento .uMapa{
     display: flex;
     align-items: center;
     grid-column-gap: 5px;
 }
 section .aSegmento .uMapa .liMapa img{
     height: 120px;
 }
 section .aSegmento .uMapa .asDecripcion{
     font-size: 90%;
     padding: 1%;
 }
 /*Estilos del deslizador de imagenes*/
 section .aSegmento .asDeslizador{
     width: 100%;
     height: 250px;
     border-radius: 2px;
     color:var(--bg2);
     overflow: hidden;
     margin-bottom: 50px; 
 }
 section .aSegmento .asDeslizador .ulDeslizador li {
     list-style: none;
     position: absolute; 
     margin-left:auto;
     margin-right:auto;
     margin-bottom: 10px;
     left:0;
     right:0; 
     width: 25%;
 }
 section .aSegmento .asDeslizador .ulDeslizador input {
     display: none;
 }
 section .aSegmento .asDeslizador .ulDeslizador label {
     background-color: var(--bg3);
     display: block;
     bottom: -20px;
     cursor: pointer;
     height: 15px;
     width: 15px;
     border-radius: 100%;
     position: absolute;
     transition: 0.4s;
     z-index: 10; 
 }
 section .aSegmento .asDeslizador  .ulDeslizador input:checked + label {
     background-color: var(--bg);
     display: block;
     transition: 0.4s;
 }
 section .aSegmento .asDeslizador  .ulDeslizador input:checked + label:hover {
     transition: 0.4s;
     transform:scale(1.5);
     background-image: url("/public/img/zoom.svg");
     background-size: 15px;
     background-position: center;
     background-repeat: no-repeat;
     padding: 5px;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(1) label {
     left: 20%;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(2) label {
     left: 30%;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(3) label {
     left: 40%;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(4) label {
     left: 50%;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(5) label {
     left: 60%;
 }  
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(6) label {
     left: 70%;
 }  
 section .aSegmento .asDeslizador  .ulDeslizador li:nth-child(7) label {
     left: 80%;
 }  
 section .aSegmento .asDeslizador  .ulDeslizador img {
     opacity: 0; 
     height: 250px;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li input:checked ~ img {
     opacity: 1;
     transition: 0.25s;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li input:active ~ img{
     transform:scale(2);
     z-index: 15;
     transition: 0.25s;
 }
 /*Estilos de anectotas*/
 section .aSegmento .asAnecdota{
    height: 250px;
    width: 96%;
    margin: 0 auto;
    background-color: var(--bg1); 
    display: flex;
    grid-column-gap: 2%;
    overflow-y: hidden;
    align-items: center;
    padding: 2%;
 }
 section .aSegmento .asAnecdota .ulAnecdotas{
     height: 80%;
     width: 300px;
     background-color: var(--bg2);
     display: grid;
     align-items: center;
     padding: 2%;
     border-radius: 2px;
     grid-column-gap: 2px;
 }
 section .aSegmento .asAnecdota .ulAnecdotas .liAnecdota{
     grid-column: 1 /  2;
     grid-row: 1; 
     height: 100px;
     width: 150px;
     margin: 0 auto;
     display: flex;
     align-items: center;
 }
 section .aSegmento .asAnecdota .ulAnecdotas .liAnecdota img{
     height: 90%;
 }
 section .aSegmento .asAnecdota .ulAnecdotas .liValoracion{
     grid-column: 2 /  2;
     grid-row: 1;
     height: 100px;
     width: 150px;
     display: flex;
     align-items: center;
     margin: 0 auto;
     padding: 2%;
 }
 section .aSegmento .asAnecdota .ulAnecdotas .liValoracion img{
    width: 100%;
 }
 section .aSegmento .asAnecdota .ulAnecdotas .liComentario{
     grid-column: 1 /span 2;
     grid-row: 2; 
     width: 100%;
     height: 100%;
     padding: 2%;
 } 
 /*Estilos de videos*/
 section .aSegmento .asVideo{
     height: 350px;
     width: 50%;
     cursor: pointer;
     margin: 0 auto;
     padding: 2%;
     background-image: url(/public/img/cursos.svg);
     background-size: 90% 90%;
     background-repeat: no-repeat;
     background-position: center;
 }
 /*Estilos menu de los formularios*/
 section .aSegmento .menuServicios{
     width: 94%;
     height: 60px;
     margin: 0 auto;
     display: grid;
 }
 section .aSegmento .menuServicios ul{
     height: 80%;
     margin: 0;
     display: grid;
     grid-column-gap: 1%;
     text-align: center;
     border-radius: 2px;   
 }
 section .aSegmento .menuServicios .liServicio1{
     grid-column: 1 / span 1;
     grid-row: 1;
     background-color:var(--bg1);
     padding-top: 10px;
 }
 section .aSegmento .menuServicios .liServicio1:hover{
     background-color: var(--bg2);
 }
 section .aSegmento .menuServicios .liServicio2{
     grid-column: 2 / span 1;
     grid-row: 1;
     background-color:var(--bg1);
     padding-top: 10px;
 }
 section .aSegmento .menuServicios .liServicio2:hover{
     background-color: var(--bg2);
 }
 section .aSegmento .menuServicios .liServicio3{
     grid-column: 3 / span 1;
     grid-row: 1;
     background-color:var(--bg1);
     padding-top: 10px;
 }
 section .aSegmento .menuServicios .liServicio3:hover{
     background-color: var(--bg2);
 }
 /*Estilos de los formularios*/
 section .aSegmento .asFormulario{
     margin: 0 auto;
     background-color: var(--bg1);
     width: 90%;
     padding: 2%;
     border-radius: 2px; 
     overflow-x: hidden;
 }
 section .aSegmento .asFormulario h5{
     margin: 4% 10% 1% 10%;
     width: 80%;
 }
 section .aSegmento .asFormulario .inCampos{
     margin: 0 10% 0 10%;
     width: 80%;   
 }
 section .aSegmento .asFormulario input[type=radio]{
     margin-left: 10%;
     vertical-align: middle;
     width: 20px;
     height: 20px;
     transition: 0.3s;
 }
 section .aSegmento .asFormulario input[type=submit]{
     background-color: var(--bg);
     color: var(--bg2);
     cursor: pointer;
     width: 100%;
     margin: 0 auto;
 }
 section .aSegmento .asFormulario select{
   width: 84%;
   margin: 0 10% 0 10%;
 }
 section .aSegmento .asFormulario .campo-checkbox{
     width: 400px;
     display: inline-block;
     position: relative;
     padding-left: 30px;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     font-size: 15px;
     transition: .3s;
     margin: 0 10% 1% 10%; 
 }
 section .aSegmento .asFormulario .campo-checkbox input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }
 section .aSegmento .asFormulario .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     width: 20px;
     background-color: var(--bg2);
     border-radius: 2px;
 }
 section .aSegmento .asFormulario .campo-checkbox:hover input ~ .checkmark {
     background-color: #ccc;
 }
 section .aSegmento .asFormulario .campo-checkbox input:checked ~ .checkmark {
     background-color:var(--bg);
 }
 section .aSegmento .asFormulario .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }
 section .aSegmento .asFormulario .campo-checkbox input:checked ~ .checkmark:after {
     display: block;
 }
 section .aSegmento .asFormulario .campo-checkbox .checkmark:after {
     left: 5px;
     top: 3px;
     width: 5px;
     height: 10px;
     border: solid var(--bg2);
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 section .aSegmento .asFormulario .ulCurso{
     margin: 0 10% 0 10%;
     width: 80%;
     display: grid;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
     text-align: center;
     align-items: center;
 }
 section .aSegmento .asFormulario .ulCurso li:nth-child(1){
     grid-column: 1 / span 1;
     grid-row: 1;
     background-color: var(--bg2);
     padding: 2%;
     border-radius: 2px;
     cursor: pointer;
 }
 section .aSegmento .asFormulario .ulCurso li:nth-child(2){
     grid-column: 2 / span 1;
     grid-row: 1;
     background-color: var(--bg2);
     padding: 2%;
     border-radius: 2px;
     cursor: pointer;
 }
 section .aSegmento .asFormulario .ulCurso li:nth-child(3){
     grid-column: 1 / span 1;
     grid-row: 2;
     background-color: var(--bg2);
     padding: 2%;
     border-radius: 2px;
     cursor: pointer;
 }
 section .aSegmento .asFormulario .ulCurso li:nth-child(4){
     grid-column: 2 / span 1;
     grid-row: 2;
     background-color: var(--bg2);
     padding: 2%;
     border-radius: 2px;
     cursor: pointer;
 }
 section .aSegmento .asFormulario .ulCurso li:nth-child(5){
     grid-column: 1 / span 2;
     grid-row: 3;
     background-color: var(--bg2);
     padding: 1%;
     border-radius: 2px;
     cursor: pointer;
 }
 section .aSegmento .asFormulario .ulCursoPromo{
     margin: 0 10% 0 10%;
     width: 80%;
     display: flex;
     grid-column-gap: 5px;
     text-align: center;
     align-items: center;
     overflow-y: hidden;
     padding: 2% 0 2% 0;
 }
 section .aSegmento .asFormulario .ulCursoPromo li{
     height: 100%;
     display: block;
     align-items: center;
     background-color: var(--bg2);
     padding: 1%;
     margin: 0 2% 0 2%;
     border-radius: 2px;
 }
 section .aSegmento .asFormulario .ulCursoPromo li .sCursoPromo{
 color: var(--bg);
 }
 section .aSegmento .asFormulario .ulCursoPromo li .uBotonPromo{
   color: var(--bg);
   cursor: pointer;
 }
 @media screen and (max-width: 1024px) {
 /*Estilos del menu*/
 header{
     height: auto;   
 }
 section .aMenu ul{
     width: 96%;
     padding: 2%;
     display: table;
 }
 section .aMenu ul .mm{
     display: none;
     margin: 5% 0 5% 0;
 }
 section .aMenu ul label{
     display: table-cell;
     background-position: center;
     background-size: 100% 100%;
     height: 30px;
     width: 30px;
     background-image: url(/public/img/menuOn.svg);
     background-repeat: no-repeat;
     margin-right: 2%;
 }
 section .aMenu ul #ckmenu:checked ~ label{
     background-image: url(/public/img/menuOff.svg);
     background-position: center;
     background-size: 100% 100%;
     display: inline-flex;
     float: left;
     vertical-align: middle;
     height: 30px;
     width: 30px;
 }
 section .aMenu ul #ckmenu:checked ~ .mm{
     transition: 0.3s;
     display: block;
 }
 section .aMenu ul #ckmenu:checked ~ .liIten0{
     transition: 0.3s;
     display: none;
 }
 section .aMenu ul #ckmenu:checked ~ .liIten6{
     transition: 0.3s;
     display: grid;
     align-items: center;
     grid-column-gap: 90%;
     vertical-align: middle;
     align-content: center;
 }
 section .aMenu ul .liIten0{
     display: table-cell;
     vertical-align: middle;
     grid-column: 2 / 3;
     grid-row: 1;
     height: 30px;
     margin: 0 auto;
 }
 section .aMenu ul .liItenU{
     display: table-cell;
     vertical-align: middle;
     grid-column: 3 / 3;
     grid-row: 1;
     background-image: url(/public/img/login.svg);
     background-position: center;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     height: 30px;
     width: 30px;
     float: right;
 }
 section .aMenu ul, .aMenu ul .liIten4{
     text-align: center;
 }  
 /*Estilos del foot*/
 footer section{
     display: inline-block;
     height: auto;
     padding: 2%;
     overflow: hidden;
     width: 96%;
 }
 /*Estilos de los segmentos*/
 section .aSegmento{
     width: 96%;   
 }
 /*Estilos del deslizador de imagenes*/
 section .aSegmento .asDeslizador .ulDeslizador li {
     display: table;
     width: 50%;
 }
 section .aSegmento .asDeslizador  .ulDeslizador li img {
     opacity: 0;    
     width: 80%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
     left: auto;
     right: auto;
     display: table-cell;
 }
 }
 @media screen and (max-width: 550px) {
 /*Estilos del deslizador de imagenes*/
 section .aSegmento .asDeslizador .ulDeslizador li {
     width: 100%;
 }
 /*Estilos de los aSegmentos*/
 section .aSegmento .uMapa{
     display: block;
 }
 }