/*
	Theme Name: TechnoPlus
	Author: Philipp Caldwell
	Version: 1.0
	Description: Base Theme for TechnoPlus
*/

	/*=^.^=|=^.^=|=^.^=|=^.^=|=^.^=|=^.^=|=^.^=
			KEEP THES FILE ORGANISED
			IT EASYLY GETS 400+ LINES
	=^.^=|=^.^=|=^.^=|=^.^=|=^.^=|=^.^=*|=^.^=/

/+	====================================
		start	fonts
	====================================*/

@font-face {
    font-family: "exo_2.0bold";
	src: url("./fonts/Exo2.0-Bold-webfont.woff");
    font-weight: normal;
}

@font-face {
    font-family: 'exo_2.0semi_bold';
  src: url("./fonts/Exo2-SemiBold-webfont.woff");
    font-weight: normal;
}

@font-face {
    font-family: "exo_2.0medium";
	src: url("./fonts/Exo2.0-Medium-webfont.woff");
    font-weight: normal;
}

@font-face {
    font-family: "exo_2.0regular";
	src: url("./fonts/Exo2.0-Regular-webfont.woff");
    font-weight: normal;
}

@font-face {
    font-family: "exo_2.0light";
	src: url("./fonts/Exo2.0-Light-webfont.woff");
    font-weight: normal;
}

@font-face {
  font-family: "Fontawesome";
	src: url("./fonts/fa-solid-900.woff");
    font-weight: normal;
}

@font-face {
  font-family: "Glyphicons Halflings";
	src: url("./fonts/glyphicons-halflings-regular.woff");
    font-weight: normal;
}

	/*=================================
		end		fonts
	-----------------------------------
		start	image classes
	==================================*/
img.bottom {
	margin-bottom: 20px;
}


.smallImg {
    width: 120px;
    height: auto;
}

.textImg {
    vertical-align: bottom;
    max-height: 32px;
    width: auto;
}

	/*=================================
		end		image classes
	-----------------------------------
		start	general style
	==================================*/

header, main, footer, article, nav, section, aside{
	display: block;
}

html{
	--mc0: #fff;				/* main background color (white) */
	--mc1: rgb(242,242,242);	/* secondary backgroundcolor (light gray) */
	--mc2: rgb(11,50,103);		/* background for menu and some headings (blue) */
	--mc3: rgb(50,50,50);		/* main text color (black)*/

	--fc1: rgb(45,45,45);		/* main footer color (black-isch) */
	--fc2: rgb(83,83,82);		/* secondary footer color (gray) */
	
	scroll-behavior: smooth;
}

body{
	margin: 0px;
	font-size: 18px;
	color: #323232;
	line-height: 26px;
	font-family: "exo_2.0light", Arial, sans-serif;
}

#top-link {
  display: none;
  position: fixed;
  right: 0;
  bottom: 40%;
  width: 42px;
  height: 60px;
  cursor: pointer;
  -webkit-border-radius: 200px 0 0 200px;
  border-radius: 200px 0 0 200px;
  background: url('/wp-content/uploads/2018/06/up_transp.png') no-repeat center #8d773f;;
  border-style: solid;
  border-color: rgba(242,242,242,0.2);
  border-width: 2px 0 2px 2px;
  background-clip: padding-box;
  transition: 0.5s;
	z-index: 999;
}

#top-link:hover {
background-color: #0b3267;
}

@media (orientation: portrait) {
#top-link {
  width:60px;
  height:32px;
  bottom:0;
  right: 0;
  -webkit-border-radius: 200px 200px 0 0;
  border-radius: 200px 200px 0 0;
  background: url('/wp-content/uploads/2018/06/up_bottom_transp.png') no-repeat center bottom #8d773f;;
  border-width: 2px 2px 0 2px;
}

#top-link:hover {
background-color: #0b3267;
}

#HeaderScrollStart {
  display:none;
}
}

h1, h2, h3{	
	/*text-align: left;*/
}

h1 {
    font-size: 44px;
		line-height: 52px;
  	font-weight: normal;
 		margin: 15px 0 25px 0;
  	font-family: "exo_2.0regular",Arial,sans-serif;
}

h1 span.secondline {
    display: block;
    font-size: 40px;
    line-height: 48px;
    font-family: 'exo_2.0light';
    margin: 25px 0 30px 0;
}

h2{
  font-size: 40px;
  font-weight: normal;
  line-height: 48px;
  margin: 5px 0 30px 0;
  font-family: "exo_2.0light",Arial,sans-serif;
}


