/**
 * Fonts
 * -----------------------------------------------------------------------------
 */
@font-face {
	font-family:'BigNoodleTitling';
	src:url("fonts/big_noodle_titling.woff2") format("woff2"),
	url("fonts/big_noodle_titling.woff") format("woff")
}
@font-face {
	font-family:'Nexa Light';
	src:url("fonts/nexa_light.woff2") format("woff2"),
	url("fonts/nexa_light.woff") format("woff")
}

body {
	background-color: #000;
	color: #fff;
	font-family: "Nexa Light", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, strong,
ul, li, form, label, table, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

a:link {
	font-size: 0.95rem;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.20s linear;
}
a:hover {
	color: #666;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
}

h1 {
	font-family: "BigNoodleTitling", sans-serif;
	font-size: 42px;
	margin-bottom: 15px;
	line-height: 1.3;
}
h2 {
	font-family: "Nexa Light", sans-serif;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 300;
}
h3 {
	font-family: "Nexa Light", sans-serif;
	font-size: 20px;
	margin: 20px 0 10px;
}

section.context h2 {
	font-size: 30px;
	margin: 35px 0 20px;
}

p {
	font-family: "Nexa Light", sans-serif;
}

#site {
	background-color: transparent;
	padding: 0;
	margin: 70px auto;
	width: 100%;
	max-width: 1280px;
}

header {
	background-color: transparent;
	display: block;
	text-align: center;
}

header h1 {
	animation: fadein 0.8s ease-out normal backwards;
	animation-delay: 200ms;
	font-size: 80px;
	line-height: 1.0;
}
header h1 span:first-of-type {
	color: #E4007D;
}
header h1 span:nth-of-type(2) {
	color: #009DE2;
}
header h1 span:nth-of-type(3) {
	color: #EC6701;
}

header h2 {
	animation: fadein 0.8s ease-out normal backwards;
	animation-delay: 400ms;
}

header .logo {
	animation: fadein 0.8s ease-out normal backwards;
	animation-delay: 600ms;
	margin: 50px 0;
}

header img {
	width: 100%;
	max-width: 419px;
}

@keyframes fadein {
	0% {transform: scale(0);}
	100% {transform: scale(1);}
}


#content {
	background-color: transparent;
}

section {
	background-color: transparent;
	color: #fff;
	font-family: "Nexa Light", sans-serif;
	margin: 0;
}

section.conimg {
	display: block;
}
section.conimg img {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

section.context {
	background-color: #efefef;
	color: #111;
	padding: 50px 3%;
}

/* accordion */
.accordion input{
  display: none;
}
.accordion .panel {
  margin: 0 auto;
  height: 0;
  overflow:hidden;
  background-color: white;
  line-height: 1.4;
  padding: 0 20px;
  box-sizing: border-box;
  transition: all 0.5s;
}
.accordion input:checked~.panel {
  height: auto;
  color: #111;
  padding: 20px 10%;
  transition: all 0.5s;
}
.accordion label {
  cursor: pointer;
  background-color: #E5007D;
  display: block;
  padding: 15px;
  width: 100%;
  color: #fff;
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
}
.accordion input:checked+label {
  background-color: #EF7C00;
}
.accordion label h1 {
	margin-bottom: 0;
}

footer {
	background-color: transparent;
	font-family: "Nexa Light", sans-serif;
	text-align: center;
	font-size: 20px;
	padding: 15% 5% 0;
}
footer a:link {
	font-size: 0.95rem;
	color: #fff;
}
footer a:hover {
	color: #009EE3;
}
footer a:active {
	color: #009EE3;
}
footer a:visited {
	color: #fff;
}

footer img {
	width: 100%;
	max-width: 419px;
}

footer .footer-1,
footer .footer-2,
footer .footer-3,
footer .footer-4 {
	margin-bottom: 40px;
}

footer .footer-4 {
	background-color: #222;
}


/**
 * Media Queries
 * -----------------------------------------------------------------------------
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

@media screen and (min-width: 1024px) {

	h2 {
		font-size: 60px;
	}

	header h1 {
		font-size: 150px;
	}

	section {
		margin: 2% 0;
	}
	section.conimg {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.accordion input:checked~.panel {
	  padding: 20px 3%;
	}

	footer {
		padding: 5% 5% 0;
	}

}