/* miau-koodi */
html{background-color: #f3efe4;}
a{color: #e47d7e; text-decoration: none;}
body header{
	height: 484px;
	background: #f3efe4 url(../img/header_bg.jpg) no-repeat center center;
	text-align: center;
	position: relative;
}
img#logo{width: 300px; margin: 4em 0; max-width: 96%;}
p.description{
	font-size: 1.25em; color: #e47d7e; 
	text-shadow: 2px 2px 2px #fff; filter: dropshadow(color=#fff, offx=2, offy=2);
	position: absolute; top: 68%; left: 6%;
}
@media only screen and (max-width: 800px) {
	p.description{top: 9em;}
}
p.description span{font-weight: bold;}
a#sign-up{
	font-family: 'Sniglet', cursive; font-size: 1.5em; color: #f3efe4; text-transform: uppercase;
	border: 0; background-color: #e47d7e; padding: 1em;
	-webkit-box-shadow:  2px 2px 8px 0px #fff; box-shadow:  2px 2px 8px 0px #fff;
	-webkit-border-radius: 10px; border-radius: 10px;
	position: absolute; right: 5%; top: 66%;
}
div.main{	
	background: rgb(250,213,169); /* Old browsers */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiNmYWQ1YTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiNkZWJiYjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(250,213,169,1) 15%, rgba(222,187,181,1) 85%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,rgba(250,213,169,1)), color-stop(85%,rgba(222,187,181,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(250,213,169,1) 15%,rgba(222,187,181,1) 85%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(250,213,169,1) 15%,rgba(222,187,181,1) 85%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(250,213,169,1) 15%,rgba(222,187,181,1) 85%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(250,213,169,1) 15%,rgba(222,187,181,1) 85%); /* W3C */	
	text-align: center;
	padding-bottom: 0;
}
h1{
	font-family: 'Sniglet', cursive; font-size: 2em; color: #e47d7e; text-transform: uppercase;
	text-shadow: 2px 2px 2px #fff; filter: dropshadow(color=#fff, offx=2, offy=2);
	padding-left: 2px; padding-right :2px;
}

/* profiilit */
div.profile{
	padding: 1em 5%; width: 90%;
	text-align: left;
}
div.profile-content{
	float: right; width: 60%; padding-right: 3%;
}
div.profile-content h2 {color: #884942;}
div.profile-content p{color: #884942; font-size: 1.6em; line-height: 1.25em;}
div.profile img{
	float: left; margin-left: 3%;
	-webkit-border-radius: 50%; border-radius: 50%;
}
.flexslider .slides .profile img{width: 200px;}
@media only screen and (max-width: 800px) {
	.flexslider .slides .profile img{width: 100%; max-width: 120px;}
	div.profile-content p{font-size: 1em;}
}
@media only screen and (max-width: 550px) {
	div.profile-content {width: 100%;}
	.flexslider .slides .profile img{width: 100%; max-width: 200px;}
}

/* info */
div#info{
	background-color: #f3efe4; 
	padding: 1em 5% 3em 5%; width: 90%; 
	text-align: left;
}
h3{ font-family: 'Sniglet', cursive; font-size: 1.5em; color: #e47d7e;}
#info p{color: #884942; padding-right: 5%; margin-bottom: 2em;}
a.info-button{
	display: block; float: left;
	width: 160px; padding-left: 20px; padding-right: 20px; height: 130px; padding-top: 70px;
	background-color: #e47d7e; color: #fff;
	-webkit-border-radius: 50%; border-radius: 50%;
	text-align: center;
	line-height: 20px;
}
a.info-button-middle{margin: 0 8%;}
@media only screen and (max-width: 800px) {
	a.info-button{
		width: 94%; height: 6em;
		margin-left: 0%;
		margin-bottom: 1em;
		padding: 2em 0; 
		height: auto;
		-webkit-border-radius: 20px; border-radius: 20px;
	}
	
}
span.button-title{
	display: block; 
	font-size: 2.5em;
	margin-bottom: 20px;
}

form#signup{
	display: block;
	position: relative;
	margin: 0 auto;
	width: 400px;
	padding: 1em 50px;
	background-color: #fff;
	-webkit-box-shadow:  0px 0px 50px  #000; box-shadow:  0px 0px 50px  #000;
}
@media only screen and (max-width: 550px) {
	form#signup{width: 90%; padding: 1em 5%;}
}
form#signup h3{margin-top: 1em; }
form#signup input{
	border: 2px solid #884942;
	font-family: 'Comic Sans MS';
	padding: 5px 2%;
	width: 96%;
	margin-bottom: 1em;
}
form#signup input[type=submit]{
	width: auto; padding: 5px 5%;
	font-family: 'Sniglet', cursive; font-size: 1.5em; color: #fff;
	background-color: #884942;
}
::-webkit-input-placeholder { /* WebKit browsers */    color:    #debbb5;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color:    #debbb5;}
::-moz-placeholder { /* Mozilla Firefox 19+ */    color:    #debbb5;}
:-ms-input-placeholder { /* Internet Explorer 10+ */    color:    #debbb5;}
.mfp-close-btn-in button.mfp-close {font-family: 'Comic Sans MS','Sniglet', cursive; font-size: 3em; color: #884942; font-weight: 800; opacity: 0.95; right: 40px; top: 10px;}

/* footer */
.footer-left{float: left; width: 55%; margin-left: 6%;}
.footer-right{float: right; width: 30%;}
footer p, footer h3, footer li{
	color: #f3efe4; 
	margin-bottom: 10px;
} 
footer p{font-size: 0.9em; line-height: 1.25em; } 
footer ul{padding-left: 20px;} 
@media only screen and (max-width: 550px) {
	.footer-right, .footer-left{float: none; width: 90%; margin-left: 2%;}

}