@font-face {
  font-family: "Gayathri";
  src: url("../lta/fontes/Gayathri/Gayathri-Regular.woff");
}

@font-face {
  font-family: "Rozha_One";
  src: url("../lta/fontes/Rozha_One/RozhaOne-Regular.woff");
}

body, html {
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      text-align: center;
      
  }

  body {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    padding: 2%;
    font-size: 100%;
    background: black;
    color: white;
    backface-visibility: hidden;
    font-family:Gayathri ; 
  }

header{
border-bottom:3px inset #9f7928;
display: flex;
flex-direction: row;
height: 300px;
background-image: url("img/Fotos e vídeos/Logo/LogoTransparente1.png");
background-position:top ;
background-repeat: no-repeat;
background-size: 30%;
padding-top: 200px ;
margin: 10px;
}

footer {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                color:black;
                padding:2%;
}

.contato
{
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
  radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  color:black;
  padding:5%;
  margin:2px;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  text-decoration: none;
  opacity: 85%;
}



.contato:hover
{
  border: 1px solid black;
  box-shadow: inset 0 0 20px rgba(38, 37, 37, 0.5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px rgb(160, 160, 138);
  opacity:100%;
}

.contatos
{
  width: 5%;
  display:flex;
  flex-direction: column;
  position:fixed;
  right:1%;
  bottom:0;
  z-index:2;
}


.contato img
{
  width:100%;
}

  *
  , *::before
  , *::after {
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
  }
  
 h1,strong
  {
    font-family: 'Rozha_One';
    color: #D1B464;
    padding-bottom:2%;
    text-shadow: 2px -2px 10px black; 
  }



  video{
    border-radius:25px;
    margin-top:2%;
    margin-bottom: 2%;
    border-right: solid 10px #9f7928;
  }

  .ligar
  {
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  }
  
  .apresentacao
  {
    padding:2%;
    font-family:'Rozha_One' ;
    font-size:16pt;
    text-align: justify;
    transition: linear 2s;
    width:95%;
    border-bottom:3px inset #9f7928;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
  }

  .depoimentos
  {
    border-top:3px inset #9f7928;
    width:100%;
    border-bottom:3px inset #9f7928;
    padding: 1%;
    background-image: url("./img/topografia.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .perguntas
  {
    margin-top:2%;
    width: 95%;
    padding:10%;
    text-align: justify;
    line-height: 1.5;
    padding: 1%;
    font-size:larger;
    color: white ;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
  }
  
  .perguntas h1
  {
    color:black;
  }

  .perguntas strong
  {
    color: #9f7928;
    border-color: #9f7928;
    border-style: 1px double;
  }

  .perguntas strong:hover
  {
    color:#9f7928;
  }

  .perguntas p:hover 
  {
    padding: 2%;
    border:1px solid #D1B464;
    transform: scale(1.05);
    transition: all 2s ease-in-out;
    background-color: black;
  }
  
  input {
    display: none;
  }

  label
  {
    background-image: url(./img/menu.png);
    background-position: center;
    background-repeat: no-repeat;
  }
  
  #welcomeMessage {
    font-size: 130%;
  }
  
  #welcomeMessage
  , #welcomeMessage
    figcaption
  , #welcomeMessage
    figcaption
    h1
  , #welcomeMessage
    figcaption
    h1
    b {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #f8ecb5 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%);
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    color: black;
    padding-bottom:2%;
    
  }
  
  #welcomeMessage
  figcaption::after {
    background: var(--gradient);
    width: calc(100% + 2.1em);
    height: calc(100% + 2.1em);
    z-index: -2;
  }
  
  #welcomeMessage
  figcaption
  h1:active {
    transform: scale(1.2);
    transition: all 0.1s ease-in-out;
  }
  
  #welcomeMessage
  figcaption
  h1::before
  , #welcomeMessage
    figcaption
    h1::after {
      position: absolute;
      white-space: nowrap;
      font-size: 0.7em;
      font-weight: 200;
      transition: all 0.7s ease-in-out;
  }
  
  #welcomeMessage
  figcaption
  h1::before {
    top: -4.3em;
    right: 2em;
    font-weight: 400;
    color: white;
    opacity: 0; 
  }

  
  
  #welcomeMessage
  figcaption
  h1::after {
    bottom: -3em;
    transition: all 0.3s ease-in-out;
  }
  
  #welcomeMessage
  figcaption
  h1
  label {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  
  #welcomeMessage
  figcaption
  h1
  label:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: auto;
    right: 0;
    top: -3em;
    background: transparent;
    padding: 5px;
    opacity: 0;
    z-index: 998;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #f8ecb5 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%);
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    color: black;
    padding-bottom:2%;
  }
  
  #welcomeMessage
  figcaption
  h1
  label:hover {
    cursor: pointer;
  }
  
  #welcomeMessage
  figcaption
  h1
  b {
    width: 2em;
    height: 2em;
    background: transparent;
    user-select: none;
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1;
    transition: all 0.35s ease-in-out;
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a:focus::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    border-radius: 0.3em;
    content:"";
    z-index: -1;
    animation: spinny 5s linear infinite;
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a:focus::after {
    position: absolute;
    width: calc(100% + 0.05em);
    height: calc(100% + 0.05em);
    background: var(--gradient);
    border-radius: 0.3em;
    content:"";
    z-index: -2;
    animation: spinny 5s linear infinite;
    filter: blur(5px);
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a:active::after {
    filter: blur(5px);
    background-color: white;
  }
  
  @keyframes spinny {
    0% {
      transform: rotateZ(0deg);
      border-radius: 0.3em;
    }
    50% {
      border-radius: 1em;
    }
    100% {
      transform: rotateZ(360deg);
      border-radius: 0.3em;
    }
  }

  a{
    background: rgb(194,143,52);
    background: -moz-linear-gradient(90deg, rgba(194,143,52,1) 0%, rgba(240,221,153,1) 35%, rgba(188,133,42,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(194,143,52,1) 0%, rgba(240,221,153,1) 35%, rgba(188,133,42,1) 100%);
    background: linear-gradient(90deg, rgba(194,143,52,1) 0%, rgba(240,221,153,1) 35%, rgba(188,133,42,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c28f34",endColorstr="#bc852a",GradientType=1);
    padding: 3%;
    border-radius:5%;
    color:black;
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a
  svg {
    position: relative;
    width: 55%;
    height: auto;
    fill: black;
    filter: grayscale(100%) brightness(1.2);
    transform: rotateY(-180deg);
    transition: all 200ms linear;
}
  
  #welcomeMessage
  figcaption
  h1
  b
  a:hover
  svg {
    filter: grayscale(0%) brightness(1);
    transition: all 200ms ease-in-out;
    transform: scale(1.2); 
  }
  
  #welcomeMessage
  figcaption
  h1
  b
  a:focus
  svg {
    filter: grayscale(0%) brightness(1);
    transform: rotateY(-180deg) scale(0.9);
    transition: all 70ms linear;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage {
        font-size: 100%;    
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption::before {
      width: calc(100% + 3em);
      height: calc(100% + 3em);
      border-radius: 0.7em;
      transition: all 0.7s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption::after {
      width: calc(100% + 6em);
      height: calc(100% + 6em);
      border-radius: 1em;
      transition: all 0.7s ease-in-out;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption::before
    , #toggleClose:checked
      ~ #welcomeMessage
      figcaption::after {
        transition: all 0.7s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1 {
      background: transparent;
      box-shadow: none;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1:active {
      transform: none;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption
    h1 {
      background: transparent;
      transition: all 0.05s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1::before {
      opacity: 1;
      transition: all 0.7s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1::after {
      opacity: 0;
      transition: all 0.7s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    label:first-of-type {
      display: none;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    label:last-of-type {
      z-index: 999;
      opacity: 1;
      transition: all 0.7s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    b {
      color: transparent;
      border-radius: 0.3em;
      box-shadow: rgba(0, 0, 0, 0.19) 0px 0.625em 1.25em, rgba(0, 0, 0, 0.23) 0px 0.375em 0.375em;
      transition: all 0.35s ease-in-out;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption
    h1
    b {
      transition: all 0.35s ease-in-out;
      transition-delay: 0.35s;
      animation: welcomeClose 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    b:not(:first-of-type, :last-of-type) {
      animation: welcome 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    b:first-of-type {
      animation: welcomeFirst 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    b:last-of-type {
      animation: welcomeLast 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption
    h1
    b:first-of-type {
      animation: welcomeCloseFirst 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption
    h1
    b:last-of-type {
      animation: welcomeCloseLast 0.7s ease-in-out 1;
      animation-fill-mode: forwards;
  }
  
  #toggleClose:checked
    ~ #welcomeMessage
    figcaption
    h1
    b::after {
      opacity: 0;
      transition: all 0.35s ease-in-out;
  }
  
  #toggleOpen:checked
    ~ #welcomeMessage
    figcaption
    h1
    b
    a {
      opacity: 1;
      transition: all 0.35s ease-in-out;
      transition-delay: 0.35s;
  }
  
  @keyframes welcome {
    0% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    20% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    80% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    100% {
      margin: 0 1.5em;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
  }
  
  @keyframes welcomeFirst {
    0% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    20% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    80% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    100% {
      margin: 0 1.5em 0 0;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
  }
  
  @keyframes welcomeLast {
    0% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    20% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    80% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    100% {
      margin: 0 0 0 1.5em;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
  }
  
  @keyframes welcomeClose {
    0% {
      margin: 0 1.5em;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    20% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    80% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    100% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
  }
  
  @keyframes welcomeCloseFirst {
    0% {
      margin: 0 1.5em 0 0;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    20% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    80% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    100% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
  }
  
  @keyframes welcomeCloseLast {
    0% {
      margin: 0 0 0 1.5em;
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    20% {
      transform: rotateY(180deg);
      width: 3em;
      height: 3em;
    }
    80% {
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
    100% {
      margin: 0 0;
      transform: rotateY(0deg);
      width: 2em;
      height: 2em;
    }
  }
  
  @media (max-width: 1270px) {
    #toggleOpen:checked
      ~ #welcomeMessage {
          font-size: 80%;
    }
  }
  
  @media (max-width: 1000px) { 
    #toggleOpen:checked
      ~ #welcomeMessage {
          font-size: 60%;
    } 

    header{
      border-bottom:3px inset #9f7928;
      display: flex;
      flex-direction: column;
      height:200px;
      background-image: url("img/Fotos e vídeos/Logo/LogoTransparente1.png");
      background-position:top ;
      background-repeat: no-repeat;
      background-size: 30%;
      padding-top: 100px ;
      }

    .contatos
    {
      width: 10%;
      display:flex;
      flex-direction: column;
      position:fixed;
      right:1%;
      bottom:0;
      z-index:2;
    }
  }
  
  @media (max-width: 800px) {
    body {
      height: auto;
      width: 100%;
      margin: 2%;
      padding:10px;
      min-height: 100vh;
      overflow-x: scroll;
      overflow-y: scroll;
      align-items: flex-start;
    }

    .perguntas
    {
      padding:10px;
      border: 1px solid white;
    }

    video
    {
      width:95%;
    }

    .contatos
    {
      width: 20%;
      display:flex;
      flex-direction: column;
      position:fixed;
      right:1%;
      bottom:0;
      z-index:2;
    }

    header{
      border-bottom:3px inset #9f7928;
      display: flex;
      flex-direction: row;
      height: 20%;
      background-image: url("img/Fotos e vídeos/Logo/LogoTransparente1.png");
      background-position:top;
      background-repeat: no-repeat;
      background-size: 70%;
      margin-top:10px;
      padding-top: 100px;
      }


    #welcomeMessage {
      margin-top: 18%;
      text-align: center;
      background-image: url("./img/menu.png");
      background-size: 80%;
      z-index: 3;
    }
    
    #toggleOpen:checked
      ~ #welcomeMessage {
          margin-top: 20%;
          font-size: 70%;
          width:95%;
    }
    
    #toggleOpen:checked
      ~ #welcomeMessage
      figcaption
      h1 {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    
    #welcomeMessage figcaption h1::before {
      content: "Fechar";
    }
    
    @keyframes welcome {
      0% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      20% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      80% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      100% {
        margin: 1em 0;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
    }
  
    @keyframes welcomeFirst {
      0% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      20% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      80% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      100% {
        margin: 0 0 1em 0;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
    }
  
    @keyframes welcomeLast {
      0% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      20% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      80% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      100% {
        margin: 1em 0 0 0;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
    }
  
    @keyframes welcomeClose {
      0% {
        margin: 1em 0em;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      20% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      80% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      100% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
    }
  
    @keyframes welcomeCloseFirst {
      0% {
        margin: 0 0 1em 0 !important;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      20% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      80% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      100% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
    }
  
    @keyframes welcomeCloseLast {
      0% {
        margin: 1em 0 0 0 !important;
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      20% {
        transform: rotateY(180deg);
        width: 3em;
        height: 3em;
      }
      80% {
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
      100% {
        margin: 0 0;
        transform: rotateY(0deg);
        width: 2em;
        height: 2em;
      }
    }
  }