@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');

/*body{
    border: 5px solid lime;
}*/

:root {
    --tema: #0079a3;
    --temaclaro: #00acc8;
    --sombra: #8b8b8b;
}

.path-frontpage main {
    /*width: 100vw;*/
}

main {
    width: 85vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
}

p {
  color: #444;
  font-size: 17px;
  letter-spacing: 0.05em;
}

.views-field-body {
  margin-bottom: 5rem;
}



/* efeito image-cover para depois mover para o lugar certo */

.path-cursos .views-field-field-imagem-para-destaque .field-content {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.path-cursos .views-field-field-imagem-para-destaque .field-content img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.3s ease-in-out; /* Smooth transition for grayscale */
}

.path-cursos .views-field-field-imagem-para-destaque .field-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 171, 199, 0.75); /* Adjust color and opacity as needed */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Smooth transition for overlay */
  z-index: 1; /* Ensure the overlay is above the image */
  pointer-events: none; /* Ensure the overlay doesn't block interactions */
}
.path-cursos .views-field-field-imagem-para-destaque .field-content:hover img {
  filter: grayscale(100%); /* Apply grayscale on hover */
}
.path-cursos .views-field-field-imagem-para-destaque .field-content:hover::before {
  opacity: 1; /* Make the color overlay visible on hover */
}


/*------------- resetar margens indesejadas ----------------*/

.region-sidebar-first, .region-sidebar-second, .region-footer, .region-content {
  padding: 0;
}

/*--------------- titulos ----------------*/
h3 a, h4 a {
  color: var(--tema);
  color: #fff; /* por que estava essa cor? */
  color: var(--tema);
  font-size: 1.7rem;
  text-decoration: none;
  font-weight: 400;
}

h4 a {
  font-size: 1.5rem;
}

.views-field-field-destaque-home h3 {
  text-transform: uppercase;
  color: #fff;
}
.view-id-destaques_da_home h3 a {
  color:  var(--tema);
  text-transform: uppercase;
}
.view-destaques-da-home .view-content .views-field-title .field-content {
   margin: 0 auto;
}

.views-field-field-descricao p {
  color: #fff;
  color: #444;
  font-size: 17px;
  letter-spacing: 0.05em;
}

.node--view-mode-full .field--type-image {
  display: flex;
  justify-content: center;
}

#block-neecx-rodape p a {
  background-color: #fff;
}

a {
   /* color: var(--tema);*/
}

/*
a:hover {
  text-decoration: underline;
  essa regra foi comentada por ser muito geral. Verificar onde deve ser cada aplicacao
}
*/

.navbar-brand a.site-title {
    display: none;
}

.node__content .align-left {
    padding-right: 1rem;
}

.views-row:after {
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

h1 span.field--name-title {
  color: var(--tema);
}

/*--------------------------- regiao header --------------------*/

.region-header {
    background-image: url(../images/sky-01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -0.7rem;
    height: 22rem;
}


#search-block-form {
    float: right;
    margin-top: 12rem;
}

.btn:last-child {
    background-color: var(--tema) ;
    border-color: var(--tema); /* talvez tenha que ser none mesmo */
}

.btn:last-child:hover {
    background-color: #026282;
}

/*---------------------------- menu superfish ---------------------*/

/*------ correcao dos bullets em seta ------*/
ul.sf-menu .sf-sub-indicator {
    height: 15px;
    top: 42%;
}

.navbar {
    display: grid;
    justify-content: center;
    background-color: var(--temaclaro);
    height: 3.5rem;
}

.navbar a {
    text-decoration: none;
}

ul.sf-menu span.nolink {
    padding-right: 3em;
}


ul.sf-menu.menu a, .nolink {
    display: grid;
    background-color: var(--temaclaro);
    color: #fff;
}

div.sf-accordion-toggle.sf-style-white a, div.sf-accordion-toggle.sf-style-white a.sf-expanded,
    ul.sf-menu.sf-style-white span.nolink, ul.sf-menu.sf-style-white a:visited {
    background-color: var(--temaclaro);
    color: #fff;
    border: none;
}


ul.sf-menu.sf-style-white li:hover, ul.sf-menu.sf-style-white li.sfHover, ul.sf-menu.sf-style-white a:focus,
    ul.sf-menu.sf-style-white a:hover, ul.sf-menu.sf-style-white span.nolink:hover {
    background: #ffffff;
    color: var(--temaclaro);
    outline: 0;
}

.node__content p strong {
  color: var(--tema);
}

/*--------------------------- fim do menu superfish ---------------------*/


/*------------------------- breadcrumb -------------------------*/
.breadcrumb {
    padding-top: 2rem;
    padding: 24px 0;
    border-bottom: 2px solid var(--tema);
}

.g-0 {
  padding: 50px 0 0;
}

/*------------------------- mensagem da home ---------------------------*/

/*.region-breadcrumb {
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,174,255,0.5060224773503151) 100%);
}*/

#block-neecx-mensagemdahome {
  width: 85vw;
  padding-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}