h3{
  font-size: 30px;
  line-height: 36px;
  font-weight: normal;
  margin: 5px 0 20px 0;
  font-family: "exo_2.0light",Arial,sans-serif;
}

h4{
  font-size: 25px;
  line-height: 32px;
  font-weight: normal;
  margin: 5px 0 20px 0;
  font-family: "exo_2.0light",Arial,sans-serif;
}

h5{
  font-size: 20px;
  line-height: 27px;
  font-weight: normal;
  margin: 5px 0 0 0;
  font-family: "exo_2.0light",Arial,sans-serif;
}

h1 span.secondline {
  display:block;
  font-size: 0.8em; 
  line-height: 48px;
  font-family: 'exo_2.0light';
  margin: 25px 0 30px 0;
}

h1.titlegraphic {
  color:#323232;
  font-size: 25px;
  line-height: 30px;  
  margin: 5px 0 20px 0;
  text-align: center;
}

h1.titlegraphic .graphictitle {
    color: #2C446C;
    font-size: 30px;
    line-height: 36px;
    display: block;
    margin: 15px 0 8px 0;
    font-family: "exo_2.0semi_bold",Arial,sans-serif;
}

ul, ol {
  margin: 10px 0 35px 0;
  padding-left: 17px;
}

h3 + ul, 
h3 + ol,
h4 + ul, 
h4 + ol{
  margin: 35px 0 35px 0;
  padding-left: 21px;
}

ul.engine {
  margin: 5px 0 30px 0;
  padding-left: 21px;
}

ul.sub{
  margin: 0 0 10px 0;
  font-size: 16px;
}

ul.orangept{
  margin: 35px 0 20px 0;
  color:#dc911e;
}

li{
  margin: 5px 0;
}

li.wide{
  margin: 5px 0;
}

.fontawesome {
  font-family: "Fontawesome";
}

.align-left{
  text-align:left;
}

.align-right{
  text-align:right;
}

.align-center{
  text-align:center;
}

.div-center {
	margin: 0 auto;
}

.align-justify{
  text-align:justify;
}

.keinmargin {
  margin: 0;
}

.flexcenter {
	display: flex;
	align-items: center;
}


/* -------------------------- LINKS ---------------------------- */
a, a:link, a:active, a:visited{
  color: #8d773f;
  text-decoration: none;
  font-family: "exo_2.0semi_bold",Arial,sans-serif;
  transition:0.4s;
}

a:hover{
  color: #0b3267;
  text-decoration: none;
  font-family: "exo_2.0semi_bold",Arial,sans-serif;
  transition:0.4s;
}

a:before {
  transition:0.4s;
}

a:hover:before {
  color: #0b3267 !important;
  transition:0.4s;
}

a.white:link, a.white:active, a.white:visited{
  color: #FFFFFF;
  text-decoration: none;
  font-family: "exo_2.0semi_bold",Arial,sans-serif;
}

a.white:hover{
  text-decoration: underline;
}

a.white:hover:before{
  text-decoration: underline;
	color: #ffffff !important;
}

a.down:link, a.down:active, a.down:visited, a.down:hover{
  color: #FFFFFF;
  text-decoration: none;
  font-family: Fontawesome;
  font-size: 50px;
  margin: 7px 0 0 0;
}

a.copyright:link, a.copyright:visited, a.copyright:active{
  color: #8d773f;
  text-decoration: none;
  font-family: "exo_2.0regular",Arial,sans-serif;
}

 a.copyright:hover{
  color: #0b3267;
}


.external-link:before, a.external-link:link:before, a.external-link:active:before, a.external-link:visited:before,
.external-link-new-window:before, a.external-link-new-window:link:before, a.external-link-new-window:active:before, a.external-link-new-window:visited:before,
.tx-abook-pi1-www a:link:before, .tx-abook-pi1-www a:active:before, .tx-abook-pi1-www a:visited:before {
  content:"\f138";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #8d773f;
}

.internal-link:before, a.internal-link:link:before, a.internal-link:active:before, a.internal-link:visited:before,
.internal-link-new-window:before, a.internal-link-new-window:link:before, a.internal-link-new-window:active:before, a.internal-link-new-window:visited:before,
.tx-abook-pi1-detaillink a:link:before, .tx-abook-pi1-detaillink a:active:before, .tx-abook-pi1-detaillink a:visited:before,
.morelink:before, a.morelink:active:before, a.morelink:visited:before, a.morelink:link:before{
  content:"\f138";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #8d773f;
}

