@media screen and (min-width : 360px){

	/* up kids */
	#up-kids .miolo .conteudo .listagem { overflow:hidden }
	#up-kids .miolo .conteudo .listagem .item { margin-right:3.581%; width:48.209%; float:left }
	#up-kids .miolo .conteudo .listagem .item:nth-child(1n) ~ .item { margin-top:0% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(2n) { margin-right:0% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(2n) ~ .item { margin-top:3.581% }

}
@media screen and (min-width : 480px){

	/* entrada */
	#marcas-entrada .lista figure { max-width: 102px; }

	/* contato */
	#form-contato > div input[type=text] { width:94%; padding:2.5% }
	#form-contato > div select { padding:2.5% }
	#form-contato > div textarea { width:94%; padding:2.5% }

	/* seja um lojista */
	#form-seja-um-lojista > div input[type=text] { width:94%; padding:2.5% }
	#form-seja-um-lojista > div select { padding:2.5% }
	#form-seja-um-lojista > div textarea { width:94%; padding:2.5% }

	/* representantes */
	#form-representantes > div input[type=text] { width:94%; padding:2.5% }

	/* area restrita */
	#form-area-restrita > div input[type=text],
	#form-area-restrita > div input[type=password] { width:94%; padding:2.5% }

	/* trabalhe conosco */
	#form-trabalhe > div input[type=text],
	#form-trabalhe > div input[type=file] { width:95%; padding:2.5% }
	#selecionar-arquivo { top:15px }

}
@media screen and (min-width : 640px){

	/* entrada */
	#entrada .mobile > div { width:46%; padding:2%; float:left }

	#marcas-entrada .lista figure { max-width: 112px; }

	#slides #seta-anterior { position: absolute; display: block; top: 50%; margin-top:-59px; left: 30px; width: 117px; height: 100%; background: url('../img/seta-anterior.png') top left no-repeat; background-size: 117px; cursor: pointer; z-index: 2; }
	#slides #seta-proximo { position: absolute; display: block; top: 50%; margin-top:-59px; right: 30px; width: 117px; height: 100%; background: url('../img/seta-prox.png') top left no-repeat; background-size: 117px; cursor: pointer; z-index: 2; }

	/* institucional */
	#institucional .recuo > figure { padding:40px 0 0 0; }
	#institucional .recuo > h1 { margin:30px 0; }
	#institucional .recuo > h2 { margin:30px 0; }

	#institucional .mvv > div { width:25.3%; float:left; }

	#institucional .linha-tempo .mobile > div p.ano { margin-bottom:10px }
	#institucional .linha-tempo .mobile > div figure { width:auto; margin:0 10px 0 0; float:left }
	#institucional .linha-tempo .mobile > div > div { width:65%; margin-top:-5px; float:left }
	
	/* marcas */
	#marcas nav .mobile { display:none }
	#marcas nav .desktop { display:block; overflow:hidden; text-align:center }
	#marcas nav .desktop figure { display:inline-block; width:auto; height:auto }
	#marcas nav .desktop figure + figure { margin-left:15px; }
	#marcas nav .desktop figure img { width:auto; height:auto; vertical-align:middle }

	#marcas .marca .detalhe { width:380px; padding:35px 50px; }
	#marcas .marca .detalhe figure { margin-bottom:10px; }
	#marcas .marca .detalhe .links { margin-top:10px; }
	#marcas .marca a.seta { position:absolute; display:block; top:20px; float:none; z-index:997 }
	#marcas .marca a.anterior { left:0 }
	#marcas .marca a.proxima { right:0 }

	/* trabalhe conosco */
	#selecionar-arquivo { top:18px; right:15px; }

	#trabalhe-conosco .miolo .beneficios .lista > .item { width:40.8%; margin:0 10px 20px 10px; }

}
@media screen and (min-width : 768px){

	/* topo */

	/*
	header figure { text-align:left }
	header .menu { margin-bottom:0 }
	header nav { margin-bottom:0 }
	header nav .mobile { display:none }
	header nav .desktop { display:block; overflow:hidden }
	header nav .desktop a { display:block; width:auto; height:auto; background:#fff; font-size:11.95px; color:#000; text-transform:uppercase; text-decoration:none; padding:4px 0.84%; float:left }
	header nav .desktop a.ativo,
	header nav .desktop a:hover { background:#2273af; color:#FFFFFF; }

	header nav .desktop.es a { padding:4px 0.78% }

	header .idiomas { position:absolute; width:auto; height:auto; top:10px; right:0 }
	*/
	
	/* entrada */
	#marcas-entrada { padding: 10px 0px; }
	#marcas-entrada .lista figure { margin: 0px 30px; }

	#entrada .mobile > div { width:16%; padding:4% 2%; float:left }

	/* institucional */
	#institucional .recuo > .esquerda { width:48.5%; text-align:right; margin-right:3%; margin-top:-3px; float:left }
	#institucional .recuo > .esquerda h3 { font-size:35px; line-height:50px; text-transform:uppercase; font-weight:400; color:#fff; }
	#institucional .recuo > .direita { width:48.5%; margin-bottom:0; float:left }

	#institucional .mvv { margin-top:25px }

	#institucional .canais-de-distribuicao { padding:60px 0px }

	#linha-tempo .mobile { display:none }
	#linha-tempo .desktop { display:block; width:auto; height:auto; background:url(../img/fundo-linha-tempo.png) top center repeat-y }
	#linha-tempo .desktop > div { width:100%; height:auto; overflow:hidden; margin-bottom:15px }
	#linha-tempo .desktop > div > div.ano { width:46%; font-size:39px; font-weight:bold }
	#linha-tempo .desktop > div > div.separador { position:absolute; width:20px; height:100%; top:0; left:50%; margin-left:-10px; background:url(../img/ano.png) center no-repeat }
	#linha-tempo .desktop > div > div.conteudo { width:46% }
	#linha-tempo .desktop > div > div.conteudo > figure { width:50%; height:auto; margin-right:15px; float:left }
	#linha-tempo .desktop > div > div.conteudo > figure img { width:100%; height:auto; vertical-align:middle }
	#linha-tempo .desktop > div > div.conteudo > div { width:45%; font-size:12px; line-height:18px; float:left }
	
	#linha-tempo .desktop > div.direita > div.ano { float:left; text-align:right }
	#linha-tempo .desktop > div.direita > div.conteudo { float:right }
	#linha-tempo .desktop > div.esquerda > div.ano { float:right }
	#linha-tempo .desktop > div.esquerda > div.conteudo { float:left }
	#linha-tempo .desktop > div.esquerda > div.conteudo figure { margin-left:15px; margin-right:0; float:right }
	#linha-tempo .desktop > div.esquerda > div.conteudo > div {  }

	/* up kids */
	#up-kids .miolo .conteudo > div:nth-child(1n) ~ div { margin-top:70px }
	#up-kids .miolo .conteudo h1 { font-size:50px }
	#up-kids .miolo .conteudo p { padding-top:25px }
	#up-kids .miolo .conteudo ul { padding-top:25px }
	#up-kids .miolo .conteudo .breve { overflow:hidden }
	#up-kids .miolo .conteudo .breve .texto { margin-right:4.054%; width:45.811%; float:left }
	#up-kids .miolo .conteudo .breve .imagem { margin-top:0px; width:50.135%; float:right }
	#up-kids .miolo .conteudo .listagem .item { width:30.945% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(2n) { margin-right:3.581% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(2n) ~ .item { margin-top:0% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(3n) { margin-right:0% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(3n) ~ .item { margin-top:3.581% }
	#up-kids .miolo .conteudo .listagem .item:nth-child(3n+1) { clear:both }

	/* contato */
	#contato .miolo h1 { margin-bottom:25px }
	#contato .miolo .formulario { width:48%; margin:0 4% 0 0; float:left }
	#contato .miolo .mapa-end { width:48%; margin-top:0px; float:left }

	#form-contato > div input[type=text],
	#form-contato > div textarea { width:93.8% }
	#form-contato > input[type=submit] { float:right }

	/* seja um lojista */
	#seja-um-lojista .miolo h1 { margin-bottom:25px }
	#seja-um-lojista .miolo .mapa-end { width:48%; margin:0 4% 0 0; float:left }
	#seja-um-lojista .miolo .formulario { width:48%; margin-top:0px; float:left }

	#form-seja-um-lojista > div input[type=text],
	#form-seja-um-lojista > div textarea { width:93.8% }
	#form-seja-um-lojista > input[type=submit] { float:right }

	#seja-um-lojista .miolo.vantagens .lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-left: -30px; }
	#seja-um-lojista .miolo.vantagens .lista .bloco { margin-left: 30px; width: calc(50% - 30px); }
	#seja-um-lojista .miolo.vantagens .lista .bloco:nth-child(2n) ~ .bloco { margin-top: 30px; }
	#seja-um-lojista .miolo.vantagens .lista .bloco + .bloco { margin-top: 0px; }

	/* representantes */
	#representantes .miolo h1 { margin-bottom:25px }
	#representantes .miolo .formulario { width:430px; margin:auto }

	#form-representantes > div input[type=text] { width:93.8% }
	#form-representantes > input[type=submit] { float:right }

	/* area restrita */
	#area-restrita .miolo h1 { margin-bottom:25px }
	#area-restrita .miolo .formulario,
	#area-restrita .miolo .links { width:45.5%; float:left }
	#area-restrita .miolo .links { margin-top:28px }
	#area-restrita .miolo .separador { width:2px; height:auto; min-height:185px; margin:0 30px; float:left }

	#form-area-restrita > div input[type=text],
	#form-area-restrita > div input[type=password] { width:93.5%; padding:3.3% }
	#form-area-restrita > input[type=submit] { float:right }
	
	/* trabalhe conosco */
	#trabalhe-conosco .miolo h1 { margin-bottom:25px }
	#trabalhe-conosco .miolo .formulario,
	#trabalhe-conosco .miolo .vagas { width:45.5%; float:left; color:#fff; }
	#trabalhe-conosco .miolo .vagas h2 { margin-bottom:25px; color:#fff; }
	#trabalhe-conosco .miolo .separador { width:2px; height:auto; min-height:335px; margin:0 30px; float:left }
	
	#trabalhe-conosco .miolo .formulario.en,
	#trabalhe-conosco .miolo .formulario.es { float:none; margin:0 auto }

	#selecionar-arquivo { top:12px; right:10px }
	#form-trabalhe > input[type=submit] { float:right }

	#trabalhe-conosco .miolo .beneficios .lista > .item { width:25.5%; margin:0 10px 20px 10px; }

}
@media screen and (min-width : 800px){
	
	/* topo */
	/*
	header nav .desktop a { padding:4px 1.05% }
	*/

	/* marcas */
	#marcas .marca a.seta { top:0; background-position:center }

}
@media screen and (min-width : 960px){

	/* entrada */
	#slides .imagem picture { display: flex; align-items: center; height: auto; }
	#slides .imagem picture img { position: relative; left: 0px; margin-left: 0px; width: 100%; max-width: none; height: auto; }

}
@media screen and (min-width : 980px){

	.menu-contato { padding-bottom: 60px; }

	/* topo */
	/*
	header nav .desktop a { padding:8px 2% }
	header nav .desktop.es a { padding:8px 1.94% }
	*/

	header .idiomas { top:12px }

	/* institucional */
	#institucional .recuo { width:740px; padding:70px 115px; margin:90px auto 160px auto }

	/* up kids */
	#up-kids .miolo { width:970px; margin:70px auto }
	#up-kids .miolo .conteudo { width:740px; padding:70px 115px }

	/* marcas */
	#marcas .marca { margin-top:450px }
	#marcas .marca .detalhe { margin-top:0 }
	#marcas .marca .detalhe figure { margin-bottom:5px }
	#marcas .marca .detalhe .links { margin-top:25px }

	/* contato */
	#contato .miolo { width:740px; padding:70px 115px; margin:90px auto 160px auto }
	#contato .miolo h1 { margin-bottom:60px; color: #fff; }
	
	#contato .miolo .formulario { width:325px; margin-right:60px; color: #fff; }
	#contato .miolo .mapa-end { width:355px }
	#mapa { margin-bottom:30px }

	/* seja um lojista */
	#seja-um-lojista .miolo { width:740px; padding:70px 115px; margin:90px auto 0px auto }
	#seja-um-lojista .miolo h1 { margin-bottom:60px; color: #fff; }
	
	#seja-um-lojista .imagem { width:970px; }

	#seja-um-lojista .miolo.vantagens { margin-top: 0px; padding:70px 115px; }
	#seja-um-lojista .miolo.vantagens .lista { margin-left: -60px; }
	#seja-um-lojista .miolo.vantagens .lista .bloco { margin-left: 60px; width: calc(50% - 60px); }

	#seja-um-lojista .miolo.grupo-cristina { margin-top: 0px; margin-bottom: 160px; padding:70px 115px; }

	#seja-um-lojista .miolo .formulario { width:325px; color: #fff; }
	#seja-um-lojista .miolo .mapa-end { margin-right:60px; width:355px }

	.styled-select select { width:107% !important; height:auto; background:transparent; line-height:1; border:0; border-radius:0; -webkit-appearance:none }	
	.styled-select { width:100%; height:auto; overflow:hidden; background:url(../img/seta-seletor.png) no-repeat right }

	/* representantes */
	#representantes .miolo { width:740px; padding:70px 115px; margin:150px auto 75px auto }
	#representantes .miolo h1 { font-size:35px; margin-bottom:60px }

	#form-representantes { width:80%; margin:30px auto 0 auto }

	/* area restrita */
	#area-restrita .miolo { width:740px; padding:70px 115px; margin:150px auto 75px auto }
	#area-restrita .miolo h1 { margin-bottom:60px }

	#area-restrita .miolo .separador { min-height:175px }

	/* trabalhe conosco */
	#trabalhe-conosco .miolo { width:740px; padding:70px 115px; margin:90px auto 75px auto }
	#trabalhe-conosco .miolo h1 { margin-bottom:60px; color: #fff; }

	#trabalhe-conosco .miolo .separador { min-height:343px }

	#trabalhe-conosco .miolo .vagas > div p { padding:12px 24px; background-position:96.5% 14px }
	#trabalhe-conosco .miolo .vagas > div:last-child { margin-bottom:0 }

}
@media screen and (min-width : 1024px){

	/* topo */
	/* 
	header nav .desktop a { padding:8px 1.895% }
	header nav .desktop.es a { padding:8px 2.15% }
	*/

	/* marcas */
	#marcas .marca { margin:250px auto 60px auto }

}
@media screen and (min-width : 1200px){

	.central { width:1200px }

	.menu-contato a { margin: 0px 20px; font-size: 20px; line-height: 1; }

	/*
	.midias-flutuantes { display:block; position:fixed; width:auto; height:auto; top:38%; left:0; z-index:998 }
	.midias-flutuantes a { display:block; width:40px; height:40px; line-height:40px; background:#fff; margin-bottom:2px; text-align:center }
	.midias-flutuantes a img { vertical-align:middle }
	*/

	.midias-flutuantes { display:block; position:fixed; width:auto; height:auto; top:38%; left:0; z-index:998 }
	.midias-flutuantes a { display:block; width:40px; height:40px; line-height:40px; background:#fff; margin-bottom:2px; text-align:center }
	.midias-flutuantes a img { vertical-align:middle }

	.midias-flutuantes > span { display:block; width:40px; height:40px; line-height:40px; margin-bottom:2px; text-align:center; background:url(../img/ico-configuracoes.png) center no-repeat #fff; background-size:70%; cursor:pointer; }
	.midias-flutuantes > span > span { display:none; position:absolute; width:auto; padding:0 15px; background:#fff; font-size:12px; text-align:left; font-weight:bold; text-transform:uppercase; left:42px; border:0; }
	.midias-flutuantes > span > span.br { min-width:202px; }
	.midias-flutuantes > span > span.en { min-width:111px; }
	.midias-flutuantes > span > span.es { min-width:211px; }
	.midias-flutuantes > span:hover > span { display:block; }

	/* topo */
	header { padding:0; }
	header .central { display: block; width: 1200px; }
	header figure { width:311px; padding:11px 0 11px 0; text-align:left }

	header .menu { position:absolute; width:auto; height:auto; top:0; left:340px; margin-top:0; margin-bottom: 0; }
	header .menu .sanduiche { display: none; }
	header .menu .desktop { display: flex; justify-content: space-between; position: relative; padding: 0px; width: 100%; height: auto; text-align: center; transform: none; transition: none; background-color: transparent; }
	header .menu .desktop nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
	header .menu .desktop nav a { display:block; width:auto; height:auto; font-size:12px; color:#000; text-transform:uppercase; text-decoration:none; padding:25.5px 20px; }
	header .menu .desktop.en a { padding:20.5px 20px }
	header .menu .desktop.en a h4 { font-size:10px; text-align:center }
	header .menu .desktop.es a { padding:20.5px 20px }
	header .menu .desktop.es a h4 { font-size:10px; text-align:center }
	header .menu .desktop nav a:hover { color: #2273af; }
	header .menu .desktop nav a.ativo { color: #2273af; }
	header .menu .desktop nav a + a { padding-top: 25.5px; }
	header .menu .desktop nav a + span { padding-top: 25.5px; }
	header .menu .desktop nav span + a { padding-top: 25.5px; }
	header .menu .desktop .fechar { display: none; }

	/* submenu nivel um */
	header .menu .desktop nav .submenu { position: relative; padding:25.5px 20px; background-position: top 3px right 0px; }
	header .menu .desktop nav .submenu .submenu-titulo { font-size:12px; color:#000; text-transform:uppercase; text-decoration:none; }
	header .menu .desktop nav .submenu .submenu-titulo:hover { color: #2273af; }
	header .menu .desktop nav .submenu .submenu-titulo.ativo { color: #2273af; }
	header .menu .desktop nav .submenu .submenu-itens { position: absolute; display: none; top: 63px; left: 50%; width: 100%; min-width: 170px; text-align: center; transform: translateX(calc(-50% - 0px)); }
	header .menu .desktop nav .submenu.submenu-clicado .submenu-titulo { color: #2273af; }
	header .menu .desktop nav .submenu.submenu-clicado .submenu-itens { margin-top: 0px; }
	header .menu .desktop nav .submenu.submenu-clicado .submenu-itens a:hover { color: #2273af; }
	header .menu .desktop nav .submenu:hover .submenu-titulo { color: #2273af; }
	header .menu .desktop nav .submenu:hover .submenu-itens { display: block; }
	header .menu .desktop nav .submenu:hover .submenu-itens a:hover { color: #2273af; }

	/*
	header nav { position:absolute; width:auto; height:auto; top:0; left:340px; margin-top:0 }
	header nav .desktop a { padding:24.5px 20px }
	header nav .desktop.en a { padding:24.5px 9px }
	header nav .desktop.en a h4 { font-size:10px; text-align:center }
	header nav .desktop.es a { padding:24.5px 6px }
	header nav .desktop.es a h4 { font-size:10px; text-align:center }
	*/
	header .idiomas { position:absolute; width:auto; height:auto; padding: 24.5px 0px 22.5px; margin: 0px; top:0px; right:0px }

	/* entrada */
	#marcas-entrada { padding: 10px 0px; }
	#marcas-entrada .lista figure { max-width: 132px; }
	#marcas-entrada .lista figure img { /*width: auto;*/ }

	#slides .imagem picture { display: block; height: 540px; }
	#slides .imagem picture img { position: absolute; top: 0px; left: 50%; margin-left: -960px; width: auto; max-width: 1920px; height: 540px; }

	#entrada .mobile { display:none }
	#entrada .desktop { display:block; width:100%; height:auto; overflow:hidden; white-space:nowrap }
	#entrada .desktop > div { display:inline-block; width:auto; height:100%; cursor:pointer }
	#entrada .desktop > div > div.ativo { position:absolute; width:100%; height:100%; top:0; left:0; opacity:0 }

	#entrada .desktop > div { width:13% }
	#entrada .desktop > div:nth-child(4) { width:22% }
	
	#entrada .desktop > div figure.branco,
	#entrada .desktop > div figure.preto { position:absolute; width:100%; height:auto; top:40%; text-align:center; opacity:1 }
	#entrada .desktop > div figure.branco img,
	#entrada .desktop > div figure.preto img { max-width:100%; height:auto; vertical-align:middle }

	#entrada .desktop > div figure.preto { opacity:0 }
	
	#entrada .desktop > div figure.branco figcaption,
	#entrada .desktop > div figure.preto figcaption { display:none; width:auto; height:auto; margin-top:10px; overflow:hidden }
	#entrada .desktop > div figure.branco figcaption a,
	#entrada .desktop > div figure.preto figcaption a { display:inline-block; width:auto; height:auto; margin:0 auto; padding:5px 10px; background:#f3e42b; font-size:12px; color:#000; font-weight:bold; text-transform:uppercase; text-decoration:none }

	/* institucional */
	#institucional .recuo { width:740px; padding:0 115px }
	#institucional .recuo > figure { padding:55px 0 0 0 }
	#institucional .recuo > h1 { margin:50px 0 70px 0; color:#fff; }
	#institucional .recuo > h2 { margin:50px 0 70px 0 }
	#institucional .recuo > .esquerda { width:45%; margin-right:5%; margin-top:-8px; margin-bottom:0 }
	#institucional .recuo > .esquerda h3 { line-height:55.5px }
	#institucional .recuo > .direita { width:50% }

	#institucional .mvv { margin-top:50px; padding-bottom:80px; }
	#institucional .mvv > div { width:196px; padding:30px 25px; } 

	#linha-tempo h1 { font-size:40px; margin-bottom:45px; color:#fff; }
	#linha-tempo .desktop > div { margin-bottom:35px; color:#fff; }

	/* trabalhe conosco */
	#trabalhe-conosco .miolo .beneficios { margin-top:70px; }
	#trabalhe-conosco .miolo .beneficios h2 { font-size:32px; margin-bottom:25px; }
	#trabalhe-conosco .miolo .beneficios .descricao { margin-bottom:40px; }

	#trabalhe-conosco .miolo .beneficios .lista > .item { width:23.5%; margin:0 20px 40px 20px; }

	/* rodape */
	footer .central { display: flex; align-items: center; justify-content: space-between; }
	footer .copyright { text-align: left; }
	footer .copyright { white-space: nowrap; }

	footer .nota-fiscal { display: flex; align-items: center; justify-content: space-between; border-left: 1px solid #ffffff; margin:0 0 0 50px; padding: 0 0 0 50px; max-width:auto; }
	footer .nota-fiscal > p { margin-bottom:0px; }
	footer .nota-fiscal form { display: flex; align-items: center; justify-content: space-between; }
	footer .nota-fiscal .fundo div { margin-bottom:0; }
	footer .nota-fiscal .fundo div.ultimo { display: flex; align-items: center; justify-content: space-between; margin-left: 10px; }
	footer .nota-fiscal .fundo input[type=submit] { float:none; margin: 0px 0px 0px 10px; }

}

@media screen and (min-width : 1440px){

	/* rodape */
	.internas footer { position:fixed; bottom:0; left:0; width:100%; height:auto; }

}