@charset "utf-8";
@font-face {font-family: "Sen_Regular"; src: url("Sen-Regular.ttf");}
@font-face {font-family: Azonix; src:url("Azonix.otf");}
@font-face {font-family: ACaslonPro-Regular; src: url("ACaslonPro-Regular.otf");}
body {margin: 0; background:#f4f4ff; font-family: "Sen_Regular";}
/* ========================= PARA DESKTOPS (1400px ou mais) ========================= */
@media screen and (min-width:1401px){
.topo{width: 100%; display: flex; padding: 10px 0px 10px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px;} 
.topo2{display: none;}
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 35%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 1%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width: 52%;  font-size: 28px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{width: 7%; margin-right: 2%; display: flex; justify-content: space-between; justify-items: center; align-items: last baseline;}
.menu{width: 70%; margin-left: 15%; display: flex; margin-top: 10px; justify-content: space-between;}
.link1{width: 20%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 18px; border-radius: 12px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 10px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 80%; background: #FFF; margin-left: 10%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 80%; background: #FFF; margin-left: 10%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; margin-top: 10px;}
.conteudo-igreja-foto{width: 40%;}
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 300px; max-height: 300px;}
.conteudo-igreja-texto{width: 60%; text-align: center; padding-top: 50px;}
}
/* ========================= PARA DESKTOPS (1400px até 961px) ========================= */
@media screen and (max-width:1400px){
.topo{width: 100%; display: flex; padding: 10px 0px 10px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px;} 
.topo2{display: none;}
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 25%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 1%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width: 62%;  font-size: 28px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{width: 10%; margin-right: 2%; display: flex; justify-content: space-between; justify-items: center; align-items: last baseline;}
.menu{width: 70%; margin-left: 15%; display: flex; margin-top: 10px; justify-content: space-between;}
.link1{width: 24%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 16px; border-radius: 12px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 10px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 80%; background: #FFF; margin-left: 10%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 80%; background: #FFF; margin-left: 10%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; margin-top: 10px;}
.conteudo-igreja-foto{width: 40%;}
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 300px; max-height: 300px;}
.conteudo-igreja-texto{width: 60%; text-align: center; padding-top: 50px;} 
}
/* ========================= PARA TABLET EM PAISAGEM (960px até 769px) ========================= */
@media screen and (max-width:960px){
.topo{width: 100%; display: flex; padding: 5px 0px 5px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px;} 
.topo2{display: none;}
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 16%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 1%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width:62%;  font-size: 24px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{width: 12%; margin-right: 2%; display: flex; justify-content: space-between; justify-items: center; align-items: last baseline;}
.menu{width: 90%; margin-left: 5%; display: flex; margin-top: 10px; justify-content: space-between;}
.link1{width: 24%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 16px; border-radius: 12px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 10px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 90%; background: #FFF; margin-left: 5%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 90%; background: #FFF; margin-left: 5%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; margin-top: 10px;}
.conteudo-igreja-foto{width: 40%; }
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 280px; max-height: 280px;}
.conteudo-igreja-texto{width: 60%; text-align: center; padding-top: 50px;}   
}
/* ========================= PARA TABLET EM RETRATO (768px até 481px) ========================= */
@media screen and (max-width:768px){
.topo{width: 100%; display: flex; padding: 5px 0px 5px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px;} 
.topo2{display: none;}
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 12%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 1%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width:72%;  font-size: 21px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{display: none;}
.menu{width: 80%; margin-left: 10%; display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: space-between;}
.link1{width: 45%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 16px; border-radius: 12px; margin-bottom: 5px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 5px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; flex-wrap: wrap; margin-top: 10px;}
.conteudo-igreja-foto{width: 100%; }
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 280px; max-height: 280px;}
.conteudo-igreja-texto{width: 100%; text-align: center; padding-top: 20px;} 
}
/* ========================= PARA SMARTPHONES EM PAISAGEM (480px até 321) ========================= */
@media screen and (max-width:480px){
.topo{display: none;} 
.topo2{width: 100%; display: flex; padding: 5px 0px 5px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px; line-height: 22px;} 
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 20%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 2%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width:72%; font-size: 21px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{display: none;}
.menu{width: 97%; margin-left: 1%; display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: space-between;}
.link1{width: 49%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 14px; border-radius: 12px; margin-bottom: 5px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 5px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; flex-wrap: wrap; margin-top: 10px;}
.conteudo-igreja-foto{width: 100%; }
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 280px; max-height: 280px;}
.conteudo-igreja-texto{width: 100%; text-align: center; padding-top: 20px;}  
}
/* ========================= PARA SMARTPHONES EM RETRATO (320px ou menos) ========================= */
@media screen and (max-width:320px){
.topo{display: none;} 
.topo2{width: 100%; display: flex; padding: 5px 0px 5px; background: #020024; background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); box-shadow:#999 2px 3px 6px 2px; line-height: 22px;} 
.link{text-decoration: none; color: #FFF;}
.link:hover{color: rgb(252, 181, 1);}
.topo_icone{width: 20%; text-align: center; display: flex; align-items: center; justify-content: right; margin-right: 2%;}
.imagem-logo{width: 50px; height: 50px;}
.topo_texto{width:72%; font-size: 21px; justify-items: center; display: flex; align-items: center; justify-content: left; flex-grow: 1; color: #FFF; font-family: ACaslonPro-Regular; padding-top: 5px;}
.redes{display: none;}
.menu{width: 97%; margin-left: 1%; display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: space-between;}
.link1{width: 49%; text-decoration: none; background: #0645A1; color: #FFF; padding: 10px 0 10px 0; text-align: center; font-size: 14px; border-radius: 12px; margin-bottom: 5px;}
.link1:hover{color:#FFF; background-color: #070661; box-shadow:#999 2px 3px 6px 2px;}
.menu_0{width: 100%;}
.conteudo{width: 100%; margin-top: 5px; display: flex; flex-wrap: wrap;}
.conteudo-texto{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em;}
.conteudo-igreja{width: 98%; background: #FFF; margin-left: 1%; border-radius: 12px; padding: 10px; text-align: center; font-size: 1em; display: flex; flex-wrap: wrap; margin-top: 10px;}
.conteudo-igreja-foto{width: 100%; }
.link2{text-decoration: none; font-size: 0.8em;}
.foto-igreja{max-width: 280px; max-height: 280px;}
.conteudo-igreja-texto{width: 100%; text-align: center; padding-top: 20px;}   
}