/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {

	/* COLORS */
  --blue-color:                  #2857A5;
  --red-color:                   #C63132;
  --yellow-color:                #FFFF00;
  --gray-color:                  #00B9F0;
  --white-color:                 #fff;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* MENÚ */

.menu {
	width: 100%;
	height: 56px;
	padding: 0% 2%;
	background: rgb(2,13,196);
  background: linear-gradient(80deg, rgba(2,13,196,1) 0%, rgba(0,198,235,1) 100%);
  position: fixed;
}

.banner {
	width: 100%;
	height: 240px;
	background-image: url(../../assets/img/top-mobile.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 2%;
}

.banner p {
	color: var(--white-color);
}

.banner a {
	color: var(--yellow-color);
}

/* APRESENTAÇÃO */

.present {
	width: 100%;
	max-height: default;
	display: flow-root;
	padding: 20px 10%;
}

.present h1 {
	font-family: "Montserrat", serif;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.quadros {
	width: 100%;
	max-height: default;
	display: flow-root;
}

.quadros img {
	width: 100%;
	height: auto;
	padding-bottom: 10px;
}

.astrologia {
	width: 100%;
	max-height: default;
	display: flow-root;
	text-align: center;
}

.astrologia h2 {
	font-family: "Montserrat", serif;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.astrologia p {
	font-size: 1.2rem;
	text-align: justify;
}

.astrologia .p2 {
	font-size: 1.2rem;
	text-align: center;
}

.foto {
	width: 100%;
	height: 214px;
	background-image: url(../../assets/img/astrologia-carmica-mobile.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 20px;
	padding: 5%;
}

.foto a {
	color: var(--white-color);
}

.foto a:hover {
	color: var(--yellow-color);
}

/* FOTO CRIANÇA */

.foto-crianca {
	width: 100%;
	height: 180px;
	background-image: url(../../assets/img/mapa-de-revolucao-solar.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: 20px;
	padding: 5%;
}

.foto-crianca a {
	color: var(--white-color);
}

.foto-crianca a:hover {
	color: var(--yellow-color);
}

/* FOTO REVOLUCAO */

.foto-crianca {
	width: 100%;
	height: 180px;
	background-image: url(../../assets/img/filhos-mobile.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: 20px;
	padding: 5%;
}

.foto-crianca a {
	color: var(--white-color);
}

.foto-crianca a:hover {
	color: var(--yellow-color);
}

/* E-BOOKS */

.ebooks {
	width: 100%;
	max-height: default;
	display: flow-root;
	margin-bottom: 20px;
}

.ebooks img {
	width: 100%;
	margin-bottom: 20px;
}

.ebooks p {
	text-align: center;
}

.saiba-mais {
	width: 50%;
	text-align: center;
	background: var(--blue-color);
	padding: 2% 5%;
	border-radius: 50px;
	color: var(--white-color);
	border: none;
	margin-bottom: 20px;
}

.saiba-mais a {
	color: var(--white-color);
}

.saiba-mais a:hover {
	color: var(--yellow-color);
}

.youtube {
	width: 100%;
	hanging-punctuation: 200px;
	text-align: center;
}

.youtube img {
}

.redes-sociais {
	width: 80%;
	height: 50px;
	text-align: left;
	position: fixed;
	top: 90%;
	right: 5%;
}

/* RODAPÉ */

.rodape {
	width: 100%;
	height: 400px;
	background: black;
}

/* ----------------------------------------- */ @media screen and (min-width: 768px) {

.banner {
	height: 105vh;
	background-image: url(../../assets/img/top.png);
}

/* APRESENTAÇÃO */

.present {
	padding: 20px 10%;
}

.present h1 {
  font-size: 1.7rem;
}

.quadros {
	width: 100%;
}

.quadros img {
	width: 30%;
	margin-left: 2%;
	float: left;
}

.ebooks {
	width: 100%;
	max-height: default;
	display: flow-root;
	margin-bottom: 20px;
}

.ebooks img {
	width: 30%;
	margin-bottom: 20px;
	float: left;
	margin-left: 2%;
}

.ebooks p {
}

.saiba-mais {
	width: 20%;
	text-align: center;
	background: var(--blue-color);
	padding: 2% 5%;
	border-radius: 50px;
	color: var(--white-color);
	border: none;
}

.saiba-mais:hover {
	width: 25%;
	background: var(--red-color);
	transition: 1s;
}

.foto {
	height: 388px;
	background-image: url(../../assets/img/astrologia-carmica.jpg);
}

.foto-revolucao {
	height: 388px;
	background-image: url(../../assets/img/mapa-de-revolucao-solar.jpg);
}

.foto-crianca {
	height: 388px;
	background-image: url(../../assets/img/filhos.jpg);
}

.redes-sociais {
	width: 20%;
	height: 50px;
	text-align: left;
	position: fixed;
	top: 90%;
	right: 5%;
}







}