/*
Theme Name: Blog Floratta
Author: Gabriel Lopes
Author URI: 
Description: Tema desenvolvido para o site blog.floratta.com.br
Version: 1.0
*/

/*	Bootstrap	*/
.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 1080px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 2010px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

* {
  box-sizing: border-box;

}

html{
	margin-top: 0px !important;
}

body{
    top: 0;
    left: 0;
    margin: 0;
    background-color: #f9f9f9;
	width: -webkit-fill-available;
    color: #000;
    font-family:'Poppins', sans-serif;
    font-size: 14px;
}

a{
    color: #000;
    text-decoration: none;
}

ul{
	padding-inline-start: 0px;
}

.row{
	text-align: -webkit-center;
}

.row-footer{
	color: #FFFFFF;	
	display: flex;
}

.row-footer ul li a, .amxcom{
	color: #FFFFFF;
}

.contatos ul li a{
	font-size: 1.125rem;
}

.contatos{
	margin-left: 45px;
}

.copyright{
	margin-left: auto;
}

.redes{
	margin-top: 10px;
}

.post-main{
	display: block;
	width: 66%;
	padding: 0 2%;
}

.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #111111;
}

body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
/*	Cabeçalho	*/
.sobre, .contato{
    margin: 5px;
}

.container{
    padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}


.col-md-8 {
    flex: 0 0 auto;
    width: 45%;
	margin-left: 4%;
}

.col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.col-md-8 h2, .col-md-8 h4 a {
    color: #FFFFFF;
}

.col-md-4 p, .col-md-4 a {
    color: #FFFFFF;
}

.alinha-direita{
	background-color: #3c1a52;
	height: 50px;
    align-items: center;
    flex-direction: row;
    font-weight: 550;
}

.alinha-direita ul{
	display: flex;
	text-transform: uppercase;
	padding: unset;
	padding-top: 7px; 
}

.alinha-direita ul li a{
	color: #FFFFFF;
	padding: 30px;
	letter-spacing: 0.8px;
}


.imagem-logo{
    width: auto;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}


li{
    list-style-type: none;
	margin-top: 7px;
}

footer {
    margin-top: 34px;
}

a {
  text-decoration: none;
  color: #000;
}

header ul{
	justify-content: center;
}

.header-blog{
	padding: 10px 10px 25px 10px;
}

.header-post{
	padding: 10px 10px 15px 10px;
}

.header-blog, .header-post{
	background: #FFFFFF;
	display: block;
	width: auto;	
	text-align: center;
}

.header-blog a, span.titulo-post{
	color: #3c1a52;
	font-size: 2rem;
	width: fit-content;
	padding-bottom: 5px;
	border-bottom: 2px solid #3c1a52;
}

/*
.header-blog a::after, span.titulo-post::after{
    content: "";
    display: block;
    width: 60px;
    height: 2px;
	margin-top: 2px;
    background: #3c1a52;
}*/

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-area-flex{
	display: flex;
	margin-bottom: 30px;
}


.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  height: 100%;
  vertical-align: top;
  background-color: #ececec;
	
}

.article-loop {
	width: 95%;
  	border-bottom: 1.5px dotted #B0AFB5;
    display: flex;
    padding: 20px 0;
	margin-right: 0;
	margin-left: 2%;
}

article a{
	text-decoration: underline;
}

article a:hover{
	color: #3c1a52;
}

article ul li{
	list-style-type: initial;
}

.heart{
	align-self: center;
}

.post-space{
    display: block;
    width: 70%;
    margin: 5px 20px;
}

.btn-post{
	margin-left: 20px;
	align-self: center;
}

.btn-post, .btn-voltar {
	height: fit-content;
    border-radius: 5px;
    background: #3c1a52;
    padding: 11px 17px;
    float: right;
    border: none;
	color: #ffffff;
    font-size: 16px;
    font-weight: bold;
	transition: background-color 0.5s ease-out;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
}


.btn-post:hover, .page-numbers:hover, .btn-voltar:hover{
	background: #684380;
}


.institucional ul li a:hover, .amxcom:hover {
    border-bottom: 0.5px solid #FFF;
}

.container-post header h2 a{
	color: #3c1a52;
	font-size: 2rem;
}

.title-post{
	max-width: fit-content;
}

.title-post a {
    color: #684380;
    font-size: 20px;
    font-weight: 500;
}

.post-main p {
    width: fit-content; 
}

.block-content{
    display: block;
    margin-left: 5px;
}


.container-blog{
    padding-right: 15px;
    /*padding-left: 15px;*/
}

.pagination-box {
    text-align: left;
    margin: 5px;
    padding: 10px;
    display: flex;
	justify-content: center;
}

.page-numbers {
    display: table-cell;
    padding: 6px 15px;
    border: 1px solid #eee;
    background: #3c1a52;
    color: #ffffff;
    font-weight: bold;
	transition: background-color 0.5s ease-out;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
}

.data-post{
	display: flex;
	align-items: center;
}

.data-post img {
    height: 20px;
	margin-right: 5px;
}

.row-post{
	display: flex;	
    width: fit-content;
	float: right;
}

.views-post {
    margin-left: 20px;
}

.img-fluid{
	width: 100%;
	height: auto;
}

.left-img{
	max-height: 224px;
	overflow-y: hidden;
}

.img-post {
	width: 33%;
	position: relative;
    /*height: 175px;
	content-visibility: auto;*/
}

.image-post{
	height: 400px;
}

