@import url('https://fonts.googleapis.com/css?family=Domine&display=swap');
*{
 margin: 0;
	padding: 0;
	box-sizing: border-box;   
}
body{
    height:100%;
    width: 100%;
    
    font-family: 'Domine', serif;
    background:#E0E0E0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'arial';
    font-weight: bold;
    letter-spacing: 1px;
    padding:5px;
}
h4{
    font-size:11pt;
}
h1{
	font-size: 26px;
}
.compre{
    width: 300px;
}
textarea{
    resize:vertical;
}
/*============ LOGIN ==================*/
.container-login h3{
    font-size:18pt;
    letter-spacing:1px;
    width:100%;
    background: #2980b9;
    padding:15px;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
}
.container-login{
    background: #5d6d7e;
    width:100%;
    height:100vh;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex;
    justify-content:center;
    align-items:center;
}

.container-login form{
    background:#fff;
    width:500px;
    padding:10px;
}

.container-login form img{
    margin:15px auto;
    text-align:center;
    display:block;
    width:200px;
}

.container-login form input{
    width:90%;
    padding:5px;
    font-size:16pt;
    display:block;
    margin:25px auto;
    border-radius:5px;
    border:1px solid #85929e;
    text-align:center;
}

.container-login form input[type="submit"]{
    background: #52be80;
    padding:10px;
    color:#fff;
    letter-spacing: 1px;
    border:0;
    cursor:pointer;
}

/*============ LOGIN ==================*/


/*============ MENU ==================*/
span {
    font-family: 'GothamBook';
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 20px;
}


