@CHARSET "ISO-8859-1";

/************    VARIAVEIS    ************/
:root {
	
	/*PRODUTOS*/
	--albumin-dark: #8b711d;
	--albumin-primary: #caa42a;
	--albumin-light: #dec162;
	
	--bcaa-dark: #013b67;
	--bcaa-primary: #0166b3;
	--bcaa-light: #0391fe;
	
	--beef-dark: #201311;
	--beef-primary: #52302b;
	--beef-light: #844d45;
	
	--colageno-dark: #a13141;
	--colageno-primary: #cb5365;
	--colageno-light: #dd8e9a;
	
	--creatina-dark: #2e5d62;
	--creatina-primary: #468e96;
	--creatina-light: #6db3bb;
	
	--feminy-dark: #8a0046;
	--feminy-primary: #d6006d;
	--feminy-light: #ff2493;
	
	--glutamina-dark: #678d31;
	--glutamina-primary: #8fc04b;
	--glutamina-light: #b2d484;
	
	--iso-dark: #0f0f3c;
	--iso-primary: #1f1f79;
	--iso-light: #2f2fb6;
	
	--leucina-dark: #0c1f26;
	--leucina-primary: #1f4d60;
	--leucina-light: #327b9a;
	
	--mass-dark: #91401c;
	--mass-primary: #d15c29;
	--mass-light: #e18b66;
	
	--multivitaminic-dark: #a21e26;
	--multivitaminic-primary: #d9343e;
	--multivitaminic-light: #e5747b;
	
	--shake-dark: #893c69;
    --shake-primary: #b75b90;
    --shake-light: #ce90b4;
    
	--thermo-dark: #7d1f20;
	--thermo-primary: #ba2e2f;
	--thermo-light: #d75d5e;
	
	--waxy-dark: #010303;
	--waxy-primary: #143d2f;
	--waxy-light: #27775b;
	
	--whey-dark: #7e1011;
	--whey-primary: #c2191a;
	--whey-light: #e74142;
	
	--xilytol-dark: #03170c;
	--xilytol-primary: #0b5b2e;
	--xilytol-light: #139f51;
}

/************    PRODUTOS    ************/
.section-banners-produtos{
	margin: 104px auto 0px;
	padding: 0px;
	width: 100%;
}
.titulo-produtos{
	margin: 0px auto;
    width: 80%;
}
.titulo-produtos h1{
	font-family: 'Montserrat', sans-serif;
    word-break: break-word;
    word-wrap: break-word;
    color: #ff5252;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -2px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.produtos{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 auto 30px;
	padding: 0px;
	flex-direction: row;
	width: 80%;
}

.produto{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	width: 25%;
	margin: 20px 0px;
}
.produto img{
	width: 55%;
	height: 55%;
	padding: 20px
}

