/**
text
**/
@font-face {
  font-family: 'd-din-bold';
  src: url('../fonts/d-din-bold-webfont.woff2') format('woff2'),          /** src: url('../fonts/d-din-bold-webfont.woff2') format('woff2'),text**/
       url('../fonts/d-din-bold-webfont.woff') format('woff'),
       url('../fonts/d-din-bold-webfont.ttf') format('truetype'),
       url('../fonts/d-din-bold-webfont.svg#d-dindin-bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'd-dinregular';
  src: url('../fonts/d-din-webfont.woff2') format('woff2'),
       url('../fonts/d-din-webfont.woff') format('woff'),
       url('../fonts/d-din-webfont.ttf') format('truetype'),
       url('../fonts/d-din-webfont.svg#d-dinregular') format('svg');
  
  font-style: normal;
  font-weight: normal;
}  

body{
color:#222120;

}

.backimgidx{
  background-image: url("../img/back-verbindungen.png");
  height: 100%;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;

}

.backimglst{
  background-image: url("../img/back-spheres-mono.png");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.backimgabaut{
  background-image: url("../img/back-vectoren.png");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;

}



.headtop{

margin-top: 8px;
color:#222120;
padding: 0px 0px 0px 5px;
font-family:'d-din-bold';
font-size:  max(3vw,16px); 

}

h1{
font-family:'d-din-bold';
font-size:  max(4vw,24px); 
line-height: 1.0;
padding: 0px 0px 0px 5px;
}

p span{
  background-color: white;
}






.claims {
  
  font-family:'d-din-bold';
  font-size:  max(13vw,40px); 
  line-height: 1.0;
  padding: 5vh 0px 5vh 5px;    /* top r bott left */
  margin: 27vmin 0px 38vmin 0px; /* schmale vmin und breite seite vmax */
  }




/*
h1.claims {
  
  font-family:'d-din-bold';
  font-size:  max(7vw); 
  line-height: 1.0;
  padding: 0px 0px 0px 5px;
  }
*/

/*erstes wort */
  .big {
    font-size: 1.6em;
  }




  

h2{
  font-family: 'd-din-bold';
  font-size:  max(3vw,20px); 
  
  padding: 0px 0px 0px 5px;
}


h1.bigtitel{
  font-size:  max(3vw,24px); 
}


h2.bigtitel{
  font-size:  max(4vw,24px); 
}

/* hier für index seite */
h3{
  font-family: 'd-din-bold';
  font-size:  max(2vw,16px); 
  line-height: 1.0;
  padding: 0px 0px 0px 5px;   /* top r bott left */
  
}





p{
font-family:'d-dinregular';
line-height:1.3em;
font-size:  max(2vw,16px);    /* max(2vw,12px) */
margin:0px;
padding: 0px 5px 30px 5px;   /* top r bott left */

}

.txtbold{
  font-family: 'd-din-bold';
}



.p2{
  font-family:'d-dinregular';
  line-height: normal;
  font-size:  max(2vw,16px);    /* max(2vw,12px) */
  margin:0px;
  padding: 10px 5px 5px 5px;   /* top r bott left */
  
}


/*startseite index aufzaehlung*/
ul.start{
  
  display:inline-table;
  text-align: left;
  background-color: white;
}

li{
  font-family:'d-dinregular';
  line-height: normal;
  font-size:  max(2vw,16px);    /* max(2vw,12px) */
}


.tab div {
  display: none;
  
}

.tab div:target {
  display: block;
  
}

h3 span{
  
  background-color: white;
}



/*buttons auf index seite*/
.buttidx{

  transition: color 0.2s ease-in-out;
  color:#222120;
  margin: 0px;
  padding: 0px 0px 0px 0px; /* top r bott left */
  /*text-decoration: none;*/
  }
  
  .buttidx:hover {
  
    color: #6ecddd;
  /*
  text-decoration: none;  Set text color to red */
  }








/*gradient under navi*/
.contgradient {
position: absolute;
background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
width: 100%;
padding-top: 3%; /* Aspect Ratio */
}


/*buttons*/
.butt{
font-family: 'Arial';
font-size: 40px;
transition: color 0.2s ease-in-out;
color:#222120;
margin: 0px;
/*text-decoration: none;*/
}

.butt:hover {

  color: #6ecddd;
  font-style: bold;  /*
text-decoration: none;  Set text color to red */
}

.images{
  padding: 0px 0px 5px 0px;   /* top r bott left */
}

hr.inside{                 /* Trennlinien in projhekt und zwischen projekten #222120 */
  border-bottom: 1px dotted #706e75;
  
}

hr.outside{
  border-bottom: 1px solid #706e75;
}

/*links zu externen seiten*/ 
a.li:link {
  font-family:'d-din-bold';
  /*target="_blank"        pen in a new browser window*/   
}
a.li:hover {
  font-family:'d-din-bold';
  color: #dd6eb3;
  }


a.mai:link{
  font-family:'d-dinregular';
  padding: 0px 0px 2px 5px;
  }
  
a.mai:hover{
  font-family:'d-dinregular';
  color: #6ecddd;
  padding: 0px 0px 2px 5px;
}



 /*animation front page*/ 
.animated {
  text-indent: 8px;
  font-family:'d-din-bold';
}

.animated:before {
  font-family: monospace;
  content: "&";
  animation: topToBottom 1.5s infinite 0s;

}

@keyframes topToBottom {
  

  0.5% {
    content: "\2665";
    color:#5B77A6;
  }




}
/*2764  ♥ 9829 animation front page END*/ 
/*animation front page END*/ 






#toggle {
display: none;
}
/**
Hamburger
**/
.hamburger {
position: absolute;
/*background-color: blue;*/
top: 8px;                   /* hight from top*/
right: 5px;
/*margin-left: -2em;
/*margin-top: -45px;*/

width:max(3vw,30px);
height: max(3vw,30px);


/*width: 4em;
height: 4em;*/
z-index: 5;
}

.hamburger div {
position: relative;
width:max(4vw,30px);
height: max(0.5vw,4px);
margin-top:max(0.5vw,4px);
/*width: 4em;
height: 7px;*/
border-radius: 5px;
background-color: #222120;

/*margin-top: 8px;*/
transition: all 0.3s ease-in-out;

}

.hamburger div:hover{       /* hover für hamburger */
  background-color: #6ecddd;
  height: 9px;
}






/**
Nav Styles
**/
.nav {
position: fixed;          /* box navi for tex */

z-index:3;

width: 100%;
height: 100%;

background-image:url("../img/back-graph.png");

background-position: center;
background-size: cover;
top: -100%; left: 0; right: 0; bottom: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;

}
/*.nav-wrapper2 {
position: relative;
overflow: hidden;
overflow-y: auto;
height: 100%;
}
*/

nav {                      /* navi for text*/
text-align: center;

margin-top: 80px;
font-family:'d-dinregular';
font-size:  max(4vw,28px); 
text-decoration: none;
}
nav span{
  background-color: white;
}

nav a {
/*position: relative;*/
color: #222120;
transition: color 0.2s ease-in-out;

}

nav a:hover {
font-family:'d-din-bold';
color: #6ecddd;
text-decoration: none;
}
nav a:hover:before {
height: 100%;
text-decoration: none;
}

a:link, a:visited {
text-decoration: none;
}



/**
Animations
**/
#toggle:checked + .hamburger .top-bun {
transform: rotate(-45deg);
margin-top: 25px;

}
#toggle:checked + .hamburger .bottom-bun {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .hamburger .meat {
transform: rotate(45deg);
margin-top: -5px;
}

#toggle:checked + .hamburger + .nav {
top: 0;
transform: scale(1);
}

@media ( orientation:landscape ) {
	.claims{
    margin: 8vmin 0px 23vmin 0px; /* schmale vmin und breite seite vmax */
  }
}



@media screen and (min-width: 1200px) {    /* hier groesse txt auf max setzten wenn merh als 1200 */
p{
   font-size: 24px;
}

li{
  font-size: 24px;
}





 /* 
.claims h1{
  font-size: 50px;
}
*/

h1 {
   font-size: 48px;
}

h2 {
  font-size: 36px;
}


.claims{
  font-size: 158px;
}



.bigtitel h1{
  font-size: 70px;
}



.bigtitel h2{
  font-size: 48px;
}

h3 {
  font-size: 36px;
}

.headtop {
   font-size: 36px;
}

nav{
  font-size: 48px;
}

.hamburger{
  width:50px;
  height: 50px;
}

.hamburger div{
width:50px;
height: 8px;
margin-top:8px;
}

}