@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700");



body {
	font-family: 'Roboto', sans-serif;
	margin: 50px auto;
	padding: 0px;
}
@media screen and (min-width: 320px) { body { width: 320px; max-width: 320px; } }
@media screen and (min-width: 480px) { body { width: 480px; max-width: 480px; } }
@media screen and (min-width: 768px) { body { width: 768px; max-width: 768px; } }
@media screen and (min-width: 1024px) { body { width: 1024px; max-width: 1024px; } }
@media screen and (min-width: 1200px) { body { width: 1200px; max-width: 1200px; } }

img { width: 100%; }
@media screen and (min-width: 768px) { img { width: initial; } }

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }
a img, a:hover img, a img:hover { text-decoration: none; border: 0; }

h1 { font-size: 4.5em; color: #494949; font-weight: 100 !important; }
h2 { font-size: 2.4em; color: #005f72; }
h3 { font-size: 1.3em; color: #009ab2; }

a.btn-custom, button.btn-custom:not([type='reset']) {
	background-color: #009ab2 !important;
	color: #fff !important;
}



h1 { margin: 75px 0px; text-align: center; }
h1 span { display: block; font-size: 25px; }

div#start { margin: 100px 0px; }
div#start h2, div#start h3 { font-weight: bold; margin: 10px 0px; }
div#start p {
	margin: 20px 0px;
	text-align: center;
	font-size: 20px;
	color: #fbc941;
	padding: 10px 30px;
}
@media screen and (min-width: 768px) {
	div#start img { float: left; }
	div#start p {
		float: right;
		border-width: 0px 0px 2px;
		border-color: #fbc941;
		border-style: solid;
	}
	div#start:after {
		content: "\A";
		display: block;
		height: 0;
		font-size: 0;
		line-height:0;
		clear: both;
		visibility: hidden;
	}
}



.notice { margin: 25px 0px; color: #cc5d0a; text-align: justify; }
.notice span.glyphicon { font-size: 2.5em; display: block; float: left; margin-right: 15px; }

.required label:after { content: " *"; color: #f00; }

.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
}
[hidden] { display: none !important; }

@media screen and (min-width: 768px) {
	form { max-width: 600px; }
	form h3 { margin: 50px 0px 15px; }
}



.jumbotron.alert.alert-danger h2 { color: #a94442; }
.jumbotron.alert.alert-success h2 { color: #3c763d; }



.nav-tabs { margin: 25px 0px; }
.nav-tabs a { color: #009ab2; font-weight: bold; }
.tab-pane form { margin: 15px 0px; }

@media screen and (min-width: 768px) {
	form.chat { max-width: initial; }
}
form.chat div { max-width: 75%; margin: 10px 0px; }
form.chat div { border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px; }
form.chat div.chat-out { background: #f6f6f6; margin-right: 0px; margin-left: auto; text-align: right; }
form.chat div p.title { font-weight: bold; font-size: 11px; }



h1 img { height: 100px; margin-top: -15px; margin-right: -50px; }

@media (min-width: 768px) {
	img.inline-left { float: left; margin-right: 10px; }
	img.inline-right { float: right; margin-left: 10px; }
}



@media (min-width: 768px) {
	#demo .modal-dialog {
		position: absolute;
		top: 50% !important;
		transform: translate(0, -200px) !important;
		-ms-transform: translate(0, -200px) !important;
		-webkit-transform: translate(0, -200px) !important;
		margin: auto 30%;
		width: 40%;
		height: 400px;
	}
	#demo .modal-dialog .modal-content p { margin: 15px 0px; }
}