* { /* -> é Padrao Rezete Geral todos os Elementos para ficar igual a todos os navegadores */ margin:0; padding:0; /*border:0;*/ box-sizing: border-box; } body { /* -> Tag body */ margin:1px; /* -> margin 0 Padrao */ /* padding:0; /* -> espaçamento padding 0 */ font-family: 'Open Sans'; /* -> Fontes Letra */ font-size:18px; /* -> Tamanho Fonte Letra */ overflow-x: hidden; /* todo o conteudo que ultrapassar a horizontal fica ignorado, tira a barra rolagem de baixo */ } header { /* -> Cabeçalho -> Tag header */ display:flex; /* -> auxilia justify-content:center; */ justify-content:center; /* -> alinha centraliza o Cabeçalho
no centro da linha junto com display:flex */ /* width:1250px; /* -> Largura -> width:auto; */ /* height:950px; /* -> Altura */ height:100px; /* -> Altura */ /* background-color:#FFFFFF; /* -> Quadrado Fundo Cor Branco */ /* margin:auto; /* -> Margin:auto; Centraliza o Cabeçalho igual ao Flex e Justify */ } .container { /* -> Class container */ display:flex; /* -> coloca o HomeMenuContato na mesma linha centralizado um do lado do outro*/ justify-content:space-between; /* -> faz espaçamento HOME MENU CONTATO um do lado do outro*/ width: 960px; /* -> Largura -> width:auto; */ /*width:1150px; /* -> Largura -> width:auto; */ /*width:1025px; /* -> Largura -> width:auto; */ /* background-color:#EEE; /* -> Quadrado Fundo Cor Cinza DDD A9A9A9 FFFAFA */ } .logo { /* -> Class logo no Cabeçalho */ /*width: 100px; */ /* -> espaço entre a logo e Menu HOME MENU CONTATO */ /*background-color:#FFFFFF; */ /* -> Quadrado Fundo Cor Banco */ display:flex; /* -> coloca a imagem no centro da linha no HEADER */ align-items:center; /* -> alinha a imagem no centro da Altura Coluna NO HEADER */ } .logo img{ width: 125px; height: 100px; } /* .logoimg { width:65px; height:70px; background-color:#FFFFFF; /* -> Quadrado Fundo Cor Banco */ /* } */ .redesocial :hover { /* -> Class logo no Cabeçalho */ /* width:0px; /* -> espaço entre a logo e Menu HOME MENU CONTATO */ background-color:#FFFFFF; /* -> Quadrado BOX Fundo Cor Banco */ /* display:flex; /* -> coloca a imagem no centro da linha no HEADER */ /* align-items:center; /* -> alinha a imagem no centro da Altura NO HEADER */ } .menu { /* -> Class Menu */ /* flex:1; /* -> coloca Menu HOME MENU FALECONOSCO lado esquerdo ao lado da imagem */ display:flex; /* -> coloca a imagem no centro da Altura no HEADER */ align-items:center; /* -> alinha centraliza a imagem no centro da altura Coluna NO HEADER */ } nav ul, /* -> Tag Nav ul */ nav li { /* -> Tag Nav li */ list-style: none; /* -> tira os pontilhados pontinhos da Li MENU */ margin:0; /* -> margin 0 Padrao */ padding:0; } nav ul { /* -> Tag Nav ul */ display:flex; /* -> coloca o HomeMenuContato na mesma linha centralizado um do lado do outro*/ } nav a { /* -> Tag Nav a */ display:block; /* -> pega toda a area do quadrado e torna um link Permite alterar o conteudo, o tamanho a area do link para ficar grande */ text-decoration:none; /* -> tira do sublinhado HOME MENU CONTATO */ padding:18px; /* -> Altura e Comprimento e Espaco de Area o quadrado que esta dentro do HOME fundo azul */ /*text-transform:uppercase; */ /* -> transforma tudo em Maisculo */ color:#666666; /* -> Cor Cinza HOME MENU CONTATO */ font-family:Arial; /* -> Fonte HOME MENU CONTATO */ } nav .active a, /* -> Class Active dentro a Tag nav e a */ nav a:hover { /* -> Hover quando passar o mouse Quadrado Fundo Cor Azul e a palavra HOME Branco */ /* background-color:#45a3c2; /* -> Quadrado Fundo Cor Azul */ /* background-color:#39aae1; /* -> Quadrado Fundo Cor Azul */ /* color:#45a3c2; /* -> a palavra HOME Cor Verde */ /* color:#007bff; /* -> a palavra HOME Cor Azul */ /* color:#337ab7; /* -> a palavra HOME Cor Azul */ /* color:#0066bf; /* -> a palavra HOME Cor Azul */ /* color:#6EC1E4; /* -> a palavra HOME Cor Azul */ /* color:#0088ce; /* -> a palavra HOME Cor Azul */ /* color:#0fa1ed; /* -> a palavra HOME Cor Azul */ /* color:#17a2b8; /* -> a palavra HOME Cor Azul */ color:#2674ae; /* -> a palavra HOME Cor Azul */ /* color:#27406d; /* -> a palavra HOME Cor Azul */ /* color:#233f6b; /* -> a palavra HOME Cor Azul */ /* color:#FFFFFF; /* -> a palavra HOME Cor Branco */ /* border-bottom:15px solid #FFFFFF; */ /* #abb8c3; #666; */ } /* .menu li:hover { display: block; } .menu li:hover .submenu { display: block; } .submenu { margin-top: 2px; width: 195px; *//*height: 150px;*//* background-color: #45a3c2; position: absolute; display: none; } .submenuitem { font-size: 11px; width: 195px; height: 1px; line-height: 5px; } */ /* Sliders */ main { /*margin: 0; */ display: flex; flex-direction: column; } .main { height: 0px; background-color: #FF0000; } .sliders { width: 100vw; height: 440px; background-size:cover; background-position:center; /*background-position:bottom;*/ overflow: hidden; /* tudo que passar da tela vai ser cortada e tira barra de rolagem */ } .slide--width { height: 100%; display: flex; transition: all ease 0.3s; /* transferencia de margin Left, faz o banner correr para direita */ } .slide--item { width: 100vw; height: inherit; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; color: #FFF; text-shadow: 0px 1px 1px #333; font-size: 50px; } .slide--controls { position: absolute; z-index: 99; display: flex; justify-content: space-between; align-items: center; } .slide--control { padding-left:20px; padding-right:20px; color:#FFF; font-size: 40px; /*width: 30px; */ /*height: 30px; */ /*background-color: #FFF; */ /*border-radius: 50%; */ overflow: hidden; cursor: pointer; } /* Paginacao */ .column { /* faz com que a Paginacao fica centralizado debaixo das fotos dos Membros */ flex-direction: column; /* o conteudo que esta dentro do BANNER fica embraixo e faz alinhamento de columa um embaixo do outro */ } /* Rodape */ /* footer { display:flex; justify-content: center; /*width: auto;*/ /*align-items: center;*/ /*color: #000;*/ /*font-style: italic;*/ /*height: 40px;*/ /*text-align: center;*/ /* border-top: 1px solid #2c2c2c; line-height: 30px; color: #444; font-size: 12px; margin-top: 40px; } */ footer { display: flex; justify-content: center; } /* .flexColumn { flex-direction: column; } .footer_info { height: 40px; line-height: 20px; text-align: center; color: #5c5c5c; font-size: 13px; margin-top: 50px; font-family:Arial; } */ .footer_copyright { border-top: 1px solid #2c2c2c; /*height: 40px;*/ padding-left: 150px; padding-right: 150px; line-height: 30px; text-align: center; color: #444; font-size: 12px; margin-top: 40px; } /* i { color: #555; font-style: italic; } */ /* -----------Responsivel ------------- */ .menuMobile { display:none; width:40px; height:40px; margin-top:40px; /* -> Margem para Cima */ margin-bottom:40px; /* -> Margem para Baixo */ margin-right:20px; /* -> Margem para Esquerda */ } .mm_line { height:3px; background-color:#39aae1; /* -> Quadrado Fundo Cor Azul */ } @media (max-width:600px) { /* Responsivel para Tablet e Celular */ .container { flex-direction: column; } /* Responsivel MENU */ header .container { flex-direction: row; } /* Menu um do Lado do Outro nao emcima do outro */ nav a { margin-left:1px; padding:5px; } nav ul { font-size:13px; /*flex-direction: column; *//*-> um menu fica debaixo do outro */ display:none; /* -> Retira do menu o HOME MENU CONTATO para tela responsivl do Class mm_line */ position: absolute; left: 0; /* -> lado esquerdo */ width: 100%; background-color:#FFFFFF; /* -> Quadrado Fundo Cor Azul */ } header { height:auto; } .logo { /*padding-left:20px;*/ } .menuMobile { display: flex; flex-direction: column; justify-content: space-around; margin-bottom: 50px; } .sliders { margin-top: 25px; } .slide--control { font-size: 20px; } .footer_copyright { font-size: 10px; } } /****************************************************************************** h1 { font-size: 63px; line-height: 70px; padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Coustard', serif; color: #fff; font-weight: normal; letter-spacing: 1px; } */ /* -----Estilizar o Placeholder----- .input::-webkit-input-placeholder { -> WebKit navegador Edge Blink Chrome .input:-moz-placeholder { -> Navegador Firefox versao 4 ao 18 .input::-moz-placeholder { -> Navegador Firefox versao 19.. .input:-ms-placeholder { -> Navegador IE Explorer versao 10 e 11 .input::-ms-placeholder { -> Navegador Microsoft Edge */ /* .input::placeholder { color:#007fff; } */ /* .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } /* Tabela de Cores mxstudio.com.br/tabela-cores-web/ https://www.w3.org/Style/Examples/007/center.pt_BR.html ***************************************************************************** */