body
    {
        margin:0; 
        padding:0;
        width:100%; 
        height: 100%;
    }

#map 
    { 
        position:absolute; 
        top:0; 
        bottom:0; 
        width:100%; 
        height: 100%;
        padding: 0px;
    }

.geocoder 
    {
        position:absolute;
        z-index:2;
        width: 240px;
        right: 10px;
        top:25px;
        
    }

#heatmap
    {
        background: rgba(34, 34, 34, 0.9);
        position: absolute;
        padding: 5px;
        text-align: center;
        z-index: 1;
        top: 4em;
        right: 10px;
        width: 100px;
        border-radius: 10px;
        color: white;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

#infobutton
    {
        position: absolute;
        padding: 5px;
        text-align: center;
        z-index: 1;
        bottom: 30px;
        right: 55px;
        width: 60px;
        height: 60px;
        background-color: rgb(23, 124, 219);
        border-radius: 50px;
        border-color: whitesmoke;
        color: white;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

#infobutton:hover
    {
        background-color: rgb(255, 255, 255);
        color: rgb(23, 124, 219);
        border-color: rgb(23, 124, 219);
    }

input[type=checkbox]
    {
        height: 0;
        width: 0;
        visibility: hidden;
    }
    
label 
    {
        cursor: pointer;
        text-indent: -9999px;
        width: 60px;
        height: 30px;
        background: rgb(192, 96, 96);
        display: block;
        border-style: solid;
        border-color: white;
        border-width: 2px;
        border-radius: 100px;
        top:5px;
        margin-bottom:10px;
        position: relative; 
        display: inline-block;   
    }
    
label:after 
    {
        content: '';
        position: absolute;
        top: 2.5px;
        left: 5px;
        width: 25px;
        height: 25px;
        background: rgb(252, 252, 252);
        border-radius: 90px;
        transition: 0.3s;
       
    }
    
input:checked + label 
    {
        background: #4d68b3;
    }
    
input:checked + label:after 
    {
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }
    
label:active:after 
    {
        width: 50px;
    }
#buttons-close-tutorial
    {
        margin-top: 5%;
        text-align: center; 
    }
   
.tutorial
    {
        background-color: rgb(76, 76, 161);
        border: none;
        width: 10em;
        height: 3em;
        color: white;
        padding: 1% 2% 1% 2%;
        bottom: auto;
        margin-bottom: 5em;

        display: inline-block;
        font-size: 2.5em;
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

.tutorial:hover
    {
        background-color: rgb(255, 255, 255); 
        color: rgb(76, 76, 161);
        font-weight: bold;
        border: 3px solid rgb(76, 76, 161);
        
        
    }

@media only screen and (max-width: 600px) and (min-width: 300px)  
    {
        .tutorial {
            width: 5em;
            height: 1.5em;
            font-size: 1.25em;
        }
    }

.close
    {   
        background-color: rgb(197, 55, 55);
        border: none;
        width: 10em;
        height: 3em;
        color: white;
        padding: 1% 2% 1% 2%;

        display: inline-block;
        font-size: 2.5em;
        margin-right: 10px;
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        
    }

.close:hover
    {
        background-color: rgb(255, 255, 255); 
        color: rgb(197, 55, 55);
        font-weight: bold;
        border: 3px solid rgb(197, 55, 55);
    }

    @media only screen and (max-width: 900px) and (min-width: 300px)  
    {
        .close 
        {
            width: 10em;
            height: 5em;
            font-size: 1.5em;
            display: block;
            justify-content: center;
            margin: 1em auto;    
        }

        .tutorial {
            width: 10em;
            height: 5em;
            font-size: 1.5em;
            justify-content: center;
            margin: 5em auto;
        }
    }

.info-box 
    {
        position: fixed;
        margin: auto;
        z-index: 3;
        height: 100%;
        width: 100%;
       
        
        
        padding: 1% 1% 1% 1% ;
        background-color: rgba(34, 34, 34, 0.9);
        color: white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.8em;
        line-height: 2em;  
    }
@media only screen and (max-width: 900px) and (min-width: 300px) 
    {
        .info-box   
        {
            position: fixed;
            margin: auto;
            height: 100%;
            width: 100%;
            font-size: 0.6em;
        }
    }


#tutorial_movie
    {
        position: fixed;
        margin: auto;
        z-index: 3;
        height: 100%;
        width: 100%;
       
        
        
        padding: 1% 1% 1% 1% ;
        background-color: rgba(34, 34, 34, 0.9);
        color: white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.8em;
        line-height: 2em;
    }

@media only screen and (max-width: 900px) and (min-width: 300px) 
    {
        .tutorial_movie   
        {
            position: fixed;
            margin: auto;
            padding: 1.5em 1.5em 1.51em 1.5em;
            
        }
    }

#info 
    {
        border-bottom: 5px groove whitesmoke;
        
        margin-left: 20%;
        margin-right: 20%;
        margin-top:2%;
        margin-bottom:10%;
        padding-top: 5%;
        padding-right: 5%;
        padding-bottom: 1%;
        padding-left: 5%;
        text-align: center;
        line-height: 1.6;
        font-size: 2.5em;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

#directions 
    {
        position: fixed;
        z-index: 2;
        margin: 20px;
        height: 80%;
        width: 25%;
        top: 0;
        bottom: 40%;
        padding: 20px;
        background-color: rgba(34, 34, 34, 0.9);
        overflow-y: scroll;
        color: white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.8em;
        line-height: 2em;
        font-size: 16px;
        font-weight: bold;
    }

    #gm 
    {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
@media only screen and (max-width: 900px) and (min-width: 200px) 
    {
        #directions   
        {
            position: fixed;
            z-index: 2;
            top: 105%;
            margin: auto;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            height: 15%;
            width: 50%;
            padding: 1em;
            background-color: rgba(34, 34, 34, 0.9);
            overflow-y: scroll;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 0.8em;
            line-height: 2em;
            font-size: 16px;
            font-weight: bold;
        }
        h2
        {
            margin-top: 10px;
            text-align: center;
        }
        #gm
        {
            display: none;
        }
    }
    


.movie
    {
        position: absolute;
        margin: auto;

        background-color: rgb(117, 27, 24);
        border-radius: 20px;
        float: right;
        width: 5%;
        height: 10%;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 2em;
        font-weight: bold;
        cursor: pointer;
        font-family: sans-serif; 
        
        

    }
    
.movie:hover 
    {
        background-color: rgb(204, 36, 31); 
        color: white;
    }

@media only screen and (max-width: 900px) and (min-width: 300px) 
    {
        .movie   
        {
            position: fixed;
            z-index: 3;
            margin: auto;
            width: 25%;
            height: 7%;
            padding: 0px;
            font-size: 1em;
            text-align: center;
            text-justify: auto;
            top:85%;
            left: 40%;
        }
    }
iframe
    {   
        position: fixed;
        margin: auto;
        width: 90%;
        height: 80%;
        position: absolute;
        margin: auto;
        left: 7%;
    }
@media only screen and (max-width: 900px) and (min-width: 300px) 
    {
        iframe
        {
            
            margin: auto;
            width: 100%;
            height: 80%;
            position: absolute;
            margin: auto;
            left: 0%;
            
        }
    }