body{
	margin:0;
	font-family:Arial;
	user-select: none;
}

header{
	background-color:#d8eff7;
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/pattern-pag-mae.jpg');
}

.box{
	display:flex;
	gap:20px;
}

#first{
	justify-content: right;
	height: 100px;
}

#description{
	font-size:25px;
}


#logo{
	background-color:#034aa2;
	width: 28%;
	margin: 50px 0;
	height: 100px;
}

#shopbasf{
	font-size:50px;
	margin-left:10%;
	margin-bottom:50px;
	border-right: solid 1px black;
	padding: 10px 20px;
}

#pais{
	font-size:35px;
	line-height: 75px;
}

.a-esc{
	color:#004a96;
	font-weight:bold;
}

#intro{
	text-align:center;
	width: 60%;
	margin: 80px auto;
	font-size:20px;
	line-height: 30px;
}



.container-shops{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap: 50px;
	margin: 30px 100px;
}

.container-shops > div{
	background-color:#f2f2f2;
	width: 320px;
	height: 570px;
}

.imagem {
	width: 320px;
	height: 200px;
	background-size: cover;
}

#cuidados-pessoais {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-cuidados-pessoais.jpg');
}
#nutricao-humana {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-nutri%C3%A7%C3%A3o-humana.jpg');
}
#calcados {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-cal%C3%A7ados.jpg');
}
#cuidados-casa {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-cuidados-com-a-casa.jpg');
}
#revestimentos {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/quimicos_para_revestimentos.png');
}
#nutricao-animal {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-nutri%C3%A7%C3%A3o-animal.jpg');
}
#plasticos-engenharia {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-plasticos-para-engenharia2.jpg');
}
#farma {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-solu%C3%A7%C3%B5es-farmac%C3%AAuticas.jpg');
}
#surfactantes {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-surfactantes.jpg');
}
#acucar {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/Formuladores.jpg');
}
#pet {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-pet.jpg');
}
#reciclagem-mecanica {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-reciclagem-mec%C3%A2nica.jpg');
}
#aditivos-plasticos {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-aditivos-plasticos.jpg');
}
#quimicos-industriais {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-quimicos-industriais.jpg');
}
#sustentabilidade {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-sustentabilidade.jpg');
}
#isocianatos {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/isocianatos.jpg');
}
#mineria {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/mineria.jpeg');
}
#repintura {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/repintura.png');
}
#isobionics {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/shop-isobionics.png');
}
#repinturabr {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/repinturabr.JPG');
}

#agnique {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/agnique.jpg');
}

#tintasAutomotivas {
	background-image: url('https://promo.basf.com/campaign/Interno/pagina-mae-v2/repintura.png');
}


.titulo {
	font-size: 35px;
	padding: 20px;
}

.descricao {
	padding: 0 20px;
	height: 170px;
}

.fita {
   width: 320px;
	height: 10px;
}

.simbolo {
   width:22px;
	height:22px;
	padding: 1px;
	border: 2px solid #c50022;
	border-radius: 50%;
	color: #c50022;
	text-align:center;
	font-size:20px;
	display: inline-block;
}

.link {
	padding-bottom: 70px;
	display: inline-block;
}

.link a {
   padding-left: 5px;
	text-decoration: none;
	transition: 0.2s all;
	font-weight: bold;
}

.link a:hover {
	letter-spacing: 0.8px;
}

.box-link{
	margin:10px 25px;
}

/*VERMELHO*/
.fita-vermelho {
	background-color: #c50022;
}

.simbolo-vermelho {
	border: 2px solid #c50022;
	border-radius: 50%;
	color: #c50022;
}

.link-vermelho a {
	color: #c50022;
}

/*LARANJA*/
.fita-laranja {
	background-color: #f39500;
}

.simbolo-laranja {
	border: 2px solid #f39500;
	border-radius: 50%;
	color: #f39500;
}

.link-laranja a {
	color: #f39500;
}

/*VERDE-CLARO*/
.fita-verde-claro {
	background-color: #65ac1e;
}

.simbolo-verde-claro {
	border: 2px solid #65ac1e;
	border-radius: 50%;
	color: #65ac1e;
}

.link-verde-claro a {
	color: #65ac1e;
}

/*AZUL-CLARO*/
.fita-azul-claro {
	background-color: #21a0d2;
}

.simbolo-azul-claro {
	border: 2px solid #21a0d2;
	border-radius: 50%;
	color: #21a0d2;
}

.link-azul-claro a {
	color: #21a0d2;
}

/*AZUL-ESCURO*/
.fita-azul-escuro {
	background-color: #004a96;
}

.simbolo-azul-escuro {
	border: 2px solid #004a96;
	border-radius: 50%;
	color: #004a96;
}

.link-azul-escuro a {
	color: #004a96;
}

/*VERDE-ESCURO*/
.fita-verde-escuro {
	background-color: #00793a;
}

.simbolo-verde-escuro {
	border: 2px solid #00793a;
	border-radius: 50%;
	color: #00793a;
}

.link-verde-escuro a {
	color: #00793a;
}

footer{
	background-color:#7c7c7c;
	color:white;
	padding: 5% 10%;

}

ul{
	list-style-image: url(https://promo.basf.com/campaign/Interno/pagina-mae-v2/chevron-branco.png);
	list-style-position: inside;
}

li a{
	text-decoration: none;
	line-height: 30px;
	color:white;
}

li a:hover{
	opacity: 0.4;
}

#um{
	display:flex;
	gap:10%;
	justify-content: center;
	
}

#dois{
	font-size:14px;
	font-style: italic;
	opacity:0.4;
	padding:0 5%;
	text-align: center;
}

#general li a {
	opacity:0.4;
}

#general li a:hover {

	opacity:1;
}

#general{
	display: flex;
	font-size:14px;
	margin-top:100px;
	justify-content: center;
}

#general li{
	padding: 0 20px;
}


.ot-sdk-show-settings{
    margin: 10px 110px;
	background-color: #7c7c7c;
	border-color: #FFF !important;
    border: solid 1px;
    color: #FFF !important;    
    border-radius: 3px; 
	/* border: none !important;     */
}

.ot-sdk-show-settings:hover{
    background-color: #004A96 !important;
    color: #FFF !important;
    box-shadow: none; 
}

@media only screen and (max-width: 600px) {
  
  .box{
  	display:block;
  }

  #logo{
  	margin:0;
  	width:100%;
  }


  #shopbasf{
  	margin:20px 0 0 0;
  	text-align: center;
  	font-size:40px;
  }

  #intro{
  	width:80%;
  }

  #pais{
  	text-align:center;
  	line-height: 40px;
  	padding-bottom: 20px;
  	font-size:30px;
  }

  #um{
  	flex-direction: column;
  }

  #general{
  	flex-direction: column;
  }

}