:root {
	--cor1: #f8f8f8;
	--cor2: #ffffff;
	--cor3: #808080;
	--cor4: #54565b;
	--cor5: #eeeeee;
}

@media all and (min-width:1020px) {	

	.intro {
		max-width: 900px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20px 10px;
	}

	.fundo2 {
		max-width: 880px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.fundo3 {
		/* border: 1px solid black; */
		width: 40%;
		text-align: left;
	}

	.fundo4 {
		/* border: 1px solid black; */
		width: 60%;
		text-align: right;
	}
	
	.cesta {
		width:200px; 
		margin:0px; 
	}

	.livrolista {
		width: 860px;
		min-height: 190px;
		margin: 30px 10px;
		padding: 20px;
	}

	.termos {
		width: 820px;
		padding: 40px;
	}

	.contactos {
		width: 860px;
		padding: 20px;
	}

	.livrolista2 {
	}
	
	.detalheslista {
		width: 380px;
	}
	.titulo {
		margin: 0px 0px 10px 0px;;
	}
	.paginalivro {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width:900px;
		/* border: 1px solid black; */
	}

	.descricaolivro {
		padding: 0px;
		width: 480px;
	}
	
	.detalheslivro {
		max-width: 300px;
		order: 2;
	}

	.detalheslivro0 {

		max-width: 530px;
		order: 1;
	}

	img.fotolivro {
		margin: 0px 20px 0px 0px;
	}

	.bannerlivro, .folheialivro {
		max-width: 900px;
	} 

	.encomenda {
		width: 270px;
	} 

	.form {
		width: 280px;
	}

	.resumoencomenda {
		width: 270px;
	}
	
	.fimencomenda {
		max-width: 580px;
	}

	.fimresumoencomenda {
		width: 270px;
	}

	.moldura {
		display: flex; 
		flex-wrap: wrap; 
		justify-content: space-between;
	}
}

@media all and (max-width:1019px) {

	.intro {
		max-width: 600px;
		margin: 20px 10px;
	}

	.fundo2 {
		max-width: 600px;
		margin: 20px 10px;
	}
	
	.livrolista {
		max-width: 580px;
		min-height: 170px;
		margin: 30px 10px;
		padding: 10px;
	}

	.termos, .contactos {
		max-width: 560px;
		padding: 20px;
	}
	
	.livrolista2 {
	}
	
	.titulo {
		margin: 0px 0px 10px 0px;
	}
	
	.detalheslista {
		max-width: 100%; 
	}

	.paginalivro, .folheialivro {
		max-width: 600px;
	}
	
	.descricaolivro {
		padding: 0px;
	}
	
	.detalheslivro {
		margin: 30px 0px;
		max-width: 580px;
	} 

	.detalheslivro0 {
		max-width: 580px;
	}

	img.fotolivro {
		margin: 0px 10px 0px 0px;
	} 

	.bannerlivro {
		max-width: 600px;
	} 

	.encomenda{
		max-width: 600px;
	} 

	.form {	
		width: 280px;
	}

	.fimresumoencomenda {
		max-width: 600px;
	}

	.fimencomenda {
		max-width: 600px;
	}

	.moldura {

	}
}

body {
background: var(--cor1);
font-family: Verdana;
font-size: 15px;
margin: 0px 0px 0px 0px;
color: var(--cor4);
}

h1 {
font-size: 26px;
font-weight: bold;
margin: 0px 0px 6px 0px;
color: var(--cor4);
}

h2 {
font-size: 15px;
font-weight: bold;
margin: 0px;
color: var(--cor4);
text-transform: uppercase;
}

svg {
width: 36px;
height: 36px;
fill: var(--cor4);
}

svg:hover {
fill: var(--cor3);
}

.titulo {
text-align: left; 
/* border: 1px solid black; */
}

.cesta {
position: relative;
background: var(--cor2); 
padding: 20px 5px 10px 5px; 
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.cesta::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 5px;
opacity: 0;
box-shadow: 0px 0px 5px rgba(18, 126, 201, 1);
/* -webkit-animation: fadeAnimation 3.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1); */
/* animation: fadeAnimation 3.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1); */
}

@-webkit-keyframes fadeAnimation {
0%, 80%, 100% {  opacity: 0; } 
30%, 50% {  opacity: 1; }
}


@keyframes fadeAnimation {
    0%, 80%, 100% {  opacity: 0; } 
    30%, 50% {  opacity: 1; }
}



.paginalivro {
margin: 20px 10px;
}

.detalheslivro {
border-radius: 5px;
background-color: var(--cor2);
padding: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.detalheslivro0 {
margin: 0px 0px;
text-align: left;
padding: 20px;
border-radius: 5px;
background-color: var(--cor2);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.livrolista {
background-color: var(--cor2);
border-radius: 5px;
/* text-align: left; */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.termos, .contactos {
margin: 30px 10px;
background-color: var(--cor2);
border-radius: 5px;
text-align: left;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.livrolista2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}

.detalheslista {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin: 0px 0px 5px 0px;
/* border: 1px solid red; */
}

.descricaolivro {
color: var(--cor4);
text-align: left;
}

img.fotolivro {
border-radius: 5px;
display: block;
width: 150px;
height: 150px;
float: left;
}

img.fotobanner {
width: 100%;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.bannerlivro {
margin: 20px 10px;
}

.folheialivro {
padding: 10px 0px; 
background-color: var(--cor2); 
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 
border-radius: 5px; 
color: var(--cor4);
margin: 30px 10px;
}

a.linkentrada {
color: var(--cor4);
text-decoration:none;
}

a.linkfundo {
color: var(--cor2);
text-decoration:none;
}


.txt10 {
font-size: 10px;
}

.fundo {
background-color: var(--cor4);
padding: 20px;
color: var(--cor2);
}

.resumoencomenda {
margin: 10px 0px 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
text-align: left;
padding: 10px;

box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.fimresumoencomenda {
margin: 10px 0px 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
text-align: left;
padding: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.fimfotoencomenda {
margin: 10px 0px 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
width: 290px;
height: 151.5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}

.fimencomenda {
margin: 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
text-align: left;
padding: 10px;
/* color: var(--cor3); */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.fotoencomenda {
margin: 10px 0px 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
width: 290px;
height: 151.5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}

.fotoenc {
border-radius: 5px;
width: 150px;
float: left;
}

.encomenda {
margin: 10px 0px;
background-color: var(--cor2);
border-radius: 5px;
text-align: left;
padding: 10px;
color: var(--cor4);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

}

.botoes {
margin: 10px 0px 10px 0px;
padding: 20px;
max-width: 580px;
background-color: var(--cor2);
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.form {
margin: 5px 0px 15px 0px;
background-color: var(--cor5);
border-radius: 5px;
padding: 5px;
width: 100%;
border: 1px solid var(--cor5);
}

.botao {
height: 35px;
width: 210px;
margin: 0px;
color: var(--cor1);
border-radius: 5px;
background-color: var(--cor3);
border: 1px solid var(--cor3);
}

.pagamentos {
height: 35px;
width: 210px;
margin: 0px;
color: var(--cor2);
border-radius: 18px;
background-color: #127ec9;
border: 1px solid #127ec9;
}

.pagamentos:hover {
background-color: #1d6495;
border: 1px solid #1d6495;
color: var(--cor1);
}

.pagamentospeq {
height: 30px;
width: 120px;
margin: 7px 0px;
color: var(--cor2);
border-radius: 15px;
background-color: #127ec9;
border: 1px solid #127ec9;
font-size: 11px;
}

.pagamentospeq:hover {
background-color: #1d6495;
border: 1px solid #1d6495;
color: var(--cor1);
}

.cancela {
height: 35px;
width: 210px;
margin: 0px;
color: var(--cor4);
border-radius: 18px;
background-color: var(--cor1);
border: 1px solid var(--cor4);
}

.cancela:hover {
background-color: var(--cor5);
}

.minibotao {
height: 26px;
width: 26px;
color: var(--cor4);
border-radius: 5px;
background-color: var(--cor5);
border: 1px solid var(--cor5);
font-size: 14px;
}

.moldura {
max-width: 900px; 
margin: 30px 10px; 
}

.cookies {
position: fixed;
bottom: 40px;
max-width: 800px;
/* margin: auto; */
padding: 5px 15px;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
background-color: var(--cor4);
color: var(--cor2);
border-radius: 5px;
/* border: 1px solid red; */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
margin: auto;
left: 0;
right: 0;
z-index: 99999998;
}

.fechaaviso {
height: 26px;
width: 26px;
color: var(--cor4);
border-radius: 5px;
background-color: var(--cor5);
border: 1px solid var(--cor5);
font-size: 14px;
}