@charset "utf-8";
/* CSS Document */

/*
*  html5resetcss
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,
cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent
};
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block
}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
ins{
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

:root {
	--space_5: .5rem;
	--space: 1rem;
	--space-2: 2rem;
	--space-1_5: 1.5rem;
	--space-4: 4rem;
}

body{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	background-color: #e8e8e8;
	margin: 0px;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	padding: var(--space-2);
}

#topo {
	max-width: 1160px;
	background-color: #ffffff;
	margin: 0 auto;
	overflow: auto;
	padding: var(--space-2);
	display: flex;
}
#logo img {
	width: 100%;
}

#menu {
  width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);	
}


#menu a {
	font-size: 14pt;
	color: #000000;
	font-weight: 700;
}

#conteudo {
	max-width: 1210px;
	margin: var(--space-2) auto;
	display: flex;
	gap: var(--space-2);
}

#conteudo_esquerda {
  width: 100%;
	max-width: 1024px;
	background-color: #ffffff;
	padding: var(--space-2);
	box-sizing: border-box;
}

#conteudo_direita {
  display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 375px;
}

#social, #puritanos {
  background-color: #ffffff;
	padding: var(--space-2);
}

.conteudo_titulo {
  font-size: 15pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
	padding: var(--space) 0;
}

.conteudo_subtitulo {
	font-size: 13pt;
	font-weight: 650;
	color: #000000;
	padding: var(--space-2) 0 var(--space_5);
}

.conteudo_item {
	font-size: 13pt;
	font-weight: 400;
	color: #000000;
	padding: var(--space_5) 0 0 var(--space);
}

#texto {
	font-size: 13pt;
	font-weight: 400;
	color: #222;
	padding-top: 40px;
	padding: var(--space-2) var(--space) 0;
	text-indent: 35.4pt;
	text-align: justify;
}

.social-icons {
	margin-top: var(--space-2);
	height: 45px;
	display: flex;
	gap: var(--space-2);
}
.social-icons img{
	width: 40px;
}
#os_puritanos {
	margin-top: 16px;
	margin-left: -8px;
}

.shadow {
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
}

.radius {
	border-radius: 8px
}

a{
	text-decoration: none;
	color: #000000;
}
a.link_link {
	text-decoration: underline;
}

@media screen and (max-width: 1024px) {
	:root {
		--space_5: .375rem;
		--space: .75rem;
		--space-2: 1.5rem;
		--space-1_5: 1.125rem;
		--space-4: 3rem;
	}
	#topo {
		max-width: unset;
		gap: var(--space-2);
		flex-direction: column;
	}
	#logo img {
		width: 4rem;
	}
	#menu {
		flex-wrap: wrap;
	}
	#conteudo {
		flex-direction: column;
		max-width: unset;
	}
	body .mobile-center {
		text-align: center;
		margin: 0 auto;
	}
	body #lista_salmos {
		padding-top: var(--space-4);
	}
}