/* ------------------- #MENTALIDADE-360, #ENEG, #CONEXAO */

#j-mentalidade-360,
#j-eneg,
#j-conexao {
  background-image: none;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative; z-index:1;  	
}
#j-mentalidade-360:after,
#j-eneg:after,
#j-conexao:after {  
  background: rgba(255, 255, 255, 0.9); 
  content: ""; 
  position:absolute; z-index:-1;
  top:0;bottom:0;left:0;right:0; 
}  

#mentalidade-360,
#eneg,
#conexao {
	display: grid;
	grid-template-columns: 60px 1fr 60px;
	grid-template-rows: auto;
	grid-template-areas:
		". ttl ."
		". txt ." 
		". pic .";
}
#mentalidade-360 .ttl,
#eneg .ttl,
#conexao .ttl {
	grid-area: ttl;
	align-self: center;
	margin: 0 auto;
}
#mentalidade-360 .ttl h2,
#eneg .ttl h2,
#conexao .ttl h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 2px 0 2px 0;
    font-size: 27px;
    text-align:left;
    color: #e1c059;
    background: none;
    text-transform: uppercase;
    line-height: 1.5;
    margin-bottom:0;
}
#mentalidade-360 .txt,
#eneg .txt,
#conexao .txt {
	grid-area: txt;
}
#mentalidade-360 .txt p,
#eneg .txt p,
#conexao .txt p {
	text-align: left;
	font-size: 18px;
}
#mentalidade-360 .txt h2,
#eneg .txt h2,
#conexao .txt h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 2px 0 2px 0;
    font-size: 27px;
    text-align:left;
    color: #e1c059;
    background: none;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 15px 0;
}
#mentalidade-360 .txt p .sp2,
#eneg .txt p .sp2,
#conexao .txt p .sp2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	font-size: 21px;
	color: #424242;
	text-align:left;
	text-shadow: 1px 1px 1px #e1c059;
}
#mentalidade-360 .txt h3,
#eneg .txt h3,
#conexao .txt h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    padding: 2px 0 2px 0;
    font-size: 21px;
    text-align:left;
    color: #e1c059;
    background: none;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 15px 0;
}
#mentalidade-360 .txt p,
#eneg .txt p,
#conexao .txt p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	color: #424242;
	text-align:left;
}

#mentalidade-360 .pic,
#eneg .pic,
#conexao .pic {
	grid-area: pic;
	text-align:center;
	}
#mentalidade-360 .rec,
#eneg .rec,
#conexao .rec {
	width: 100%;
	background: #fafafa;
	margin: 15px 0;
	border-radius: 6px;
	overflow: hidden;
}
#mentalidade-360 .rec p,
#eneg .rec p,
#conexao .rec p {
	font-family: 'Open Sans', sans-serif;
	font-size: 21px;
	font-weight: 300;
	text-align: left;
	color: #424242;
	line-height: 0.6;
}	
#mentalidade-360 .rec p span,
#eneg .rec p span,
#conexao .rec p span {
	font-size: 18px;
	text-transform: uppercase;
}
#mentalidade-360 .rec a,
#mentalidade-360 .rec a:focus, 
#mentalidade-360 .rec a:visited  {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color: #e1c059;
	transition: all ease-in-out .3s;
	font-weight: 600;
}
#eneg .rec a,
#eneg .rec a:focus, 
#eneg .rec a:visited  {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color: #e1c059;
	transition: all ease-in-out .3s;
	font-weight: 600;
}
#conexao .rec a,
#conexao .rec a:focus, 
#conexao .rec a:visited  {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color: #e1c059;
	transition: all ease-in-out .3s;
	font-weight: 600;
}
#mentalidade-360 .rec a:hover,
#eneg .rec a:hover,
#conexao .rec a:hover  {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color: #424242;
}		
#mentalidade-360 .pic .rec img,
#eneg .pic .rec img,
#conexao .pic .rec img {
	width:150px;
	height: 150px;
	margin: 0 auto;
	float: left;
	padding-right: 9px;
}

/* ------------------- MEDIA QUERIES FOR #MENTALIDADE-360, #ENEG, #CONEXAO */

@media (min-width: 0px) and (max-width: 319px) {
#mentalidade-360 .rec p,
#eneg .rec p,
#conexao .rec p {
	font-size: 12px;
}	
#mentalidade-360 .rec p span,
#eneg .rec p span,
#conexao .rec p span {
	font-size: 12px;
	line-height:1.2;
}		
#mentalidade-360 .pic .rec img,
#eneg .pic .rec img,
#conexao .pic .rec img {
	width:81px;
	height: 81px;
	margin: 0 auto;
	float: left;
	padding-right: 9px;
}	
}

@media (min-width: 320px) and (max-width: 575px) {
#mentalidade-360 .rec p,
#eneg .rec p,
#conexao .rec p {
	font-size: 15px;
	line-height: 1;
}	
#mentalidade-360 .rec p span,
#eneg .rec p span,
#conexao .rec p span {
	font-size: 15px;
}		
#mentalidade-360 .pic .rec img,
#eneg .pic .rec img,
#conexao .pic .rec img {
	width:120px;
	height: 120px;
	margin: 0 auto;
	float: left;
	padding-right: 9px;
}	
}

@media (min-width: 0px) and (max-width: 991px) {
#mentalidade-360,
#eneg,
#conexao {
	grid-template-columns: 16px 1fr 16px;
	grid-template-rows: auto;
	grid-template-areas:
		". ttl ."
		". txt ." 
		". pic .";
}
#mentalidade-360 .txt,
#eneg .txt,
#conexao .txt {
	grid-area: txt;
	align-self: center;
}
#mentalidade-360 .txt h2,
#eneg .txt h2,
#conexao .txt h2 {
    text-align:center;
}
#mentalidade-360 .pic,
#eneg .pic,
#conexao .pic {
	grid-area: pic;
	text-align:center;
	}		
}