/* Fonts */

		@font-face {
			font-family: graffiti_font;
			src: url("fonts/freshmarker.ttf");
		}
        
        @font-face {
			font-family: facebook_font;
			src: url("fonts/FACEBOLF.otf");
		}

		/* Full webpage */

		html, body {
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;	
			margin: 0;
			background-color: black;
		}

		/* Logo */

		#logo {
			height:100px;
            width:100%;
			cursor:pointer;
			background-color: white;	
            position:fixed;
            top:0;
            left:0;
            z-index:300;
		}

		#logo_single_graffiti {
			height:100px;
            width:100%;
			cursor:pointer;
			background-color: white;	
            position:fixed;
            top:0;
            left:0;
            z-index:300;
		}

		#logo_text {
			width:100%;
			font-family: graffiti_font;
			font-size: calc(2.5vw + 10px);
			line-height:0;
			text-align:center;
			margin:0;
			color: black;
		}

		/* Top menu */

		#menu_canvas {
            width:100%;
            position:fixed;
            top:100px;
            left:0;
            z-index:300;
        }

		.sticky {
            width:100%;
            position: fixed !important;
            top:0 !important;
            left:0;
            z-index:100;
	     }

	     .after_menu {
            padding-top:140px;
        }
		
		/* Map subpage*/
		
		.canvas_main {
			height: 80vh;
		}

		#graffiti {
			max-width:100%;
			max-height:100%;
			width: auto;
			height: auto;
			cursor:pointer;
		}

		#graffiti_description {
            cursor:pointer;
            line-height:4vmax;
            background-color:rgba(0,0,0,0.5);
            font-family: 'Roboto', sans-serif;
			text-align:center;
			color:white;
            font-size:2vmax;            
        }

        .graffiti_buttons {
            width:8%;
            cursor:pointer;
            z-index:3;   
		}

		.graffiti_buttons img{
			opacity:0.5;
            cursor:pointer;
            max-height:100%;
            max-width:100%;
            width: auto;
			height: auto;
		}

		.graffiti_buttons img:hover {
			opacity:1;
		}

		#info_text {
			line-height:2.5vmax;
			text-align: center;			
			width:100%;
           	font-family: 'Roboto', sans-serif;
            font-size:2.5vmax;
			color:white;
        }

	     /* Galleries on all subpages */

		.gallery_canvas img {
			cursor:pointer;
			max-height:100%;
			max-width:100%;
		}        
		
		.gallery_canvas img:hover {
			-webkit-filter: grayscale(100%);
		}
	
		.selected {
             box-shadow:0 0 0 3px white;
        }

	     /* Artists and suburbs subpages */

	    .tile {
            cursor:pointer;
        }

		 /* Single artist and suburb subpages */

		 #info_canvas {
            position:fixed;
            top:inherit;
            left:inherit;
            padding-right:22px;
            width:inherit;
        }

        #description_canvas {
            text-align:center;
            height:calc(50vh - 80px);
            overflow-y:auto;
        }

		 .sticky_map {
            position: fixed;
            top:100px;
			z-index:100;
            width:inherit;
	     }

        /* Single graffiti subpage - TO BE CHANGED*/
        
        #graffiti_data {
			width:100%;
			table-layout:fixed;
            color:white; 
            text-decoration: none;
			font-size: 15px;
			font-family: 'Roboto', sans-serif;
            vertical-align:center;
		}
        
        #graffiti_data a{
            color:black;
            background-color:white;
            text-decoration:none;
		}

        #single_master_canvas {
            padding-top:100px;
        }

        #single_map_canvas {
            height:500px;
        }

        /* Small screen modifications */

        @media only screen and (max-width: 600px) {
            #logo {
                position:relative;
                height:60px;
            }
            #logo_single_graffiti {
                height:60px;
            }
            #logo_text {
                font-size: 4vw !important;
            }
            #menu_canvas {
                position:static;
            }
            #info_canvas {
                position:static;
            }
            .after_menu {
                padding-top:0;
            }
            #description_canvas {
                height:auto;
            }
            .canvas_main {
                height: 40vh !important;
            }
            #single_master_canvas {
                padding-top:60px;
            }
            #single_map_canvas {
               height:300px;
        }
           
        }

        /* Maybe remove */

        #map_group_button {
            position:absolute;
            background-color:white;
            border:none;
            outline:none;
            color:rgb(85,85,85);
            z-index:99;
            cursor:pointer;  
            padding: 8px;
			text-align: center;
			text-decoration: none;
			font-size: 11px;
			font-family: 'Roboto', sans-serif;
            box-shadow:0 1px 2px rgba(0,0,0,.15);
        }
        
        #map_group_button:hover {
            background-color:#EBEBEB;
            color:black;
        }