/*!
 * Autor::
 * Institución: 	   
 * Version:           
 * Descripción: Archivo de estilos de la pantalla principal
*/

/*------------------------------------*
   Contenido
*------------------------------------*/
/**
 * BASE
 * - MAIN
 * - NORMALIZE
 * - LAYOUTS
 * - COMPONENTS
 * - TYPOGRAPHY
 * - FORMS
 *
 * COMPONENTS
 * - TOP BAR
 * - HEADER
 * - NAVIGATIONS
 * - LINKS EFFECT
 * - MEGA MENU
 * - SEARCH ICON
 * - DROP DOWN MOBILE
 * - FULL SCREEN MOBILE
 * - PAGE HEADER
 * - BLOG
 * - SIDEBAR
 * - CUSTOM SELECTS
 * - PAGINATION
 * - COMMENT
 * - SEARCH
 * - FOOTER
 * - 404 PAGE
 *
 * PLUGINS
 * - GENERAL
 * - MAGNIFIC POPUP
 * - SIDR
 * - SLICK
 *
 * RESPONSIVE
 */
/*------------------------------------*
	Cuerpo
*------------------------------------*/
@charset "UTF-8";
:root{
  --verdeacav: #216e3a;
  --rojoacav: #de2118;
}

html {
  height: 100%;
  line-height: 1.125em;

}


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

/*
header, section, footer, aside, nav, article, figure, figcaption,
hgroup, label, input{
display: block;
}-*/


/*------------------------------------*
	Cuerpo Principal
*------------------------------------*/

body{
 /*width: 100%;
 min-height: 100vh;
 background-image:url('https://cdn.pixabay.com/photo/2018/05/04/15/23/poppies-3374193_1280.jpg');*/
 background-image: url('../img/fondo17.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 /*background-position: center center;*/
 /*background-size:contain; */
 display: grid;
 grid-template-rows: auto 1fr auto;
 
 min-height: 100vh;
 
 
}



/*------------------------------------*
	Cabecera Principal
*------------------------------------*/
.header{
	background: transparent;
	box-shadow: 0 0 .0rem rgba(0,0,0,.08),0 .5rem .75rem rgba(0,0,0,.14);
   padding: 0px 0px;
}

.header #nivel1{
	/*background: #7c2529;*/
	background-color:rgba(124,37,41,0.5); 
   padding: 5px 10px;
   color: #fff;
}
.header #conte{
  display: grid;
  grid-template-columns: 1fr auto;	
}

.header #nivel2{
	/*background: transparent;-
	background: #157750;*/
	background-color:rgba(21,119,80,0.5);
   padding: 25px 10px;
   color: #d4aa00ff;
   font-size: 1.70rem;
}

/*.header #bot-ingresar{
	
	background-color:rgba(21,119,80,0.5);
   padding: 25px 10px;
   color: #fff;
   border-left: 2px solid #999999;
}

.header #bot-ingresar:hover{
   background-color: var(--verdeacav);
   cursor: pointer;
}
 */
/*------------------------------------*
	Formulario de ingreso 
*------------------------------------*/

.form-box{

	width: 370px;
	height: 455px;
	position: relative;
	margin: 6% auto;
	background-color:rgba(255,255,255,0.7);
	padding: 5px;
	border-radius: 10px;
	overflow: hidden;
	font-size: 16px;
	font-family: verdana, sans-serif;
}

.button-box{
	width: 240px;
	margin: 30px auto;
	position: relative;
	box-shadow: 0 0 20px 9px #ffffff;
	border-radius: 30px;
}

.toggle-btn{
	padding: 10px 22px;
	cursor: pointer;
	background: transparent;
	border: 0px;
	outline: none;
	position: relative;

}

#elegir{
	top: 0;
	left: 0;
	position: absolute;
	width: 120px;
	height: 100%;
	background: linear-gradient( to right, rgba(237, 188, 57), rgba(103, 99, 87));
	border-radius: 30px;
	transition: 0.8sg;
}

.input-group{
	top: 180px;
	position: absolute;
	width: 280px;
	transition: 0.8sg;
}

.input-field{
	width: 100%;
	padding: 10px 0;
	margin: 5px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px solid  #cf881b ;
	outline: none;
	background: transparent;
	
}

.submit-btn {
	width: 85%;
	padding: 10px 30px;
	cursor: pointer;
	display: block;
	margin: auto;
	background: linear-gradient( to right, rgba(237, 188, 57), rgba(103, 99, 87));
	border: 0px;
	outline: none;
	border-radius: 30px;
}

.check-box{
	margin: 30px 10px 30px 0;
}

span{
	color: #141211;
	font-size: 12px;
	bottom: 64px;
	position: absolute;

}

#Ingresar{
	left: 50px;
}

#Registro{
	left: 450px;
}