/* Fixes */
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1em; background-color:#fff;}
::selection {color: #fff; background-color:#e87b74;}

.clearfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; }


/* ----------------------------- Fonts ----------------------------- */

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
       url('../fonts/montserrat/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}


/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}



.header p{font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 40px; text-align: left;   margin: 0; line-height: 1.4em;}
.subheader{font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 300; text-align: left; line-height: 1.5em; color: #fff; margin: 0;}
.content {font-family:'Roboto', sans-serif; font-weight: 200; font-size: 23px; color: #000; line-height: 1.3em;}
.mark {padding: 0; color: #fff; font-weight: 300;}

#overlay p {font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 40px; text-align: center;   margin: 0; line-height: 1.4em; color: #fff;}

.icons{font-size: 2.5em;}

a, a:visited, a:active, i, i:visited, i:active { text-decoration: none;	cursor: pointer; font-weight: 500; color: inherit;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;}
a:hover {color: #000;}
i:hover {color: #000;}


/* ----------------------------- Wrapper ----------------------------- */

#logo{width: 200px; margin: 10% 0 0 5%; position: fixed; z-index: 9000; }
#est{width: 10%; margin: 100px 0 0 90%; position: fixed; z-index: 100; height: 200px;}

#boxstart{width: 50%; margin: -20px 0 0 0; padding:10% 20% 0 30%; min-height: 30vh; background-color:#f4f6f9;}
#box{width: 60%; margin: -20px 0 0 0; padding:10% 10% 10% 30%; background-color:#f4f6f9;}
#boxcontent{width: 80%;}

#overlay {position:absolute; width:auto; height:auto; width: 40%; margin:35% 30% 10% 30%; padding: 0.5em; z-index: 1000;}
#media {width: 100%;}

#points {width: 100%; margin: 0; padding: 0; background-image: url("../../web/media/point.svg"); background-repeat: repeat-x; background-position: right; }

video {width: 100%; height: 100%; margin: 0; padding: 0; z-index: 2; position: relative;}
.image {width: 100%; height: auto; margin: 0; padding: 0;z-index: -1000;transition: 1s;}


.margin-top-bottom{margin: 1.5em 0 0.5em 0;}
.margin-left {margin-left:-50px;}

#particles {width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; position: absolute;}

/* ----------------------------- Farben ----------------------------- */
.mark-lightgreen    {background-color: #def46b;}
.mark-green         {background-color: #91e484;}
.mark-lightblue     {background-color: #8be4f7;}
.mark-blue          {background-color: #59c1ff;}
.mark-pink          {background-color: #F50057;}
.mark-grey          {background-color: #c7cdd3;}
.mark-yellow        {background-color: #f7f345 ;}
.mark-black         {background-color: #000;}

.font-green         {color: #91e484;}
.font-grey         {color: #c7cdd3;}
.font-black         {color: #000;}


/* ----------------------------- Responsive ----------------------------- */
@media (min-width: 1px) and (max-width: 900px) {
#logo{width: 90px; margin: 50px 10% 0 10%; background-color: #fff; padding: 4px 4px 0px 4px;}

#boxstart{width: 80%;  padding:100px 10% 0 10%; min-height: 30vh; }
#box{width: 80%;  padding:30% 10% 30% 10%;}
.margin-left {margin-left:0px;} 
.header p{font-size: 25px;}
.subheader{font-size: 20px;}  
.iis {font-size: 14px}
.content {font-size: 20px;}   
.icons{font-size: 20px;}
#overlay p {font-size: 25px;}   
#overlay {width: 50%; margin:30% 25% 10% 25%; padding: 0;}
#boxcontent{width: 100%;}
    
}