/* Theme Name: Rádio Continental 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: 'Montserrat', sans-serif; color: #030303; 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 {color: #000;} h1, h2 {font-weight: 900; line-height: 1; font-family: 'Oswald', sans-serif;} h1 {font-size: 60px; } h2 {font-size: 40px;} h3 {font-size: 24px; color: #cc9933; text-align: left; font-weight: 800;} h4 {font-size: 22px; color: #cc9933; text-align: left;} h5 {font-size: 20px; color: #cc9933; text-align: left;} h6 {font-size: 18px; color: #cc9933; text-align: left;} p {margin: 0 0 2.3rem !important; padding:0; font-size: 15px; line-height: 1.5; text-align: justify; font-weight: 500;} dfn, cite, em, i {font-style: italic;} blockquote {margin:0; padding:0; z-index: 10; color: #fff;} 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: #cc9933;} 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: #000;} :-moz-placeholder {color: #000;} ::-moz-placeholder {color: #000; opacity: 1;} :-ms-input-placeholder {color: #000;} input {line-height: normal;} label {display: block; margin:10px 0 0 0; padding:0; font-size: 16px !important; color: #0a2342; 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: 2px 30px; width: auto; text-align: center; color: #fff; background-color: #cc9933; font-size: 22px; text-transform: uppercase; font-weight: 700; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; border: 0 !important; font-family: 'Oswald', sans-serif; border-right: 3px solid #0a2342 !important; border-bottom: 3px solid #0a2342 !important; border-radius: 8px;} .gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer {margin: 6px 0 0; padding: 16px 0; text-align: right !important;} .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: #cc9933} 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('../mockselect.html') right center no-repeat; font-weight: 400; color: #000; width: 100%; line-height: 1; font-size: 16px !important; border: 4px solid #593319; 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: 4px 8px !important; background-color: #fff; color: #000; width: 100%; line-height: 1; font-size: 18px !important; border: 2px solid #0a2342; outline: 0; font-weight: 600;} 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: 3px solid #0a2342; outline: 0;} .gform_wrapper.gravity-theme .gfield textarea.large {height: 150px !important;} /* ============================================================================ GENERAL STYLES ===============================================================================*/ .container {margin: 0 auto; width: 100%; max-width: 1210px; position: relative;} section {padding: 0;} .desktop {display: block;} .mobile {display: none;} .adBox {text-align: center;} /* ============================================================================ HEADER STYLES ==============================================================================*/ header {margin:0 0 20px; padding: 10px 0; height: 100px;} header .container {position: relative;} header .logo {margin:0; padding:0; float: left; width:187px; height: 100px;} header .logo img {width: 100%;} @media (min-width : 230px) and (max-width : 767px) { header {display: none;} .logo {margin: -9px 0 0 10px; padding:0; width:100px; height: 40px;} .custom-logo {height: 40px; width: auto;} } .tools {margin:22px 0 0 0; padding:0; width: 79.5%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; justify-content: end; float: right;} header .menu-social-menu-container {margin:-6px 0 0 0; padding:0; display: inline-block; width: auto; float: right} .social-menu {margin: 0; padding:0; display: grid; grid-auto-flow: column; gap: 1rem; width: auto; justify-content: end;} .social-menu li {margin:0; padding:0; flex-grow: 0;} .social-menu li a {color: #0a2342; font-size: 0px;} .social-menu li a i {font-size: 28px;} .topDate {margin:0; padding:8px 0 0 0; font-size: 14px !important; font-weight: 600; line-height: 1; color: #0a2342;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .tools {margin-top: 45px; padding:0; grid-template-columns: 1fr 1fr;} .menu-social-menu-container {margin:0; padding:0; display: inline-block; width: 30%; float: right} .social-menu {margin: -28px 14px 0 0; gap: 0.5rem;} .social-menu li a {color: #0a2342; font-size: 0px;} } div[id^="owm-weather"] {margin: -2px 0 0 0; padding: 0; width: 228px; display: block; background-image: url('../gif/blank.gif'); height: 50px; color: #0a2342 !important;} .owmw-now .owmw-location-name {display: inline-block; width: auto; float: right; font-size: 14px !important; font-weight: 600; padding-top: 10px !important;} .owmw-now .owmw-main-symbol { text-align: center; margin: -16px 6px 0 0; padding: 0; float: left; height: 41px; width: 48px; display: block; } .owmw-medium .owmw-now svg { width: 100px !important; height: 85px !important; float: left; margin: -20px 21px 0 0; padding: 0; } .owmw-small .owmw-now .owmw-main-symbol.owmw-symbol-alt i, .owmw-small .owmw-now .owmw-main-symbol.owmw-symbol-alt div.owmw-symbol.climacon, .owmw-small .owmw-now .owmw-main-symbol.owmw-symbol-alt div.diw, .owmw-small .owmw-now .owmw-main-symbol.owmw-symbol-alt span.pe { font-size: 44px; } .owmw-now .owmw-main-temperature { font-size: 26px !important; margin: 0 0 0 !important; padding: 0 10px 0 0 !important; display: inline-block !important; width: auto !important; } #owm-weather-container-326-0-1 .owmw-now .owmw-main-temperature::after {font-size: 20px !important;} /* ============================================================================ SEARCH STYLE ==============================================================================*/ #search-btn {display: inline-block; margin: -9px 20px 0 0; padding: 0; width: 30px; height: 20px; cursor: pointer; font-size:28px; color: #0a2342; 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: #cc9933 url('../gif/blank.gif') no-repeat center center; } #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('../png/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;} @media (min-width : 230px) and (max-width : 767px) { #search-btn {position: absolute; top: 0px; right: 110px; margin:0; color: #0a2342;} .topDate {position: absolute; right: 20px; top: -62px; padding: 13px 0 0 0; text-align: right; color: #000;} .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: #cc9933;} } /* ============================================================================ MAIN MENU STYLE ===============================================================================*/ header .primary-menu {margin:4px 0 0 0; padding:0; display: flex; gap: 0.8rem; width: auto; justify-content: end; } header .primary-menu li {margin:0; padding:0; flex-shrink: 0; position: relative; z-index: 90;} header .primary-menu li a {display: block; margin:0; padding:4px 2px; color: #0a2342; font-size: 14px; font-weight: 500; line-height: 1; text-transform: uppercase;} header .primary-menu li.menu-item-has-children:active {} 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: 50; background-color: #0a2342; text-align: center;} 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; font-size: 12px; 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.current-menu-item a, header .primary-menu li .sub-menu li.menu-item-type-custom.current-menu-item a {} header .primary-menu li a:hover, header .primary-menu li .sub-menu li a:hover {background-color: #0a2342; color: #fff; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);} header .primary-menu li.current-menu-item .sub-menu li a {} 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 #cc9933; 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: #cc9933 ; -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: 75%; height: 100%; background-color: #0a2342; 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: 18px; 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 .logoMobile {margin: 0 0 15px 28px; width: 160px;} .menu-mobile-menu-container .menu-social-menu-container {margin:0; padding:0; display: inline-block; width: auto; float: left;} .menu-mobile-menu-container .social-menu-mobile {margin: -10px 0 0 28px; padding:0; display: flex; gap: 0.5rem; width: auto; justify-content: start;} .menu-mobile-menu-container .social-menu-mobile li {margin:0; padding:0; flex-grow: 0;} .menu-mobile-menu-container .social-menu-mobile li a {display: flex; margin:0 !important; padding:0 !important; color: #fff; font-size: 0px; justify-content: center; align-items: center; width: 30px; height: 30px !important; border-radius: 50%; border: 1px solid #fff; background-color: transparent;} .menu-mobile-menu-container .social-menu-mobile li a i {font-size: 18px;} } /* ============================================================================ HOME STYLE ==============================================================================*/ .hero {margin:0; padding:0 0 20px;} .home section {text-align: center;} .home section p {text-align: justify; margin-top: -8px !important;} .home h2 {margin:20px auto 40px; padding:0px 16px 16px 5px; border-radius: 12px; display: inline-block; width: auto; color: #fff; font-size: 35px; text-transform:uppercase; background-color: #0a2342; text-align: center; position: relative; z-index: 30; font-weight: 900; line-height: 1;} .home h2:before {content:''; display: block; position: absolute; bottom: 6px; right: 6px; z-index: -10; margin:0; padding:0; width: 100%; height: 100%; background-color: #cc9933; border-radius: 12px; } .quemSomosHome p {font-size: 15px;} .classicosHome {padding: 20px 0;} .programacaoHome h2 {margin-bottom: 80px;} .contatoHome {margin-top: 30px;} .contatoHome h2 {margin-bottom: 40px;} .contatoHome p {font-size: 20px; line-height: 2;} #gform_wrapper_1 {width: 75%; margin: 0 auto !important;} .contatoHome h3 {font-size: 20px; text-align: center; margin-top: -5px;} .page-id-342 h3 {font-size: 22px; text-align: center;} .loveSongs p {margin: 0 0 1rem !important;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .hero {padding:0;} .home h2 {font-size: 26px;} } .programacaoHome {min-height: 490px;} .sobreARadio {padding: 40px 0;} .sobreARadio p {font-size: 18px; line-height: 2;} @media (min-width : 230px) and (max-width : 767px) { .conhecaRS #slider ul li {width: 300px; height: 300px;} .sobreARadio {padding: 0 0 60px;} .sobreARadio p {text-align: justify;} } .sliderClassicos li:before, .sliderPlayer li:before {display: none !important;} .sliderClassicos {margin:0; padding:0; width: 100%; height: 300px;} /*.sliderClassicos div {width: 395px !important; height: 375px; text-align: left; position: relative !important;}*/ .sliderClassicos div article {margin:0 auto; padding:0; width: 220px; height: 220px; border: 5px solid #0a2342; background-position: center center; background-repeat: no-repeat; background-size: cover; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out;} .sliderClassicos div.slick-current article {margin:0 auto; padding:0; width: 280px; height: 280px; border: 5px solid #0a2342; background-position: center center; background-repeat: no-repeat; background-size: cover;} .sliderPlayer div h3 {color: #cc9933; font-weight: 900; text-align: center; margin-top: 0;} .sliderPlayer div {position: relative !important} .mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: #0a2342 !important; height: auto !important; margin: 0 !important; padding: 0 !important; } button.slick-arrow { margin: 0 auto; padding: 2px 10px; width: auto; text-align: center; color: #fff; background-color: #cc9933 !important; font-size: 0; text-transform: uppercase; border-right: 0 solid #0a2342 !important; border-bottom: 0 solid #0a2342 !important; border-radius: 0 !important; height: 30px; opacity: 1 !important; z-index: 9999 !important; } .slick-prev::before, .slick-next::before { opacity: 1 !important; font-size: 20px !important; display: inline-block !important; margin:-5px 0 0 0; } .slick-prev:hover::before, .slick-prev:focus::before, .slick-next:hover::before, .slick-next:focus::before { opacity: 1 !important; } .classicosHome {margin: 0 0 2rem;} .classicosHome .artistsPool {margin:0; padding:0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem;} .classicosHome .artistsPool article p {margin:0; padding:0; text-align: left;} .classicosHome .artistsPool article h3 {margin:0; padding:1rem 0; font-weight: 800; font-size: 18px; line-height: 1.2; text-align: center;} .classicosHome .hiddenArtists {} .abreFecha {text-align: right !important;} #target-1 { display:none; } .hide {display:none;} .hide-1-yes {display:none;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .classicosHome .artistsPool {grid-template-columns: 1fr 1fr; gap: 0.5rem;} .classicosHome {margin: 0 0 -30px; padding: 20px 0 0px;} .abreFecha {margin-bottom: 0; padding-bottom: 0;} .abreFecha button {padding: 2px 20px; font-size: 16px;} } .ourShows ul {margin:0 0 5rem; padding:0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;} .ourShows ul li {margin:0; padding:0; text-align: left; display: grid; grid-template-columns: 230px auto;} .ourShows ul li article {height: 190px; display: flex; justify-content: left; align-items: center;} .ourShows ul li h3 {margin:0; padding:0; font-weight: 800; font-size: 22px; line-height: 1.2; text-transform: uppercase;} .ourShows ul li h3 small {display: block; margin:15px 0 0 0; padding:0; font-size: 18px; font-weight: 400; text-transform: none; text-align: center;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .ourShows {padding: 0 !important;} .home .ourShows h2 {margin: 20px auto 10px !important;} .ourShows ul {grid-template-columns: 1fr; gap: 0; margin: 0 0 0rem;} .ourShows ul li {grid-template-columns: 100%; text-align: center;} .ourShows ul li article {height: auto; display: flex; justify-content: center; align-items: center;} .ourShows ul li h3 {text-align: center;} .ourShows ul li h3 small {margin: 2px 0 0 0; padding: 0;} .ourShows ul li p {text-align: center; margin: 0 0 1rem !important;} .ourShows ul li img {margin:20px auto 4px; width: 60%;} } .viewAll {margin: 30px 0; padding:0; text-align: right} .viewAll a {display: block; float: right; margin: 0; padding: 8px; width: 145px; height: 43px; text-align: center; color: #fff; background: #42210b url('../viewall-bg.html') no-repeat center center; font-size: 15px; text-transform: uppercase; font-weight: 700;} @media (min-width : 230px) and (max-width : 767px) { .contatoHome h3 {font-size: 18px;} } /* ============================================================================ 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('../png/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: 20px 0 80px; text-align: center;} .internalContent h1 {margin:20px auto 20px; padding:0px 16px 16px 5px; border-radius: 12px; display: inline-block; width: auto; color: #fff; font-size: 35px; text-transform:uppercase; background-color: #0a2342; text-align: center; position: relative; z-index: 30; font-weight: 900; line-height: 1;} .internalContent h1:before {content:''; display: block; position: absolute; bottom: 8px; right: 8px; z-index: -10; margin:0; padding:0; width: 100%; height: 100%; background-color: #cc9933; border-radius: 12px; } .archive h1, .blog h1 {margin:20px auto 20px; padding:0px 16px 16px 5px; border-radius: 12px; display: inline-block; width: auto; color: #fff; font-size: 35px; text-transform:uppercase; background-color: #0a2342; text-align: center; position: relative; z-index: 30; font-weight: 900; line-height: 1;} .archive h1:before, .blog h1:before {content:''; display: block; position: absolute; bottom: 8px; right: 8px; z-index: -10; margin:0; padding:0; width: 100%; height: 100%; background-color: #cc9933; border-radius: 12px; } @media (min-width : 230px) and (max-width : 767px) { } /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) {.internalContent .gridContainer {grid-template-columns: 1fr;} } .internalContent p {margin: 0 0 1.5rem !important; padding:0; font-size: 16px; line-height: 1.6 !important;} .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: #cc9933;} .gform_wrapper ul {margin:0; padding:0;} .gform_wrapper ul li {margin:0; padding: 0;} .postInfo p {margin: 1rem !important; font-size: 14px !important; text-align: center;} @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;} .page-id-24 .internalContent p {margin: 0 0 30px; padding:0; font-size: 20px; line-height: 2.4; font-weight: 500; text-align: left;} } /* ============================================================================ PROGRAMAÇÃO ==============================================================================*/ #prog .tabHeads {margin:0 !important; padding:0 !important; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; list-style: none; position: relative; background-color: #f0f0f0;} .tabHeads li {margin: 0 auto; padding:30px 40px !important; font-size: 16px; color: #000; font-weight: 500;text-transform: uppercase; line-height: 18px;} .tabHeads li a {color: #000;} .tabHeads li.ui-tabs-active {background-color: #0a2342;} .tabHeads li.ui-tabs-active a {color: #fff;} .tabHeads li:before {display: none !important;} .jcarousel-wrapper {margin-top: 30px; padding: 20px 0 40px; position: relative; background-color: #ececec;} /** Carousel **/ .jcarousel {margin:0 auto; position: relative; overflow: hidden; width: 90%; } .jcarousel ul { width: 10000em; position: relative; list-style: none; margin: 0; padding: 0; } .jcarousel li { width: 250px; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .jcarousel li h4 {margin:0; padding:0 50px; font-size:16px; line-height: 1.5; font-weight: 700; color: #000; text-transform: uppercase; text-align: center; font-family: 'Montserrat', sans-serif;} .jcarousel li h4 small {display: block; margin:0; padding:0 0 10px; font-size: 22px; font-weight: 300;} .jcarousel li h4 .noAr {display: block; margin:0 20px 20px 0; color: #fff; padding:0 8px; width: 110px; font-weight: 300; font-family: 'Montserrat', sans-serif; font-size: 20px; background-color: #E00109;} .jcarousel li h4 .seguir {display: block; margin:0 auto 20px; color: #fff; padding:4px 8px; width: 160px; font-weight: 300; font-family: 'Montserrat', sans-serif; font-size: 20px; background-color: #33C25B;} .jcarousel li:before {display: none !important;} /** Carousel Controls **/ .jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: 40%; margin-top: -26px; width: 44px; height: 44px; text-align: center; border-radius: 50%; text-decoration: none; } .jcarousel-control-prev {background:#cc9933 url('../png/arrow-left-big.png') no-repeat center center !important; left: 10px; background-size: 15px auto !important; } .jcarousel-control-next {background:#cc9933 url('../png/arrow-right-big.png') no-repeat center center !important; right: 10px; background-size: 15px auto !important; } @media (min-width : 230px) and (max-width : 767px) { #prog .tabHeads {grid-template-columns: 1fr 1fr; justify-content: center;} .tabHeads li {padding:14px 42px !important; font-size: 16px; color: #000;} } .novidades ul {margin:0; padding:0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;} .novidades ul li {margin:0; padding:0; text-align: center;} .novidades ul li:before {display: none;} .novidades ul li img {margin:0 auto 10px; border: 5px solid #0a2342;} .novidades ul li h3 {margin:0 auto; padding:0 0 30px; font-weight: 600; font-size: 18px; text-align: center; line-height: 1.2; color: #cc9933;} .novidades ul li h3 a {color: #cc9933;} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { .novidades ul {grid-template-columns: 1fr; gap: 1rem;} .novidades ul li h3 {font-size: 16px; padding:0; } .contatoHome {margin-top: 0;} } /* ============================================================================ PLAYLIST ============================================================================== .ai-wrap {margin:0; padding: 0 0 190px 0; display: grid; grid-template-columns: 42% 58%; background-color: #fff !important;color: #0a2342;} .ai-wrap .ai-track {height: 90px; background: #9e9e9e url(images/speakier-icon.png) no-repeat 97% center; background-size: 40px auto; color: #fff;} .ai-wrap .ai-track-thumb {width: 90px; max-height: 90px;} .ai-wrap .ai-track-thumb img {width: 90px; max-height: 90px;} .ai-scroll-wrap:before {position: absolute; top:0; left:0; width: 98%; z-index: 9999; content: 'Clique e Ouça'; display: block; margin:0; padding: 2rem 2rem 2rem 6.3rem; background:#0a2342 url('images/speakier-icon.png') no-repeat 30px center; background-size: 40px auto; font-size: 32px; color: #fff; text-align: left;} .ai-wrap .ai-scroll-wrap .ai-tracklist {margin-top: 6.5rem;} .ai-wrap .ai-audio-control { background-color: #cc9933; } .ai-wrap .ai-audio-control:hover, .ai-wrap .ai-audio-control:focus { background-color: #cc9933; } .ai-wrap .ai-track-progress { background-color: #cc9933; } .ai-wrap .ai-volume-bar.ai-volume-bar-active::before { background-color: #cc9933; } .ai-wrap .ai-btn.ai-btn-active {background-color: #0a2342; border-color: #cc9933 !important;} .ai-wrap .ai-track:hover, .ai-wrap .ai-track.ai-track-active { background-color: #cc9933; } .ai-wrap .ai-footer a { color: #cc9933; } .ai-wrap .ai-footer a:hover { color: #cc9933; } .ai-wrap .ai-scroll-wrap>div:last-child div { background-color: #cc9933 !important; } .ai-wrap .ai-control-wrap {display: block !important; max-height: 515px;} .ai-wrap .ai-control-wrap-controls {margin: 0; padding:1rem 0; width: 235%; display: grid; grid-template-columns: 1fr 1fr; border-top: 4px solid #0a2342; border-bottom: 4px solid #0a2342;} .ai-audio-controls-meta button { border-right: 2px solid #0a2342 !important; border-bottom: 2px solid #0a2342 !important; } button.ai-audio-control {margin: -35px auto 0 !important; } .ai-wrap .ai-audio-controls-main {width: 100%; margin:1rem auto 0; height: 100px;} .ai-wrap .ai-btn {margin-right: 6px !important; border-radius: 50%; min-width: 36px; max-width: 36px; min-height: 36px; width: 36px; height: 36px; background-color: #cc9933; } .ai-wrap .ai-track-time {font-size: 16px; width: 60px;} .ai-wrap .ai-audio-controls-progress {margin-bottom: 0; padding: 1rem 0 0 0;} .ai-wrap .ai-audio-control {width: 80px; height: 80px;} .ai-wrap .ai-audio-control svg {height: 40px; left: 6px; top: 4px;} .ai-audio-volume-control-btns {margin:0; padding:0; display: grid !important; grid-template-columns: 1fr 1fr !important;} .ai-wrap .ai-audio-volume-control-btns .ai-btn {height: 36px;} .ai-wrap .ai-volume-bar {background-color: #0a2342;} .ai-wrap .ai-control-wrap-thumb {width: 100%; text-align: left;} .ai-wrap .ai-control-wrap-thumb img {margin-top: 20px; width: 95.3%;} .ai-with-typography .ai-track-title {margin: 0 0 0.5rem !important; font-size: 30px;} .ai-with-typography .ai-track-subtitle {margin:0; padding: 0;font-size: 40px; color: #cc9933; font-weight: bold;} .ai-wrap .ai-audio-controls-meta {justify-content: left; margin-top: -16px;} .ai-wrap .ai-track-name {font-size: 22px;} .ai-wrap .ai-track-progress-bar {height: 36px; background-color: #0a2342;} .ai-wrap .ai-audio-volume-bars {display: none; float: none; margin-right: 6px; height: 36px; margin-top: -42px;} .ai-wrap .ai-btn-repeat {display: none !important;} .ai-wrap .ai-btn {font-size: 16px;} .ai-wrap .ai-btn svg {height: 14px;} .ai-wrap .ai-audio-volume-control-btns .ai-btn svg {height: 16px;} .ai-wrap .ai-audio-volume-control-btns .ai-btn {font-size: 18px;} .ai-wrap .ai-audio-volume-control-btns .ai-btn:last-child {margin-top: 0;} */ .ai-wrap {border-radius: 10px; background: #623a25; background: -moz-linear-gradient(top, #623a25 0%, #031318 100%); background: -webkit-linear-gradient(top, #623a25 0%,#031318 100%); background: linear-gradient(to bottom, #623a25 0%,#031318 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#623a25', endColorstr='#031318',GradientType=0 );} .ai-wrap .ai-track-progress-bar {background-color: #8c8581; height: 4px;} .ai-wrap .ai-track {margin: 0 0 0.2rem; height: 60px; background-color: #4a4a48; border-radius: 0 10px 10px 0;} .ai-wrap .ai-track:hover, .ai-wrap .ai-track.ai-track-active {background: #1f040b url('../png/active-track-button.png') no-repeat 98% center; background-size: 30px auto;} .ai-wrap .ai-track-name {font-size: 20px; font-weight: 700;} .ai-wrap .ai-track-thumb {width: 60px;} .ai-wrap .ai-track-thumb img {width: auto;} .ai-wrap .ai-audio-controls-progress {margin-bottom: 0; margin-top: 20px;} .ai-wrap .ai-audio-control, .ai-btn {border: 0 !important;} .ai-audio-volume-bars {display: none;} .ai-wrap .ai-audio-control {width: 35px; height: 35px; position: absolute; left: 30%; top: 67px;} .ai-wrap .ai-audio-controls-meta {width: 50%; margin: -70px 0 0 35%;} .ai-wrap .ai-btn {background-color: #e6215f; width: 35px !important; height: 35px !important; border-radius: 50%;} .ai-with-typography .ai-track-subtitle {font-size: 24px;} .ai-with-typography .ai-track-title {font-size: 24px; margin: 0 0 1rem !important;} .ai-with-typography .ai-track-title span {font-weight: 600 !important;} .ai-wrap .ai-track-info {padding-left: 0; background-image: url('../png/logo.png'); background-repeat: no-repeat; background-position: 98% 0; background-size: 190px auto;} .ai-wrap .ai-audio-volume-control-btns {display: grid; grid-template-columns: 1fr 1fr; height: 100%;} .ai-wrap .ai-audio-control svg {height: 18px; left: 2px; top: 0px;} .ai-wrap .ai-btn svg {height: 18px; left: 0; top: 2px;} .ai-wrap .ai-audio-volume-control-btns .ai-btn svg {height: 18px;} .ai-wrap .ai-audio-controls-meta .ai-btn {margin-right: 12px;} .ai-wrap .ai-audio-volume-control-btns .ai-btn:last-child {margin-top: 0px;} .ai-wrap .ai-scroll-wrap .ai-tracklist {margin-right: 30px;} .ai-wrap .ai-scroll-wrap {position: relative;} .ai-wrap .ai-scroll-wrap > div:last-child {background-color: #757b7d;} .ai-wrap .ai-scroll-wrap:before {content:''; display: block; position: absolute; top:0; right: 1px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #fff;} .ai-wrap .ai-scroll-wrap:after {content:''; display: block; position: absolute; bottom:0; right: 1px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #fff;} .ai-wrap .ai-scroll-wrap > div:last-child {top: 10px !important; height: 96%;} /* ============================================================================ APP Continental ==============================================================================*/ .downloadApp {margin:0; padding: 30px 0 60px; text-align: center;} .downloadApp article {margin: 0 5%; padding: 20px 40px; width: 90%; background-color: #cc9933; color: #fff;} .downloadApp article h5 {margin:0; padding:0; color: #fff; font-size: 34px; letter-spacing: 4px; font-weight: 900; text-transform: uppercase; line-height: 50px; font-family: 'Oswald', sans-serif;} .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%;} .downloadApp article img {margin:4px 2px; float: none;} .downloadApp article h5 {font-size: 34px;letter-spacing: 2px; text-align: center;} .downloadApp article h5 span {display: block;} } /* ============================================================================ FOOTER ==============================================================================*/ footer {margin:0; padding:20px 0 0; text-align: left; background-color: #0a2342; } footer .container {display: grid; grid-template-columns: 34% 66%; gap: 1rem;} footer article:first-of-type {padding-top: 20px; padding-right: 50px; text-align: center;} footer h5 {margin:0; padding: 0 0 15px 0; font-size: 20px; text-align: left; color: #fff; font-weight: 900; text-transform: uppercase;} footer p {margin:0; padding: 0; font-weight: 300; font-size: 14px; line-height: 1.6; color: #fff} footer .pampaFooter {margin: 0 auto 50px; width: 200px; filter: brightness(0) invert(1);} footer .logoFooter {width: 260px; filter: brightness(0) invert(1);} footer a.button {display: block !important; margin:0 auto; padding: 0 !important; background-color: #fff !important; color: #0a2342; font-size: 28px; height: 57px; line-height: 50px; width: 90% !important; font-weight:900; letter-spacing: 0; border: 2px solid #fff !important; white-space: nowrap !important; text-align: center; border-radius: 0;} footer a.button:hover {color: #fff !important; background-color: #0a2342 !important;} footer article:last-of-type {padding: 50px 100px 0 0; display: flex; justify-content: center; align-items: center;} footer article:last-of-type ul {margin:0; padding:0 0 40px 0;} footer article:last-of-type ul li {margin:0; padding: 0; display: inline-block; width: auto; font-size: 14px; font-weight: 300; line-height: 1.5;} footer article:last-of-type ul li:after {padding:0 6px; content: '|'; color: #fff;} footer article:last-of-type ul li:last-of-type:after {display: none;} footer article:last-of-type .social-menu {margin: 0px 0 0px; justify-content: left;} footer article:last-of-type .social-menu li a {width: 50px; height: 50px !important; color: #fff;} footer article:last-of-type .social-menu li a i {font-size: 38px;} footer article:last-of-type .social-menu li:after {display: none;} footer a {color: #fff;} footer address {margin:0; padding: 30px 0 40px 0; font-weight: 300; font-size: 14px !important; line-height: 1.8; color: #fff;} footer .copyrights {margin-top: 60px; background-color: #fff;} footer .copyrights p {margin:0 !important; padding:26px 0 20px; font-size: 14px; color: #010000; line-height: 1.2; letter-spacing: 1px; text-align: center;} @media (min-width : 230px) and (max-width : 767px) { footer .container {grid-template-columns: 1fr; gap: 0;} footer .logoFooter {width: 200px; margin-bottom: 10px;} footer article:first-of-type {padding-right: 0;} footer h5 {margin:0; padding: 0 0 6px 0; text-align: center;} footer .pampaFooter {margin: 10px auto 20px; width: 200px;} footer .menu-social-menu-container {margin:0 auto !important; float: none !important;} footer .copyrights p {letter-spacing: 0; line-height: 1.4;} footer .copyrights p span {display: block;} footer article:last-of-type {padding: 20px 0 0 0; text-align: center;} footer a.button {margin: 0 auto; padding: 0 !important; font-size: 22px; height: 40px; line-height: 36px; width: 200px !important;} footer article:last-of-type .social-menu {margin: 0; justify-content: left;} footer .copyrights {margin-top: 30px;} footer address {padding: 0 0 10px 0;} } /* .playerBar {position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; margin:0; padding: 10px 0 !important; background-color: rgba(192, 57, 43, 0.9); z-index: 9999; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;} .player {margin:0 auto; padding: 0; width: 100%; max-width: 1170px; text-align: left;} .player ul {margin:0; padding:0; display: inline-block; width: auto; list-style-type: none;} .player ul li {margin:0; padding:0; float: left; font-size: 38px; color: #fff; line-height: 1; font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: 2px; position: relative;} @media (min-width : 230px) and (max-width : 767px) {.player ul li {letter-spacing: 1px;}} .player ul li h4 {margin:0; padding:4px 0 0 0; font-size: 36px !important; color: #fff; font-weight: 400; line-height: 1; text-transform: uppercase;} .player ul li span {display: block; margin:13px 0 0 0; padding: 0; float: left; width:32px; cursor: pointer; font-size: 28px; color: #fff;} .player ul li small {clear: both; display: block; margin:5px 0 0 0; font-size: 12px; line-height: 1; float: left;} .player ul li:nth-of-type(2) div {margin:0 0 0 30px; padding: 0 0 0 8px; width: 44px; height: 44px; background-color: #fff; border-radius: 50%; cursor: pointer; font-size: 28px; text-align: center; color: #cc9933; display: flex !important; align-items: center !important; justify-content: center !important;} .player ul li i {margin:0 auto !important; padding: 0 !important; display: block;} .player ul li:nth-of-type(3) div {margin:6px 0 0 8px; padding: 0 0 0 2px; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; cursor: pointer; font-size: 14px; text-align: center; font-weight: 400 !important; color: #cc9933; display: flex !important; align-items: center !important; justify-content: center !important;} .player ul li:nth-of-type(4) div, .player ul li:nth-of-type(5) div {margin:6px 0 0 8px; padding: 0 0 0 2px; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; cursor: pointer; font-size: 14px; text-align: center; color: #cc9933; display: flex !important; align-items: center !important; justify-content: center !important;} .player p {margin:6px 0 0 0; padding:0; font-size: 28px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0; color: #fff;} .player p strong {font-weight: 700;} .noAr {margin:0; padding:8px 0 0 0; display: inline-block; width: auto; height: 40px; line-height: 40px; float: right;} @media (min-width : 230px) and (max-width : 767px) { .player ul li h4 {padding: 11px 0 0 8px; font-size: 18px !important;} .noAr {display: none;} } */ /* ============================================================================ NEW AUDIO PLAYER STYLE ==============================================================================*/ :root{ --card-bg: rgba(34,34,34,0.6); --card-blur: 12px; --card-radius: 14px 14px 0 0; --accent: #cc9933; --primary: #0a2342; --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;} } /* ============================================================================ 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: 122px; overflow-x: hidden;} section {padding:20px 0 0;} .container {margin: 0; padding: 0 8px;} .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: #cc9933; 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: #cc9933; 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: #cc9933;} .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: #cc9933;} .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: #cc9933; 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:4px auto;} 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('../png/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('../png/accordion-plus.png') no-repeat center center;} } /* end media for smartphone */ @media (min-width : 230px) and (max-width : 365px) { .container {margin: 0; padding: 0 10px !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) ----------- */