#block-neecx-mensagemdahome p {
  width: 70%;
  font-size: 1.4em;
  font-style: italic;
  color: var(--tema);
  text-align: center;
  margin: 0 auto;
}


/*---------------------------- destaques -----------------------------------*/

/*#block-b5subtheme-views-block-destaques-destaques*/
/*
#block-neecx-views-block-destaques-da-home {
   The image used
  background-image: url("../images/blue-plaza.jpg");
  /* Set a specific height
  min-height: 900px;
  /* Create the parallax scrolling effect
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
*/

.views-field-field-destaque-home {
  overflow: hidden;
}

.views-field-field-destaque-home .field-content {
  transition: transform .5s ease;
}

.views-field-field-destaque-home:hover .field-content {
  transform: scale(1.2);
}

.view-id-destaques_da_home {
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
}
.view-id-destaques_da_home .view-content .views-row:nth-child(even) {
  display: grid;
  column-gap: 5rem;
  grid-template-areas:
  "imagem titulo"
  "imagem descricao"
  "imagem saibamais";
  margin-bottom: 5rem;
}

.view-id-destaques_da_home .view-content .views-row:nth-child(odd) {
  display: grid;
  column-gap: 5rem;
  grid-template-areas:
  "titulo imagem"
  "descricao imagem"
  "saibamais imagem";
  margin-bottom: 5rem;
}

.views-field-field-destaque-home {
  grid-area: imagem;
}
.views-field-title {
  grid-area: titulo;
}
.views-field-field-descricao {
  grid-area: descricao;
}
.views-field-view-node {
  grid-area: saibamais;
  width: 200px;

}
.views-field-view-node a {
  color: var(--tema);
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  border: 2px solid var(--tema);
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
}
.views-field-view-node a:hover {
  background-color: var(--temaclaro);
  border: 2px solid var(--temaclaro);
}
.views-field-view-node:hover a {
  color: white;
}


/*
 .rectangle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 100px;
            background-color: white;
            border: 1px solid blue;
            text-align: center;
            font-family: Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        .rectangle a {
            color: blue;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
        }

        .rectangle:hover {
            background-color: blue;
        }

        .rectangle:hover a {
            color: white;
        }
*/












.view-id-destaques_da_home .views-field-title h3 a {
  position: relative;
}

.view-id-destaques_da_home .views-field-title h3 a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--tema);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.view-id-destaques_da_home .views-field-title h3 a:hover::before {
  transform: scaleX(1);
}

/*.field--name-field-media-image {
  display: grid;
  justify-content: center;
  grid-area: imagem;
  padding-bottom: 1rem;
}*/

/*
*/

#block-neecx-views-block-destaques-da-home {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

:is(#block-neecx-views-block-destaques-da-home, #block-neecx-views-block-videos-videos) h2 {
  text-align: center;
  font-family: 'GFS Didot', serif;
  text-transform: uppercase;
  font-size: 35px;
  letter-spacing: 0.05em;
  font-weight: 400;
  /*background: var(--temaclaro);*/
  color: var(--tema);
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
/*
#block-neecx-views-block-destaques-da-home h2 {
  text-align: center;
  font-family: 'GFS Didot', serif;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 400;
  background: var(--tema);
  color: #fff;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#block-neecx-views-block-videos-videos h2 {
  text-align: center;
  font-family: 'GFS Didot', serif;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 400;
  background: var(--tema);
  color: #fff;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
*/
/*
#block-neecx-views-block-destaques-da-home {
  margin-top: 5rem;
  margin-bottom: 5rem;
  aqui comecam as invencionices
   background: #00577d;
   background: var(--tema);
   padding-top: 60px;
   padding-bottom: 30px;
}

#block-neecx-views-block-destaques-da-home h2 {
  font-family: "GFS Didot", serif;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 2rem;
  letter-spacing: .2rem;
}

*/
#block-neecx-views-block-videos-videos .view-content {
  width: 85vw;
  margin-left: auto;
  margin-right: auto;
}

#block-neecx-views-block-videos-videos .view-display-id-videos {
  margin-bottom: 4rem;
}

