@charset "UTF-8";

/**
*	Copyrights by protokk software
*	Hamburg 2019
*	Main Style, only main template
*	Ver. 2.00
*	14.02.2019
*/

@font-face { font-family: 'roboto';
             src: url('../fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'roboto';
			 font-weight: bold;
             src: url('../fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'titillium';
             src: url('../fonts/Titillium-Regular.otf')}
@font-face { font-family: 'titillium';
			 font-weight: bold;
             src: url('../fonts/Titillium-Bold.otf')}      
@font-face { font-family: 'opensans';
             src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'opensans';
			 font-weight: bold;
             src: url('../fonts/OpenSans-Bold.ttf') format('truetype'); }       
  
body {
	background-color: #FFFFFF;
	font-family: roboto, Verdana, Arial, sans-serif;
	font-size: 100%; /* 12 / 16 */
	color: #444444;
  	margin: 0;
	text-align: center;
	vertical-align: top;
	line-height: 1.5;
	letter-spacing: 1.5;
	}

table {
	width: 100%;
	}

h1, h2, h3 {
	font-family: titillium, Arial, Helvetica, sans-serif;
	color: #166895;
	font-size: 3em;
	font-weight: normal;
	margin-bottom: 1em;
	}

h2 {
	font-size: 2em;
	margin-bottom: 0.6667em;
	}

h3 {
	font-size: 1.1667em;
	margin-bottom: 0.6667em;
	}

p {
	margin-bottom: 2em;
	}

a {
	color: #145bca;
	font-weight: bold;
	text-decoration: none;
	}

a:visited {
	color: #145bca;
	font-weight: bold;
	text-decoration: none;
	}

a:active {
	color: #145bca;
	font-weight: bold;
	text-decoration: none;
	}

a:hover {
	color: #145bca;
	font-weight: bold;
	text-decoration: underline;
	}
	
span.make_strong {
	color: #166895;
	}

#main_div {
	width: 100%;
	display: block;
	}
	
header {
	background: url('../protokk-software-header-bg.png') repeat-x;
	background-color: #ffffff;
	background-position: left 0px bottom -1px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 142px;
	text-align: center;
	z-index: 1000;
	box-shadow: 0 0 10px 1px #19407e;
	border-top: 4px solid #19407E;
	}
	
header div.inner, footer div.inner, #content div.inner {
	margin: 0 auto;
	max-width: 1000px;
	width: 96%;
	position: relative;
	padding: 0 2%;
	}
	
header div.inner {
	height: 142px;
	}
	
#protokk_software_logo {
	position: absolute;
	top: 14px;
	left: 17px;
	display: block;
	width: 220px;
	height: 60px;
	}

#content {
	margin-top: 146px;
	}
	
footer {
	background-color: #6c6a6c;
	width: 100%;
	height: 116px;
	margin-top: 4em;
	}
	
footer div.inner {
	padding-top: 22px;
	color: #cccccc;
	}
	
#copyrights_box {
	position: absolute;
	right: 2%;
	text-align: right;
	}
	
#cookie_check {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.75;
	font-size: 1.3333em;
	padding: 20px 0 24px 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	}
	
#cookie_check_box {
    position: absolute;
    top: 24px;
    left: 25%;
    background-color: #fff;
    width: calc(50% - 48px);
    min-height: 50%;
    padding: 24px;
    z-index: 1001;
    line-height: 1.5em;
	}

#cookie_check_box #cookie_check_ok {
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	display: block;
	margin: 24px 24px 0;
	background-color: #658cca;
	color: #fff;
	width: auto;
	padding: 12px;
	}

#static_right_box {
	background-color: #19407E;
	}
/* CONTENT.BEGIN +++++++++++ */

#content div.inner {
	min-height: 500px;
	}
	
#header_contact {
	background: url('../protokk-software-tel.png') no-repeat 0 4px;
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 0 0 0 24px;
	}
	
a.main_button, #cookie_check_ok {
	font-family: titillium, Arial, Helvetica, sans-serif;
	background-color: #658cca;
	border-radius: 4px;
	color: #ffffff;
	text-decoration: none;
	}
	
