@font-face

{
font-family: 'outfit';
src: url(Outfit-VariableFont_wght.ttf);
}

*
{
margin: 0 auto;
padding: 0;
font-family: 'outfit';
box-sizing: border-box;
}

nav {
width: 1280px;
height: 64px;
background-color: #2B2A2B;
color: white;
vertical-align: middle;
}
.logo {
margin: 14px 0px 14px 40px;
width: 213.86px;
height: 36px;
float: left;
box-sizing: border-box;
padding-top: 3px;
}
.cafedealtura {
float: left;
font-size: 23.46px;
font-weight: 300;
}
.tasita {
float: right;
}
.menu {
float: left;
margin: 24px 0 24px 62.02px;
font-size: 14px;
}
.tienda {
float: left;
}
.demas {
margin-left: 32px;
display: inline-block;
}
.telefononav {
height: 24px;
width: 134px;
float: left;
margin-left: 54.04px;
margin-top: 20px;
}
.icononav {
float: left;
}
.notelefononav {
float: right;
font-size: 14px;
margin-top: 4px;
}
.sesion {
width: 130px;
height: 40px;
background-color: #515051;
border-radius: 4px;
float: left;
padding: 12px 24px;
font-size: 14px;
margin-top: 12px;
margin-left: 24px;
}
.bolso {
float: right;
margin-top: 20px;
margin-right: 40px;
}

#presentacion
{
width: 1280px;
height: 486px;
padding-left: 40px;
padding-top: 48px;
padding-bottom: 48px;
padding-right: 40px;
background-color: white;
}

#manitocafe
{
float: right;
width: 588px;
height: 390px;
}

#texto
{
float: left;
}

#taza
{
width: 588px;
height: 24px;
margin-top: 79px;
margin-bottom: 16px;
color: #2A5B45;
font-weight: normal;
font-weight: 600;
font-size: 18px;
}

#mejorcafe
{
 width: 588px;
height: 88px;
margin-bottom: 16px;
font-weight: 600;
font-size: 40px;
}

#agricultor
{
width: 588px;
height: 32px;
margin-bottom: 16px;
font-weight: 400;
font-size: 14px;
}

#boton13
{
margin-bottom: 79;
width: 588px;
height: 40px;
float: left;
}

#origen
{
width: 168px;
height: 40px;
font-weight: 600;
font-size: 14px;
color: white;
display: inline-block;
background-color: #1F1815;
margin-right: 16px;
border-radius: 4px;
padding-top: 12px;
padding-left: 24px;
}

#comprarcafe
{
width: 137px;
height: 40px;
font-weight: 600;
font-size: 14px;
color: white;
display: inline-block;
background-color: #2A5B45;
border-radius: 4px;
padding-top: 12px;
padding-left: 24px;
}

