/* CSS File Code */

/* Boton de inicio de sesion en menu superior */

.button {
    position: relative;
    width: 80px;
    height: 40px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .4s,
        border-radius .4s;
	font-size: 17px;

	background:-webkit-gradient(linear,0 0,0 100%,from(#40A040),to(#006400));
	background:-moz-linear-gradient(top,#40A040,#006400);
	background:#40A040;
	
}

.button * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .20s;
	font-size: 17px;
}

.icon {
    opacity: 0;
	font-size: 20px;
}

.button:focus {
    width: 40px;
	height: 40px;
/*    background-color: #0060ec; */
    border-radius: 50%;
	
	background:-webkit-gradient(linear,0 0,0 100%,from(#006400),to(#40A040));
	background:-moz-linear-gradient(top,#006400,#40A040);
	background:#006400;

}

.button:focus .text {
    opacity: 0;
	font-size: 15px;
}

.button:focus .icon {
    opacity: 1;
    transition-delay: .3s;
	font-size: 15px;
}

/* Boton de inicio de sesion (en menu) */

.button2 {
    position: relative;
    width: 100%;
    height: 50px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .4s,
        border-radius .4s;
	font-size: 20px;

	background:-webkit-gradient(linear,0 0,0 100%,from(#40A040),to(#006400));
	background:-moz-linear-gradient(top,#40A040,#006400);
	background:#40A040;

}

.button2 * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .20s;
	font-size: 20px;
}

.icon2 {
    opacity: 0;
	font-size: 45px;
}

.button2:focus {
/*
	width: 40px;
	height: 40px;
    border-radius: 50%;
*/
	background:-webkit-gradient(linear,0 0,0 100%,from(#006400),to(#40A040));
	background:-moz-linear-gradient(top,#006400,#40A040);
	background:#006400;

}

.button2:focus .text2 {
    opacity: 0;
	font-size: 17px;
	font-weight: bold;
}

.button2:focus .icon2 {
    opacity: 1;
    transition-delay: .4s;
	font-size: 25px;
}


/* --------------- */

.button6 {
    position: relative;
    width: 100%;
    height: 50px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .4s,
        border-radius .4s;
	font-size: 20px;

	background:-webkit-gradient(linear,0 0,0 100%,from(#ce6e00),to(#8f4c00));
	background:-moz-linear-gradient(top,#ce6e00,#8f4c00);
	background:#ce6e00;

}

.button6 * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .20s;
	font-size: 20px;
}

.icon6 {
    opacity: 0;
	font-size: 45px;
}

.button6:focus {
/*
	width: 40px;
	height: 40px;
    border-radius: 50%;
*/
	background:-webkit-gradient(linear,0 0,0 100%,from(#8f4c00),to(#ce6e00));
	background:-moz-linear-gradient(top,#8f4c00,#ce6e00);
	background:#8f4c00;

}

.button6:focus .text6 {
    opacity: 0;
	font-size: 17px;
	font-weight: bold;
}

.button6:focus .icon6 {
    opacity: 1;
    transition-delay: .4s;
	font-size: 25px;
}

/* Boton de ir a "Vender" (en menu) */

.button3 {
    position: relative;
    width: 100%;
    height: 40px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .2s,
        border-radius .2s;
	font-size: 20px;
	font-weight: bolder;

	background:-webkit-gradient(linear,0 0,0 100%,from(#40A040),to(#006400));
	background:-moz-linear-gradient(top,#40A040,#006400);
	background:#40A040;

}

.button3 * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .10s;
	font-size: 20px;
	font-weight: bolder;
}

.icon3 {
    opacity: 0;
	font-size: 45px;
}

.button3:focus {
/*
	width: 40px;
	height: 40px;
    border-radius: 50%;
*/
	background:-webkit-gradient(linear,0 0,0 100%,from(#006400),to(#40A040));
	background:-moz-linear-gradient(top,#006400,#40A040);
	background:#006400;

}

.button3:focus .text3 {
    opacity: 0;
	font-size: 17px;
	font-weight: bolder;
}

.button3:focus .icon3 {
    opacity: 1;
    transition-delay: .2s;
	font-size: 25px;
}


/* Boton de "Cerrar sesion" (en menu) */

.button4 {
    position: relative;
    width: 100%;
    height: 40px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .2s,
        border-radius .2s;
	font-size: 15px;

	background:-webkit-gradient(linear,0 0,0 100%,from(#ff6666),to(#990000));
	background:-moz-linear-gradient(top,#ff6666,#990000);
	background:#ff6666;

}

.button4 * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .10s;
	font-size: 15px;
}

.icon4 {
    opacity: 0;
	font-size: 45px;
}

.button4:focus {
/*
	width: 40px;
	height: 40px;
    border-radius: 50%;
*/
	background:-webkit-gradient(linear,0 0,0 100%,from(#990000),to(#ff6666));
	background:-moz-linear-gradient(top,#990000,#ff6666);
	background:#990000;

}

.button4:focus .text4 {
    opacity: 0;
	font-size: 14px;
	font-weight: bold;
}

.button4:focus .icon4 {
    opacity: 1;
    transition-delay: .2s;
	font-size: 15px;
}


/* Boton de "Adicionado" (productos en el carrito) */

.button5 {
    position: relative;
    width: 100%;
    height: 40px;
/*
    background-color: #0097f4;
*/
	color: #fff;
    border: none;

    border-radius: 3px;

    cursor: pointer;
    transition: width .2s,
        border-radius .2s;
	font-size: 15px;

	background:-webkit-gradient(linear,0 0,0 100%,from(#b1b1b1),to(#000000));
	background:-moz-linear-gradient(top,#b1b1b1,#000000);
	background:#b1b1b1;

}

.button5 * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .10s;
	font-size: 15px;
}

.icon5 {
    opacity: 0;
	font-size: 45px;
}

.button5:focus {
/*
	width: 40px;
	height: 40px;
    border-radius: 50%;
*/
	background:-webkit-gradient(linear,0 0,0 100%,from(#000000),to(#b1b1b1));
	background:-moz-linear-gradient(top,#000000,#b1b1b1);
	background:#000000;

}

.button5:focus .text5 {
    opacity: 0;
	font-size: 14px;
	font-weight: bold;
}

.button5:focus .icon5 {
    opacity: 1;
    transition-delay: .2s;
	font-size: 15px;
}

.nombre-sitio{
    margin-top: 5rem;
    text-align: center;
    cursor: default;
}
.nombre-sitio span{
    color:#037bc0;
}

.nombre-titulos{
    margin-top: 3rem;
    text-align: center;
    color:#000000;
    cursor: default;
}
.nombre-titulos span{
    color:#ce6e00; 
}