.mail:before, a.mail:active:before, a.mail:visited:before, a.mail:link:before,
.tx-abook-pi1-email a:link:before, .tx-abook-pi1-email a:visited:before, .tx-abook-pi1-email a:active:before {
  content:"\f0e0";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #8d773f;
}

.download:before, a.download:active:before, a.download:visited:before, a.download:link :before{
  content:"\f019";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #8d773f;
}

.backlink:before, a.backlink:active:before, a.backlink:visited:before, a.backlink:link:before,
.tx-abook-pi1-backlink a:before, .tx-abook-pi1-backlink a:link:before, .tx-abook-pi1-backlink a:active:before, .tx-abook-pi1-backlink a:visited:before {
  content:"\f137";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #8d773f;
}

/*--------------Links ohne padding-left----------------*/

.external-link-nopadding:before, a.external-link-nopadding:link:before, a.external-link-nopadding:active:before, a.external-link-nopadding:visited:before
{
  content:"\f138";
  padding-right: 0.3em;
  font-family: Fontawesome;
  color: #8d773f;
}

.internal-link-nopadding:before, a.internal-link-nopadding:link:before, a.internal-link-nopadding:active:before, a.internal-link-nopadding:visited:before
{
  content:"\f138";
  padding-right: 0.3em;  
  font-family: Fontawesome;
  color: #8d773f;
}

.link-inaktiv:before
{
  content:"\f138";
  padding-right: 0.3em;
  font-family: Fontawesome;
  color: #969696;
}


/*--------------Links Weiss----------------*/

.external-link-white:before, a.external-link-white:link:before, a.external-link-white:active:before, a.external-link-white:visited:before
{
  content:"\f138";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #ffffff;
}

.internal-link-white:before, a.internal-link-white:link:before, a.internal-link-white:active:before, a.internal-link-white:visited:before
{
  content:"\f138";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #ffffff;
}

.mail-white:before, a.mail-white:active:before, a.mail-white:visited:before, a.mail-white:link:before {
  content:"\f0e0";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #ffffff;
}

.download-white:before, a.download-white:active:before, a.download-white:visited:before, a.download-white:link:before {
  /*content:"\f103";*/
  content:"\f019";
  padding-right: 0.3em;
  padding-left: 0.2em;
  font-family: Fontawesome;
  color: #ffffff;
}


/*------------------------------*/

section {
    padding: 5px 0px;
}

.category-faq section:first-child {
    box-sizing: border-box;
    padding-top: 50px;
}

article a{
	color: rgb(141,119,63);
}


main article, .category-faq section > h1{
	width: 100%;
	padding: 0px 20%;
	box-sizing: border-box;
}

#header-menu .menu {
	width: 100%;
	padding: 0px 2%;
	box-sizing: border-box;
}

@media (max-width: 1500px){
	main article, .category-faq section > h1{
		padding: 0px 10%;
	}
}

@media (max-width: 625px){
	main article, #header-menu .menu, .category-faq section > h1{
		padding: 0px 20px;
	}
  
#header-menu .menu {
	padding: 0px 20px;
}
}

.textOverflow{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* header */

#topHeader {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 10%,rgba(217,225,237,0.8) 100%); 
}

#header_left, #header_right{
	vertical-align: top;
	display: inline-block;
	height: 155px;
	box-sizing: border-box;
}

#header_left{
	padding: 38px 0px;
	max-width: 390px;
	height: auto;
}

#header_right{
	padding: 40px 0px;
}

#header_right, #header_right h1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0px 10px;
}

#header_right {
	text-align: center;
	font-size: 18px;
}

#header_right #headerTitle {
	margin: 0px;
	margin-top: 18px;
	color: rgb(11,50,103);
	font-size: 28px;
	line-height: 45px;
	font-family: "exo_2.0medium",Arial,sans-serif;
}

#header_right #headerSubtitle {
	font-size: 23px;
	font-family: "exo_2.0regular",Arial,sans-serif;
}

@media (max-width: 780px){
	#header_left, #header_right{
		width: 90%;
		height: auto;
	}
}

/* main */

main {
	min-height: 459px;
	min-height: calc(100vh - 175px - 260px);	/* 100vh - header - footer */
}

main article{
	padding-top: 50px;
	padding-bottom: 50px;
	color: rgb(50,50,50);
	font-size: 18px;
}

main article:first-child {
	padding: 0;
}

#startPage article:nth-child(2){
	padding-bottom: 5px;
}

#startPage article:nth-child(3){
	padding-top: 10px;
}

.page article{
	min-height: 100%;
}

.category article{
	min-height: 250px;
}

.category article:nth-child(2n + 1) {
	background: rgb(242,242,242);
}

.category.category-faq article {
    background: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
}

.category .post-wrap {
	align-self: center;
	box-sizing: border-box;
	padding-left: 70px;
}

/* footer */

footer{
	background: rgb(45,45,45);
	color: #fff;
	font-size: 15px;
	line-height: 22px;
}

#kontakt_container {
	display: flex;
	flex-flow: wrap;
	min-height: 180px;
	background: rgb(45,45,45);
	padding-bottom: 40px;
	padding-top: 40px;
}

#kontakt_container span{
	display: block;
}

#footer_left_2 span {
	height: 50px;
}

#kontakt_container span img {
  height: 32px;
  width: 32px;
  vertical-align: middle;
  padding-right: 10px;
}

#kontakt_container a {
	cursor: pointer;
}

#kontakt_container a:hover {
	color: inherit;
}

#footer_left {
	width: 315px;
	padding-right: 85px;
	box-sizing: border-box;
}

#footer_left_2 {
	padding-top: 10px;
}

#footer_right {
	padding: 5px 0px;
	height: 124px;
	margin-left: auto;
	color: #e4e4e4;
}

#htw_footer_logo {
	height: 80px;
	width: auto;
	margin-top: 15px;
}

footer .fa {
  display: inline-block !important;
	font-size: 25px;
	padding-right: 25px;
}

footer .menu li:visited, footer .menu li:hover, footer .menu li:active, footer .menu li:focus {
	background:transparent;
}

footer li.current-menu-item {
	background:transparent;
	color:#ffffff;
}

footer li.current-menu-item:hover {
	background:transparent;
	color:#ffffff;
}

footer li a:hover {
	color:#ffffff !important;
	text-decoration: underline;
}

#footer-menu, #kontakt_container {
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
}

@media (min-width:1200px) {
#kontakt_container {
	  width: 1170px;
}

#footer-menu {
	  padding-left: calc((100% - 1140px)/2);
		padding-right: calc((100% - 1140px)/2);
		padding-top: 10px;
}
}

@media  (max-width:1200px) and (min-width:992px) {
#kontakt_container {
    width: 970px;
}
		
#footer-menu {
	  padding-left: calc((100% - 970px)/2);
}
}

@media (min-width:768px) and (max-width:992px) {
#kontakt_container {
    width: 750px;
}
		
#footer-menu {
	  padding-left: calc((100% - 750px)/2);
}
}

@media (max-width: 1363px){
	#kontakt_container > *{
		margin: 15px auto;
		padding: 0px;
		width: 280px;
	}
}

#img-EUROKEY{
	max-width: 55vw;
	margin-bottom: 20px;
}

#fr_heading {
	margin-right: 20px;
	font-weight: bold;
	font-size: 30px;
	white-space: nowrap;
}

.footerGray {
	color: rgba(176,176,176);
}

/*	==================================
		end		general style
	----------------------------------
		start	start page
	==================================*/

	#start_first{
		background-image: url('Images/start_first_bg.jpg');
		background-size: auto 100%;
		background-repeat: no-repeat;
	}

@media(min-width: 2100px){
	#start_first{
		background-size: 100% auto;
	}
}

	article{
		min-height: 100%;
		display: flex;
		text-align: justify;
	}

	article > img {
		height: 300px;
		width: auto;
		align-self: center;
		margin: 0px auto;
	}

	#start_first img{
		display: block;
		margin: auto;
		height: auto;
		width: 60vw;
		max-width: 750px;
	}

@media (max-width: 1400px){
	article {
		flex-wrap: wrap;
	}
}

@media (max-width: 760px){
	article img {
		width: 100%;
		height: auto;
		margin: 0px;
	}
}

	#registerLogin {
		display: flex;
		justify-content: space-around;
		background: rgb(242,242,242);
		padding-top: 40px;
		padding-bottom: 50px;
		font-weight: bold;
	}

	#registerLogin div {
		background: rgb(222,224,228);
		padding: 0px 15px 15px;
		min-width: 350px;
		margin: 10px;
		box-sizing: border-box;
		border-radius: 6px;
	}

	#registerForm {
		display: none;
	}