#condiciones
{
width: 1280px;
height: 490px;
font-family:"outfit";
background-color:#cccccc;
 background-image: url("images/vasodecafe.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#principal
{
padding-top: 103px;
font-family:"outfit";
font-style: normal;
font-weight: 500;
font-size:24px;
line-height: 28px;
color:white;
height:28px;
text-align: center;
margin-bottom: 24px;
}
#cajas
{
width: 1000px;
height: 232px;
border-radius: 8px;
margin-right: 142px;
margin-left: 142px;
margin-top: 48px;
text-align: center;
}
#pedido
{
background-color: white;
width: 316px;
height: 232px;
float:left;
border-radius: 8px;
margin-right: 24px;
padding-top: 16px;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 32px;
}

#envio
{
background-color: white;
width: 316px;
height: 232px;
display: inline-block;
border-radius: 8px;
margin-right: 24px;
padding-top: 16px;
padding-left: 24px;
padding-right: 24px;
}

#descuentos
{
background-color: white;
width: 316px;
 height: 232px;
float:right;
border-radius: 8px;
padding-top: 16px;
padding-left: 24px;
padding-right: 24px;
}

#abc
{
margin-top: 16px;
font-size: 16px;
}

#abc2
{
margin-top: 16px;
font-size: 14px;
font-weight: 400;
}

#novedades
{
width: 1280px;
height: 603.39px;
background-color: rgb(255, 255, 255);
}

.novedadestitulo
{
margin-left: 580px;
padding-top: 40px;
font-size: 24px;
color: #2A5B45;
font-weight: 500;
}

.bolsascafe
{
width: 1260px;
height:391.39px;
margin-top: 40px;
margin-left: 40px;
}

.bolsacafe
{
width:282px;
height:391.39px;
margin-right: 24px;
display: inline-block;
text-align: center;
box-sizing: border-box;
padding-top:24px;
font-size: 14px;
border: solid 1px #E3DED7;
border-radius: 8px;
}
.fotocafe
{
display: inline-block;
width: 219.39px;
height: 219.39px;
}

.nombrecafe
{
margin-top: 24px;
font-weight: 600;
}

.precio
{
margin-top:12px;
}

.anadir
{
margin-top: 24px;
padding:8px;
width: 60px;
border-radius: 4px;
background-color: #2a5b45a6;
color:white;
}

.vertodos
{
margin:40px 549.5px;
width: 101px;
height: 24px;
display: inline-block;
}

.vertodostexto
{
float:left;
font-size: 14px;
margin-top: 4px;
text-decoration: underline;
font-weight: 600;
}

.flecha
{
float:right;
}

#faq
{
width: 1280px;
height: 604px;
background-color: #2A5B45;
color: white;
padding-top: 48px;
padding-bottom: 48px;
text-align: center;
 font-weight: 400;
font-size: 24px;
}

#preguntas
{
width: 668px;
margin-top: 24px;
margin-bottom: 24px;
}

#pregunta1
{
height: 136px;
border-radius: 10px;
padding-left: 24px;
padding-top: 24px;
margin-bottom: 16px;
background-color: white;
color: black;
text-align: left;
font-size: 18px;
font-weight: 600;
}

#respuesta1
{
font-size: 12px;
font-weight: 400;
margin-top: 16px;
}

#pregunta2
{
height: 168px;
border-radius: 10px;
padding-left: 24px;
padding-top: 24px;
margin-bottom: 16px;
background-color: white;
color: black;
text-align: left;
font-size: 18px;
font-weight: 600;
}

#respuesta2
{
font-size: 12px;
font-weight: 400;
margin-top: 16px;
}

#pregunta3
{
height: 72px;
border-radius: 10px;
padding-left: 24px;
padding-top: 24px;
 background-color: white;
color: black;
text-align: left;
font-size: 18px;
font-weight: 600;
}

#dudas
{
width: 178px;
height: 24px;
text-decoration: underline;
font-size: 14px;
}

#flechablanca
{
margin-left: 16px;
display: inline-block;
}

#shop
{
width: 1280px;
height: 480px;
padding-left: 40px;
padding-top: 48px;
padding-bottom: 48px;
padding-right: 40px;
background-color: white;
}

#cafeteria
{
float: right;
width: 588px;
height: 390px;
border-radius: 20px;
}

#texto2
{
float: left;
margin-top: 137px;
margin-bottom: 137px;
}

#pruebalo
{
width: 588px;
height: 24px;
margin-bottom: 16px;
color: #2A5B45;
font-weight: normal;
font-weight: 600;
font-size: 18px;
}

#visita
{
width: 588px;
height: 32px;
margin-bottom: 16px;
font-weight: 400;
font-size: 14px;
}

#como
{
height: 24px;
text-decoration: underline;
font-size: 14px;
text-align: left;
font-weight: 600;
}

#flechanegra
{
margin-left: 16px;
display: inline-block;
}

#contacto {
width: 1280px;
height: 552px;
background-color: #E3DED7;
font-size: 14px;
color: #6B7280;
}
.izq {
width: 588px;
height: 320px;
margin: 116px 0px 116px 40px;
float: left;
}
.entraencontacto {
font-size: 18px;
font-weight: 600;
color: #111827;
}
.parrafo1 {
margin-top: 12px;
}
.parrafo2 {
margin-top: 32px;
}
.direccioncontacto {
margin-top: 34px;
}
.tlfcontacto {
width: 144px;
height: 24px;
display: inline-block;
margin-top: 19px;
}
.notlfcontacto {
float: right;
margin-top: 2px;
}
.emailcontacto {
width: 178px;
height: 24px;
display: inline-block;
margin-top: 6px;
}
.emailcontactotexto {
float: right;
margin-top: 2px;
}
.trabajocontacto {
margin-top: 24px;
}
.ofertascontacto{
font-weight: 600;
text-decoration: underline;
color: #111827;
margin-left: 1px;
}
.dcha {
width: 588px;
height: 552px;
background-color: white;
float: left;
margin-left: 24px;
}
.formulariocontacto{
width: 470px;
height: 488px;
margin: 32px 0px 32px 67px;
}
FORM{
color:#374151;
font-size: 12px;
}
INPUT, .divtelefono{
width:470px;
height: 34px;
border:solid 1px #D1D5DB;
border-radius: 6px;
padding: 0 13px 0 13px;
font-size: 14px;
outline: none;
}
.divtelefono{
padding-left: 4px;
padding-right: 0px;
background-color: white;
}
.formemail{
margin-top:24px;
}
.formtelef{
margin-top:24px;
}
.inputtelefono{
width:420px;
height: 30px;
 border: none;
}
SELECT{
border: none;
outline: none;
}
TEXTAREA{
padding: 13px 17px;
margin-top: 44px;
width:470px;
height: 122px;
outline: none;
resize:none;
border-radius: 6px;
border:solid 1px #D1D5DB;
}
.privacidadycondiciones{
margin-top: 24px;
font-size: 14px;
}
.checkbox{
width:16px;
height: 16px;
float:left;
cursor:pointer;
opacity: 40%;
border-radius: 4px;
}
.textocondiciones{
float:left;
margin-left: 12px;
}
.formaceptar{
margin-top: 24px;
width: 90px;
height: 40px;
background-color: #2A5B45;
border-radius: 4px;
border:none;
color:white;
}

footer
{
width: 1280px;
height: 270px;
background-color: #1F1815;
color: white;
}
#parte1{
margin-top: 28.61px;
margin-left: 40px;
width: 1200px;
height: 204px;
float: left;
}
#logo2{
width: 216px;
height: 36px;
 float: left;
}
#cafedealtura2{
font-size:23.46px;
font-weight:300;
float: left;
margin-top: 3px;
}
#tasita2{
float: right;
padding-top: 5.51px;
}
.teayudamos{
margin-top: 16px;
float: left;
font-size: 18px;
font-weight: 500;
}
.footertelef{
width: 182px;
height: 48px;
box-sizing: border-box;
float:left;
margin-top: 16px;
background-color: #515051;
border-radius: 4px;
}
.footertelefimg{
float: left;
margin-top: 12px;
margin-left: 24px;
}
.footertelefno{
float: right;
margin-top: 16px;
margin-right: 24px;
font-size: 14px;
}

.footeremail
{
width: 232px;
height: 48px;
box-sizing: border-box;
float: left;
margin-top: 16px;
background-color: #515051;
border-radius: 4px;
margin-top: -3px;
}

.footeremailimg
{
float: left;
margin-top: 15px;
margin-left: 24px;
}

.footeremailtexto
{
float: right;
margin-top: 16px;
margin-right: 24px;
font-size: 14px;
}
.lista1
{
float:left;
margin-left: 345px;
margin-top: -106px;
font-size: 14px;
}

.lista2
{
float:left;
margin-left: 128px;
margin-top: -106px;
font-size: 14px;
}

LI
{
list-style: none;
line-height: 31px;
}

#parte2
{
background-color: #2B2A2B;
height: 40px;
width: 1280px;
font-size: 14px;
font-weight: 600;
color: white;
text-align: center;
padding-top: 12px;
}