@media only screen and (max-width:515px){
.container-out:first-child h1 span{width: 100%; display: inline-block;}}

@media only screen and (max-width:532px){
.container-out:first-child h2 span{width: 100%; display: inline-block;}}  

@media only screen and (orientation: landscape) and (max-height:568px){
.container-out:first-child{padding-top:0; padding-bottom:0;}}



/* ---------------------------------------------- exit btn */

.exit {
    width:auto;
    height:100%;
    background-color: ;
    position: absolute;
    right: 20px;
}

.exit span {
        background-color: #f2961a;
	    display:block;
        position: relative;

        margin: 0 auto;
	    width: 25px;
	    height: 2px;

}

.exit span:first-child {	
            top: 50%;
        -webkit-transform: rotate(135deg);
	    -moz-transform: rotate(135deg);
	    -ms-transform: rotate(135deg);
	    -o-transform: rotate(135deg);
	    transform: rotate(135deg);
}

.exit span:last-child {	
    bottom: -23px;
        -webkit-transform: rotate(-135deg);
	    -moz-transform: rotate(-135deg);
	    -ms-transform: rotate(-135deg);
	    -o-transform: rotate(-135deg);
	    transform: rotate(-135deg);
}


a {width: 50px; height: 50px;}
/* ---------------------------------------------- hand cursor */

.cursor, #cursor  {cursor:  url(../img/nav/cursor.cur), auto; }



/* ---------------------------------------------- mandalas */
#left, #middle, #right {height:100vh; float: left;}

.top, .middle, .middle-top, .middle-bottom, .bottom{background-repeat: no-repeat;}


@media only screen and (orientation:portrait) and (max-width:1023px){
    #left {width:100vw; z-index: 1; position: absolute;}
    #right {width:100vw; z-index: 2; position: absolute;}
    #middle{display:none;}
}


@media only screen and (orientation:portrait) and (max-width:1023px){
  
#left .top {background-image:url(../img/mandalas/noehorn/doubleX-mandala.svg); height:26.333333333333333%;}
#left .middle-top {background-image:url(../img/mandalas/noehorn/tripleY-mandala.svg); height:34.333333333333333%;}

#left .bottom {background-image:url(../img/mandalas/noehorn/tripleX-mandala.svg); height:33.333333333333333%;}

#middle .top {background-image:url(../img/mandalas/single-mandala.svg);}
#middle .middle {background-image:url(../img/mandalas/noehorn/doubleY-mandala.svg);}
#middle .bottom {background-image:url(../img/mandalas/noehorn/doubleY-mandala.svg);}


#right .top {background-image:url(../img/mandalas/noehorn/halfsingleY-mandala.svg); height:16.333333333333333%; transform: rotate(180deg);}
#right .middle {background-image:url(../img/mandalas/noehorn/doubleY-mandala.svg); height:41.333333333333333%; transform: rotate(180deg);}
#right .bottom {background-image:url(../img/mandalas/noehorn/cloud-one.sv); height:36.333333333333333%; background-position: right;}
    
#single-mandala-one{position: absolute; z-index: 3; height: 6vh; top: 10vh; right:20vw;}
#single-mandala-two{position: absolute; z-index: 3; height: 8vh; top: 55vh; left:10vw;}
#single-mandala-three{position: absolute; z-index: 3; height: 12vh; top: 62.5vh; right:15vw;}

}  





@media only screen and (orientation: landscape){
      
#left .top {background-image:url(../img/mandalas/noehorn/doubleY-mandala.svg); height: 100vh;}
#left .middle {width: 0vw;}
#left .bottom {width: 0vw;}

#middle .top {width: 0vw;}
#middle .middle {width: 0vw;}
#middle .bottom {width: 0vw;}

#right .top {width: 0vw;}
#right .middle {width: 0vw;}
#right .bottom {width: 0vw;}
      
}