@charset "UTF-8";
/* CSS Document */
body{margin: 0px; body{background-color: #fff0c7;background-image: url("../../cpt/fondo.jpg");	background-size: contain; background-repeat: none;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";text-decoration: none;}
	text-decoration: none;
}
.button
{transition-duration: 0.4s;
border: none;
font-size: .8em;
text-align: center;
border: 2px solid #1368af;}
.page-nav
{
	background-color: gold;
	background-image: url("../img/isocab.png");
	background-repeat: no-repeat;
	background-size: cover;
	height: 250px;
	position: relative;
}
.page-nav h1
{margin: 5px;
color:#000;
	font-size: 3em;
	text-shadow: 10px 5px 5px #fff;
	text-decoration: none;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";font-style: italic;
}
.logo{position: absolute;left: 50px; top: 90px; width: 25%;}
.logo img
{width: 50vw;}
.home
{position: absolute; right: 250px; bottom: 50px;}
.home img
{width: 50px; }
.formu
{position: absolute; right: 180px; bottom: 40px;}
.formu img
{width: 60px; }
.pedido
{background-color: #ffcb05;
border-radius: 6px;
	padding: 6px 10px;
position: absolute;
right: 50px;
bottom: 10px;
box-shadow: 10px 5px 5px #000;}
.pedido img
{width: 200px;}
.medios
{background-color: #00568a;
border-radius: 6px;
	padding: 6px 10px;
position: absolute;
right: 300px;
bottom: 10px;
box-shadow: 10px 5px 5px #000;}
.medios img
{width: 200px;}
.button-checkout
{
background-color: #ffcb05;
color:#000;
border-radius: 6px;
padding: 6px 10px;
position: absolute;
right: 15px;
bottom: 30px;}
.button-checkout:hover{
	background-color: #1368af;
	color: #fff;
}
.titulis
{width: 100vw;background-color:#000;
}
.titulis p
{	color: #ffcb05;
	font-size: .75em;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
padding: 5px;
max-width: 80vw;
margin: 0 auto;}
.page-content
{display: flex;
flex-wrap: wrap;
border: 1px solid #000;
justify-content: flex-start;
background-color: #ffcb05;}

.product-container
{margin: 20px;
padding: 5px;
	width: 100vw;
position: relative;
box-shadow: 0 3px 8px 0 rgba(0,0, 0, 0.2);background-color: #fff0c7;}
.product-container:hover{
	box-shadow: 0 5px 16px 0 rgba(0,0, 0, 0.8);
}
.product-container img
{/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
width: 90vw;}
.product-container img.pago
{width: 30%;
margin-left: 33%; margin-right: 33%;}
.product-container img:active:hover
{
width: 30vw;
z-index: 1000;}
.product-container h2
{font-size: 2em;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";color: #b20000;font-style: italic;}
.product-container h3
{font-size: 8em;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";}
.product-container p
{font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 2em;
color: #b20000;
font-style: italic;}
.button-add
{
background-color: #fbefc3;
color:#1368af;
border-radius: 6px;
padding: 6px 10px;
position: absolute;
right: 15px;
bottom: 30px;}
.button-add:hover{
	background-color: #1368af;
	color: #fff;
}

    
.close {
        float: right;
        font-weight: bold;
        color: red;
    }
    
    .content2 {
        margin: 0px auto;
        width: 100%;
        box-shadow: 0 2px 5px #666666;
        padding: 10px;
    }

@media only screen and (max-width: 1024px) and (min-width: 768px)
{.home
{position: absolute; right: 50px; bottom: 50px;}
.home img
{width: 50px; }
.formu
{position: absolute; right: 80px; bottom: 40px;}
	.medios
{
right: 50px;
bottom: -120px;
;}
	.logo{position: absolute;left: 300px; top: -20px; width: 25%;}
	.logo img
	{width: 40vw;}
	.home
{position: absolute; right: 200px; bottom: 50px;}
	.pedido img
{width: 100px;}
	.medios img
{width: 100px;}
	.product-container img
{/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
width: 90vw;}
	.product-container img.pago
{width: 20%;
margin-left: 38%; margin-right: 38%;}
	.product-container h3
{font-size: 5em;}
	.product-container h2
{font-size: 3.5em;}
		.page-nav
	{height: 120px;}
	.page-nav h1
	{font-size: 4em;}
	.page-nav p
	{font-size: 4em;}
}
@media screen and (min-width: 1025px)
{.home
{position: absolute; right: 250px; bottom: 50px;}

.formu
{position: absolute; right: 180px; bottom: 40px;}
	.pedido img
{width: 200px;}
	.medios img
{width: 200px;}
	.home
{position: absolute; right: 350px; bottom: 50px;}
	.product-container
{
	width: 21vw;}
	.product-container img.pago
{width: 40%;
margin-left: 28%; margin-right: 28%;}
	.product-container img
{/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
width: 20vw;}
	.product-container h3
{font-size: 2em;}
	.product-container h2
{font-size: 1.5em;}
	.page-nav
	{height: 130px;}
	.page-nav h1
	{font-size: 2em;
		bottom: 20px;}
	.logo{left: 500px;top: -20px; width: 25%;}
	.logo img{width: 500px;}
	.titulis p
{	color: #ffcb05;
	font-size: 1em;
max-width: 60vw;}
}