/******* Blog *******/

#blog {

    padding: 0 0 87px;

    height: auto;

    margin: 39px 0 0;

    background-color: #fff;	

	background-image: url(../../bem-estar/fiibo-blog-background.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: left;

}

#blog .top {

	padding: 2vw 10vw 0;

    width: 59vw;

}

#blog .top .titulo {

    margin: 0 0 2.4vw 0;

    color: var(--principal);

    font-size: 2.6vw;

}

#blog .box-btn-confira .btn-confira {

    text-decoration: none;

    border-radius: 5vw;

    padding: 0.9vw 0 0.75vw;

    font-size: 1.2vw;

    text-align: center;

    letter-spacing: 0.04em;

    border: 2px solid var(--azul);

    color: #fff;

    font-weight: 400;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 12.5vw;

    z-index: 1;

	margin: 0 auto;

}

#blog .box-btn-confira .btn-confira .bg_color {

	background-color: var(--azul);

}

#blog .box-btn-confira .btn-confira.btn-effect .round {

	background-color: var(--principal);

}

#blog .box-btn-confira .btn-confira:hover {

	border-color: var(--principal);

	transition: .3s;

}

#blog .bottom {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-direction: row;

	flex-direction: row;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	width: 1255px;

	margin: 0 auto 77px;

}

#blog .bottom .box .btn-leia {

    text-decoration: none;

    border-radius: 5vw;

    padding: 6px 0;

    font-size: 14px;

    text-align: center;

    letter-spacing: 0.04em;

    border: 2px solid var(--principal);

    color: #fff;

    font-weight: 500;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 120px;

    z-index: 1;

}

#blog .bottom .box .btn-leia .bg_color {

	background-color: var(--principal);

}

#blog .bottom .box .btn-leia.btn-effect .round {

	background-color: var(--roxo);

}

#blog .bottom .box .btn-leia:hover {

	border-color: var(--roxo);

	color: #fff;

	transition: .3s;

}

#blog .bottom .box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

        -ms-flex-direction: row;

            flex-direction: row;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

}

#blog .bottom .box .imagem {

    display: block;

	overflow: hidden;

    line-height: 0;

	position: relative;

	border-radius: 15px;

	margin: 0 35px;

}

#blog .bottom .box img {

	transition: all .5s;

}

#blog .bottom .box .imagem:hover img {

    transform: scale(1.1);

    transition: all .5s;

}

#blog .bottom .box .conteudo-top .data {

    color: var(--principal);

    font-size: 16px;

    margin: 0 0 0 0;

}

#blog .bottom .box .conteudo {

	width: 50%;

}

#blog .bottom .box .conteudo .titulo {

    text-decoration: none;

    color: var(--roxo);

    font-size: 20px;

    letter-spacing: 0.02em;

    font-weight: 500;

    margin: 20px 0;

    display: block;

}

#blog .bottom .box-2 {

    margin: 56px 0;

}

#blog .bottom .box-0 {

    width: 645px;

    background-color: #e1e1e1;

    padding: 7px;

    border-radius: 35px;

}

#blog .bottom .box-0 .imagem {

    display: block;

	overflow: hidden;

    line-height: 0;

	position: relative;

	border-top-left-radius: 35px;

    border-top-right-radius: 35px;

}

#blog .bottom .box-0 img {

	transition: all .5s;

}

#blog .bottom .box-0 .imagem:hover img {

    transform: scale(1.1);

    transition: all .5s;

}

#blog .bottom .box-0 .conteudo {

    background-color: var(--principal);

    color: #fff;

    border-bottom-left-radius: 35px;

    border-bottom-right-radius: 35px;

    padding: 35px 38px;

    height: 307px;

}

#blog .bottom .box-0 .btn-leia {

    text-decoration: none;

    border-radius: 50px;

    padding: 9px 0;

    font-size: 23px;

    text-align: center;

    letter-spacing: 0.04em;

    border: 2px solid #fff;

    color: var(--principal);

    font-weight: 400;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 100%;

    z-index: 1;

    margin: 0 auto;

}

#blog .bottom .box-0 .btn-leia .bg_color {

	background-color: #fff;

}

#blog .bottom .box-0 .btn-leia.btn-effect .round {

	background-color: var(--roxo);

}

#blog .bottom .box-0 .btn-leia:hover {

	border-color: var(--roxo);

	color: #fff;

	transition: .3s;

}

#blog .bottom .box-0 .conteudo .titulo {

    font-size: 34px;

    text-decoration: none;

    color: #fff;

    font-weight: 500;

    line-height: 42px;

    height: 110px;

    display: block;

}

#blog .bottom .box-0 .conteudo-top {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-direction: row;

	flex-direction: row;

	-webkit-box-pack: justify;

	-ms-flex-pack: justify;

	justify-content: space-between;

	margin: 0 0 32px 0;

}

#blog .bottom .box-0 .conteudo-top .categoria {

    text-decoration: none;

    border-radius: 50px;

    padding: 9px 28px;

    font-size: 14px;

    text-align: center;

    letter-spacing: 0.04em;

    border: 2px solid var(--roxo);

    color: #fff;

    background-color: var(--roxo);

    font-weight: 500;

    width: auto;

    z-index: 1;

}

#blog .bottom .box-0 .conteudo-top .data {

    text-decoration: none;

    border-radius: 50px;

    padding: 9px 28px;

    font-size: 14px;

    text-align: center;

    letter-spacing: 0.04em;

    border: 2px solid #f490a1;

    color: #fff;

    background-color: #f490a1;

    font-weight: 400;

    width: auto;

    z-index: 1;

}