/*
Theme Name: Icone 2019
Description: Uso Exclusivo Icone Sports. Proibido a cópia ou reprocução.
*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../roboto/fonts/roboto_regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light') ,url('../fonts/roboto/Roboto-Light.eot') format('embedded-opentype'), url('../fonts/roboto/Roboto-Light.woff2') format('woff2'), url('../fonts/roboto/Roboto-Light.woff') format('woff'), url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../roboto/fonts/roboto_medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'RobotoBold';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Bold'), local('Roboto-Bold') ,url('/fonts/roboto/Roboto-Bold.eot') format('embedded-opentype'), url('/fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('/fonts/roboto/Roboto-Bold.woff') format('woff'), url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'RobotoBoldCondensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Bold Consensed'), local('Roboto-Bold-Consensed') ,url('/fonts/roboto/RobotoCondensed-Bold.eot') format('embedded-opentype'), url('/fonts/roboto/RobotoCondensed-Bold.woff') format('woff'), url('/fonts/roboto/RobotoCondensed-Bold.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'RobotoLightCondensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Bold Consensed'), local('Roboto-Light-Consensed') ,url('/fonts/roboto/RobotoCondensed-Light.eot') format('embedded-opentype'), url('/fonts/roboto/RobotoCondensed-Light.woff') format('woff'), url('/fonts/roboto/RobotoCondensed-Light.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/icons-material.woff2) format('woff2');
}

textarea:focus, input:focus, a, button{
    border: 0;
    outline:none;
}

button{outline:0;}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
a{
	text-decoration: none;
	color:#666;	
}
a:hover{
	color:#333 !important;	
}
button{
	border: none;
	box-shadow: none;
	background: none;
	padding: 0px;
	margin:0;
	cursor: pointer;
	border: none;
    outline:none;
}
figure{
	border: none;
	box-shadow: none;
	background: none;
	padding: 0;
	margin:0;
}
body{
	background-color: #FFF;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#666;
}

.mobileView{
	display:none;
}

.desktopView{
	display:inline-block;
}
img{
	max-width: 100%;
	height: auto;	
}
@media screen and (max-width: 1024px) {
	.mobileView{
		display:inline-block;
	}
	.desktopView{
		display:none;
	}
}

.comumheader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 56px;
	background: #FFF;
	/* background-image: url(../imagens/bg_head.png); */
	background-repeat: repeat-x;
	box-shadow: none;
	z-index: 2;
}

.comumheader .btMenu{
	float: left;
	color: #FF7F00
}

.comumheader h1 {
	float: left;
	margin: 16px;
	clear: none;
}

.comumheader h1 a {
	float: left;
	width: 106px;
	height: 26px;
	background-image: url(../imagens/logoIconePequena.png);
	background-size: 100%;
	text-indent: -999px;
}


.comumheader nav {
	float: left;
	margin: 11px 16px;
}
@media screen and (max-width: 1024px) {
	.comumheader nav {
		display:none;
	}
	.comumheader h1 {
		margin: 16px 0 0;
	}
}

.comumheader nav a {
	font-size: 14px;
	text-decoration: none;
	color: #666;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 10px;
	display: inline-block;
}

.comumheader nav a:hover {
	color: #FF7F00;
}


header .areaUses{
	float:right;
}
header .areaUses .userLogin{
	float:left;
}
@media screen and (max-width: 640px) {
	header .areaUses .userLogin{
		display:none;
	}
}
header .areaUses .userLogin .thumb{
	float:left;
	width: 40px;
	height: 40px;
	border-radius: 20PX;
	overflow:hidden;
	margin-top: 8px;
}
header .areaUses .userLogin .thumb img{
	width: 100%;
	height:auto;
	
}
header .areaUses .userLogin .thumb i{
	font-size: 38px;
}
header .areaUses .userLogin span {
	float: left;
	margin: 20px 16px;
	font-size: 16px;
}


header .tag {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 20px;
	line-height: 16px;
	text-align: center;
	background-color: #FFF;
	box-shadow: 1px 1px 4px 0px rgba(0,0,0,.4);
	font-size: 11px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	color: #333;
	opacity: 0;
}

header .cartBoxArea {
	display: inline-block;
	position: relative;
	z-index: 9;
	overflow: hidden;
	width: 240px;
	height: 56px;
	float: right;
	padding: 8px 0 0px 16px;
	border-left: 1px solid #eee;
}

header .cartBoxArea .btCarrinho{
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}

header .cartBoxArea .btCarrinho i {
	float: left;
	margin: -5px 8px 0 -17px;
}

header .cartBoxArea.cheio .btCarrinho{
	color:#1cc304;
}
header .cartBoxArea.cheio .tag {
	opacity: 1;
}