div.big_teaser {
	width: 100%;
	height: 350px;
	}
	
div.web_module_content {
	width: 100%;
	text-align: left;
	padding-top: 3em;
	}
	
div.web_module_content h1 {
	margin-bottom: 1em;
	}
	
div.teasers {
	display: block;
	margin-top: 120px;
	text-align: left;	
	}
	
div.teasers div.teaser {
	display: inline-block;
	width: 440px;
	min-height: 340px;
	vertical-align: top;
	position: relative;
	margin: 0 18px 120px;
	/*background-color: #f7f7f7;*/
	border-bottom: 1px solid #eaeaea;
	}
	
div.teaser h2 {
	font-family: titillium, Arial, Helvetica, sans-serif;
	color: #166895;
	font-size: 2em;
	height: 34px;
	text-align: left;
	vertical-align: middle;
	}
	
div.teaser img {
	float: left;
	margin-right: 12px;
	}
	
div.teaser p {
	margin: 2em 1em 1em 64px;
	}
	
div.teaser a.read_more {
	font-family: titillium, Arial, Helvetica, sans-serif;
	position: absolute;
	bottom: 12px;
	left: 64px;
	text-align: right;
	padding: 6px 32px 8px 12px;
	text-decoration: none;
	color: #ffffff;
	background: url('../protokk-software-more-bg.png') no-repeat;
	background-position: right 6px top 7px;
	background-color: #658cca;
	border-radius: 4px;
	font-size: 1em;
	display: block;
	}
	
div.teaser a:hover {
	border-color: #d90916;
	text-decoration: underline;
	}
	
a.back_to_top {
	display: none;
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	background: url('../protokk-software-back-top.png') no-repeat 0 0px;
	width: 40px !important;
	height: 40px;
	vertical-align: middle;
	text-decoration: none;
	}
	
div.big_teaser {
	width: 100%;
	height: 290px;
	padding: 0;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	background-color: #fbfbfb;
	}
	
div.big_teaser * {
	text-align: center;
	}
	
div.big_teaser div.big_teaser_content {
	clear: both;
	position: absolute;
	overflow: hidden;
	display: none;
	width: 100%;
	height: 290px;
	}
	
div.big_teaser div.big_teaser_content img {
	position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    display: block;
	}
	
div.big_teaser div.media_description {
	background: url('../protokk-software-teaser-content-bg.png') repeat;
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 470px;
	color: #166895;
	font-size: 1.6667em;
	margin: 0 0 0 -510px;
	padding: 8px 10px 12px 10px;
	vertical-align: middle;
	}
	
ul.big_teaser_navTab {
	position: absolute;
	overflow: hidden;
	display: block;
	left: 50%;
	margin-left: 60px;
	bottom: 10px;
	}
	
ul.big_teaser_navTab li {
    display: inline-block;
	margin-left: 4px;
	cursor: pointer;
	}
	
ul.big_teaser_navTab li a {
	width: 40px;
	height: 16px;	
	background-color: #ffffff;
	color: #ffffff;
	border: 3px solid #ffffff;
	border-radius: 14px;
	display: block;
	text-decoration: none;
	}
	
ul.big_teaser_navTab li a.current {
    background-color: #658cca;
    color: #658cca;
	}

div.object_media_line {
	display: block;
	}
	
div.object_media_line div.object_media_item {
	display: block;
	text-align: center;
	}
	
div.object_media_line div.object_media_item + div.object_media_item {
	margin-top: 64px;
	}

div.object_media_line div.object_media_item p {
	padding: 0.5em;
	font-size: 0.83333em;
	width: 286px;
	}
   
 div.pagination_line_load_button a {
 	text-align: center;
	border: 1px solid #5588c1;
	padding: 0.4em;
	text-decoration: none;
	background-color: #FFFFFF;
	display: block;
	font-size: 1.3333em;
	width: 50%;
	margin: 1em auto 0;
 	}
 	
