html, body{
height: 100%;
margin: 0px;
}
body {
font-family: Circular, Helvetica, Arial, sans-serif;
font-size: 16px;
background: #dd680f87;
position: relative;
}
header a{
color: white;
}
header a:hover{
color: #ff5906 ;
}
header img{
height: 100px;
transition: 0.3s linear;
}
.tamanho{
height: 20px;
}
header img:hover{
transform: scale(1.18, 1.17);transition: 0.3s linear;
}
.cor-fundo {
background: rgba(0,0,0,0.9);
}
.navbar-1 {
padding: 15px;
border-bottom: dotted 1.5px white;
}
.btn-outline-light:hover{
background: #ff5906;
color: white;
}
/*********************************************slider*******************************************/
#tamanho {
height: 770px;
width: auto;
overflow: hidden;
position: relative;
background: black;
}
.banner1, .banner2, .banner3, .banner4{
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#tamanho img{
width: 120%;
position: absolute;
left: 50%;
top: 50%;
filter: brightness(95%) grayscale(1);
transform: translate(-50%, -50%);
animation: zoom-aut 3s linear infinite;
}
@keyframes zoom-aut{
100%{
width: 100%;
}
}
.text-box{
width: 600px;
position: absolute;
top: 200px;
left: 140px;
color: #fff;
animation: textup 12s linear infinite;
transform: translateY(90px);
}
.text-box h1{
margin-bottom: 10px;
font-size: 28px;
text-transform: uppercase;
letter-spacing: 1px;
}
.text-box p{
font-size: 17px;
line-height: 10px;
color: #fff;
margin-top: 70px;
text-transform: uppercase;
text-align: center;
}
.text-box span{
background:#ff5906;
height: 4px;
width: 85%;
position: absolute;
left: 0;
}
.banner1{
animation: slide1 12s linear infinite;
}
.banner2{
animation: slide2 12s linear infinite;
}
.banner3{
animation: slide3 12s linear infinite;
}
.banner4{
animation: slide4 12s linear infinite;
}
@keyframes slide1{
0%{
visibility: visible;
}
25%{
visibility: hidden;
}
50%{
visibility: hidden;
}
75%{
visibility: hidden;
}
100%{
visibility: hidden;
}
}
@keyframes slide2{
0%{
visibility: hidden;
}
25%{
visibility: hidden;
}
50%{
visibility: visible;
}
75%{
visibility: hidden;
}
100%{
visibility: hidden;
}
}
@keyframes slide3{
0%{
visibility: hidden;
}
25%{
visibility: hidden;
}
50%{
visibility: hidden;
}
75%{
visibility: visible;
}
100%{
visibility: hidden;
}
}
@keyframes slide4{
0%{
visibility: hidden;
}
25%{
visibility: hidden;
}
50%{
visibility: hidden;
}
75%{
visibility: hidden;
}
100%{
visibility: visible;
}
}
@keyframes textup{
10%{
transform: translateY(0px)
}
100%{
transform: translateY(0px)
}
}
.text-box1{
animation-delay: 0s;
}
.text-box2{
animation-delay: 3s;
}
.text-box3{
animation-delay: 6s;
}
.text-box4{
animation-delay: 9s;
}
/************************************************** parte-2 ***********************************/
.caixa-p{
background: black;
width: 100%;
height: 320px;
margin:90px 0px;
}
#conteudo1{
left: 0%;
bottom: 25%;
width: 100%;
height: 100%;
text-align: center;
background: blue;
}
.divisao2 {
padding-top: 30px;
background: #000066;
color: white;
padding-bottom: 100px;
}
#caixa{
width: ;
background:white;
margin: 10px;
padding: 5px 10px;
}
.divisao2 h4{
text-transform: uppercase;
font-size: 3.0em;
font-weight: 500;
letter-spacing: px;
margin: 50px 0;
text-align: center;
}
#caixa h4 {
background: black;
border: solid white;
margin: 5px;
color: white;
text-align: center;
font-weight: 700;
letter-spacing: 3px;
}
.btn-block {
width: 70%;
margin: auto;
}
#divisao3 .btn-outline-dark{
color: white;
width: 60%;
border-color: white;
margin-left: 20%;
}
.card {
border-radius: 15px;
border: none;
}
.quadro {
margin-top: 100px;
padding: 20px;
}
.estilo2 {
box-shadow: -10px -8px 4px #cccccc;
border-radius: 15px;
color: #fff!important;
background-color: #fff;
padding-right: .2rem;
padding-top: 1rem;
padding-bottom: 0.5rem;
padding-left: .2rem;
transform: translate(7px, 10px) ;
transition: all 0.6s linear ;
}
.estilo4 {
box-shadow: -10px -8px 4px black;
border-radius: 15px;
color: #fff!important;
background-color: #343a40;
padding-right: .2rem;
padding-top: 1rem;
padding-bottom: 0.5rem;
padding-left: .2rem;
transform: translate(7px, 10px);
transition: all 0.6s linear ;
}
.estilo3 {
transition: all 0.7s linear ;
}
.filtro-imagem{
cursor: pointer;
filter: grayscale(100%);
transition: all 0.3s ease-in;
}
#botao {
margin-top: 60px;
}
#botao button {
border-radius: 5px;
width: 65%;
letter-spacing: 1px;
color: white;
font-weight: 300;
font-size: 1.1em;
padding: 5px;
background: #504949;
text-transform: uppercase;
}
#botao a ,#divisao4 a {
text-decoration: none;
}
#img img{
width: 100%;
height: 22em;
}
.card-esp {
margin-top: 70px;
}
/*********************************************** Parte 3***************************/
#divisao3{
color: black;
padding-top: 30px;
}
#divisao3 h4{
color: white;
padding: 20px;
font-size: 3.0em;
font-weight: 500;
letter-spacing: 3px;
margin: 50px 0 80px 0;
text-align: center;
text-transform: uppercase;
}
.zoom img{
height: 350.66px;
}
.separar{
margin-bottom: 80px;
/* padding-left: 60px; */
}
#imagem{
border-radius: 40px;
height: 250px;
padding: ;
opacity: 0.9;
background: #000066;
}
#coluna-2 button {
margin-top: 100px;
margin-bottom: 30px;
padding: 10px;
width: 100%;
border-radius: 50px;
font-size: 25px;
background: #000066;
color: white;
text-transform: uppercase;
}
#coluna-2 button:hover {
margin-top: 100px;
margin-bottom: 30px;
padding: 10px;
width: 100%;
border-radius: 60px;
font-size: 25px;
font-weight: 500;
background:#cccccc;
color: #000066;
border: solid #000066 5px;
text-transform: uppercase;
}
.zoom {
overflow: hidden;
}
.zoom img{
max-width: 100%;
transition: all 0.5s linear;
}
.zoom:hover img {
transform: scale(1.2, 1.2);
}
.card-img-overlay:hover {
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.70);
background-size: cover;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.zoom:hover h4 {
transform: translate(4px, 4px);
}
/*********************************************parte4***********************************/
#divisao4 {
background: #000066;
color: white;
}
.fundo {
text-align: center;
}
.caixa1{
margin-top: 80px;
margin-bottom: 20px;
}
.caixa2{
text-align: center;
margin-top: 70px;
}
.centro{
}
#divisao4 button {
margin: 10px 5px 25px 0;
border-radius: 40px;
width: 100%;
text-transform: uppercase;
letter-spacing: 2px;
color: white;
font-weight: 400;
font-size: 1.2em;
background: #fb9a50db;
}
#divisao4 h4 {
text-transform: uppercase;
font-weight: 400;
font-size: 2.0em;
justify-content: start;
text-align: center;
margin-bottom: 120px;
padding-top: 170px;
}
#divisao4 .img-fluid {
max-width: 145%;
height: auto;
}
#anuncio {
padding-bottom: 80px;
}
/************************************************fundo***********************************/
footer {
background: black;
color: white;
padding-top: 40px; /* modificando para padding-top */
}
footer h4 {
color: #919496;
font-size: 0.8em;
text-align: left;
text-transform: uppercase;
}
#icone img {
float: right; /* retirei o padding **/
}
#parteF{
border: solid red;
}
#parteF a{
color: #919496;
}
footer a {
color: white;
font-size: 0.95em;
text-decoration: none;
}
footer a:hover {
color: #ff5906;
text-decoration: none;
}
footer ul{
list-style: none;
}
partef li{
padding-left: 10px;
}
.espaco {
padding-left: 10px;
}
.oi {
text-align: center;
}
#roda-pe ul li{
display: inline;
margin-bottom: 80px;
}
#roda-pe ul {
padding: 10px;
}
.tamanhoXlargura{
height: 86.3%;
width: 100%;
}
@media screen and ( max-width: 768px){
@viewport{
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
body{
width: 256%;
}
.sep{
margin-bottom: 120px;
margin-left: 30px
}
.card-esp {
margin-top: 130px;
}
.col-12 {
padding-top: 30px;
padding-bottom: 30px;
}
#tamanho {
height: 710px;
}
container{
padding-left: 35px;
}
.btn-block{
width: 100%;
font-size: 24px;
}
.enquadramento{
height: 264px;
width: 378px }
.width-especifica{
width: 184px!important;
}
.mari{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-bottom: 45px;
}
.quadrado{
width: 172px;
height: 207px;
}
.d-flex-2{
display: flex;
flex-wrap: nowrap;
}
#img img{
margin-top: -40px;
margin-right: 72px;
}
#img{
display: flex;
justify-content: center;
}
.height-cerebro{
height: 13em;
}
.margin-superior-extra{
margin-top: -23px!important;
}
.margin-esquerda-extra{
margin-left: 20px;
}
.margin-logo{
margin-top: -80px;
height: 180px;
}
.divisao2 {
padding-top: 110px;
padding-bottom: 200px;
}
.divisao2 h4 {
margin: 60px 0 100px 0;
}
.mb-4, .my-4 {
margin-bottom: 3.5rem!important;
}
#divisao4 .img-fluid {
padding-top: 30px;
}
#divisao4 h4 {
padding-top: 220px;
}
#divisao3 h4 {
font-size: 1.9em;
font-weight: 500;
letter-spacing: 3px;
}
}
}