/*

Sähköinsinöörikillan ilmoittautumislomake
Aleksi Pirttimaa ja muut
Sähköinsinöörikilta Ry:lle 2020

*/
body {
	/*
	background-color: #D2D9F2;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top,center;
	*/

	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: 18px;
	color: #000000;

	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;

	max-width: 768px;
}

nav {
	background-color: #FFFFFF;
	font-family: "Open Sans", sans-serif;
	font-size: 0.9em;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-start;
}
nav a {
	border-radius: 2em;
	padding: .5em 1.3em .55em 1.3em;

	transition: background .1s, color .2s;
}
nav a:hover {
	text-decoration: none;
	background: #8C55AA;
	color: #FFFFFF;
}

header img {
	width: 100%;
	min-height: 250px;
	object-fit: cover;
}
#coctailDetails {
	background-color: #F8F8F8;
	padding: 1em;
	margin-top: 1em;
	border-radius: 1em;
	border: 1px solid #CCCCCC;
}
#avecDetails {
	background-color: #F8F5FC;
	padding: 1em;
	margin-top: 1em;
	border-radius: 1em;
	border: 1px solid #D3B6E7;
}
article {
	background-color: #FFFFFF;
	padding-top: 2.2em;
	padding-left: 1.4em;
	padding-right: 1.4em;
	padding-bottom: 2.2em;

	margin-bottom: 3em;
}
article p {
	margin: 1em 1.4em 2.1em 1.4em;
}
section.enrollees {
	padding-left: 4em;
}
article a {
	padding-left: 1em;
	padding-right: 1em;
}
fieldset {
	border: 0em none;
	margin-top: 0.8em;
	margin-bottom: 0.4em;
	text-align: right;
	padding: 0.3em;
}
fieldset.submit {
	text-align: center;
}
fieldset.submit input {
	min-width: 12em;
	margin-left: auto;
	margin-top: 2em;
}
#avecDetails {
	background-color: #F8F5FC;
	padding: 1em;
	margin-top: 1em;
	border-radius: 1em;
	border: 1px solid #D3B6E7;
}
input[type=submit] {
	background: #8C55AA;
	border: 2px solid #8C55AA;
	border-radius: 3em;
	color: #FFFFFF;
	font-family:  "Open Sans", sans-serif;
	font-size: 1em;
	padding: 0.5em 1.5em 0.5em 1.5em;

	transition: background .2s, color .2s;
}
input[type=submit]:hover {
	background: #FFFFFF;
	color: #8C55AA;
}
/*
input[type=text], input[type=email] {
	background: #FFFFFF;
	border: none;
	box-shadow: 0em 0.066em 0em 0em #8C55AA;
	padding: 0.5em 1.2em 0.5em 1.2em;
	font-size: 0.9em;

	transition: border .2s, transform .2s, box-shadow 1s .5s;
}
input[type=text]:invalid, input[type=email]:invalid, input[type=text]:focus, input[type=email]:focus {
	transform: translate(.06em, -.06em);
	border: 0.125em solid #8C55AA;
	border-radius: 3em;
	box-shadow: none;
}
*/

p.warn {
	color: #FF0000;
	font-size: 1.4em;
	padding-left: 1em;
	padding-right: 1em;
}
p.datehint {
	color: #666666;
	text-align: right;
}
p.countdown {
	font-size: 2em;
	position: relative;
	top: -1.1em;
}

aside.sponsorit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;

	max-width: 720px;

	margin-bottom: 3em;
}
aside.sponsorit img, aside.sponsorit svg {
	background-color: #FFFFFF;
	padding: 0.6em;
	width: 170px;
	height: 170px;
	object-fit: contain;

	margin: 1em;

	transition: transform .2s;
}
aside.sponsorit img:hover, aside.sponsorit svg:hover {
	transform: scale(1.1);
}
/*
nav, header img, article, aside.sponsorit img, aside.sponsorit svg {
	box-shadow: 0em 0em 0em 1px #6666AA;
}
*/
footer {
	font-family: "Open Sans", sans-serif;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 2em;
	color: #8C55AA;
}
footer a {
	color: #8C55AA;
}
h1 {
	font-size: 2.2em;
}
h2 {
	font-size: 1.8em;
}
h3 {
	font-size: 1.2em;
}

a {
	color: #666666;
}
a:link, a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

@media only screen and (min-width: 1366px) {
	aside.sponsorit {
		position: absolute;
		width: 200px;
		max-width: auto;
		right: 3em;
		top: 2.8em;
	}
}

@media only screen and (max-width: 512px) {
	nav {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}
	nav span {
		margin-left: 3em;
		margin-top: 1em;
		margin-bottom: 0.8em;
	}
	nav a {
		padding: .7em 1.5em .77em 1.5em;
	}
}

@media only screen and (max-width: 768px) {
	header img {
		min-height: unset;
	}
	p.countdown {
		font-size: 1.2em;
	}
}