div.pagination_line_load_button a:hover {
  	border-color: #d90916;
  	}
  	
 a.back_url {
 	font-size: 0.8333em;
 	}
 	
 a.tile_link {
 	margin: 12px 12px;
 	display: inline-block;
	vertical-align: top;
	border: 1px solid #dddddd;
 	}
 	
 div.lighthouse_left, div.lighthouse_right {
 	margin-bottom: 64px;
 	clear: both;
 	}
 	
 div.lighthouse_left div.object_media_line {
 	float: left;
	margin: 0 64px 64px 0;
 	}
 	
 div.lighthouse_right div.object_media_line {
	float: right;
	margin: 0 0 64px 64px;
 	}
 	
 div.lighthouse_left ul, div.lighthouse_right ul {
 	list-style: disc;
 	list-style-position: inside;
 	} 
/* CONTENT.END +++++++++++++ */

/* GDPR.BEGIN +++++++++++++++++++++++++++++ */
div.gdpr_options div.tool_tips_desc {
	margin: 12px 0;
	font-size: 12px;
	font-style: normal;
	padding: 0;
	}
	
div.gdpr_options table {
	width: 100%;
	font-size: 12px;
	}
	
div.gdpr_options table tr.gdpr_table_type {
	font-size: 14px;
	font-weight: bold;
	}
	
div.gdpr_options table tr td, 
div.gdpr_options table tr th {
	padding: 6px 0;
	line-height: 18px;
	}

div.gdpr_options table tr th {	
	color: #515151;
	}
		
div.gdpr_options table tr.gdpr_table_type td {
	background-color: #e1e1e1;
	}
	
div.gdpr_options table tr.gdpr_table_data + tr.gdpr_table_data {
	border-top: 1px solid #f0f0f0;
	}
	
div.gdpr_options table tr td input {
	width: auto!important;
	height: auto!important;
	}
	
div.gdpr_options a.form_button {
	width: 40%;
	max-width: 300px;
	margin-left: 12px;
	font-size: 1em;
	display: inline-block;
	}
	
div.gdpr_options h1 {
	font-size: 2em;
	margin-bottom: 12px;
	}
/* GDPR.END +++++++++++++++++++++++++++++++ */	

/* FORMULARS.BEGIN ++++++++++++++++++++++++++++++++ */
input, select {
	border-radius: 4px;
	border: 1px solid #7F9DB9;
	text-align: left;
	padding-left: 2px;
	vertical-align: top;
	height: 20px;
	background-color: #FFFFFF;
	}

select {
	height: 20px;
	}

textarea {
	padding-left: 2px;
	border-radius: 4px;
	border: 1px solid #7F9DB9;
	}

input:focus, select:focus, textarea:focus {
	border: 1px solid #466980;
	box-shadow: 0 0 3px #7799EE;
	}

input.formular_value_wrong, select.formular_value_wrong, textarea.formular_value_wrong {
	border-color: #d51602;
	}
	
div.area_header {
	width: 100%;
	height: 2em;
	margin: 0;
	border-bottom: 1px solid #D1D1D1;
	padding: 2em 12px 1em 12px;
	background-color: #FFFFFF;
	}

div.content_form_only div.area_header {
	width: 750px;
	}

div.tool_tips_desc {
	color: #697780;
	font-size: 0.916666em;
	font-style: italic;
	text-align: justify;
	padding: 2em 12px 2em 12px;
	background-color: #FFFFFF;
	}

div.error_tpl {
	margin: 0;
	padding: 1em 12px 1em 140px;
	background-color: #FFFFFF;
	height: 70%!important;
	min-height: 50%!important;
	}

div.form_item_front {
	margin: 0 0 4px 0;
	}

div.form_item_front a.c_key_image {
	width: 120px;
	height: 120px;
	display: block;
	}

div.form_item_front input, div.form_item_front select {
	width: 60%;
	}

div.form_item_front select {
	width: 61%;
	}

div.form_item_front textarea {
	width: 60%;
	height: 80px;
	}

div.form_item_front div.formular_name {
	width: 20%;
	float: left;
	}

