:root {
    --cor_fundo:white;
    --cor_tinta:#485fc7;
    --cor_icone:#485fc7;

}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);   
}

div,img {

    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
}

body::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
  }
.hideScrollBar::-webkit-scrollbar {
    width: 0px;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}
  
  @-moz-document url-prefix() { /* Disable scrollbar Firefox */
    html{
      height:100vw;
      width:100vw;
      min-width:100vw;
      scrollbar-width: none;
      
    }
  }
  
.scrollbar {
    height:100%;
    overflow: auto;
    padding: 0 10px;
}
.scrollbar1::-webkit-scrollbar {
    width: 10px;
}

.scrollbar1::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
}

.scrollbar1::-webkit-scrollbar-thumb {
    border-radius: 8px;
  border: 3px solid transparent;
   background-clip: content-box;
    background-color: #d55959;
}

a {
    color:var(--cor_tinta);
    font-weight: normal;
    text-decoration: underline;
}

a:hover {
    color:var(--cor_tinta);
    font-weight: bold;
    text-decoration: underline;
}

a:visited {
    color:var(--cor_tinta);
    font-weight: normal;
    text-decoration: underline;
}

.msg {
    color:brown;
    height:1rem;
}
.doTilt {
    animation: tilt-shaking 0.15s infinite;
}

@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }


.is-sticky {
    position:sticky;
    top:0px;
    align-self: flex-start;
    z-index:2;
}

.is-sticky2 {
    position:sticky;
    top:100px;
    align-self: flex-start;
    z-index:2;
}

.shadow {
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-bottom {
    box-shadow: 5px 15px 7px -11px rgba(0,0,0,0.15);
}

.is-fab {
    color:#485fc7;
    cursor:pointer;
    position: fixed;
    right: 1rem;
    bottom: 2.5rem;
}

.input-deleted {
	text-decoration: line-through;	
	background:#ccc;
	color: brown;
}

.eletroPainel {
    display:none;
    transition: height 1s ease-in;
    -webkit-transition: height 1s ease-in;
    -moz-transition: height 1s ease-in;
    overflow: hidden;
}


.selectDisabled {
    
    pointer-events: none;
    touch-action: none;
}

.valor_hidden {
    opacity: 0;

    
}

body {
-webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;

background:#F8F8FF;
display: flex;
min-height:100vh;
flex-direction: column;
/*
min-height: calc(var(--vh, 1vh) * 100);
height: calc(var(--vh, 1vh) * 100);
*/

}
#wrapper {
    flex: 1;
  }
#super_container {
    display:flex;
    
    flex-direction: column;    /*
    height: 100vh;  height: -webkit-fill-available;allback for browsers that do not support Custom Properties  */
    /*height: calc(var(--vh, 1vh) * 100);*/

}
#body_container {
    min-width:100%;
    display:flex;
    flex-direction: column;
  }

  .tema2  {
    background:black;
    color:orange;
  }

  .vertical_center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

.contact_link {
    color:white;
    font-weight: normal;
    text-decoration: none;
}

.contact_link:hover {
    color:white;
    font-weight: bold;
    text-decoration: none;
}

.contact_link:visited {
    color:white;
    font-weight: normal;
    text-decoration: none;
}

.contact_link_2 {
    color: black;
    font-weight: normal;
    text-decoration: none;
}
.contact_link_2:visited {
    color: black;
    font-weight: normal;
    text-decoration: none;
}
.contact_link_2:hover {
    color:#ff8c00;
    font-weight: bold;
    text-decoration: none;
}


#painel_habilidades,#painel_areas,#painel_sobre {
    min-height:calc(90vh - 75px )
}
.painel_titulo {
    color:#ff8c00   ;
    font-weight: bold;
}
.is-1 {
    font-size:1.25rem;
    color:red;
}

.fonte-3 {
    font-size:3rem;
}
.fonte-2 {
    font-size:2.5rem;
}

.fonte-2b {
    /*font-size: 2.5rem;*/
}
.item_link_div {
    max-height:3rem;
    height:3rem;

    margin-bottom:0.1rem;
    display:block;

}
.item_link {
    cursor:pointer;
    color:black;
    
    height:2rem;
    font-size: 1.25rem;
    text-decoration:none;
    transition: all 0.1s ease-in-out;
}

.item_link:hover {
    cursor:pointer;
    color:black;
    height:2rem;
    font-size: 1.7rem;
    text-decoration:none;
    font-weight: bold;
    transition: all 0.1s ease-in-out;
    
}

.item_link:visited {
    cursor:pointer;
    color:black;
    font-size: 1.25rem;
    text-decoration:none;
    transition: all 0.1s ease-in-out;
}


.menu_link_div {
    height:2.6rem;

}
.menu_link {
    padding:1rem 0.5rem 1.31rem 0.5rem  ;
    font-size:1.25rem;
    cursor:pointer;
    color:white;
    background:black;
    transition: all 0.5s ease;
}

/*Conflito com selected via observer */
/*
.menu_link:hover {
    cursor:pointer;
    color:black;
    background:#ff8c00;
    transition: all 0.5s ease;
    
}

.menu_link:visited {
    cursor:pointer;
    color:white;
    background:black;
    transition: all 0.5s ease;
}
*/
.menu_link_selected {
    cursor:pointer;
    color:black;
    background:#ff8c00;
    transition: all 0.5s ease;
}