.produto:HOVER img{
	background-color: #f5f5f5;
}
.produto p{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 70%;
	text-align: center;
	margin: 0;
    padding: 10px 0px;
    border: 1px solid #fff;
}
.produto p span {
	color: #535353;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.produto:HOVER p.whey {background-color: #dd2c00; border-color: #dd2c00;}
.produto:HOVER p.mass {background-color: #ff6d00; border-color: #ff6d00;}
.produto:HOVER p.protein {background-color: #000000; border-color: #000000;}
.produto:HOVER p.feminy {background-color: #C71585; border-color: #C71585;}
.produto:HOVER p.bcaa {background-color: #2962ff; border-color: #2962ff;}
.produto:HOVER p.colageno {background-color: #c51162; border-color: #c51162;}
.produto:HOVER p.glutamina {background-color: #33691e; border-color: #33691e;}
.produto:HOVER p.creatina {background-color: #008B8B; border-color: #008B8B;}
.produto:HOVER p.termogenico {background-color: #d50000; border-color: #d50000;}
.produto:HOVER p.multivitaminico {background-color: #ffab00; border-color: #ffab00;}
.produto:HOVER p.leucina {background-color: #00688B; border-color: #00688B;}

.produto:HOVER p.whey span{color: #fff;}
.produto:HOVER p.mass span{color: #fff;}
.produto:HOVER p.protein span{color: #fff;}
.produto:HOVER p.feminy span{color: #fff;}
.produto:HOVER p.bcaa span{color: #fff;}
.produto:HOVER p.colageno span{color: #fff;}
.produto:HOVER p.glutamina span{color: #fff;}
.produto:HOVER p.creatina span{color: #fff;}
.produto:HOVER p.termogenico span{color: #fff;}
.produto:HOVER p.multivitaminico span{color: #fff;}
.produto:HOVER p.leucina span{color: #fff;}

.produto a{
	width: 70%;
    text-align: center;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #535353;
}
.produto a:HOVER{
	color: #fff;
    background-color: #535353;
    border-color: #535353;
}
.titulo-produtos-linha{
	background-image: url(../img/low-contrast-linen.png);
	padding: 50px 0px 30px 0px;
}

.titulo-produtos-linha h2{
	font-family: 'Montserrat', sans-serif;
    word-break: break-word;
    word-wrap: break-word;
    color: #ff5252;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: -2px;
    text-transform: uppercase;
    text-align: center;
    margin: 0px auto;
    width: 80%;
    line-height: 150%;
}
.titulo-produtos-linha p{
	font-family: 'Montserrat', sans-serif;
    word-break: break-word;
    word-wrap: break-word;
    color: #535353;
    font-weight: 400;
    text-align: center;
    font-size: 30px;
    margin: 0px auto;
    width: 80%;
    line-height: 150%;
}

.produtos-linha{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
	background-image: url(../img/low-contrast-linen.png);
	padding: 0px 0px 50px 0px;
}

.linha{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	width: calc(80% / 6 - 20px);
}

.linha img{
	width: 100px;
	height: 100px;
}

.linha h3{
	font-family: 'Montserrat', sans-serif;
    word-break: break-word;
    word-wrap: break-word;
    color: #535353;
    font-weight: 600;
    text-align: center;
    font-size: 14px;
}


/*LISTAGEM COM CATEGORIAS DE PRODUTOS*/
.listagem {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 80%;
    margin: 0 auto;
    padding: 0px 0px 30px 0px;
}
.coluna-categorias {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 25%;
    border-right: 1px solid #ebebeb;
}
.coluna-categorias h1{
	color: #494E55;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    margin: 5px 0px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}
.coluna-categorias nav{
	width: calc(100% - 15px);
	margin-bottom: 10px;
}
.coluna-categorias nav h2{
	color: #FF4F4F;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    margin: 5px 0px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}
.coluna-categorias nav ul{
	list-style: none;
	width: calc(100% - 40px);
}
.coluna-categorias nav ul li{
	border-bottom: 1px solid #ccc;
}
.coluna-categorias nav ul li a{
	color: #303030;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
    font-size: 16px;
}


.coluna-produtos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 75%;
}
.coluna-produtos h1 {
    color: #FF4F4F;
    font-weight: 600;
    font-size: 30px;
    text-transform: uppercase;
    margin: 5px 0px;
    width: 100%;
    margin-left: 15px;
}
.list-prod {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}
.prod {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 230px;
    margin: 15px;
    border: 1px solid #fff;
}
.prod .foto {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.prod .foto span.novo {
    padding: 5px;
    background-color: #FF4F4F;
    line-height: 100%;
    color: #fff;
    border: 1px solid #FF4F4F;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}
.prod h3 {
    font-size: 14px;
    font-weight: normal;
    /*display: -webkit-box;*/
    -webkit-line-clamp: 2;
    height: 2.4em;
    overflow: hidden;
    line-height: 17px;
    width: 100%;
    white-space: normal;
    color: #666;
    text-transform: none;
    text-align: center;
}
.prod:HOVER{
	box-shadow: 2px 2px 10px 0px #ccc;
}
.prod:HOVER .foto{
	background-color: #eee;
}
.prod:HOVER h3{
    color: #ff4f4f;
}


hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(219,219,219,1), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(219,219,219,1), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(219,219,219,1), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(219,219,219,1), rgba(0,0,0,0));
    margin: 20px 0px;
    width: 100%;
}

/* ****** ***********      MOBILE       ************* ******* */
@media (max-width: 969px) {
	.section-banners-produtos{
		margin: 0px auto;
	}
	.produto{
		width: 33.333%;
	}
	.titulo-produtos{
		margin: 0px;
	    width: 100%;
	}
	.linha {
	    width: 30%;
	}
	.listagem{
		width: calc(100% - 10px);
	}
}

@media (max-width: 769px) {
	.produto{
		width: 50%;
	}
	.linha {
	    width: 45%;
	}
	.coluna-categorias{
	    width: 35%;
	}
	.coluna-produtos{
	    width: 65%;
	}
}

@media (max-width: 600px) {
	.coluna-categorias nav h2 {
		display: none;
	}
}

@media (max-width: 524px) {
	.produto{
		width: 100%;
	}
	.titulo-produtos h1{
		font-size: 40px;
	}
	
	.titulo-produtos-linha h2{
		font-size: 30px;
	}
	.linha {
	    width: 100%;
	}
	
	.produtos{
		width: 100%;
	}
	.list-prod{
		justify-content: center;
	}
	.listagem{
		flex-direction: column;
	}
	.coluna-categorias{
	    width: calc(100% - 10px);
	    border-right: 0px;
	    margin-right: 0px;
	}
	.coluna-produtos{
	    width: calc(100% - 10px);
	}
	
}