/* vars */
:root {
	--bg-color: #f8f8e9;
	
	--theme1-text-color: white;
	--theme1-bg-color: 2c4c3b;
	
	--shadow-color: rgba(0, 0, 0, 0.2);
	--shadow-color-active: rgba(0, 0, 0, 0.5);
}

/* themes */
.theme1 {
	color: var(--theme1-text-color);
	background-color: var(--theme1-bg-color);
}

body {
	/* font settings */
	font-family: 'Lato';
	font-weight: 400;
	font-style: normal;
	
	/* size settings */
	margin: 0px;
	min-height: 100vh;
	
	> * {
		background-color: var(--bg-color);
	}
}

/* flex */
.container {
	display: flex;
	flex-wrap: wrap;
}

.column {
	flex-direction: column;
}

.row {
	flex-direction: row;
}

.f1 {
	flex-grow: 1;
}

.main-around {
	justify-content: space-around;
}

.cross-around {
	align-content: space-around;
}

.right {
	justify-content: flex-end;
}

.left {
	justify-content: flex-start;
}

.card {
	box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color);
	
	&:hover {
		box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color-active);
	}
	
	&.no-click:hover {
		box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color);
	}
}

/* tabs */	
.tabs {
	.tab {
		box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color-active);
		
		cursor: pointer;
		
		&:not(.open) {
			box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color);
			
			&:hover {
				box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color-active);
			}
		}
	}
	
	.tab-content {
		display: none;
		
		&.open {
			display: block;
		}
	}
}

.product-category {
	text-decoration: none;
}

.product-image {
	width: -moz-calc(100% - 1rem);
	width: -webkit-calc(100% - 1rem);
	width: -o-calc(100% - 1rem);
	width: calc(100% - 1rem);
}

.product-text {
	text-align: center;
	font-size: large;
	font-weight: 500;
	color: black;
}

.gallery {
	img {
		width: -moz-calc(50vw - 3rem);
		width: -webkit-calc(50vw - 3rem);
		width: -o-calc(50vw - 3rem);
		width: calc(50vw - 3rem);
	}
}

.modal.gallery-modal {
	max-width: none;
	
	img {
		width: 100%;
	}
}

/* general */
.pad {
	padding: 0.5rem;
}

.margin {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.italic {
	font-style: italic;
}

.logo {
	height: 3rem;
	padding-left: 1rem;
	
	> * {
		font-family: 'Merriweather'
	}
	
	.lg {
		font-size: 2.5rem;
		margin-right: -0.5rem;
		margin-left: -0.5rem;
	}
	
	.sm {
		font-size: 1.25rem;
	}
}

.tagline {
	font-size: small;
}

.contacts {
	.contact {
		padding: 1rem;
	}
	
	text-align: center;
	padding: 1rem;
}

.glyph {
	height: 29px;
	margin-right: 0.5rem;
}

.no-link {
	text-decoration: none;
}

.banner {
	box-shadow: inset 0 1rem 2rem 0.5rem rgba(0, 0, 0, 0.25);
}

.footer {
	box-shadow: inset 0 -1rem 2rem 0.5rem rgba(0, 0, 0, 0.25);
	align-items: center;
	
	.phone {
		a {
			color: var(--theme1-text-color);
		}
		font-size: small;
		padding: 0.5rem;
	}
}

.about {
	max-width: 75vw;
	line-height: 2;
}

.partners {
	img {
		width: 12rem;
	}
}