* { margin: 0; padding: 0; 
    font-family: 'Ubuntu', sans-serif; }
html, body, header, #container, #gridbox {
    width: 100%;
    height: 100%;
}

a {
	text-decoration: none;
}

#botao-to-top {
    display: none;
}


.cor-azul {
    color: #4b5d6a;
}

/* MENU PARA MOBILE */
@media (max-width: 767.98px) { 
	#navegacao-principal {
		background-color: #4b5d6acc;
	}
    #navegacao {
        padding: 0 1em 1em 1em;
        margin-top: 1em;
    }
    .navbar-toggler:focus{
    outline: thin dotted;
        outline: 0px auto -webkit-focus-ring-color;
        outline-offset: 0px;
    }
    .navbar-toggler:focus {
    outline: thin dotted;
        outline: 0px auto -webkit-focus-ring-color;
        outline-offset: 0px;
    }
}


/*********************
Parte do inicio
**********************/

#navegacao-principal.scrolled {
    background-color: #4b5d6a;
}

#navegacao-principal.scrolled .nav-item {
    margin: 0 10px;
}

.nav-item {
    margin: 10px;
}

/* Menu Fonte e cor*/
.navbar-dark .navbar-brand {
    font-size: 1em;
    font-weight: bold;
}

.navbar-dark .navbar-nav .nav-item .nav-link {
    color: white;
}

.navbar-lang {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Background wallpaper cabeçalho */
#background-wallpaper {
    height: 100%;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/bg-inicio.webp');
}

#background-color {
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
}

/* Grid de conteudo da parte inicial do site */
.box-grid-imagem-leandro {
    height: 100%;
     width: 100%;
     top: 0;
     z-index: 0;
}

.imagem-leandro {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: -1px;
    z-index: -1;
}

.hero-content {
    display: inline-block;
    text-align: start;
}

@media screen and (max-width: 768px){
    .hero-content {
        margin-bottom: 200px;
    }
}

.conteudo-lateral h1 {
    font-size: 3.3em;
    font-weight: bold;
    line-height: 50px;
}

.conteudo-lateral h1, .conteudo-lateral h4 {
    color: #D9D9D9;
    word-break: keep-all;
}

.conteudo-lateral hr {
    border: 3.4px solid;
    max-width: 220px;
}



/*********************
Parte do Sobre mim
**********************/

/* Background */
#bg-wallpaper-about {
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url('../img/bg-about.webp');
	background-size: cover;
}

#bg-color-about {
    height: 100%;
    background-color: rgba(48, 52, 53, 0.41);
}

.texto-sobre-mim p {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    color: white;
    font-size: 1.1em;
    /* text-transform: uppercase; */
}

i.noLogo {
    font-size: 1em;
}

/*********************
Parte do Portifolio
**********************/

/* Background */
#bg-wallpaper-portfolio {
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100%;
    background-attachment: fixed;
    background-image: url('../img/bg-portifolio.webp');
}

#bg-color-portfolio {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.90);
}


.widthcem {
    width: 100%;
    max-width: 900px;
}

.secao-carrossel {
    padding: 10px 40px;
    background-color: #4b5d6a;
    border-radius: 10px;
    display: inline-block;
    align-self: center;
}

.imagem-carrossel {
    margin: 10px;
    width: 200px;
}

.imagem-carrossel a {
    cursor: pointer;
}

/* link mais fotografias */
.mais-fotografias {
    font-size: 1em;
}

.mais-fotografias a {
    font-weight: bold;
    padding: .4em 1em;
    border-radius: 10px;
    background-color: #4b5d6a;
}

.mais-fotografias a:hover {
    text-decoration: none;
    opacity: .8em;
}

/*********************
Parte do Orçamento
**********************/

.input-group .espacamento-input {
    padding-top: 22px;
    padding-bottom: 22px;
}

#enviar-email {
    color: #fff;
    border: 2px solid #4b5d6a;
    background-color: #4b5d6a;
}
#enviar-email:hover {
    color: #4b5d6a;
    background-color: #fff;
}


/*********************
Parte do Rodapé
**********************/


/* Background wallpaper rodape */
#bg-wallpaper-footer {
    height: 100%;
    background-position: bottom center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-image: url('../img/bg-inicio.webp');
}

#bg-color-footer {
    height: 100%;
    background-color: #4b5d6a;
}

#bg-color-footer i {
    font-size: 1.5em;
}



/*********************
Parte de Animações
**********************/

/* @keyframes anima-cima {
    from {
      opacity: 0;
      bottom: -30px;
    }
    to {
      bottom: 0px;
      opacity: 1;
    }
  }


@keyframes anima-direita {
    from {
      opacity: 0;
      left: -30px;
    }
    to {
      left: 0px;
      opacity: 1;
    }
}

@keyframes anima-esquerda {
    from {
      opacity: 0;
      right: -30px;
    }
    to {
      right: 0px;
      opacity: 1;
    }
} */

  /* .conteudo-lateral, .imagem-leandro {
      animation-name: anima-cima;
      animation-duration: 1s;
      animation-timing-function: ease-out;
  } */

  /* .texto-sobre-mim {
    animation-name: anima-direita;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-play-state: paused;
} */

/* .bloco-portifolio {
    animation-name: anima-esquerda;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-play-state: paused;
} */

#winner, #portifolio {
    scroll-margin-top: 100px;  
}

.btn-social {
	display: flex!important;
    justify-content: center;
    align-items: center;
}

.gallery {
    scroll-margin-top: 100px;
}

.gallery-title {
    background: white;
    padding: 10px;
    border-radius: 10px;
}

.winner {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 50px;
    gap: 40px;
    align-items: center;
}

.winner-link {
    font-size: 20px;
    margin-top: 10px;
    display: block;
}

@media screen and (max-width: 768px){
    .navbar {
        padding: 0 15px;
    }
    
    .winner {
        flex-direction: column;
    }    
}