a.form_button, a.form_button_send {
	margin: 2em 0 0 0;
	padding: 0.3333em;
	background-color: #006699;
	color: #ffffff;
	font-size: 1.3333em;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	border: 2px solid #004365;
	border-radius: 16px;
	text-decoration: none;
	display: block;
	margin-left: 20%;
	width: 60%;
	}

a.form_button:hover, a.form_button_send:hover  {
	background-color: #d90916;
	}

div.form_item_front .checkbox {
	width: 12px;
	height: 12px;
	border: 0;
	}

.form_main_field {
	color: red;
	font-size: 1em;
	font-weight: bold;
	height: 100%;
	}

strong.form_main_field {
	font-size: 14px;
	padding: 0 0 0 6px;
	}

div.form_main_field {
	margin: 2em 0 0 20%;
	}

div.form_item_front input.form_short, 
div.form_item_front select.form_short, 
div.form_item_front textarea.form_short {
	width: 100px;
	}
/* FORMULARS.END ++++++++++++++++++++++++++++++++++ */

/* MAIN MENU HORIZONTAL.BEGIN */
#menu_main {
	position: absolute;
	bottom: 1px;
	left: 10px;
	display: block;
	text-align: left;
	color: #ffffff;
	width: auto;
	height: 60px;
	}

#menu_main ul {
	z-index: 333; /* <-- Wir brauchen das für IE, sonst springt der Cursor auf die darunterliegenden Links über */
	text-align: left;
	list-style: none outside none;
	display: block;
	margin: 0;
	}

#menu_main li {
	padding: 0;
	margin: 0;
	position: relative;
	list-style: none outside none;
	text-align: left;
	display: inline-block;
	}

#menu_main li a {
	color: #ffffff;
	display: block;
	margin: 16px 22px;
	padding-bottom: 10px;
	text-decoration: none;
	font-family: opensans, Arial, Helvetica, sans-serif;
	font-weight: normal !important;
	font-size: 16px !important;
	}
	
#menu_main li a::after {
    position: relative;
    content: '';
    width: 0;
    height: 3px;
    background: #ffffff;
    display: block;
    margin-top: 10px;
    transition: all 300ms ease-in-out 0s;
}

#menu_main li a:hover::after, #menu_main li a.menu_active::after {
	width: 100%;
	}
/* MAIN MENU HORIZONTAL.END */

/* FOOTER MENU HORIZONTAL.BEGIN */
#menu_footer {
	display: block;
	height: 50px;
	text-align: left;
	margin: 2px 0 0 0;
	position: relative;
	float: left;
	}

#menu_footer ul {
	text-align: left;
	padding-top: 1px;
	list-style: none outside none;
	position: relative;
	height: 2em;
	}

#menu_footer li {
	padding: 0 12px;
	float: left;
	list-style: none outside none;
	text-align: left;
	position: relative;
	display: block;
	}

#menu_footer li.menu_first + li.menu_first {
	border-left: 1px solid #cccccc;
	}

#menu_footer li a {
	font-family: opensans, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #cccccc;
	font-size: 1em;
	text-decoration: none;
	display: block;
	text-decoration: none;
	border-bottom: 3px solid #6c6a6c;
	}

#menu_footer li a:hover, #menu_footer li a.menu_active {
	color: #ffffff;
	border-bottom: 3px solid #ffffff;
	}
/* FOOTER MENU HORIZONTAL.END */

a.mobile_menu_button {
	background: url('../protokk-software-mobile-menu.png') repeat-x;
	display: none;
	}
	
a.mobile_menu_close_button {
	background: url('../protokk-software-close.png') no-repeat;
	display: none;
	}
	
/* LIGHTFORM STYLE.BEGIN ++++++++++++++++++++++++ */
div.lightformcontent {
	border-radius: 6px;
  	border: 2px solid #004365;
	}
/* LIGHTFORM STYLE.END ++++++++++++++++++++++++++ */

/* PREVIEW-IMAGE-LINE.BEGIN +++++++++++++++ */
div.image_preview_line {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	}
	
div.img_preview_line_main {
	overflow: hidden; 
	display: block;
	position: relative;
	}

div.img_preview_line_source {
	position: relative;
	}