header .boxCart {
	position: absolute;
	top: 55px;
	right: -40px;
	width: 500px;
	border-radius: 3px;
	background: #FFF;
	padding: 20px;
	box-shadow: 0px 1px 9px 0px rgba(0,0,0,.3);
	text-align: left;
	opacity: 0;
	transform: translateY(-50px);
	transition: opacity .3s ease, transform .3s ease; 
}

header .cartBoxArea:hover{
	transition: overflow 0s ease 0s;
	overflow: visible;
}

header .cartBoxArea.acende{
	transition: overflow 0s ease 0s;
	overflow: visible;
}

header .cartBoxArea.acende .boxCart{
	transition: opacity .3s ease, transform .3s ease;
	z-index: 1;
	transform: translateY(0px);
	opacity: 1;	
}

header .cartBoxArea:hover .boxCart{
	transition: opacity .3s ease, transform .3s ease;
	z-index: 1;
	transform: translateY(0px);
	opacity: 1;
}

header .boxCart .detMarcacao {
	position: absolute;
	top: -22px;
	right: 53px;
}

header .boxCart h3{
	border-bottom: 1px solid #DDD;
	padding-bottom: 16px;
	margin-bottom: 0px;
	font-size: 16px;
}

header .boxCart .btFechar{
	float:right;
	position: absolute;
	top: 0;
	right: 0;
	display:none;
}

header .boxCart .vasio{
	width: 100%;
	text-align: center;
	padding: 20px 0;
}

header .boxCart .itens{
	width: 100%;
	padding: 0;
	display:none;
}

header .boxCart .resumo{
	width: 100%;
	padding: 10px 20px;
	display:none;
	text-align: right;
	color:#333;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}
header .boxCart .btContinuarCompra{
	background-color: #1cc304; 
}
header .boxCart .btContinuarCompra:hover{
	background-color: #22E705;
}

header .cartBoxArea.cheio .boxCart .itens{
	display: inline-block;
}
header .cartBoxArea.cheio .boxCart .resumo{
	display: none;
}
header .cartBoxArea.cheio .boxCart .vasio{
	display:none;
}


header .boxCart .item{
	float:left;
	width:100%;
	padding: 8px 0px 8px 8px;
	border-bottom: 1px solid #EEE;
	transition: background-color .3s ease;
	cursor: pointer;
}
header .boxCart .item:last-child{
	border-bottom: none;
}

header .boxCart .item:hover{
	background-color:#EEE;
}

header .boxCart .itens .thumb{
	width: 80px;
	height: 80px;
	border: 1px solid #ddd;
	padding: 3px;
	float: left;
}

header .boxCart .itens .info {
	width: calc(100% - 136px);
	height: 80px;
	padding: 10px;
	float: left;
}

header .boxCart .itens .info .nome {
	float: left;
	width: 70%;
	font-size: 14px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	color: #333;
	padding: 8px 22px 0 0;
}
header .boxCart .itens .info .valorUnidade{
	float: left;
	font-size: 14px;
	width:30%;
	margin-top: 8px;
	display: none;
}
header .boxCart .itens .info .quantidade{
	float: left;
	font-size: 14px;
	margin-top: 8px;
}
header .boxCart .itens .info .subTotal{
	float: left;
	font-size: 14px;
	margin-top: 8px;
	margin-left: 16px;
	display:none;
}
header .boxCart .itens .info .btRemoveItem{
	float: right;
}
header .boxCart .itens .info h4{
	margin-bottom: 4px;
}
header .boxCart .itens .info span.valor{
	color:#333;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}
header .boxCart .itens .remove {
	float: left;
	font-size: 16px;
	width: 56px;
	padding-top:10px;
}



header .boxCart .acao{
	border-top: 1px solid #DDD;
	padding-top: 16px;
}

@media screen and (max-width: 960px) {
	header .boxCart {
		right: 6px;
		width: calc(100% - 12px);
		padding: 20px 8px;
	}
	header .boxCart .detMarcacao {
		right: 22px;
	}
	header.logon .boxCart .detMarcacao {
		right: 82px;
	}
	header .boxCart .itens {
		padding: 8px 0px 8px 0px;
		max-height: 240px;
		overflow: auto;
	}
	header .boxCart .itens .info {
		padding: 6px 0 0 7px;
	}
	header .boxCart .itens .info .valorUnidade {
		width: 30%;
		font-size: 12px;
	}
	header .boxCart .itens .info .quantidade {
		float: left;
		font-size: 12px;
		margin-top: 8px;
	}
	header .boxCart .itens .info .subTotal {
		float: left;
		font-size: 12px;
		margin-top: 8px;
		margin-left: 16px;
	}
	header .boxCart .itens .info .btRemoveItem {
		float: right;
		padding: 10px;
	}
	header .boxCart .itens .info .nome {
		font-size: 13px;
	}
	header .boxCart .acao .btAbreCarrinho {
		float: right;
		margin-bottom: 8px;
	}
	header .cartBoxArea:hover .boxCart{
		position:fixed;
	}
	header .cartBoxArea.acende .boxCart{
		position:fixed;
	}
	
	header .cartBoxArea:hover{
		transition: overflow 0s ease 0s;
		overflow: visible;
	}
	
	header .cartBoxArea.acende{
		transition: overflow 0s ease 0s;
		overflow: visible;
	}

	header .cartBoxArea .btCarrinho i {
		float: left;
    	margin: -1px 7px 0 -10px;
	}
	
}


.comumheader .notificacoes {
	float: left;
	margin-right: 8px;
}
.comumheader .notificacoes a {
	text-decoration: none;
	color: #666;
	padding: 16px;
	display: inline-block;
}
.comumheader .entrar {
	float: left;
	border-left: 1px solid #ccc;
	margin: 12px 0;
}
.comumheader .entrar a {
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FF7F00;
	padding: 7px 16px 5px;
	display: inline-block;
}

.comumheader .entrar a i {
	float: right;
	margin: -4px 0 0 16px;
}

@media screen and (max-width: 1024px) {
	.comumheader .entrar {
	float: left;
		border-left: none;
		margin: 12px 0;
	}
	.comumheader .entrar a span {
		display:none;
	}
	.comumheader .entrar a i {
		float: right;
		margin: -2px 0 0 0px;
	}
	
}
@media screen and (max-width: 410px) {
	.comumheader .entrar {
		display:none;
	}
}




.menuGeral {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: 0;
	overflow: hidden;
	height: 0;
	transition: height 0s ease .5s;
	z-index: 99;
}


.menuGeral.aberto{
	transition: height 0s ease 0s;
	height: 100%;
	
}

.menuGeral .areaContorno{
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: RGBA(0,0,0,0.5);
	opacity: 0;
	transition: opacity .4s ease;
}
.menuGeral.aberto .areaContorno{
	opacity: 1
}
.fltRight{
	float:right;
}
.menuArea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: #EEE;
	overflow-y: scroll;
	overflow-x: hidden;
	transform: translateY(-500px);
	transition: transform .4s ease;
}
.menuGeral.aberto .menuArea {
	transform: translateY(0);
}

@media screen and (max-width: 1024px) {
	.menuArea {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% - 64px);
		height: 100%;
		background: #FFF;
		overflow-y: scroll;
		overflow-x: hidden;
		transform: translateX(-100%);
	}
	.menuGeral.aberto .menuArea {
		transform: translateY(0);
		transform: translateX(0px);
	}
}

