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

html, body {
	margin: 0;
	overflow-x: hidden;
	height: 100%;
	scroll-behavior: smooth;
}

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

/*Mainbar styling*/

.mainbar {
	width: 100%;
	height: 75px;
	position: absolute;
	z-index: 998;
	transition: background-color 300ms linear, top 200ms linear;
	top: 0px;
	padding-bottom: 80px;
}

.mainbar.scrolled {
	/*background-color: rgba(33,33,33,1.00);*/
	background-color: black;
	transition: background-color 300ms linear, top 200ms linear;
	top: -20px;
}

.mainbar.hidden {
	top: -100px;
	transition: top 300ms linear;
}

.logo-text-wrapper {
	white-space: nowrap;
	height: 100%;
	height: 60px;
	top: 20px;
	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;
	top: 20px;
}

.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;
}

.language-icon-wrapper {
	height: 60px;
	width: 60px;
	top: 20px;
	right: 20px;
	position: absolute;
	display: flex;
	color: white;
	align-items: center;
	justify-content: center;
}

.language-icon-wrapper img {
	max-width: 60%;
	max-height: 60%;
	transition: transform 0.3s ease, transform 0.3s ease;
	-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;
}

body.hasHover .language-icon-wrapper img:hover {
	cursor: pointer;
	transform: scale(1.1);
}

.language-select-wrapper {
	width: 60px;
	position: absolute;
	justify-content: center;
	overflow-x: hidden;
	display: flex;
	transition: height 0.3s ease;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	flex-direction: column;
	height: 0px;
	top: 90px;
	right: 20px;
	background-color: white;
	color: black;
	-ms-overflow-style: none;
 	scrollbar-width: none;
}

.language-select-wrapper.hidden {
	visibility: hidden;
}

.language-select-wrapper div {
	align-self: center;
	width: 100%;
	text-align: center;
	padding: 15px;
	transition: background-color 0.3s, color 0.3s;
	-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;
}

body.hasHover .language-select-wrapper div:hover {
	cursor: pointer;
	background-color: black;
	color: white;
}

.language-select-wrapper div:active {
	background-color: black;
	color: white;
}

/*Sidebar styling*/

.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 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-2 {
	display: none;
	flex-direction: column;
}

.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;
}

/*Main styling*/

.main {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	-ms-overflow-style: none;
 	scrollbar-width: none;
	scroll-behavior: smooth;
}

.section-1-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
}

#video1 {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	background-size: cover;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	display: flex;
}

.section-1-content-wrapper {
	z-index: 1;
	position: absolute;
	left: 200px;
	height: 100%;
	width: 700px;
	white-space: nowrap;
	display: flex;
}

.verse-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.psalm {
	color: white;
	font-family: 'Oswald', sans-serif;
	font-size: 4.5vw;
	line-height: 1.6;
	whitespace: nowrap;
	text-align: justify;
}

.verse {
	color: white;
	font-family: 'Oswald', sans-serif;
	font-size: 2.5vw;
	line-height: 1.6;
	whitespace: nowrap;
	float: right;
}

.button-wrapper {
	top: 90%;
	position: absolute;
	display: flex;
	width: 100%;
}

.button {
	color: white;
	font-size: 15px;
	border: 1px solid rgba(255,255,255,0.40);
	width: 150px;
	text-align: center;
	padding: 5px;
	margin-top: -1px;
    margin-left: -1px;
	transition: color 0.3s, background-color 0.3s;
	-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;
}

.button a {
}

body.hasHover .button:hover {
	background-color: white;
	cursor: pointer;
	color: black;
}

.button:active {
	background-color: white;
	color: black;
}

@keyframes arrow-up-down {
	0% {top: 84.5%;}
	100% {top: 85%;}
}

.section-2-wrapper {
	width: 100%;
	height: auto;
	position: relative;
}

