/*
Theme Name: Mais Mensagens v1.0
Author: Mais Mensagens Team
Author URI: https://maismensagens.com.br
Description: Tema exclusivo maismensagens.com.br 
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: maismensagens
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@charset "utf-8";

*:before, *:after {
	box-sizing: border-box !important;
	padding: 0;
	margin: 0;
}
body {
  width: 100%;
  height: 100%;
  font-size: 14px !important;
  background-color: #f5f5f5;

  font-family: Roboto, Arial, sans-serif;
}


/* links */
a {
	color: #fe0056;
	transition: all 0.5s;
}
a:hover {
	color: #384DFF;
	text-decoration-color: #fe0056;
}

/*------------------------------------*\
2. Header and Navigation
\*------------------------------------*/



.mb-3 ul  {
	padding:0;
	list-style: none;
}
.mb-3 ul li {

}

.mb-3 a {
	color: #495057;
	background: #fff;
	display: block;
	padding: .75rem 1.25rem;
    border: 1px solid rgba(0,0,0,.125);
    border-top-width:0;
}



.mb-3 a:hover {
	background: linear-gradient(45deg,#f7bb13 0%,#fe0056 100%);
	text-decoration: none;
    color: #fff;
}


/* logo */
.logo-mensagens {
	width: auto;
	height:auto;
}

/* nav */
.nav-mensagem {
	background: linear-gradient(45deg,#f7bb13 0%,#fe0056 100%);
}
.nav-mensagem .navbar {
	padding: 0.5rem 0.2rem;
}

/* search mensagem */
.nav-mensagem .search-mensagem {
	background-color: rgb(0,0,0,0.05);
	border-radius: 6px;
}
.nav-mensagem .search-mensagem input {
	width: 290px;
	background-color: rgb(0,0,0,0.05);
    border: 1px solid rgb(0,0,0,0.1);
    margin-left: 5px;
	border: none;
	outline: none;
	font-size: 15px;
	color: #fff;
}
.nav-mensagem .search-mensagem input::placeholder {
	color: #fff;
	opacity: 0.8;
}
.nav-mensagem .search-mensagem input:focus {
	outline: inherit;
	box-shadow: none;
}
.nav-mensagem .search-mensagem .btn-link {
	font-size: 20px;
	color: #fff;
}

/* ul */
.nav-mensagem ul {
	margin: 0 auto;
}
.nav-mensagem ul .nav-item {
	margin: 5px;
}
.nav-mensagem ul .nav-item a {
	border:1px solid rgba(255,255,255,0.2);
	color: #fff;
	text-transform: uppercase;
	border-radius: 4px;
	font-size: 0.8em;
	padding: 2px;
}
.nav-mensagem ul .nav-item a:hover {
	background-color: #fff;
	color: #fe0056;
}

/* responsive menu */
.nav-mensagem .navbar-toggler {
	padding: 3px;
	border: none;
	background-color: rgba(255,255,255,0.2);
	color: #fff;
}

.menu-svg {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 400ms;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.menu-svg .top {
	stroke-dasharray: 40 121;
}
.menu-svg .bottom {
	stroke-dasharray: 40 121;
}
.menu-svg.active .top {
	stroke-dashoffset: -68px;
}
.menu-svg.active .bottom {
	stroke-dashoffset: -68px;
}
.menu-rotate.active {
	transform: rotate(45deg);
}
.menu-rotate.active .line {
	stroke: #333;
}
.line {
	fill: none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: #fff;
	stroke-width: 5.5;
	stroke-linecap: round;
}

/* especial link */
.nav-mensagem ul .nav-item a.especial {
	background-color: #384DFF !important;
}
.nav-mensagem ul .nav-item a.especial:hover {
	background-color: #fff !important;
	color: #384DFF;
}
/*------------------------------------*\
3. Typography
\*------------------------------------*/
h1 {
	font-size: 28px;
	font-weight: 700;
}
h2 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0;
}
h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0;
}
h4 {
	font-size: 1.4rem;
}
h5 {
	font-size: 1.2rem;
}
h6 {
	font-size: 0.9rem;
}

/*------------------------------------*\
4. Colors
\*------------------------------------*/

/*
Container 100%
*/
.index-container{
	max-width: 100%!important;
	padding-left: 5%;
	padding-right: 5%;
}
.category-container{
	max-width: 100%!important;
	padding-left: 5%;
	padding-right: 5%;
}


/* text */
.color-primary {
	color: #555; /* orange */
	padding-bottom: 5px;

}
.color-secondary {
	color: #384DFF; /* blue */
}
.color-black {
	color: #251b17; /* black */
}

/* background */
.background-primary {
	color: #fe0056; /* orange */
}
.background-secondary {
	color: #384DFF; /* blue */
}
.background-black {
	color: #251b17; /* black */
}


/* social media - text */
.whatsapp {
	color: #25d366;
}
.facebook {
	color: #3b5998;
}
.instagram {
	color: #802C6E;
}
.twitter {
	color: #1da1f2;
}
.pinterest {
	color: #c8232c;
}
.email {
	color: #333;
}


/*------------------------------------*\
5. Components
\*------------------------------------*/

/* list-group */
.list-group {
	border-radius: 6px;
}
.list-group a:hover {
	background: linear-gradient(45deg,#f7bb13 0%,#fe0056 100%);
	color: #fff;
}

/* all links */
.all-links {
	font-weight: bold;
	text-transform: uppercase;
}

/*------------------------------------*\
6. Grid Mensagens
\*------------------------------------*/

/* destaque mensagens */
.grid-destaque-mensagens {
	-moz-column-width: 8em;
	-webkit-column-width: 8em;
	column-width: 8em;
}
.item-mensagem-destaque {
	width: 100%;
	display: inline-block;
	margin: 0.5rem 0.25rem;
	border-radius: 6px;
}
.item-mensagem-destaque img {
	border-radius: 6px;	
}
.item-mensagem-destaque a h4 {
	display: none;
}

/* todas mensagens */
.grid-todas-mensagens {
	-moz-column-width: 18em;
	-webkit-column-width: 18em;
	column-width: 18em;
	-moz-column-gap: 1.5em;
	-webkit-column-gap: 1.5em;
	column-gap: 1.5em;
}
.item-mensagem-todas {
	background-color: #fff;
	display: inline-block;
	margin-bottom: 1.3em;
	width:  100%; 
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 #d9d9d9;
	-webkit-box-shadow: 0 1px 3px 0 #d9d9d9;
}
.item-mensagem-todas img {
	margin-bottom: 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.item-mensagem-todas h2{
	font-size: 18px;
	padding: 1rem;
}
.item-mensagem-todas p {
	padding: 0 1rem 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}


/*------------------------------------*\
7. Internas
\*------------------------------------*/
.box {
	display: block;
	background-color: #fff;
    box-shadow: 0 1px 3px 0 #d9d9d9;
    -webkit-box-shadow: 0 1px 3px 0 #d9d9d9;
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}
.box h1,
.box h2,
.box h3 {
	padding: 1rem 1rem 0;
}
.box p {
	padding: 1rem;
	margin-bottom: 0;
	font-size: 1em;
    line-height: 1.6;
}
.box img {
	margin-top: 5px;
}

/* box footer */
.box-footer {
	padding:0;
}
.box-footer .list-group {
	border: inherit;
}
.box-footer .list-group li.list-group-item {
	background: transparent;
	border: inherit;
	padding: .5rem 0.7rem; 
}
.box-footer .list-group li.list-group-item .btn-redes-sociais {
	font-size: 1.7em;
	transition: all 0.2s;
}
.box-footer .list-group li.list-group-item .btn-outline-dark:hover {
	border-color: #fe0056;
	color: #fe0056 !important;
}
.box-footer .list-group li a:hover {
	color: transparent !important;
	background: inherit !important;
}
.box-footer .list-group li.list-group-item a i:hover {
	transform: scale(1.4);
}

/*------------------------------------*\
8. Recomendados
\*------------------------------------*/
.recomendados .card-deck .card {
	flex: 0 1 14em;
	margin-bottom: 20px;
}


/*------------------------------------*\
9. Anúncios
\*------------------------------------*/
.anuncio-mensagem img {
	margin: 0 auto;
	display: block;
	text-align: center;
}
button{
	border:0;
	background: none;
}
.cp{
	float: right;
}
.cp i{
	font-size: 20px;
}
.cp:before{
	content: 'Copiar';
    color: #b5b6ba;
    margin: 5px;
    padding: 0px;
}
.btn_copiado i{
	font-size: 20px;
	color: #32CD32;
}
.btn_copiado{
	float: right;
}
.btn_copiado:before{
	content: 'Copiado';
    color: #32CD32;
    margin: 5px;
    padding: 0px;
}
button i{
	font-size: 26px;
	color: #b5b6ba;
}
.compartilhar{
	width: 100%;
	display: block;
	overflow: hidden;
	padding: 8px;
	border-top:1px solid rgba(0,0,0,.125);
}
/*Pagination*/
#pagination a{
	background: #fff !important;
	padding: 5px;
}
/* Breadcrumbs*/

p#breadcrumbs {
	font-size: 12px;
}

/* ## Publicidade */
#publi{
	width: 300px;
	height: 250px;
	margin: 20px;
	border:1px solid #dfdfdf;
	float: right;
}