.menuGeral .logoIcone {
	width: 140px;
	margin: 40px;
	height: auto;
	float:left;
	margin-right: calc(100% - 140px);
}

.menuGeral .areaClienteEntra {
	float: right;
	position: absolute;
	height: 100%;
	width: 530px;
	top: 0;
	right: 0;
	background-color: #FFF;
	padding: 36px 35px 25px 150px;
	background-image: url(../imagens/bgMenuGeral.png);
	background-repeat: no-repeat;
}

.btMedio {
	border: none;
	background: #FFF;
	background-image: url(../imagens/bgButtonMedioBranco.png);
	background-position: bottom;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,.3);
	line-height: 100%;
	display: inline-block;
	padding: 16px;
	font-size: 14px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	border-radius: 3px;
	color: #666;
	transition: background-position .3s ease, box-shadow .3s ease;
	background-repeat: repeat-x;
}
.btMedio i {
	float: left;
	margin: -5px 16px -5px 0;
	color: #FFF;
}
.btMedio i.right {
	float: right;
	margin: -5px 0 -5px 16px;
	color: #FFF;
}
.btMedio img {
	float: left;
	margin: -5px 16px -5px 0;
	color: #666;
	max-height: 24px;
}

.btMedio:hover {
	background-position: right 50px;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,.2);
}

.btGrande {
	border: none;
	background: #FFF;
	background-image: url(../imagens/bgButtonMedioBranco.png);
	background-position: bottom;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,.3);
	line-height: 100%;
	display: inline-block;
	padding: 22px;
	font-size: 16px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	border-radius: 3px;
	color: #666;
	transition: background-position .3s ease, box-shadow .3s ease;
	background-repeat: repeat-x;
}
.btGrande i {
	float: left;
	margin: -5px 16px -5px 0;
	color: #FFF;
}
.btGrande i.right {
	float: right;
	margin: -5px 0 -5px 16px;
	color: #FFF;
}
.btGrande img {
	float: left;
	margin: -5px 16px -5px 0;
	color: #666;
}

.btGrande:hover {
	background-position: right 50px;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,.2);
}