/*
#block-neecx-views-block-videos-videos h2 {
  text-align: center;
  text-transform: uppercase;
  font-family: "GFS Didot", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .2rem;
}

.view-id-destaques_da_home .view-content {
  display: flex;
  justify-content: center;
  column-gap: 2rem; /* valor original
  column-gap: 5rem;
}

.views-field-field-destaque-home a:hover img {
  filter: opacity(0.6);
}
*/


/*------------------------ Bloco Videos Home --------------------------------*/

.view-id-videos .view-content {
  display: flex;
  justify-content: center;
  column-gap: 2rem; /* valor original */
  column-gap: 5rem;
  margin-top: 4rem;
}
.view-id-videos .views-field-title h3 {
  text-align: center;
}
.view-id-videos .views-field-title h3 a {
  font-size: 1.4rem;
}

/*
.view-videos .view-content {
  background-image: url(../images/nosso-lar-filme.jpg);
  /* Set a specific height
  min-height: 400px;
  /* Create the parallax scrolling effect
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 4rem;
}*/

/* hack media query para celulares */

@media only screen and (max-device-width: 1366px) {
  .view-videos .view-content {
    background-attachment: scroll;
  }
}


/*-------------------- Separador entre conteudo e footer -------------------------*/

body:not(.path-frontpage) .content_top {
  margin-bottom: 5rem;
}

/*------------------------------- Titulo paginas -----------------------------*/

h1 /*.field--name-title*/ {
	color: var(--tema);
	display: flex;
	justify-content: center;
	padding: 1rem 0;
	font-weight: normal;
}


/*------------------------------- Subitulos views -----------------------------*/

.view h2 {
  font-size: 1.5rem;
}
.view h2 a {
  text-decoration: none;
  color: var(--tema);
}
.view h2 a:hover {
  text-decoration: underline;
}

/*------------------------------- Espacadores views -----------------------------*/

body:not(.path-frontpage) .view-content .views-row:not(:last-child) {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px dotted var(--tema);
}


/*--------------------------- citacao patronos ------------------------------*/

blockquote::before {
    content: none;
}

blockquote {
  background-color: #efefef;
  color: #666;
  padding: 10px;
  font-style: italic;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);*/
}

/*------------------------------- cursos -----------------------------*/

.path-cursos .view-id-cursos .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  justify-content: center;
}

.path-cursos .view-id-cursos .views-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(33.333% - 10px);
  box-sizing: border-box;
  margin-bottom: 20px;
}

.path-cursos .view-id-cursos .views-field img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  margin-bottom: 2rem;
}

.path-cursos .view-id-cursos .views-field-title h2 {
  margin-bottom: 2rem;
}


/*------------------------------- rodape -------------------------------*/

/*
footer {
  background-color: #123;
  padding: 5rem 0 0 0;
}*/

footer {
  background-image: url(../images/nosso-lar-filme.jpg);
  /* Set a specific height */
  min-height: 200px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 4rem;
}

.region-footer {
  /*background: url('../images/bottombg1.gif') repeat-x;
  background-position: bottom;*/
}

#block-neecx-rodape {
  text-align: center;
	/*background-repeat: repeat-x;*/
	border: none;
	/*background-color: #fff;*/
	margin-bottom: 0;
  padding-bottom: 2rem;
}

#block-neecx-rodape h5 {
  color: var(--tema);
  color: #fff;
}
#block-neecx-rodape p {
  color: #444;
  color: #fff;
}

#block-neecx-rodape a {
  color: var(--tema);
}

/* pagina de cursos display lado a lado */
.page-node-type-cursos .node__content {
  display: grid;
  column-gap: 3rem;
  grid-template-areas:
  "imagem descricao"
  "imagem body"
  "imagem links"
  "imagem arquivos";
  margin-bottom: 5rem;
}
.field--name-field-imagem-para-destaque {
  grid-area: imagem;
}
.field--name-field-descricao {
  grid-area: descricao;
}
.field--name-body {
  grid-area: body;
}
.field--name-field-links {
  grid-area: links;
}
.field--name-field-arquivo {
  grid-area: arquivos;
}

.page-node-type-destaques-home .node__content {
  display: grid;
  column-gap: 3rem;
  grid-template-areas:
  /*"imagem titulo"*/
  "imagem descricao"
  "imagem body";
  margin-bottom: 5rem;
}
.field--name-field-destaque-home {
  grid-area: imagem;
}
.field--name-field-descricao {
  grid-area: descricao;
}
.field--name-body {
  grid-area: body;
}