@charset "utf-8"; /* CSS Document */ /* ======================================================================================= FONTES === */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* FONTES PUC 'Roboto' Opções de font-weight: 100 / 300 / 400 / 500 / 700 / 900 'Roboto Condensed' Opções de font-weight: 300 / 400 / 700 */ /* ========================================================================== ESTILOS PUC > CORES === */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ESQUEMA DE CORES ESPECÍFICOS PARA CADA SITE ATENÇÃO: Elementos em cinza não se apresentam neste css por serem neutros a qualquer site, mas estes podem ser anulados por estilos que começam com o nome do id específico para o site em questão, que será colocado na tag das páginas. */ /* ================================================================= TOPO === */ /* ========================================================================== */ /* ----- título da página ----- */ #solar header h1 { color:#666666; } /* ----- breadcrumb ----- */ #solar header nav a:link, #solar header nav a:visited { color:#AAA; } #solar header nav a:hover { color:#555; } /* ================================================================= MENU === */ /* ========================================================================== */ /* ----- MENU VAZIO (LINHA) ----- */ #solar header #puc_menu_vazio { background:#E5E5E5; } /* ----- MENU COMUM A PARTIR DAQUI ----- */ /* ------------------------------------- */ /* ----- FAIXA QUE ATRAVESSA A PÁGINA ----- */ @media (min-width:1140px) { #solar header #puc_menu_faixa { background-color:#b0b535; } /* fecha @media (min-width:1140px) */ } /* ----- LINHAS ACIMA E ABAIXO DA FAIXA ----- */ #solar header #menu span { background:transparent; } /* ----- DESATIVAÇÃO DAS BORDAS GRANDES DOS LINKS NO MENU DESKTOP (ex: CCCI) ----- */ @media (min-width:1140px) { #solar header #menu { margin:1px 10px 0 10px; } #solar header #menu span { top:0; margin-top:-1px; } #solar header #menu a:link, #solar header #menu a:visited { border-top:0; border-bottom:0; } /* fecha @media (min-width:1140px) */ } /* ----- MENU DESKTOP - LINKS ----- */ @media (min-width:1140px) { /* mouse out */ #solar header #menu a:link, #solar header #menu a:visited { color:#fff; } /* mouse over */ #solar header #menu a:hover, #solar header #menu .puc_menu_link_ativo:link, #solar header #menu .puc_menu_link_ativo:visited { color:#FFF; background:#8c9118; border-color:#FFF; } /* fecha @media (min-width:1140px) */ } /* ----- MENU MOBILE - LINKS ----- */ @media (max-width:1139px) { /* mouse out */ #solar header #menu a:link, #solar header #menu a:visited { color:#656666; background:#ececec; border-color:#818181; } /* mouse over */ #solar header #menu a:hover, #solar header #menu .puc_menu_link_ativo:link, #solar header #menu .puc_menu_link_ativo:visited { color:#FFF; background:#8c9118; border-color:#7CA2B5; } /* fecha @media (max-width:1139px) */ } /* ----- MENU MOBILE - BOTÃO "MENU" ----- */ #solar header button { color:#FFF; background:#b0b535; background-image:url(http://www.puc-rio.br/imagens/puc_menu_abrefecha.png); background-repeat:no-repeat; } /* ----- SUBMENU DESKTOP ----- */ @media (min-width:1140px) { #solar header #menu ul { background:#043458; } #solar header #menu ul a:link, #solar header #menu ul a:visited { color:#97D3FF; } #solar header #menu ul a:hover { color:#0092FF; background:#18496E; } /* fecha @media (min-width:1140px) */ } /* ----- SUBMENU MOBILE ----- */ @media (max-width:1139px) { #solar header #menu ul a:link, #solar header #menu ul a:visited { border-bottom:1px solid #467288; background:#5B7D96; color:#97D3FF; } #solar header #menu ul a:hover { background:#5B7D96; color:#0092FF; } /* fecha @media (max-width:1139px) */ } /* ================================================================= MEIO === */ /* ========================================================================== */ /* ----- borda ao final do conteúdo ----- */ #solar section { border-bottom-color:#D5DEC1; } /* ============================================= MEIO >> COLUNA PRINCIPAL === */ /* ========================================================================== */ /* ----- títulos ----- */ #solar h1 { color:#666666; } #solar h2 { color:#083459; } #solar h3 { color:#09AEFF; } #solar h4 { color:#0B5182; } #solar h5 { color:#68a9d7; } /* ----- links (geral) ----- */ #solar a:link, #solar a:visited { color:#626600; } #solar a:hover { color:#b0b535; } #solar section a:link, #solar section a:visited { text-decoration:underline } /* ----- link voltar ----- */ #solar section article button.puc_link_voltar_TAG-BUTTON { color:#f9fd9a; background:#626500; border:1px solid #8c9118; } #solar section article button.puc_link_voltar_TAG-BUTTON:hover { color:#8c9118; background:#f9fd9a; } /* ----- link destaque ----- */ #solar section article a.puc_link_destaque_TAG-A:link, #solar section article a.puc_link_destaque_TAG-A:visited, #solar section article a.puc_link_destaque_centralizado_TAG-A:link, #solar section article a.puc_link_destaque_centralizado_TAG-A:visited { background:#f9fd9a; color:#626600; border: 1px solid #626600; text-decoration: none } #solar section article a.puc_link_destaque_TAG-A:hover, #solar section article a.puc_link_destaque_centralizado_TAG-A:hover { background:#626600; color:#f9fd9a; } /* ----- link de paginação ----- */ #solar section article .puc_link_paginacao_anterior_TAG-A:link, #solar section article .puc_link_paginacao_anterior_TAG-A:visited, #solar section article .puc_link_paginacao_proximo_TAG-A:link, #solar section article .puc_link_paginacao_proximo_TAG-A:visited { color:#1A73A0; } #solar section article .puc_link_paginacao_anterior_TAG-A:hover, #solar section article .puc_link_paginacao_proximo_TAG-A:hover { color:#09AEFF; } /* ----- link de exposição realizada ----- */ #solar section article .exposicoes_realizadas_box{ display:block; background:#fff; padding:0; border-bottom:1px solid gray; } @media only screen and (max-width: 619px){ #solar section article .exposicoes_realizadas_box{ border-bottom:3px solid gray; margin-bottom:20px; } } #solar section article .exposicoes_realizadas_box:after { content:""; clear:both; display:block; } #solar section article .exposicoes_realizadas_box { zoom:1; } #solar section article .exposicoes_realizadas_box p:first-child { margin-top:0 } #solar section aside .menu_lateral_exposições{ position:relative; display:block; margin-bottom:.5em; background:black; } #solar section aside .menu_lateral_exposições:after{ content:""; clear:both; display:block; } #solar section aside .menu_lateral_exposições img{ opacity:.5; display:block; -moz-transition: opacity 0.15s linear 0s; ; -ms-transition: opacity 0.15s linear 0s; ; -o-transition: opacity 0.15s linear 0s; ; transition: opacity 0.15s linear 0s; } #solar section aside .menu_lateral_exposições:hover img{ opacity:.8 } #solar section aside .menu_lateral_exposições span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:2em; font-weight:bold; color:#fff; } #solar section aside .menu_lateral_exposições span.alerta_menu_off{ opacity: 1; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 0.15s linear 0s; ; -ms-transition: opacity 0.15s linear 0s; ; -o-transition: opacity 0.15s linear 0s; ; transition: opacity 0.15s linear 0s; } #solar section aside .menu_lateral_exposições:hover span.alerta_menu_off{ opacity: 0; } #solar section aside .menu_lateral_exposições span.alerta_menu_on{ opacity: 0; font-size: 1.2em; white-space: nowrap; -moz-transition: opacity 0.15s linear 0s; ; -ms-transition: opacity 0.15s linear 0s; ; -o-transition: opacity 0.15s linear 0s; ; transition: opacity 0.15s linear 0s; } #solar section aside .menu_lateral_exposições:hover span.alerta_menu_on{ opacity: 1; } #solar section article .exposicoes_realizadas_box img{ opacity:1; -moz-transition: opacity 0.15s linear 0s; ; -ms-transition: opacity 0.15s linear 0s; ; -o-transition: opacity 0.15s linear 0s; ; transition: opacity 0.15s linear 0s; } #solar section article .exposicoes_realizadas_box img:hover{ opacity:.5 } @media (max-width:619px) { #solar section article .exposicoes_realizadas_box img{ float:none; max-width:100%; margin:0 } #solar section article .exposicoes_realizadas_box a { display:block; text-align:center; } } /* ----- galeria de imagens ----- */ /* thumbnails */ #solar section aside .puc_imagem_galeria a:link, #solar section aside .puc_imagem_galeria a:visited { border-color:#CCC; background:#EEE; margin:0; } #solar section article .puc_imagem_galeria a:link, #solar section article .puc_imagem_galeria a:visited { border-color:#CCC; background:#EEE; } #solar section article .puc_imagem_galeria a:hover { border-color:#043458; background:#D4DEE9; } /* legenda dos thumbnails */ #solar section article .puc_imagem_galeria a:link span.puc_imagem_galeria_legenda_TAG-SPAN, #solar section article .puc_imagem_galeria a:visited span.puc_imagem_galeria_legenda_TAG-SPAN { color:#666; } #solar section article .puc_imagem_galeria a:hover span.puc_imagem_galeria_legenda_TAG-SPAN { color:#043458; } /* ----- tabela ----- */ #solar section article .puc_tabela_padrao_TAG-TABLE { border-color:#CCC; } #solar section article .puc_tabela_padrao_TAG-TABLE td { border-color:#CCC; } /* ----- tabela > linhas ----- */ #solar section article .puc_tabela_linha_n1_TAG-TR { background:#043458; color:#FFF; } #solar section article .puc_tabela_linha_n2_TAG-TR { background:#9DBDD4; color:#043458; } #solar section article .puc_tabela_linha_n3_TAG-TR { background:#CDDDE8; color:#043458; } #solar section article .puc_tabela_linha_clara_TAG-TR { background:#EEE; } #solar section article .puc_tabela_linha_escura_TAG-TR { background:#DDD; } /* ----- linha horizontal ----- */ #solar hr { color:#CCC; } /* ----- listas ----- */ #solar ul li::before { color:#b0b535; } #solar section .puc_lista_especial_TAG-UL li::before, #solar section .puc_lista_especial_item_unico_TAG-LI::before { color:#0B5182; } #solar section .puc_lista_especial_TAG-UL li, #solar section .puc_lista_especial_item_unico_TAG-LI { color:#0B5182; } /* ----- formulários ----- */ #solar article form { background:#f9fd9a; } #solar article form input[type=text], #solar article form input[type=password], #solar article form input[type=file], #solar article form textarea, #solar article form select { background:#FFF; border-color:#CCC; } #solar article form input[type=submit] { background:#C2C3C8; color:#043458; } #solar article form input[type=submit]:hover { background:#043458; color:#FFF; } /* ----- player de áudio ----- */ #solar section div.puc_player_audio_TAG-DIV { background:#B4CFE3; } #solar section div.puc_player_audio_TAG-DIV:hover { background:#81BFE7; } /* ----- redes sociais (tamanho inicial dos ícones) ----- */ #solar div.puc_links_redes_sociais_TAG-DIV a img { width:40px; height:40px; } /* =============================================== MEIO >> COLUNA LATERAL === */ /* ========================================================================== */ /* ----- título ----- */ #solar section aside .puc_texto_coluna-lateral_titulo { color:#09AEFF; } /* ----- banner de texto ----- */ #solar section aside p.puc_texto_coluna-lateral_banner_TAG-P { background:#E3E8EE; } /* ----- banner de link ----- */ #solar section aside p.puc_texto_coluna-lateral_banner_TAG-P a:link, #solar section aside p.puc_texto_coluna-lateral_banner_TAG-P a:visited { color:#043458; background:#B4CFE3; } #solar section aside p.puc_texto_coluna-lateral_banner_TAG-P a:hover { background:#9CC0DB; } #solar section aside div.puc_texto_coluna-lateral_banner_TAG-div{ color:#043458 !important; background:#f9fd9a !important; padding: 1em 0; border: 1px solid #626500 } #solar section aside div.puc_texto_coluna-lateral_banner_TAG-div:hover { background:#626500 !important; transition: color 0.3s, background 0.3s; } #solar section aside div.puc_texto_coluna-lateral_banner_TAG-div a{ color:#8c9118; } #solar section aside div.puc_texto_coluna-lateral_banner_TAG-div:hover a { color:#f9fd9a; } /* ========================================================================== ESTILOS ESPECÍFICOS === */ /* /* =============================*/ /* ----- Todas as Páginas ----- */ /* =============================*/ /* ----- Trazer para frente o header ----- */ #solar header{ z-index:10 } /* ----- Rearrumar altura e largura dos elementos ----- */ #solar section * { box-sizing:border-box; } /* ----- Background (exceto index) ----- */ #solar section .background { position: absolute; width: 100%; height: 550px; left: 0px; z-index: -1; overflow:hidden; margin:0; margin-top: -65px; } #solar section .background li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; background-image: url(../imagens/img_solar_banner_07.jpg); -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%); } #solar section .background .background-gradient { background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,245,240,1) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(244,245,240,1))); background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,245,240,1) 100%); background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,245,240,1) 100%); background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,245,240,1) 100%); background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(244,245,240,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; opacity: 1; } #solar section .background .background-black{ background:black; opacity:.3; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; } /* ----- Título e sub-título principal ----- */ #solar #solar_sessao_titulo{ margin-bottom: 30px; position:relative; padding:5px 20px 0 20px; text-shadow:0px 0px 100px rgba(25,14,14,0.5) } #solar #solar_sessao_titulo h2{ color:#FFF; text-shadow: 0 0 100px rgba(25,14,14,0.5); font-size:3em } #solar #solar_sessao_titulo #sub_titulo{ color:#FFF; position:absolute; top:0; text-transform: uppercase; font-size: 1.25em; font-family:'Roboto Condensed'; text-shadow: 0 0 100px rgba(25,14,14,0.5); } /* ----- Título e sub-título principal - mobile ----- */ @media only screen and (max-width: 619px){ #solar #solar_sessao_titulo h2{ font-size:2em } #solar #solar_sessao_titulo #sub_titulo{ font-size: 1em; } } /* ----- galeria imagem ---- */ .puc_imagem_galeria_row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */ .puc_imagem_galeria_column { flex: 25%; max-width: 25%; padding: 0 4px; } .puc_imagem_galeria_column img { margin-top: 8px; vertical-align: middle; } .puc_imagem_galeria_column a{ box-shadow: 0 3px 8px #888; display: block } /* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) { .puc_imagem_galeria_column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .puc_imagem_galeria_column { flex: 100%; max-width: 100%; } } /* ----- Outros Elementos ----- */ #solar.puc_layout_coluna-lateral-on_TAG-BODY section article{ width:78%; margin-right:2%; padding:20px; background:#FFF } @media (max-width:1138px) { #solar.puc_layout_coluna-lateral-on_TAG-BODY section article{ width:100%; margin-right:0 } } #solar section article .sub-titulo{ font-size:1.6em; color:#333333; font-weight:bold; border-left:10px solid #b0b535; padding-left:3px; } #solar section article .banner{ border-bottom:10px solid #b0b535 } #solar section article .boxe{ box-shadow:0px 3px 8px #888; padding:13px; text-align:center } #solar section aside{ padding:20px; background:#FFF } #solar section aside p{ margin-bottom:8px } /* =============================*/ /* ----------- Index ---------- */ /* =============================*/ /* ----- menu new index 1 ----- */ .material-icons-index { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align: bottom; font-size: 21px; } .puc_imagem_index_row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */ .puc_imagem_index_column { flex: 25%; max-width: 25%; padding: 0 4px; } .puc_imagem_index_column img { vertical-align: middle; } .puc_imagem_index_column a, .puc_imagem_index .menu_column{ box-shadow: 0 3px 8px #888; display: block } /* Responsive layout - makes a two column-layout instead of four columns */ .puc_imagem_index *{ box-sizing: border-box } .puc_imagem_index .menu_column { display: flex; /*align-items: center; justify-content: center; */ flex-direction: column; margin: 10px; text-decoration: none !important; /* border: 2px solid; */ transition: color 0.3s, background 0.3s; background: #fff } .puc_imagem_index a:link, .puc_imagem_index a:visited { margin: 10px; background: #fff; display: block; text-decoration: none !important } .puc_imagem_index a p { padding: 10px; } .puc_imagem_index .menu_column{ padding: 10px; margin: 10px; background: #fff; min-height: 85px; height: auto; position: relative } .puc_imagem_index h4{ font-size: 1.6em; color: #fff !important; font-weight: bold; margin: 0; position: absolute; bottom: 10px; left: 10px; } @media (max-width: 800px) { .puc_imagem_index_column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .puc_imagem_index_column { flex: 100%; max-width: 100%; } } /* ----- fim menu new index 1 ----- */ /* ----- menu new index 2 ----- */ .material-icons-index2 { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align: bottom; font-size: 21px; } .puc_imagem_index2 *{ box-sizing: border-box } .puc_imagem_index2 .menu_column{ background: #fff; min-height: 85px; height: auto; position: relative; margin: 10px 0; padding: 0 0 10px 0 } .puc_imagem_index2 .menu_column h4{ font-size: 1.6em; color: #fff !important; font-weight: bold; margin: 0; position: absolute; bottom: 10px; left: 10px; } .puc_imagem_index2_row { display: flex; flex-wrap: wrap; } /* Create four equal columns that sits next to each other */ .puc_imagem_index2_column { flex: 50%; max-width: 50%; } .puc_imagem_index2_column:first-child { padding: 0 5px 0 0 ; } .puc_imagem_index2_column:last-child { padding: 0 0 0 5px ; } .puc_imagem_index2_column img { vertical-align: middle; } .puc_imagem_index2_column a, .puc_imagem_index2 .menu_column{ box-shadow: 0 3px 8px #888; display: block } /* Responsive layout - makes a two column-layout instead of four columns */ .puc_imagem_index2 .menu_column p, .puc_imagem_index2_column p{ padding: 10px; } .puc_imagem_index2 .menu_column a{ display: block; text-decoration: none !important } .area-inicial_maior_.direita{ width: 25% } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 870px) { .puc_imagem_index2_column { flex: 100%; max-width: 100%; } .area-inicial_maior_.direita{ width: 100% } } /* ----- fim menu new index 2 ----- */ /* ----- menu new index 3 ----- */ .puc_imagem_index3 *{ box-sizing: border-box } .puc_imagem_index3 .menu_column{ background: #fff; min-height: 85px; height: auto; position: relative; margin: 10px 0; padding: 0 0 10px 0 } .puc_imagem_index3 .menu_column h4{ font-size: 1.6em; color: #fff !important; font-weight: bold; margin: 0; position: absolute; bottom: 10px; left: 10px; } .puc_imagem_index3 .sombra{ box-shadow: 0 3px 8px #888; } /* ----- fim menu new index 3 ----- */ /* ----- Background video ----- */ .video-background { position: absolute; width: 100%; height: 550px; left: 0px; z-index: -1; overflow:hidden; margin:0; margin-top: -65px; } .video-background .background-gradient { background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; opacity: 1; } .video-foreground, .video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #vidtop-content { top: 0; color: #fff; } .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; } .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; } .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } @media all and (max-width: 600px) { .vid-info { width: 50%; padding: .5rem; } .vid-info h1 { margin-bottom: .2rem; } } @media all and (max-width: 500px) { .vid-info .acronym { display: none; } } .puc_imagem_galeria a.small{ width: 250px; height: 167px; overflow-y: hidden } /* ----- redes sociais index ----- */ #solar section .solar_section_redes_sociais{ top:145px; right:0; padding:0; margin:0; list-style:none; } #solar section .solar_section_redes_sociais li{ float:right; width:17px; height:17px; margin:0; padding:0; margin-right:7px; list-style:none; } #solar section .solar_section_redes_sociais li:before{ content:none !important } #solar section .solar_section_redes_sociais li img { transition: all .2s ease-in-out; } #solar section .solar_section_redes_sociais li img:hover{ -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /* -------- menu Index solar 3 blocos --------- */ /* -- https://cssgrid-generator.netlify.app/ -- */ /* ---------Layout blocos----------------------- */ #solar section .servicos{ padding:80px 0; width:100%; margin:auto; ttext-align: center; } @media (max-width:619px) { #solar section .servicos{ text-align: center; } } #solar section .servicos .box-serv{ height:366.7px; min-width:366.7px; max-width:366.7px; position:relative; display:inline-block; float:none !important; vertical-align:top; margin:0 -2px; overflow: hidden; } #solar section .servicos .box-serv.onefr{ height:183.35px !important; } #solar section .servicos .box-serv img { display: block !important } #solar section .servicos .box-serv .dois-subn-blocos div{ width: 50% } #solar section #bloco_1 { display: inline-grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } /* ---------Bloco 1----------------------- */ #solar section #bloco_1 .div1 { grid-area: 1 / 1 / 3 / 3; position: relative } /* ---------Bloco 2----------------------- */ #solar section #bloco_2 { display: inline-grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } #solar section #bloco_2 .div1 { grid-area: 1 / 1 / 2 / 2; background-color: #fff; position: relative } #solar section #bloco_2 .div2 { grid-area: 2 / 2 / 3 / 3; background-color: #fff; position: relative } /* ---------Bloco 3----------------------- */ #solar section #bloco_3 { display: inline-grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } #solar section #bloco_3 .div1 { grid-area: 1 / 2 / 2 / 3; background-color: #fff; position: relative } #solar section #bloco_3 .div2 { grid-area: 2 / 2 / 3 / 3; background-color: #292929; position: relative } /* ---------Bloco 4----------------------- */ #solar section #bloco_4 { display: inline-grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; } #solar section #bloco_4 .div2 { grid-area: 1 / 2 / 2 / 3; background-color: #292929; position: relative } /* ---------Fim Layout blocos----------------------- */ /* -------------Fonte e Ícones-------------- */ /*https://material.io/resources/icons/?icon=alternate_email&style=baseline*/ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 2.5em; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .texto { display: flex; justify-content: center; align-items: center; height: 100%; } /* -----------Fim Fonte e Ícones------------ */ /* ------------Efeitos-------------- */ .content-action .texto p { color:#444 !important; text-align: center; margin: 0 auto; position: relative; z-index: 2; -webkit-transition: .2s color ease; -moz-transition: .2s color ease; transition: .2s color ease; transition-delay: .1s; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; padding: 0 10px; } .content-action:hover .texto p { color:#fff !important; } .content-action .layer { position: absolute; background: #b0b535; /*z-index: 1; */ top: 0; left: 0; width: 0; height: 100%; opacity: 0.9; text-align: center; -webkit-transition: .3s width ease; -moz-transition: .3s width ease; transition: .3s width ease } .content-action .layer.right { right: -100%; width: 100%; height: 100%; left: auto; -webkit-transition: .3s right ease; -moz-transition: .3s right ease; transition: .3s right ease } .content-action:hover .layer.right { right:0; } .content-action .layer.right_on{ right: 0; width: 100%; height: 100%; left: auto; -webkit-transition: .3s right ease; -moz-transition: .3s right ease; transition: .3s right ease } .content-action:hover .layer.right_on { right:-100%; } .content-action .layer.left { left: -100%; width: 100%; height: 100%; right: auto; -webkit-transition: .3s left ease; -moz-transition: .3s left ease; transition: .3s left ease } .content-action:hover .layer.left { left:0; } .content-action .left_on { left: -100%; width: 100%; height: 100%; position: absolute; background: #444; top: 0; right: 0; } .content-action .left_on:before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #444; position: absolute; top: 50%; right:-15px; transform: translateY(-50%); } .content-action .left_on p { color: #fff !important } .content-action .left_on.layer.left { left: -300%; z-index: 1; width: 200%; height: 100%; right: auto; -webkit-transition: .3s left ease; -moz-transition: .3s left ease; transition: .3s left ease; background: #b0b535; } .content-action .left_on.layer.left:before { content: ""; display: none } .content-action:hover .left_on.layer.left { left:-100%; } /* -----------Fim Efeitos----------- */ /* -------- Fim do menu Index solar 3 blocos --------- */ /*-------------------- css para as páginas antigas ainda em funcionamento até 1999-------------------*/ .titulo_solar { font:16px Arial, Helvetica, sans-serif; color:#063880; font-weight:bold; margin:0 0 20px 0; } .subtitulo_solar { font:13px Arial, Helvetica, sans-serif; color:#063880; font-weight:bold; } .img_exposicao { float:right; margin:0 0 20px 20px; border:0; } .texto_conteudo_solar { font:13px Arial, Helvetica, sans-serif; } .texto_conteudo_solar2 { font:13px Arial, Helvetica, sans-serif; padding:30px 10px 0 0; text-align:justify; width:625px; margin:auto; } .texto_conteudo_solar2 img { border:0; } .item_expo { background:url(/sobrepuc/depto/solar/imagens/bul_stl2_cmp.gif); background-position:0px 4px; background-repeat:no-repeat; padding:0 0 0 14px; margin:0 0 15px 6px; font:10px Verdana, Geneva, sans-serif; } .texto_conteudo_solar2 .link_img_vermaior:link, .texto_conteudo_solar2 .link_img_vermaior:visited, .texto_conteudo_solar .link_img_vermaior:link, .texto_conteudo_solar .link_img_vermaior:visited { border:1px solid #CCCCCC; font:10px Verdana, Geneva, sans-serif; color:#666; display:block; text-align:center; padding-bottom:4px; text-decoration:none; margin:18px 0 0 25px; float:right; } .texto_conteudo_solar2 .link_img_vermaior:hover, .texto_conteudo_solar .link_img_vermaior:hover { background:#D1DEE6; border:1px solid #AAAAAA; } .texto_conteudo_solar2 .link_img_vermaior img, .texto_conteudo_solar .link_img_vermaior img { margin-bottom:4px; border-bottom:1px solid #CCCCCC; } .texto_conteudo_solar2 .link_img_vermaior:hover img, .texto_conteudo_solar .link_img_vermaior:hover img { border-bottom:1px solid #AAAAAA; } .texto_conteudo_solar2 .link_img_vermaior_duplo_esq:link, .texto_conteudo_solar2 .link_img_vermaior_duplo_esq:visited, .texto_conteudo_solar2 .link_img_vermaior_duplo_dir:link, .texto_conteudo_solar2 .link_img_vermaior_duplo_dir:visited { border:1px solid #CCCCCC; font:10px Verdana, Geneva, sans-serif; color:#666; display:block; text-align:center; padding-bottom:4px; text-decoration:none; } .texto_conteudo_solar2 .link_img_vermaior_duplo_esq { float:left; } .texto_conteudo_solar2 .link_img_vermaior_duplo_dir { float:right; } .texto_conteudo_solar2 .link_img_vermaior_duplo_esq:hover, .texto_conteudo_solar2 .link_img_vermaior_duplo_dir:hover { background:#D1DEE6; border:1px solid #AAAAAA; } .texto_conteudo_solar2 .link_img_vermaior_duplo_esq img, .texto_conteudo_solar2 .link_img_vermaior_duplo_dir img { margin-bottom:4px; border-bottom:1px solid #CCCCCC; } .texto_conteudo_solar2 .link_img_vermaior_duplo_esq:hover img, .texto_conteudo_solar2 .link_img_vermaior_duplo_dir:hover img { border-bottom:1px solid #AAAAAA; } .texto_conteudo_solar2 .link_img_vermaior_multiplos:link, .texto_conteudo_solar2 .link_img_vermaior_multiplos:visited { text-decoration:none; margin-bottom:25px; } .texto_conteudo_solar2 .link_img_vermaior_multiplos:link img, .texto_conteudo_solar2 .link_img_vermaior_multiplos:visited img { border:1px solid #CCCCCC; } .texto_conteudo_solar2 .link_img_vermaior_multiplos:hover img { border:1px solid #AAAAAA; } .lista_n1 { background:url(/sobrepuc/imagens/bul_stl_sbp2.gif); background-repeat:no-repeat; background-position:0 2px; padding-left:13px; } /* =============================================== REDES SOCIAIS === */ /* ----------------------------------------------------------------- */ .solar_redes_sociais img { border:0; width:34px; height:34px; margin-right:5px; -webkit-transition:transform 0.2s; /* Safari 3.1 to 6.0 */ transition:transform 0.2s; } .solar_redes_sociais a:hover img { -ms-transform: scale(1.4, 1.4); /* IE 9 */ -webkit-transform: scale(1.4, 1.4); /* Safari */ transform: scale(1.4, 1.4); } /* =========================================== LINK PARA CONVITE === */ /* ----------------------------------------------------------------- */ .solar_link_convite:link, .solar_link_convite:visited { border:1px solid #FFF; transition:border 0.3s; float:right; margin:15px 0 30px 30px; } .solar_link_convite:hover { border:1px solid #AAA; } .solar_link_convite img { border:0; } /* ========================================== GALERIA DE IMAGENS === */ /* ----------------------------------------------------------------- */ .solar_galeria { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; padding:20px 0 20px 0; } .solar_galeria img { border:1px solid #CCC; display:block; transition:border 0.3s; } .solar_galeria span { display:block; margin:3px 3px 5px 3px; } .solar_galeria a:link, .solar_galeria a:visited { margin:10px; font:11px Verdana, Geneva, sans-serif; text-decoration:none; color:#666; text-align:center; transition:background 0.3s; } .solar_galeria a:hover { background:#D1DEE6; } .solar_galeria a:hover img { border:1px solid #AAA; } /* ========================= SOLAR CARD WALL ========================= */ .solar_cardwall { column-count:4; column-gap:20px; padding:20px 0; } /* RESPONSIVO */ @media (max-width:900px) { .solar_cardwall { column-count:3; } } @media (max-width:600px) { .solar_cardwall { column-count:2; } } @media (max-width:400px) { .solar_cardwall { column-count:1; } } /* CARDS */ .solar_cardwall a:link, .solar_cardwall a:visited { display:inline-block; width:100%; margin:0 0 20px; background:#FFF; text-align:center; text-decoration:none; color:#666; font:11px Verdana, Geneva, sans-serif; box-sizing:border-box; break-inside:avoid; overflow:hidden; /* ANIMAÇÃO */ transform:scale(1); transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } /* HOVER CRESCENTE */ .solar_cardwall a:hover { background:#D1DEE6; transform:scale(1.03); box-shadow:0 10px 25px rgba(0,0,0,0.15); position:relative; z-index:2; } /* IMAGEM */ .solar_cardwall span { display:block; overflow:hidden; } .solar_cardwall img { width:100%; height:auto; display:block; border:1px solid #CCC; box-sizing:border-box; transition: transform 0.5s ease, border-color 0.35s ease; } /* ZOOM SUAVE NA IMAGEM */ .solar_cardwall a:hover img { border-color:#AAA; transform:scale(1.05); } /* LEGENDA */ .solar_cardwall p { margin:8px 10px 10px; line-height:1.4; }