.item_area_div {
    min-height:2rem;
    margin-bottom:2rem;

}
.item_area {
    cursor:pointer;
    color:black;
    font-size: 1.25rem;
    text-decoration:none;
    transition: all 0.1s ease-in-out;
}

.item_area:hover {
    cursor:pointer;
    color:black;
    font-size: 1.6rem;
    text-decoration:none;
    font-weight: bold;
    transition: all 0.1s ease-in-out;
    
}

.item_area:visited {
    cursor:pointer;
    color:black;
    font-size: 1.25rem;
    text-decoration:none;
    transition: all 0.1s ease-in-out;
}

.lang {
    color:#ff8c00;
    border-bottom:1px solid black;
    cursor:pointer;
    transition: all 0.2s ease-in-out;
    margin:0;
}
.lang:hover {
    color:#ff8c00;
    border-bottom:1px solid black;
    font-size:1.25rem;
    cursor:pointer;
}

.lang:visited {
    color:#ff8c00;
    border-bottom:1px solid #ff8c00;;
    cursor:pointer;
}

.lang_sel {
    color:#ff8c00;
    border-bottom:1px solid #ff8c00;;
    cursor:pointer;
}

.item_projeto_div {
    text-align:left;
    margin:auto;
    max-width:800px;
}

.item_projeto_titulo, .projeto_descricao {
    display:inline-block;
    font-weight: bold;
    /*border-bottom:2px solid #ff8c00;*/
    margin-bottom:0.5rem;
}


.item_projeto_subtitulo_1 {
    
}
.item_projeto_subtitulo_2, .projeto_subtitulo,.projeto_detalhes_subtitulo_2 {
    font-size:80%;
    font-style:italic;
    
}

.item_projeto_descricao {
    margin-top:1rem;
}

@media only screen and (max-width:700px) {
    .fonte-3 {
        font-size:2rem;
    }
    .fonte-2 {
        font-size:1.25rem;
    }
    .fonte-2b {
        font-size:1rem;
    }
    .menu_link {
        padding:1.25rem 0.13rem 1.25rem 0.13rem  ;
        font-size:1rem;
        cursor:pointer;
        color:white;
        background:black;
        transition: all 0.5s ease;
    }
    
    .menu_link_selected {
        cursor:pointer;
        color:black;
        background:#ff8c00;
        transition: all 0.5s ease;
    }

    
}

.sobre_conteudo {
    margin:auto;
    max-width:800px;
    text-align:left;
}

.scrollToTopBtn {
    background-color: black;
    border: none;
    border-radius: 50%;
    color: #ff8c00;
    cursor: pointer;
    font-size: 16px;
    line-height: 48px;
    width: 48px;

    /* place it at the bottom-right corner */
    position: fixed;
    bottom: 10px;
    right: 10px;
    
    /* keep it at the top of everything else */
    z-index: 4;
    
    /* hide with opacity */
    opacity: 1;
    
    /* also add a translate effect */
    transform: translateY(100px);
    
    /* and a transition */
    transition: all .5s ease
    
}

  .scrollToTopShow {
    opacity: 1;
    transform: translateY(0)
  }

  .scrollToTopShow2 {
    opacity: 1;
    transform: translateY(0)
  }

  #projeto_detalhes_wrapper {
    z-index: 5;
    position: fixed;
    top: 75px;
    min-height: calc(100vh - 75px);
    width: 100vw;
    /*background:rgba(0, 0, 0, 0.49);*/
    background-image: linear-gradient(to top, #434343 0%, black 100%);
    overflow:hidden;
  }

  #projeto_detalhes {
    z-index:5;
    position: absolute;
    top:0px;
    min-height:calc(100vh - 75px);
    height:calc(100vh - 75px);
    max-width:900px;
    width: 100vw;
    overflow:auto;
    margin:0;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform:translateX(-50%);
    background:white;
    background: #FCF5E5;
  }

  #projeto_detalhes .subtitulo_1 {
    color:#708090;
    margin-right: 1.5rem;
    cursor:pointer;
  }

  #projeto_detalhes .subtitulo_1:hover {
      font-weight: bold;
      
  }

#projeto_detalhes .works_bullet {

}

.lampada {
    transition: all 0.5s;
}

.lampada_on {
    color: darkorange;
    background-color:#f5cf00;
    box-shadow: 4px -9px 20px 6px #f5cf00;
/*    text-shadow: 0 0 20px 6px #e0b648;*/
}
.videoPlayBtn {
      background-color: black;
      border: none;
      border-radius: 50%;
      color: #ff8c00;
      cursor: pointer;
      font-size: 34px;
      line-height: 63px;
      width: 68px;

      /* place it at the bottom-right corner */
        
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      z-index: 5;

      /* hide with opacity */
      opacity: 1;

  }

  .all_transition {
    /*transition: all 2s ease-in-out;*/
    transition: all 0.2s;
    
  }

  .no-scroll {
    overflow:hidden;
  }
  
  .glitch-text {
    top:0;
    left:0;
    position: relative;
  }

  .glitch {
      text-shadow: 0 0 5px #fff, 0 0 10px #00f, 0 0 15px #00f;
      color: #00f;
      transform: translateX(-201px) translateY(20px);
      transition: transform 1s, color 0.1s, text-shadow 0.1s;
  }

  .text_dos{
    font-family: 'Press Start 2P', cursive;
    font-size:0.8rem;
  }

.skill_link {
    cursor:pointer;
}
.skill_link:hover {
    color: #ff8c00;
    font-weight: bold;
}