/* ************************************************************ */
/*   Design:	template.css									*/
/*   Author:	Thomas Panner									*/
/*   Web:		www.redklaxx.at									*/
/*   Date:		24.10.2015										*/
/* ************************************************************ */

* {
	margin: 0px;
	padding: 0px;
}

html, body {
	margin: 0px;
	padding: 0px;
	background-color: #efefef;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	color: #262626;
	background-image: url('../images/bg.jpg');
	background-repeat: repeat;
	background-attachment: fixed;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	overflow: scroll;
	overflow-x: hidden;
}

hr {
	width: -moz-calc(100%);
	width: -webkit-calc(100%);
	width: calc(100%);
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.44), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.44), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.44), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.44), rgba(0,0,0,0));
    margin-top: 20px;
    margin-bottom: 20px;
    clear: both;
    float: none;
}

/* ----- container ----- */

.container {
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
}

.top_page {
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
}

.top_wrapper, .top_wrapper img {
	margin-right: auto;
	margin-left: auto;
}

.main {
	margin-right: auto;
	margin-left: auto;
}

.container:before, .container:after {
	display: table;
	content: " ";
}

.container:after {
	clear: both;
}

.arrow {
	clear: both;
	padding: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ----- image-einstellungen ----- */

img {
	border: 0;
}

img.logo {
	border: 0;
	padding-left: 5px;
	padding-top: 20px;
}

/* ----- texteinstellungen ----- */

h1 {
	color: #003978;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-transform: none;
	text-align: left;
	margin: 0px;
	margin-bottom: 15px;
	padding: 0px;
	padding-bottom: 5px;
	border-bottom: solid 2px #003978;
	overflow: hidden;
	border: 0;
}

h2 {
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	padding-bottom: 5px;
	color: #406bc0;
	border-bottom: solid 1px #406bc0;
	font-weight: bold;
	font-size: 10pt;
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: bold;
}

h3 {
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	color: #003978;
	font-weight: bold;
	font-size: 10pt;
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

h3 a, h3 a:link, h3 a:visited, h3 a:hover {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	color: #003978;
}

p.bodytext {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	text-align: justify;
	text-decoration: none;
}

p.bodytext a, p.bodytext a:link, p.bodytext a:visited {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	text-align: justify;
	text-decoration: none;
}

p.bodytext a:hover {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	text-align: justify;
	text-decoration: underline;
}

p.bodytext span {
	color: #262626;
	font-weight: bold;
}

p.center {
	text-align: center;
}

b {
	font-weight: bold;
}

i {
	font-style: italic;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.main ul {
	padding-bottom: 10px;
}

.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}

.main ul li a:hover {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	text-align: left;
	text-decoration: underline;
	margin: 0px;
	padding: 0px;
}

/* ----- clear ----- */

.clear {
	clear: both;
	height: 1px;
}

.clear10px {
	clear: both;
	height: 10px;
}

.clear20px {
	clear: both;
	height: 20px;
}

.clear40px {
	clear: both;
	height: 40px;
}

.arrow {
	clear: both;
	margin-top: 0px;
	text-align: center;
	padding: 0px;
}

/* ----- breadcrumb ----- */

div.breadcrumb {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-color: #efefef;
}

div.breadcrumb a, div.breadcrumb a:link, div.breadcrumb a:visited {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-align: right;
	text-decoration: none;
}

div.breadcrumb a:hover {
	color: #262626;
	font-family: 'OpenSans', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-align: right;
	text-decoration: underline;
}

/* ====================  media screen einstellungen ==================== */

@media screen and (min-width: 300px) and (max-width: 360px) {

	.container {
		width: 280px;
	}

	.main {
		width: 260px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 280px;
	}

	h1 {
		font-size: 11pt;
	}

	h2 {
		font-size: 10pt;
	}

	h3 {
		font-size: 9pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 8pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 8pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 360px) and (max-width: 400px) {

	.container {
		width: 340px;
	}

	.main {
		width: 320px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 340px;
	}

	h1 {
		font-size: 12pt;
	}

	h2 {
		font-size: 11pt;
	}

	h3 {
		font-size: 10pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 400px) and (max-width: 480px) {

	.container {
		width: 380px;
	}

	.main {
		width: 360px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 380px;
	}

	h1 {
		font-size: 12pt;
	}

	h2 {
		font-size: 11pt;
	}

	h3 {
		font-size: 10pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 480px) and (max-width: 600px) {

	.container {
		width: 460px;
	}

	.main {
		width: 440px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 460px;
	}

	h1 {
		font-size: 12pt;
	}

	h2 {
		font-size: 11pt;
	}

	h3 {
		font-size: 10pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 600px) and (max-width: 640px) {

	.container {
		width: 580px;
	}

	.main {
		width: 560px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 580px;
	}

	h1 {
		font-size: 12pt;
	}

	h2 {
		font-size: 11pt;
	}

	h3 {
		font-size: 10pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 640px) and (max-width: 768px) {

	.container {
		width: 620px;
	}

	.main {
		width: 600px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 620px;
	}

	h1 {
		font-size: 14pt;
	}

	h2 {
		font-size: 12pt;
	}

	h3 {
		font-size: 11pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 768px) and (max-width: 800px) {

	.container {
		width: 740px;
	}

	.main {
		width: 720px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 740px;
	}

	h1 {
		font-size: 16pt;
	}

	h2 {
		font-size: 12pt;
	}

	h3 {
		font-size: 11pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
		text-align: left;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 9pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 800px) and (max-width: 960px) {

	.container {
		width: 780px;
	}

	.main {
		width: 760px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 780px;
	}

	h1 {
		font-size: 16pt;
	}

	h2 {
		font-size: 12pt;
	}

	h3 {
		font-size: 11pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 10pt;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 10pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 960px) and (max-width: 1024px) {

	.container {
		width: 940px;
	}

	.main {
		width: 920px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 940px;
	}

	h1, .kontaktbox h1 {
		font-size: 16pt;
	}

	h2 {
		font-size: 12pt;
	}

	h3 {
		font-size: 11pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 9pt;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 10pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 1024px) and (max-width: 1280px) {

	.container {
		width: 1000px;
	}

	.main {
		width: 980px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 1000px;
	}

	h1 {
		font-size: 16pt;
	}

	h2 {
		font-size: 12pt;
	}

	h3 {
		font-size: 11pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 10pt;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 10pt;
		margin-left: 20px;
	}

}

@media screen and (min-width: 1280px) {

	.container {
		width: 1260px;
	}

	.main {
		width: 1240px;
		min-height: 500px;
	}

	.top_page, .top_wrapper, .top_wrapper img {
		width: 1260px;
	}

	h1 {
		font-size: 14pt;
	}

	h2 {
		font-size: 11pt;
	}

	h3, h4, h5, h6 {
		font-size: 10pt;
	}
	
	p.bodytext, p.bodytext a, p.bodytext a:link, p.bodytext a:visited, p.bodytext a:hover {
		font-size: 10pt;
	}

	.main ul li, .main ul li a, .main ul li a:link, .main ul li a:visited, .main ul li a:hover {
		font-size: 10pt;
		margin-left: 20px;
	}

}

/* ----- schriftart einbetten ----- */

@font-face {
	font-family: 'OpenSans';
	src: 	url('../fonts/opensans.eot');
	src: 	url('../fonts/opensans.woff') format('woff'),
			url('../fonts/opensans.ttf') format('truetype'),
			url('../fonts/opensans.svg') format('svg');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSansBold';
	src: 	url('../fonts/opensans_bold.eot');
	src: 	url('../fonts/opensans_bold.woff') format('woff'),
			url('../fonts/opensans_bold.ttf') format('truetype'),
			url('../fonts/opensans_bold.svg') format('svg');
	font-weight: normal;
}