@import url(/css/norm-diogo-min.css);

/* SCREEN READERS       
***************************/
.skip-link   {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;   
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/* GLOBAIS
***************************/
html {
    background-color: rgba(0,150,215,1);
}

.site {
    font-family: 'Lato', sans-serif;
    color: white;
    line-height: 1.2;
}

    .site main {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

main {
    height: 100vh;
}

h1 {
    font-family: 'Audiowide', cursive;
    font-size: 1.6rem;
    color: white;
    margin: 1.5em 0;
    text-align: center;
}

/* NAV MENU
***************************/
nav {
    width: 100%;
}

.nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0,150,215,1);
    position: fixed;
    z-index: 1;
    width: 100%;
}

.nav-menu li a {
    text-decoration: none;
}

    .fas,
    .far {
        font-size: 1.25rem;
        color: white;
        padding: 0.5em;
        transition: all .6s;
    }

        .fas:hover,
        .far:hover {
            transform: rotate(360deg);
        }
    
    .lang-en {
        text-decoration: none;
        font-size: 1rem;
        font-family: 'Audiowide', cursive;;
        color: white;
        padding: 0.1em;
    }

        .lang-en:hover {
            border: 1px solid white;
            border-radius: 5px;
        }

    .nav-menu-opcoes {
        display: none;
        font-size: 1rem;
        color: white;
        font-family: 'Audiowide', cursive;
        text-decoration: none;
    }

/* HEADER
***************************/
    .logo {
            width: 100%;
    }

        .logo img {
            display: block;
            margin: 0 auto;
            width: 150px;
            height: 150px;
            position: relative;
            top: 3em;
            
        }

/* PLAYER E CHAT
***************************/
.player-marquee a {
    display: block;
    text-decoration: none;
    font-size: 1.35rem;
    font-family: 'Audiowide', cursive;
    color: white;
    padding: 0.5em 0;
    text-align: center;
    border-top: 2px solid white;
    border-bottom: 2px solid white ;
    margin: 1em 0;
}

.player-marquee a:hover {
    background-color: rgba(255,255,255,0.1);
}

#radio-player {
    display: none;
}

.player-marquee a marquee {
    font-size: 1.6rem;
    margin-top: 0.3em;
}

.widget-chat-flex {
    display: flex;
    flex-direction: column;
}

.widget-chat {
    width: 100%;
    margin: 2em 0 0 0;
}

    .widget iframe,
    .chat iframe {
        width: 90%;
        height: 17em;
    }

    .widget-chat marquee {
        display: block;
        font-size: 1.3rem;
        font-family: 'Audiowide', cursive;
        color: white;
    }

.chat {
    margin: 1em 0;
    text-align: center;
}

.picture {
    margin: 0 auto;
    text-align: center;
}

.picture img {
    width: 90%;
    max-width: 22em;
    max-height: 22em;
}

/* SOBRE
***************************/
.sobre {
    width: 100%;
}

.instagram {
    display: flex;
    justify-content: center;
    margin: 2em auto 1em auto;
}

    .sobre article {
        text-align: center;
    }

    .sobre article a {
        display: inline-block;
        font-family: 'Audiowide', cursive;
        font-size: 1.2em;
        margin-top: 1em;
        padding: 1em;
        border: 2px solid white;
        text-decoration: none;
        color: white;
    }

    .sobre article a:hover,
    .sobre article a:focus {
        background-color: white;
        color: rgba(0,150,215,1);
    }


/* AGENDA
***************************/
.agenda {
    width: 100%;
}

    .agenda ul {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

.programas {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 1px solid white;
}

    .programas span {
        margin: 0 0.4em 0 0;
        font-size: 0.8em;
    }

.agenda aside {
    text-align: center;
}

    .playlist {
            display: inline-block;
            font-family: 'Audiowide', cursive;
            font-size: 1.2em;
            margin: 3em 0 1em 0;
            padding: 1em;
            border: 2px solid white;
            background-color: rgba(0, 100, 200,0.5);
            text-decoration: none;
            color: white;
            text-align: center;
        }

        .playlist:hover,
        .playlist:focus {
            background-color:rgba(61, 181, 225,1);
        }

/* ARQUIVO
***************************/
.arquivo {
    width: 100%;
    margin: 2.5em 0;
}

    .arquivo ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .arquivo ul li {
            margin: 0.5em;
            padding: 0.2em;
            border: 2px solid white;
            opacity: 0.7;
        }

        .arquivo ul li:hover {
            opacity: 1;
        }

/* FOOTER
***************************/
footer {
    margin: 1.5em 0 0.5em 0;
    width: 100%;
    position: relative;
    bottom: 0;
}

    footer ul {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
    }

        .fab {
            font-size: 1.25rem;
            color: white;
            padding: 0.5em;
            transition: all .6s;
        }

        .fab:hover {
            transform: rotate(360deg);
        }
    
    footer p {
        text-align: center;
        font-size: 0.8rem;
    }

        footer p a {
            text-decoration: none;
            color: white;
        }


@media screen and (min-width:600px) {
    /* AGENDA
    ***************************/ 
        .programas span {
            margin: 0 1em 0 0;
            font-size: 0.85em;
        }
}


@media screen and (min-width:800px) {
    /* LANDING PAGE
    ***************************/
    .instagram {
        max-width: 1000px;
    }
    
    /* NAV MENU
    ***************************/
    .nav-menu-opcoes {
        display: inline-block;
    }

    /* PLAYER E CHAT
    ***************************/
    .player-marquee {
        width: 85%;
        margin: 0 auto;
    }

    .widget-chat-flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .widget iframe {
        width: 45.5em;
        height: 15em;
    }

    .chat {
        margin: 0 auto;
    }

    .chat iframe {
        width: 22em;
        height: 22em;
    }

    .picture img {
        display: inline-block;
        width: 22em;
        height: 22em;
    }

    /* AGENDA
    ***************************/
        .programas {
            width: 90%;
            margin: 0 auto;
        }
    
        .programas span {
            margin: 0 4em 0 0;
        }
}

@media screen and (min-width:1000px) {
    /* AGENDA
    ***************************/
    .programas span {
        font-size: 1.15em;
    }
}