/* GUIA DA DIVERSIDADE SEXUAL PCRJ
 * Desenvolvimento: Rodrigo Pereira Junho 2019
 * Folha de estilo */

@media screen and (max-width: 767px){
	/* DEFINIÇÕES GERAIS */
	body {
		width: 100vw;
		max-width: 100vw;
		margin: 0;
		padding: 0;
		font-family: 'Titillium Web';
		overflow-x: hidden;
	}

	img { max-width: 90vw; }
	
	.img-desktop { display: none; }

	table { margin-bottom: 20px; }
	
	a { font-weight: bold; text-decoration: none; }


	/* INDEX */
	.menu {
		display: flex;
		position: absolute;
		color: #FFF;
		flex-direction: column;
	}

	.menu_option {
		padding: 10px;
		width: calc(100vw - 20px);
		border-top: 1px #FFF solid;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text-transform: uppercase;
		font-weight: bold;
		text-decoration: none;
		color: #FFF;
	}

	.menu_option_ico {
		border-right: 2px solid #FFF;
		margin-right: 10px;
	}

	.menu_option_ico img { max-height: 8vw; }

	.menu1 { background-color: #CC1C24; }
	.menu2 { background-color: #D07400; }
	.menu3 { background-color: #D9AD00; }
	.menu4 { background-color: #0B9941; }
	.menu5 { background-color: #008ABF; }
	.menu6 { background-color: #4F4291; }

	.navbar {
		width: 100%;
		padding: 20px 0;
		display: flex;
		align-content: center;
		justify-content: space-between;
		background-color: #008ABF;
		border-bottom: 2px solid #FFF;
	}

	.navbar img { max-height: 10vw; }

	.navbar_sanduiche { padding-left: 3vw; }
	
	.navbar_prefeitura { display: none; }

	.navbar_logo {
		padding-right: 3vw;
		text-align: right;
	}

	.footer {
		background-color: #008ABF;
		border-top: 2px solid #FFF;
	}

	.footer_option {
		border-bottom: 2px solid #FFF;
		text-transform: uppercase;
		padding: 15px 0;
		text-align: center;
		color: #FFF;
		font-weight: bold;
		display: inline-block;
		width: 100vw;
		text-decoration: none;
	}

	.footer_grade {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		padding: 30px 0;
	}

	.footer_grade_ico {
		max-width: 50vw;
	}

	.footer_grade_ico img {
		max-width: 35vw;
	}


	/* INTRO */
	.intro {
		background-image: url('img/background-cores.png');
		background-position: center top;
		background-repeat: no-repeat;
		background-color: #008ABF;
		text-align: center;
		display: flex;
		flex-direction: column;
		padding-bottom: 60px;
	}

	.intro div { padding-top: 50px; }


	/* SEÇÕES */
	.content { padding: 10px; }

	.c_titulo {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		text-transform: uppercase;
		color: #FFF;
		padding: 15px;
	}

	.c_intro { font-weight: bold; }
	.c_img { text-align: center; }
	.c_img img { max-width: 80vw; }

	.content1 .c_intro { color: #CC1C24; border-bottom: 2px solid #CC1C24; }
	.content2 .c_intro { color: #D07400; border-bottom: 2px solid #D07400; }
	.content3 .c_intro { color: #D9AD00; border-bottom: 2px solid #D9AD00; }
	.content4 .c_intro { color: #0B9941; border-bottom: 2px solid #0B9941; }
	.content5 .c_intro { color: #008ABF; border-bottom: 2px solid #008ABF; }
	.content6 .c_intro { color: #4F4291; border-bottom: 2px solid #4F4291; }

	.c_subtitulo { font-size: 20px; text-transform: uppercase; font-weight: bold; }
	.c_h3 { font-size: 18px; font-weight: bold; }
	.c_h4 { font-size: 16px; font-weight: bold; }

	.content1 .c_subcolor, .content1 a { color: #CC1C24; }
	.content2 .c_subcolor, .content2 a { color: #D07400; }
	.content3 .c_subcolor, .content3 a { color: #D9AD00; }
	.content4 .c_subcolor, .content4 a { color: #0B9941; }
	.content5 .c_subcolor, .content5 a { color: #008ABF; }
	.content6 .c_subcolor, .content6 a { color: #4F4291; }

	.destaque {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 10px;
		justify-content: space-between;
		border: 2px solid;
		align-items: flex-start;
	}

	.destaque_img img { max-width: 20vw; margin-right: 10px; }
	.content2 .destaque { border-color: #D07400; color: #D07400; }
	.content3 .destaque { border-color: #D9AD00; color: #D9AD00; }
	.content4 .destaque { border-color: #0B9941; color: #0B9941; }
	.content6 .destaque { border-color: #4F4291; color: #4F4291; }

	.content3 th { background-color: #D9AD00; color: #FFF; text-transform: uppercase; }
	.content3 td { border: 2px solid #D9AD00; border-collapse: collapse; }
}