.btSimples {
	border: none;
	background-position: bottom;
	padding: 16px;
	line-height: 100%;
	display: inline-block;
	font-size: 14px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	transition: color .3s ease;
}

.btSimples.icon {
	padding: 10px;
}
.btSimples:hover {
	color: #FF7F00;
}

.btSimples i.left {
	float: left;
	margin: -5px 12px -5px 0;
	color: #333;
}

.btSimples i.right {
	float: right;
	margin: -5px 0 -5px 16px;
}

.btFloat {
	position: fixed;
	width: 64px;
	height: 64px;
	background: #FFF;
	border-radius: 32px;
	bottom: 16px;
	right: 16px;
	color: #FF7F00;
	box-shadow: 1px 1px 6px 0px rgba(0,0,0,.2);
	transform: scale(0);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	z-index: 9;
}

.btFloat.visible {
	transform:scale(1);
	opacity: 1;
}
.btFloat:hover {
	background: #FF7F00;
	color: #FFF;
}


@media screen and (max-width: 1024px) {
	.menuGeral .areaClienteEntra {
		width: 100%;
		display: inline-block;
		padding: 16px;
		height: auto;
		position: relative;
		background: no-repeat;
	}
}

.menuGeral .areaClienteEntra .tumb{
	float:left;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background:#EEE;
	overflow: hidden;

}

.menuGeral .areaClienteEntra .logIn{
	display: none;
}
.menuGeral .areaClienteEntra .menuCliente p{
	font-size: 16px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	color:#999;
}
.menuGeral .areaClienteEntra .menuCliente a {
	float: left;
	width: calc(100% - 60px);
	margin-left: 46px;
	padding: 12px 0;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	color: #FF7F00;
	font-size: 16px;
}


.menuGeral .areaClienteEntra .tumb i{
	font-size: 40px;
	color:#CCC;
}

.menuGeral .areaClienteEntra .tumb img{
	width: 100%;
	height: auto;
}

.menuGeral .areaClienteEntra span {
	float: left;
	margin: 10px;
	font-size: 18px;
}

.menuGeral .areaClienteEntra p {
	display: inline-block;
	width: calc(100% - 10px);
	padding: 26px 0px 16px 4px;
	font-size: 15px;
	float: left;
	line-height: 140%;
}

@media screen and (max-width: 1024px) {
	.menuGeral .areaClienteEntra a.entrar {
		float: right;
		margin-top: 7px;
		color: #FF7F00;
	}
	.menuGeral .areaClienteEntra a.entrar span {
		float: left;
		margin: 2px 16px;
		font-size: 18px;
	}
	.menuGeral .areaClienteEntra p {
		display:none;
	}

}
@media screen and (max-width: 410px) {
	.menuGeral .areaClienteEntra a.entrar{
		float:right;
	}
	.menuGeral .areaClienteEntra a.entrar span {
		display: none;
	}
}


.menuGeral .areaClienteEntra span {
	float: left;
	margin: 10px;
	font-size: 18px;
}


.menuGeral .areaClienteEntra .btNovoUsuario {
	width: 100%;
	margin-top: 30px;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	padding: 20px;
	text-align: center;
}

