@charset "UTF-8";



* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

nav {
	background-color: #075770;
	padding: 5px 20px;
}

ul {
	list-style-type: none;
}

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



li {
	font-size: 16px;
	padding: 15px 5px;
}
li a {
	display: block;
}

/* .logo {
	font-size: 20px;
	text-decoration: none;
} */




/* MOBILE SCREEN CSS */
@media screen and (min-width: 320px){


	body {
		background-color: #ffffff;
	}
	/* header {
		
	} */

	h1, h2, h3 {
		font-family: Cinzel;
	}
	p {
		font-family: Source Sans Pro;
	}
	a {
		font-family: Source Sans Pro;
	}



	.social-media-icon-nav {
		margin: 0;
		padding: 0;
		background-color: #028482;
		height: 35px;
	}
	.social-media-icon-nav ul {
		text-align: center;
		height: 100%;
	}
	.social-media-icon-nav li {
		display: inline-block;
		margin: 0;
		padding: 2px 0 0 0;
		height: 100%;
	}
	.social-media-icon-nav a {
		height: 100%;
		margin: 0;
		padding: 4px 5px 0 5px;
		font-size: 12px;
	}
	.social-media-icon-nav i {
		background-color: blue;
		width: 25px;
		height: 100%;
		margin: 0;
		padding: 7px 0 0 0;
		font-size: 10px;
	}
	#facebook-icon-left {
		margin-left: 5px;
	}
	#facebook-icon-right {
		margin-right: 5px;
	}


/* THE NAVIGATION AREA  */
	#navbar {
		
	}
	#navbar ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	#navbar .logo {
		font-family: Cinzel;
		font-size: 20px;
		color: white;
	}
	#navbar .toggle {
		padding: 0 0 10px 0;
		order: 1;
	}
	#navbar .item {
		width: 100%;
		text-align: center;
		display: none;
		order: 3;
	}
	#navbar .item.active {
		display: block;
	}
	#navbar .item a {
		font-family: Source Sans Pro;
		font-size: 25px;
		padding: 10px;
	}
	#navbar .item a:hover {
		border-bottom: 0.5px solid white;
	}

	#navbar .toggle {
		cursor: pointer;
	}

	#navbar .bars {
		background-color: whitesmoke;
		display: inline-block;
		height: 3px;
		position: relative;
		width: 20px;
	}

	#navbar .bars::before, .bars::after {
		background-color: whitesmoke;
		content: "";
		display: inline-block;
		height: 3px;
		position: absolute;
		width: 20px;
	}
	#navbar .bars::before {
		top: 6px;
	}
	#navbar .bars::after {
		top: -6px;
	}



	/* THE H1 REICARNATION PAGE TITLE */
	.RN {
		padding: 120px 0 120px 0;
		margin: 0;
	}
	.RN h1 {
		font-size: 35px;
		text-align: center;
		margin: 0;
		color: #075770;/*#0698F3*//*#36DDDD*/
	 }
	
	

	/* INTRODUCTION AREA */
	.introduction {
		padding: 0 0 5px 0;
	}
	.introduction h2 {
		font-size: 26px;
		text-align: center;
		margin: 0;
		padding: 25px 0 25px 0;
	}
	.introduction p {
		font-size: 18px;
		margin: 0;
		padding: 0 0 0 4px;
	}
		


	/* WHAT IS REINCARNAITON */
	.what-is-reincarnation {
		margin: 20px 0 20px 0;
	}
	.what-is-reincarnation h2 {
		text-align: center;
		font-size: 26px;
		margin: 0;
		padding: 30px 0 12px 0;
	}
	.what-is-reincarnation p {
		font-size: 18px;
		margin: 0;
		padding: 0 0 0 5px;
	}


/* WHAT IS A THEORY */
	.what-is-theory {
		margin: 20px 0 20px 0;
	}
	.what-is-theory h2 {
		font-size: 23px;
		padding: 0 0 0 5px;
	}
	.what-is-theory p {
		font-size: 18px;
		padding: 0 0 0 5px;
	}


/* WHAT DOES INCARNATE MEAN */
	.what-is-incarnate {
		margin: 20px 0 20px 0;
	}
	.what-is-incarnate h2 {
		font-size: 23px;
		padding: 0 0 0 5px;
	}
	.what-is-incarnate p {
		font-size: 18px;
		padding: 0 0 0 5px;
	}
	.what-is-incarnate a {
		border: 2px solid lightblue;
		border-radius: 6px;
	}