a{
	text-decoration: none;
	font-family: arial;
	letter-spacing: 1px;
}
.header{
	color: #FFF;
	background: #0a4661;
	height: 35px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.optionsBar span {
    color: #FFF;
    font-size: 11pt;
    font-family: 'GothamBook';
    text-transform: uppercase;
    margin-left: 30px;
}
.optionsBar{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.optionsBar img{
    width:25px;
    margin:15px auto;
    display:block;
}

nav ul{
	background: #058167;
	/*background: #05817d;*/
	list-style: none;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: left;
	align-items: center;
}
nav ul > li a{
	position: relative;
}
nav a{
	color: #FFF;
	display: block;
	font-size: 10pt;
	font-family: 'GothamBook';
	padding: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: background .5s;
	border-right: 1px solid #319B8F;
}
nav .principal > a{
    background: url(../images/arrow_bottom.png) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
    background-position: 94% center;
    background-size: 10px;
}
nav ul li:hover ul{
	display: block;
}
nav li ul{
	/*background: #177470;*/
	background: #2d9872;
	display: none;
	flex-direction: column;
	position: absolute;
	align-items: flex-start;
	border-radius: 0 0 10px 10px;
}
nav li ul a{
	position: relative;
	padding: 10px 30px;
	border-right: initial;
}
nav li ul a:hover{
	/*background: #2c9595;*/
	background: #147556;
}
nav li ul li:last-child{
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}

/*============ MENU =================*/

/*=========form borrar==========*/
.form_borrar{
    text-align:center;
}
.form_borrar form{
     background:initial;
     margin:auto;
     padding:20px 50px;
     border:0;
}
.form_borrar span{
    font-weight:bold;
    color:#4f72d4;
    font-size:12pt;
}
.titulo_borrar{
    padding:15px;
    text-align:center;
    font-size:15pt;
    
}
.btn_cancel, .btn_ok{
    width:135px;
    background:#478ba2;
    color:#fff;
    display:inline-block;
    padding:5px;
    border-radius:5px;
    cursor:pointer;
    margin:15px;
    font-size:12pt;
    border:0;
    font-weight:bold;
}
.btn_cancel{
    background:#42b343;
}
/*=========form borrar==========*/

/*=============GRID==================*/
.item-contenedor{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(200px, auto);
    grid-gap:10px;
    grid-template-areas: "item-header item-header item-header"
                         "item-contenido item-contenido item-contenido"
                         "item-footer item-footer item-footer";
}
.item-header{
    grid-area:item-header;
}
.item-contenido{
    grid-area:item-centenido;
}
.item-footer{
    grid-area:item-footer;
}


.contenedor{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: 110px repeat(2, 1fr) 110px;
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header header header header"
                         ". contenido contenido ."
                         "footer footer footer footer";
}

.header{
    grid-area: header;
    font-size: 20px;
    text-align:center;
}
.contenido{
    grid-area: contenido;
    font-size: 15px;
    
}
.footer{
    grid-area: footer;
    font-size:20px;
    text-align:center;
}
/*=============GRID==================*/

.oculto:hover{
    transform:scale(1.1);
}
/*=================================FORMULARIO REGISTRO-EDITAR==============================*/
.form_register{
    width:450px;
    margin:auto;
}
.header h1{
    color:#3c93b0;
}
.header h4{
    color:#3c93b0;
}
.container_h1{
    text-align:center;
}
hr{
    border:0;
    background:#CCC;
    height:2px;
    margin:10px 0;
    display:block;
    
}
.insert-form{
    background:#FFF;
    margin:auto;
    padding:20px 50px;
    border: 1px solid #d1d1d1;
}
label{
    display:inline-block;
    font-size:11pt;
    margin: 15px auto 5px auto;
    width: 330px;
    vertical-align: top;
}
input, select, textarea{
    display:block;
    width:100%;
    font-size:11pt;
    padding:5px;
    border:1px solid #85929e;
    border-radius:5px;
}
.noItemOne option:first-child{
    display:none;
}
.btn_save{
    font-size:12pt;
    background:#12a4c6;
    padding:10px;
    color:#fff;
    letter-spacing:1px;
    border:0;
    cursor:pointer;
    margin:15px auto;
    display: block;
    border-radius:5px;
    width:100%;
}
.alert{
    width:100%;
    background:#66e07d66;
    border-radius:6px;
    margin:20px auto;
}
.msg_error{
    color:#e65656;
}
.msg_save{
    color:#126e00;
}
.alert p{
    padding:10px;
}

.btn_search_2{
    font-size:12pt;
    background:#12a4c6;
    padding:10px;
    color:#fff;
    letter-spacing:1px;
    border:0;
    cursor:pointer;
    margin:15px auto;
    border-radius:5px;
    width:90%;
    display:block;
    text-decoration:none;
    text-align:center;
}
/*=================================FORMULARIO REGISTRO-EDITAR==============================*/

/*=================================TABLA CAZADOR BUSQUEDA==============================*/
.container_tabla h1{
    font-size: 35px;
    display:inline-block;
    text-align:center;
}
.btn_new{
    text-decoration:none;
    display:inline-block;
    background:#239baa;
    color:#fff;
    padding:5px 25px;
    border-radius:4px;
    margin:20px;
}
.tabla_cazador{
    border-collapse:collapse;
    
    width:100%;
}
.linea{
    font-size: 16pt;
   padding-top:35px;
   text-align: center;
    
}
.tabla_cazador th{
     font-size:10pt;
    text-align:center;
    padding:10px;
    background: #3d7ba8;
    color:#fff;
}
.tabla_cazador tr:nth-child(odd){
    background:#fff;
}
.tabla_cazador td{
    font-size:8pt;
    padding:10px;
    text-align:justify;
}
.link_edit{
    color:#0ca4ce;
}
.link_delete{
    color:#f26b6b;
}
/*=================================TABLA CAZADOR BUSQUEDA==============================*/
/*=================================DELETE CAZADOR==============================*/
.data_delete{
    text-align:center;
}
.data_delete p{
    text-align: justify;
}
.data_delete h2{
    font-size:12pt;
}
.data_delete span{
    font-weight:bold;
    color:#4f72d4;
    font-size:12pt;
}
.btn_cancel, .btn_ok{
    width:124px;
    background:#478ba2;
    color:#fff;
    display:inline-block;
    padding:5px;
    border-radius:5px;
    cursor:pointer;
    margin:15px;
}
.btn_cancel{
    background:#42b434;
    text-decoration:none;
}
.data_delete form{
    background:initial;
    margin:auto;
    padding:20px 50px;
    border:0;
}
/*=================================DELETE CAZADOR==============================*/
/*=================================PAGINADOR==============================*/
.paginador ul{
    padding:15px;
    list-style:none;
    background:#FFF;
    margin-top:15px;
    display: -webkit-flex;
    display: flex;
}
.paginador a, .pageSelected{
    color:#428bca;
    border:1px solid #ddd;
    padding:5px;
    display:inline-block;
    font-size:14px;
    text-align:center;
    width:35px;
}
.paginador a:hover{
    background:#ddd;
}
.pageSelected{
    color:#fff;
    background:#428bca;
    border:1px solid #482bca;
}

/*=================================PAGINADOR==============================*/

/*=================================BUSCADOR==============================*/
.form_search{
    display: -webkit-flex;
    display: flex;
    float:right;
    background:initial;
    padding:50px 10px 10px 10px;
    border-radius:10px;
}
.form_search .btn_search{
    background:#1faac8;
    color:#fff;
    padding:0 20px;
    border:0;
    cursor:pointer;
    margin-left:10px;
    border-radius:5px;
}
/*=================================BUSCADOR==============================*/

/*================================= RESPONSIVE ==================================*/
@media screen and (max-width: 1024px){
    .contenedor_datos{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header_datos header_datos header_datos header_datos"
                         ". contenido_datos contenido_datos ."
                         "footer_datos footer_datos footer_datos footer_datos";
}
}
@media screen and (max-width: 1000px){
    .contenedor_datos{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header_datos header_datos header_datos"
                         ". contenido_datos ."
                         "footer_datos footer_datos footer_datos";
}
}
@media screen and (max-width: 800px){
    .contenedor_datos{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header_datos header_datos header_datos"
                         ". contenido_datos ."
                         "footer_datos footer_datos footer_datos";
}
.contenedor_form{
    display:grid;
    font-size:10pt;
}
}
@media screen and (max-width: 600px){
    .contenedor_datos{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header_datos"
                         "contenido_datos"
                         "footer_datos";
}
.header_datos{
    text-align:center;
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    grid-template-areas: "logo_comercial"
                         "texto_comercial"
                         "escudo_comercial";
}
.contenedor_form{
    display:grid;
    font-size:10pt;
    text-align:center;
}
.form-caza{
    width:450px;
    margin:auto;
}
}
@media screen and (max-width: 400px){
    body{
      font-size:9pt; 
    }
    .contenedor_datos{
    display:grid;
    width:100%;
    margin:0 auto;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas: "header_datos"
                         "contenido_datos"
                         "footer_datos";
}
.header_datos{
    text-align:center;
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    grid-template-areas: "logo_comercial"
                         "texto_comercial"
                         "escudo_comercial";
}
.contenedor_form{
    display:grid;
    font-size:10pt;
    text-align:center;
}
.form-caza{
    width:300px;
    margin:auto;
}
input{
    width:260px;
}
textarea{
    width:260px;
}
label{
    width: 260px;
    text-align:center;
}
}
/*================================= RESPONSIVE ==================================*/