.category span ul li a {
    padding: 5px;
    color: #FFF;
    font-weight: 800;
    background: #eac97b;
}

.container-pagepost{
    padding-right: 15px;
    padding-left: 15px;	
    border-radius: 5px;
    border-bottom: 1.5px dotted #B0AFB5;
	margin-bottom: 20px;
}

a.btn-voltar {
    float: none;
}

.main-section{
	justify-content: center;
	display: flex;
}

.section-block{
	display: block;
	width: 66%;
}

.post-categories li {
    display: contents;
}

.post-views {
    display: flex;
    align-self: center;
	margin-left: 20px;
}

.post-views img {
    width: 20px;
	margin-right: 7px;
}

.post-infos{
	display: flex;
}

/*	Sidebar	*/

.titulo-sidebar {
    font-size: 20px;
    color: #372352;
    font-weight: 500;
    padding-bottom: 1px;
    border-bottom: 2px solid #372352;
}

.titulo-sidebar:after {
    display: block;
    content: "";
    height: 2px;
    width: 60px;
    background: #eac97b;
    position: absolute;
    margin-top: 1px;
}

.main-sidebar {
    width: 33%;
	float: right;
	margin-top: 20px;
	margin-left: 10px;
}

.media {
	display: flex;
    border-bottom: 1.5px dotted #B0AFB5;
}

.media-body {
	width: 66%;
    vertical-align: top;
	margin-left: 10px
}

.media-body, .media-left, .media-right {
    display: inline-block;
}

.media-left {
	width: 33%;
    margin: 10px 0;
	max-height: 90px;
	overflow-y: hidden;
}

.media-object{
	width: 100%;
}
/*
.container-sidebar{
	max-width: 290px;
}*/

.icon {
    height: 20px;
    vertical-align: middle;
	margin-right: 5px;
}

span.arrow {
    font-size: 20px;
    vertical-align: middle;
    color: #dab96c;
    font-weight: bold;
}

h4.media-heading.color-cinza{
	max-width: fit-content;
}

.ig{
	margin-top: 20px;
}

/*	Post	*/



/*	Media Qweries*/


@media(max-width: 1169px){
	.main-section{
		display: block;
	}
	
	.section-block{
		margin: 0 auto;
		width: 80%;
	}
	
	.main-sidebar {
		width: auto;
		float: none;
		margin-top: 20px;
		margin-left: 0;
		text-align: -webkit-center;
	}
	
	.row-post{	
   	 	width: fit-content;
    	margin: 0 auto
	}
	
	.titulo-sidebar{
		width: fit-content;
	}
	
	.titulo-sidebar:after{
		width: 30px;
	}
	
	.container-blog {
   		padding-right: 15px;
   	 	padding-left: 15px;
	}
	
	.media{
		width: 55%;
	}
	
	.media-left{
		max-height: none;
		overflow-y: unset;
	}
	
	.row-footer{
		display: block;
		margin: 20px auto;
		padding: 10px auto;
		text-align: center;
	}
	
	.contatos{
		margin-left: 0;
	}
	
}

@media(max-width: 1024px) {
	
	.content-area, .primary-sidebar{
		display: contents;
		text-align: center;
	}
	
	.article-loop{
		margin: 5px auto;
	}
	.content-area-flex{
			display: block;
	}
	
	.post-space {
		margin: 5px;
		width: 99%;
		padding: 1%;
	}
	
	.container-pagepost{
		margin-left: 0;
	}
		
	.row{	
    	text-align: -webkit-center;
	}
	
}

@media(max-width: 992px){
	 	.container{
		width: auto;
	}
	
	.section-block{
		width: 100%;
	}
	
}
@media(max-width: 768px) {
	
	.article-loop,
	.article-full{
		display: block;
	}
	
	.img-post {
		width: fit-content;
		height: fit-content;
		margin: auto;
	}
	
	.left-img{
		max-height: unset;
		overflow-y: unset;
		text-align: center;
	}
	
	.img-fluid{
		width: 60%;
	}
	
	.category{
		left: 15%;
	}
	
	
	.contatos{
		margin: 0px
	}
	
	.copyright{
		margin: 0px;
	}
	
	.row{
		margin-left: 0;
	}
	
	.block-content{
		width: auto;
	}
	
	.row-post{
		float: none;
	}
	
	.image-post{
		max-height: 300px;
	}
	
	a.btn-post{
		margin-left: 0px;
		height: 100%;
		width: 50%;
		justify-self: center;
		padding: 10px;
		text-align: center;
	}
	
	.row-post{
		display: grid;
	}
	
	.post-main{
		margin: 0 auto;
	}
	
	.media{
		width: 80%;
	}
	
}

@media(max-width: 570px){
	.alinha-direita ul li a{
		padding: 10px;
	}
	
	.post-main{
		display: block;
		width: 99%;
	}
	
	.title-post{
		margin: 0 auto;
	}
}

@media(max-width: 470px){	
	.post-views{
		margin: 0 auto;
	}
	
	.heart-this-wrap{
		text-align: center;
	}
	
	.data-post, .post-views {
   		margin-right: 20px;
	}
	
	.image-post{
		height: 180px;
	}
}

@media(max-width: 320px){	
	.contatos ul li a{
		font-size: 1rem;
	}
	
	.alinha-direita ul li a {
    	padding: 6px;
	}
	
	.media {
		display: flex;
	}
	
	.btn-post, .post-views{
		margin-left: 5px;
	}
	
	.btn-post{
		margin-top: 7px;
	}
}