/* Theme Name: Rádio 104 Author: Lucile Braucks Author URI: http://lucilebraucks.com Version: 1.0 */ /** * 1.0 - Normalize * * Normalizing styles have been helped along thanks to the fine work of * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } body {margin: 0; padding:0; background-color: #fff; font-family: "Poppins", sans-serif; color: #474647; font-size: 18px; overflow-x: hidden;} *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .clearfix:before, .clearfix:after {content: " "; display: table;} .clearfix:after {clear: both;} article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} audio:not([controls]) {display: none; height: 0;} [hidden], template {display: none;} abbr[title] {border-bottom: 1px dotted;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} figure {margin: 0;} hr {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} code, kbd, pre, samp {font-size: 1em;} button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} select {text-transform: none;} button {overflow: visible;} button, input, select, textarea {max-width: 100%;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled] {cursor: default; opacity: .5;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;} input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 0.4375em; padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-appearance: textfield;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} fieldset {border: 1px solid #d1d1d1; margin: 0 0 1.75em; padding: 0.875em;} fieldset > :last-child {margin-bottom: 0;} legend {border: 0; padding: 0;} textarea {overflow: auto; vertical-align: top;} optgroup {font-weight: bold;} /*=============================================================================== WP ALIGNMENTS ===============================================================================*/ .alignleft {float: left; margin: 0.375em 1.75em 1.75em 0;} .alignright {float: right; margin: 0.375em 0 1.75em 1.75em;} .aligncenter {clear: both; display: block; margin: 0 auto 1.75em;} /*=============================================================================== FLEXIBLE EMBEDS ===============================================================================*/ embed, iframe, object, video {margin-bottom: 0; max-width: 100%; vertical-align: middle;} p > embed, p > iframe, p > object, p > video {margin-bottom: 0;} .entry-content .wp-audio-shortcode a, .entry-content .wp-playlist a {box-shadow: none;} .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist {margin-top: 0; margin-bottom: 1.75em;} .wp-playlist.wp-audio-playlist {padding-bottom: 0;} .wp-playlist .wp-playlist-tracks {margin-top: 0;} .wp-playlist-item .wp-playlist-caption {border-bottom: 0; padding: 0.7142857143em 0;} .wp-playlist-item .wp-playlist-item-length {top: 0.7142857143em;} /*=============================================================================== CAPTIONS STYLE ===============================================================================*/ .wp-caption {margin-bottom: 0; max-width: 100%;} .wp-caption img[class*="wp-image-"] { display: block; margin: 0;} .wp-caption .wp-caption-text {color: #686868; font-size: 13px; font-size: 0.8125rem; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em;} /*=============================================================================== GALLERIES STYLE ===============================================================================*/ .gallery {margin: 0 -1.1666667% 1.75em; text-align: center;} .gallery-item {display: inline-block; max-width: 33.33%; padding: 0 1.1400652% 2.2801304%; text-align: center; vertical-align: top; width: 100%;} .gallery-columns-1 .gallery-item {max-width: 100%;} .gallery-columns-2 .gallery-item {max-width: 50%;} .gallery-columns-4 .gallery-item {max-width: 25%;} .gallery-columns-5 .gallery-item {max-width: 20%;} .gallery-columns-6 .gallery-item {max-width: 16.66%;} .gallery-columns-7 .gallery-item {max-width: 14.28%;} .gallery-columns-8 .gallery-item {max-width: 12.5%;} .gallery-columns-9 .gallery-item {max-width: 11.11%;} .gallery-icon img {margin: 0 auto;} .gallery-caption {color: #686868; display: block; font-size: 1.2rem; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em;} .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {display: none;} /*=============================================================================== BASIC FORMATTING ===============================================================================*/ h1, h2, h3, h4, h5, h6 {margin:0; padding:0; color: #000; font-weight: 700; line-height: 1;} h1 {font-size: 70px; } h2 {font-size: 38px; font-weight: 400;} h3 {font-size: 24px; color: #7d179f;} h4 {font-size: 22px; color: #7d179f;} h5 {font-size: 20px; color: #7d179f;} h6 {font-size: 18px; color: #7d179f;} p {margin: 0 0 12px; padding:0; font-size: 18px; line-height: 1.6;} dfn, cite, em, i {font-style: italic;} blockquote {margin:0; padding:0; z-index: 10; color: #474647;} blockquote p {margin:0; padding:0; font-style: normal; font-size: 0.95em; line-height: 1.4; } blockquote p strong {font-weight: 700;} blockquote cite {display: block; margin:0; padding:20px 0 10px 0; font-size: 1em; font-weight: 900; font-style: normal; line-height: 1;} address {font-style: normal; margin: 0; padding: 0; font-size: 0.875em; line-height: 1.6;} address p {margin: 0; padding: 0; font-size: 0.875em; line-height: 2; font-weight: 400;} code, kbd, tt, var, samp, pre {font-family: Inconsolata, monospace;} pre {border: 1px solid #d1d1d1; font-size: 1em; font-size: 1rem; line-height: 1.3125; margin: 0 0 1.75em; max-width: 100%; overflow: auto; padding: 1.75em; white-space: pre; white-space: pre-wrap; word-wrap: break-word;} code {background-color: #d1d1d1; padding: 0.125em 0.25em;} abbr, acronym {border-bottom: 1px dotted #d1d1d1; cursor: help;} mark {background: #007acc; color: #fff; padding: 0.125em 0.25em; text-decoration: none;} big {font-size: 125%;} a {color: #000; cursor: pointer; text-decoration: none;} a, a:hover, a:active, a:focus, button, input[type="button"] {outline: 0; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out;} a:hover {opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); text-decoration: none;} a:focus {text-decoration: none; } a:active {text-decoration: none;} hr {margin:10px 0; padding:0; border: 0; height: 1px; background-color: #7d179f;} ul, ol {margin: 0 0 1.75em 1.25em; padding: 0;} ul {list-style: none;} ol {list-style: decimal; margin-left: 1.5em;} li > ul, li > ol {margin-bottom: 0; } dl {margin: 0 0 1.75em;} dt {font-weight: 700;} dd {margin: 0 0 1.75em;} img {height: auto; max-width: 100%; vertical-align: middle;} del {opacity: 0.8;} table, th, td {border: 1px solid #d1d1d1;} table {border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.75em; table-layout: fixed; width: 100%;} caption, th, td {font-weight: normal; text-align: left;} th {border-width: 0; font-weight: 700;} td {border-width: 0;} th, td {padding: 0.4375em;} .overlayPopup a:hover {opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); text-decoration: none;} .overlayPopup table, .overlayPopup th, .overlayPopup td {border: 0 solid transparent !important; border-width: 0 0 0 0 !important; background-color: transparent !important; margin: 0 !important; padding: 0 !important;} /*=============================================================================== FORMS ===============================================================================*/ /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder {color: #9aa7b8;} :-moz-placeholder {color: #9aa7b8;} ::-moz-placeholder {color: #9aa7b8; opacity: 1;} :-ms-input-placeholder {color: #9aa7b8;} input {line-height: normal;} label {display: block; margin:10px 0 0 0; padding:0; font-size: 16px !important; color: #3f3e3e; font-weight: 700 !important;} .button, button, button[disabled]:hover, button[disabled]:focus, input[type="button"], input[type="button"][disabled]:hover, input[type="button"][disabled]:focus, input[type="reset"], input[type="reset"][disabled]:hover, input[type="reset"][disabled]:focus, input[type="submit"], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus {margin:0 auto; padding:12px 30px; background-color: #7d179f; text-align: center; width: auto; line-height: 1; font-size: 18px; text-transform: uppercase; color: #fff; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; font-weight: 700; border: 0 !important; letter-spacing: 6px;} .button:hover, button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {background-color: #7d179f} select {display: block; margin:0 !important; padding: 8px 8px 7px !important; height: auto !important; width: 100%; line-height: 1; appearance: none; /* this is must */ -webkit-appearance: none; -moz-appearance: none; background: #fff url('images/mockselect.jpg') right center no-repeat; font-weight: 400; color: #000; width: 100%; line-height: 1; font-size: 16px !important; border: 1px solid #000; outline: 0;} button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {outline: thin dotted; outline-offset: -4px;} input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {margin:0; padding: 8px 8px !important; background-color: #fff; color: #000; width: 100%; line-height: 1; font-size: 16px !important; border: 1px solid #3f3e3e; outline: 0;} input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus {border: 1px solid #000; outline: 0;} /* ============================================================================ GENERAL STYLES ===============================================================================*/ .container {margin: 0 auto; width: 100%; max-width: 1170px; position: relative;} section {padding: 0;} .desktop {display: block;} .mobile {display: none;} .adBox {text-align: center;} /* ============================================================================ HEADER STYLES ==============================================================================*/ header {margin: 20px 0 0; padding: 0;} header .container {position: relative;} header .logo {position: absolute; top: 0; left:0; margin:0; padding:0; width:264px; height: 79px;} header .logo img {width: 100%;} header nav {display: grid; grid-template-columns: auto 150px 40px;} @media (min-width : 230px) and (max-width : 767px) { header {display: none;} .logo {margin: -9px 0 0 10px; padding:0; width:150px; height: 40px;} .custom-logo {height: 40px; width: auto;} /*header .logo {position: absolute; top: -38px; left:auto; right: 10px;width:130px; height: 40px; z-index: 9999999;} header .custom-logo {height: 40px; width: auto;}*/ } .tools {margin:0; padding:0.5rem 0 0 280px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;} .tools article:nth-of-type(2) {text-align: right;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .tools {margin-top: 45px; padding:0; grid-template-columns: 1fr 1fr;} .tools article:nth-of-type(1) {grid-column: span 2; text-align: center;} } header .social-menu {margin:0; padding:0; width: 100%; display: grid; grid-auto-flow: column; justify-content: end;} header .social-menu li {margin:0; padding:0;} header .social-menu li a {margin:0 0.4rem 0 0; padding:0; border-radius: 15px; width: 34px; height: 28px; background-color: #ef1d73; color: transparent; font-size: 0; display: flex; justify-content: center; align-items: center;} header .social-menu li a i {margin:0; padding:0; font-size: 20px; color: #fff;} header .social-menu li a:hover i {color: #f6ca3b;} @media (min-width : 230px) and (max-width : 767px) { .menu-social-menu-container {margin:0; padding:0; display: inline-block; width: auto; float: right} .social-menu {margin: -36px 10px 0 0; gap: 0.5rem;} } /* ============================================================================ SEARCH STYLE ==============================================================================*/ #search-btn {display: inline-block; margin: -8px 20px 0 0; padding: 0; width: auto; height: 20px; cursor: pointer; font-size: 30px; color: #ef1d73; float: right;} #search-btn:hover {cursor: pointer;} #search-overlay{display:none;} .block {position: fixed; top: 0; right: 0; bottom:0 ; left: 0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; overflow:auto; text-align: center; background: rgba(0, 0, 0, 0.9); z-index: 9999999;} .centered {margin:10% auto; padding:0; width: 60%; color: #FFF; border: none; background: transparent;} #close-btn {position: absolute; top: 10%; right: 20%; color: #fff;} #close-btn:hover{color: #777; cursor: pointer;} input[type="search"]#searchField {margin:0; padding: 10px 20px; color: #404040; font-size: 40px !important ; height: 72px; width: 65%; float: left;} .searchButton {margin:0 0 0 -7px; padding: 8px 10px !important; font-size: 28px !important; height: 71px; width: 35%; float: left; letter-spacing: 2px; background-color: #7d179f; } #searchform {margin:0; padding:0; width: 134px; float: right;} #searchform input[type="text"] {margin:0; padding:18px 10px 6px !important; width: 70%; background-color: #000; border: 0; color: #fff; font-style: italic; font-weight:300; font-size: 18px !important; letter-spacing: 0.5px; text-align: right; float: right;} #searchform input[type="submit"] {margin:18px 0 0 0; padding:0; width: 40px; height: 26px; border: 0 !important; background: transparent url('images/search.png') no-repeat center center; float: right;} #searchform ::-webkit-input-placeholder {color: #fff;} #searchform :-moz-placeholder {color: #fff;} #searchform ::-moz-placeholder {color: #fff; opacity: 1;} #searchform :-ms-input-placeholder {color: #fff;} .topDate {margin:0; padding:1.5rem 0 0 2.3rem; font-size: 16px; line-height: 1; color: #474647;} .tools .row {justify-content: end;} .owmw-now {margin:0; padding: 0.5rem 1rem; display: grid; grid-template-columns: auto auto auto; grid-column-gap: 0.8rem; justify-content: end; align-items: center; background-color: #7d179f; border-radius: 15px; color: #fff;} .owmw-now div {margin:0 !important; padding: 0 !important; display: flex; justify-content: center; align-items: center; height: 16px !important;} .owmw-now div:nth-of-type(1) {grid-column: 3; font-size: 16px !important; font-family: "Poppins", sans-serif !important; font-weight: 600 !important; padding-top: 13px !important;} .owmw-now div:nth-of-type(2) {grid-column: 1; font-size: 26px;} .owmw-now div:nth-of-type(3) {grid-column: 2; font-size: 26px !important; margin-top: -17px !important;} div[id^="owm-weather-id"] {font-size: 12px; line-height: 0px !important;} .owmw-small .owmw-now .owmw-main-symbol svg {width: 60px; height: 60px; margin-top: -24px;} @media (min-width : 230px) and (max-width : 767px) { /* div[id^="owm-weather"] {width: 170px;} .owmw-now .owmw-main-temperature {padding: 0 8px 0 0 !important;} .owmw-now .owmw-main-symbol {height: 40px; width: 40px;} */ #search-btn {margin: -50px 116px 0 0;} .topDate {position: absolute; right: 20px; top: -62px; padding: 13px 0 0 0; text-align: right;} .centered {margin:40% auto; padding:0; width: 98%;} #close-btn {position: absolute; top: 5%; right: 5%; color: #fff;} input[type="search"]#searchField {margin:0 auto; padding: 10px 20px; color: #404040; font-size: 20px !important ; height: 72px; width: 98%; float: none;} .searchButton {margin:0 auto; padding: 8px 10px !important; font-size: 28px !important; height: 71px; width: 98%; float: none; letter-spacing: 2px; background-color: #7d179f;} } /* ============================================================================ MAIN MENU STYLE ===============================================================================*/ header .primary-menu {margin:0; padding:0; display: flex; gap: 0.65rem; width: auto; justify-content: end;} header .primary-menu li {margin:0; padding:0; flex-shrink: 0; position: relative;} header .primary-menu li a {display: block; margin:0; padding:4px; color: #ef1d73; font-size: 20px; font-weight: bold; line-height: 1; text-transform: uppercase;} header .primary-menu li .sub-menu {display: none; position: absolute; width: auto; top:25px; left:0; margin:0; padding:5px 5px 10px; height: auto; z-index: 9999999; background-color: #7d179f;} header .primary-menu li .sub-menu li {display: block; margin:0; padding:0 !important; float: none; white-space: nowrap;} header .primary-menu li .sub-menu li a {display: block; margin:0; padding:10px 20px 10px 10px; color: #fff; line-height: 1;} header .primary-menu li.current-menu-item a, header .primary-menu li .sub-menu li.current-menu-item a {} header .primary-menu li a:hover, header .primary-menu li .sub-menu li a:hover {opacity: 1; -moz-opacity: 0.8; filter: alpha(opacity=80);} header .primary-menu li.current-menu-item .sub-menu li a {background-color: transparent;} header .primary-menu li.current-menu-item .sub-menu li.current-menu-item a {} /* ============================================================================ HAMBURGER MENU ==============================================================================*/ #hamburgericonmenuwrapper {display: none; z-index: 999; position: absolute; font-size: 16px; top: 70px; left: 0; width: 100%;} #hamburgerui {overflow: hidden; position: fixed; right: 0; top: 0; z-index: 22; width: 100%;} #hamburgerui ul {margin: 0; padding: 4px 10px; list-style-type: none; width: 100%; background: transparent; height: 50px; overflow: hidden;} #hamburgerui li {display: block; margin: 0; padding:0;} #hamburgerui li a.toggleButton {display: block; width: 40px; height: 40px; position: absolute; top: 10px; left: 10px; text-decoration: none; margin:0; padding: 10px 20px; color: white; outline: none; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 999999;} #hamburgerui li a:visited {color: white;} #hamburgerui li a:hover{} #navtoggler{display: block; position: absolute; top: 50%; left: 50%; font-size: 8px; width: 4em; height: 2.5em; padding: 0; text-indent: -1000px; border: 0.6em solid #7d179f; border-width: 0.6em 0; cursor: pointer; -webkit-transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0); -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; z-index: 999999;} #navtoggler::before, #navtoggler::after{content: ""; display: block; position: absolute; width: 100%; height: 0.6em; top: 50%; margin-top: -0.3em; left: 0; background: #7d179f ; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; z-index: 999999;} /* ###### CSS for Full Screen Menu NAV ###### */ .menu-mobile-menu-container {margin:0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; visibility: hidden; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3D(-100%, 0, 0); transform: translate3D(-100%, 0, 0); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s;} .menu-mobile-menu-container .real {margin:0; padding: 70px 0 0; width: 68%; height: 100%; background-color: rgba(129, 41, 144, 1); text-align: center; } .menu-mobile-menu-container .real ul {margin:0 auto; padding: 0; display: inline-block; width: auto;} .menu-mobile-menu-container .real ul li {margin:0; padding:0; text-align: left;} .menu-mobile-menu-container li a {display: block; margin:0; padding:10px 10px; color: #fff; font-size: 20px; line-height: 1; text-transform: uppercase; font-weight: 500;} /* #### Menu Hamburger Icon UI when shrinked CSS ######## */ #hamburgerui.shrink li:nth-last-of-type(n+2) a{opacity: 0; pointer-events: none;} /* #### Menu Opened State CSS ######## */ #hamburgericonmenuwrapper.open .menu-mobile-menu-container {visibility: visible; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; background-color: rgba(0, 0, 0, 0.3); } #hamburgericonmenuwrapper.open #navtoggler{ border-width: 0; z-index: 999999;} #hamburgericonmenuwrapper.open #navtoggler::before{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #fff; z-index: 9999999 !important;} #hamburgericonmenuwrapper.open #navtoggler::after{-webkit-transform: rotate(45deg); transform: rotate(45deg); background: #fff; z-index: 9999999 !important;} #hamburgericonmenuwrapper.open #hamburgerui li:nth-last-of-type(n+2) a{ opacity: 0; pointer-events: none;} #hamburgericonmenuwrapper.open .menu-mobile-menu-container ul{ opacity: 1; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); /* restore UL to original positon */} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .menu-main-menu-container {display: none;} #hamburgericonmenuwrapper {display: block !important;} .menu-item-has-children .sub-menu {display: block !important;} .menu-item-has-children .sub-menu li a {display: block !important;} .menu-mobile-menu-container li.menu-item-has-children {padding-top: 0;} .menu-mobile-menu-container li.menu-item-has-children a:first-of-type { display: none;} .menu-mobile-menu-container li .sub-menu {margin:0; padding:0; width: 85%;} .menu-mobile-menu-container li .sub-menu li {display: block; margin:0; padding:0 !important; float: none; white-space: nowrap; font-size: 16px;} /*.menu-mobile-menu-container li .sub-menu li a {display: block; margin:0; padding:6px 10px; color: #fff; line-height: 1; font-size: 16px;}*/ .menu-mobile-menu-container .logo {margin: 1rem 0 2rem 0; width: 160px;} .real .social-menu {margin:2rem 0 0 1rem !important; padding:0; width: 100%; display: grid !important; grid-auto-flow: column !important; justify-content: start !important;} .real .social-menu li {margin:0; padding:0;} .real .social-menu li a {margin:0 0.4rem 0 0; padding:0; border-radius: 15px; width: 44px; height: 38px; background-color: #ef1d73; color: transparent; font-size: 0; display: flex; justify-content: center; align-items: center;} .real .social-menu li a i {margin:0; padding:0; font-size: 30px; color: #fff;} .real .social-menu li a:hover i {color: #f6ca3b;} } /* ============================================================================ HOME STYLE ==============================================================================*/ .hero {margin:0 0 5rem; padding:0;} h2 {margin:4rem 0; padding:0; color: #fff; font-weight: 700; font-size: 42px; position: relative; z-index: 10;} h2 span {display: inline-block; padding: 1rem 4rem 1rem 2rem; color: #fff; background-color: #7d179f; min-width: 340px; border-radius: 150px 150px 150px 0;} h2:after {content: ''; display: block; width: 110px; height: 100%; background-color: #7d179f; border-radius: 150px 0 150px 150px; position: absolute; top: 0; right: 0; } /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .hero {margin: -2px 0 0 0; padding: 0;} h2 {margin:2rem 0; font-size: 30px;} h2 span {padding: 1rem 2rem; border-radius: 60px 60px 60px 0; min-width: 98%;} h2:after {content: ''; display: none;} } .currentNews ul {margin:0 auto; padding:0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem;} .currentNews ul li:nth-of-type(1) {grid-column: 1 / span 2; grid-row: 1 / span 2; background-color: #fec914;} .currentNews ul li:nth-of-type(1) h3 {font-size: 32.48px; height: 40%;} .currentNews ul li:nth-of-type(1) h3 a {color: #ef1d73;} .currentNews ul li {margin:0; padding:0; background-color: #7d179f; border-radius: 15px; text-align: center;} .currentNews ul li img {margin:0; width: 100%; border-radius: 15px 15px 0 0;} .currentNews ul li h3 {margin:0 auto; padding:1.5rem 1.6rem; color: #fff; font-weight: 600; font-size: 16.59px; line-height: 1.4; display: flex; justify-content:center; align-items: center; } .currentNews ul li h3 a {color: #fff} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .currentNews ul {grid-template-columns: 1fr;} .currentNews ul li:nth-of-type(1) {grid-column: 1 / span 1; grid-row: 1 / span 1; } .currentNews ul li h3 {font-size: 22px;} .currentNews ul li:nth-of-type(1) h3 {font-size: 28px; height: auto;} } .viewAll {margin: 3rem 0 0; padding:0; text-align: right} .viewAll a {display: block; float: right; margin: 0; padding: 1.5rem; width: 275px; text-align: center; background-color: #ef1d73; font-size: 30px; border-radius: 150px 0 150px 150px; color: #fec914; font-weight: bold; text-transform: lowercase;} @media (min-width : 230px) and (max-width : 767px) { } /* ============================================================================ INTERNAL PAGES ==============================================================================*/ .whatsApp {margin: 50px 0 40px 30px !important; padding: 4px !important; width: 290px !important; background-color: #25d366; border-radius: 15px; text-align: center; position: relative;} .whatsApp:after {content: ''; display: block; margin:0; padding:0; width: 74px; height: 74px; background: url('https://www.redepampa.com.br/wp-content/themes/redepampa/images/whatsApp.png') no-repeat center center; position: absolute; top: -35px; left: -35px;} .whatsApp a {display: inline-block !important; border: 6px solid #fff; border-radius: 14px; padding: 12px 20px 12px 30px; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; line-height: 1.2; text-align: left; color: #fff !important;} .internalContent {margin:0; padding: 0;} .internalContent h1, .blog h1 {margin:4rem 0; padding:0; color: #fff; font-weight: 700; font-size: 42px; position: relative; z-index: 10;} .internalContent h1 span, .blog h1 span {display: inline-block; padding: 1rem 4rem 1rem 2rem; color: #fff; background-color: #7d179f; min-width: 600px; border-radius: 150px 150px 150px 0;} .internalContent h1:after, .blog h1:after {content: ''; display: block; width: 110px; height: 100%; background-color: #7d179f; border-radius: 150px 0 150px 150px; position: absolute; top: 0; right: 0; } .single .internalContent h1 {margin:4rem 0; padding:0; color: #fff; font-weight: 700; font-size: 32px; position: relative; z-index: 10;} .single .internalContent h1 span {display: inline-block; padding: 1rem 2rem 1rem 3rem; color: #fff; background-color: #7d179f; min-width: 600px; width: 86%; border-radius: 150px 150px 150px 0;} .single .internalContent h1:after {content: ''; display: block; width: 110px; height: 100%; background-color: #7d179f; border-radius: 150px 0 150px 150px; position: absolute; top: 0; right: 0; } .topBackBT {position: absolute; top: 52px; right: 10px; } .topBackBT .back {margin: -15px 0 0 0; padding: 10px; color: #fff; background-color: #7d179f; font-size: 12px; font-weight: 900; letter-spacing: 4px;} .topBackBT.bottom {top: 40px;} @media (min-width : 230px) and (max-width : 767px) { .internalContent h1, .blog .internalContent h1 {margin:2rem 0; font-size: 28px;} .internalContent h1 span, .blog .internalContent h1 span {padding: 1rem 2rem; border-radius: 60px 60px 60px 0; min-width: 98%;} .internalContent h1:after, .blog .internalContent h1:after {content: ''; display: none;} .single .internalContent h1 {margin:2rem 0; font-size: 22px;} .single .internalContent h1 span {display: inline-block; padding: 1rem 2rem; min-width: 98%; border-radius: 60px 60px 60px 0;} .single .internalContent h1:after {content: ''; display: none;} .topBackBT {top: 36px;} .single .topBackBT {top: 89px;} .topBackBT.bottom {top: 89px;} } .internalContent .gridContainer {margin:0 auto; width: 100%; display: grid; grid-template-columns: 70% 30%; gap: 3rem;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) {.internalContent .gridContainer {grid-template-columns: 1fr;} } .internalContent p {margin: 0 0 30px; padding:0; font-size: 18px; line-height: 1.8; letter-spacing: 0.5px;} .internalContent ul {margin:30px 0 30px 20px; padding:0;} .internalContent ul li {position: relative; margin:0; padding: 0 0 10px 20px; line-height: 1.6; font-size: 18px;} .internalContent ul li:before {content:''; position: absolute; top: 12px; left: 0; display: block; margin:0; padding:0; width: 10px; height: 10px; background-color: #7d179f;} @media (min-width : 230px) and (max-width : 767px) { .internalContent .gform_body li {padding: 0 0 10px 0 !important;} .gform_legacy_markup_wrapper .gform_footer {padding: 0 0 10px 0 !important; margin: -16px 0 0 0 !important;} article.comercial {margin-top: -70px;} } .single .internalContent .webfeedsFeaturedVisual {display: none !important;} .postInfo p {margin:0; padding:5px 0 20px 0; font-size: 18px; color: #000; letter-spacing: 2px; clear: both;} .postInfo p span {color: #000;} .featureImageBox {margin: 0 0 40px; padding:0; position: relative;} .featureImageBox img {margin: 0; width: 70% !important;} .single-post .featureImageBox img {margin: 0; width: 100% !important;} @media (min-width : 230px) and (max-width : 767px) { .featureImageBox {margin: 0;} .featureImageBox img {width: 100% !important;} } .featureImageBox .photoCredits {margin:0; padding: 15px 20px; position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0,.5); font-size: 18px; color: #fff; letter-spacing: 0.5px; line-height: 1;} .featureImageBox .photoCredits p {margin:0; padding:0 0 5px 0; font-size: 18px; color: #fff; letter-spacing: 0.5px; line-height: 1.2;} .featureImageBox .photoCredits em {font-size: 16px; font-weight: 300;} .galeriaArtigo {margin: 50px 0 30px; padding:0;} .postGalleryManual {margin:0 !important; padding:0 !important;} .postGalleryManual li {display: inline-block; margin:0 2px 4px 0 !important; padding:0 !important;} .internalContent .postGalleryManual li:before {display: none !important;} .tagList {margin: 20px 0; padding:0; font-size: 14px; text-transform: uppercase; font-weight: 900;} .tagList a {padding-left: 10px; font-weight: 400; } p .back {clear: both; margin: 30px 0; padding: 10px; color: #fff; background-color: #7d179f; font-size: 12px; font-weight: 900; letter-spacing: 4px;} .socialMediaCore {margin:0; padding: 30px 0 50px 0; clear: both;} .socialMediaCore p {margin:0; padding: 0; color: #000; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; line-height: 47px; width: 280px; float: left;} .socialMediaCore ul {margin:0; padding:0 0 0 10px; display: inline-block; width: auto; float: left;} .socialMediaCore ul li {margin:0; padding:0 6px; float: left; width: 50px;} .socialMediaCore ul li:before {display: none !important;} .socialMediaCore ul li a {margin:0; padding:0; display: flex; justify-content: center; align-items: center; width: 47px; height: 47px; border-radius: 50%; background-color: #000; text-align: center; font-size: 26px;} .socialMediaCore ul li:nth-of-type(1) a {background-color: #24cc63; font-size: 32px;} .socialMediaCore ul li:nth-of-type(2) a {background-color: #4267b2; font-size: 32px;} .socialMediaCore ul li:nth-of-type(3) a {background-color: #1c9cea; font-size: 32px;} .socialMediaCore ul li:nth-of-type(4) a {background-color: #0077B5; font-size: 30px;} .socialMediaCore ul li:nth-of-type(5) a {background-color: #E60023; font-size: 32px;} .socialMediaCore ul li a i {color: #fff; } .single-post p {text-align: justify;} /*================ POST NAVIGATION ================*/ #post-nav {margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) {#post-nav {grid-template-columns: 1fr;} } #post-nav .post-previous {margin:0; padding:0;} #post-nav .post-previous h5 {margin:0; padding:0 0 5px 16px; border-bottom: 1px solid #7d179f; font-size: 20px; font-weight: 900; color: #7d179f; text-transform: uppercase; position: relative; letter-spacing: 2px;} #post-nav .post-previous h5 a {color: #7d179f;} #post-nav .post-previous h5:after {content: ''; display: block; position: absolute; top: 4px; left: 0; margin:0; width: 0; height: 0; border-top: 6px solid transparent; border-right: 10px solid #7d179f; border-bottom: 6px solid transparent;} #post-nav .post-previous img {margin: 14px 10px 0 0; float: left; height: 90px; width: auto;} #post-nav .post-previous h6 {margin:0; padding:14px 0 5px 0; font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: 0; color: #7d179f;} #post-nav .post-next {margin:0; padding:0;} #post-nav .post-next h5 {margin:0; padding:0 16px 5px 0; border-bottom: 1px solid #7d179f; font-size: 20px; font-weight: 900; color: #7d179f; text-transform: uppercase; text-align: right; position: relative; letter-spacing: 2px;} #post-nav .post-next h5 a {color: #7d179f;} #post-nav .post-next h5:after {content: ''; display: block; position: absolute; top: 4px; right: 0; margin:0; width: 0; height: 0; border-top: 6px solid transparent; border-left: 10px solid #7d179f; border-bottom: 6px solid transparent;} #post-nav .post-next img {margin: 14px 0 0 10px; float: right; height: 90px; width: auto;} #post-nav .post-next h6 {margin:0; padding:14px 0 5px 0; font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: 0; color: #7d179f;} .internalContent h6 {margin:30px 0 10px; padding:0; font-size: 40px; color: #7d179f; letter-spacing: 2px;} .archivePosts {margin:0 1%; padding: 0; width: 48%; height: 150px; cursor: pointer; float: left; position: relative;} .archivePosts .archivePostsInner {margin:0; padding: 0; width: 35%; height: 130px; background-repeat: no-repeat; background-size: cover; background-position: center center;} .archivePosts .archivePostsInner .gradient {position:absolute; right: 0; top: 0; width: 65%; margin:0; padding: 0 0 0 20px;} .archivePosts .archivePostsInner .gradient h3 {margin:0; padding: 0 0; font-size: 16px; font-weight: 400; line-height: 1.2; color: #7d179f;} .archivePosts .archivePostsInner .gradient h3 small {display: inline-block; margin:10px 0 0 0; padding: 3px 3px 6px; width: auto; font-size: 9px; line-height: 10px; font-weight: 300; color: #3f3e3e; text-transform: uppercase; letter-spacing: 1px;} .archivePosts .archivePostsInner .gradient h3 a {color: #7d179f; display: block;} .archivePosts:nth-of-type(1), .archivePosts:nth-of-type(2), .archivePosts:nth-of-type(3), .archivePosts:nth-of-type(4), .archivePosts:nth-of-type(5) {margin:0 0.5% 20px !important; padding: 0 !important; width: 19% !important; height: 300px;} .archivePosts:nth-of-type(1) .archivePostsInner, .archivePosts:nth-of-type(2) .archivePostsInner, .archivePosts:nth-of-type(3) .archivePostsInner, .archivePosts:nth-of-type(4) .archivePostsInner, .archivePosts:nth-of-type(5) .archivePostsInner {padding: 0; margin:0; width: 100%; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center 30%; float: none;} .archivePosts:nth-of-type(1) .archivePostsInner .gradient, .archivePosts:nth-of-type(2) .archivePostsInner .gradient, .archivePosts:nth-of-type(3) .archivePostsInner .gradient, .archivePosts:nth-of-type(4) .archivePostsInner .gradient, .archivePosts:nth-of-type(5) .archivePostsInner .gradient {margin:0; padding:0; height: 100%; width: 100%; background: transparent; position: relative; background: -moz-linear-gradient(top, transparent 25%, #000 95%); background: -webkit-linear-gradient(top, transparent 25% ,#000 95%); background: linear-gradient(to bottom, transparent 25%, #000 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000',GradientType=0 ); } .archivePosts:nth-of-type(1) .archivePostsInner .gradient h3, .archivePosts:nth-of-type(2) .archivePostsInner .gradient h3, .archivePosts:nth-of-type(3) .archivePostsInner .gradient h3, .archivePosts:nth-of-type(4) .archivePostsInner .gradient h3, .archivePosts:nth-of-type(5) .archivePostsInner .gradient h3 {margin:0; padding: 0 20px 0 0; position: absolute; bottom: 20px; left: 20px; font-size: 18px; font-weight: 500; line-height: 1.1;} .archivePosts:nth-of-type(1) .archivePostsInner .gradient h3 small, .archivePosts:nth-of-type(2) .archivePostsInner .gradient h3 small, .archivePosts:nth-of-type(3) .archivePostsInner .gradient h3 small, .archivePosts:nth-of-type(4) .archivePostsInner .gradient h3 small, .archivePosts:nth-of-type(5) .archivePostsInner .gradient h3 small {display: inline-block; margin:10px 0 0 0; padding: 3px 3px 6px; width: auto; font-size: 10px; line-height: 10px; font-weight: 300; color: #a7a5a4; text-transform: uppercase; letter-spacing: 1px; background-color: rgba(0, 0, 0,.3);} .archivePosts:nth-of-type(1) .archivePostsInner .gradient h3 a, .archivePosts:nth-of-type(2) .archivePostsInner .gradient h3 a, .archivePosts:nth-of-type(3) .archivePostsInner .gradient h3 a, .archivePosts:nth-of-type(4) .archivePostsInner .gradient h3 a, .archivePosts:nth-of-type(5) .archivePostsInner .gradient h3 a {color: #fff; display: block;} .newsGrid {margin:0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 1rem;} .newsGrid article {position: relative;} .newsGrid article {grid-row: span 2;} .newsGrid article .archivePostsInner {margin:0; padding: 0; width: 100%; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center center;} .newsGrid article .archivePostsInner .gradient {position:absolute; right: 0; top: 0; margin:0; padding:0; height: 100%; width: 100%; background: transparent; position: relative; background: -moz-linear-gradient(top, transparent 25%, #000 95%); background: -webkit-linear-gradient(top, transparent 25% ,#000 95%); background: linear-gradient(to bottom, transparent 25%, #000 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000',GradientType=0 ); } .newsGrid article .archivePostsInner .gradient h3 { margin:0; padding: 0 20px 0 0; position: absolute; bottom: 20px; left: 20px; font-size: 18px; font-weight: 500; line-height: 1.1; color: #fff;} .newsGrid article .archivePostsInner .gradient h3 small {display: inline-block; margin:10px 0 0 0; padding: 3px 3px 6px; width: auto; font-size: 9px; line-height: 10px; font-weight: 300; color: #fff; text-transform: uppercase; letter-spacing: 1px;} .newsGrid article .archivePostsInner .gradient h3 a {color: #fff; display: block;} .post-type-archive-centoequatro .internalContent .gridContainer {margin:0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5rem;} .post-type-archive-centoequatro .internalContent .gridContainer .archivePosts {margin:0; padding: 0; width: auto !important; height: auto !important; cursor: pointer; float: none; position: relative;} .post-type-archive-noticias .internalContent .gridContainer {margin:0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;} .post-type-archive-noticias .internalContent .gridContainer .archivePosts {margin:0; padding: 0; width: auto !important; height: auto !important; cursor: pointer; float: none; position: relative;} .galeriaArtigo {} .galeriaArtigo h4 {margin-bottom: 20px;} .sidebar h4 {margin:0 0 20px; padding:0; display: block; width: 100%; font-size: 40px; color: #7d179f; font-weight: 900; text-transform: uppercase; position: relative; letter-spacing: 10px; line-height: 1;} .sidebar div {margin:0 !important; padding:0 10px 15px 0; } .sidebar div .wp-post-image {margin: 0 10px 0 0; width: 100px; height: auto !important; float: left;} .sidebar div h5 {margin:0; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.1;} .sidebar div h5 small {display: inline-block; margin:0 0 10px 0; padding: 3px; width: auto; font-size: 10px; line-height: 1; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; background-color: rgba(0, 0, 0,.4);} .sidebar div h5 a {color: #7d179f; display: block;} .elm-wrapper {margin-top: 80px !important; text-align: right;} .loadmore {margin-top: 80px !important; text-align: right;} .loadmore button {background-color: #7d179f;} .form-pages {display: grid; grid-template-columns: 60% 40%; gap: 4rem;} @media (min-width : 230px) and (max-width : 767px) { .form-pages {grid-template-columns: 1fr;} } .programacao {margin:0 auto; padding:0; display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 2rem;} .programacao h3 {padding-bottom: 10px;} .programacao ul.grid {margin:0; padding:0;} .programacao ul.grid li {margin:0; padding:0; font-size: 16px; line-height: 1.6; text-align: justify;} .programacao ul.grid li small {display: inline-block; width: 50px; font-size: 16px; font-weight: 700; letter-spacing: 1px;} .programacao ul.grid li strong {font-weight: 400;} .programacao ul.grid li:before {display: none;} @media (min-width : 230px) and (max-width : 767px) { .programacao {grid-template-columns: 1fr;} } /* ============================================================================ APP 104 ==============================================================================*/ .downloadApp {margin:0; padding: 4rem 0 2rem; text-align: center;} .downloadApp article {margin: 0 auto; padding: 30px; width: 88%; background-color: #ef1d73; color: #fff; border-radius: 0 150px 150px 150px;} .downloadApp article h5 {margin:0; padding:0; color: #fff; font-size: 44px; text-align: left; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; line-height: 54px;} .downloadApp article img {margin:4px 0 0 15px; float: right;} @media (min-width : 230px) and (max-width : 767px) { .downloadApp article {margin: 0 auto; padding: 20px 10px; width: 96%; border-radius: 0 70px 70px 70px;} .downloadApp article span {display: block;} .downloadApp article h5 {text-align: center; font-size: 36px; letter-spacing: 0;} .downloadApp article img {margin:4px 2px; float: none;} } .galleryid-13 { margin: 0 auto 1.75em; text-align: center; width: 75%; } /* ============================================================================ FOOTER ==============================================================================*/ footer {margin:3rem 0 0 0; padding:0; text-align: left;} footer .container {padding: 2rem 2rem 2rem 4rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; background-color: #ef1d73; border-radius: 150px 0 150px 0;} footer h5 {margin:0; padding: 2.8rem 0 1rem 0; font-size: 28px; color: #fff; font-weight: 500;} footer .pampaFooter {margin: 1.8rem 0 0 0; width: 240px;} footer .workWithUs {margin:0; padding:1rem 0 0 0; text-align: left;} footer .workWithUs a {display: block !important; margin:0; padding: 0 !important; background-color: #fff !important; color:#ef1d73; font-size: 16px; height: 44px; line-height: 40px; width: 160px !important; border-radius: 25px; letter-spacing: 0; border: 2px solid #fff !important; white-space: nowrap !important; text-align: center; text-transform: none; font-weight: 500;} footer .workWithUs a:hover {color: #fff !important; background-color:#ef1d73 !important;} footer article ul {margin:0; padding:0.8rem 0 0 0;} footer article ul li {margin:0; padding: 0; font-size: 16px; font-weight: 300; line-height: 1.6;} footer .social-menu {margin:1.8rem 0; padding:0; width: 100%; display: grid; grid-auto-flow: column; justify-content: start;} footer .social-menu li {margin:0; padding:0;} footer .social-menu li a {margin:0 1rem 0 0; padding:0; border-radius: 15px; width:50px; height:44px; background-color: #fff; color: transparent; font-size: 0; display: flex; justify-content: center; align-items: center;} footer .social-menu li a i {margin:0; padding:0; font-size: 32px; color:#ef1d73;} footer .social-menu li a:hover i {color: #f6ca3b;} footer a {color: #fff;} footer address {margin:0; padding: 30px 0 0 0; font-weight: 300; font-size: 16px !important; line-height: 1.6; color: #fff;} footer .copyrights {margin: 0 auto; padding:0; width: 100%; max-width: 1170px; background-color: #fff;} footer .copyrights p {margin:0; padding:1.4rem 0 3rem; font-size: 14px; color: #151515; line-height: 1.2; letter-spacing: 1px; text-align: left;} @media (min-width : 230px) and (max-width : 767px) { footer .container {padding: 2rem !important; grid-template-columns: 1fr; border-radius: 80px 0 80px 0;} footer .copyrights p {margin:0; padding:1.4rem 1rem 3rem;} } /* ============================================================================ NEW AUDIO PLAYER STYLE ==============================================================================*/ :root{ --card-bg: rgba(34,34,34,0.6); --card-blur: 12px; --card-radius: 14px 14px 0 0; --accent: #7d179f; --primary: #ef1d73; --track-bg: #1d2327; --text: #fff; } .player-container { position: fixed; left: 20px; bottom: 0px; z-index: 9999; } /* FAB Play */ .play-fab { position: absolute; top: -35px; /* um pouco acima do card */ left: 50%; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 46px; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s; z-index: 99999; } .play-fab:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.32); } .play-fab:active { transform: translateX(-50%) scale(0.98); } .pulsing { animation: pulseBtn 1.5s infinite; } @keyframes pulseBtn { 0%{background:var(--accent)} 50%{background:var(--primary)} 100%{background:var(--accent)} } #global-player.is-closed .play-fab { top: -94px; left: 30px; } /* exemplo */ /* Card (frosted) */ .player-card { position: relative; width: 480px; background: var(--card-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); color: var(--text); border-radius: var(--card-radius); padding: 1rem 1.5rem; box-shadow: 0 18px 40px rgba(0,0,0,0.3); } .player-card.hidden { display: none; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .header-actions { display: inline-flex; gap: 8px; } .status { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 18px; min-height: 20px; padding: 4rem 0 1rem;} .status img {margin-right: 0.8rem;} .spinner { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; } .spinner.visible { visibility: visible; } .toggle-btn {position: absolute; top: 10px; /* um pouco acima do card */ right: 16px; background: none; border: 0; font-size: 12px; color: #fff; width: 60px; height: 50px; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s, transform 0.2s; } .toggle-btn div {text-align: center;} .toggle-btn i {display: block; font-size: 40px;} .toggle-btn span {display: block; font-size: 14px; text-transform: uppercase;} .close-btn {position: absolute; top: 10px; /* um pouco acima do card */ left: 16px; background: none; border: 0; font-size: 12px; color: #fff; width: 60px; height: 50px; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s, transform 0.2s; } .close-btn div {text-align: center;} .close-btn i {display: block; font-size: 40px;} .close-btn span {display: block; font-size: 14px; text-transform: uppercase;} .toggle-btn:hover, .close-btn:hover {} .toggle-btn .chev { transition: transform .25s ease; } .collapsed .toggle-btn .chev { transform: rotate(180deg); } /* seta para cima quando fechado */ .card-content { overflow: hidden; transition: max-height .35s ease; } .expanded .card-content { max-height: 300px; } .collapsed .card-content { max-height: 0 !important; } .row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: nowrap; } /* Volume (with fill) */ .volume-wrap { width: 100%; } .volume-icon { width: 24px; text-align: center; flex: 0 0 auto; color: #fff; } input[type="range"].volume{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px; outline:none; background: linear-gradient(to right, var(--accent) 100%, var(--track-bg) 100%); } input[type="range"].volume::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; cursor:pointer; border:2px solid #fff; } input[type="range"].volume::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; cursor:pointer; border:2px solid #fff; } /* Live equalizer */ .live-anim { display: inline-flex; align-items: flex-end; gap: 3px; width: 22px; height: 14px; opacity: 0; transition: opacity .2s ease; } .live-anim.visible { opacity: 1; } .live-anim .bar { width: 3px; height: 30%; background: #fff; border-radius: 2px; animation: eq 1.1s infinite ease-in-out; } .live-anim .bar:nth-child(1){ animation-delay:0s; } .live-anim .bar:nth-child(2){ animation-delay:.15s; } .live-anim .bar:nth-child(3){ animation-delay:.3s; } .live-anim .bar:nth-child(4){ animation-delay:.45s; } @keyframes eq { 0%,100%{height:25%} 50%{height:100%} } .card-content .noAr p {margin:0; padding: 0; text-align: center; font-size: 20px;} .card-content .noAr { margin: 0; padding: 0; display: block; width: 100%; height: 40px; line-height: 40px; float: none; } @media (min-width : 230px) and (max-width : 767px) { :root{ --card-bg: rgba(34,34,34,0.8); --card-blur: 20px; } .player-container {left: 0; z-index: 9999999;} .play-fab {top: -30px; width: 60px; height: 60px; font-size: 30px;} .player-card {width: 100%;} .status {font-size: 14px; padding: 1.5rem 0 0.5rem;} .toggle-btn {right: 10px; font-size: 10px; width: 40px; height: 30px;} .toggle-btn i {display: block; font-size: 20px;} .toggle-btn span {font-size: 11px;} .close-btn {left: 10px; font-size: 10px; width: 40px; height: 30px;} .close-btn i {display: block; font-size: 20px;} .close-btn span {font-size: 11px;} .expanded .card-content { max-height: 200px; } .card-content .noAr p {font-size: 14px;} } #featured_image{ width:120px; } td.featured_image.column-featured_image img{ max-width: 100%; height: auto; } /* ============================================================================ CSS ANIMATIONS ==============================================================================*/ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-ms-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-ms-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @keyframes fadeOut { from { opacity:1; } to { opacity:0; } } #fade-in {opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;} :root #fade-in { opacity:1 \0/IE9; } #fade-in.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;} #fade-in.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;} #fade-in.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;} .fade-out.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;} .fade-out.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;} .fade-out.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;} /** ======================================================================================================================================================================================================= ======================================================================================================================================================================================================= MEDIA QUERIES ======================================================================================================================================================================================================= ======================================================================================================================================================================================================= */ /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { body {padding-top: 80px; overflow-x: hidden;} body.home {padding-top: 120px; overflow-x: hidden;} section {padding:20px 0;} .container {margin: 0; padding: 0 1.2rem;} .desktop {display: none;} .mobile {display: block;} .row-fluid [class*="span"], .row-fluid [class*="span"]:first-child {margin:0; padding:0; width: 100%;} .row-fluid [class*="span"]:first-child {margin-left: 0;} /* ============================================================================ HEADER STYLES ==============================================================================*/ .archive .internalContent h1.capa {margin:10px 0 30px; padding:0; font-size: 64px; color: #7d179f; font-weight: 700; text-transform: uppercase; position: relative; letter-spacing: 20px; line-height: 1;} .archive .internalContent h1.capa span {display: inline; padding: 0 30px 0 0; background-color: #fff; width: auto !important; position: relative; z-index: 5;} .archive .internalContent h1.capa:before {content: ''; display: block; margin:-10px 0 0 0; padding:0; background-color: #7d179f; height: 20px; width: 100%; position: absolute; top: 40%; left: 0; z-index: 1;} .internalContent p {margin: 0 0 30px; padding:0; font-size: 16px; line-height: 1.8; letter-spacing: 0.5px;} .internalContent ul {margin:30px 0 0 20px; padding:0;} .internalContent ul li {position: relative; margin:0; padding: 0 0 10px 20px; line-height: 1.2; font-size: 16px;} .internalContent ul li:before {content:''; position: absolute; top: 8px; left: 0; display: block; margin:0; padding:0; width: 10px; height: 10px; background-color: #7d179f;} .postInfo p {margin:0; padding:5px 0 20px; font-size: 22px; color: #000; letter-spacing: 1px;} .postInfo p span {color: #000;} .socialMediaCore {padding: 30px 0 10px 0;} .socialMediaCore p {margin: 0 0 0; font-size: 17px; line-height: 1; letter-spacing: 0px;} .internalContent ul {margin: 30px 0 0 -20px;} .bannerQuadrado {text-align: center !important;} .bannerQuadrado img {width: 100% !important; height: auto !important;} .podeInteressar {display: none;} .featureImageBox .photoCredits {position: static;} .sidebar .span12 .wp-post-image {margin: 0 10px 10px 0;} .archivePosts .archivePostsInner {margin:0; padding: 0 0 0 120px; width: 100%; min-height: 130px; background-repeat: no-repeat; background-size: 100px auto; background-position: left top;} .previousEditions { height: 5036px; } .page-template-page-fullwidth .internalContent h1.capa::before {display: none;} .page-template-page-fullwidth .internalContent h1.capa {font-size: 54px; letter-spacing: 10px;} .archivePosts {margin:1%; padding: 0; width: 98%; height: auto;} .archivePosts .archivePostsInner {margin:0; padding: 0; width: 35%; height: 170px; background-repeat: no-repeat; background-size: cover; background-position: center center;} .archivePosts .archivePostsInner .gradient {position:absolute; right: 0; top: 0; width: 65%; margin:0; padding: 0 0 0 20px;} .archivePosts .archivePostsInner .gradient h3 {margin:0; padding: 0 0; font-size: 16px; font-weight: 400; line-height: 1.2; color: #7d179f;} .archivePosts .archivePostsInner .gradient h3 small {display: inline-block; margin:10px 0 0 0; padding: 3px 3px 6px; width: auto; font-size: 9px; line-height: 10px; font-weight: 300; color: #3f3e3e; text-transform: uppercase; letter-spacing: 1px;} .archivePosts .archivePostsInner .gradient h3 a {color: #7d179f; display: block;} .archivePosts:nth-of-type(1), .archivePosts:nth-of-type(2), .archivePosts:nth-of-type(3), .archivePosts:nth-of-type(4), .archivePosts:nth-of-type(5) {width: 100% !important; height: 260px;} .archivePosts:nth-of-type(1) .archivePostsInner, .archivePosts:nth-of-type(2) .archivePostsInner, .archivePosts:nth-of-type(3) .archivePostsInner, .archivePosts:nth-of-type(4) .archivePostsInner, .archivePosts:nth-of-type(5) .archivePostsInner {width: 100%; height: 260px;} .single .internalContent h1 span { font-size: 20px; letter-spacing: 1px; line-height: 1.2; margin: 10px 0 0 0; } .alignleft {float: none; clear: both; display: block; margin: 0 auto 1.75em;} .alignright {float: none; clear: both; display: block; margin: 0 auto 1.75em;} .aligncenter {clear: both; display: block; margin: 0 auto 1.75em;} .downloadApp {margin: 20px 0; padding: 0;} .downloadApp .span12 {margin:0; padding: 40px 20px !important; width: 90% !important; text-align: center;} .downloadApp .span12 h5 {margin:0; padding:0; color: #fff; font-size: 38px; font-weight: 300; text-transform: uppercase; line-height: 44px;} .downloadApp .span12 img {margin:10px auto; float: none;} footer a.button {display: block; margin:38px auto 60px;} footer h5 {margin:0;} footer .ui-accordion-header-active:after {content:''; display: inline-block; margin:0 0 2px 10px; padding:0; width: 14px; height: 14px; background: url('images/accordion-minus.png') no-repeat center center;} footer .ui-accordion-header-collapsed {margin-bottom: 10px;} footer .ui-accordion-header-collapsed:after {content:''; display: inline-block; margin:0 0 2px 10px; padding:0; width: 14px; height: 14px; background: url('images/accordion-plus.png') no-repeat center center;} } /* end media for smartphone */ @media (min-width : 230px) and (max-width : 365px) { .container {margin: 0; padding: 0 1.2rem !important;} } /* iPads (portrait) ----------- */ @media (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { body {overflow-x: hidden;} .container {margin: 0; padding: 0 10px;} .menu-main-menu-container {display: none;} #hamburgericonmenuwrapper {display: block !important;} header .desktop .social-menu {display: none;} /* ============================================================================ HEADER STYLES ==============================================================================*/ header {margin: 30px 0 0 0; text-align: center;} header .logo {display: none;} nav .mobile {display: block;} nav .social-menu {margin: 7px 0 0px 0; float: left;} nav .social-menu li a {color: #000; font-size: 0; width: 31px; height: 31px !important; background-color: #000 !important; border-radius: 50%; overflow: visible; border: 1px solid #fff; text-align: center;} nav .social-menu li a i {margin:5px 0 0 0; padding:0; font-size: 20px; color: #fff;} .topDate {display: none;} header .previsaoTempo { display: none;} /* ============================================================================ MAIN MENU STYLE ===============================================================================*/ nav {margin:0; padding:0; height: 45px; background-color: #000;} #searchform {width: 190px; float: right;} #searchform input[type="text"] {margin:0; padding:12px 2px 10px !important; font-size: 16px !important;} #searchform input[type="submit"] {margin:10px 0 0 0;} .grenal {margin:0; padding:10px 0 !important; } .grenal h2.capa {letter-spacing: 10px;} .grenal h2.capa::before {width: 40%;} .grenal h2.capa span {padding-left: 10px; width: 60% !important;} .inter .span6:nth-of-type(1) {padding-right: 4px !important;} .inter .span6:nth-of-type(2) {padding-left: 4px !important;} .gremio .span6:nth-of-type(1) {padding-right: 4px !important;} .gremio .span6:nth-of-type(2) {padding-left: 4px !important;} .grenal .container {padding: 0 !important;} .grenal .span6 {margin:0 !important; padding: 0 !important; width: 50% !important;} .span6.inter .button {font-size: 14px; letter-spacing: 2px; margin-right: 5px;} .span6.gremio .button {font-size: 14px; letter-spacing: 2px; margin-right: 5px;} .jornaltvpampa .span8 img {height: 279px;} .jornaltvpampa .span8 ul li a {width: 260px;} .jornaltvpampa .span8 ul {margin: 35px 0 0 0;} .ultimas .span4 {width: 50% !important;} .sidebar .span12 .wp-post-image {margin: 20px 0 10px 0; width: 115px; float: none;} #post-nav .post-previous img {margin: 14px 10px 10px 0;} #post-nav .post-next img {margin: 14px 10px 10px 0;} #post-nav .post-next h6 {text-align: right;} footer a.button {font-size: 24px; height: 50px; line-height: 50px; width: 220px;} } /* end iPads (portrait) ----------- */ /* iPads (landscape) ----------- */ @media (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { body {overflow-x: hidden;} .container {padding:0 20px;} header .primary-menu li a {font-size: 20px;} .grenal h2.capa {letter-spacing: 10px;} .ultimas .span4 {padding: 0px 5px 10px 0; height: 200px;} .ultimas .span4 h3 {padding: 0 10px 0 0;} .ultimas .span4 .wp-post-image {margin: 0 10px 40px 0;} } /* end iPads (landscape) ----------- */