@charset "UTF-8";
body{
  margin: 0px;
}
:root{
  --blue: #1EB9DE;
  --yellow: #FFD400;
  --red: #ED6C78;
  --green: #A5CE8F;
}

/* ––––––––––––––––––––––GENERELL––––––––––––––––––––––––– */
/* .content{
  margin-top: 30px;
} */
.container, .research_q{

  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, minmax(80px, auto));
  grid-gap: 20px 0px;
  grid-template-areas:

    "space_l cont1a cont2a cont3a cont4a cont5a cont6a cont7a cont8a cont9a cont10a space_r"
    "space_l cont1b cont2b cont3b cont4b cont5b cont6b cont7b cont8b cont9b cont10b space_r"
    "space_l cont1c cont2c cont3c cont4c cont5c cont6c cont7c cont8c cont9c cont10c space_r"
    "space_l cont1d cont2d cont3d cont4d cont5d cont6d cont7d cont8d cont9d cont10d space_r"
    "space_l cont1e cont2e cont3e cont4e cont5e cont6e cont7e cont8e cont9e cont10e space_r"
    "space_l cont1f cont2f cont3f cont4f cont5f cont6f cont7f cont8f cont9f cont10f space_r"
    "space_l cont1g cont2g cont3g cont4g cont5g cont6g cont7g cont8g cont9g cont10g space_r"
    "space_l cont1h cont2h cont3h cont4h cont5h cont6h cont7h cont8h cont9h cont10h space_r"
    "space_l cont1i cont2i cont3i cont4i cont5i cont6i cont7i cont8i cont9i cont10i space_r"
    "space_l cont1i cont2i cont3i cont4i cont5i cont6i cont7i cont8i cont9i cont10i space_r";
  }

.container h3, .contact_content h3{
  grid-column: 5 / -5;
  grid-row: 2;
  align-self: start;
  margin: 0px;
  justify-self: center;
  text-align: center;
}


.shadow{
  box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
}
.shadow_2{
  box-shadow: 0px -1px 3px rgba(0, 0, 0, .3);
}
.back_white{
  background-color: #FFF !important;
}
.action{
  cursor: pointer;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
/* __________________________HEADER__________________________ */
.header{
  position: fixed;
  background-color: white;
  width: 100%;
  height: 70px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.branding{
  grid-column: 2 /span 3;
  padding: 14px 0px 0px 0px;
  grid-row: 1;
}
.branding img{
  width: 335.75px;
}

/* __________________________HEADER Menu__________________________ */
nav{
    grid-column-end: 12;
    grid-column-start: span 3;
    margin: 38px 0px 20px 0px;
}
.menu{
  display: grid;
  grid-auto-flow: column;
  margin: 0px;
  padding-bottom: 13px;
  align-content: end;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);

}
.menu a{
  justify-self: end;
  display: inline-block;
}
.menu-item {
  background-color: var(--blue);
}
.mobile_menu_action{
  display: none;
  margin: 18px 0px 20px 0px;
}
.mobile_menu_action, .close_mobile_project, .close_legend_info{
  grid-column-end: -2;
  justify-self: center;
}
.close_legend_info{
  height: 15px;
  width: auto;
}
.close_pro_info, .mobile_menu_action img{
  height: 23px;
  width: auto;
}

#Project::before, #Experience::before, #Contact::before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: 50px;
  margin-top: -50px;
}

/* __________________________OPENER__________________________ */
.opener{
  background-color: var(--blue);
  width: 100%;
  padding: 20vh 0px calc(20vh - 70px) 0px;
  z-index: 4;

}
.research_q{
  grid-template-rows: repeat(3, minmax(106px, auto));
  grid-gap: 0px 20px;
  grid-auto-flow: 0px;
  display: grid;
}
#quest{
  grid-column: 2 / -2;
  grid-row: 2;
  margin: 0px;
  justify-self: center;
  text-align: center;
}


 #quest::before,  #quest::after {
  content: "\2039";
  display: block;
  font-size: 1.6em;
  padding-right: 0px;
  padding-left: 30px;
}

#quest::before{
  content: "\203A";
  padding-right: 30px;
  padding-left: 0px;
}

/* –––––––––––––––Lengend––––––––––––––––––– */
.legend{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-auto-rows: 25px;
  grid-gap: 20px;
  z-index: 4;
  height: auto;
  position: fixed;
  left: 0px;
  top:70px;
  width: auto;
  max-width: 220px;
  padding: 20px 5px 10px 20px;
  background-color: #ffffff;
  align-items: center;
}
.exp_legend_button, .pro_legend_button {
  background-color: white;
  margin-left: -3px;
  border: 3px solid var(--blue);
  grid-column: 1 /span 2;
  width: 75px;
  grid-row: 2;
  padding: 5px 10px 5px 20px;
  align-self: center;

}

