/* CSS Document */
/* Autor Dein Name */

/* ================= SCHRIFTARTEN HOLEN =============== */
@import "https://fonts.googleapis.com/css?family=Open+Sans|Slabo+27px";

<link href="https://www.dafontfree.net/embed/YXVkaW93aWRlLXJlZ3VsYXImZGF0YS8xNi9hLzc3ODA1L0F1ZGlvd2lkZS1SZWd1bGFyLnR0Zg" rel="stylesheet" type="text/css"/>;

/* ================= STANDARD DEFINITIONEN =============== */





@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
@font-face {
  font-family: 'codropsicons';
  src:url('https://tympanus.net/Development/IconHoverEffects/fonts/codropsicons/codropsicons.eot');
  src:url('https://tympanus.net/Development/IconHoverEffects/fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
    url('https://tympanus.net/Development/IconHoverEffects/fonts/codropsicons/codropsicons.woff') format('woff'),
    url('https://tympanus.net/Development/IconHoverEffects/fonts/codropsicons/codropsicons.ttf') format('truetype'),
    url('https://tympanus.net/Development/IconHoverEffects/fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
.a {text decoration: none;}
.container > header,
.codrops-top {
  font-family: 'Lato', Arial, sans-serif;
}

/* Clearfix */
* {
	padding:0px;
	margin:0px;
	box-sizing:border-box;	
}
html,body {
 
	

}
body {
    background-image:url("../muster2.jpg");
	
	background-size:cover;
	background-attachment:fixed;
    font-family:"Open Sans", Calibri, Tahoma, sans-serif;
    font-size:1rem;
    color:white;
}

.fullscreen {
	display:flex;

	height:100%;
	align-items: flex-start;
	
    justify-content: center;

    /*max-width: 1500px;*/
	box-sizing: border-box;
   /*padding: 2rem;*/
width:100vw;
}
.fullscreen2 {
	
	display:flex;
	flex-direction: column;
	height:100%;
	align-items: center;
    justify-content: center;
 
    /*max-width: 1500px;*/
	/*box-sizing: border-box;*/
	width:100vw;
	/*border: 10px solid red;*/
   /*padding: 2rem;*/
}

.fullscreen3 {
	
	display:flex;
	flex-direction: column;
	height:30vh;
	align-items: center;
    justify-content: center;
 
    /*max-width: 1500px;*/
	/*box-sizing: border-box;*/
	width:100vw;
	/*border: 10px solid red;*/
   /*padding: 2rem;*/
}

.about {
	
	height:100%;
	width: 100%;
	background-color:rgba(0,0,0,1.00);
	background-size: cover;
	display:flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	padding:10rem;
	/*padding: 2rem;*/
}

.rand {

	background-size:auto;
	background-position: center;
	background-image: url("../santradicker1.svg");
		background-repeat: no-repeat;
	width: 50%;
	height:50%;

	justify-content: center;
	align-items: center;
	display: flex;

  background-size: 300% 300%;
	/*border-bottom: 8px solid black;*/
	background-image: linear-gradient(
        -45deg, 
		rgba(59,173,227,1) 0%, 
        rgba(87,111,230,1) 25%, 
        rgba(152,68,183,1) 40%, 
        rgba(255,53,127,0) 100%);
	  animation: AnimateBG 20s ease infinite;
	
	border-radius: 4rem;

}
.background{
	height:50%;
	width: 100%;
	/*background-image:url("../muster2.2.jpg");*/
	background-size: contain;
	
	
	display:flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;	
 background-attachment: fixed;
	
}
.background2{
	height:50%;
	width: 100%;
	/*background-image:url("../muster23.jpg");*/
	background-size:contain;
	
	display:flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;	
 background-attachment: fixed;
	
}



.titel_center{
	
	display:flex;
	align-items: center;
justify-content: center;

	

	
}


a {
    color:white;
    font-weight:bold;
}

h1, h2, h3, h4{
    font-family:Audiowide;
   /* background:rgba(33,33,33,0.8);*/
    padding:0.5rem;
    margin:0rem 0rem 0.5rem 0rem;
}

h1{
	padding: 10rem;

    font-size:9rem;
	margin-top:1rem;
		background-size:auto;
	background-position: center;
	background-image: url("../santradicker1.svg");
		background-repeat: no-repeat;
	width: 90%;
	height:90%;

}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
	

	

h2{
    font-size:5rem;
	color:white;
}
h3{
    font-size:2rem;
	color:white;
}
h4{
    font-size:4rem;
	color:black;
}


.klein {
	font-size:0.6rem;
}
p {
    padding:1rem 0rem;
}
img {
	max-width:100%;
	width:100%;
}
hr {
	border-top:none;
	border-bottom:1px dashed black;
	margin:0.4rem 0rem;
}

input, textarea, select {
        background:rgba(255,255,255,1.00);
        border-radius:5px;
        padding:0.5rem;
        font-family:"Open Sans", Calibri, Tahoma, sans-serif;
        font-size:2rem;
        color:black;
}


/* ================= ELEMENTE STRUKTUR =============== */
header, nav, #container, footer, section {
	   box-sizing:border-box;
		/*margin:0.5rem auto;	*/
		/*max-width:1200px;*/
     /*   border-radius:1px;
        border:1px solid black;
        /*box-shadow:1px 1px 4px 3px rgba(33,33,33,0.3);*/
      /*  padding:0.5rem;*/
	position:inherit;
	
}
header,footer,nav, section  {
        color:black;
      /*  background:rgba(133,133,133,1.00);*/
		
	display:block;
	
	
	align-items: center;
    justify-content: center;
   /* margin-left: auto;
    margin-right: auto;*/
    /*max-width: 1500px;*/
	box-sizing:border-box;
    margin: 0;
    padding: 0;
}
	
nav {
	justify-content: center;
	align-items: center;
	display:flex;
	flex-direction: column;
	width:100%;
	height:50vh;
}
header{
	height:100vh;
	align-items:baseline;
}

nav a{

	font-size:3rem;
	color: black;
}
header{
	
	/*background-image:url("../muster2.1.jpg");*/
	background-size: cover;
	/*nimation: change_index 25s infinite ease-in-out;*/
    background-attachment: fixed;
   
    background-position: center;
}

footer {
	height:25vh;
	display: flex;
	align-items: flex-end;
}

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  content: '';
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
  transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.cl-effect-12 a::after {
  width: 90px;
  height: 90px;
  border-width: 6px;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
  transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  transform: translateX(-50%) translateY(-50%) scale(1);
}


nav a:link {
	text-decoration: none;
}
nav a:hover {
	
}

#container {
        min-height:100%;
	max-width:100;
        /*background:rgba(255,255,255,1.00);*/
}
	
.bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 300% 300%;
  background-image: linear-gradient(
        -45deg, 
        rgba(59,173,227,1) 0%, 
        rgba(87,111,230,1) 25%, 
        rgba(152,68,183,1) 51%, 
        rgba(255,53,127,0) 100%
  );  
  animation: AnimateBG 20s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}	

	

