:root {
  --main-l-color: #ffffff;
  --main-v-color: #008e69;
  --main-m-color: #6b1a6d;
  --main-g-color: #cdcdcd;
  --main-ptext-color: #6b1a6d;
}


body{
	font-family: 'Montserrat', arial sans-serif;
	margin: 0;
	background-color: var(--main-g-color);
	color: var(--main-v-color);
}
a{
	text-decoration:none;
	color:var(--main-m-color);
}
.contcamara{
	background-color: var(--main-g-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}
.caja{
	background-image: url("../img/fondo-mosaic.jpg");
	background-repeat: repeat;
	min-height: 200px;
	display: flex;
	align-items: center;
	margin: auto;
	text-align: center;
	padding: 1em;
	flex-direction: column;
	border-radius: 10px;
	margin: auto;
	min-width: 300px;
	max-width: 85%;
}
.caja>form{
	align-content: center;
	text-align: center;
	justify-content: center;
	flex-direction: column;
	display: flex;
	font-weight: bolder;
}

form>input{
	margin-bottom: 1em;
	background-color: var(--main-l-color);
	border-style:solid;
	border-width: .001em;
	border-color: var(--main-g-color);
	border-radius: 3em;
	padding: 0.5em;
	border-color: var(--main-m-color)
}
.control-label{
	text-transform: uppercase;
}
.inputLarge{
	min-width: 300px;
}


.btnok{
	margin: auto;
	width: 200px;
	border-style:solid;
	border-width: .001em;
	border-color: var(--main-g-color);
	border-radius: 3em;
	padding: 0.5em;
	background-color: var(--main-m-color);
	color: var(--main-l-color);
	cursor: pointer;
	transition-duration: 0.25s;


}
.btnok:hover{

	transform: scale(1.05);
	background-color: var(--main-v-color);
	color: var(--main-l-color);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);

}
.marcocam{
	width: 75vw;

}
#preview{
	width: 100%;
	border-radius: 10px;
	background-color: var(--main-l-color);
}

#frontal{
	cursor: pointer;
	color: green;
}
#atras{
	cursor: pointer;
	color: blue;
}

.nofunciona{
	display: none;

}
.espejo{
transform: scaleX(-1);
}
.cont_basic{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--main-g-color);

}
.cont_intern{
	display: inline;
	align-items: center;
	margin: auto;
	
	text-align: center;
}
.boton_general{
	width: 200px;
	height: 200px;
	border-radius: 10px;
	background-color: var(--main-l-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 30px;
	transition-duration:0.5s;
	cursor: pointer;
	animation-name: subir;
	animation-duration: 1.5s;
	border-color: #D8D8D8;
}
.d1{animation-timing-function: ease;}
.d2{animation-timing-function: ease-out;}


.boton_general:hover{

	transform: scale(1.05);
	background-color: var(--main-m-color);
	color: var(--main-l-color);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);

	

}

.menu{
	text-align: center;
	position: absolute;
	right: 0;
	color: var(--main-m-color);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding: 10px;

}
.menu i{
	margin-right: 10px;
	margin-left: 30px;
}




.menBtn{
	min-width: 100px;
	margin-right: 20px;
}

.menBtn:hover{
	color: var(--main-v-color);
	background-color: var(--main-l-color);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);
}

.menuMov{
	display: none;
}

.red{
	color: #ff3b3b
}

hr{

	width: 50%;
	height: 1px;
	border-color: var(--main-g-color);
	background-color: var(--main-g-color);
	border-style: none;
}
.mailPlantilla{
	background-image: url("../img/bgcarnet.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 8in;
	height: 14.22in;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	text-align:center;
	position: relative;
	margin: auto;
}

.qrimage{
	width: 50%;
	position: relative;
	border-style: solid;
	border-width: 0.5em;
}


.bg-success{
  	background-color: #7bc64b;
  }
.bg-warning{
  	background-color: #ff3b3d;
  }
  .border-warning{
  	border-color: #ff3b3d;
  }

  .border-success{
  	border-color: #7bc64b;
  }




.caja img{
	margin-bottom: 1em;
}

.datos{

	color: var(--main-v-color);
}

.logo_Expo{
	width: 50%;
}

.flotante{
	background-color: rgb(0,0,0,0.5);
	width: 100%;
	position: absolute;
	height: 100vh;
	top: 0;
	margin:auto;
	position: fixed;

}

.esconder{
	display: none;
}
.mostrar{
	display: flex;
}



.may{
	text-anchor: uppercase;
}

.xl-font{
	font-size: x-large;
}

.l-font{
	font-size: large;
}
.row{
	display: flex;
}

.j-left{
	width: 90%;
	text-align: left;
	justify-content: flex-start;
}

.mensaje{
	max-width: 500px;
	margin:auto;
}

.p-block{
	display: flex;
	flex-direction: column;
}

.noselect{
	user-select:none;
}
/* 

Animaciones

*/

@keyframes subir {
  0%{
  	transform: translateY(200px) scale(1.02); 
  	  opacity: 0; 
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
  	 
  }

  75% {
  	transform: translateY(0px) scale(1.02);
  	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
	
  }

  85% {
  	transform: translateY(0px) scale(1.02);
  	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
  }

  100%{
  	transform: scale(1);


  }


}

.dis{
	display: none;
}


.mb-4 {
    margin-bottom: 1.5rem!important;
}

.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
.form-group{
	display: block;
}
.error{
	color: #ff3b3d;
}


@media only screen and (min-width:320px) and (max-width:720px){

.menu{
	display: none;
}

.menuMov{
	display: flex;
}

.barras{
z-index: 1000;
position: absolute;
margin: 30px;
}

.mbmov{
	height: 100vh;
	width: 100%;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	background-color:  var(--main-v-color);
}

.menBtnMov{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30vh;
	width: 95%;
	color: var(--main-l-color);
	font-size: 2em;
}

.menBtnMov:hover{
	
	background-color: var(--main-l-color);
}

.equis{
	color: var(--main-l-color);
}


.usuario{
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 10vh;
	width: 95%;
	color: var(--main-m-color);
	font-size: 1em;
	background-color: var(--main-l-color);
	color: var(--main-v-color);

margin-bottom: 20px;
margin-top: 5px;

}

}