/*
=======================================================================================================================
 Styles
=======================================================================================================================
*/

* {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	}

html {
	font-size: 20px;
	line-height: 1.6;
	}

body {
	font-family: "Saira", sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: #333;
	background: #fff;
	padding: 0;
	margin: 0;
	}

h1 {font-family: "Saira Condensed", sans-serif; font-size: 2.5rem; line-height: 1.2; font-weight: 300; color:#333; padding: 10px 0 20px 0; margin: 0; text-transform: uppercase;}
h1::after {content: ""; border-bottom: 2px solid #333; display: block; width: 60px; padding: 10px 0 0 0; opacity: 1;}

h2 {font-family: "Saira Condensed", sans-serif; font-size: 2rem; line-height: 1.2; font-weight: 300; color:#333; padding: 15px 0 15px 0; margin: 0; text-transform: uppercase;}
h2::after {content: ""; border-bottom: 2px solid #333; display: block; width: 60px; padding: 10px 0 0 0; opacity: 1;}

h3 {font-family: "Saira Condensed", sans-serif; font-size: 1.5rem; line-height: 1.2; font-weight: 300; color:#333; padding: 15px 0 15px 0; margin: 0; text-transform: uppercase;}

h4 {font-family: "Saira Condensed", sans-serif; font-size: 1.2rem; line-height: 1.2; font-weight: 600; color:#333; padding: 15px 0 15px 0; margin: 0; }

p {font-size: 1rem; font-weight: 300; padding: 10px 0; margin: 0; letter-spacing:-0.2px;}

a, a:link, a:visited { text-decoration: none; color: #5793c2; transition: all 0.2s ease-out 0s;}
a:hover, a:active { text-decoration: none; color: #ff0000; transition: all 0.2s ease-out 0s;}

ul, ol {margin: 0px 0; padding: 0;}
li {margin: 0px 0; padding: 0;}

ul.box { margin: 10px 0 20px 20px !important; padding: 0; }
ul.box li { margin: 12px 0 12px 0; }

/* Elemente */

.condensed {font-family: "Saira Condensed", sans-serif; font-size: 1.1rem;}
.color {color: #5793c2;}
.col.rel {position: relative;}
.text-right {text-align: right;}
.text-center {text-align: center;}
img {max-width: 100%; display: block;}
strong {font-weight: 500;}
.lang {border: 1px solid #f5f5f5; display: inline-block; padding: 4px 5px 3px; font-size: 0.8rem; line-height: 1; margin-right: 5px;}

/* Linkbutton */

a.button-black {display: inline-table; font-family: "Saira Condensed", sans-serif; font-size: 1.1rem; color: #fff; border: 1px solid #222; background-color: #222; padding: 15px 20px; margin: 15px 12px 5px 0; box-shadow: 0px 5px 30px rgba(0,0,0,0.2);}
a.button-black:hover {color: #5793c2; border: 1px solid #fff; background-color: #fff;}

a.button-white {display: inline-table; font-family: "Saira Condensed", sans-serif; font-size: 1.1rem; color: #222; border: 1px solid #222; background-color: #fff; padding: 15px 20px; margin: 15px 12px 5px 0; box-shadow: 0px 5px 30px rgba(0,0,0,0.2);}
a.button-white:hover {color: #5793c2; border: 1px solid #fff; background-color: #fff;}

/* Tel Links */

.tel a, .tel a:link, .tel a:visited { text-decoration: none; color: #333; transition: all 0.2s ease-out 0s;}
.tel a:hover, .tel a:active { text-decoration: none; color: #5793c2; transition: all 0.2s ease-out 0s;}

/*
=======================================================================================================================
  PAGE STYLES
=======================================================================================================================
*/

/* BGs */

.bg-white {background-color: #fff;}
.bg-white-border {background-color: #fff; border: 1px solid #222;}
.bg-white-border img {width: 100%!important; display: block;}
.bg-grey {background-color: #f7f7f7;}
.bg-black {background-color: #222;}

/* Banner */

#banner {padding: 12px 0; margin: 0 auto; width: 100%; background-color:#fff;}

#banner .table {width: 100%; display: table;}
#banner .table .cell {display: table-cell; vertical-align: middle;}
#banner .cell.left {width: 55%;}
#banner .cell.right {padding-left: 10px; text-align: right; white-space:normal; vertical-align: middle; width: 45%;}

#banner #logo a {display: inline-block; padding: 10px 0 0 0; margin: 0;}
#banner #logo img {display: block; width: 250px; height: auto; }

#nav-text { display: inline-block; font-size: 0.9rem; line-height: 1.3; font-weight: 400; color:#ebebeb; padding-right: 2px; vertical-align: middle;}

/* Line */

#keyvisual {padding: 0; margin: 0 auto; width: 90%;}
.pic-center {position: absolute; width: 420px; display: block; left:0; right: 0; top: 28%; margin: 0 auto; max-width:90%}

/* Content */

.text-bigbox {padding: 20px 0px 30px;}
.text-smallbox {padding: 20px 35px 20px; line-height: 1.3; margin-bottom: 25px;}

/* bottom */

#bottom {background-color: #222; padding: 50px 0; line-height: 1.3; color:#fff;}
#bottom p {padding: 0 0 10px 0;}
#bottom img {display: block; margin-bottom: 3px;}

/*
=======================================================================================================================
  Media Queries
=======================================================================================================================
*/

/* Big Desktop
====================================================================== */

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

html {font-size: 24px; line-height: 1.7;}
    
#banner #logo img {width: 350px;}
    
#keyvisual {width: 96%;}
    
.pic-center {width: 550px;}
    
}

/* Middle Desktop
====================================================================== */
@media only screen and (max-width: 1650px) {

#keyvisual {width: 100%;}
    
}

/* Tablet Big 
====================================================================== */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {

html {font-size: 19px; line-height: 1.6;}

}

/* Tablet
====================================================================== */
@media only screen and (min-width: 851px) and (max-width: 1023px) {

html {font-size: 18px; line-height: 1.6;}
    
h1 {font-size: 2rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}

#keyvisual {width: 100%;}
    
.text-bigbox {padding: 20px 0px 20px;}
.text-smallbox {margin-bottom: 15px;}
    
}

/* Phablet
====================================================================== */
@media only screen and (min-width: 544px) and (max-width: 850px) {

html {font-size: 17px; line-height: 1.6;}

h1 {font-size: 2rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}
    
#keyvisual {width: 100%;}
    
.text-bigbox {padding: 20px 0px 20px;}
.text-smallbox {margin-bottom: 0px;}
    
.medal-center {position: absolute; display: block; left:0; right: 0; top: 0; margin: 15px auto 0; padding: 0 35px;}

.text-right {text-align: left;}
    
.footer-margin-top {margin-top: 50px !important;}

}

/* Phone
====================================================================== */
@media only screen and (max-width: 543px) {

html {font-size: 16px; line-height: 1.5;}

h1 {font-size: 1.8rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.2rem;}
h4 {font-size: 1.1rem;}

#banner {padding: 0 0;}
    
#keyvisual {width: 100%;}
    
.text-bigbox {padding: 20px 0px 20px;}
    
.text-right {text-align: left;}
    
.footer-margin-top {margin-top: 50px !important;}

}