.menuGeral .links {
	float: left;
	width: calc(50% - 230px);
	padding: 8px 0;
}
.menuGeral .subLinkDesk {
	float: left;
	width: calc(50% - 270px);
	padding: 8px 0;
}
.menuGeral .subLinkDesk a{
	float:left;
	width: calc(100% - 60px);
	margin-left: 46px;
	padding: 10px 0;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.menuGeral h3 {
	font-weight: normal;
	font-size: 18px;
	color: #999;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	margin-left: 46px;
	margin-bottom: 7px;
}
.menuGeral .mobile{
	display:none;
}
.menuGeral .links a{
	float:left;
	width: calc(100% - 60px);
	margin-left: 46px;
	padding: 12px 0;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	color:#FF7F00;
	font-size: 16px;
}
@media screen and (max-width: 1024px) {
	.menuGeral .links a{
		border-bottom: 1px solid #ddd;
		border-top: 1px solid #FFF;
		padding: 16px 0;
		font-size: 15px;
	}
	
	.menuGeral .links {
		float:left;
		width: 100%;
		background:#F4F4F4;
		background-image:url(../imagens/bg_SombraMenuLinks.png);
		background-repeat: repeat-x;
		padding: 8px 0;
	}
	.menuGeral .subLinkDesk {
		display:none;
	}
	.menuGeral .mobile{
		display: block;
	}
}



.menuGeral .links a:first-child{
	border-top: none;
}
.menuGeral .links a:last-child{
	border-bottom: none;
}
.menuGeral .subLink {
	float: left;
	width: 100%;
	padding: 8px 0;
	position: absolute;
	bottom: 0;
	width: calc(100% - 407px);
}
.menuGeral .subLink a{
	float:left;
	margin-left: 46px;
	padding: 16px 0;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.menuGeral .subLink p {
	float: left;
	margin: 16px 0px 16px 55px;
}
.menuExpand{
	position:relative;
	display:inline-block;
}
.menuExpand .menu{
	position:absolute;
	width: auto;
	top: 10px;
	left: 10px;
	display:inline-block;
	background:#FFF;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.20);
	min-width: 200px;
	z-index: 99;
	display:none;
}
.menuExpand .menu.right{
	position:absolute;
	width: auto;
	top: 10px;
	left: auto;
	right: 10px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}
.menuExpand .menu a, .menuExpand .menu button{
	float:left;
	width: 100%;
	padding: 16px;
	display:inline-block;
	text-align:left;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	margin-bottom: 1px solid #DDD;
}

@media screen and (max-width: 1024px) {
	.menuGeral .subLink {
		float: left;
		width: 100%;
		padding: 8px 0;
		position:relative;
		bottom: auto;
	}
	.menuGeral .subLink a{
		width: calc(100% - 60px);
	}
	.menuGeral .subLink p{
		width: calc(100% - 60px);
	}
}

.menuGeral .entrarDesk{
	float:left;
	width: 100%;
}


.mainContent{
	display:inline-block;
	float:left;
	width: 100%;
	margin-top: 100px;	
}


.inputCommum {
	display: inline-block;
	width: 100%;
	position: relative;
	margin: 16px 0;
}

.inputCommum label {
	position: absolute;
	top: -15px;
	left: 16px;
	background: #FFF;
	z-index: 2;
	padding: 8px;
	font-size: 16px;
}

.inputCommum input {
	border: 2px solid #CCC;
	height: 50px;
	line-height: 55px;
	background: #FFF;
	width: 100%;
	border-radius: 3px;
	padding: 0 16px;
	font-size: 18px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	transition: border .3s ease;
	color:#666;
}

.inputCommum input:focus {
	border: 2px solid #FF7F00;
	color:#333;
}

.inputCommum .erro {
	display: inline-block;
	font-size: 13px;
	text-align:left;
	width: 100%;
	color: #D90000;
	opacity: 0;
	transition: opacity .3s ease;
}
.inputCommum.erro input {
	border: 2px solid #D90000;
	color:#333;
}

.inputCommum.erro .erro {
	opacity: 1;
}

.listMenuSelect {
	display: inline-block;
	width: 100%;
	position: relative;
	margin: 16px 0;
}
.listMenuSelect label {
	position: absolute;
	top: -15px;
	left: 16px;
	background: #FFF;
	z-index: 2;
	padding: 8px;
	font-size: 16px;
}

.listMenuSelect .selected {
	border: 2px solid #CCC;
	height: 50px;
	line-height: 55px;
	background: #FFF;
	width: 100%;
	border-radius: 3px;
	padding: 0 16px;
	font-size: 18px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	transition: border .3s ease;
	color: #666;
	cursor: pointer;
	white-space: nowrap;         
	overflow: hidden;
	text-overflow: ellipsis;
}

.listMenuSelect .arrow {
	position:absolute;
	right: 16px;
	top: 14px;
	
}
.listMenuSelect .meuSelect{
	position:absolute;
	width: 100%;
	top: 50px;
	padding: 16px;
	background:#FFF;
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,.3);
	border-radius: 3px;
	display:none;
}
.listMenuSelect.open .meuSelect{
	display:inline-block;
	z-index: 9;
}
.listMenuSelect.erro .selected{
	display:inline-block;
	z-index: 9;
	border: 2px solid #D90000;
}

.listMenuSelect .meuSelect li{
	display:inline-block;
	width: 100%;
	border-bottom: 1px solid #DDD;
	color:#333;
}
.listMenuSelect .meuSelect li button{
	width: 100%;
	text-align: left;
}
.listMenuSelect .erro {
	display: inline-block;
	font-size: 13px;
	text-align:left;
	width: 100%;
	color: #D90000;
	opacity: 0;
	transition: opacity .3s ease;
}
.listMenuSelect.erro selected {
	border: 2px solid #D90000;
	color:#333;
}

.listMenuSelect.erro .erro {
	opacity: 1;
}


.modules {
	position: relative;
	margin-top: 116px;
	width: 100%;
	z-index: 12;
}

.centralModule {
	position: absolute;
	margin-top: 0px;
	width: 100%;
	height: calc(100% - 116px);
	top: 116px;
}

.moduleContainer {
	position: fixed;
	top: 58px;
	left: 0px;
	width: 100%;
	z-index: 8;
	background: #EEE;
	height: calc(100% - 59px);
	overflow: hidden;
	border-radius: 3px;
	transform: translateY(30%);
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
}

.moduleContainer.open {
	transform: translateY(0);
	opacity: 1;
}


.subModuleContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	background: #EEE;
	height: 100%;
	overflow: hidden;
	border-radius: 3px;
	transform: translateY(30%);
	opacity: 0;
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,.5);
	height:0;
}