.close_legend{
  grid-row: 1;
  grid-column:2 ;
  justify-self: end;
padding-right: 10px;
}

.legend h5{
  grid-row: 1;
  grid-column: 1 /-1
}

.label{
  width: 100%;
  height: 20px;
  align-self: start;
}
.label_legend_producer, .label_legend_managment{
  background-color: var(--red);
}
.label_legend_locals, .label_legend_international{
    background-color: var(--yellow);
}
.label_legend_InterM, .label_legend_care {
  background-color: var(--blue);
}
.label_legend_communication{
  margin-top: -5px;
}.label_legend_supply{
  margin-bottom: 10px;
}
.label_legend_accounting{
    background-color: var(--green);
}

/* –––––––––––––––PROJEKT–––––––––––––––––––– */
.project{
  z-index: 3;

}
.project .experience{
  width: 100%;
  height: auto;
  position: relative;
}

.project_content{
  grid-template-rows: 50px auto auto minmax(80px, auto) 80px repeat(3, minmax(80px, auto)) 30px;
  grid-auto-rows: 0px;
}

.project_content img,
.project_content h3,
.project_content div{
  z-index: 1;
}
.background_countrys{
  grid-column: 1 /-1;
  grid-row: 2 /-1;

}
.project_background, .contact_background{
  background-image: url(../../content/2_project/background_lines.svg);
  background-repeat: repeat;
  background-size: 150px auto;
  margin-top: -30px;
}


.roadmap{
  grid-column: 2 / -2;
}
.item_roadmap_1{
  display: none;
  grid-row: 5 / span 3;
  margin-top: -20px;
}
.item_roadmap_2{
  display: none;
  grid-row: span 2/8;
  align-self: end;
  margin-top: -20px;
}
.item_roadmap_m{
  grid-row: 5 / span 3;
  margin-top: -20px;
}
.item_text, .item_text_exp{
  background-color: #ffffffCC;
  padding: 5px;
}

.producer{
  grid-column: 2 / span 2;
  grid-row: 4;
  align-self: end;
  margin: 0px 0px 12px 0px;
}
.locals{
  grid-column: span 2 / 12;
  grid-row: 4;
  align-self: end;
  margin: 0px 0px 12px 0px;
}
 .locals p, .locals h4{
  text-align: right;
}

.interM{
  grid-column: 6 / span 3;
  grid-row: 8;
}

.barriesP{
  grid-column: 6 / span 3;
  grid-row: 4 ;
  align-self: end;
}
.barriesP span, .barriesL span{
  text-align: center;
  display: none;
}

.mobile_project{
  display: none;
  z-index: 10 !important;
  background-color: #ffffff;
  padding: 20px;
  width: 100%;
  bottom: 0px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2,minmax(0px, auto)) 30px;
}
.mobile_project p, .mobile_project h4{
  display: none;
  grid-column: 2 /-4;
}

/* –––––––––––––––BARRIES__P__BEFORE/AFTER–––––––––––––––––––– */

.barriesP_before, .barriesL_after{
  background: var(--red);
  display: inline-block;
  height: 3px;
  width: 100%;
  margin:  0px 0px 3px 0px;
}
.barriesP_after_container,.barriesL_before_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.barriesP_after_container{
  margin-bottom:-22.5px;
}

.barriesP_after_line, .barriesL_before_line{
  background: var(--red);
  display: inline-block;
  height: 3px;
  width: 50%;
  margin: 5px 0px 7px 0px;
}

.barriesP_after img{
  width: 18px;
  height: auto;
  margin: 5px -2px 10px -3px;
}





/* –––––––––––––––BARRIES___L___BEFORE/AFTER–––––––––––––––––––– */
.barriesL{
  grid-column: 5 / span 3;
  grid-row: 6 ;
  align-self: start;
}
.barriesL_before_container{
  margin-top: -10px;
}
.barriesL_before img {
  width: 18px;
  height: auto;
  margin: 7px -2px 5px -3px;
}

.barriesL_before{
  margin: -10px 0px -5px 0px;
}

.barriesL_before_line{
  background: var(--yellow);
  margin: 7px 0px 7px 0px;
}

.barriesL_after{
  background: var(--yellow);
  margin: 5px 0px 5px 0px;
}




/* __________________________experience__________________________ */
.experience{
  z-index: 2;
  padding-bottom: 30px;
}
.experience_content{
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows:70px repeat(64, 20px);
  grid-gap: 0px;
  margin-top: 0px;
}
.blue{
background-color: var(--blue);
}
.green{
background-color: var(--green);
}
.red{
background-color: var(--red);
}
.yellow{
background-color: var(--yellow);
}