/* WHAT IS THE ETYMOLOGY OF REINCARNATION */
	.what-is-etymology {
		background-color: #e6eef0;
		margin: 40px 0 50px 0;
		padding: 5px 0 10px 0;
	}
	.what-is-etymology h2 {
		font-size: 23px;
		padding: 5px 0 0 5px;
	}
	.what-is-etymology p {
		font-size: 18px;
		padding: 10px 0 10px 5px;
	}
	.what-is-etymology a {
		border-radius: 6px;
		display: block;
		background-color: #075770;
		font-size: 27px;
		text-align: center;
		color: floralwhite;
		margin: 5px;
		padding: 15px 0 15px 0;
	}


/* WHAT IS THE DEFINITION OF METEMPSYCHOSIS */
	.metemp-area {
		background-color: #e6eef0;
		margin: 40px 0 50px 0;
		padding: 10px 0 10px 0;
	}
	.metemp-area h2 {
		font-size: 23px;
		padding: 0 0 0 5px;
	}
	.metemp-area p {
		font-size: 18px;
		padding: 10px 0 10px 5px;
	}
	.metemp-area a {
		border-radius: 6px;
		display: block;
		background-color: #075770;
		font-size: 27px;
		text-align: center;
		color: floralwhite;
		margin: 5px;
		padding: 15px 0 15px 0;
	}


/* WHAT IS THE DEFINITION OF TRANSMIGRATION */
	.trans-area {
		background-color: #e6eef0;
		margin: 40px 0 50px 0;
		padding: 10px 0 10px 0;
	}
	.trans-area h2 {
		font-size: 23px;
		padding: 0 0 0 5px;
	}
	.trans-area p {
		font-size: 18px;
		padding: 10px 0 10px 5px;
	}
	.trans-area a {
		border-radius: 6px;
		display: block;
		background-color: #075770;
		font-size: 27px;
		text-align: center;
		color: floralwhite;
		margin: 4px;
		padding: 15px 0 15px 0;
	}


/* WHAT IS THE DEFINITION OF RE-BIRTH/REBIRTH */
	.rebirth-area {
		background-color: #e6eef0;
		margin: 30px 0 30px 0;
		padding: 10px 0 10px 0;
	}
	.rebirth-area h2 {
		font-size: 23px;
		padding: 0 0 0 5px;
	}
	.rebirth-area p {
		font-size: 18px;
		padding: 10px 0 10px 5px;
	}
	.rebirth-area a {
		border-radius: 6px;
		display: block;
		background-color: #075770;
		font-size: 27px;
		text-align: center;
		color: floralwhite;
		margin: 4px;
		padding: 15px 0 15px 0;
	}

	
	/* IT IS WISE TO HAVE AN OPEN MIND */
	.neutral-but-open-mind {
		padding: 0;
		margin: 0;
	}
	.neutral-but-open-mind div {
		width: 100%;
	}
	.neutral-but-open-mind p {
		font-size: 18px;
		margin: 0;
		padding: 0 0 10px 3px;
	}


/* THE GO TO PART 1 BUTTON */
	.part-1-button {
		margin: 0;
		padding: 0;
	}
	.part-1-button div {
		width: 100%;
	}
	.part-1-button a {
		margin: 0 auto;
		display: block;
		padding: 10px 0;
		font-size: 21px;
		color: white;
		background-color: #075770;
		text-align: center;
	}



	#myBtn {
		visibility: hidden;
		display: none;
	}
	.Top {
		visibility: hidden;
	}
	button {
		display: none;
	}

}