.cards-wrapper {
	width: 100%;
	height: 500px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.cards {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	text-align: center;
	transition: width 0.3s, filter 0.5s;
	background-position: center;
	background-size: cover;
}

.cards h1 {
	font-size: 3vw;
	align-self: center;
	position: absolute;
	margin: 0 auto;
	-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;
	white-space: nowrap;
	font-family: 'Oswald', sans-serif;
}

.cards span {
	font-size: 2.2vw;
}

body.hasHover .cards:hover {
	cursor: pointer;
	width: 130%;
}

.cards:active {
	width: 130%;
}

body.hasHover .cards-wrapper:hover > .cards:not(:hover){
	filter: brightness(0.6);
}

.filter {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.30);
}

.card-1 {
	color: white;
	z-index: 4;
	background-image: url("../img/khamkeo-vilaysing-rpVQJbZMw8o-unsplash (1).jpg");
	transform: translateX(-300px);
	opacity: 0%;
}

.card-1.card-1-anim {
	animation-name: card-anim;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.card-2 {
	z-index: 3;
	background-image: url("../img/stormseeker-3apYxXtVO4I-unsplash (1).jpg");
	transform: translateX(-300px);
	opacity: 0%;
}

.card-2.card-2-anim {
	animation-name: card-anim;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
}

.card-3 {
	color: white;
	z-index: 2;
	background-image: url("../img/corbin-mathias-JF08o_YLrd4-unsplash1.jpg");
	transform: translateX(-300px);
	opacity: 0%;
}

.card-3.card-3-anim {
	animation-name: card-anim;
	animation-duration: 0.3s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
}

.card-4 {
	color: white;
	z-index: 1;
	background-image: url("../img/InkedLion and the Lamb_LI1.jpg");
	transform: translateX(-300px);
	opacity: 0%;
}

.card-4.card-4-anim {
	animation-name: card-anim;
	animation-duration: 0.3s;
	animation-delay: 0.9s;
	animation-fill-mode: forwards;
}

@keyframes card-anim {
	0% {transform: translateX(-300px); opacity: 0%;}
	100% {transform: translateX(0px); opacity: 100%;}
}

.section-3-wrapper {
	width: 100%;
	height: 600px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("../img/levi-meir-clancy-c3fNWbbn0VA-unsplash1.jpg");
	background-size: cover;
	background-position: center;
}

.section-3-filter {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0,0,0,0.60);
}

.commandments-wrapper {
	width: 70%;
	height: 100%;
	color: white;
	text-align: justify;
	text-align-last: center;
	font-family: 'Oswald', 'sans-serif';
	line-height: 1.6;
	font-size: 2vw;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: grab;
}

.commandment {
	height: 600px;
}

.commandment p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/*.slick-slide {
	margin: 0 50px;
}*/

.dot-container {
	width: 85px;
	position: relative;
	margin-left: auto;
}

.section-4-wrapper {
	width: 100%;
	height: 300px;
	background-color: black;
	display: flex;
}

.contact-wrapper {
	width: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	left: 3%;
}

.mail, .message {
	width: 400px;
	height: 40px;
	max-width: 400px;
	max-height: 80px;
	min-height: 40px;
	margin-top: 30px;
	font-family: 'Oswald', 'sans-serif';
	color: black;
	resize: none;
}

.contact-button-wrapper {
	width: 150px;
	border: 1px solid white;
	height: 40px;
	margin-top: 25px;
	font-family: 'Oswald', 'sans-serif';
	color: white;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-content: center;
	line-height: 37px;
	transition: background-color 0.3s, color 0.3s;
	-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;
}

body.hasHover .contact-button-wrapper:hover {
	background-color: white;
	color: black;
	cursor: pointer;
}

.contact-button-wrapper:active {
	background-color: white;
	color: black;
}

