@font-face {
	font-family: The Sims Sans SC Bold;
	src: url('../fonts/tss_bold.woff') format('woff'),
		url('../fonts/tss_bold.ttf') format('truetype');
}

@font-face {
	font-family: The Sims Sans SC;
	src: url('../fonts/tss.woff') format('woff'),
		url('../fonts/tss.ttf') format('truetype');
}

body {
	font-family: The Sims Sans SC;
	background: -webkit-linear-gradient(left top, #2764a3, #49aa8b);
	background: -o-linear-gradient(bottom right, #2764a3, #49aa8b);
	background: -moz-linear-gradient(bottom right, #2764a3, #49aa8b);
	background: linear-gradient(to bottom right, #2764a3, #49aa8b);
}

.left {
	float: left;
	width: 340px;
	padding: 10px;
}

.center {
	float: right;
	width: 340px;
	padding: 10px;
	margin-right: 10px;
}

.logo {
	float: left;
	width: 710px;
	padding: 10px;
	margin-bottom: 9px;
}

.inner_logo {
	margin: auto;
	width: 383px;
}

.inner_button {
	margin: auto;
	width: 610px;
}

.main_button {
	width: 300px;
	float: left;

}

.right {
	float: right;
	width: 340px;
	padding: 10px;

}

#footer {
	clear: both;
	text-align: center;
	color: #bababa;
}

#column_container {
	width: 1100px;
	margin: 0 auto;
}

input[type=button] {
	background: #2764a3;
	color: white;
	border-color: white;
	font-size: 20px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	border-radius: 7px;
	border: 2px solid white;
	padding: 3px;
	margin: 2px;
	text-shadow: -1px 1px 3px black;
}

input[type="submit"]#clean_all {
	background: #49aa8b;
	color: white;
	border-color: white;
	font-size: 20px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	border-radius: 7px;
	border: 2px solid white;
	padding: 3px;
	margin: 2px;
	margin-bottom: 0px;
}


input[type=text] {
	background: white;
	font-size: 20px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	border-radius: 7px;
	border: none;
	color: #2764a3;
	padding: 3px;
	margin: 2px;
}

select {
	background: white;
	font-size: 20px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	border-radius: 7px;
	border: none;
	color: #2764a3;
	padding: 3px;
	margin: 2px;
}

.parent_select {
	width: 200px;
}

.logos {
	margin-bottom: -8px;
	margin-left: 4px;
}

h1 {
	color: white;
	font-size: 32px;
	top: 0;
	left: 100px;
	font-family: "The Sims Sans SC Bold", "Tahoma", "Helvetica", sans-serif;
	font-weight: normal;
	text-shadow: -1px 1px 3px black;
	margin: 0px
}

h2 {
	color: #2764a3;
	font-size: 26px;
	margin: 0px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	font-weight: normal;
	text-shadow: -1px 1px 3px white;
}


#colorbox {
	background-color: #91b4d4;
	border-color: #1042b2;
	text-align: center;
	border-radius: 25px;
	position: relative;
	padding-bottom: 20px;
	margin-top: 5px;
}

#borderbox {
	background-color: #91b4d4;
	border-color: white;
	border-style: solid;
	border-width: medium;
	text-align: center;
	border-radius: 25px;
	position: relative;
	margin: 20px;
	padding-bottom: 20px;
}

.round_stuff {
	position: absolute;
	top: -2;
	left: -2;
	height: 35px;
}

#zag {
	color: white;
	font-size: 32px;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
	font-weight: normal;
	text-shadow: -1px 1px 3px black;
}


#footer {
	position: absolute bottom:30px;
	width: 100%;
	font-size: 70%;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;
}

#footer a {
	position: absolute bottom:30px;
	width: 100%;
	font-size: 70%;
	font-family: "The Sims Sans SC", "Tahoma", "Helvetica", sans-serif;

}

.left input[type=text] {
	margin-top: 3px;
	margin-bottom: 3px;
}

.left #colorbox {
	padding-top: 5px;
}

.left input[type=button] {
	margin-top: 7px;
	margin-bottom: 7px;
}

.right select {
	margin-top: 3px;
	margin-bottom: 3px;
}

.right input[type=button] {
	margin-top: 5px;
	margin-bottom: 4px;
}

.leftBlock {
	float: left;
	/* clear: left; */
	width: 740px;
}

.buttonClass {
	width: 300px;
}

.inputClass {
	width: 256px;
}

.trait_select {
	width: 248px;
}


@media only screen and (max-device-width: 480px) {
	.mobile {
		clear: both;
		width: 93%;
		float: left;
	}

	input[type=button] {
		font-size: 40px;
	}

	input[type=text] {
		font-size: 40px;
	}

	select {
		font-size: 40px;
		width: initial;
		display: inline-block;
	}


	.main_button {
		width: 450px;
		float: left;
	}

	.inner_logo {
		display: flex;
		width: initial;
	}

	body {
		position: absolute;
		width: 100vw;
	}

	.logo {
		width: 100%;
	}

	.inner_button {
		width: 100%;
	}

	.buttonClass {
		width: initial;
		display: inline-block;
	}

	.inputClass {
		width: initial;
		display: inline-block;
		font-size: 40px;
	}

	.logos {
		height: 50px;
	}

	.parent_select {
		width: initial;
	}

	.trait_select {
		width: initial;
	}

}