.bg2 {
	display: flex;
	justify-content: center;
	align-items: center;
width: 100%;
	height:100%;
  background-size: 300% 300%;
  background-image: linear-gradient(
        45deg, 
         rgba(112,113,114,1.00) 0%, 
        rgba(0,0,0,1.00) 25%, 
        rgba(152,68,183,0) 51%, 
        rgba(255,255,255,1.00) 100%
  );  
  animation: AnimateBG 20s ease infinite;
}



@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}	


.bg3 {
	
  background-size: 300% 300%;
  background-image: linear-gradient(
        -45deg, 
        rgba(59,173,227,0) 0%, 
        rgba(87,111,230,0) 25%, 
        rgba(152,68,183,1) 51%, 
        rgba(255,53,127,1) 100%
  );  
  animation: AnimateBG 20s ease infinite;
}



@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
#projekt_container {
	
	background:rgba(0,0,0,1.00);
	
	/*border: 4px dotted red;*/
	
	display:flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	
}

.projekt_eintrag {
	
	
	text-align: center;
	align-items: center;
	
	width: 45%;
	max-height:98vh;
	/*background:rgba(73,88,96,0.9);*/
	padding: 1rem;
	margin:1rem;
	/*border: 4px solid red;*/
	overflow: hidden;
	
	
	/*border-radius: 50%;*/
	
	
	
	
}

.projekt_eintrag a, p, h4,#text {
	
	padding-bottom:2rem;
	

	
	
	
}

#text{
	color:black;
}

video {
	width:100%;
	
	
}

/* ================= EIGENE KLASSENDEFINITIONEN =============== */
.rot {
	color:orangered;
}
/* Bilder designen */
/* lieber mit flexbox oder grid arbeiten */
.bildergalerie {
	float:left;
	height:150px;
	margin-right:0.5rem;
	margin-bottom:0.5rem;
}
/* Hack wegen Float */
.clearfix{
	clear:both;
}

/* Fehlermeldung ausgeben */
.fehlermeldung {
	display:block;
	background:red;
	color:yellow;
	margin:1rem 0rem;
	padding:0.5rem;
}

.liste {
	margin-left:2rem;
}