@charset "utf-8";

body, ul {
  font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
  background-color: #FFFFFF;
  margin:0px;
  padding:0px;
  list-style-type:none;
  align-items: center;
}
 /* titulo*/
h3 {
    display: block;
    font-size: 20px;
    margin-top: 1em;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: bold;
}
h6 {
    display: block;
	font-weight: normal;
	text-decoration-line: underline;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 360px;
    margin-right: 360px;
    text-align: justify;
	text-align-last: center;
}
 /* paragrafo */
p {
	display: block;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 360px;
	margin-right: 360px;
	text-align: justify;
}
 /* unvisited link */
a:link {
    text-decoration: none;
	color: #686464;
}

/* visited link */
a:visited {
	text-decoration: none;
    color: #686464;
}

/* mouse over link */
a:hover {
	text-decoration: none;
    color: orangered;
}

/* selected link */
a:active {
    text-decoration: none;
    color: orangered;
	background-color: #686464;
} 
/*conteiner para o "div-tudo" com header main e footer*/
.container {
	max-width: 1525px;
	min-width: 350px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 04px;
	align-items: center;
}
/*conteiner para os "div" da info page*/
.infosections {
	max-width: 1525px;
	min-width: 350px;
	min-height: 65px;
	align-items: center;
	text-align: center;
}
.infosections > img{
	padding-top: 15px;
}
.footer {
	max-width: 1525px;
	min-width: 350px;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-style: normal;
	font-size: 15px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.footer > p {
	align-content: center;
	font-size: 22px;
	text-align: center;
	padding-bottom: 15px;
}
/*estilo para a header com logo e menu em grid de 3x1 responsivo vai para @media sm anular*/
.cabecalho {
	max-width: 1425px;
	margin-left: 10px;
	margin-right: 10px;
	height: auto;
	display: grid;
	grid-template-column: 325px auto 325px;
}
.cabecalhoinfo {
	max-width: 1425px;
	margin-left: 10px;
	margin-right: 10px;
	height: auto;
	display: grid;
	grid-template-column: 325px auto 325px;
}
/*estilo do logo Ricardo ligabue na @media sm mudar alinhamento de texto*/
.logotipo {
	grid-column: 1 / 2;
	width: 325px;
	height: 50px;
	color: #686464;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 36px;
	text-align: center;
}
.logotipoinfo {
	grid-column: 1 / 2;
	width: 325px;
	height: 50px;
	color: #686464;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 36px;
	text-align: center;
}
/*estilo do menu  atenção para o nav ul li e alinhamento de texto nas @medias*/
.menu {
	grid-column: 3 / 4;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 325px;
	height: 50px;
	font-size: 15px;
	margin-top: 20px;
	text-indent: 10px;
}
.menuinfo {
	grid-column: 3 / 4;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 325px;
	height: 50px;
	font-size: 15px;
	margin-top: 20px;
	text-indent: 10px;
}
/*estilo da navegação*/
nav ul li {
	display: inline-block;
	width: 100px;
	height: 50px;
}
/*estilo do grid para imagens do portfolio anular na @media sm para 1 coluna*/
.portfoliogrid{
	background-color: white;
	margin-top: 15px;
	margin-left: 15px;
	width: 96%;
	height: auto;
	/* propriedades do grid */
	display: grid;
	grid-gap: 10px;
	grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
	grid-auto-rows: 400px;
	grid-auto-flow: dense;
 }
/*estilo nas imagens dentro de divs na div com estilo portfolio*/
.portfoliogrid > div > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* tipos de imagens nos portfolios quadradas não tem estilo +retangular +grandes*/
.retangular{
	grid-column: span 2;
}
.grandes{
	grid-column: span 2;
	grid-row: span 2;
}
.pinit {
	float: right;
	align-content: left;
}
.pinit > a:link {
	display: none;
}

/*aqui começam as @medias no layout de grid não haverá necessidade de novos breakpoints
só o do tam<780 que vai ter uma coluna e unificar o tam min780max1524,
a partir do 1525 só expande margens*/

/* DESKTOP OVER */
@media (min-width: 1525px){
p {
	display: block;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 360px;
	margin-right: 360px;
	text-align: justify;
}
}
/* 2 COLUNAS */
@media (min-width: 780px) and (max-width: 1524px){
p {
	display: block;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 200px;
	margin-right: 200px;
	text-align: justify;
}
h6 {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: justify;
}
} 
/* 1 COLUNA */
@media (max-width: 779px){
p {
	display: block;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 36px;
	margin-right: 36px;
	text-align: justify;
}
h6 {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 36px;
    margin-right: 36px;
    text-align: justify;
}
.container {
	max-width: 740px;
	min-width: 350px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 04px;
	min-height: 2000px;
}
.cabecalho {
	max-width: 600px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	align-items: center;
	display: grid;
	grid-template-column: auto;
	grid-template-row: 50px 50px;
}
.cabecalhoinfo {
	align-self: center;
	max-width: 600px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	align-items: center;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-row: 50px 50px;
}
.logotipo {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 325px;
	height: 50px;
	color: #686464;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 36px;
	text-align: center;
}
.logotipoinfo {
	align-items: center;
	align-self: center;
	grid-column:2 / 3;
	grid-row: 1 / 2;
	width: 325px;
	height: 50px;
	color: #686464;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 36px;
	text-align: center;
}
.menu {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	width: 325px;
	height: 50px;
	font-size: 15px;
	margin-top: 0px;
}
.menuinfo {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	align-self: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	width: 325px;
	height: 50px;
	font-size: 15px;
	margin-top: 0px;
}
.portfoliogrid{
	background-color: white;
	margin-top: 15px;
	margin-left: 15px;
	width: 90%;
	height: auto;
	/* propriedades do grid */
	display: grid;
	grid-gap: 10px;
	grid-template-columns: none;
	grid-template-rows: repeat(auto-fit, minmax(1fr, 550px));
	grid-auto-rows: auto;
	grid-auto-flow: row;
}
.retangular{
	grid-column: 1 / 2;
}
.grandes{
	grid-column: 1 / 2;
	grid-row: auto;
}
.footer {
	max-width: 740px;
	min-width: 340px;
}
}