/*
 * CONTENT
 * 1. max-width: 480
 * 2. min-width: 480, max-width: 979px
 * 3. min-width: 480, max-width: 768px
 * 4. min-width: 768px, max-width: 979px
 */

/* 1. max-width: 480 */
@media (max-width: 480px){
	/* Startseite */
	img.alignleft, img.alignright {
	    display: block;
	    float: none;
	}
	.container h1{
		font-size: 17px;
		margin-top: 5px;
	}
	.entry h2 {
	    font-size: 17px;
	}
	.link-box .span3 {
		float: left;
		margin-bottom: 10px;
		margin-left: 0;
		width: 100%;
	}
	.link-box .span3 .inner-box{
		width: 90%;
	}
	.link-box .span3.key .start, .link-box .span3.contact .end{
		width: 5%;
	}
	.link-box .span3.key .end, .link-box .span3.trophy .end, .link-box .span3.stiftung .end{
		width: 5%;
	}
	.link-box .span3.trophy, .link-box .span3.stiftung, .link-box .span3.contact{
		margin-left:0;
	}
	.link-box .span3.trophy .start, .link-box .span3.stiftung .start, .link-box .span3.contact .start{
		min-height: 110px;
		background: #666666; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #666666 0%, #444444 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #666666 0%,#444444 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #666666 0%,#444444 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #666666 0%,#444444 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-8 */
  
	}
	.link-box .span3.contact .end{
		background: url("../img/sprites_small.png") no-repeat scroll 0 -474px transparent;
	}
	.link-box .span3 .inner-box .h4{
		font-size: 20px;
	}
	.link-box .span3.key .h4 {
	    padding: 19px 0 0;
	}
}
/* 2. min-width: 480, max-width: 979px */
@media (min-width: 481px) and (max-width: 979px){
	
	.link-box .span3 {
	    float: left;
	    width: 49%;
	}
	.link-box .span3.trophy .start, .link-box .span3.stiftung .start, .link-box .span3.contact .start {
	    width: 10px;
	}
	.link-box .span3.trophy, .link-box .span3.stiftung, .link-box .span3.contact {
	    margin-left: 0;
	}
	.link-box .span3 {
	    margin-bottom: 10px;
	}
	.link-box .span3.contact .end{
		background:none;
	}
	.link-box .span3 .icon{
		background-repeat: no-repeat;
		padding-right: 1px;
		-moz-background-size:82% !important; /* Firefox */
		-webkit-background-size:82% !important; /* Safari, Chrome */
		background-size:82% !important; /* Opera, IE, W3C Standard */
	    height: 47px;
	    padding-right: 5px;
	    padding-top: 9px;
	    width: 59px;
	    margin-top: 11px;
	}
	.link-box .span3.key .icon {
	    background-position:  0 -18px;
	}
	.link-box .span3.trophy .icon {
	    background-position:  0 -74px;
	}
	.link-box .span3.contact .icon{
		background-position:  0 -185px;
	}
	.link-box .span3.stiftung .icon{
		background-position:  0 -128px;
	}
	.link-box .span3 .inner-box{
		min-height: 81px;
		width: 90.7%;
	}
	.link-box .span3 .inner-box .h4{
		padding-left: 5px;
	}
}
/* 3. min-width: 480, max-width: 767px */
@media (max-width: 767px){
	body{
		padding: 1%;
	}
	.navigation{
		display:none;
	}
	.toggle-menu {
	    background: none repeat scroll 0 0 #A5A4A0;
	    border: 2px solid #D8D6D2;
	    border-radius: 8px 8px 8px 8px;
	    color: #FFFFFF;
	    cursor: pointer;
	    padding: 10px;
	    position: absolute;
	    right: 4px;
	    text-transform: uppercase;
	    top: 167px;
	}
	.toggle-menu:hover{
		background: #CAC7C0;
		color: #666;
	}
	header{
		min-height: 173px;
	}
	header .inner-header .header-bg {
	    background-position:0 140px;
	    height: 160px;
	}
	header .inner-header {
	    height: 150px;
	}
	header .logo img {
	    max-width: 159px;
	}
	.navigation ul{
		float:none;
		width: 100%;
		margin-top:36px;
		text-align:left;
	}
	.navigation ul li{
		float:none;
		margin:0;
		padding: 3px 0;
		width: 99%;
	}
	.navigation ul li a{
		padding: 15px 20px;
		display:block;
		width: 87%; 
	}
	.navigation ul li.current_page_item{
		background: #EC7404;
		padding: 15px;	
		width: 88%;	
	}
	.navigation ul li.current_page_item a{
		background:none;
		padding:0;
	}
	.navigation li.current_page_parent {
	    background: none repeat scroll 0 0 transparent;
	    padding: 0;
	}	
	.navigation ul.children > li.current_page_item {
	    background: none repeat scroll 0 0 #EC7404;
	    padding: 4px 0;
	    width: 100%;
	}
	.navigation li.current_page_parent > a {
	    padding: 15px 20px;
	   
	}
	
	.navigation ul.children {
	    margin: 0;
	    position: relative;
	    width: 99%;
	}
	.navigation ul.children li a{
	    padding: 13px 20px;
	    width: 87%;
	}
	.span4.title{
		position:absolute;
	}
	.span4.jku-logo{
		display:none;
	}	
	.span4.logo > a {
	    float: left;
	    text-align: center;
	    width: 100%;
	}
	.container h1{
		margin-top: 5px;
	}
	header .title h2 {
	    font-size: 16px;
	    padding-top: 0;
	    text-align: center;
	    line-height: 120%;
    margin-top: 117px;
	}
	footer{
		margin-top:20px;
	}
	footer .inner-footer, footer .inner-footer .footer-bg{
	    height: auto;
	}
	footer .footer-logo {
	    padding: 107px 0 0;
	}
	footer .address {
	    background: none repeat scroll 0 0 #FFFFFF !important;
	    border-bottom: 1px solid #CCCCCC;
	    border-top: 1px solid #CCCCCC;
	    color: #4F4E4C;
	    font: 15px/150% 'josefin';
	    margin-top: 10px;
	    padding: 5px 0;
	    text-align: center;
	    text-shadow: none;
	}
	.jku-footer-logo > img {
	    display: block;
	    margin: 0 auto 10px;
	}
	footer .jku-footer-logo {
	    margin-top: 0;
	    padding: 15px 0 3px 5px;
	    width: 100%;
	}
	footer .address, footer .jku-footer-logo {
	    background: none repeat scroll 0 0 transparent;
	}
	
	/* Startseite */
	.startseite-teasertext {
	    background:none;
	    
	}
	.startseite-teasertext img {
	    display: block;
	    margin: 0 auto;
	    max-width: 480px;
	    width: 100%;
	}
	.startseite-teasertext .span7 {
   background: none repeat scroll 0 0 #EC7404;
    margin: 4px auto;
    max-width: 481px;
    padding: 5%;
    text-align: center;
    width: 100%;
	}	
	.startseite-teasertext h3, .startseite-teasertext h2 {
	    color: #FFFFFF;
	    font-size: 18px;
	    line-height: 24px;
	    text-align: center;
	}
	.cite_container p {
	    width: 100%;
	}
	
}
/* 4. min-width: 768, max-width: 979px */
@media (min-width: 768px) and (max-width: 979px){
	header .title h2{
		font-size: 22px;
	}
	header .logo img {
	    max-width: 100%;
	}
	header .jku-logo img{
		max-width: 85%;
	}
	footer .jku-footer-logo{
		font-size: 16px;
		padding-left: 20px;
	}
	footer .footer-logo{
		font-size: 16px;
	}
	.navigation ul li a{
		font-size: 15px;
		padding: 10px 10px
	}
	.navigation ul li {
		margin-left: 0;
	    padding: 11px 5px;
	}
	/* Startseite */
	.startseite-teasertext{
		background: none;
	}
	.startseite-teasertext .span5{
		width: 45%;
	}
	.startseite-teasertext .span7 {
	    background: none repeat scroll 0 0 #EC7404;
	    margin: 0;
	    min-height: 269px;
	    padding: 3.9% 2%;
	    width: 55%;
	}
	.startseite-teasertext h3, .startseite-teasertext h2 {
	    font-size: 17px;
	    line-height: 29px;
	}
	.startseite-teasertext h2 {
		padding: 10px;
		margin-bottom: 10px;
	}
	
	.cite_container p {
	    width: 100%;
	}
	

}
@media (min-width: 481px) and (max-width: 767px){
	.toggle-menu{
		top: 169px;
	}
}
@media (max-width: 767px){
	.span4.logo{
		position: relative;
    	z-index: 15;
	}
}