/* 
Theme Name: Custom Theme
Author: Kharytonov
Version: 1.0
 */

.menu-btn {
	position: absolute;
	z-index: 9;
	right: 35px;
	top: 35px;
	cursor: pointer;
	transition: all 0.5s ease-out;
}
.menu-btn .btn-line {
	width: 28px;
	height: 3px;
	margin: 0 0 5px 0;
	background: #000;
	transition: all 0.5s ease-out;
}
.menu-btn.close {
	transform: rotate(180deg);
}
.menu-btn.close .btn-line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.menu-btn.close .btn-line:nth-child(2) {
	opacity: 0;
}
.menu-btn.close .btn-line:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

.menu {
	position: fixed;
	top: 0;
	width: 100%;
	opacity: 0.9;
	visibility: hidden;
}
.menu.show {
	visibility: visible;
}
.menu-branding,
.menu-nav {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	float: left;
	width: 50%;
	height: 100vh;
	overflow: hidden;
	z-index: 4;
}
.menu-nav {
	margin: 0;
	padding: 0;
	background: #e9e9ef;
	list-style: none;
	transform: translate3d(0, -100%, 0);
	transition: all 0.5s ease-out;
	/* z-index: 5; */
}
.menu-nav.show {
	transform: translate3d(0, 0, 0);
}
.menu-branding {
	background: #f8f8fa;
	transform: translate3d(0, 100%, 0);
	transition: all 0.5s ease-out;
}
.menu-branding.show {
	transform: translate3d(0, 0, 0);
}

.portrait img {
	padding-top: 30px;
	width: 350px;
	height: 350px;
}
.menu .nav-item {
	transform: translate3d(600px, 0, 0);
	transition: all 0.5s ease-out;
}
.menu .nav-item.show {
	transform: translate3d(0, 0, 0);
}
.menu .nav-item.current > a {
	color: #3f8820;
}
.menu .nav-link {
	display: inline-block;
	position: relative;
	font-size: 30px;
	text-transform: uppercase;
	padding: 1rem 0;
	font-weight: 400;
	color: #413b3b;
	text-decoration: none;
	transition: all 0.5s ease-out;
}
.menu .nav-link:hover {
	color: #80be7a;
}

.nav-item:nth-child(1) {
	transition-delay: 0.1s;
}

.nav-item:nth-child(2) {
	transition-delay: 0.2s;
}

.nav-item:nth-child(3) {
	transition-delay: 0.3s;
}

.nav-item:nth-child(4) {
	transition-delay: 0.4s;
}

.nav-item:nth-child(5) {
	transition-delay: 0.5s;
}

* {
	box-sizing: border-box;
}

body {
	background: #f8f8fa;
	color: #000;
	height: 100%;
	margin: 0;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
}
body #background-video {
	height: 100vh;
	width: 100vw;
	-o-object-fit: cover;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0.4;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 400;
}
h1.sm-heading,
h2.sm-heading,
h3.sm-heading {
	margin-bottom: 2rem;
	padding: 0.2rem 1rem;
	color: #444444;
	display: block;
	text-align: center;
}

p {
	font-size: 17px;
}

a {
	color: #fff;
	text-decoration: none;
}

a h5 {
	color: #413b3b;
}

header {
	position: fixed;
	z-index: 2;
	width: 100%;
}

.text-secondary {
	color: #3f8820;
}

main {
	padding: 1rem;
	min-height: calc(100vh - 60px);
}
main .brand-logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top: 10%;
}

main .icons {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
main .icons a {
	padding: 0.4rem;
	transition: all 0.5s ease-out;
}
main .icons a:hover {
	color: #0f4dc0;
}
main#home {
	overflow: hidden;
	max-height: 100wh;
}
main#home h1 {
	margin-top: 20vh;
}

.header-logo {
	height: 50px;
}

.about-info {
	display: grid;
	grid-gap: 30px;
	grid-template-areas: "bioimage bio bio" "job1 job2 job3";
	grid-template-columns: repeat(3, 1fr);
}
.about-info .bio-image {
	width: 30%;
	grid-area: bioimage;
	margin: auto;
	border-radius: 50%;
	border: #3f8820 3px solid;
}
.about-info .bio {
	grid-area: bio;
	font-size: 1.5rem;
}
.about-info .job {
	background: white;
	padding: 0.5rem;
	border-bottom: #3f8820 5px solid;
}