/* FOR IPAD AND TABLET VIEWING */
@media screen and (min-width: 768px){ 


	.social-media-icon-nav a {
		font-size: 15px;
	}



	#navbar {
		
	}
	#navbar ul {
		justify-content: center;
	}
	#navbar .logo {
		flex: 1;
	}
	#navbar .toggle {
		order: 2;
		padding: 20px;
	}



	/* Reincarnation Page title */
	.RN {
		padding: 200px 0 250px 0;
	}
	.RN h1 {
		font-size: 80px;
		color: #075770;
	}



	/* THE INTRODUCTION PARAGRAPHS */
	.introduction {
		margin: auto;
		padding: 0 0 10px 0;
		width: 750px;
		height: auto;
	}
	.introduction h2 {
		text-align: center;
		font-size: 54px;
		margin: 0;
		padding: 25px 0 25px 0;
	}
	.introduction p {
		font-size: 20px;
		color: black;
		margin: 0;
		padding: 0;
	}



	/* WHAT IS REINCARNATION */
	.what-is-reincarnation {
		margin: auto;
		width: 750px;
	}
	.what-is-reincarnation h2 {
		font-size: 35px;
	}
	.what-is-reincarnation p {
		font-size: 20px;
		margin: 0;
		padding: 0;
	}


	/* WHAT IS A THEORY */
	.what-is-theory {
		margin: 50px 0 50px 0;
	}
	.what-is-theory h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.what-is-theory p {
		font-size: 20px;
		padding: 5px 0 5px 9px;
	}


	/* WHAT DOES INCARNATE MEAN */
	.what-is-incarnate {
		margin: 50px 0 50px 0;
	}
	.what-is-incarnate h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.what-is-incarnate p {
		font-size: 20px;
		padding: 5px 0 5px 9px;
	}


/* WHAT IS THE ETYMOLOGY OF REINCARNATION */
	.what-is-etymology {
		margin: 50px 0 50px 0;
	}
	.what-is-etymology h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.what-is-etymology p {
		font-size: 20px;
		padding: 10px 0 10px 10px;
	}
	.what-is-etymology a {
		font-size: 30px;
	}


/* WHAT IS THE DEFINITION OF METEMPSYCHOSIS */
	.metemp-area {
		margin: 70px 0 60px 0;
	}
	.metemp-area h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.metemp-area p {
		font-size: 20px;
		padding: 10px 0 10px 10px;
	}
	.metemp-area a {
		font-size: 30px;
	}


/* WHAT IS THE DEFINITION OF TRANSMIGRATION */
	.trans-area {
		margin: 60px 0 60px 0;
	}
	.trans-area h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.trans-area p {
		font-size: 20px;
		padding: 10px 0 10px 10px;
	}
	.trans-area a {
		font-size: 30px;
	}


/* WHAT IS THE DEFINITION OF RE-BIRTH/REBIRTH */
	.rebirth-area {
		margin: 60px 0 60px 0;
	}
	.rebirth-area h2 {
		font-size: 25px;
		padding: 0 0 0 7px;
	}
	.rebirth-area p {
		font-size: 20px;
		padding: 10px 0 10px 10px;
	}
	.rebirth-area a {
		font-size: 30px;
	}


	/* The begin with the history part */
	.neutral-but-open-mind {
		margin: 0;
		padding: 0;
	}
	.neutral-but-open-mind div {
		width: 100%;
	}
	.neutral-but-open-mind p {
		font-size: 20px;
		padding: 5px 0 20px 3px;
	}


	.part-1-button {
		margin: 0;
		padding: 0;
	}
	.part-1-button a {
		font-size: 23px;
	}




	#myBtn {
	  display: none;
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  z-index: 1;
	  font-size: 18px;
	  border: 1px solid #075770;
	  outline: none;
	  background-color: floralwhite;
	  color: #075770;
	  width: 5%;
	  cursor: pointer;
	  padding: 13px;
	  border-radius: 4px;
	}



}



