/* -------------------------Spiegelung */
.transformY{transform: scaleY(-1);}
.transformX{transform: scaleX(-1);}


/* -------------------------Drehung */

.transformDEG90{transform:rotate(90deg);}
.transformDEG180{transform:rotate(180deg);}
.transformDEG270{transform:rotate(270deg);}

/* -------------------------Rotationsrichtung */
.right-rotate{animation: rotating-left 54s linear infinite;}
.left-rotate{animation: rotating-right 54s linear infinite;}


/* -------------------------Rotation */
@keyframes rotating-left{
	0% {transform: rotate(0);}
	100% {transform: rotate(1turn);}
}
@keyframes rotating-right{
	0% {transform: rotate(0);}
	100% {transform: rotate(-1turn);}
}




.container-mandala-out{    
    position:fixed;
    z-index: 0; 
    height: 100%; 
    width:100%; 
    top:60px;
} 

@media only screen and (min-width:2250px){
.container-mandala-out{top:80px;}
}
    
    

.left, .right{width:50%; height: 100%;}
.left{float:left;}
.right{float:left;}
.right .mandala{display: flex; justify-content: right; width:100%;}

/* -------------------------single padding right */
.padding5{padding-right:5vw;}
.padding10{padding-right:10vw;}
.padding15{padding-right:15vw;}


@media only screen and (max-width:767px) and (orientation:portrait){
.single img{width:20vw;}
.halfsingle img{width:20vw;}
.double img{width:80vw;}  
.triple img{width:60vw;}  
}



@media only screen and (min-width:768px) and (orientation:portrait){
.single img{width:20vw;}
.halfsingle img{width:15vw;}
.double img{width:50vw;}  
.triple img{width:50vw;} 

}



@media only screen and (max-width:1023px) and (orientation:landscape){
.single img{height:25vh;}
.halfsingle img{height:35vh;}
.double img{height:65vh;}  
.triple img{height:85vh;}  
    
}



@media only screen and (min-width:1024px) and (orientation:landscape){
.single img{height:20vh;}
.halfsingle img{height:25vh;}
.double img{height:50vh;}  
.triple img{height:60vh;}  

}