.projects {
	display: grid;
	grid-gap: 0.7rem;
	grid-template-columns: repeat(3, 1fr);
}
.projects img {
	width: 100%;
	height: 80%;
	border: 3px #fff solid;
}

.product img {
	width: auto;
	height: 40vh;
	border: 3px #fff solid;
	margin: auto;
	display: block;
}

.product-sm {
	width: 310px;
}

.product-sm img {
	width: auto;
	height: 30vh;
	border: 3px #fff solid;
	margin: auto;
	display: block;
	position: relative;
	z-index: 1;
}

.product-title {
	/* opacity: 0.7; */
	position: absolute;
	z-index: 1;
	color: #fff;
}

/* .product-card-body {
	height: 60vh;
} */

.center-content {
	text-align: center;
	padding-top: 20%;
}

#main-footer {
	text-align: center;
	padding: 1rem;
	background: #dadae5;
	color: #000;
	height: 60px;
	margin-top: 40vh;
}

iframe {
	width: 100%;
	height: 465px;
	border: none;
}

/* Brands slider */

.slider-container {
	align-items: center;
	justify-content: center;
	width: 50vw;
	opacity: 0.7;
}

@-webkit-keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-1250px);
	}
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-1250px);
	}
}

/* Small Slider */
.slider {
	height: 60px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: auto;
	width: 40vw;
}

.slider .slide-track {
	-webkit-animation: scroll 40s linear infinite;
	animation: scroll 40s linear infinite;
	display: flex;
	width: 3800px;
}

.slider .slide {
	height: 80px;
	padding: 0 25px;
}

/* Large slider */
.slider-container-lg {
	align-items: center;
	justify-content: center;
	width: 80vw;
}

.slider-lg {
	height: 150px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: auto;
	width: 60vw;
}

.slide-track-lg {
	-webkit-animation: scroll 40s linear infinite;
	animation: scroll 40s linear infinite;
	display: flex;
	width: 3800px;
}

.slide-lg {
	height: 150px;
	padding: 0 25px;
}

/* Filter button icons */
.brand-icon {
	height: 30px;
}

/* Mediaqueries */

@media screen and (min-width: 1171px) {
	.projects {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (min-width: 769px) and (max-width: 1170px) {
	.projects {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 768px) {
	main {
		align-items: center;
		text-align: center;
	}
	main .lg-heading {
		line-height: 1;
		margin-bottom: 1rem;
	}
	ul.menu-nav,
	div.menu-branding {
		float: none;
		width: 100%;
		min-height: 0;
	}
	ul.menu-nav.show,
	div.menu-branding.show {
		transform: translate3d(0, 0, 0);
	}
	.menu-nav {
		height: 100vh;
		transform: translate3d(-100%, 0, 0);
		font-size: 24px;
	}
	.menu-branding {
		height: 25vh;
		transform: translate3d(100%, 0, 0);
	}

	.about-info {
		grid-template-areas: "bioimage" "bio" "job1" "job2" "job3";
		grid-template-columns: 1fr;
	}
	.projects {
		grid-template-columns: repeat(2, 1fr);
	}
	.portrait img {
		height: 180px;
		width: 150px;
	}
	.menu-nav {
		height: 55vh;
	}
}

@media screen and (max-width: 500px) {
	main {
		padding: 2rem;
	}
	main #home h1 {
		margin-top: 10vh;
	}
	main .lg-heading {
		margin-top: 1rem;
		font-size: 5rem;
	}
	.projects {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 480px) {
	.brand-logo {
		width: 100%;
	}
	body {
		background-color: #f8f8fa;
		background-size: cover;
	}
	.menu-nav {
		height: 65vh;
	}
	.slider-container-lg,
	.slider-lg {
		width: 80vw;
	}
	.slider .slide {
		width: 200px;
	}
	.slider-container {
		width: 65vw;
	}
	.slider .slide-track {
		width: 800px;
	}
	.brand-logo {
		margin-bottom: 25px;
	}
}