html {
	--darkblue-transparent: rgba(44, 46, 53, 0.6);
	--darkblue: rgb(44, 46, 53);
}

@font-face {
	/*font-family: Baskerville;*/
	/*src: url('fonts/baskvl.ttf');*/
}

body, html {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif !important;
	/*font-family: Baskerville !important;*/
	font-size: 17px;
	height: fit-content;
	width: 100%;
}

body {
	margin-top: -34px;

}

/*p {
	text-align: left !important;
}*/

a {
	color: lightseagreen !important;
}

.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background-color: var(--darkblue);
	/*margin-top: -70px;*/
	z-index: 1;
}

#menu ul {
	list-style-type: none;
	height: 100%;
	padding-inline-start: 0;
}

#menu li {
	height: 100%;
	float: left;
	width: calc(100% / 10);
	/*display: flex;*/
	/*align-items: center;*/
	/*justify-content: center;*/
}

#menu a {
	text-align: center;
	color: white !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1px 10px;
	height: 100%;
	width: 100%;
	line-height: 1.2;
	font-size: 15px;
}

#menu a:hover {
	color: lightseagreen !important;
	text-decoration: none;
}

/*#menu {
	position: fixed;
	right: 0;
	top: 0;
	width: 15%;
	margin-right: -15%;
	height: 100%;
	z-index: 1;
	border-left: 1px solid #D3D3D3;
}

#menu ul {
	list-style-type: none;
	height: 100%;
	padding-left: 0;
}

#menu li {
	text-align: center;
	height: calc(100% / 11);
}

#menu a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0 5%;
	border-bottom: 1px dotted #D3D3D3;
}

#menu a:hover {
	text-decoration: none;
}

#menu li:hover {
	background: lightseagreen;
	color: white;
	cursor: pointer;
	transition: background 0.5s;
}*/

#header-top {
	height: 70px;
	background-color: var(--darkblue);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
}

#header {
	height: 400px;
	background-size: cover;
	position: relative;
}

#svammi {
	height: 100%;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

#header p {
	padding: 7%;
	height: 100%;
	line-height: 1.5;
	color: white;
	background-color: var(--darkblue);
}

h1 {
	font-size: 50px;
	text-transform: uppercase;
	padding: 30px;
}

/*p {
	text-align: justify;
}
*/
#wrapper {
	padding-left: 0;
	padding-right: 0;
}

/* QUOTE */

#quote {
	padding: 50px 15%;
}

#quote h3 {
	padding: 50px 0 30px 0;
}

#quote img {
	width: 300px;
	float: left;
	margin-right: 20px;
}

/* STORIES */

#stories {
	background-color: #e2e4e8;
	padding: 50px 15%;
}

#stories .row {
	padding-top: 50px;
}

#stories-2 {
	background-color: var(--darkblue);
	color: white;
	padding: 50px 15%;
}

#stories-2 img {
	width: 100%;
}

#stories > div {
	padding-right: 5px;
	padding-left: 5px;
}

#stories .img-box {
	border: 1px solid #e2e4e8;
	height: 100%;
	background-color: white;
	border-radius: 5px;
}

#stories .img-box div {
	padding: 20px;
}

#stories img.small {
	width: 100%;
	border-radius: 5px 5px 0 0;
}

#stories-2 .alignRight img.big {
	float: right;
}

#stories-2 .row:first-child {
	margin-bottom: 50px;
}

#speciesism, #vegan-life {
	margin: 0;
	padding: 0 15% 0 15%;
}

#speciesism {
	padding-bottom: 20px;
}

#speciesism img {
	float: left;
	width: 50%;
}

#stories img.big {
	width: 500px;
}

#stories div.img-box {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#stories div.img-box-horizontal {
	display: flex;
	align-items: center;
	flex-direction: row;
}

#stories div.img-box-horizontal img.small {
	width: 30%;
	border-radius: 5px 0 0 5px;
}

.left, .right {
	background: #2c2e35;
	color: white;
	line-height: 1.5;
	border-bottom: 1px solid #D3D3D3;
}