/* __________________________right__________________________ */
.month, .nothing{
  grid-column: 23 / span 2;
  border-top: 0.5px solid black ;
}
.nothing{
  border-top: none;
}
.year{
  border-top: 2px solid black;
  padding: 0px 0px 1px 10px;
  letter-spacing: 3.1px;
}
.bar{
  z-index: -1;
}


#galenos{
  grid-column: 22;
  grid-row: 1 / 18;
}
#page{
  grid-column: 22;
  grid-row: 20 / 27;
}

#MEDICA{
  grid-column: 20;
  grid-row: 16;
  z-index: 2;
}
#ProGlobal{
  grid-column: 20;
  grid-row: 30 / 37;
}
#Philips{
  grid-column: 19;
  grid-row: 41 / 61;
}

#sterling{
  grid-column: 20;
  grid-row: 1 / 29;
}

#uni_HH{
  grid-column: 21;
  grid-row: 1 / 32;
}
/* __________________________left__________________________ */

.exp_info_box{
  z-index: 4;
}
.item_text_exp{
 background-color: #FFFFFF00;
  margin-top: -8.5px;
}
.line{
  align-self: center;
  content: '';
  height: 3px;
  width: 100%;
  z-index: 3;
}
.item_text_exp > p{
  display: none;
}
.exp_info_box{
  grid-column-end: span 5;
}
/* __________________________start__________________________ */
#sterling_line{
  grid-column: 5 /-6;
  grid-row: 4;
}
#sterling_info{
  grid-column-start: 5;
  grid-row: 5;
}

#galenos_line{
  grid-column: 9 / -3;
  grid-row: 10;
}
#galenos_info{
  grid-column-start: 9;
  grid-row: 11;
}

.marked{
background-image: url(../background_lines_black.svg);
background-repeat: repeat;
background-size: 150px auto;
}
#MEDICA_line{
  grid-column: 5 / -6;
  grid-row: 16;
}
#MEDICA_info{
  grid-column-start: 5 ;
  grid-row: 17;
}

#page_line{
  grid-column: 9 / -3;
  grid-row: 23;
}
#page_info{
  grid-column-start: 9 ;
  grid-row: 24;
}

#ProGlobal_line{
  grid-column: 5 / -6;
  grid-row: 35;
}
#ProGlobal_info{
  grid-column-start: 5 ;
  grid-row: 36;
}

#Philips_line{
  grid-column: 3 / -7;
  grid-row: 52;
}
#Philips_info{
  grid-column-start: 3 ;
  grid-row: 53;
}

#uni_HH_line{
  grid-column: 7 / -5;
  grid-row: 29;
}
#uni_HH_info{
  grid-column-start: 7 ;
  grid-row: 30;
}
/* __________________________Contect__________________________ */
.contact{
  z-index: 1;
}
.contact_background{
   margin: 0px;

}
.contact_content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:50px repeat(5, minmax(40px, auto));
  grid-gap: 20px;
}
.about{
  grid-column: 7 /span 4;
  grid-row: 3 ;
  align-self: center;
}

.portrait_container{
  grid-column: span 3 / 6;
  grid-row: 3 / auto;
  grid-template-columns: 1 ;
  grid-template-rows: 1;
  justify-self: end;

}
.portrait {
  grid-column-end: -1;
  grid-row: 1 ;
  width: 300px;
  height: 300px;
  /* max-width: 300px; */

}
.rund {
	border-radius: 150px;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px
}
.tel_container{
  grid-column: 2 / -2;
  grid-row: 4;
  justify-self: center;
}
address{
  grid-column: 2 / -2;
  grid-row: 5 ;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
address span, address a {
  display: inline;
  grid-column: 1 / -1;
  text-align: center;
}

.hide{
  display: none;
}
.show{
  display: block !important;
}
.show_fix{
  display: grid !important;
  position: fixed;
}
/* __________________________Footer__________________________ */

.footer{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(50px, 1fr);
  background-color: var(--blue);
}
.footer .badass_small{
  grid-column-start: span 4;
  grid-column-end: -2;
  align-self: center;
  justify-self: right;
}

.legal_nav{
  grid-column: 2 / span 5;
  display: grid;
  grid-template-columns: auto auto;
  grid-row: 1;
  grid-column-gap: 20px;

}
.footer_link{
  align-self: center;
  grid-row: 1;
  font-family: "SequelSans-MediumBodyText", Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em
}
/* __________________________Footer__________________________ */
.legal_container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4,minmax(80px, auto));
}

.legal_h, .legal_p {
  grid-column: 3 / -3;
}
.legal_h {
  grid-row: 2;
}
.legal_p {
  grid-row: 3;
}