*, *:before, *:after {
  box-sizing: border-box;
}

html {
height: 100%;
margin: 0;
overflow-x: hidden;
}

body {
margin: 0;
min-height:100%; 

color: #000;
background-color: #2d2d2d;

font-family: 'Roboto', sans-serif;
text-align: center;

display: grid;
grid-template-columns: 14% 52% 2% 18% 14%;
grid-template-rows: 85vh auto 180px;

grid-template-areas: 
      "hd hd hd hd hd"
      ". ita . itb ."
      "ft ft ft ft ft";
}

.header{grid-area: hd}
.centro{grid-area: ita}
.direita{grid-area: itb}
.footer{grid-area: ft}

.header{
background-color: #2d2d2d;
background-image: url("images/musashi bg2.png"), url("images/paper.jpg") ;
background-position: right center, center center;
background-size:cover, cover;
background-repeat: no-repeat, no-repeat;
text-align: left;
}

.centro{
font-size: 18px; 
line-height: 1.6;
text-align: left;
color: #e5e5e5;	
padding: 20px 5px;
}

.direita{
padding: 40px 0px 20px 0px; 
text-align: center;
}

.footer{
padding-top: 50px; 
text-align: center;
background-image: url(images/fundo3.png);
background-repeat: repeat-x;
background-position: top;
background-color: #222222; 
color: #686868;
}


/* ----------------- M O B I L E ------------------------- */

@media screen and (max-width: 980px) {

body {

grid-template-columns: 3% 94% 3%;
grid-template-rows: 65vh auto 190px  160px;

grid-template-areas: 
"hd hd hd"
". ita ."
". itb ."
"ft ft ft"
}

.centro {
 padding: 10px 5px; 
font-size: 15px;
}

.direita {
padding: 10px 5px;
}
.direita p {
display: none;
}
}

@media screen and (max-width: 610px) {

body {
grid-template-rows: max-content auto 190px  160px;
}
}

/* ----------------  E L E M E N T O S ------------------------*/

H1 {
font-size: 25px;
font-weight: 900;
color: #fff;
}

H2 {
font-size: 16px;
font-weight: 900;
text-align: center;
/*color: #686868;*/
color:#fff;
}

H3 {
font-size: 19px;
font-weight: 400;
color: #fff;
text-align: left;
}

hr {

border: none;               /* Removes default browser border */
height: 2px;                /* Sets the thickness of the line */
width: 98%;                 /* Controls the width of the line */
margin: 20px auto;   
background-color: #222222;
}

b {
color: #fff;
}

A {
color: #CFB53B;
font-weight: bold;
text-decoration: none;
}


A:hover {
color: #ffd700;	
}

.imagem {
border: 0px solid #000000;
margin: 25px;
width: 180px;
}

.foto {
border: 0px solid #000000;
height: 120px;
}

.foto2 {
border: 0px solid #000000;
height: 200px;
}

.desc {
font-size: 30px;
font-weight: 900;
margin-left: 25px;
color: #000;	
letter-spacing: 1px;
}

.desc2 {
font-size: 14px;
letter-spacing: 0.8px;
margin-top: 3px;
margin-left: 25px;
color: #000;	
}

.texto {
text-align: justify;
}

.texto p {
text-indent: 20px;
}

.texto p + p {
text-indent: 0px;
}

.direita a img {
width: 30px;
margin: 1px;
}

.direita a img:hover  {
background-image: radial-gradient(circle, #ffd700 85%, #2d2d2d 15%);
}

/* ------------------ E L E M E N T O S   M O B I L E  --------------------- */

@media screen and (max-width: 980px) {

.imagem {
width: 100px;
margin: 10px 0px 20px 10px;
}

.foto {
height: 80px;
}

.foto2 {
display: none;
}

.desc { 
font-size: 22px;
font-weight: 900;
margin-left: 10px;
}

.desc2 {
font-size: 11px;
margin-left: 10px;
margin-bottom: 10px;
}

H1 {
font-size: 20px;
}

H2 {
font-size: 15px;
}

H3 {
font-size: 16px;
}
}

/* ---------------------  M E N U ---------------------------- */

.navbar {
background-color: rgba(34,34,34, 0.4) !important;
width: 50%;
position: absolute;
top: 25px;
right: 0;
user-select: none; /* impede selecao acidental */
display: flex;
flex-direction: row;	
}

.navbar a {
color: #CFB53B;
justify-content: center;
align-items: center;
padding: 0px 20px;
text-decoration: none;
height: 45px;
display: flex;
font-size: 16px;
letter-spacing: 0.8px;
}

.navbar a:hover {
background-color: rgba(34,34,34, 0.5) !important;
color: #ffd700;
}

.navbar a.active {
background-color: rgba(34,34,34, 0.7) !important;
 color: #FFF;
}

.togglearea {
background-color: transparent !important;
top: 0px;
position: fixed;
right: 0px;
z-index: 1;
display: none;
flex-direction: column;
height: 45px;
width: 45px; 
justify-content: center; 
align-items: center;
}

.togglearea  svg {
fill: #CFB53B;
}

.togglearea:hover svg {
fill: #ffd700;
}

@media screen and (max-width: 770px) {

.navbar	{
top: 0;
width: 45px;
height: 45px;
background-color: #3a3a3a !important;
position: fixed;
}

.navbar a {
display: none;
}

.navbar.responsive {
display: flex;
flex-direction: column;
width: 250px;
height: auto;
} 
.navbar.responsive a {
display: flex;
}

.togglearea {	
display: flex;
} 
}

/* ------------------------------------------------------*/