* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}




.btn-sobre{
	position:fixed;
	width:90px;
	height:90px;
	bottom:20px;
	left:20px;

	/*background-color:#ffffff;*/
	color:#1E12E6;
	/*border-radius:50px;*/
	text-align:center;
  font-size:60px;
	/*box-shadow: 2px 2px 3px #999;*/
  z-index:100;
}

.float:hover {
	text-decoration: none;
/*	color: #25d366;*/
 /* background-color:#fff;*/
}

.my-float{
	margin-top:10px;
}
.p{
	font-size:10;
}

/**** POPUP *****/
/** Fondo*/
.overlay{
    background: rgba(39, 77, 243, 0.945);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.overlay.active {
	visibility: visible;
}
/* Moodal*/
.popup{
    background: #dfddd8;
    box-shadow: 0px 0px 5px 8px rgba(0, 0, 0, 0.3);
    border-radius: 9px;
    font-family: 'Montserrat', sans-serif;
    padding: 26px;
    text-align: center;
	width: 630px;
	height: 700px;

	transition: .2s ease all;
	transform: scale(0.7);
	opacity: 0;
	
}
.popup::after{
	content: "";
	display: table;
	clear: both;
}
/*BOton cerrar*/
.popup .btn-cerrar-popup{
	opacity: 0;
   font-size: 16px;
   line-height: 10px;
   display: block;
   float:  right;
   transition: .3s ease all;
   color: rgba(20, 18, 18, 0.945); 
}

.popup .btn-cerrar-popup:hover{
color: rgba(233, 17, 17, 0.76);
}
/*Titulo*/
.popup h3{
    font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 100; 
}
/* etiqueta selecciona una opcion y datos del interesado*/
.popup h5[id=lblselect] {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: -3px;
	opacity: 0; 
	text-align: center;
	opacity: 0;
    width: 100%;
	margin-top: -1px;
	padding: 12px 12px 12px 0;
}
.popup h5[id=lblinf] {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: -26px;
	opacity: 0; 
	text-align: center;
	opacity: 0;
    width: 100%;
	margin-top: 6px;
	padding: 12px 12px 12px 0;
}
/* div de columnas*/
.popup .col-10{
	float: left;
	width: 10%;
	margin-top: 6px;
}
.popup .col-20{
	float: left;
	width: 20%;
	margin-top: 6px;
}
.popup .col-25{
	float: left;
	width: 25%;
	margin-top: 6px;
}
.popup .col-30{
	float: left;
	width: 30%;
	margin-top: 6px;
}
.popup .col-50{
	float: left;
	width: 50%;
	margin-top: 6px;
}
.popup .col-75{
	float: left;
	width: 75%;
	margin-top: 6px;
}
.popup .col-100{
	float: left;
	width: 100%;
	margin-top: 6px;
}


/*label de check line*/
.popup form .radio-inline{
	opacity: 0;
	font-size: 14px;
	margin-bottom: 10px;
	width: 20%;
}
/*botones check line*/
.popup form .radio-inline input{
	height: 40px;
	width: 80%;
	margin-top: 27px;
	margin-left:10px
}

/* etiqueta folio*/
.popup form .row h6[id=lblfolio] {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;
	opacity: 0; 
	text-align: left;
    width: 60%;
	margin-top: 20px;
	padding: 0px 0px 0px 0;
	margin-left: 22px;
}

/* etiqueta fecha*/
.popup form .row h6[id=lblfecha] {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;
	opacity: 0; 
	text-align: left;
    width: 60%;
	margin-top: 20px;
	padding: 0px 0px 0px 0;
	margin-left: 22px;	
}

/* input de folio
.popup form .row input[id=folio]{
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid rgba(187, 187, 187, 0.952);
	width: 90%;
	margin-top: -1px;
	margin-right: -12px;	
}*/

/* input de fecha*/
.popup form .row input[id=fecha]{
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 90%;
	margin-top: -1px;
	margin-right: -9px;
}
/* etiqueta nombre*/
.popup form .row h4[id=lblnom]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 22px;
}
/* etiqueta apellido*/
.popup form .row h4[id=lblapp]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 10px;
}
/*input nombre*/
.popup form .row input[id=nombre] {
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 90%;
	margin-top: -7px;
	margin-right: -12px;	
}
/*input apellido*/
.popup form .row input[id=app] {
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 90%;
	margin-top: -7px;
	margin-left: -9px;	
}
/*lbl anonimo*/
.popup form .row h4[id=lblano] {
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 9px;
	padding: 0px 0px 0px 0;
	margin-left: 22px;
}
/*lbl genero*/
.popup form .row h4[id=lblgen] {
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 7px;
	padding: 0px 0px 0px 0;
	margin-left: 13px;
}
/*input de anonimo*/
.popup form .row input[id="anonimo"]{
	opacity: 0;
	font-size: 12px;
	height: 25px;
	margin-bottom: 0px;
	float: left;
	width: 60%;
	margin-top: 9px;
	margin-left: -39px;
}