/* FOR DESKTOP SCREEN SIZES */
@media screen and (min-width: 1024px){


	.social-media-icon-nav {
	
	}

	
	#navbar {
		border: 1px solid red;
		padding: 0;
	}
	#navbar ul {
		border: 2px solid green;
	}
	#navbar .logo {
		border: 1px solid black;
		margin: 0;
		padding: 0 0 0 7px;
		order: 0;
	}
	#navbar .logo a {
		font-size: 20px;
		padding: 0;
	}
	#navbar .item {
		display: block;
		width: auto;
	}
	#navbar .item {
		order: 1;
	}
	#navbar .item a {
		/* font-size: 20px; */
		font-size: 16px;
	}
	#navbar li {
		padding: 10px 5px;
	}
	#navbar .active {
		border: 1px solid white;
		padding: 0;
	}
	#navbar .toggle {
		display: none;
	}
	


	/* The reincarnation page title */
	.RN {
		padding: 270px 0 300px 0;
	}
	.RN h1 {
		font-size: 100px;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	

/* INTRODUCTION */
	.introduction {
		width: 98%;
	}
	.introduction h2 {
		font-size: 60px;
		margin: 0;
		padding: 20px 0 20px 0;
	}
	.introduction p {
		font-size: 25px;
		margin: 0;
		padding: 0;
	}
	.introduction .Ian {
		display: none;
	}
	.introduction .ian:hover + img {
		display: block;
	}


/* WHAT IS REINCARNAION */
	.what-is-reincarnation {
		margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 98%;
	}
	.what-is-reincarnation h2 {
		padding: 30px 0 20px 0;
	}
	.what-is-reincarnation p {
		font-size: 25px;
		margin: 0;
		padding: 0;
	}


/* WHAT IS A THEORY */
	.what-is-theory {
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		width: 98%;
	}
	.what-is-theory h2 {
		font-size: 30px;
		padding: 20px 0 20px 5px;
	}
	.what-is-theory p {
		font-size: 25px;
		margin: 0;
	}


/* WHAT DOES INCARNATE MEAN */
	.what-is-incarnate {
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		width: 98%;
	}
	.what-is-incarnate h2 {
		font-size: 30px;
		padding: 20px 0 20px 5px;
	}
	.what-is-incarnate p {
		font-size: 25px;
		margin: 0;
	}


/* WHAT IS THE ETYMOLOGY OF REINCARNATION */
	.what-is-etymology {
		background-color: white;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		width: 98%;
	}
	.what-is-etymology h2 {
		font-size: 30px;
		padding: 20px 0 20px 5px;
	}
	.what-is-etymology p {
		font-size: 25px;
	}
	.what-is-etymology a {
		border: 1px solid #075770;
		background-color: white;
		color: #075770;
	}
	.what-is-etymology a:hover {
		background-color: #075770;
		color: floralwhite;
	}


/* WHAT IS THE DEFINITION OF METEMPSYCHOSIS */
	.metemp-area {
		background-color: white;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		width: 98%;
	}
	.metemp-area h2 {
		font-size: 30px;
		margin: 0;
		padding: 20px 0 20px 5px;
	}
	.metemp-area p {
		font-size: 25px;
		margin: 0;
	}
	.metemp-area a {
		border: 1px solid #075770;
		background-color: white;
		color: #075770;
	}
	.metemp-area a:hover {
		background-color: #075770;
		color: floralwhite;
	}


/* WHAT IS THE DEFINITION OF TRANSMIGRATION */
	.trans-area {
		background-color: white;
		margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 98%;
	}
	.trans-area h2 {
		font-size: 30px;
		margin: 0;
		padding: 20px 0 20px 5px;
	}
	.trans-area p {
		font-size: 25px;
	}
	.trans-area a {
		border: 1px solid #075770;
		background-color: white;
		color: #075770;
	}
	.trans-area a:hover {
		background-color: #075770;
		color: floralwhite;
	}


/* WHAT IS THE DEFINITION OF RE-BIRTH/REBIRTH */
	.rebirth-area {
		background-color: white;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		width: 98%;
	}
	.rebirth-area h2 {
		font-size: 30px;
		margin: 0;
		padding: 20px 0 20px 5px;
	}
	.rebirth-area p {
		font-size: 25px;
		margin: 0;
	}
	.rebirth-area a {
		border: 1px solid #075770;
		background-color: white;
		color: #075770;
	}
	.rebirth-area a:hover {
		background-color: #075770;
		color: floralwhite;
	}



	#myBtn {
		display: none;
		width: 2%;
		padding: 10px 5px 15px 5px;
	}



	.neutral-but-open-mind {
		margin: 20px 0;
	}
	.neutral-but-open-mind div {
		margin: 0 auto;
		width: 98%;
	}
	.neutral-but-open-mind p {
		padding: 40px 0 40px 5px;
		font-size: 25px;
	}



	.part-1-button {
		
	}
	.part-1-button div {
		margin: 0 auto;
		display: block;
		width: 100%;
	}
	.part-1-button a {
		border: 1px solid #075770;
		border-radius: 0;
		background-color: white;
		color: #075770;
		font-size: 25px;
	}
	.part-1-button a:hover {
		background-color: #075770;
		color: white;
	}




}