:root {
	--one: #ad151f;
	--one_hov:#e79664;
	--two: #e3793d;
	--two_hov:#f4d043;
	--three: #93c768;
	--three_hov:#d86759;
	--four: #fd706d;
	--four_hov:#ffe351;
	--five: #7eb1c4;
	--five_hov:#a7c85f;
	--six: #ea181f;
	--six_hov:#f7bc65;
}
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* ==========================================================================
   Base styles
   ========================================================================== */
html {
  color: #222;
  font-size: calc(15px + 0.390625vw);
  line-height: 1.4;
}
::-moz-selection {
  background:  rgb(255, 232, 0);
  text-shadow: none;
  color: black;
}
::selection {
  background:  rgb(255, 232, 0);
  text-shadow: none;
  color: black;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}


body {
	background: black;
	font-family: "Fredoka", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-variation-settings:
	"wdth" 100;
	color: white;
	text-align: center;
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: 120px;
	padding: 10px 0;
}
.one header {
	background: url(img/headers/1.webp) no-repeat;
	background-size: cover;
}
.two header {
	background: url(img/headers/2.webp) no-repeat;
	background-size: cover;
}
.three header {
	background: url(img/headers/3.webp) no-repeat;
	background-size: cover;
}
.four header {
	background: url(img/headers/4.webp) no-repeat;
	background-size: cover;
}
.five header {
	background: url(img/headers/5.webp) no-repeat;
	background-size: cover;
}
header ul {
	list-style: none;
	margin: 8px auto;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
header li {
	margin: 0 10px;
}
.one a:link, 
.one a:visited {
	color: var(--one);
	text-decoration: underline;
}
.one a:hover, 
.one a:active {
	color: var(--one_hov);
	text-decoration: none;
}
.two a:link, 
.two a:visited {
	color: var(--two);
	text-decoration: underline;
}
.two a:hover, 
.two a:active {
	color: var(--two_hov);
	text-decoration: none;
}
.three a:link, 
.three a:visited {
	color: var(--three);
	text-decoration: underline;
}
.three a:hover, 
.three a:active {
	color: var(--three_hov);
	text-decoration: none;
}
.four a:link, 
.four a:visited {
	color: var(--four);
	text-decoration: underline;
}
.four a:hover, 
.four a:active {
	color: var(--four_hov);
	text-decoration: none;
}
.five a:link, 
.five a:visited {
	color: var(--five);
	text-decoration: underline;
}
.five a:hover, 
.five a:active {
	color: var(--five_hov);
	text-decoration: none;
}
.six a:link, 
.six a:visited {
	color: var(--six);
	text-decoration: underline;
}
.six a:hover, 
.six a:active {
	color: var(--six_hov);
	text-decoration: none;
}
header ul li a:link,
header  ul li a:visited,
header h1 a:link,
header h1 a:visited {
	color: black !important;
	text-decoration: none !important;
}
header ul li a:hover,
header ul li a:active,
header h1 a:hover,
header h1 a:active {
	opacity: 0.5 !important;
	text-decoration: none !important;
}
h1 {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-size: 2.4rem;
	font-optical-sizing: auto;
	font-variation-settings:
	"wdth" 100;
	color: black;
}
header h1 {
	margin: 5px auto;
}
h3 {
	font-family: "Fredoka", sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	font-optical-sizing: auto;
	font-variation-settings:
	"wdth" 100;
	margin: 3px auto;
}
p {
	margin-top:4px;
}
main {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 4% 15px 4%;
	box-sizing: border-box;
}
main img {
	width: 100%;
}
main img.signature {
	max-width: 827px;
	margin-top: 15px;
}
.work main {
	flex-flow: row wrap;
}
.home main {
	flex-flow: column wrap;
}
.button-gallery {
	width: 50%;
}
.button-gallery img {
	width: 100%;
}
.imageGallery {
	display: none;
}
/* ==========================================================================
	WORK
========================================================================== */
#work {
	display: grid;
	grid-template-rows: minmax(100px, auto);
	grid-template-columns: 28% 28% 28%;
	grid-gap: 80px 8%;
}
#work div {
	text-align: center;
}
#work p {
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-top:4px;
	font-weight: 300;
}
.info {
	width: 100%;
	margin-bottom: 30px;
}
.work.one h3 {
	color: var(--one);
}
.work.two h3 {
	color: var(--two);
}
.work.three h3 {
	color: var(--three);
}
.work.four h3 {
	color: var(--four);
}
.work.five h3 {
	color: var(--five);
}
.work.six h3 {
	color: var(--six);
}

/* ==========================================================================
	FOOTER
========================================================================== */
footer {
	text-align: center;
}
footer p.legal {
	font-size: 0.7rem;
	color: #a0a0a0;
	font-family: Helvetica, sans-serif;
	font-weight: 400;
	margin: 50px auto 30px auto;
}
/* ==========================================================================
	  LIGHT BOX
========================================================================== */



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media screen and (max-width: 800px) {
	.button-gallery {
		width: 80%;
	}
}
@media screen and (max-width: 450px) {
	.button-gallery {
		width: 90%;
	}
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden,
[hidden] {
  display: none !important;
}
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
.invisible {
  visibility: hidden;
}
/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}