@import 'flexboxgrid.min.css';
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+SC:ital,wght@0,100..900;1,100..900&family=Fjalla+One&display=swap');

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
	background-color: #373A41;
    font-family: "Verdaba", "sans-serif";
	font-size: 1.2em;
	color: #FFFFFF;
}

body {
    overflow-y: scroll;
	padding-bottom: 6em;
}

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

img {
	max-width: 100%;
}

h1 {
	font-family: "Alumni Sans SC", sans-serif;
	font-weight: 600;
	font-size: 3em;
	line-height: 1em;
	margin: 0.3em 0 0.3em 0;
}

h2 {
	font-family: "Alumni Sans SC", sans-serif;
	font-weight: 600;
	font-size: 2em;
	line-height: 1em;
	margin: 0.3em 0 0.3em 0;
}

#page {
	padding-bottom: 6em;
}

.color-ci01 {
	color: #EA2A8D;
}

.color-ci02 {
	color: #EBAE2A;
}

.hero {
	width: 100%;
	height: 100vh;

	background:
	linear-gradient(
	  to bottom,
	  rgba(0,0,0,0.8) 0%,
	  rgba(0,0,0,0.4) 50%,
	  rgba(0,0,0,0.4) 100%
	),
	url("img/web_Aisha-Beach-Training.jpg");
	background-size: cover;
	background-repeat: no-repeat;

	/* Focus point (x y) */
	background-position: 35% 40%;
}

.teaser {
	font-family: "Fjalla One", sans-serif;
	font-weight: 400;
	text-align: center;
	font-size: 1.5em;
	margin: 0.3em 0 0.3em 0;
}

.mood-img-wrap img {
   
}

.lowres-img {
	filter: blur(0.4px) contrast(1.05) saturate(1.05);
}


.dog-list,
.dog-list ul {
  list-style: none;
  padding-left: 0;
}

.dog-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.3em;
}

/* First level bullet */
.dog-list > li::before {
  content: "👍";
  position: absolute;
  left: 0;
}

/* Second level indentation */
.dog-list ul {
  margin-top: 6px;
  margin-left: 18px;
}

/* Second level bullet */
.dog-list ul li::before {
  content: "🦴";
  position: absolute;
  left: 0;
}


/*** RESPONSIVE ELEMENTS ***/

.wrap {
	width: 92%;
	margin: 0 auto;
	max-width: 600px;
}
.logo {
	text-align: center;
}
.logo img {
	padding-top: 1em;
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.7));
}
.row.margin-low {
	margin: 0.3em 0 0.3em 0;
}
.row.margin-high {
	margin: 1em 0 1em 0;
}

/* Small tablets */
@media (min-width: 600px) {
	.wrap {
		max-width: 720px;
	}
}

/* Tablets / small laptops */
@media (min-width: 768px) {
	.wrap {
		max-width: 840px;
	}
}
/* Small laptops */
@media (min-width: 1024px) {
	.wrap {
		max-width: 1000px;
	}
	.logo {
		float: right;
	}
	.row.margin-low {
		margin: 0.6em 0 0.6em 0;
	}
	.row.margin-high {
		margin: 2em 0 2em 0;
	}
}

/* Desktop */
@media (min-width: 1280px) {
	.wrap {
		max-width: 1200px;
	}
	.row.margin-low {
		margin: 1em 0 1em 0;
	}
	.row.margin-high {
		margin: 3em 0 3em 0;
	}
}

/* Large desktop (~1920px screens) */
@media (min-width: 1920px) {
	.wrap {
		max-width: 1800px;
	}
	.teaser {
		font-size: 2em;
		padding: 0 2em 0 2em;
	}
}