/*! main.css v1.0.0 | MIT License | onesoftperu.com/erp/public/styles/main.css */

/*
 * ESPECIFICACIONES:
 * ==================
 * 1. Dar las especificaciones basicas de diseño al layout.
 * 2. Aplicar diseño Mobile First
 */


/*
 * Selectores generales
 * ====================
 */
/*
  * Colores corporativos
  * color medio: #0093DD; rgb(0, 147, 221)
  * color fuerte: #1B1143; rgb(27, 17, 67)
  * color suave: #90D6FA; rgb(144, 214, 250)
  */

:root {
	
	/* Corporate color palette 
	 */
	--color-one: #90D6FA; /*rgb:144,214,250*/
    --color-two: #1B1143; /*rgb:27,17,67*/
    --color-three: #0093DD; /*rgb:0,147,221*/
	--color-four: #D1D7DA; /*rgb:209,215,218*/
	--color-five: #424243; /*rgb:66,66,67*/
	
	/* Body */
	--body-font-letters: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	--body-color-letters: var(--color-two);

  	/* Header */
  	--header-color-background: var(--color-two); /* color de fondo del header */

  	/* Main Menu */
  	--menu-color-letters: var(--color-four); /* color de letras de los menús */
  	--menu-color-letters-hover:var(--color-one); /* color de letras de los menús al flotar */
   	--menu-color-background: var(--color-two); /* Color de fondo de los menús */
  	--menu-color-background-hover: var(--color-three); /* Color de fondo de los menús al flotar */
	/* Login Menu */
	--menu-color-letters-login: var(--color-four); /* color de letras de los menús */
  	--menu-color-letters-hover-login: var(--color-four); /* color de letras de los menús al flotar */
   	--menu-color-background-login: var(--color-three); /* Color de fondo de los menús */
  	--menu-color-background-hover-login: var(--color-three); /* Color de fondo de los menús al flotar */
  	
	/* Links */
	--link-color-letters: var(--color-two);
	--link-anchor-down-up: rgba(27,17,67,0.9);

	/* Contenedor principal */
	--main-content-font-letters: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;

	/* Footer */
	--footer-color-letters: var(--color-two);

	/* Login y Formularios */
	--form-color-background: var(--color-four); /* color de fondo de los formularios */
	--form-color-letters: var(--color-one); /* color de las letras de los formularios */
	--form-color-background-buttons: var(--color-two); /* color de fondo de los botones */
}

main {
	/*background-color: white;*/
	min-height: 100vh;
}
/* selectores para el logo */

header #logo {
	float: left;
  	margin: -5px 0 0 35px;
  	padding: 3px;
	text-shadow: -1px -1px 0 rgba(27,17,67,0.2);
	position: relative;
	border-radius: 7px;
	max-width: 200px;
}

.logo-secondary {
	display: inline;
	position: absolute;
	top: 0;
	transition: all 1s;
}
.logo-secondary:hover{
	transform: scale(1.05);
}

/* cuerpo */
body {
	font-family: var(--body-font-letters);
	color: var(--body-color-letters);
}

/* links */
a {
	text-decoration: none;
	color: var(--link-color-letters);
	font-weight: bold;
	transition: all 1s;
}

/* contenedor principal */
.main-content {
	max-width: 770px;
	min-height: 400px;
	margin: 0 auto;
	padding: 0 5%;
	font-family: var(--main-content-font-letters);
	font-size: 1rem;
	/*background-color: var(--color-four);
	box-shadow: 0 0 .1rem var(--color-four);*/
}

.main-content ul {
	display: inline-block;
}

/* selector h3 */
h3 {
	margin: 0 0 .25em 0;
}

/* selector de parrafos */
p {
	text-align: justify;
	margin: 1%;
}

/*
 * Bloque: header
 * ==============
 */

/* selector de cabecera */
header {
	background-color: var(--header-color-background);
  	border-radius: 4px;
  	box-shadow: inset 0 -2px 0 rgba(27,17,67,0.4), inset 0 1px 0 rgba(0,147,221,0.3);
  	padding: 10px;
  	margin-bottom: 1rem;
	height: 65px;
}

header img {
	width: auto;
	float: left;
	margin: 0 0 0 1%;
	border-radius: 5%;
}

/* selectores para la bienvenida del usuario */
header .user-welcome {
	float: right;
	font-size: 0.9rem;
	color: var(--menu-color-letters);
	position: relative;
}

header .spn-welcome {
	font-weight: normal;
	position: absolute;
	top: -15px;
	right: 0px;
	display: inline-block;
	color: var(--color-one);
}

/* SlideShow */
#slideContainer {
	position: relative;
	background-color: var(--color-two);
	width: 100%;
	margin-top: -20px;
	margin-bottom: 5%;
}

#slideImage {
	height: auto;
	max-width: 100%;
}

#slideTitle {
	position: absolute;
	font-weight: bold;
	color: var(--color-four);
	vertical-align: middle;
	text-align: center;
}

/* Menu de opciones del usuario */
ul.user-menu {
	display: inline-block;
	zoom: 1;
	margin: 0;
	list-style-type: none;
	white-space: nowrap;
	/*background-color:rgba(0,147,221,0.9);*/
	font-size: 1rem;
	/*
	background: -webkit-linear-gradient(to top, var(--color-four), var(--color-two), var(--menu-color-background-login));
	background: linear-gradient(to top, var(--color-four), var(--color-two), var(--menu-color-background-login));
	*/
}
ul.user-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	border: var(--color-two) solid 1px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: rgba(27,17,67,0.9);
	color: var(--menu-color-letters-hover-login);
}
ul.user-menu ul li {
	display: block;
	border: none;
	border-top: var(--color-two) solid 1px;
}
ul.user-menu ul li:first-child {
	border: none;
}
ul.user-menu li {
	position: relative;
	display: inline-block;
	zoom: 1;
	border-left: var(--color-two) solid 1px;
}
ul.user-menu li:first-child {
	border: none;
}
ul.user-menu li a {
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	color: var(--menu-color-letters-login);
}
ul.user-menu li a:hover {
	background-color: rgba(0,147,221,0.9);
  	color: var(--menu-color-letters-hover-login);
}
ul.user-menu li:hover ul {
	display: block;
}
ul.user-menu ul li:hover ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	background-color: rgba(0,147,221,0.9);
	color: var(--menu-color-letters-hover-login);
}

/* selectores del menú principal */
nav.main-menu ul {
	float: right;
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	position: absolute;
	/*z-index: 999999;*/
	z-index: 2;
	background-color: rgba(27,17,67,0.9);
	margin-left: 280px;
}
 
nav.main-menu li {
	display: inline-block;

}
 
nav.main-menu a {
  color: var(--menu-color-letters);
  display: block;
  padding: .5em .8rem;
  text-decoration: none;
  transition: all 1s;
}

nav.main-menu a.selected, nav.main-menu a:hover {
	background-color: rgba(0,147,221,0.9);
	color: var(--menu-color-letters-hover);
}

/* selectores del sub menu de navegacion */
nav.main-menu ul li ul li {
	display: none;
}

nav.main-menu ul li:hover ul li {
	background-color: rgba(27,17,67,0.9);
  	color: var(--color-one);
    display: block;
  	margin-left: -240px;
}

/* selectores del menú categorias */
nav.category-menu ul {  
	font-size: .9rem;
	float: right;
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	position: absolute;
	/*z-index: 999;*/
	z-index: 1;
	background-color: rgba(27,17,67,0.9);
	margin-left: 10px;
	min-width: 180px;
	max-width: 100%;
}
 
nav.category-menu li {
	display: inline-block;
	border-top: 1px solid rgba(209,215,218,0.2);
}
 
nav.category-menu a {
  color: var(--color-one);
  display: block;
  padding: .5em .8rem;
  text-decoration: none;
  transition: all 1s;
}

nav.category-menu a.selected, nav.category-menu a:hover {
	background-color: rgba(0,147,221,0.9);
	color: var(--menu-color-letters-hover);
}

/* selectores del sub menu de navegacion */
nav.category-menu ul li ul li {
	/*display: none;*/
	
}

nav.category-menu ul li:hover ul li {
	background-color: rgba(27,17,67,0.9);
  	color: var(--color-one);
    display: block;
  	/*margin-left: -20px;*/
}



/*
 * Bloque: footer
 ================
 */

