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

html, body {
	margin: 0;
	height: 100vh;
	scroll-behavior: smooth;
}

.mainbar {
	width: 100%;
	height: 60px;
	position: fixed;
	background-color: black;
	top: 0px;
	z-index: 998;
}

.logo-text-wrapper {
	white-space: nowrap;
	height: 100%;
	height: 60px;
	position: absolute;
	display: flex;
	margin-left: 200px;
	align-items: center;
	width: 50%;
}

.logo-text-wrapper h1:hover {
	cursor: pointer;
}

.logo-text-wrapper h1 {
	color: white;
	font-size: 1.5em;
	font-family: 'Merienda', cursive;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

.menu-button {
	width: 60px;
  	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 20px;
	position: absolute;
	flex-direction: column;
}

.hamburger-line {
	background-color: white;
	height: 2px;
	width: 55%;
	margin: 3px;
	transition: margin 0.2s;
}

body.hasHover .menu-button:hover .hamburger-line {
	margin: 5px;
}

.menu-button:hover {
	cursor: pointer;
}

.button-top-container {
	position: fixed;
	width: 75px;
	height: 75px;
	bottom: 1%;
	right: 2%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

body.hasHover .button-top-container:hover {
	cursor: pointer;
}

.button-top-arrow-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.button-top-arrow-container span {
	transition: background 0.3s;
}

.button-top-arrow-container span:nth-child(1) {
	background-color: black;
	width: 20%;
	height: 2px;
	position: absolute;
	transform: rotate(-45deg);
	left: 25px;
}

.button-top-arrow-container span:nth-child(2) {
	background-color: black;
	width: 20%;
	height: 2px;
	position: absolute;
	transform: rotate(45deg);
	right: 25px;
}

body.hasHover .button-top-container:hover .button-arrow {
	background-color: red;
}

.sidebar {
	background-color: black;
	position: fixed;
	width: 0;
	top: 0;
	bottom: 0;
	z-index: 999;
	transition: width 0.3s;
	overflow: hidden;
}

.links {
	display: flex;
	flex-direction: column;
	position: fixed;
	margin-left: 37px;
	top: 100px;
	bottom: 0;
	white-space: nowrap;
	text-decoration: none;
	left: -350px;
	z-index: 999;
	transition: left 0.3s;
	overflow-y: scroll;
	-ms-overflow-style: none;
 	scrollbar-width: none;
	padding-bottom: 70px;
}

.links::-webkit-scrollbar {
	display: none;
}

.links a {
	color: white;
	margin-top: 20px;
	font-size: 22px;
	transition: color 0.3s;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	width: 100%;
}

.dropdown-menu-wrapper, .dropdown-menu-wrapper-2 {
	display: none;
	flex-direction: column;
}

.dropdown-menu-wrapper a, .dropdown-menu-wrapper-2 a {
	margin-left: 30px;
}

body.hasHover .links a:hover{
	text-decoration: none;
	color: lightsteelblue;
	cursor: pointer;
}

.links a:active, a:visited, a:focus {
	text-decoration: none;
}

.links a:active {
	color: lightsteelblue;
}

.menu-button-close {
	width: 60px;
  	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 20px;
	flex-direction: column;
	position: absolute;
	top: 20px;
}

.menu-button-close:hover {
	cursor: pointer;
}

.close-line {
	height: 2px;
	width: 55%;
	background-color: white;
	position: absolute;
	transition: background 0.2s;
}

.line-1 {
	transform: rotate(45deg);
}

.line-2 {
	transform: rotate(-45deg);
}

.menu-button-close:hover .close-line {
	background-color: lightsteelblue;
}

.header-banner {
	background-image: url("../img/pxfuel.com (5).jpg");
	background-position: top;
	background-size: cover;
	width: 100%;
	height: 50%;
	position: relative;
	top: 60px;
}

.header-banner-background-2 {
	background-image: url("../img/264167562_445233927086825_20141297684713266_n.jpg");
	background-position: center;
}

.header-banner-background-3 {
	background-image: url("../img/pxfuel.com.jpg");
}

.header-banner-background-4 {
	background-image: url("../img/pxfuel.com (4).jpg");
	background-position: center;
}

.header-banner-background-5 {
	background-image: url("../img/pxfuel.com (6).jpg");
}

.header-banner-background-6 {
	background-image: url("../img/timothy-eberly-S5r1Ya5LPig-unsplash.jpg");
	background-position: center;
}

.header-banner-background-7 {
	background-image: url("../img/sixteen-miles-out-Nu6IGoTrh3Q-unsplash.jpg");
}

.header-banner-background-8 {
	background-image: url("../img/aaron-burden-TNlHf4m4gpI-unsplash.jpg");
	background-position: center;
}

.header-banner-background-9 {
	background-image: url("../img/sixteen-miles-out-CvcK0MWjMgI-unsplash.jpg");
	background-position: center;
}

.header-banner-background-10 {
	background-image: url("../img/pxfuel.com (8).jpg");
	background-position: center;
}

.header-banner-background-11 {
	background-image: url("../img/pxfuel.com (7).jpg");
	background-position: center;
}

.header-banner-background-12 {
	background-image: url("../img/dj-paine-vwHRnEG2X6g-unsplash.jpg");
	background-position: bottom;
}

.header-banner-background-13 {
	background-image: url("../img/novo.jpeg");
	background-position: bottom;
}

.header-banner-background-14 {
	background-image: url("../img/pexels-tara-winstead-8383414.jpg");
	background-position: center;
}

.header-banner-background-15 {
	background-image: url("../img/sixteen-miles-out-MLOZazGGCb8-unsplash (1).jpg");
	background-position: center;
}

.header-banner-background-16 {
	background-image: url("../img/patrick-fore-b_SHPU5M3nk-unsplash.jpg");
	background-position: center;
}

.header-banner-background-17 {
	background-image: url("../img/kiwihug-9uL9h8zaBc0-unsplash.jpg");
}

.title-wrapper {
	text-align: center;
	font-family: 'Oswald', 'sans-serif';
	position: relative;
	top: 105px;
}

.title-wrapper h1 {
    font-size: 72px;
}

.verse-wrapper {
	position: relative;
	text-align: center;
	top: 140px;
	font-family: 'Oswald', 'sans-serif';
	font-size: 2vw;
	line-height: 200%;
	padding-bottom: 20px;
}

.text-wrapper {
	font-family: 'Oswald', 'sans-serif';
	font-size: clamp(1.25rem, 0.8971rem + 0.7353vw, 2rem);
	text-align: justify;
	line-height: 200%;
	margin: 125px 22.5vw 0px 22.5vw;
	padding-bottom: 50px;
	position: relative;
	top: 30px;
}

.text-wrapper p::first-letter {
	font-size: 200%;
	color: red;
}

.infographic {
	display: flex;
	align-items: center;
	justify-content: center;
}

.infographic img {
	width: 60%;
	height: 60%;
	align-self: center;
}

.links-wrapper {
	width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	background: lightgray;
	white-space: nowrap;
	left: 5%;
	padding-top: 75px;
}

.links-wrapper a {
	color: black;
	font-family: 'Oswald', 'sans-serif';
	font-size: clamp(1.25rem, 0.8971rem + 0.7353vw, 2rem);
	height: 100%;
	width: 0;
	transition: color 0.3s;
	margin-top: 5px;
}

body.hasHover .links-wrapper a:hover{
	text-decoration: none;
	color: red;
	cursor: pointer;
}
body.hasHover .links-wrapper a:active{
	text-decoration: none;
	color: red;
	cursor: pointer;
}

.text-header-wrapper {
	padding-top: 100px;
	padding-bottom: 25px;
}

.text-header-wrapper span {
	font-size: 2.8vw;
	top: 20px;
}

@media only screen and (max-width: 768px) {
	
	.logo-text-wrapper {
		margin: 0 auto;
		left: 0;
		right: 0;
		justify-content: center;
	}
	
	.header-banner {
		height: 33%;
		top: 60px;
	}
	
	.title-wrapper {
		top: 90px;
	}
	
	.title-wrapper h1 {
		font-size: 7vw;
	}
	
	.button-top-container {
		background-color: white;
		box-shadow: -1px 3px 3px 1.5px lightgray;
		z-index: 1;
		border-radius: 50%;
		height: 60px;
		width: 60px;
		bottom: 3%;
		right: 3%;
	}
	
	.button-top-arrow-container span {
		margin-top: 3px;
	}
	
	.button-top-arrow-container span:nth-child(1) {
		left: 20px;
	}
	
	.button-top-arrow-container span:nth-child(2) {
		left: 27px;
	}
	
	.verse-wrapper {
		top: 110px;
		font-size: 3vw;
		padding-bottom: 10px;
	}
	
	.links-wrapper a {
		font-size: 3.7vw;
		left: 5%;
		position: relative;
	}
	
	.text-wrapper {
		font-size: 3vw;
		margin: 50px;
		top: 60px;
	}
	
	.text-wrapper span {
		font-size: 5vw;
	}
	
	.infographic img {
		width: 100%;
		height: 100%;
	}
	
}

@media only screen and (max-width: 480px) {
	
	.logo-text-wrapper-eng h1 {
		font-size: 1em;
	}

	.links a {
		font-size: 18px;
	}
	
	.menu-button {
		left: 5px;
	}
	
	.menu-button-close {
		left: 5px;
	}
	
	.button-top-container {
		height: 45px;
		width: 45px;
		bottom: 2%;
	}
	
	.button-top-arrow-container span:nth-child(1) {
		left: 15px;
	}
	
	.button-top-arrow-container span:nth-child(2) {
		left: 20px;
	}
	
	.verse-wrapper {
		top: 115px;
		font-size: 4.5vw;
		padding-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.text-wrapper {
		font-size: 4.5vw;
		margin: 35px;
		top: 75px;
	}
	
	.text-header-wrapper span {
		font-size: 7vw;
	}
	
}

@media only screen and (max-width: 320px) {
	
	.logo-text-wrapper h1 {
		font-size: 1.2em;
	}
	
	.logo-text-wrapper-eng h1 {
		font-size: 0.9em;
	}

}