* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.aside {
  
  margin-top: 25%;
}


@media only screen and (max-width: 600px) {
	/*klein*/

  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 100%; /*66.66%;*/}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  
  
	.boimg-kontakt{margin-left: 20.0%;}
	.picture-slides-image{margin-top: 0%;margin-left:0%;}
	.name{margin-top:10%;}
	
	#schulclown{padding-left: 1%; width: 99%;}
	}


@media only screen and (min-width: 600px) {
  /* For tablets: */
  
  
	

  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 90%; /*66.66%;*/}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  
	
	#schulclown{padding-left: 10%; width: 90%;}


.boimg-clown {
	width: 95px; height:95px;
	border:3px solid #fff; 
}

.boimg-kontakt {
	width: 100px; height:100px;
	margin-left: -5.0%;
	border:3px solid #fff; 
}
.boimg-top {
	width: 125px; height:125px;
	margin-left: 0.0%;  
	background: radial-gradient( circle, #EC000C 90%, #ffffff 10%);
	transition-property: width, height; transition-duration: 1s;
	}
.boimg-vita{
	width: 85px; height:85px;
	border:3px solid #fff; 
}
.boimg-impressum{
	width: 200px; height:200px;
	border:3px solid #fff; 
}

.boimg-clown:hover{background: radial-gradient( circle, red 100%, red 20%);
	width: 95px; height:95px;border-color: #ff0090;}
.boimg-kontakt:hover{background: radial-gradient( circle, #00a1eb 80%, #ffffff 20%);
	width: 90px; height:90px;}
.boimg-vita:hover{background: radial-gradient(circle,  #00a1eb 80%, #FFF 20%);
	width: 75px; height:75px;}
.boimg-impressum:hover{background: radial-gradient(circle,  #00a1eb 80%, #FFF 20%);
	width: 75px; height:75px;}	

.picture-slides-image{margin-top:5%;margin-left:5%;}


}


@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 80%;/*66.66%*/;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
.picture-slides-image{margin-top:3%;margin-left: 1%;}


}



/*---------------------------------------------*/

html {
	background:  
	radial-gradient( rgba(255,222,44,.4) 30%, rgba(255,255,255,0) 31%) 70px -50px,	/*--gelb--*/
	radial-gradient( rgba(253,0,13,.3) 22%, rgba(255,255,255,0) 18%)  40px 80px,
	radial-gradient( rgba(0,255,255,.2) 19%, rgba(255,255,255,0) 20%) 230px 140px,	/*--tuerkis--*/
	radial-gradient( rgba(0,225,225,.2) 15%, rgba(255,255,255,0) 16%) 90px 180px,
	radial-gradient( rgba(255,0,55,.3) 20%, rgba(255,255,255,0) 16%) 45px 200px,
	radial-gradient( rgba(255,222,44,.1) 17%, rgba(255,255,255,0) 18%) 130px 120px;
	background-color: rgba(255,102,0,.8);
	background-size: 470px 470px, 600px 600px, 400px 400px, 210px 210px, 320px 320px, 350px 350px, 100% 100%;
	
	scroll-behavior: smooth;
	
}
	
#body {
	text-decoration:none; 
	margin:0;
	padding: 0;
} 

#artikel {
	z-index:10;
	color:#fff;
	border-top-right-radius:320px;
	border-bottom-right-radius:350px;
	border-bottom-left-radius:350px;
	margin-bottom: 0em !important;
}
	
	
	#artikel	::-moz-selection {  color: #fff; }
	#artikel::selection { color: #fff; }
	
.artikel{
		transition-property: width, height; transition-duration: 1s;
}

.name{
margin-top:5%;
}
/*************************************************/
/* Navigation */


.boimg-clown {
	width: 125px; height:125px;
	margin-left: 0.0%;
	text-align: center; 
	vertical-align: text-center;
	border:5px solid #fff; 
	border-radius:50%;
   background: rgba(255,222,44,.8);
	transition-property: width, height; transition-duration: 1s;
	color: #000;
	}

.boimg-kontakt {
	width: 160px; height:160px;
	text-align: center; 
	vertical-align: text-center;
	border:5px solid #fff; 
	border-radius:50%;
   background: rgba(0,255,255,.6);
	transition-property: width, height; transition-duration: 1s;
	}
.boimg-top {
	width: 140px; height:140px;
	text-align: center; 
	vertical-align: text-center;
	margin-left: 5.0%;
	border:5px solid #fff; 
	border-radius:50%;
	background: rgba(236,0,12,1.0);
	transition-property: width, height; transition-duration: 1s;
}
.boimg-vita {
	width: 105px; height:105px;
	margin-left: 0.0%;
	text-align: center; 
	vertical-align: text-center;
	border:5px solid #fff; 
	border-radius:50%;
   background: rgba(255,40, 0, 0.51);
	transition-property: width, height; transition-duration: 1s;
	color: #000;
	}
.boimg-impressum {
	width: 160px; height:160px;
	margin-left: 0.0%;
	text-align: center; 
	vertical-align: text-center;
	border:5px solid #fff; 
	border-radius:50%;
   /*background: rgba(0,255,255,.4);*/
	transition-property: width, height; transition-duration: 1s;
	color: #000;
	}

.boimg-clown:hover{background: radial-gradient(circle,  #00a1eb 90%, #FFF 20%;);
width: 155px; height:155px;}

.boimg-kontakt:hover{background: radial-gradient( circle, rgba(0,255,255,.8) 90%, #ffffff 20%);
width: 190px; height:190px;}

.boimg-top:hover{background: radial-gradient( circle, #00a1eb 90%, #ffffff 20%);
width:120px; height:120px;}

.boimg-vita:hover{background: radial-gradient(circle,  #ffff00 50%, #FFF 20%);
width: 135px; height:135px;}

.boimg-impressum:hover{background: radial-gradient(circle,  #00a1eb 90%, #FFF 20%);
width: 145px; height:145px;}


/*https://paletton.com/#uid=c1t4h2N5B0kJaucqsV4BVPzFbkYLB9b*/



/************************************************************************/
/***************************ausklapp-text************************************/
/*   https://blog.teamtreehouse.com/use-details-summary-elements  */

details {
	font-family: Calibri, 'Lucida Sans Unicode', Helvetica, Arial, san-serif !important;
	border-radius: 4px;
  	cursor: pointer;

  	}

summary {
	color:#fff; font-size: 2.4em;letter-spacing: -0.06em;font-weight: lighter;
  outline: none;
  
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  
}

/* Style the summary when details box is open */
details[open] summary {
}

/* Custom Markers */
#custom-marker summary {
  font-size: 17px;
  vertical-align: top;
  
}

#custom-marker summary::-webkit-details-marker {
  display: none;
}

#custom-marker summary:before {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  content: "";
  }

/* Move the sprite image when the details box is open. */
details[open] summary:before {
    background-position: -18px 0;
    
}



/*--------Blubberblase ----*/

#blaseGo {
	z-index: 1000;
	border-radius:50%;
	border: 1px;
	border-color:#000;
    
  position: relative;
  /*animation: rotmove 20s ;
  animation-iteration-count: 1;*/
  
  animation: rotmove 15s infinite;
  animation-timing-function: linear;
}


@keyframes rotmove {
	 25% {transform: rotate(110deg);}
  from {bottom: -150px;}
  to {bottom: 850px;

  }
}

#blase {
  margin-top: -10.0%;
  border-radius:50%;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {

  from {top: -450px;
    }
  to {top: -10px;
    }
}
/************************************************************************/
img {
	max-width: 100%;
	height: auto;
  	width: auto;	
}


/*+++++++++++++++++++++++++++ROT++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

p, ul, li, h1, h2, h3, h4, h5, h6, .special-font {
    font-family: Calibri, 'Lucida Sans Unicode', Helvetica, Arial, san-serif !important;  
    color:#fff;
}
.picture-slides-image-text{letter-spacing: 0.01em; word-spacing: 0.1em; font-size: 0.9em;
    font-family: Calibri, 'Lucida Sans Unicode', Helvetica, Arial, san-serif !important;  
    color:#fff;
}

h2{color: #fff;  font-size: 1.7em;
  letter-spacing: -0.05em;font-weight: normal;
}
h3{color: #fff;  font-size: 1.2em;
  letter-spacing: -0.05em;font-weight: normal;
}

.header{ 
color:#fff; font-size: 2.4em;letter-spacing: -0.06em;font-weight: lighter;}


p {width:90%;letter-spacing: 0.01em; word-spacing: 0.1em; font-size: 1.12em; /*color:#0000ff;*/
}

a { text-decoration: none; color:#fff; -webkit-tap-highlight-color: transparent; /* for removing the highlight */
/*a:hover {color:#ffffcc;}*/

/*Text markieren*/
::selection {
  color: #00ffff;
  background: #EC000C;
}



#footer p, ul{	
	font-size: 0.95em; 
	color: #fff;
	text-align:left;
	padding-left:5.0%;	
}