/* selector del pie de página */
footer {
	clear: both;
	background-color: var(--color-four);
	color: var(--footer-color-letters);
	text-align: center;
	padding: 5px;
	min-height: 75px;
	/*height: 50px;*/
	z-index: 0;
	bottom: 0;
	box-sizing: content-box;
}

footer p {
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
	background-color: transparent;
}

/* Selectores de la pagina: acerca.php
 * =====================================
 */

/* selector de clase */
.profile-photo {
	display: block;
	max-width: 250px;
	margin: 0 auto 30px;
	border-radius: 50%;
	border: solid 1px var(--color-three);
	cursor: pointer;
	transition: all 1s;
	background-color: transparent;
}

.profile-photo:hover {
	/*background-color: rgba(27,17,67,.5);*/
	transform: scale(1.025);
}

/*
 * Selectores de la pagina: contacto.php
 * =====================================
 */

/* selector de clase */
.contact-info {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.9rem;
}

/* selectores de clase descendentes */
.contact-info a {
	display: block;
	min-height: 20px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 0 0 10px 30px;
	margin: 0 0 10;
	width: auto;
	transition: all 1s;
}

.contact-info, .main-content a:hover {
	color: var(--color-three);
}

.contact-info li.whatsapp a {
	background-image: url(../icons/32x32/whatsapp.png);
}

.contact-info li.address a {
	background-image: url(../icons/32x32/address.png);
}

.contact-info li.phone a {
	background-image: url(../icons/32x32/phone.png);
}

.contact-info li.mail a {
	background-image: url(../icons/32x32/mail.png);
}

.contact-info li.twitter a {
	background-image: url(../icons/32x32/twitter.png);
}

.contact-info li.facebook a {
	background-image: url(../icons/32x32/facebook.png);
}

/*
 * Selectores de la pagina: login.php
 * ==================================
 */

.login__container {
	background-color: var(--form-color-background);
	width: 60%;
	margin: auto;
	border-top: solid .5rem var(--form-color-background-buttons);
	box-sizing: border-box;
	padding: 3rem 0;
	box-shadow: 0 0 .5rem var(--color-four);
}

.login__top {
	text-align: center;
}

.login__title {
	color: var(--color-two);
}

.login__title span {
	color: var(--color-two);
}

.login__img {
	width: 8rem;
	border-radius: 50%;
}

.login__form {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 2rem 0;

}

.login__container input[type=text], 
.login__container [type=password] {
	height: 1.5rem;
	margin: .5rem 0;
	padding: .5rem;
}

.login__container input[type=text]:focus, 
.login__container [type=password]:focus {
	border-color: var(--form-color-background-buttons);
	background-color: var(--form-color-letters); 
}

.login__container .btn__submit {
	height: 2.5rem;
	border: none;
	border-radius: 5px;
	background-color: var(--color-two);
	color: var(--color-four);
	padding: .5px;
	margin: .5rem 0 .3rem;
	cursor: pointer;
	transition: all 1s;
	box-shadow: 5px 5px 4px var(--color-one);
}

.login__container .btn__submit:hover {
	background-color: var(--color-three);
	color: var(--color-one);
	/*font-weight: bold;*/
}

.form__recover {
	color: var(--color-three);
	text-decoration: none;
	text-align: center;
	font-size: 13px;
}

.form__recover:hover {
	color: var(--color-three);
}

/* selector h1 */
h1 {
	margin: 10px 0 5px 5px;
	font-size: 1.5rem;
	line-height: 0.8rem;
}

/* selector h2 */
h2 {
	font-size: 0.5rem;
	margin: 5px 0 0 40px;
}


/* selector multiple */
h1, h2 {
	font-weight: normal;
}

/* Ancla-abajo-arriba */
.anchor-down-up a {
	display: none;
	visibility: hidden;
	padding: 5px;
	background: var(--link-anchor-down-up);
	font-size: 1rem;
	color:var(--color-four);
	cursor: pointer;
	position: fixed;
	border-radius: 25px;
	right: 20px;
	justify-content: center;
	align-items: center;
	/*z-index: 999;*/
	z-index: 1;
}
.go-up {
	bottom: 20px;
}

/*
 * Css para el canvas de fotos.
 */
.can_photo {
	background-color: var(--color-three);
	border: 1px solid var(--color-two);
	border-radius: 100px;
	box-shadow: 10px 10px 8px rgba(27,17,67,0.5);
	position: absolute;
}

/*
 * Efectos
 */
.fade {
	opacity: 0.75;
}
.fade:hover {
	opacity: 1;
}

/* Estilos de los enlaces para que se asemejen a botones */
/* redes sociales */
a.a-button-social-network {
	height: 2rem;
	font-size: 0.95rem; 
	padding: 3px; 
	border-radius: 5px; 
	color:var(--color-four); 
	text-shadow: none;
	display: inline-block;
	width: 45%;
	margin-bottom: 5px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}

a.a-button-social-network.messenger {
	background-color:#1787fb; 
}

a.a-button-social-network.whatsapp {
	background-color:#189D0E; 
}

a.a-link-social-network{
	height: 2rem;
	font-size: 1.15rem; 
	padding: 3px; 
	display: inline-block;
	margin-bottom: 5px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	width: 20%;
	color: var(--body-color-letters);
}
a.a-link-social-network.like {
}
a.a-link-social-network.unlike {
}
a.a-link-social-network.comment {
}
a.a-link-social-network .assess {
}

.publication-comment{
	display: none;
	visibility: hidden;
}

/* slider main */

.container-all {
	position: relative;
	background-color: black;
	width: 100%;
	height: 100hv;
	margin-top: -30px;
	margin-bottom: 5%;
	overflow: hidden;
}
/* Mapas */
.map-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}
.map-responsive iframe{
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}



/*
 * Estructura del documento
 */
main {
    display: grid;
    grid-gap: 0px;
    grid-template-areas:
		"header"
		"slide"
        "categorias"
        "articulo"
        "carrito"
		"footer";
}

/* Nombramos los elementos */
header {
    grid-area: header;
}

aside:first-of-type {
	grid-area: slide;
}

aside:nth-of-type(2n) {
	grid-area: categorias;
	margin-bottom: 10px;
}

article {
    grid-area: articulo;
}

aside:last-of-type {
	grid-area: carrito;
	padding: 10px;
}

footer {
    grid-area: footer;
}

/*
 * begin catalog of goods
 */
.show-cart {
	flex: 1;
	min-width: 300px;
	font-size: .8rem;
}

.show-cart {
	padding: 8px
}

.show-cart .h3-text {
	background-color: var(--color-two);
	padding: 3px;
	color: var(--color-four);
}

.show-cart .cart-items-list {
	background-color: white;
}

.show-cart .div-buttons {
	text-align: right;
}

.count-good-cart {
	background-color: rgba(27,17,67,0.1);
	color: var(--color-four);
	width: 24px;
    height: 24px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: -5px;
	left: 12px;
}

.count-good-cart:hover {
	background-color: rgba(0,147,221,0.9);
	color: var(--color-one);
}

.cart-items-list .good-item {
	padding: 8px 25px;
    border-top: solid 1px rgba(27,17,67,0.35);
    color:var(--color-three);
}

.good-item p {
	color: #454545
}

.good-item p b {
	color: #676767
}

.cart-items-list .good-item:last-child {
	padding-bottom: 16px
}
.cart-items-list .good-item:first-child {
	padding-top: 16px
}

.show-cart .final-result{
	padding: 16px;
	text-align: center;
}

.final-result b {
	color: #676767
}

.separate {
	margin-left: 9px
}

/* end catalog of goods */


/* 
 * begin Preview of good 
 */
.good-preview {
    display: grid;
	grid-gap: 0px;
    grid-template-areas:
        "image"
        "slide"
        "contained";
	grid-template-columns: 1fr;
}

/* set name of areas */
.good-preview section:first-of-type {
	grid-area: slide;
	margin: 0 auto;
}

.good-preview section:nth-of-type(2n) {
	grid-area: image;
}

.good-preview section:nth-of-type(3n) {
	grid-area: contained;
}

.good-small-img img{
    width: 45px;
    height: 45px;
    margin: 10px 0;
    cursor: pointer;
    opacity: .6;
}

.good-small-img img:hover{
    opacity: 1;
}

.good-small-img {
    text-align: center;
}

.good-img-container img {
    max-width: 100%;
	/*height: auto;*/
	border: solid 1px rgba(0,147,221,0.3);
	
}
.good-img-container{
    text-align: center;
	padding: 10px;
	position: relative;
}
/* end Preview of good */

.invisible {
	visibility: hidden;
	display: none;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}