.subModuleContainer.open {
	transition: transform .3s ease, opacity .3s ease, height 0 ease 0;
	transform: translateY(0);
	opacity: 1;
	height:100%;

}



@media screen and (max-width: 1024px) {
	.modules {
		position: relative;
		margin-top: 0;
		width: 100%;
	}
	.moduleContainer {
		position: fixed;
		top: 0px;
		left: 0;
		width: 100%;
		z-index: 9;
		background: #EEE;
		height: 100%;
		overflow: hidden;
		border-radius: 0px;
	}
	.centralModule {
		position: absolute;
		margin-top: 0px;
		width: 100%;
		height: calc(100% - 98px);
		top: 98px;
	}
}

.headerModule {
	position: fixed;
	top: 56px;
	left: 0;
	width: 100%;
	height: 60px;
	background: #FFF;
	border-top: 1px solid #DDD;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3);
	z-index: 1;
}

.headerModule h1 {
	float: left;
	margin: 19px;
	clear: none;
}

.tabsLinks {
	display: inline-block;
	padding: 16px 0;
	position: relative;
}

.tabsLinks button {
	font-size: 14px;
	text-decoration: none;
	color: #666;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 0;
	display: inline-block;
	border-right: 1px solid #ddd;
	transition: color .3s ease;
	text-transform: uppercase;
}

.tabsLinks button span{
	display: inline-block;
	margin: 0px;
	padding: 6px 16px;
}
.tabsLinks button.active {
	color: #FF7F00;
}
.tabsLinks button.mensagem {
	width: 80px;
	float: left;
	padding: 0px 0 0;
}
.tabsLinks button.mensagem i{
	margin-top: 1px;
}
@media screen and (max-width: 1024px) {
	.headerModule {
		position: fixed;
		top: 50px;
		left: 0;
		width: 100%;
		height: 46px;
		background: #FFF;
		border-top: 1px solid #DDD;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3);
		z-index: 1;
	}
	.headerModule h1 {
		display:none;
	}
	.tabsLinks {
		padding: 6px 0 0;
		width: 100%;
	}
	.tabsLinks button {
		font-size: 14px;
		text-decoration: none;
		color: #666;
		font-family: Roboto Medium, Arial, Helvetica, sans-serif;
		font-weight: normal;
		padding: 0px;
		display: inline-block;
		border-right: 1px solid #ddd;
		/* width: calc(35% - 13px); */
		border: none;
		margin: 0;
	}
	.tabsLinks button span{
		display: inline-block;
		margin: 0;
		padding: 12px 16px;
	}
	.tabsLinks button.mensagem {
		width: 50px;
		float: left;
		padding: 11px 0 0;
	}
	.tabsLinks button.home {

	}
}

.dashboard{
	display:none;
}
.dashboard .tabs {
	position: fixed;
	top: 117px;
	height: calc(100% - 117px);
	width: 100%;
}
@media screen and (max-width: 1024px) {
	.dashboard .tabs {
		position: fixed;
		top: 98px;
		height: calc(100% - 98px);
		width: 100%;
	}
}
.dashboard .tabs .tab{
	position: relative;
	height: 100%;
}
.tabsLinks .barTab {
	width: 33.33%;
	height: 2px;
	background-color: #FF7F00;
	position: relative;
	top: 12px;
	transition: left .3s ease, width .3s ease;
}

@media screen and (max-width: 1024px) {
	.tabs {
		top: 96px;
		height: calc(100% - 96px);
	}
	
	.tabsLinks .barTab {
		top: -4px;
	}
}

.dashboard  .tabsLinks .alert {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 18px;
	height: 18px;
	background: #D80000;
	line-height: 18px;
	text-align: center;
	border-radius: 10px;
	font-size: 11px;
	display:none;
}

.containerModulePages{
	padding: 0;
	margin-top: 56px;
	position: absolute;
	height: calc(100% - 56px);
	overflow-x: hidden;
	overflow-y: scroll;
	width: 100%;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .3s ease, transform .3s ease;
}

.complete .containerModulePages{
	opacity: 1;
	transform: translateY(0px);
}

.mascaraFundo{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: RGBA(0,0,0,0.7);
	z-index: 7;
	opacity: 0;
	transition: opacity .3s ease;
}

.mascaraFundo.open{
	opacity: 1;
}


