#canvas {
        /*background-color: #448AFF;*/
        position: relative;
        top: 0vh;
    }
      
    #slide-container{
            position:absolute;
            bottom:8vh;
            right:0;
            width:13vw;
            height:20vh;
            display:none;
            z-index:700;
            background-color:#3F51B5;
            opacity:0.6;
        } 

        #slide-download{
            width:100%;
            height:100%;
        } 
        #slide{
            width:100%;
            height:100%;          
        }

    #status {
        color: #FFFFFF;
        position: relative;
        cursor: default;
        font-family: Helvetica, Verdana, sans-serif;
        font-weight: bold;
        margin: 10px;
        right:0vw;
        top: -13vh;
        z-index:1000;
    }

    

    select {
        font-size: large;
        font-family: Helvetica, Verdana, sans-serif;
        height:3vh;
    }

    .controls {
            color:#FFF;
            position: absolute;
            top: 4vh;
            width: 100%;
            
            z-index: 1000;
     }

    #controls-container {
        
        background-image: url('../Images/Artboard 1.svg');
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        position: fixed;
        top:0;
        font-family: Helvetica, Verdana, sans-serif;
        font-weight: bold;
        font-size: large;
        width: 100vw;
        height: 10vh;
        color: #FFF;
        /*box-shadow:0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);*/
        z-index: 600;
    }

    select {
        font-family: monospace;
        font-size: medium;
        border: none;
        background-color: transparent;
        color: #FFF;
        height: 100%;
    }

    select:focus {
            color: #000;
        }

    * {
        padding: 0;
        margin: 0;
    }

    .clear {
            background-color: #3F51B5;
            color: #FFFFFF;
            position: absolute;
            width: 80px;
            height: 80px;
            text-align: center;
            bottom: -87vh;
            right: 5vw;
            font-size: 0.9em;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            -moz-box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            border: none;
            z-index: 100;
            cursor: pointer;
            display:none;
        }

    .clear-mobile {
        display:block;
    }

    .float-right{
        float:right;
    }

        
.help {
    color:#fff;
    text-decoration:none;
}
    
@media only screen and (min-width : 1200px) {
        .clear {
            background-color: #3F51B5;
            color: #FFFFFF;
            position: absolute;
            width: 80px;
            height: 80px;
            text-align: center;
            bottom: -87vh;
            right: 1.5vw;
            font-size: 0.9em;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            -moz-box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            box-shadow: 10px 11px 8px -5px rgba(0,0,0,0.75);
            border: none;
            z-index: 100;
            cursor: pointer;
            display:block;
        }

        .controls {
            color:#FFF;
            position: absolute;
            top: 4vh;
            width: 100%;
            /* height: 100%; */
            z-index: 1000;
        }

        
        .clear-mobile {
            display:block;
        }

        #status {
            color: #FFFFFF;
            position: relative;
            cursor: default;
            font-family: Helvetica, Verdana, sans-serif;
            font-weight: bold;
            margin: 10px;
            right:0vw;
            top: -10vh;
            z-index:1000;
        }

        #slide-container{
            position:absolute;
            bottom:8vh;
            right:0;
            width:13vw;
            height:20vh;
            display:none;
            z-index:700;
            background-color:#3F51B5;
            opacity:0.6;
        } 

        #slide-download{
            width:100%;
            height:100%;
        } 
        #slide{
            width:100%;
            height:100%;          
        } 
    }

#heart-wrapper {
	position: absolute;
    top: -10vh;
	right: 0;
	transform: scale(0); 
    z-index:100;
}

#heart-wrapper.active {
	animation: pulse 1s ease-in-out;
}


#pulsingheart { 
  position: relative; 
  width: 100px; 
  height: 90px;
} 

#pulsingheart:before, #pulsingheart:after { 
  position: absolute; 
  content: ""; 
  left: 50px; 
  top: 0; 
  width: 50px; 
  height: 80px; 
  background: #aa0000; 
  border-radius: 50px 50px 0 0; 
  transform: rotate(-45deg);  
  transform-origin: 0 100%;
  animation:pulsecolor 1s ease;
} 

#pulsingheart:after { 
  left: 0; 
  transform: rotate(45deg); 
  transform-origin :100% 100%;
  animation:pulsecolor 1s ease;
  
}

@keyframes pulse {
	10% {transform: scale(1.1)}
  100% {transform: scale(0)}
}

@keyframes pulsecolor {
  10% {background: #dd0000}
}

.touchMode-button{
    position: fixed !important;
    left:1.5vw;
    top: 1.5vh;
    z-index:2000;
    cursor:pointer;
}

.touchMode-button-active{
    border: 2px solid #585858;
}

.annexure{
    cursor:pointer;
}