div.img_preview_line_source div {
	padding: 1px 1px 1px 1px;
	margin: 0;
	}

div.img_preview_line_back, div.img_preview_line_next {
	width: 20px;
	height: 20px;
	cursor: pointer;
	text-align: center;
	}
/* PREVIEW-IMAGE-LINE.END +++++++++++++++++ */

/* MOBILE WEBSEITE (TABLET).BEGIN ++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 999px)
{
	#cookie_check {
	    width: auto !important;
	    left: 0;
	    padding: 1em 60px;
	    margin: 0 !important;
	}
	
	div.teasers div.teaser {
		width: 420px;
	}
}

@media only screen and (max-width: 900px)
{
	div.big_teaser div.media_description {
		margin: 0!important;
		left: 0!important;
	}
	
	div.teasers div.teaser {
		width: 420px;
		min-height: 400px;
	}
}

@media only screen and (max-width: 849px){		
	div.teasers div.teaser {
		width: auto!important;
		padding-bottom: 12px;
		min-height: auto!important;
	}
	
	div.teaser h2 {
		height: auto;
	}
	
	div.teaser a.read_more {
		position: relative;
		bottom: 0;
		left: 0;
	}
}

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

}

@media only screen and (max-width: 759px){	
	#menu_main {
		left: 0;
		top: -34px;
		margin-left: 0px;
		width: 100%;
	}
	
	#menu_main a.mobile_menu_button {
		display: block;
		margin: 134px auto 0;
		width: 42px;
		height: 26px;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	#menu_main a.mobile_menu_close_button {
		display: block;
		width: 100%;
		height: 26px;
		background-position: top 4px right 4px;
	}
	
	#menu_main ul {
		display: none;
		top: 34px;
		width: 100%;
		position: absolute;
		background-color: #19407E;
		padding-bottom: 24px;
		background: url('../protokk-software-mobile-menu.png') #19407E no-repeat 10px 6px;
	}
	
	#menu_main ul li {
		float: none;
		display: block;
		margin: 0 3.0em;
	}
	
	#menu_main ul li a {
		display: inline-block;
	}
	
	#menu_main li a:hover, #menu_main li a.menu_active {
		background-color: #19407E;
	}
	
	#menu_main li ul {
		top: 0;
		position: relative;
	}
	
		
	div.web_module_content h1 {
		font-size: 2em;
	}
	
	div.web_module_content h2 {
		font-size: 1.6667em;
	}
	
	div.web_module_content h3 {
		font-size: 1.3333em;
	}
	
	div.teaser h2 {
		height: auto;
		font-size: 1.6667em;
	}
	
	div.object_content {
		font-size: 1.1em;
	}
}

/* MOBILE WEBSEITE (SMARTPHONE-XXL).BEGIN ++++++++++++++++++++++++++++ */
@media only screen and (max-width: 599px){
	footer {
		height: 170px;
	}
	
	#copyrights_box {
    	position: relative;
		text-align: center;
		display: block;
		clear: both;
		right: 0;
		padding-top: 1em;
	}
	
	ul.big_teaser_navTab {
		margin: auto;
		left: -9999px;
		right: -9999px;
	}
	
	div.teasers div.teaser {
	    width: auto;
	}
	
	div.lighthouse_right img, 
	div.lighthouse_left img {
		max-width: 200px;
		height: auto!important;
	}
	
	div.big_teaser div.media_description {
		font-size: 0.8333em;
		width: auto;
		bottom: 2px;
	}
}

/* MOBILE WEBSEITE (SMARTPHONE).BEGIN ++++++++++++++++++++++++++++ */
@media only screen and (max-width: 479px){
	#protokk_software_logo {
		left: 0px;
	}
	
	#header_contact {
		right: 2px;
		font-size: 0.8333em;
		background-position: top 1px left 0;
	}
	
	div.lighthouse_right div.object_media_line, 
	div.lighthouse_left div.object_media_line {
		float: none;
		margin: 0 0 64px 0;
	}
	
	div.lighthouse_right img, 
	div.lighthouse_left img {
		max-width: 300px;
	}
}