.left.image, .right.image {
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.side-image {
	min-height: 400px;
}

.center-image {
	min-height: 600px;
}

.left.text, .right.text {
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.left.image img, .right.image img {
	width: 100%;
}

.text {
	padding: 20px 0;
}

.left.text p, .right.text p {
	padding: 0 20px;
}

.center.text h3 {
	text-align: center;
	padding: 50px 0 30px 0;
}

.center.text p {
	margin: 20px;
}

#speciesism h3, #vegan-life h3 {
	text-align: center;
	padding: 50px 0 30px 0;
}

/*#speciesism > div {*/
	/*margin-bottom: 40px;*/
/*}*/

.side-image {
	height: 50%;
	background-size: cover;
	background-position: center;
	min-height: 350px;
	border: 1px solid #D3D3D3;
}

.center-text {
	padding: 0 50px !important;
}

#impact {
	padding: 0 15%;
	background-color: var(--darkblue);
}

#impact .half {
	background-size: cover;
	background-position: center;
	color: white;
	padding-left: 0;
	padding-right: 0;
}

.dark {
	background-color: var(--darkblue-transparent);
	height: 100%;
	padding-bottom: 20px;
}

#impact .half h3 {
	padding: 50px 0 30px 0;
}

#environment .banner {
	height: 400px;
	background-position: bottom;
	background-size: cover;
	margin: 15px 0;
}

#environment h3,
#vegan-valjakutse h3 {
	text-align: center;
	padding: 50px 0 30px 0;
	width: 100%;
}

#environment p {
	padding: 0 15%;
}

.img-line {
	height: 300px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.img-line div {
	width: 100%;
	height: 100%;
	float: left;
	background-size: cover;
}

#info {
	background-color: #2c2e35;
	color: white;
	padding: 50px 0;
}

#info h3, #info h4 {
	width: 100%;
	text-align: center;
}

.links a {
	min-width: 300px;
	padding: 15px 0;
	margin: 0 20px 10px 0;
	color: white !important;
	display: block;
	text-align: center;
	border: 1px solid #D3D3D3;
}

.links a:hover {
	background-color: lightseagreen;
	transition: background-color 0.5s;
	text-decoration: none;
}

#info .links {
	margin: 30px 0;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#info .social {
	text-align: center;
	width: 100%;
	margin: 30px 0;
}

#info .social p {
	text-align: center;
}

#info img {
	margin: 30px 0;
	width: 100px;
	-webkit-filter: invert(1);
   filter: invert(1);
}

#vegan-valjakutse {
	padding: 0 15% 40px 15%;
}

#vegan-valjakutse h3 {
	text-align: center;
}

#vegan-valjakutse .link a {
	background-color: #dadce1;
	border: 1px solid lightseagreen;
	width: 300px;
	padding: 15px 0;
	display: flex;
	/*color: white !important;*/
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

#vegan-valjakutse a:hover {
	background-color: lightseagreen;
	text-decoration: none;
	color: #dadce1 !important;
}

#vegan-valjakutse a:visited {
	text-decoration: none;
	color: white;
}

@media (max-width: 576px) {
	#quote img {
		width: calc(100% - 40px);
		margin-bottom: 20px !important;
	}

	#stories > div {
		margin-top: 20px;
	}

	#stories-2 img {
		width: 100% !important;
		margin-bottom: 20px !important;
	}

	.img-line {
		height: 150px !important;
	}
}

@media (max-width: 768px) { 
	#stories .last-box {
		margin-top: 20px;
	}

	#stories-2 img {
		width: 50%;
		float: left;
		margin: 0 20px 0 0;
	}

	.img-line {
		height: 200px;
	}

	.banner {
		height: 250px !important;
	}
}

@media (max-width: 1200px) {
	#menu {
		display: none;
	}

	#stories,
	#stories-2,
	#quote {
		padding: 50px 2%;
	}

	#speciesism,
	#vegan-life,
	#vegan-valjakutse {
		padding: 50px 0 0 0;
	}

	#vegan-valjakutse {
		padding-bottom: 100px;
	}

	#speciesism p {
		padding: 0 20px;
	}

	.img-line {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#impact {
		padding: 0;
	}

	.dark p, #quote p {
		padding: 0 20px;
	}

	.dark h3, #quote h3 {
		padding: 30px 20px !important;
	}

	#quote img {
		margin: 0 20px;
	}

	#environment {
		margin: 0;
	}

	#environment p {
		padding: 0 20px;
	}
}


// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }