/* CSS

R.J.I.
Design, tech. Infrastruktur und Website Architektur: R.Infantino

*/


        
/* Google Webfont*/
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600,700&display=swap');
@import url ('https://fonts.googleapis.com/css?family= Source + Sans + Pro: 400.600.700 & display = swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,400i,500,500i,600,700');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
    border: 0;
	outline: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
body {
    line-height: 1;
    background: #eceff1;
		background-repeat: repeat;
		background-position: center center;
		background-size: 400px;
    font-family: Roboto;
    color: #181818;
    font-size: 16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body, html{
    height: 100%;
    min-height: 100%;
		scroll-behavior: smooth;
}

html{
}

ol, ul {
	list-style: none;
    line-height: 1.2em;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
    outline: inherit;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
p {
    line-height: 1.5em;
    margin: 20px 0;
}
ul, li{
    line-height: 1.5em;
}

/* HTML 5 Elemente = display:block;  */
header, nav, section, footer, article, figure, aside, content{
    display: block;
}
mark{
    background-color: #EDFFED;
}



::-moz-selection { /* Code for Firefox */
    color: #ffffff;
    background-color: #666666;
}

::selection {
    color: #ffffff;
    background-color: #666666;
}
        /* Headlines  */

h1{ font-family: 'Work Sans'; font-weight: 300; font-size: 30px;  line-height: 1.2em; letter-spacing: -1px;}
h2{ font-family: 'Work Sans'; font-weight: 300; font-size: 30px; line-height: 1.2em;}
h3{line-height: 1.4; font-weight: 700;font-size: 20px;}
h4{color: #ffffff; font-size:30px; line-height: 1.2em; font-weight: 300;}
h5{color: #ffffff; line-height: 1.2em; font-weight: 300;}

mark{
    padding: 5px;
    background-color: #fff7e1;
}
/* Basic Elements -------------------------------------*/

hr{
    border: 0;
    height: 1px
    background-color: #ebebeb;
}
.floatleft{
    float: left;
}
.floatright{
    float: right;
}
.center{
    text-align: center;
}
.lightgrey{
    background-color: #f1f1f1;
}

.overflow{
    overflow: hidden;
}

.padding{
    padding: 20px;
}

strong{
    line-height: 1.4em;
}

.pic{
    width: 100%;
    background-color: #f1f1f1;
    min-height:  300px;
    display: block;
}

.dezimal li{
    list-style-type: decimal;
}

a{
    text-decoration: none;
    color: #181818;
    transition:0.2s
}
a:hover{
    color: #777777;
}

a.extern{
  display: inline-block;
  background: #101010;
  padding: 10px 15px;
  color: #ffffff;
  border-radius: 2px;
}
a.extern:hover{
  background: #181818;
  color: #ffffff;
}

/* Goldener Schnitt / Strecke ----------------------------------*/

.shortway{
    width: 35%;
}
.longway{
    width: 65%;
}
.halfway{
    width: 48%;
}

.firstcolumn{
    width: 33%;
}
.centercolumn{
    width: 33%;
}
.lastcolumn{
    width: 33%;
}


.firstcolumn_four, .secoundcolumn_four, .thisrtcolumn_four, .lastcolumn_four{
  width: 24.5%;
}
.firstcolumn_four p, .secoundcolumn_four p, .thisrtcolumn_four p, .lastcolumn_four p{
  font-weight: 600;
}
.firstcolumn_four a, .secoundcolumn_four a, .thisrtcolumn_four a, .lastcolumn_four a{
  color: #14e0c3;
  font-size: 1.2em;
}
.firstcolumn_four a:hover, .secoundcolumn_four a:hover, .thisrtcolumn_four a:hover, .lastcolumn_four a:hover{
  color: #101010;
  font-size: 1.2em;
}

.service_list span{
  color: #101010;
}


article ul{
  margin-top: 20px;
  margin-bottom: 30px;
}


article ul li{
  list-style-type: none;
  padding: 0px 5px;
  margin-left: 30px;
}
article ul li::before {
  content: "\2022";
  color: #dee5ee;
  position: relative;
  top: 6px;
  font-size: 33px;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -33px;
  z-index: 0;
}

.yellowborder{
  border:4px solid #c9c9c9;
  padding-bottom:20px;
  border-radius:3px;
}

.autorin{
  width: 170px;
  height: 170px;
}


ol{
    margin: 20px;
    padding: 0 0 0 0px;
}
ol li{
    font-weight: 600;
    margin-bottom: 30px;
}
ol li ul li{
    list-style: square;
    font-weight: 300;
    margin-bottom: 0px;
}
ol li ul li ul li{
    list-style: decimal;
    font-weight: 300;
    font-size: 0.8em;
    color: #999999;
}
.date{
    font-size: 0.7em;
    color:#4ECDC4;
}

.numberlist{
    list-style-type: decimal;
}


/*--------------- Service Liste -------------------------- */
.service_list{
  width: 100%;
  text-align: center;
  margin: 70px 0px;
}
.service_list div{
  display: inline-block;
  min-height: 250px;
}


/* Passende Artikel ---------------------------------------------------------------*/

.sidebar_yellow_border{
  border-left: 0px solid #f4f4f4;
  background: #F3F5FF;
  padding: 20px ;
  margin-left: 30px;
  margin-bottom: 15px;
  border-radius: 12px;
}
.sidebar_yellow_border a{
  font-weight: 300;
}
.sidebar_border{
  background: #F3F5FF;
  padding: 20px ;
  margin-left: 30px;
  border-radius: 12px;
}

.sidebar_border a::after{
  content: " →";
  font-weight: 600:
}

.sidebar_border ul li{
  margin: 5px 0;
  padding: 0;
}
.sidebar_border li::before{
  content: " ";
  font-weight: 600;

}

.sidebar_yellow_border li{
  display: block;
  padding: 0;
  margin: 0 33px 10px;
  font-size: 0.8em;
}
.sidebar_yellow_border a{
  font-weight: 600;
}

.sidebar_yellow_border li::before{
  content: "NEU";
  font-size: 0.8em;
  padding: 0 5px;
  height: auto;
  margin-right: 5px;
  width: auto;
  position: relative;
  top: -2px;
  color: #ffffff;
  background:#ffffff;
}

.back_button{
  border: none;
  line-height: 1.4em;
  font-size: 1em;
  color: #14e0c3;
  cursor: pointer;
  background-color: ;
}
.back_button:hover{
    color: #181818;
}
/* Glossar ---------------------------------------------------------------*/

.glossar_list li::before{
  content: "";
  list-style-type: none !important;
  list-style: none;
}

.glossar_list li a{
  color: #181818;
  font-weight: 400;
}

.glossar_list li a::after{
  content: " →";
  font-weight: 600;
}

.glossar_list li a:hover{
  color: #14e0c3;
}
.glossar_list .current{
  color: red;
}

/* VCard ---------------------------------------------------------------*/

.vcard{

}


.vcard_container{
    position: relative;
    background-color: #ffffff;
   /* -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); */
    border: 0px solid #ffffff;
    width: 61%;
    max-width: 1147px;
    min-width: 1147px;
    margin: 0 auto;
    padding: 0;
    min-height: 150px;
    box-sizing: border-box;
    z-index: 100;

}
.flex{
     display: flex;
}

.picture{
    background: url('../img/Roberto-Infantino-Profile.jpg');
    background-position: center center;
    background-size: cover;
}

.vcard_box_right{
    color: #333333;
    background-color: #ffffff;

    /* background-size: 600% 600%;
    background: linear-gradient(60deg, #1C202D, #25475E, #1C202D);

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite; */
}
.vcard_box_right p{
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 2.8em;
    line-height: 50px;
    text-align: center;
    font-style: italic;
    padding: 50px 40px;
}

.vcard_wrap{
    width: 100%;
    min-height: 360px;
}

.skill_wrap{
    width: 100%;
}

.article_teaser p, .skill_box p{
    padding: 10px 20px 0;
}
.article_teaser h2, .skill_box h2{
    padding: 20px;
}

.socialmedia{
    float: right;
}
.socialmedia img{
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
}
.whatido{
    color: #ffffff;
    background-color: #FF6B6B;
    font-family: 'Roboto';
    font-weight: 300;
    padding-bottom: 20px !important;
    font-size: 1.4em;
    font-style: italic;
}

.createdcontent{
    overflow: hidden;

}
.createdcontent .longway p, .createdcontent .longway h1, .createdcontent .longway h2, .createdcontent .longway h3{
    padding: 0 80px 0 0;
}
.createdcontent .longway p{
    line-height: 1.9em;
}

.createdcontent article h1{
    font-weight: 600;
    margin-bottom: 40px;
}
.createdcontent .longway h2{
    font-size: 1.6em;
}
.createdcontent h3{
    font-size: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}
.createdcontent h3 span{
    color: #00CCC0;
    float: right;
}

/* Header -------------------------------------*/

header{
    background-color: #ffffff;
    color: #ffffff;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
    max-width: 1680px;
    margin: 0px auto 10px;
    height: 75px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

}
hgroup{
    margin: 5px 10px 5px;
    padding: 3px 0px 0px 15px;
    display: inline-block;
}

#menu{
    text-align: left;
    position: relative;
    top: -30px;
    float: right;
}
#menu li{
    display:inline-block;
    padding: 0px 0px;
    cursor:default;
    height: auto;
}

#menu li ul:last-child{
    border-bottom: 0px solid rgba(0, 0, 0, 0.2);
}

#menu li a{
    text-transform: ;
    text-decoration:none;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    margin-right: 40px;
}

#menu a:hover{
    color: ;
}
#menu li ul{
    display:none;
    position: absolute;
    padding-top: 13px;
    z-index: 1000;
    background-color: #f4f4f4;
    border-radius: 8px;
}
#menu li:hover ul{
    display:block;
    width: 280px;
}
#menu li ul li{
    padding: 0px;
    margin: -5px 0px 0px 0px;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    background-color:#f4f4f4;
}
#menu li ul li:hover{
    background-color: #f4f4f4;
}

#menu li ul li:last-child{
    border-bottom: none;
}

#menu li ul li a{
    padding: 10px 15px;
    margin: 0px;
    height: auto;
    display:block;
    color: #181818;
}
#menu li ul li a:hover{
    color:#181818;
    background-color: #f4f4f4;
}

#menu span, .slicknav_menu span{
  color: #ffffff!important;
  font-weight: 600;
}

.slicknav_menu{
    padding: 5px;
    display: none;
    margin-top: -15px;
}
.short_info, .nl_nav{
    display: none !important;
}


.nav a{
    color: #181818;
}
.nav a:hover{
    color: #c9c9c9;
}
.nav{
    z-index:1;
    padding: 0px;
    background:;
}

.namelogo{
    font-family: Montserrat;
    font-weight: 700 !important;
    color: #ffffff;
    font-size:22px;
    display: block;
    width: 60px;
    font-weight:300;
    padding: 0px 30px 17px 23px;
    background: #ffffff;
}
.namelogo_black{
    color: rgba(51, 51, 51, 0.2) !important;
    font-style: normal;
}
.logo_styl{
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
}
.logo_styl:hover{
    color: #ffffff;
}

.logo_styl img{
    position: relative;
    top: 15px;
}

.subline {
    position: relative;
    bottom:  0px;
    left: 0;
    display: inline-block;
    font-weight: 300 ;
    font-family: 'Work Sans';
    color: #ffffff;
    background: none;


}
.subline p{
    padding: 10px ;
    margin: 0 !important;
}

.phone{
  display: inline-block;
  position: relative;
  background: #14e0c3;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 2px;
  margin:18px 15px;
}
.phone:hover{
  color: #ffffff;
}
.whatsapp{
  display: inline-block;
  margin-top: 18px;
}
.footerphone{
  display: inline-block;
  position: relative;
  background: #181818;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 15px;
  border-radius: 2px;
}
.footerphone:hover{
  color: #ffffff;
}

article a{
  color: #007261;
  font-weight: bold;
}
article a:hover{
  color: #101010;
}
/* OvertheTop ----------------------------------*/

.overthetop{
}

.navbar {
    width: 100%;
    background-color: black;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4em;
    font-weight: bold;
    color: white;
    text-align: center;
    padding: 8px 0px 12px;
}

.fade-text {
    padding-left: 15px; padding-right: 15px;
    display: inline; /* Damit der Text im HTML-Flow bleibt */
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 2s ease-in-out; /* Weiche Überlappung für das Ein- und Ausblenden */
}
/* Timeline ----------------------------------*/

.timeline-wrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: 20px 0;
}

.timeline-container {
  overflow-x: auto;
  white-space: nowrap;
  padding: 20px;
  display: flex;
  align-items: center;
}

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

.timeline-step {
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0 10px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.timeline-step:nth-child(1){
  margin-left: 30px;
}

.timeline-content {
  text-align: center;
  font-size: 16px; /* Schriftgröße relativ zur Basis-Schriftgröße */
  min-width: 500px;
  overflow-x: auto;
  white-space: normal;
}

.timeline-content h2 {
  margin-top: 0;
  font-size: 24px;
}

.slide-button {
  background: none !important;
  color: white;
  border: none;
  font-weight: bold;
  font-size: 1.6em;
  padding: 15px 0px;
  cursor: pointer;
  position: absolute;
  border-radius: 100px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

#slideLeft {
  left: 0;
}

#slideRight {
  right: 0;
}

/* Custom Scrollbar Styling */
.timeline-container::-webkit-scrollbar {
    height: 20px;
}

.timeline-container::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 10px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 10px;
    border: 3px solid #ddd;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: #999999;
}


@media screen and (max-width: 600px) {
   .timeline-content {
     min-width: 250px;
     min-height: 250px;

   }
 }

/* Accordion Start ----------------------------------*/
.accordion {
    max-width: 750px;
    margin: 20px auto;
}
.accordion-item {
    border: 1px solid #1B397A;
    margin: 10px 0;
}

.accordion-item button {
    display: block;
    padding: 15px;
    line-height: 1.4em;
    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}
.accordion-item .content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    background-color: #fff;
    border-top: 1px solid #000000;
    transition: max-height 0.3s ease, padding 0.3s ease;
}


.accordion-button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    padding: 1em;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.3s ease;
}

.accordion-button[aria-expanded="true"] {
    background: #34DEAA;
    color: #1B397A;
}

/* Intro ----------------------------------*/

.intro h1{
    color: #ffffff;
}


.top_news h2::after, .top_news h1::after, .nl_content_link::after {
    display: inline-block;
    width: 16px;
}

.top_news h1::after{
    content: url('../img/arrow.svg');
    float: right;
    margin-top: -90px;
    margin-right: -10px;
}
.top_news ul a::after{
    content: url('../img/black_arrow.svg');
    width: 16px;
    display: inline-block;
    position: relative;
    top: 3px;
    left: 15px;

}
.arrow_link::after{
    content: url('../img/arrow.svg');
    display: inline-block;
    position: relative;
    top: 2px;
    left: 10px;
    width: 15px;
}

.nl_content_link::after{
    content: url('../img/black_arrow.svg');
    margin: 0 0 0 15px;
    position: relative;
    top: 3px;
}

.intro{
    background:  #101010 url('../img/startseite_teaser_prosp.jpg');
    background-position: top center;
    background-size: cover;
    padding-bottom: 60px;
}
.wrapper{
    max-width: 600px;
    min-height: 500px;
    padding-left: 30px;
    text-align: left;
    display: flex;
    margin-left: 30px;
    align-items: stretch;
    justify-content: space-between;
    border: 0px solid #34DEAA;
}

.intro_slogan{
  height: 70px;
  margin-left: 5px;
  width: auto;
}


.intro_text{
  position:relative;
  border-radius: 2px;
  letter-spacing: 0px;
  color: #181818;
  font-size:1.4em;
  font-weight:600;
  font-family: 'Montserrat';
}
.lead_cta{
  display: inline-block;
  padding: 15px 25px;
  position:relative;
  border-radius: 3px;
  background: #34DEAA;
  font-weight: 600;
  color: #181818;
}
.lead_cta:hover{
  background: #000000;
  color: #ffffff;
}

#mc_embed_signup{
    width: 60%;
    margin: 0px auto;
}

.newsletter{
    color: #ffffff;
    background: linear-gradient(-45deg, rgba(20,224,195,1) 0%, rgba(28,154,190,1) 66%);
    font-family: 'Roboto';
    font-weight: 300;
    margin: 10px auto;
    padding-bottom: 0px ;
    padding-top: 80px;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}
.newsletter h4{
    Font-weight: 500;
}
.newsletter h5{
    font-family: 'Roboto';
}
.newsletter h2{
    line-height: 1.5em;
    font-weight: 600;
    letter-spacing: -1px;
}


.newsletter .button{
    border: 2px solid #ffffff;
}
.newsletter .button:hover{
    border: 2px solid #181818;
}

.nl_content_link{
    color: #ffffff;
    text-decoration: underline;
    font-family: 'Roboto';
}
.nl_content_link:hover{
    color: #181818;
}



@-webkit-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}


/* Custom List ----------------------------------*/
ul.custom-list {
  margin-top: 30px;
  margin-left: 10px;
  margin-bottom: 30px;
    list-style: none; /* Entfernt die Standard-Bullet-Points */
    padding-left: 20px; /* Entfernt den linken Padding */
    font-size: 1em;
    font-family: 'Montserrat';
    font-weight: 400;
    color: #333333;
}

ul.custom-list li {
    padding-left: 1.3em; /* Fügt etwas Platz vor dem Text hinzu */
    text-indent: -1.2em; /* Positioniert den Bullet-Point korrekt vor dem Text */
    line-height: 1.3em; /* Verbessert die Lesbarkeit bei Textumbruch */
    margin-bottom: 15px; /* Fügt Abstand zwischen den Listenelementen hinzu */
}

ul.custom-list li::before {
    content: url("../img/ok_check.svg");
    display: inline-block;
    width: 20px;
    padding-right: 0px; /* Abstand zwischen dem Häkchen und dem Text */
    vertical-align: middle; /* Zentriert das Häkchen vertikal mit dem Text */
}




/* Laufleiste ----------------------------------*/

.laufleiste{
  margin: 0px auto;
  max-width: 1680px !important;
  display: block;
}
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  background: #0c244f;
  margin-bottom: 10px;
}

.marquee p {
  display: block;
  padding-left: 100%;
  margin: 5px; padding: 3px;
  animation: marquee 30s linear infinite;
  font-size: 16px;
  color: #ffffff;
}

@keyframes marquee {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}

@media (max-width: 600px) {
  .marquee p {
      font-size: 14px;
  }
}

/* Top Youtube Channel ----------------------------------*/

.youtubechannel{
  padding: 80px 20px 30px;
  margin: 10px auto;
  text-align: center;
}
.youtubechannel li{
  text-align: center;
}
.youtubechannel a{
    text-align: left;
    color: #181818;
    line-height: 18px;
    font-weight: 600;
    display: block;
    overflow-x: hidden;
    background: linear-gradient(-45deg, rgba(255, 108, 84, 1) 0%, rgba(252, 167, 114, 1) 66% ) ;
    font-family: 'Roboto';
    width: 250px;
    margin: 0px auto;
    padding: 7px 7px;
    border-radius: 3px;
    border-radius: 100px;
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    -o-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}

.youtubechannel a:hover{
  background: linear-gradient(-45deg, rgba(252, 167, 114, 1) 0%, rgba(255, 108, 84, 1) 66% ) ;

  -webkit-animation: AnimationName 3s ease infinite;
  -moz-animation: AnimationName 3s ease infinite;
  -o-animation: AnimationName 3s ease infinite;
  animation: AnimationName 3s ease infinite;
}


.youtubechannel a img{
  width: 60px;
  float: left;
  margin-right: 10px;
  overflow: hidden;
}
.youtubechannelspan_top{
  margin-top: 12px;
  display: block;
}
.youtubechannelspan_bottom{
  font-size: 0.8em;
  display: block;
  color: #ffffff;
}



}


.yt_group ul{
    text-align: center;
    clear: both;
    /* border: 1px solid red; */
}
.yt_group ul li{
    width: 19.5%;
    display: inline-block;
    /* border: 1px solid red; */
}
.yt_group ul li p{
    margin: 0 !important;
    font-size: 0.8em;
    color: #999999;
}

.yt_group ul li h2 {
    font-family: 'Roboto';
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 26px;
}

.youtubechannel h2 {
    font-size: 2.3em;
    font-weight: 600;
    letter-spacing: -1px;
    font-family: 'Roboto';
    line-height: 1.2em;
}
.youtubechannel h3 {
    color: #999999;
    font-weight: 300;
}


/* Autor ----------------------------------*/
.autor_1{
    color: ;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 66%);
    font-family: 'Roboto';
    font-weight: 300;
    margin: 10px auto;
    padding-bottom: 30px ;
    padding-top: 50px;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}
/* Form ----------------------------------*/
form{
    background: none;
    padding: 0 0 0 0;
    border:0px solid #ffffff;
}
input[type=text], input[type=email], input[type=number], textarea{
    border: none;
    border: 1px solid #8c99ac;
    /*width: 90%;*/
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 20px 15px;
    margin-bottom: 9px;
    border-radius: 2px;
    font-family: 'Roboto';
}
/*
input::placeholder, textarea::placeholder{
    color: #f8f8f8;
}*/

textarea{
    height: 139px;
    font-size: 16px;
    border-radius: 2px;
    border-left: 1px solid #8c99ac;
    font-family: 'Roboto';
}
input[type="email"].big-dog::-webkit-input-placeholder {
    color:   #8c99ac;
    padding: 10px;

}
input[type=submit] {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    border: none;
    font-size: 16px;
    background: ;
    cursor: pointer;
    margin: 5px 0px;
    float: right;
    font-family: Roboto;
    line-height: 1;
    font-weight: 700;

}
input[type=submit]:hover {
    color: ;

}

::-webkit-input-placeholder {
    color:  #8c99ac;
    font-family: 'Roboto';
    font-size: 18px;
}
:-moz-placeholder {
    color:  #8c99ac;
    font-family: 'Roboto';
    font-size: 18px;
}
::-moz-placeholder {
    color: #8c99ac;
    font-family: 'Roboto';
    font-size: 18px;
}
:-ms-input-placeholder {
    color: #8c99ac;
    font-family: 'Roboto';
    font-size: 18px;
}

::placeholder{
    line-height: 1;
    padding:5px 0 0 5px;
}



@media screen and (min-width: 769px){
    .tooltip:hover .tooltiptext {
        display: inline-block;
    }
}

.validatr-message{
    max-width: 300px;
    padding: 5px !important;
    background-color: #ffa1a1 !important;
    color: #db2d2d !important;
    border: 1px solid #db2d2d !important;
}

#captcha_img, #captcha_code{display: none;}



.standard_button{
    padding: 20px;
    color: #000000;
    position: relative;
    background: #34DEAA;
    /*right: 18px;*/
    border-radius: 5px;
    font-weight: 600;
}

.standard_button:hover{
    color: #000000;
    background: #f1f1f1;
}


/*CONTACTAREA TOOLTIP*/
.tooltip{margin-bottom: 6px;}
.tooltip .tooltiptext {
    display: none;
    width: 500px;
    max-width: 100%;
    background-color: #181818;
    color: #fff;
    border-radius: 3px;
    padding: 20px;
    font-size: 16px;
    line-height: 20px;
    position: absolute;
    z-index: 1;
    left: 47%;
    margin-top: -15%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* CUSTOM CHECKBOX ------------------*/
/* The container */
.checkcontainer {
    position: relative;
    padding-left: 10px;
    display: inline-block;
    height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
/* Hide the browser's default checkbox */
.checkcontainer input {
    display: none;
}
/* Create a custom checkbox */
.checkmark {
    position: relative;
    left: 10px;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #14e0c3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: relative;
    display: none;
}
/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #252e34;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Custom ----------------------------------*/
.hinweisbox{
  padding: 20px;
  background: #ff6c54;
  color: #ffffff;
}
.hinweisbox h2{
  color: #604900;
}

.hinweisbox a{
  color: #181818;
}
.hinweisbox a:hover{
  color: #999999;
}


/* ------ Neuer Beitrag Badge ----- */

.newbadge{
  Display:inline-block;
  background: #14e0c3;
  font-style: italic;
  padding: 5px 8px;
  margin-bottom: 5px;
  color: #ffffff;
  font-weight:600;
  border-radius:3px;
}

.newsletter_btn{
    color: #ffffff;
    background: linear-gradient(-45deg, rgba(140, 28, 3, 1) 0%, rgba(140, 28, 3, 1) 66% ) ;
    font-family: 'Roboto';
    font-weight: 300;
    margin: 10px auto;
    padding: 9px 15px;
    border-radius: 3px;

    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    -o-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}


.newsletter_btn:hover{
    color: #ffffff;
    background: linear-gradient(-45deg, rgba(242, 160, 87, 1) 0%, rgba(242, 160, 87, 1) 66% ) ;

    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    -o-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}
/* Top News & My Profile----------------------------------*/


.rjin_bar{
    background: url(../img/rjin_color.svg);
    background-repeat: repeat-x;
    width: 100%;
    height: 3px;
}

.top_news div{
    background-color:rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border-radius: 3px;
}
.top_news div h1{
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    padding: 42px 30px 0;
}
.top_news div p{
    font-size: 18px;
    margin: 10px 0 0 0 ;
    padding: 0px 30px 40px;
}
.top_news ul p{
    margin: 25px 0 0 0;
    font-size: 14px;
    display: inline-block;
}
.top_news ul{
    margin-bottom: 40px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.top_news ul h2{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}

.top_news ul li{
    background-color: #ffffff;
    width: 39%;
    padding: 30px;
    border-radius:3px;
}

.top_news ul a{
    text-decoration: none;
    color: #181818;
    background-color: #ffffff;
}
.top_news ul li a:hover{}



.top_news span{
    display:block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 29px;
    color: #ffffff;
}


.mobile_view{
    display: none;
}


.highlight_article{
    text-decoration: none;
    color: #ffffff;
}
.highlight_article:hover{
    color: #ffffff;
}
.highlight_article h1{
    font-size: 2.8em !important;
}


.intro_icon {
    display: inline-block;
    float: right;
    margin-top: 20px;
}
.intro_icon, .content_icon {
    width: 30px;
}
.content_icon{
    display: inline-block;
    float: left;
    margin-right: 20px !important;
    margin-top: -7px !important;
}


/* Services ----------------------------------*/

.services {
   /* border: 1px solid red; */
    padding-bottom: 60px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

}
.services_group ul{
    text-align: center;
    clear: both;
    /* border: 1px solid red; */
}
.services_group ul li{
    width: 24.5%;
    min-height: 200px;
    display: inline-block;
    vertical-align: top;
    /* border: 1px solid red; */
}
.services_group ul li p{
    margin: 10px !important;
    color: #181818;
}

.services_group ul li h2 {
    font-family: 'Roboto';
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 26px;
}

/* Zielgruppe ----------------------------------*/

.target{
    background: #ffffff;
    overflow: hidden;
    padding: 100px 20px 90px;
    color: #101010;
    margin: 20px auto;
}

.target_group{
    max-width: 1100px;
    text-align: center;
    margin: 0px auto;

}
.target_group h2{
    font-size: 2.3em;
    font-weight: 600;
    letter-spacing: -1px;

}
.target_group h2:before{
    Content: '';

}
.target_group h3{
    color: #4a4a4a;
    font-weight: 300;
}
.target_group p{
    max-width: 1100px;
    font-size: 1.4em;

}
.target_group a{

    display:inline-block;
    color: #ffffff;
    background: rgb(252,208,130) !important;
    background: linear-gradient(-45deg, rgba(252,208,130,1) 0%, rgba(253,103,90,1) 56%) !important;

    text-decoration: none;
    font-weight: 600;
    padding: 15px 35px;
    margin-top: 30px;
    margin-bottom: 40px;
    border-radius: 2px;
    font-size: 18px;
}
.target_group a:hover{
    background: #101010) !important;
    background: linear-gradient(45deg, #101010, #101010) !important;
    color: #ffffff;
}

.cloud{
    margin: 20px auto;
    max-width: 1100px;
}

.termcloud li{
    display: inline-block;
    background: #ffffff;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 15px;
    margin-top: 10px;
}
.hashtag{
    background: none !important;
}

/* My Profile----------------------------------*/
.my_profile{
    text-align: center;
    margin: 0 0 0 0 ;
    color:#ffffff;
}
.my_profile img{
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    margin-top: 30px;
}

.my_profile h2{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-top: 20px;
}
.my_profile p{
    margin: 0 0 0 0;
    font-size: 16px;
}
.my_profile a{
    margin: 40px 0 0 0;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.top_profile{
    background-color: rgba(123, 39, 160, 0.9);
    margin: 52px auto 30px;
    width: 300px;
    padding-bottom: 50px;
    border-radius: 3px;
}


/* Main Content ---------------------------------------------------------------*/

.main_content{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-bottom: 40px;
}

.main_content{
    font-family: 'Roboto';
}
 .main_content_title{
    font-family: 'Roboto';
    margin: 40px auto 30px;
    width: 80%;
    overflow: hidden;
}


.main_content_title p{
    margin: 0px;
    font-size: 0.8em;
    color: #999999;
}
.main_content_title div{
    text-align: center;
    float: left;
    width: 33%;
}


.main_content_title h2{
    font-family: 'Roboto';
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 26px;
}
.main_content h2{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 25px;
}



.main_content p{
    margin: 0px !important;
    padding: 0px 20px;
}

.main_content ul{
    margin: 10px 20px;
}

.seo_list li{
    display: block;
    color: #333333;
    background-color: #FFEB89;
    padding: 8px 10px;
}
.graphic_list li{
    background-color: #4ECDC4;
    display: block;
    color: #ffffff;
    padding: 8px 10px;
}
.mark_list li{
    background-color: #FF6B6B;
    display: block;
    color: #ffffff;
    padding: 8px 10px;
}



.zitate{
    font-family: 'Roboto';
    color: #4ECDC4;
    font-weight: 500;
    font-style: italic;
    font-size: 1.8em;
    text-align: center;
}
.smh{
    padding: 10px 20px 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Roboto';
    color: #333333;
    opacity: 0.3;
    font-size: 0.7em !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}




/* Spalten auf der Startseite ITS ME ---------------------------------------------------------------*/

.itsme{
    overflow: hidden;
    width: 80%;
    margin: 0px auto;
}
.itsme p{
    padding: 10px 0;

}
.itsme hr{
    margin: 50px 0 15px;
    height:1px;
    background-color: #ffffff;
}
.itsme .column_one a{
    color: #00CCC0;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;

}
.itsme .column_one a:hover{
    color: #999999;
}
.itsme img{
    margin: 0px auto 25px;
}

.itsme .default, .itsme .study, .itsme .quote{
    display: block;
    padding: 37px 30px;
    margin-top: -1px;
    margin-bottom: 15px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    background-color: #f1f1f1;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.itsme .study{
    background: rgb(252,208,130);
    background: linear-gradient(-45deg, rgba(252,208,130,1) 0%, rgba(253,103,90,1) 56%);
    color: #ffffff;
}
.itsme .default{
    background-color: #cdd5de;
    color: #181818;
}
.itsme .quote{
    background: rgb(20,224,195);
    background: linear-gradient(-45deg, rgba(20,224,195,1) 0%, rgba(28,154,190,1) 66%);
    color: #ffffff;
}
.column_one div, .column_two div, .column_three div{
    padding: 30px 30px 50px ;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.column_one, .column_two, .column_three{
    width: 32%;
    display: inline-block;
    float: left;
    margin-right: 15px;
}
.column_three{
    width: 33%;
    display: inline-block;
    float: left;
    margin-right: 0px;
}
.column_one div{
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}


.column_one div{
     background: #ffffff !important;
    display: block;
    border-top: 5px solid rgba(236, 241, 247, 0.5);
     border-right: 5px solid rgba(236, 241, 247, 0.5);
    border-left: 5px solid rgba(236, 241, 247, 0.5);
    border-bottom: 5px solid rgba(236, 241, 247, 0.5);
}
.column_two div, .column_three div{
    background: #ffffff !important;
    display: block;
    border-top: 5px solid rgba(236, 241, 247, 0.5);
    border-right: 5px solid rgba(236, 241, 247, 0.5);
    border-left: 5px solid rgba(236, 241, 247, 0.5);
}


/* Section -------------------------------------*/
section, copyright, footer{
    max-width: 1640px !important;
    margin: 0 auto 20px;
    border: 0px solid red;
    padding: 20px;
    border-radius: 5px;

}
section.vcard section{
    padding: 0 0 0 0;
}

section{
    background-color: #ffffff;
    padding: 60px 20px 0;
}
section img{
    width: 100%;
}

.titlearea{
    padding: 60px 20px;
    color: #181818;
}
.titlearea p{
    margin-bottom: 40px;
}
article h1{
    margin-bottom: 20px;
}
article h2{
    margin-bottom: 20px;
}

article a{
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

section.product_group{
  background: none;
  text-align: center;
}
section.product_group img{
     width: 100%;
     height: auto;
     border-radius: 5px;
}

section.product_group ul{
    overflow: hidden;
}
section.product_group ul li{
  display: inline-block;
  width: 15%;
  clear: both;
  margin: 0px 10px 60px;
  border-radius: 5px;
}

.krankenkasse img{
  border-radius: 5px;

}

/* Sidebar -------------------------------------*/
.sidebar_firstbox{
    background-color: #f1f1f1;
    min-height: 150px;
}

.autor{
    background: #00CCC0;
    overflow: hidden;
}
.autor ul li{
    display: inline-block;
    float: left;
    width: auto;
    border: 1px solid red;
}
.autor h3, .autor p{ color: #ffffff; margin: 0px; font-size: 0.9em;}
.autor ul li:nth-child(2){
    margin-top: 17px;
}
.autor ul li:nth-child(1){
    padding: 15px 20px;
}

.autor_pic{
    float: left;
    padding: 18px 20px 18px 20px;
}
.autor_pic img{
    max-width: 80px;
}
.autor_info{
    float: left;
    padding: 20px 0;
}


.sidebar_instagram_btn{
    color:#ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
}
.sidebar_instagram_btn:hover{
    color:rgba(255, 255, 255, 0.5);
}
.sidebar_instagram_btn img{
    width: 16px;
    position: relative;
    top: 4px;
    margin-right: 5px;
}
/* Article -------------------------------------*/
article{
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.div_box_article{
    max-width: 61%;
    max-width: 1147px;
    min-width: 1147px;
    margin: 30px auto;
}
.div_box_article a{
    margin: 0px 15px 0px 5px;
    text-decoration: none;
    font-size: 0.9em;
    color: #181818;
}
.div_box_article a:first-child{
    font-weight: 600;
}


.section-inner{
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
    overflow: hidden;
}
.section-inner ul.standard_ul{padding:0 20px;list-style: disc;color:#c9c9c9;}
.section-inner li{line-height: 2em;}

/* Referenzen ----------------------------------*/
.ref{
    background-color: #f1f1f1;
    min-height: 500px;
}
/* Newsletter -------------------------------------*/


.NL_intro{
    margin-bottom: 30px;
    text-align: left;
}
.NL_intro h2{
    font-size: 1.4em;
}


.feature_{
    border-radius: 50px;
    margin-top: 30px;
    display: inline-block;
    padding: 4px 13px;
    font-size: 40px;
    background: #00CCC0;
    color: #ffffff;
}


.button{
    display:inline-block;
    color: #ffffff;
    background: none;
    text-decoration: none;
    font-weight: 600;
    padding: 15px 35px;
    margin-top: 30px;
    margin-bottom: 40px;
    border-radius: 2px;
    font-size: 18px;
}
.button:hover{
    background-color: #181818;
    color: #ffffff;
}

::-webkit-input-placeholder {
    color:  #8c99ac;
    font-style: italic;
}
:-moz-placeholder {
    color:  #8c99ac;
    font-style: italic;
}
::-moz-placeholder {
    color: #8c99ac;
    font-style: italic;
}
:-ms-input-placeholder {
    color: #8c99ac;
    font-style: italic;
}


/* Footer ------------------------------------------*/
footer{
    background-color: #000000;
    min-height: 200px;
    padding-top: 90px;
    position: relative;
    border-radius: 5px;
}
footer{padding: 60px 20px 50px 20px;}
footer .lastcolumn img{margin-right: 24px;}
footer .lastcolumn li {
    color: #ffffff;
}
footer .lastcolumn span{
    color: #333333;
    text-decoration: none !important;
}
footer li a{
    padding: 3px 0;
    display: inline-block;
    color: #ffffff;
}
footer li a:hover{
    color: #00F2C3;

}
footer .current{
    color: #00F2C3;
}

.footer_logo{
    margin-top:0px;
    float: right;

}
.handwritten{
  text-align: center;
  padding: 20px 20px 40px
}

.xing_gruppe ul li{
    font-size: 12px;
}

 .instagram_btn{
        display: none;
}

/* Copyright ----------------------------------*/
.copyright{
    background: ;
    padding: 0 20px;
    margin-bottom: 20px;
    color:#ffffff;
}

.copytext{
    color:#999999;
    letter-spacing: 1px;
}

/*#cookie-bar.fixed.bottom {bottom:0; top:auto;}*/
/* COOKIES****************************************/
#cookie-bar{background:#181818; padding:25px 25px; border-radius: 3px;position:fixed; bottom:2%; left:1%; width:365px;z-index:9999;}
#cookie-bar p {color:#ffffff; margin:0; font-size:12px; line-height:22px;}
#cookie-bar p:before {content: 'Cookies'; display: block; font-size: 24px; font-weight:bold; margin-bottom: 8px;}
#cookie-bar p a{ color: ;}
#cookie-bar a.cb-enable {background: #14e0c3; color: #ffffff; font-weight: bold; display:block; width: 20px; border-radius:2px; text-decoration:none; padding:5px 14px; margin: 15px 0px 0px 0px;}
#cookie-bar .cb-enable:hover {background: #f1f1f1; color: #181818;}

@media screen and (max-width: 850px){
    #cookie-bar { padding:15px 10px; width:90%; left:2%;}
    #cookie-bar a.cb-enable {padding:3px 14px;display:block;width:fit-content}
}
        .slicknav_btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 1px 10px;
    float: right;
    line-height: 1.125em;
    cursor: pointer;
    top:-20px;
}

.slicknav_menu  .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left;
}


.slicknav_menu .slicknav_icon {
    float: left;
    margin: 0.188em 0 0 0.438em;
}

.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul { display: block; text-align: center; padding-bottom: 0px; }
.slicknav_nav li { display: block; text-align: center; max-width: 100%; margin: 0 auto; padding: 0px 0;}
.slicknav_nav li:last-child { margin-bottom: 0px; border-bottom: 0px dotted #ffffff;}
.slicknav_nav li p{ text-align: left; padding: 0 30px; opacity: 0.7;}



.slicknav_nav .slicknav_arrow { font-size: 1em; margin: 0 0 0 0.4em;}
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block; font-weight: 400; line-height: 40px;}
.slicknav_nav .slicknav_item a { display: inline;}
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }

/* IE6/7 support */
.slicknav_menu { *zoom: 1 }


/* Button */
.slicknav_btn {
	margin: 5px 5px 6px;
	text-decoration:none;

}

/* Button Text */
.slicknav_menu  .slicknav_menutxt {
	color: #777777;
    font-weight: 700;
    margin-top: 3px;
    margin-right: 5px;
}

/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
    background-color: #000000;
    font-size: 160%;
}

.slicknav_menu {
	padding: 0px;
    width: 100%;
}

.slicknav_nav {
	color:#fff;
    width:100%;
    overflow: hidden;
}

.slicknav_nav, .slicknav_nav ul {
	list-style: none;
    background: #f4f4f4;
}

.slicknav_nav ul {
	padding:0;
}

.slicknav_nav .slicknav_item {

}


.slicknav_nav a{
  font-size: 16px;
	padding: 6px 25px;
	margin: 0px 0px;
	text-decoration:none;
  text-align: left;
  color: #181818;
  font-weight: 600;
  letter-spacing: 1px;
}

.slicknav_nav .slicknav_item a {
	padding:0;
	margin:0;
}

.slicknav_nav .slicknav_item:hover {
	background: none;

}

.slicknav_nav a:hover{
	background: none;

}

.slicknav_nav .slicknav_txtnode {
    margin-left:15px;
}




/* small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1280px) {

    footer div{
        margin-right: 50px;
    }
    .nl_wrapper {
        width: 90%;
    }
    .services_group ul li h2{
        font-size: 20px;
    }

}

/* small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1080px) {
    footer div{
        margin-right: 30px;
    }
    .services_group ul li h2{
        font-size: 18px;
    }

}





/* Tablet & small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 998px) {
    footer div:last-child{
        float: none;
        margin-top: 30px;
    }
    footer div{
        margin-right: 50px;
    }
    .createdcontent .longway p, .createdcontent .longway h1, .createdcontent .longway h2, .createdcontent .longway h3{
    padding: 0 0 0 0;
    }
    .createdcontent h3 span{
    display: none;
    }

    .floatleft{
        float: none;
        width: 100%;
    }
    .floatright{
        float: none;
        width: 100%;
    }
    .phonenumber, .whatsapp_{display: inline-block; width: auto; float: right;}
    .slogan  {display: inline; width: auto;}
    .namelogo{
      width: auto;
      display: inline-block;
    }
    .slicknav_menu{
        display:inline-block;
    }
    #menu{
        display: none;
    }

    .yt_group ul li{
        width: 100%;
        display: block;
        margin-bottom: 65px;
    }
    .yt_group ul li h2{
        font-size: 24px;
    }

    .newsletter_btn{
      background: none;
    }

    section.product_group ul li{
      width: 40%;
      margin: 0px 10px 20px;
    }

    .sidebar_yellow_border{
      border-left: 0px solid #14e0c3;
      padding: 10px 10px 10px 0px ;
      margin-left: 0px;
    }

}



/* Tablet
-------------------------------------------------------------------------------------------- */
/* --- Tablet --- */
@media screen and (max-width: 768px) {

    body{
        padding: 0;
    }

    h5{
        margin-bottom: 15px;
    }
    article{ padding: 0;}

    .intro_slogan{
      height:auto;
    }

    .wrapper{
       font-size: 0.9em;
        min-height: 500px;
        max-width: 340px;
        margin-left: 10px;
        padding: 30px 0px;
    }

  
    .short_info, .nl_nav{
        display: inline-block !important;
    }
    .footer_logo{
        float: left;
    }
    ul.custom-list{
      max-width: 220px;
      margin-left: 10px;
    }
    ul.custom-list li {
        text-indent: -1.4em; /* Positioniert den Bullet-Point korrekt vor dem Text */
    }
    .marquee p {
        animation: marquee 10s linear infinite;
    }

    .autor ul li:nth-child(1){
        padding: 15px 12px;
    }

    .autor_pic{
        padding: 12px 12px 12px 12px;
    }

    .firstcolumn, .centercolumn {
        margin-bottom: 60px;
    }
.phonenumber{display: none;}
.whatsapp_{padding-right:20px;padding-top:3px;}

/* --- Intro --- */
    .intro span{

    }
    .intro{
        width: 100%;
        padding: 0;
/*
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
*/
    }
    .top_news{
        display: none;
    }
    .top_news ul{
        display: block;
        width: 100%;

    }
    .top_news ul li{
        display: block;
        width: 100%;
        padding: 0;
    }

    .services_group ul li{
        width: 100%;
        display: block;
        margin-bottom: 65px;
    }
    .services_group ul li h2{
        font-size: 24px;
    }

    section.product_group ul li{
      width: 90%;
      margin: 0px 10px 20px;
    }



    .mobile_view{
        display: inline-block;
        margin-top: 20px;
        padding: 20px;
    }
    .mobile_view p{
        font-size: 16px !important;
    }
    .mobile_view ul li h2{
        font-size: 22px;
        margin-top: 40px;
        line-height: 30px;
    }

    .my_profile{
        float: none;
        padding-bottom: 40px;
        width: 100%;
    }

    .my_profile img{
        width: 200px;
        margin-top: 10px;
    }

    .target{
        padding: 0 !important;

    }
    .target_group {
        width: 100%;
        padding: 40px 0 40px 0 ;
    }
    .target_group h2{
        font-size: 1.8em;
        text-align: center;
        padding: 0px 40px;
    }
    .target_group h3{
        font-size: 1.1em;
    }
    .target_group p{
        text-align: center;
        padding: 0px 40px;
        font-size: 1.1em;
    }


/* --- Main Content --- */

    .main_content{
        display: block;
    }
    .main_content_title{
        margin: 0 ;
    }
    .main_content_title div{
        display: none;
    }
    .itsme .column_one, .itsme .column_two, .itsme .column_three{
        display: block;
        float: left;
        width: 99%;

    }
    .itsme .column_one{
        margin-bottom: 15px;
    }
    .itsme{
        width: 100%;
    }

    .createdcontent .longway p, .createdcontent .longway h1, .createdcontent .longway h2, .createdcontent .longway h3{
    padding: 0 0 0 0;
    }
    .createdcontent h3 span{
    display: none;
    }

/* --- Newsletter --- */
    .newsletter{
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .NL_intro h2{
        padding: 0 00px;
        font-size: 1.4em;
    }
    .newsletter article{
        padding: 10px 40px;
    }

    .nl_wrapper {
        width: 80%;
    }

/* --- Footer --- */
    footer{
        padding: 60px 40px;
    }
    footer nav div{
        display: block;
        width: 100%;
        margin-bottom: 50px;
    }

     footer nav div:last-child{
        float: left;
    }
    footer nav {
        padding: 0px 0px;
    }


    .xing_gruppe ul li{
        font-size: 11px;
    }
    .xing_gruppe ul li a{
        font-size: 12px;
    }
     .subline {
        top: 0px;
        left: 0px;

    }
    .intro_text{
      left: 0px;
      width:90%;
      border-radius: 3px;
      color: #181818;
      font-size: 1.0em;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.8);
    }
    .subline p{
        display: inline-block;
    }

    .lead_cta{

    }

    .firstcolumn_four, .secoundcolumn_four, .thisrtcolumn_four, .lastcolumn_four{
      width: 100%;
    }

}



/* Smartphone
-------------------------------------------------------------------------------------------- */
/* --- Smartphone --- */
@media screen and (max-width: 480px) {

    section, footer, copyright, .titlearea{
                padding-left: 10px;
        padding-right: 10px;
    }


    .instagram_btn{
        position: fixed;
        bottom: 15px;
        left: 15px;
        padding: 0px 20px 0 10px;
        display:inline-block;
        background: #FF4858;
        text-decoration: none;
        color: #ffffff !important;
        height: 50px;
        font-weight: 600;
        border-radius: 10px;
        -webkit-box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.15);
    }
    .instagram_btn img{
        width: 40px;
        position: relative;
        top: 5px;
        margin: 0;
    }
    .instagram_btn span{
        position: relative;
        top: -10px;
    }
    article h1, article h2{
        font-size: 28px;
    }
    footer .floatright{text-align: left;}

}


/* Smartphone
-------------------------------------------------------------------------------------------- */
/* --- Smartphone --- */
@media screen and (max-width: 320px) {

    .xing_gruppe ul li{
        font-size: 9px;
    }
    .xing_gruppe ul li a{
        font-size: 9px;
    }
    .sidebar_firstbox, .autor {
        display: none;
    }
}




/***********NEW CSS MENU********************************************************/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #fff;
	text-align: right;
	height: 32px;
  padding: 15px 0 2px;
	display: none;
  overflow: hidden;
  background: #f4f4f4;
}

/*Checkbox ausblenden*/
header input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}





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

    nav.nav {
        position: absolute;
        left: 0;
        width: 100%;
        background:;


    }

    /*ul Styling entfernen*/
    header ul {
        margin:0;
        padding:0;
        position: absolute;
        text-align: center;
    }

    /*horizontale Liste*/
    header li {
        display:inline-block;
        float: left;
        margin-right: 1px;

    }

    header li a {
        display:block;
        min-width:140px;
        text-align: center;
        color: #ffffff;
        background-color:inherit;
        text-decoration: none;
    }

    /*dropdown links*/
    header li:hover ul a {
        background:#ff6c54 ;
        color: ;
    }

    /*gehoverte Dropdown Links*/
    header li:hover ul a:hover {
        background: #ff6c54;
        color: #ffffff;
    }

/*submenu unsichtbar*/
    ul.menu{
        display: none;
    }

    /*Vertikale Dropdown Links*/
    header li ul li {
        display: block;
        float: none;
        background: #ff6c54;
    }

    /*Text wrapping vermeiden*/
    header li ul li a {
        width: auto;
        min-width: 100px;
        padding: 0 20px;
    }


    input[type=checkbox]:checked ~ nav.nav{
        padding: 30px 0 0px;

    }

    /*Menu anzeigen, wenn die unsichtbare Checkbox aktiviert ist*/
    input[type=checkbox]:checked ~ nav #menu{
        display: block;
    }
    /*Submenu sichtbar machen*/
    input[type=checkbox].submenuCheck:checked ~ ul.menu{display: block;}

    .karriere_bubble{
        display: none;
    }


	/*Dropdown Links inline darstellen*/
	header ul {
		position: static;
		display: none;

	}
	/*Create vertical spacing*/
	header li {
		margin-bottom: 1px;
        border-top: 1px dotted rgba(255, 255, 255, 0.17);
        padding: 7px 20px 7px 0;
        width: 100% !important;
        font-weight: 600;
        font-size: 1.2em;
        margin-left: 10px;
	}
	/*Make all menu links full width*/
	header ul li, header li a {
		width: 100%;
        text-align: left;
        margin-left: 20px;
        line-height: 30px !important;
    }

	/*Display 'show menu' link*/
	.show-menu {
		display: inline-block;
        height: 28px;
        background: url(../img/menu.svg) right no-repeat;
        background-size: 36px;
        /*background-size: 8%;*/
        cursor: pointer;

	}


    .dropdown:after {
        content:'↓';
        color: ;
    }

    input[type=checkbox]:checked ~ .dropdown:after {
        content:'↑';

    }
}