@media (max-width: 400px){
	#registerLogin div {
		min-width: 90vw;
	}
}

	#login-form p {
		margin: 0px;
	}

	#registerLogin div input{
		height: 25px;
		line-height: 12px;
	}

	#registerLogin div input, #registerLogin div label {
		display: block;
		box-sizing: border-box;
		border: none;
	}

	#registerLogin h3 {
		background: rgb(11,50,103);
		color: #fff;
		padding: 5px 10px;
		border-radius: 5px 5px 0px 0px;
		margin: 0px -15px 20px;
	}

	#registerLogin h3 span{
		font-weight: normal;
		font-size: 16px;
	}

	#registerLogin input[type="text"], #registerLogin input[type="email"], #registerLogin input[type="password"] {
		width: 100%;
		margin: 2px 0px 10px;
		padding: 0px 10px;
		border-radius: 5px;
	}

	#registerLogin div input:focus {
		outline: none;
		border: 1px solid rgb(11,50,103);
	}

	#registerLogin input[type="submit"] {
		float: right;
		padding: 5px 15px;
		margin-top: 25px;
		min-width: 100px;
		background: rgb(141,119,63);
		border-radius: 5px;
		color: #fff;
		cursor: pointer;
	}

/*	==================================
		end		start page
	----------------------------------
		start	category verf.-einh.
	==================================*/

.startCourse {
    display: block;
    float: right;
    width: 100px;
    height: 32px;
    background: rgb(141,119,63);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
	margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    text-align: center;
	transition: 1.2s;
}

.startCourse:hover{
	color: #fff;
	background-color: rgb(164,146,101);
	transition: background 0.4s;
}

/*	==================================
		end		category verf.-einh.
	----------------------------------
		start	category FAQ
	==================================*/

.category-faq article {
    min-height: unset;
}

.category-faq .post-wrap {
	padding: 0px 30px;
}

.category .post-wrap h2{
	/*margin-left: -10px;*/
}

label[for^="toggle-"] {
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 6px;
	transition: 1.2s;
}

label[for^="toggle-"]:hover {
    background: rgb(242,242,242);
    transition: 0.4s;
}

.toggle-after{
	display: none;
}

.toggle-after ~ *{
	display: none;
}

.toggle-after:checked ~ *{
	display: block;
}

/*	==================================
		end		category FAQ
	----------------------------------
		start	menu
	==================================*/

/* header menu */

#header-menu {
	background: rgb(11,50,103);
	color: #fff;
	min-height: 50px;
	line-height: 50px;
}

#userControl span{
	position: relative;
	padding-left: 5px;	/* distance to icon */
	margin-left: 20px;	/* prevent collisions with icon */
}

#userControl span::before {
	content: "";
	position: absolute;
	top: 0px;
	left: -20px;
	width: 20px;
	height: 20px;
	background: url('Images/userControl.png');
}

#header-menu .menu ul {
	margin: 0;
}

/* footer menu */

#footer-menu {
	min-height: 50px;
	line-height: 30px;
	background: rgb(82,82,82);
}

#footer-menu .menu a {
	font-size: 14px;
	width: auto;
}

#footer-menu li{
	flex: unset;
	padding: 0px 10px;
}

#footer-menu li:first-child {
	margin-left: -10px;
}

#footer-menu .menu > ul {
	margin: 0px;
}

@media (max-width: 1363px){
	#footer-menu li{
		flex: auto;
	}
}

/* general menu */

.menu {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: inherit;
	margin: 0px;
	padding: 0px;
}

.menu li {
	display: inline-block;
	height: inherit;
	cursor: pointer;
	transition: background 1.2s;
	text-align: center;
	flex: auto;
	margin: 0 0 0 1px;
}

.menu li:hover {
	/*background-color: rgba(255,255,255,0.2);*/
	background: linear-gradient(to top, rgb(211, 201, 179), rgb(235,230,220));
	transition: background 0.4s;
}

.menu li a{
	display: inline-block;
	width: 100%;
	padding: 0px 3.2%;
	box-sizing: border-box;
	color: inherit;
	font-family: "exo_2.0medium",Arial,sans-serif;
	font-size: 16px;
	text-decoration: none;
}

.menu li a:hover {
	color: rgb(11,50,103);
}

.current-menu-item {
	background: linear-gradient(to bottom, rgb(211, 201, 179), rgb(235,230,220));
	color: rgb(11,50,103);
}

