@charset "utf-8";
/* CSS Document */
body   {
text-align:center;
background:url(../Pictures/planet.jpg);
background-color:#000;
background-repeat:	no-repeat; 
background-position: top;
overflow-y:hidden;
}

#wrapper{
	width:	auto;
	height:auto;
	margin: 0px auto;
}

#kreis-wrapper{
	margin-top:250px;
	padding-top:20px;
	height:150px;
	background: rgba(44.7,44.7,44.7,0.5);
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	margin: 0 auto;
	font-size:14px;
	color:#FFF;
}

.header{
	background:url(../Pictures/kaos_plex3.png);
	background-repeat:	no-repeat;
	background-position:50%;
	min-width:500px;
	min-height:	331px;
	background-size:60%;
	margin-top:100px;
}
/*Button */

#button-holder {
	/* Border:1px #FFF solid;*/
	width:650px;
	height:auto;
	margin: 0 auto;
	display:flex;
	margin-top:300px;
	
}

#button {
	/*border*/
	border:2px solid;
	border-radius: 15px;
	border-color:rgba(44.7,44.7,44.7);
	width:250px;
	height:50px;
	margin:0 auto;

	/*BG*/
	background:rgba(44.7,44.7,44.7,0.8);
	
	/*Font*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FFF;
	line-height: 50px;
	}
#button:hover {
	background:rgba(0,79.0,183,0.8);
	border-color:rgba(0,79.0,183,0.8);
}

a {
	margin:0 auto;
	text-decoration:none;
}

/*Video*/
/** Donna Galletta | LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

/** videoModal **/
#videoModal {
  border-radius: 0;
  width: 870px;
  margin:auto;}
  #videoModal .modal-header {
    background: #000;
    border: 0;
    color: #fff;
    position: relative;
		  height:35px; }
    #videoModal .modal-header h3 {
      font-size: 18px;
      line-height: 22px;
	  font-family:Arial, Helvetica, sans-serif;
	  padding:5px;}
  #videoModal .modal-body {
	padding: 0;
    max-height: none;
    overflow: hidden;
	margin-left:0 auto;
	margin-top:150px;
	 }
  #videoModal .modal-footer:empty {
    display: none !important; }
  #videoModal .close {
    background: #727272;
    color: #fff;
    font-size: 24px;
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-shadow: none;
    top: 0;
    width: 38px; }
video {
	margin:0 auto;
	width:720px;;
	
}
/*************** Ladebalken *********************************
************************************************************/

.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(50,170,255,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,170,255,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}