@charset "utf-8";

body {
	font: 100%/1.4 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background:url(../images/content_bg.png) repeat-x #50c4e8;
	color: #000;
    margin:0px;
    padding:0px;
    width:100%;
    overflow-x: hidden;
}

/* ~~ Seletores de elementos/tag ~~ */
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* ao remover a margem superior, as margens podem escapar das suas containing div. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 15px;
	padding-left: 15px; /* adicionando o padding para os lados dos elementos dentro dos divs, ao invés dos próprios divs o livra de qualquer combinação de modelo de caixa. Um div aninhado com padding lateral também pode ser usado como método alternativo. */
}

h1, h2, h3, h4, h5, h6{
	font-family:"ubuntubold", monospace;
	font-weight:normal;
}

a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}
/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #55c6e9;
	text-decoration: underline; /* a não ser que você estilize seus links para que pareçam extremamente únicos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado a mesma experiência hover do que uma pessoa usando um mouse. */
	text-decoration: none;
}


/* ~~o cabeçalho não tem uma largura definida. Ele pode ocupar toda a largura do layout. Possui um alocador de espaço de imagem que deve ser substituído pelo seu logotipo com link~~ */
.topoHeader {
    background-color: #26A1C9;
    width:100%;
}


.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

.glyphicon-menu-hamburger{
    color:#ffffff;
}

.topoHeader #primary-links{
	padding: 0;
	margin: 0;
	margin-top:25px;
    margin-left:200px;
}


.topoHeader #primary-links-mobile{
    padding: 0;
    margin: 0;
    margin-top:20px;
    margin-bottom:20px;
}

.topoHeader #primary-links li a, .topoHeader #primary-links-mobile li a {
    height:22px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    font-family: "ubuntubold", monospace;
    width: 100px;
    text-decoration:none;
    color:#ffffff;
    font-size:11px;
    display:block;
    white-space: nowrap;
}
.topoHeader #primary-links-mobile li a {
    width: 100% !important;
}


.topoHeader #primary-links li a:hover, .topoHeader #primary-links-mobile li a:hover, .topoHeader #primary-links li.current a , .topoHeader #primary-links-mobile li.current a{
    border: 2px solid #28A2C9;
    background: #ffffff;
    border-radius: 12px;
    color:#1e8eb1;
    display:block;
    white-space: nowrap;
}
.topoHeader #primary-links-mobile li a:hover, .topoHeader #primary-links-mobile li.current a{
    margin-left:30%;
    width:40% !important;
}


.content {
	padding-top:10px;
}


/* ~~ O rodapé ~~ */
.footer {
	background: #115367;
	padding-bottom:20px;
    bottom:0px;
    width:100%;
}


.footer .secondary-links{
	float:left;
	padding: 0;
	margin: 0;
	margin-top:20px;
}
.footer .secondary-links li{
	color:#FFFFFF;
	list-style:circle;
	margin:0 5px;
	height:17px;
	line-height:17px;
}
.footer .secondary-links li a{
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-decoration:none;
	color:#ffffff;
	font-size:12px;
	display:block;
    text-align: left;
    white-space: nowrap;
}




.footer .secondary-links li a:hover{
	text-decoration:underline;
}

.footer .payment_methods{
	background:url(../images/envio_bt_01.png) no-repeat;
	padding-left:11px;
	height:58px;
	margin-right:15px;
	float:left;
}


.footer .payment_methods .content_methods{
	float:left;
	background:url(../images/envio_bt_02.png) right no-repeat;
	padding-right:11px;
	height:58px;
}

.footer .payment_methods .content_methods .title{
	float:left;
	font-family: "ubuntubold", monospace;
	color:#115367;
	font-size:11px;
	padding-top:10px;
    padding-right:10px;
}




.footer .payment_methods .content_methods .title a{
	color:#115367;
	text-decoration:none;
}

.footer .payment_methods .content_methods .title a:hover{
	text-decoration:underline;
}

.footer .payment_methods .content_methods .separador{
	background:url(../images/separador.png) center center no-repeat;
	width:25px;
	padding:0 10px;
	height:50px;
	float:left;
}

.footer .payment_methods .content_methods .methods{
	float:left;
	padding-top:5px;
}

.footer .shipping_methods{
	background:url(../images/envio_bt_01.png) no-repeat;
	padding-left:11px;
	height:58px;
	float:left;
}

.footer .shipping_methods .content_methods{
	float:left;
	background:url(../images/envio_bt_02.png) right no-repeat;
	padding-right:11px;
	height:58px;
}


.footer .shipping_methods .content_methods .title{
	float:left;
	font-family: "ubuntubold", monospace;
	color:#115367;
	font-size:11px;
	padding-top:10px;
    padding-right:10px;
}





.footer .shipping_methods .content_methods .title a{
	color:#115367;
	text-decoration:none;
}

.footer .shipping_methods .content_methods .title a:hover{
	text-decoration:underline;
}



.footer .shipping_methods .content_methods .separador{
	background:url(../images/separador.png) center center no-repeat;
	width:25px;
	padding:0 10px;
	height:50px;
	float:left;
}

.footer .shipping_methods .content_methods .methods{
	float:left;
	padding-top:5px;
}

.footer .redes_sociais{
	float:right;
}

.footer .redes_sociais li{
	list-style:none;
	margin:5px 5px 0 0;
	display:inline-block;
}


.footer #copy{
	font-family: "ubuntubold", monospace;
	color:#32B1D8;
	font-size:11px;
	margin-left:5px;
	margin-top:25px;
}

/* ~~ flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}

.footer #meios_pagamento_reduzida{
    background-color: #ffffff;
    border-radius: 0 0 12px 12px;
    padding:10px;
}
.footer #meios_pagamento_reduzida a{
    text-decoration: none;
}


.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um div vazio como o elemento final que segue o último div flutuado (no #contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.bg-white{
    background-color: #ffffff;
}

.padding-xs-info{
    padding-top:12px;
}

/* DISPOSITIVOS MEDIA QUERIES */

/* xs sm - até 480px */
@media (max-width: 480px) {
    .footer .secondary-links li a{
        font-size:10px;
    }
    .footer .payment_methods .content_methods .title{
        font-size:8px;
        padding-right:10px;
    }
    .footer .redes_sociais li img{
        width:18px;
        height:18px;
    }
    .footer #copy{
        font-size:9px;
    }
    .footer .shipping_methods .content_methods .title{
        font-size:8px;
        padding-right:10px;
    }
    .cs_article p {
        font-size: 12px;
    }
    .cs_article h2 a {
        font-size:22px;
    }
}
/* xs sm md - até 790 */
@media (max-width: 790px) {
    .footer #copy {
        margin-top: 5px;
    }
}
/* iPad landscape · width: 1024px */
@media only screen and (min-width: 769px) and (max-width: 1281px) {
    .topoHeader #primary-links{
        margin-left:60px;
    }
}