@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');
html {height: 100%; scroll-behavior: smooth !important;}
body { margin: 0 !important; padding: 120px 0 0 0; color: #3e3d3a; font-family: 'Montserrat', sans-serif; font-weight: 300 !important; height: 100%; font-size: 16px; line-height: 1.6; overflow-anchor: none;}

h1, h2, h3, h4, h5 {font-family: 'Montserrat', sans-serif; font-weight: 500;}

#Change-bg {position: fixed; top:0; right: 0; width: 100%; height: 100vh; z-index: -1000; background: url(../img/img-1.jpg) no-repeat center right fixed; background-size: cover; opacity: 1; transition: ease-in-out 0.8s;}

#Change-bg:hover {opacity:0.2; transition: ease-in-out 0.8s;}

#scrollTop {position: fixed; right: 24px; bottom: 0px; display: block; font-size: 36px; color: #b5b194; z-index: 1090;}

header { background: #eeebe4ec; border-bottom: 5px solid #b5b194; color: #3e3d3a !important; position: fixed; z-index: 2000; width: 100%; top: 0; left: 0;}
.nav-tabs {border: none;}
header nav {list-style: none; text-align: center; width: 100%; padding: 5px 0;}
header ul li { display: inline-block; margin: 0 10px;}
header ul li a {color: #3e3d3a !important; font-size: .9em; text-transform: uppercase; display: block; padding: 10px 0; transition: ease-in-out 0.2s;}
header ul li a:hover {color: #3e3d3a !important; font-weight: 500; text-decoration: none; transform: translateY(-5px); transition: ease-in-out 0.4s;}
.navbar-toggler {background: none; border: none;}
.navbar-toggler i {color: #3e3d3a !important; font-size: 1.5em;}

main {padding: 0!important;}

.content-box {background: #fffe; padding: 10% 8% 8% 8% !important;}

.botao {padding: 12px 80px; margin: 16px 0; background: #fff7; border: 2px solid #b5b194; box-shadow: 4px 4px 0 #fff; text-align: center; display: inline-block; color: #b5b194; font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: uppercase; transition: ease-in-out 0.3s;}

.botao:hover {color: #3e3d3a; box-shadow: 4px 4px 0 #b5b194; transition: ease-in-out 0.6s; text-decoration: none;}

.titulo-lateral {color: #b5b194; border-bottom:1px solid #ddd; padding-bottom: 1rem;}

#Intro {height: 100vh; position: relative;}
#Intro a {position: absolute; bottom: 150px; left: 50%; margin-left: -22px; transition: ease-in-out 0.4s;}
#Intro a:hover {bottom: 140px; transition: ease-in-out 0.4s;}

.col-galeria a {margin: 0 6px; display: inline-block;}
.col-galeria a img {max-height: 96px;}
.titulos_projetos {color: #bababa; padding: 0; margin-left: 4px; margin-top:32px; display: block;}
#portifolio img {transition: ease-in-out 0.4s;}
#portifolio img:hover {transition: ease-in-out 0.4s; transform: scale(1.25,1.25); z-index: 1100}

#clientes p { text-align: center; margin-top: 16px;}
#clientes img {box-shadow: 4px 4px 0 #fff7; transition: ease-in-out 0.4s;}
#clientes img:hover{box-shadow: 4px 4px 0 #b5b194; transition: ease-in-out 0.4s; transform: translateY(-20px);}

#parceiros .row {margin-left: 0;}
#parceiros ul { list-style: square; margin: 24px 0 0 0; padding: 0; font-size: 14px; color: #b5b194;;}
#parceiros ul li {margin-bottom: 16px; margin-left: 8px;}
#parceiros ul li a {color: #3e3d3a; font-weight: 500; font-size: 15px;}

#contato .icones {width: 56px; height: 56px; padding: 15px; border-radius: 50%; border: #643 solid 1px; font-size: 1.3em; text-align: center;}
#contato a {color: #643 !important; text-decoration: none; margin-left: 12px;}
#contato a:hover {color: #3e3d3a!important; font-weight: 500;}
input, textarea {padding: 16px 24px !important; border: 1px solid #b5b194 !important; border-radius: 0 !important;}
input::placeholder {color: #b5b194 !important;}
input:focus, textarea:focus {box-shadow: 0 0 16px #b5b194 !important;}

#player {position: fixed; bottom: 5px; left: 5px; background: #eeebe4; z-index: 1080; border-radius: 20px; padding:10px; box-shadow: inset 2px 2px 4px #0008; opacity: .5; transition: ease-in-out 0.4s;}
#player:hover {opacity: 1; transition: ease-in-out 0.4s;}
#player button {color: #3e3d3a; background: none; border: none; font-size: 1em; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s;}

footer {background: #3e3d3a; color: #b5b194; border-top: 4px solid #b5b194;}


@media screen and (min-width: 240px) and (max-width: 767px)
{
    .col-galeria a img {max-height: 56px; padding: 0px!important; }
}