@media screen and (max-width: 1024px) {
	.containerModulePages {
		padding: 0;
		margin-top: 56px;
		position: absolute;
		height: calc(100% - 56px);
		overflow-x: hidden;
		overflow-y: scroll;
		width: 100%;
	}
}

.headerMod {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFF;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.20);
	z-index: 2;
}

.headerMod .btBack{
	padding: 16px 16px 13px;
	float:left;
}
.headerMod .btBackSave{
	padding: 16px 16px 13px;
	float:left;
}
.headerMod .btBackSubMod{
	padding: 16px 16px 13px;
	float:left;
}
.headerMod .btMore{
	padding: 16px 16px 13px;
	float:right;
}

.headerMod h1 {
	float: left;
	clear: none;
	padding: 18px 0px 18px;
	margin:0;
	font-size: 18px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}

.dialogos {
	position: fixed;
	z-index: -9;
	width: 100%;
	height: 100%;
	opacity: 0;
	will-change: opacity;
	transition: opacity .3s ease;
	background-color: RGBA(0,0,0,0.3);
	top: 0;
	left: 0;
}

.dialogos.ativo{
	z-index: 99;
	opacity: 1;	
}

.dialogos .dialogo {
	position: absolute;
	width: 500px;
	left: calc(50% - 250px);
	background: #FFF;
	padding: 24px 24px 0;
	top: 50%;
	box-shadow: 0px 4px 25px 0px rgba(0,0,0,0.30);
	border-radius: 3px;
	will-change: top;
	transition: top .3s ease;
	max-height: 94%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 760px) {
	.dialogos .dialogo {
		width: 80%;
		left: 10%;
	}
}

.dialogos.ativo .dialogo {
	top: 30%;
}

.dialogos .dialogo h1{
	color: #333;
	font-size: 21px;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
	
}

.dialogos .dialogo img.midiaFull{
	width: 100%;
	height: auto;
}

.dialogos .dialogo p {
	margin: 0;
	line-height: 140%;
	margin-top: 16px;
}

.dialogos .dialogo .acoes{
	margin: 0;
	line-height: 140%;
	margin: 8px -16px 8px 0;
	text-align:right;
}

.dialogos .dialogo .acoes button{
	padding: 16px;
	margin-left: 8px;
	font-size: 14px;
	color: #FF7F00;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}

.dialogos .dialogo .acoes button{
	padding: 16px;
	margin-left: 8px;
	font-size: 14px;
	color: #333;
	font-family: Roboto Medium, Arial, Helvetica, sans-serif;
}


.card {
	display: inline-block;
	width: calc(100% - 16px);
	margin: 8px;
	background: #FFF;
	border-radius: 3px;
	padding: 16px 16px 0px 16px;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,.3);
}

.card .actions{
	display: inline-block;
	width: 100%;
	border-top: 1px solid #DDD;
	margin-top: 16px;
}

.card .actions .right{
	float:right
}


.tips{
	position:relative; 
}

.tips .title{
	display: none; 
}
.tips .tipsContent{
	display: none; 
}

.tipsArea{
	z-index: -1;
	position:relative;
	transition: z-index .3s ease .3s; 
}
.tipsArea.visivel{
	z-index: 99;
	transition: z-index .3s ease 0s;
}
.tipsArea .tipView {
	position: fixed;
	top: 55px;
	left: 6px;
	background: #FFF;
	width: calc(100% - 12px);
	max-height: calc(100% - 80px);
	box-shadow: 1px 1px 55px 0px rgba(0,0,0,.5);
	overflow-y:auto;
	opacity: 0;
	transform: translateY(100px);
	transition: transform .3s ease, opacity .3s ease;
	z-index: -9;
}
.tipsArea.visivel .tipView {
	opacity: 1;
	transform: translateY(0px);
	z-index: 9;
}
.tipsArea .tipView .title {
	width: 100%;
	border-bottom: 1px solid #DDD;
	width: calc(100% - 12px);
	float: left;
	position: fixed;
	z-index: 2;
	background: #fff;
}
.tipsArea .tipView .title h1 {
	float: left;
	clear: initial;
	padding: 17px 0;
}
.tipsArea .tipView .title .itips{
	float:left;
	padding:16px;
}
.tipsArea .tipView .title .btClouseTip{
	float:right;
}
.tipsArea .tipView .title .btClouseTip{
	float:right;
}
.tipsArea .tipView .tipsContent{
	float:left;
	width: 100%;
	padding:16px;
	font-size: 16px;
	margin-top: 56px;
	
}
.tipsArea .tipView .tipsContent p{
	margin-bottom: 8px;
}




@keyframes dash {
 0% { stroke-dashoffset: 187; }
 50% {
   stroke-dashoffset: 187/4;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: 187;
   transform:rotate(450deg);
 }
}