@media (min-width:800px) and (max-width: 1500px) {
.menu li a{
		padding: 0px 3.2%;
		font-size: 1vw;		
}
}

#responciveMenuToggle {
		opacity: 0;
		width: 32px;
		height: 29px;
		margin: 0px;
		top: 12px;
		left: 26px;
		position: absolute;
		cursor: pointer;
}

#responciveMenuButton {
	position: relative;
	top: 23px;
	left: 29px;
	margin-bottom: 23px;
	margin-right: 29px;
}

#responciveMenuButton, #responciveMenuButton::before, #responciveMenuButton::after {
	background: #eee;
	width: 25px;
	height: 3px;
}

#responciveMenuButton::before {
	content: "";
	top: -8px;
	position: absolute;
}

#responciveMenuButton::after {
	content: "";
	top: 8px;
	position: absolute;
}

#responciveMenuButton, #responciveMenuToggle {
	display: none;
}

#responciveMenuToggle:checked ~ #header-menu_s {
	display: block;
}

#headerResponciveLogo {
	display: none;
	max-height: 35px;
	width: 100%;
	margin: 7px 0;
}

/*	==================================
		end		menu
	----------------------------------
		start	course
	==================================*/

.course{
	width: 100vw;
	height: 100vh;
}

/*	==================================
		end		course
	==================================*/

@media (max-width: 1000px) {
	header > *, #topHeader{
		display: none;
	}

	header .smallHeader {
		position: relative;
		background: rgb(11,50,103);
		opacity: 1;
		top: 0px;
		left: 0px;
		height: 50px;
		width: 100%;
		z-index: 20;
		display: block !Important;
	}

	#header-menu_s {
		display: none;
	}

	.smallHeader .container {
		float: right;
		width: unset;
		max-width: 90%;
	}
	
	.smallHeader a {
		padding: 0 !important;
	}

	body .smallHeader #header-menu_s {
		position: absolute;
		top: 50px;
		width: 100%;
		background: rgba(240, 240, 239, 1);
		color: rgb(11,50,103);
		padding: 20px 0;
		 box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.6);
 		 -moz-box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.6);
 		 -webkit-box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.6);
	}

	#header-menu_s ul, #header-menu_s li {
		display: block;
		padding: 6px 0;
	}

	#header-menu_s a {
			font-size: 18px;
	}

	#header_small_logo {
		display: none;
	}

	#responciveMenuButton, #responciveMenuToggle {
		display: block;
	}

	#headerResponciveLogo {
		display: inline-block;
	}

	#htw_footer_logo{
			max-width: 100%;
			height: auto;
	}
}

@media (max-width: 768px) {
body {
	font-size: 16px;
	line-height: 22px;
}
		
h1{
  font-size: 32px;
  line-height: 38px;
  margin: 5px 0 25px 0;
  font-family: "exo_2.0regular",Arial,sans-serif;
}

h1 span.secondline {
  display:block;
  font-size: 25px;
  line-height: 30px;
  font-family: 'exo_2.0light';  
}

h2 {
  font-size: 25px;
  line-height: 29px;
  font-family: "exo_2.0regular",Arial,sans-serif;
}

h3 {
  font-size: 20px;
  line-height: 26px;
  font-family: "exo_2.0regular",Arial,sans-serif;
}

h4 {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 5px !important;
	font-family: "exo_2.0regular",Arial,sans-serif;
}

}

@media (max-width: 430px){
		.smallHeader .container{
				width: 100%;
				float: unset;
		}

		#header_small_logo {
				max-width: 100%;
				height: auto;
		}
		
		#headerResponciveLogo {
			max-height: 25px;
		}

		#responciveMenuButton {
				margin: auto;
				left: 0px;
				top: 0px;
		}

		#responciveMenuToggle {
				top: 38px;
				left: 50%;
				left: calc(50% - 15px);
		}

		#header-menu_s {
			top: 70px;
		}

		#header-menu_s a {
				font-size: 16px;
		}

		.smallHeader #topHeader_s a {
				padding: 0px !important;
		}

		header .smallHeader {
			height: 70px !important;
		}
		
		body .smallHeader #header-menu_s {
    	top: 70px;
		}
}

@media (max-width: 350px){
		h1 {
			font-size: 25px;
		}
	
		h1 span.secondline {		  
		  font-size: 23px;
		}
	
		h2 {
			font-size: 22px;
		}
	
		h3 {
			font-size: 20px;
		}
	
}