/* -------------------------------------------------------------
	I-Service 2017 - Stylesheet
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Autor:		i.A. (CZi)
	Company:	onOffice Software AG
	Release:	1.0
	------------------------------------------------------------- */

	/* -------------------------------------------------------------
	Grid Debug
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.debug p {
		padding: 15px 0;
		margin: 0 !important;
		text-align: center;
		background: #eee;
	}

	.debug .wrapper .wrapper-center {
		background: #fff;
	}

	/* -------------------------------------------------------------
	Default settings
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-family: Arial, Helvetica, sans-serif;
		color: #404040;
	}

		*:focus, *:active {
			outline: none;
		}

	html {
		overflow-y: scroll;
		overflow-x: hidden;
		font-size: 62.5%;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}

		html.loaded .transition {
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
		}

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1.4rem;
		line-height: 2.2rem;
		color: #000;
	}

	a,
	a:visited,
	a:active {
		color: #8aa7d3;
		text-decoration: underline;
		cursor: pointer;
	}

		a:hover {
			color: #7a94bb;
			text-decoration: underline;
			cursor: pointer;
		}

		a:focus,
		a:active {
			outline: none;
		}

	.hidden {
		left: -100000px;
		overflow: hidden;
		position: absolute;
		top: -100000px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 28px;
	}

	h1 {
		color: #00315B;
		text-align: center;
		font-size: 24px;
		margin: 0 0 1.8em;
	}

	p {
		margin: 0 0 18px 0;
	}

	ul {
		margin: 0 0 18px 13px;
	}

	ol {
		margin: 0 0 18px 25px;
	}

	li {
		margin: 0 0 5px 0;
	}

		ul li {
			list-style: disc outside none;
		}

		ol li {
			list-style: decimal-leading-zero outside none;
		}

	img,
	a img {
		border: none;
		background: rgba(255, 255, 255, 0.0);
	}

	/* -------------------------------------------------------------
	Forms
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	input[type="text"],
	input[type="email"],
	input[type="submit"],
	select,
	textarea,
	button {
		width: 100%;
		padding: 8px 10px;
		border: 0;
		margin: 0;
		border-radius: 0;
	}

	input[type="text"],
	input[type="email"],
	select {
		border: 1px solid #ccc;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	select {
		padding: 7px 10px;
		background: url("https://web2.onoffice.de/template/images/template/dropdown2.png") center right 6px no-repeat #fff;
	}

	button {
		background: #00315B;
		color: #fff;
		cursor: pointer;
	}
	button:hover {
		background: #455679;
	}

	::-webkit-input-placeholder {
	  color: #404040;
	  opacity: 1;
	}
	::-moz-placeholder { 
	  color: #404040;
	  opacity: 1;
	}
	:-ms-input-placeholder { 
	  color: #404040;
	  opacity: 1;
	}
	:-moz-placeholder { 
	  color: #404040;
	  opacity: 1;
	}

	.no-padding {
		padding: 0 !important;
	}

	.no-border {
		border: none !important;
	}

	.no-margin {
		margin: 0 !important;
	}

	.transition {
		transition: 0.3s ease-in-out-all;
		-o-transition: 0.3s ease-in-out-all;
		-ms-transition: 0.3s ease-in-out-all;
		-moz-transition: 0.3s ease-in-out-all;
		-webkit-transition: 0.3s ease-in-out-all;
	}

	.clear {
		clear: both;
	}

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

	.clearfix::after {
	  clear: both;
	}

	.clearfix {
	  *zoom: 1; /* Für den IE6 und IE7 */
	}

	.center {
		text-align: center;
	}

	/* -------------------------------------------------------------
	Wrapper
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.wrapper {
		min-height: 100%;
		width: 100%;
	}

		.wrapper * {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.wrapper .wrapper-center {
			min-height: 100%;
			padding: 15px 0 0 0;
			margin: 0 auto;
			position: relative;
		}

		.container {
			margin: 0 0 20px;
		}

		/* -------------------------------------------------------------
		Monitor
		1320px / unlimited
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.wrapper .wrapper-center {
				max-width: 1200px;
			}

		}

		/* -------------------------------------------------------------
		Tablet horizontal / Laptop
		960px / 1319px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

		@media only screen and ( min-width: 961px ) and ( max-width: 1320px ) {

			.wrapper .wrapper-center {
				max-width: 960px;
			}

		}

		/* -------------------------------------------------------------
		Tablet vertical
		640px / 959px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.wrapper .wrapper-center {
				max-width: 100%;
			}

			i.open-mobile-navigation {
				display: block;
			}

			.open-mobile-navigation .wrapper .wrapper-center {
				left: 40%;
			}

		}

		/* -------------------------------------------------------------
		Phone horizontal
		480px / 639px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.wrapper .wrapper-center {
				max-width: 100%;
			}

			i.open-mobile-navigation {
				display: block;
			}

			.open-mobile-navigation .wrapper .wrapper-center {
				left: 80%;
			}

		}

		/* -------------------------------------------------------------
		Phone vertical
		320px / 479px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.wrapper .wrapper-center {
				max-width: 100%;
			}

			i.open-mobile-navigation {
				display: block;
			}

			.open-mobile-navigation .wrapper .wrapper-center {
				left: 80%;
			}

		}

	/* -------------------------------------------------------------
	Grid
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.full,
	.half,
	.one-third,
	.one-fourth,
	.one-fifth,
	.one-sixth,
	.two-thirds,
	.two-fifth,
	.three-fifth,
	.three-fourth,
	.five-sixth {
		padding: 0 15px;
		margin: 0 0 15px 0;
		float: left;
		display: inline;
	}

	.full {
		width: 100%;
	}

	.half {
		width: 50%;
	}

	.one-third {
		width: 33.333333%;
	}

	.one-fourth {
		width: 25%;
	}

	.one-fifth {
		width: 20%;
	}

	.one-sixth {
		width: 16.666667%;
	}

	.two-thirds {
		width: 66.666667%;
	}

	.two-fifth {
		width: 40%;
	}

	.three-fifth {
		width: 60%;
	}

	.three-fourth {
		width: 75%;
	}

	.five-sixth {
		width: 83.333333%;
	}

		/* -------------------------------------------------------------
		Phone horizontal
		480px / 639px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.full,
			.half,
			.one-third,
			.one-fourth,
			.one-fifth,
			.one-sixth,
			.two-thirds,
			.two-fifth,
			.three-fifth,
			.three-fourth,
			.five-sixth {
				width: 100%;
				float: none;
				display: block;
			}

		}

		/* -------------------------------------------------------------
		Phone vertical
		320px / 479px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.full,
			.half,
			.one-third,
			.one-fourth,
			.one-fifth,
			.one-sixth,
			.two-thirds,
			.two-fifth,
			.three-fifth,
			.three-fourth,
			.five-sixth {
				width: 100%;
				float: none;
				display: block;
			}

		}

	/* -------------------------------------------------------------
	Mobile Navigation
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.mobile-navigation {
		height: 100%;
		margin: 0;
		background: #1f1f1f;
		position: absolute;
		top: 0;
		left: -100%;
		display: none;
		overflow-x: hidden;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

		.mobile-navigation * {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.mobile-navigation:before {
			content: '';
			height: 100%;
			width: 1px;
			display: block;
			background: rgba(255, 255, 255, 0.25);
			position: fixed;
			top: 0;
			left: 80%;
			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
			-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
			box-shadow: 0 0 10px rgba(0, 0, 0, 1);
		}

		.mobile-navigation ul {
			padding: 0 0 42px 0;
			margin: 0;
			background: #1f1f1f;
			position: relative;
			z-index: 300;
		}

			.mobile-navigation ul ul {
				padding: 0;
				border-top: 1px solid rgba(255, 255, 255, 0.05);
				margin: 0;
				background: #2a2a2a;
				display: none;
			}

		.mobile-navigation li {
			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			margin: 0;
			list-style: none;
			position: relative;
		}

			.mobile-navigation li span {
				padding: 10px 20px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.25);
				color: #fff;
				display: block;
				cursor: pointer;
				position: relative;
			}

				.mobile-navigation li span:active {
					border-bottom: 1px solid rgba(0, 0, 0, 0.35);
					background: rgba(255, 255, 255, 0.025);
					font-style: italic;
				}

				.mobile-navigation li span i {
					position: absolute;
					top: 12px;
					right: 20px;
				}

				.mobile-navigation li span.highlight {
					padding: 1px 5px;
					border: 0;
					background: #c32c54;
					font-size: 11px;
					line-height: 14px;
					text-transform: uppercase;
					position: absolute;
					right: 20px;
					top: 12px;
					font-style: normal !important;
				}

			.mobile-navigation li.open {
				border-bottom: 0;
			}

			.mobile-navigation li a {
				padding: 10px 20px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.25);
				color: #fff;
				display: block;
				text-decoration: none;
			}

				.mobile-navigation li a:active {
					border-bottom: 1px solid rgba(0, 0, 0, 0.35);
					background: rgba(255, 255, 255, 0.025);
					font-style: italic;
				}

		.mobile-navigation .mobile-overlayer {
			height: 100%;
			width: 100%;
			background: rgba(255, 255, 255, 0);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 200;
		}

		/* -------------------------------------------------------------
		Tablet vertical
		640px / 959px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.mobile-navigation {
				width: 40%;
			}

				.mobile-navigation:before {
					left: 40%;
				}

			.open-mobile-navigation .mobile-navigation {
				left: 0;
				display: block;
			}

		}

		/* -------------------------------------------------------------
		Phone horizontal
		480px / 639px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.mobile-navigation {
				width: 80%;
			}

			.open-mobile-navigation .mobile-navigation {
				left: 0;
				display: block;
			}

		}

		/* -------------------------------------------------------------
		Phone vertical
		320px / 479px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.mobile-navigation {
				width: 80%;
			}

			.open-mobile-navigation .mobile-navigation {
				left: 0;
				display: block;
			}

		}

	/* -------------------------------------------------------------
	I-Service
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

	.iservice-frame {
		padding: 0 15px;
	}

	/* I-Service Frame */
	.iservice-frame-search {
	}
		.iservice-frame-search .column {
			margin: 0;
		}

	.iservice-frame-count {
		margin: 0 0 100px;
		padding: 0;
		position: relative;
		text-align: center;
	}

		.iservice-frame-count i {
			display: none;
		}
		.iservice-frame-count strong {
			font-size: 75px;
			color: #00315B;
			line-height: 90px;
			font-weight: normal;
		}
		.iservice-frame-count span {
			color: #00315B;
			font-size: 25px;
		}
		.iservice-frame-count span.start-page {
			line-height: 35px;
			display: block;
		}

	.iservice-frame-headline h2 {
		text-align: center;
		color: #00315B;
		font-size: 22px;
		margin: 0 0 40px;
	}

	.iservice-list {
		margin: 0 0 50px;
	}

	.more {
		cursor: pointer;
		font-size: 16px;
		color: #00315B;
	}

	/* I-Service Listobject */
	.int-obj-outer {
		width: 33.3%;
		padding: 0 30px;
		margin: 0 0 60px 0;
		float: left;
		display: none;
	}

	.int-obj {
		width: 100%;
		height: 250px;
		padding: 15px 30px;
		position: relative;
		-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
		overflow: hidden;
	}

	.int-obj:hover,
	.int-obj:active {
		-webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
	}

		.int-obj table {
			width: 100%;
			padding: 0 0 10px 0;
			margin: 0 0 15px 0;
		}

			.int-obj table tr td {
				width: 50%;
				padding: 5px 0;
				vertical-align: top;
				overflow: hidden;
				border-bottom: 1px solid #d5d5d5;
			}

		.int-obj a {
			margin: 0;
			background-color: #00315B;
			color: #fff;
			text-decoration: none;
			line-height: 36px;
			display: inline-block;
			text-align: center;
			font-size: 18px;
			padding: 0 15px;
			border-radius: 5px;
			position: absolute;
			left: 30px;
			bottom: 45px;
		}

		/* -------------------------------------------------------------
		Tablet vertical
		640px / 959px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.int-obj-outer {
				width: 50%;
				padding: 0 15px;
				margin: 0 0 30px 0;
			}

			.int-obj {
				padding: 15px;
			}

		}

		/* -------------------------------------------------------------
		Phone horizontal
		480px / 639px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.int-obj-outer {
				width: 100%;
				padding: 0 15px;
				margin: 0 0 30px 0;
			}

			.int-obj {
				padding: 15px;
			}

		}

		/* -------------------------------------------------------------
		Phone vertical
		320px / 479px
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

			.int-obj-outer {
				width: 100%;
				padding: 0 15px;
				margin: 0 0 30px 0;
			}

			.int-obj {
				padding: 15px;
			}

		}

	/*ERWEITERUNGEN*/

	.bottom-contact {
		margin: 100px 0;
	}

		.bottom-contact h1 span {
			color: #00315B;
		}

		.bottom-contact button {
			width: auto;
		}

		.bottom-contact .smalltext {
			font-size: 12px;
		}

	.form-status-error,
	.form-status-success {
		width: 320px;
		margin: 0 auto 40px;
	}

		.form-status-error * {
			color: #a81d1d !important;
			text-align: center;
		}

		.form-status-error > p {
			font-size: 16px;
		}

		.form-status-success * {
			font-size: 16px;
			color: #16a412 !important;
		}

	.bg-img {
		position: absolute;
		right: 30px;
		bottom: -20px;
	}

		.bg-img	i {
			color: #eee;
			font-size: 90px;
		}

	.id {
		position: absolute;
		left: 30px;
		bottom: 13px;
		color: #aaa;
	}

	/*Overwrite select2 Style*/

	.select2-container {
		width: 100% !important;
	}

	.select2-container--default .select2-selection--single {
		border-radius: 0 !important;
		height: 35px !important;
		border: 1px solid #ccc !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		height: 37px !important;
		line-height: 35px !important;
		padding: 0 20px 0 13px !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 0 !important;
		height: 37px !important;
	}