.logo-footer-wrapper {
	margin-left: auto;
	right: 5%;
	position: relative;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo-footer-image {
	height: 60px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-footer-image img {
	max-height: 100%;
	max-width: 100%;
	-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;
}

.logo-footer-text {
	color: white;
	font-size: 1.5em;
	font-family: 'Merienda', cursive;
	top: 5px;
	position: relative;
	-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;
}

.logo-footer-mail {
	color: white;
	font-family: 'Oswald', 'sans-serif';
	font-size: 15px;
	top: 40px;
	position: relative;
}

/*Search bar*/

.search-container {
    margin-top: 35px;
	right: 150px;
	position: absolute;
    display: inline-block;
}

.search-container-media {
	display: none;
}

.searchInput {
    width: 200px;
	height: 30px;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,0.4);
	color: white;
	font-family: 'Oswald', 'sans-serif';
	transition: 300ms linear;
}

.searchInput.scrolled {
	border: none;
	background-color: white;
	color: black;
	transition: 300ms linear;
}

.search-results-container {
	width: 100%;
	height: 350px;
	overflow-y: scroll;
	position: absolute;
	margin-top: 15px;
	display: none;
	background-color: white;
}

.search-results {
    display: none;
	flex-direction: column;
    background-color: white;
    width: 100%;
	font-family: 'Oswald', 'sans-serif';
}

.search-results a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results a:hover {
    background-color: #f0f0f0;
}

/*-----------------------------*/

@media only screen and (max-width: 992px) {
	.searchInput {
		width: 200px;
	}
}

@media only screen and (max-width: 768px) {
	
	.logo-text-wrapper {
		margin: 0 auto;
		left: 0;
		right: 0;
		justify-content: center;
	}
	
	.section-1-content-wrapper {
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 80%;
		justify-content: center;
	}
	
	.button-wrapper {
		justify-content: center;
	}
	
	.psalm {
		font-size: 7vw;
	}
	
	.verse {
		font-size: 5vw;
	}
	
	.cards-wrapper {
		flex-direction: column;
	}
	
	.cards {
		align-self: center;
		width: 100%;
	}
	
	.cards h1 {
		font-size: 5vw;
	}
	
	.cards span {
		font-size: 3.5vw;
		position: relative;
		top: -0.5vw;
	}	
	
	.section-3-wrapper {
		height: 400px;
	}
	
	.commandments-wrapper {
		font-size: 3vw;
		width: 60%;
	}
	
	.commandment {
		height: 400px;
	}
	
	/*.slick-slide {
	margin: 0 20px;
	}*/
	
	.section-4-wrapper {
		height: 500px;
		flex-direction: column;
		align-items: center;
	}
	
	.contact-wrapper {
		left: 0%;
	}
	
	.contact-button-wrapper {
		/*align-self: center;*/
		left: 50%;
		transform: translateX(-50%);
		position: relative;
	}
	
	.logo-footer-wrapper {
		margin-left: 0px;
		right: 0%;
		top: 15%;
	}
	
	/*Search bar*/
	
	.search-container {
		display: none;
	}

	.search-container-media {
		margin-top: 100px;
		left: 0; 
  		right: 0;
		width: 50%;
		height: auto;
  		margin-left: auto; 
  		margin-right: auto; 
		position: absolute;
		display: inline-block;
		z-index: 997;
	}

	.searchInputMedia {
		width: 100%;
		height: 30px;
		background-color: transparent;
		border: 1px solid rgba(255,255,255,0.4);
		color: white;
		font-family: 'Oswald', 'sans-serif';
	}
	
	.searchInput.scrolled {
		background-color: transparent;
		border: 1px solid rgba(255,255,255,1);
	}
}

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

	.links a {
		font-size: 18px;
	}
	
	.menu-button {
		left: 5px;
	}
	
	.language-icon-wrapper {
		right: 5px;
	}
	
	.language-icon-wrapper img {
		max-height: 50%;
		max-width: 50%;
	}
	
	.language-select-wrapper {
		right: 5px;
	}
	
	.menu-button-close {
		left: 5px;
	}
	
	.psalm {
		font-size: 7.5vw;
	}
	
	.verse {
		font-size: 5.5vw;
	}
	
	.button {
		font-size: 12px;
		padding: 7.5px;
	}
	
	.cards h1 {
		font-size: 7vw;
	}
	
	.commandments-wrapper {
		font-size: 3.8vw;
	}
	
	.dot-container {
		width: 80px;
	}
	
	.section-4-wrapper {
		justify-content: center;
	}
	
	.contact-wrapper {
		width: 300px;
		bottom: 50px;
	}
	
	.mail, .message {
		width: 300px;
	}
	
	.logo-footer-wrapper {
		top: 10px;
	}
	
}

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