/* KMI Template Base: Version 5.0 */

/*************************************************
* Font Import
*************************************************/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic);

@media all {

	/*************************************************
	* Specific Colors and Sizes
	*************************************************/

	/* Titles */
	h1 {
		font-weight: 400;
		font-size: 2em;
		line-height: 1.2em;
		margin:0 0 1em 0;
	}
	h2 {
		font-weight:700;
		font-size:1.6em;
		line-height: 1.2em;
		margin:0 0 1em 0;
	}
	#title h1, #content h2 {
		font-weight: 400;
		line-height: 1.2em;
		margin: 0 0 35px 0;
		text-transform: uppercase;
		font-size: 2em;
	}
	#title h1:after, #content h2:after {
		content: "";
		display: block;
		border-bottom: 2px solid #03a3e1;
		width: 60px;
		margin-top: 25px;
	}
	#title + #content > div:first-child h2 {
		font-size: 1em;
		margin: 0;
		text-transform: none;
		font-weight: bold;
	}
	#title + #content > div:first-child h2:after {
		border: none;
	}
	h3 {
		font-weight: 700;
		font-size: 1em;
		line-height: 1.25em;
		margin: 0 0 1em 0;
	}

	/* Links */
	a {
		color: #333;
		text-decoration: underline;
	}
	a:hover,
	a:focus,
	a.activ {
		color: #c3512f;
		text-decoration: underline;
	}
	a:visited {
		color: #862a0f;
	}
	a:visited:hover {
		color: #c3512f;
	}

	/* Lines */
	hr {
		border-bottom: 1px solid #dcdcdc;
		margin: 2.5em 0 3em 0;
	}
	.text-two-columns + div hr.ce-div {
		margin-top:3.5em;
	}

	div.rulerAfter,
	div.rulerBefore {
		border-color: #dcdcdc;
	}

	div.rulerAfter {
    margin: 0 0 3em 0;
    padding: 0 0 2.5em 0;
	}

	/* Color Classes for RTE */
	span.rot {color: #ff0000;}
	span.gruen {color: #00ff00;}
	span.blau {color: #0000ff;}

	/* Color Boxes */
	.color-box {
		color:#fff;
	}
	.color-box h2 {
		font-size:1.2em;
		text-transform: uppercase;
	}
	.color-box a, .color-box a:visited {
		color: #fff;
	}
	.color-box a:hover {
		color: #fff;
		text-decoration: none;
	}
	.orange-box {background: #c4772f;}
	.red-box {background: #c3512f;}
	.blue-box {background: #05305d;}

	/* Text 2 Cols */
	.text-two-columns .ce-bodytext {
		column-count: 2;
		column-gap: 50px;
	}

	/*************************************************
	* Page
	*************************************************/

	body {
		background-color: #ffffff;
		color: #333;
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		font-weight: 300;
	}
	#page-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		left: 0;
	}
	#page {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		min-height: calc(100% - 235px);
	}

	.inside {
		max-width: 980px;
		margin: 0 auto;
		width: 100%;
	}

	/*************************************************
	* Header
	*************************************************/

	#header-wrapper {
		width:100%;
		height:190px;
	}

	/* Header Nav */
	#header-nav-wrapper {
		width: 100%;
		height: 29px;
		border-bottom: 1px solid #f1f1f1;
		background:#fcfcfc;
	}

	#header-nav {
		max-width: 980px;
		margin: 0 auto;
		width: 100%;
	}

	/* Header Navigation */
	#header-nav li {
		float:left;
		line-height:30px;
		padding:0 7px;
		margin-right:1px;
	}

	#header-nav li a {
		font-weight:normal;
		text-decoration:none;
		color:#222;
	}

	#header-nav li a:hover {
		text-decoration:underline;
	}

	#header-nav #langnav li:last-child {
		padding-right:0;
		margin-right:0;
	}
	#header-nav #langnav li:last-child:after {
		display:none;
	}
	#header-nav li:after {
		content:"";
		position:absolute;
		height:12px;
		margin:9px 0 9px 7px;
		width:1px;
		background: #dedede;
	}
	#header-nav li a.current {
		font-weight:bold;
	}

	/* Meta Navigation */
	#metanav {
		float:right;
	}

	/* Language Navigation */
	#langnav {
		float:right;
	}

	#header-wrapper {
		position: relative;
		width: 100%;
	}
	#header {
		position:relative;
		width:100%;
		max-width:980px;
		margin:0 auto;
		height:120px;
	}
	#logo-uni img {
		width: 130px;
		height: auto;
	}
	#logo {
		float: left;
		margin-top: 37px;
	}
	#logo img {
		display: block;
	}
	#logo2 {
		position:absolute;
		right:185px;
		top:37px;
	}
	#logo-sagw {
		position: relative;
	}
	#logo-sagw > div {

	}
	#logo-sagw a {
		text-decoration: none;
		font-weight: normal;
		font-size: 0.9em;
    line-height: 1.5em;
		color:#222;
	}
	#logo-sagw a::before {
		width: 38px;
		height: 35px;
		background-image: url(../img/logo-sagw.jpg);
		content: "";
		display: block;
		float: left;
		margin-right: 10px;
	}
	#logo-sagw:hover a::before {
		background-position: 38px 0px;
	}

	/* Socialnav */
	#socialnav {
		position: absolute;
		right:0;
		top:50px;
	}
	.socialicons li {
		width: 18px;
		height: 17px;
		float: left;
		padding: 0 15px 0 0;
	}
	.socialicons li:last-child {
		padding: 0;
	}
	.socialicons li a {
		background-image: url(../img/socialicons.png);
		content: "";
		display: block;
		height: 17px;
		width: 18px;
		font-size: 0;
	}
	.socialicons li:first-child a {
		background-position: 18px 0px;
	}
	.socialicons li:nth-child(2) a {
		background-position: 18px 37px;
	}
	.socialicons li:last-child a {
		background-position: 18px 17px;
	}
	.socialicons li:first-child:hover a {
		background-position: 0px 0px;
	}
	.socialicons li:nth-child(2):hover a {
		background-position: 0px 37px;
	}
	.socialicons li:last-child:hover a {
		background-position: 0px 17px;
	}

	/* Top Navigation */
	#topnav-wrapper {
		width: 100%;
		line-height:40px;
		height: 40px;
		background-color: #05305d;
		font-size: 1.04em;
		font-weight: normal;
	}

	#topnav {
		max-width: 980px;
    margin: 0 auto;
    width: 100%;
	}
	#topnav li {
		float: left;
		text-indent: 0;
	}
	#topnav li:before {
		content: none;
	}
	#topnav a {
		display: block;
		text-align: center;
		font-weight: 400;
		text-decoration: none;
		padding:0 10px 0 10px;
		background-color: #05305d;
		color: #fff;
		text-transform: uppercase;
		-webkit-transition: background 0.5s;
    transition: background 0.5s;
	}
	#topnav a:hover {
		background: #074485;
		-webkit-transition: background 0.5s;
    transition: background 0.5s;
	}
	#topnav .active > a {
		background: #074485;
	}
	#topnav > ul > li > ul {
		display:none;
		position: absolute;
		background-color: #05305d;
		z-index: 999;
	}
	#topnav > ul > li > ul > li  {
		float: none;
	}
	#topnav ul ul a  {
		text-align: left;
		padding-right: 26px;
	}
	#topnav > ul > li:hover > ul {
		display:block;
	}
	#topnav > ul > li:nth-child(4):hover > ul {
		display:none;
	}


	/*************************************************
	* Header Image
	*************************************************/

	#header-image {
		width: 100%;
	}

	#header-image img {
		width:100%;
		height:auto;
		margin-bottom:50px;
	}
	#header-image .ce-gallery {
		margin: 0;
		float: none;
	}

	/*************************************************
	* Main
	*************************************************/

	#content-container {
		width: 100%;
		padding: 40px 0 20px 0;
	}
	#content > div {
		margin: 0 0 3em 0;
	}

	/* Slider */
	#page-slider {
		position: relative;
	}
	#page-slider {
		width: 100%;
		height: 500px;
	}
	#page-slider div.cycle-slide {
		width:100%;
		height:500px;
		background-position: center;
    background-size: cover;
	}
	#page-slider .ce-bodytext {
		width: auto;
		max-width: 45%;
		position: absolute;
		top: 20%;
		right: 30%;
		z-index: 998;
	}
	#page-slider .ce-bodytext p {
		color: #fff;
		font-weight: normal;
		font-size: 1em;
		background-color: rgba(0, 0, 0, 0.5);
		margin: 0 0 2px 0;
		padding: 16px;
		line-height: 1.6em;
	}
	#page-slider .ce-bodytext p:first-child {
		text-transform: uppercase;
		font-size: 2.8em;
		line-height: 1.1em;
	}

	#page-slider a {
		color:#fff;
		text-decoration:underline;
	}
	#page-slider a:hover {
		color:#c3512f;
		text-decoration:underline;
	}

	.cycle-prev, .cycle-next {
    position: absolute;
    top: 200px;
    width: 20px;
		height:30px;
		padding:35px 7.5px;
    z-index: 800;
    cursor: pointer;
    transition: 0.3s;
		background: rgba(0,0,0,0.5);
	}

	.cycle-prev-arrow,
	.cycle-next-arrow {
		width: 20px;
		height: 30px;
		background: url(../img/slider-arrows.png) no-repeat;
	}

	.cycle-prev {
    left: 0;
	}

	.cycle-next {
    right: 0;
	}

	.cycle-prev-arrow {
		background-position: 0px 0px;
	}

	.cycle-next-arrow {
		background-position: -20px 0px;
	}

	.cycle-pager-wrapper {
		position:absolute;
		bottom:0;
		width:100%;
		z-index: 800;
		text-align:center;
		padding-bottom:15px;
	}

	.cycle-pager span {
		display:inline-block;
		font-size: 0;
		background:#000;
		width:15px;
		height:15px;
		border-radius:7.5px;
		margin:0 5px;
		cursor:pointer;
		-webkit-transition: background 0.5s;
    transition: background 0.5s;
	}

	.cycle-pager span.cycle-pager-active {
		background:#fff;
		-webkit-transition: background 0.5s;
    transition: background 0.5s;
	}

	/* Sub Navigation */
	#subnav-wrapper{
		float: left;
		width: 230px;
		min-height: 100px;
		padding-right: 60px;
	}
	#subnav {
		width: 100%;
		padding-left: 16px;
	}
	#subnav ul {
		margin: 0;
	}
	#subnav ul li {
		text-indent: 0;
		margin: 0 0 0.9em 0;
		position: relative;
	}
	#subnav li:before {
		content: none;
	}
	#subnav ul ul li {
		margin: 0;
		padding: 0 0 0 1em;
	}
	#subnav a {
		display: block;
		color: #777;
		text-decoration: none;
		padding: 0 0 0.5em 0;
		font-weight: normal;
		text-align: left;
	}
	#subnav a:hover {
		color: #000;
	}
	#subnav a.current {
		font-weight: bold;
		color: #000;
	}

	/* Center */
	#center-wrapper {
		float: left;
		width: calc(100% - 290px);
	}
	#center {
		min-height: 350px;
	}

	/* Tables */
	table {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		margin: 25px 0;
		width: 100%;
	}
	tr:nth-child(even) {
		background-color: #eee;
	}
	tr:nth-child(odd) {
		background-color: #fff;
	}
	th,td {
		padding: 8px 18px 8px 8px;
	}
	th:last-child,
	td:last-child {
		padding: 8px 8px 8px 0;
	}
	h2 + div div table {
		margin: 0 0 25px 0;
	}

	/*************************************************
	* Specific Sites
	*************************************************/

	/* Home */
	#home #content-boxes {
    display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#home #content-boxes > div {
		width:21%;
		margin: 0 0 50px 0;
	}
	#home #content-boxes h2 {
		font-size: 1.4em;
	}
	#home #center-wrapper {
		width: 100%;
	}
	#home #content-boxes p {
		margin: 0 0 0.5em 0;
	}

	#home #subnav-wrapper,
	#congress #subnav-wrapper {
		display: none;
	}

	/*************************************************
	* Kongress
	*************************************************/

	#congress #center-wrapper {
		width:100%;
	}
	#congress #content-boxes {
    display: flex;
		justify-content: space-between;
	}
	#congress #content-boxes > div {
		padding:30px;
		width:calc(33.33% - 100px);
	}

	/*************************************************
	* Jobs
	*************************************************/

	#jobs #subnav-wrapper {
		display: none;
	}
	#jobs #center-wrapper {
		width: 100%;
	}
	/*************************************************
	* Master Study Program DB
	*************************************************/

	#masterdb #subnav-wrapper {
		display:none;
	}

	#masterdb #center-wrapper {
		width:100%;
	}

	/*************************************************
	* Layouts
	*************************************************/

	/* Banner SVPW */
	#content .text-button {
		width: calc(100% - 62px);
		padding:40px 29px 28px 29px;
		height: auto;
		font-size: 1.1em;
		line-height:1.4em;
		background:#fcfcfc;
		border:1px solid #e1e1e1;
		margin: 50px 0 50px 0;
	}
	.text-button .ce-textpic {
		overflow: visible;
	}
	.text-button .ce-bodytext {
		clear:both;
	}
	.text-button p:first-child {
		float: left;
	}
	.text-button p:last-child {
		float: right;
	}
	.text-button p:last-child a{
		background: #2767a8;
		background-image: -webkit-linear-gradient(top, #2767a8, #05305d);
		background-image: -moz-linear-gradient(top, #2767a8, #05305d);
		background-image: -ms-linear-gradient(top, #2767a8, #05305d);
		background-image: -o-linear-gradient(top, #2767a8, #05305d);
		background-image: linear-gradient(to bottom, #2767a8, #05305d);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color: #ffffff;
		padding: 8px 16px 8px 16px;
		text-decoration: none;
		font-weight: normal;
	}
	.text-button p:last-child a:hover {
		background: #074485;
		background-image: none;
		text-decoration: none;
	}

	/* Accordion */
	#content .accordion h2 {
		font-size: 1.1em !important;
		font-weight: 400 !important;
		margin: 0;
	}

	/*************************************************
	* Footer
	*************************************************/
	#footer {
		position: relative;
		width: 100%;
		padding: 25px 0 20px 0;
		background-color: #222222;
		color: #fff;
		line-height: 20px;
	}
	#footer-address {
		height: 180px;
	}
	#footer-address > div {
		float:left;
		width:17.33%;
		margin-right: 1%;
		margin-top: 33px;
	}
	#footer-address > div:last-child {
		margin-right: 0;
	}
	#footer-address > div:first-child {
		width:46%;
		margin: 0;
		padding: 0;
	}

	#footer-address h2 {
		color:#ddd;
		font-size:1.2em;
	}
	#footer-address a, #footernav a {
		color:#fff;
	}
	#footer-address a:hover, #footernav a:hover {
		color:#c3512f;
		text-decoration:unerline;
	}

	#footernav-wrapper {
		margin-top: 10px;
	}
	/* KMI Logo */
	#kmi-logo {
		position: absolute;
		right: -20px;
		bottom: 5px;
	}

}