/* Progress Bar */
.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #FEEAC7;
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden; }
  .progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #FF7F00;
    transition: width .3s linear; }
  .progress .indeterminate {
    background-color: #FF7F00; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }


.progressModule{
	margin-top: 56px;
	position:absolute;
	opacity: 1;
	transition: opacity .3s ease;
}

.complete .progressModule{
	opacity: 0;
}





$width: 100px;

.loader {
  position: relative;
  margin: 0 auto;
  width: $width;
  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: #999;
  }
  40% {
    stroke: #999;
  }
  66% {
    stroke: #666;
  }
  80%,
  90% {
    stroke: #333;
  }
}

.showbox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}




.dashboard .containerSimulacao {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.dashboard .containerSimulacao .cenario {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	max-height: 100%;
	overflow-x: hidden;
	opacity: 0;
	transition: opacity 1s ease;
	transform: scale(1);
	perspective: 1px;
	transform-style: preserve-3d;
}
.dashboard .containerSimulacao .cenario.pronto{
	opacity: 1;
}

.dashboard .containerSimulacao .cenario .planoFundo {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	background-position: center bottom;
	background-size: auto 100%;
}
.dashboard .containerSimulacao .cenario .planoFundo img {
	max-width: none;
	width: auto;
	height: 100%;
}

.dashboard .containerSimulacao .cenario .composicao {
	position: absolute;
	bottom: -90px;
	left: calc(50% - 200px);
	width: auto;
	transform: translateZ(-0.6px) translateY(0px);
	transition: opacity .5s ease;
	opacity: 0;
}
.dashboard .containerSimulacao.pronto .cenario .composicao {
	opacity: 1;
}


.dashboard .containerSimulacao .showbox {
  position: absolute;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  opacity:  1;
  transform: translateY(0);
  transition: transform .3s ease, opacity .3s ease;
}

.dashboard .containerSimulacao.pronto .showbox {
	opacity:  0;
	transform: translateY(-100px);
}



.dashboard .containerSimulacao .cenario .composicao .produto{
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:0
}
.dashboard .containerSimulacao .cenario .composicao .produto img{
	position:absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;	
}
.dashboard .containerSimulacao .cenario .composicao .produto svg{
	position:absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;	
}

.dashboard .containerSimulacao .cenario .composicao .produto .acessorio{
	position:absolute;
	z-index: 3;
}
.dashboard .containerSimulacao .cenario .composicao .produto svg pach{
	width: 100%;
	height: 100%;	
}
.dashboard .containerSimulacao .cenario .composicao .produto .lado{
	opacity: 0;	
}
.dashboard .containerSimulacao .cenario .composicao .produto .lado.lado1{
	opacity: 1;	
}
.dashboard .containerSimulacao .cenario .composicao img{
	width: 100%;
	height: auto;
}

.dashboard .containerSimulacao .cenario .composicao img{
	width: 100%;
	height: auto;
}

.dashboard .containerSimulacao .acoes{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 56px;
	width: 100%;
	background-image:url(../imagens/baseMenuAcao.png);
	background-position: top right;
}

.dashboard .containerSimulacao .acoes button{
	float:left;
	color:#FF7F00;
	margin: 4px 0 0 8px;
}
.dashboard .containerSimulacao .acoes button{
	float:left;
	color:#FF7F00;
	margin: 4px 0 0 8px;
}

.dashboard .containerSimulacao .acoes button.btAddCompra {
	float: right;
	margin: 4px 10px 0 0;
}

.dashboard .progressModule {
	z-index: 9;
	margin-top: -1px;
}

.listaProdutos{
	float:left;
	width: 100%;
	padding: 4px;
}

.listaProdutos .produtoLista {
	float: left;
	width: 25%;
	padding: 40px;
}

.listaProdutos .produtoLista .area{
	float: left;
	width: 100%;
	background-color: #fff;
	text-align: center;
}
.listaProdutos .produtoLista h2{
	font-size: 18px;
	padding: 10px;
}
.listaProdutos .produtoLista .valor{
	font-size: 16px;
	padding: 6px 10px;
}
.listaProdutos .produtoLista .apartir {
	font-size: 13px;
	padding: 10px 10px 0;
	display:none;
}
.listaProdutos .produtoLista .pedidoMinimo{
	padding: 0 10px 10px;
	font-size: 12px;
}
.listaProdutos .produtoLista .btPersonalizar {
	margin: 10px 0;
}





@media screen and (max-width: 960px) {
	.listaProdutos .produtoLista {
		width: 50%;
		padding: 8px;
	}
	
	.listaProdutos .produtoLista .desck{
		display: none;
	}
	.listaProdutos .produtoLista h2 {
		font-size: 14px;
		padding: 10px;
		text-align: left;
	}
}