/*input de genero*/
.popup form .row select[id=genero]{
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 114%;
	margin-top: 2px;
	margin-left: -57px;	
}

/* etiqueta seleccionar*/
.popup form .row h4[id=lblmet]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 22px;
}
/* etiqueta correo o telefono*/
.popup form .row h4[id=lbling]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 10px;
}
/*input seleccionar*/
.popup form .row select[id=selec] {
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 90%;
	margin-top: -7px;
	margin-right: -12px;	
}
/*input ingresar*/
.popup form .row input[id=ingresar] {
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 90%;
	margin-top: -7px;
	margin-left: -9px;	
}
/* etiqueta grupo*/
.popup form .row h4[id=lblgru]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 21px;
}
/* input grupo*/
.popup form .row select[id=grupo] {
	opacity: 0;
	font-size: 12px;
	height: 35px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 94%;
	margin-top: -7px;
	margin-right: -3px;	
}
/* etiqueta escribe comentario*/
.popup form .row h4[id=lblescribe]{
	font-size: 14px;
	margin-bottom: 5px;
	opacity: 0; 
	text-align: left;
    width: 80%;
	margin-top: 8px;
	padding: 0px 0px 0px 0;
	margin-left: 21px;
}
/*txtarea*/
.popup form .row textarea[id=comentario] {
	opacity: 0;
	font-size: 13px;
	text-align: left;
	height: 94px;
	margin-bottom: 0px;
	border: 1px solid #BBBBBB;
	width: 94%;
	margin-top: -7px;
	margin-right: -3px;	
	resize: none;
}

.popup form .btn-submit {
	opacity: 0;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: rgb(53, 93, 224);
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
}

.popup form .btn-submit:hover {
	background: rgba(94,125,227, .5);
}

/**
.popup form .contenedor-inputs {
	opacity: 100;
}
.popup form .contenedor-inputs input {
	font-size: 18px;
	height: 40px;
	margin-bottom: 10px;
	float: right;
	border: 1px solid #BBBBBB;
	width: 75%;
	margin-top: -60px;
}
**/
/**
select{
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	float: right;
 	width: 60%;
  margin-top: -60px;
} **/




/* ANIMACIONES */
.popup.active { 	opacity: 1; transform: scale(1); }
.popup.active h3 {animation: entradatitulo .8s ease .5s forwards; }
.popup.active h4 {animation: entradasubtitulo .8s ease .5s forwards; }
.popup.active h5 {animation: entradasubtitulo1 .8s ease .5s forwards; }
.popup.active h6 {animation: entradasubtitulo2 .8s ease .5s forwards; }
.popup.active .radio-inline {animation: radio .8s ease .5s forwards;}
.popup.active form .row .col-50 input {animation: check1 .8s ease .5s forwards;}
.popup.active form .row .col-50 select {animation: check1 .8s ease .5s forwards;}
.popup.active form .row .col-25 select {animation: check1 .8s ease .5s forwards;}
.popup.active form .row .col-25 input {animation: check1 .8s ease .5s forwards;}
.popup.active form .row .col-100 select {animation: check1 .8s ease .5s forwards;}
.popup.active form .row .col-100 textarea {animation: check1 .8s ease .5s forwards;}
.popup.active .btn-cerrar-popup {animation: check1 .8s ease .5s forwards;}
.popup.active .btn-submit {animation: check1 .8s ease .5s forwards;}


@keyframes entradatitulo{
	from {
		transform: translateY(-25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradasubtitulo{
	from {
		transform: translateY(25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradasubtitulo1{
	from {
		transform: translateY(25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradasubtitulo2{
	from {
		transform: translateY(25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes radio{
	from {
		transform: translateY(25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes check1{
	from {
		transform: translateY(25px);
		opacity: 0;
		}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}