body {
  font-family: 'Ubuntu', 'Assistant','HelveticaNeue-Thin', 'HelveticaNeue', 'Avenir Next Condensed', 'Avenir Next', 'AppleSDGothicNeo-Medium', 'TitilliumMaps26L-250wt', 'TitilliumMaps26L', 'TrebuchetMS', 'Trebuchet MS', 'Arial', 'KohinoorDevanagari-Book ', sans-serif;
      font-size: 23px;
      line-height: 28px;
      margin:0px;
      letter-spacing:2px;
      font-style: normal;
      font-variant: normal;
      font-weight: 200;  
      color:#424242;
      height: 100%;
      width:100%;
}
span {margin:0px;}

.trans20 {  -webkit-transition: all 1s; -moz-transition: all 1s;  -o-transition: all 1s;    transition: all 1s;}
.trans30 {  -webkit-transition: all 4.1s; -moz-transition: all 4.1s;  -o-transition: all 4.1s;    transition: all 4.1s;}
.trans40 {  -webkit-transition: all 6.1s; -moz-transition: all 6.1s;  -o-transition: all 6.1s;    transition: all 6.1s;}
.noTrans {  -webkit-transition: all 0s; -moz-transition: all 0s;  -o-transition: all 0s;    transition: all 0s;}

.inv {opacity:0; visibility:hidden;}
.vis {opacity:1; visibility:visible;}





.keyboardDIV {position:fixed; top:1vh; right:1vh; width: 8vh;
    height: 8vh;
    margin-left: -4vh;
    opacity: 1;
    overflow: visible;}


.logoDIVsmall {position:fixed; top:50%; left:50%; width:2vmin; height:2vmin; margin-left:-1vmin; margin-top:-1vmin;}
.logoDIV {position:fixed; top:50%; left:50%; width:64vmin; height:64vmin; margin-left:-32vmin; margin-top:-32vmin;}
.logoDIVfinal {position:fixed; top:50%; left:50%; width:17vmin; height:17vmin; margin-left:-8.5vmin; margin-top:-10vmin;}


/*SVG*/
path {opacity:1; fill:#75cac3; fill-opacity:1;}

.myBlur  
{
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
}
.unBlur  
{
  filter: blur(0px);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
}


.colTrans{
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
-webkit-animation-name: fill; 

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: fill; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.sec3 {  -webkit-animation-duration: 12.7s; 
          -moz-animation-duration: 12.7s; 
          animation-duration: 12.7s; 
}

@keyframes colorTrans {
    0% {transform: fill:#75cac3;}
    6.5% {transform: fill:#c9c9c9;}
    13% {transform: fill:#75cac3;}
   100% {transform: fill:#75cac3;}
}














/*MANDALA*/
.turn{
    position:absolute;
    top:0px;
    left:0px;
    border-style: none;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    transition-property: transform;
    transition-duration: 1s;
-webkit-animation-name: rotate; 

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    animation-iteration-count: infinite;
    animation-timing-function: linear;
  -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;


}
.CW {    animation-name: rotateCW; }
.CCW {    animation-name: rotateCCW; }

.sec18 {  -webkit-animation-duration: 18s; 
          -moz-animation-duration: 18s; 
          animation-duration: 18s; 
}

.sec24 {  -webkit-animation-duration: 36s; 
          -moz-animation-duration: 36s; 
          animation-duration: 36s; 
}

.sec22 {  -webkit-animation-duration: 27s; 
          -moz-animation-duration: 27s; 
          animation-duration: 27s; 
}

@keyframes rotateCW {
    0% {transform: rotate(0deg); fill:rgba(117,202,194,1);}
    50% {transform: rotate(0deg); fill:#c9c9c9;}
   100% {transform: rotate(0deg); fill:rgba(117,202,194,1);}
}

@keyframes rotateCCW {
    0% {transform: rotate(0deg); fill:#c9c9c9;}
    50% {transform: rotate(0deg); fill:rgba(117,202,194,1);}
   100% {transform: rotate(0deg); fill:#c9c9c9;}
}