@import url('https://fonts.googleapis.com/css?family=Fontdiner+Swanky|ABeeZee|Baumans|Carter+One|Fredoka+One');
/*
rgb(45, 95, 134)
rgb(87, 162, 150)
rgb(113, 208, 135)
rgb(192, 214, 179)
rgb(232, 232, 227)

#2d5f86 darkblue
#57a296 saturated green
#71d087 green
#c0d6b3 light saturated green
#e8e8e3 light grey green
*/

body{
	background-color: #f2f2e7; /*light grey green*/
	background-image: url(img/baby-namen-generator-bg.png);
	background-position: -150px -260px;
	text-align: center;
	color: #2d5f86; /*darkblue*/
	padding: 0;
	margin: 0;
    font-family: "ABeeZee", sans-serif;
}
.clear{
	clear: both;
	width: 100%;
}
#media-box a:hover{
	opacity: .8;
}
@media only screen and (min-width: 830px){
	h1{
		font-family: "Carter One", cursive;
		background-color: #2d5f86; /*darkblue*/
		color: #e8e8e3; /*green*/
		padding: 10px 0;
		margin: 0 auto 30px auto;
		font-size: 45px;
	}
	#media-box{
		position: absolute;
		right: 10px;
		top: 10px;
	}
}
@media only screen and (max-width: 830px){
	h1{
		font-family: "Carter One", cursive;
		background-color: #2d5f86; /*darkblue*/
		color: #e8e8e3; /*green*/
		padding: 50px 0;
		margin: 0 auto 30px auto;
		font-size: 45px;
	}
	#media-box{
		position: absolute;
		left: calc(50% - 65px);
		top: 10px;
	}
}
@media only screen and (min-width: 728px){
	.add-large{
		display: inline-block;
		width: 728px;
		text-align: center;
		height: 90px;
		margin: 0 auto;
	}
	.add-small{
		display: none;
	}
}
@media only screen and (max-width: 728px) and (min-width: 468px){
	.add-large{
		display: none;
	}
	.add-small{
		display: inline-block;
		width: 468px;
		height: auto;
		text-align: center;
		margin: 0 auto;
	}
}
.gender{
	display: inline-block;
	margin-bottom: 30px;
	line-height: 40px;
	width: 180px;
	font-size: 20px;
	border: 1px solid #2d5f86; /*darkblue*/
	border-radius: 10px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .8);
}
#first-letter{
	font-size: 20px;
	text-align: center;
	width: 28px;
	padding: 5px;
	border: solid 1px #2d5f86 /*darkblue*/;
	border-radius: 5px;
	margin: 10px 0;
	background-color: rgba(255, 255, 255, .5);
}
label{
	font-size: 20px;
	width: 28px;
	padding: 5px;
	margin: 10px 0;
}
#first-letter:hover{
	background-color: rgba(255, 255, 255, 1);
}
#button{
	display: inline-block;
	background-color: #2d5f86; /*darkblue*/
	border-radius: 50px;
	font-size: 22px;
	padding: 5px 13px 8px 13px;
	cursor: pointer;
	color: #e8e8e3; /*light grey green*/
	border: none;
	opacity: .8;
	margin-bottom: 10px;
}
#button:hover{
	opacity: 1;
}
#result{
	color: #71d087; /*green*/
	font-size: 35px;
    text-transform: capitalize;
	text-shadow: #2d5f86 1px 1px 0;
}
.male, .female{
	font-weight: bold;
}
#result .male{
	color: #338bff;
	text-shadow: #338bff 1px 1px, #338bff 1px -1px, #338bff -1px 1px, #338bff -1px -1px, #338bff 0 -1px, #338bff -1px 0, #338bff 0 1px, #338bff 1px 0;
}
#result .female{
	color: #ff00dd;
	text-shadow: #ff00dd 1px 1px, #ff00dd 1px -1px, #ff00dd -1px 1px, #ff00dd -1px -1px, #ff00dd 0 -1px, #ff00dd -1px 0, #ff00dd 0 1px, #ff00dd 1px 0;
}
.arrow{
	display: inline-block;
	opacity: .8;
	cursor: pointer;
}
#back{
	float: left;
	margin-left: 10%;
}
#next{
	float: right;
	margin-right: 10%;
}
.arrow:hover{
	opacity: 1;
}
#result .beschrijving{
	font-size: 22px;
    text-transform: none;
	width: 90%;
	margin: 0 auto;
}
#result .beschrijving span{
	font-size: 17px;
    text-transform: none;
	color: #2d5f86; /*darkblue*/
	text-shadow: none;
}
i:before {
	cursor: pointer;
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #2d5f86; /*darkblue*/
    font-size: 50px;
	opacity: .8;
}
i:hover:before {
	opacity: 1;
}
@media only screen and (min-width: 900px){
	#download-content{
		display: table;
		color: #71d087;
		font-size: 30px;
		padding: 10px;
		padding-bottom: 40px;
		width: calc(45% - 20px);
		margin: 30px auto 60px auto;
		background-color: rgba(255, 255, 255, .5);
		border-radius: 20px;
		box-shadow: 0 0 4px #bbb;
		text-shadow: #2d5f86 1px 1px 0;
	}
	#favorieten hr{
		background-color: #bbb; 
		height: 1px; 
		border: 0;
		margin-top: -15px;
		margin-bottom: -55px;
		width: 80%;
	}
}
@media only screen and (max-width: 900px){
	#download-content{
		display: table;
		color: #71d087;
		font-size: 30px;
		padding: 10px;
		padding-bottom: 40px;
		width: calc(90% - 20px);
		margin: 30px auto 60px auto;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 0 4px #bbb;
		text-shadow: #2d5f86 1px 1px 0;
	}
	#favorieten hr{
		background-color: #bbb; 
		height: 1px; 
		border: 0;
		margin-top: -15px;
		margin-bottom: -55px;
		width: 90%;
	}
}
#download-content #download{
	float: right;
	margin: 15px;
	opacity: .8;
}
#download-content img{
	border-radius: 20%;
}
#download-content #download:hover{
	opacity: 1;
}
#transparant{
	float: left;
	margin: 15px;
}
#favorieten p{
	font-size: 16px;
	width: 90%;
	margin: 0 auto;
	text-shadow: none;
	color: #2d5f86; /*darkblue*/
}
h2{
	font-size: 25px;
	margin-bottom: -30px;
}
#favorieten .male, #favorieten .female{
	font-size: 30px;
}
#favorieten .male{
	color: #338bff;
	text-shadow: none;
}
#favorieten .female{
	color: #ff00dd;
	text-shadow: none;
}
#favorieten .beschrijving{
	font-size: 18px;
    text-transform: none;
	margin-top: -40px;
}
#favorieten .beschrijving span{
	font-size: 16px;
    text-transform: none;
	color: #2d5f86; /*darkblue*/
	text-shadow: none;
}
footer{
	background-color: #2d5f86; /*darkblue*/
	color: #f2f2e7; /*light grey green*/
	bottom: 0;
	font-size: 14px;
	width: 100%;
	line-height: 30px;
}