.main {
  margin-left:auto;
  margin-right:auto; 
  text-align:center;
}

.filter {
  font-family:sans-serif;
  color:white;
  padding:20px;
  font-weight:bold;
  background:#543cbfff;

}


.grid, .row, .grid-head {
 width:920px;
 transition:.4s;
}

.grid, grid-head {
  padding:10px;
  margin-left:auto;
  margin-right:auto; 
  margin-top:25px;
}

.location {
 font-size:14px;
 color:black; 
 font-family:sans-serif;
 font-weight:bold;

}

.sub {line-height:1.5;color:black; font-family:sans-serif;text-align:center;display:inline-block;width:100%}

div.title {line-height:1.5;font-size:18px;color:#333; font-family:sans-serif; font-weight:900; text-align:center;display:inline-block;width:100%}


.location_name noselect {
 width: 140px;
 text-align:center;

}

#map_canvas {
 overflow: hidden;
 display:inline-block;

}

.logo {
display:inline-block;width:300px;margin-right:120px;margin-left:50px;
}


.logo_svg {
  cursor: pointer;    
  background: url('byte_logo.png');
  width: 187.50px;
  height: 225px;
  margin-left:50px;
  margin-top:-50px;
}


#logo {width:70%;height:50%;}


@media screen and (max-width: 480px) { 

    #logo {width:150px;height:150px;}

    .logo_svg {margin:0;display:inline-block;z-index:5}

    .pin { display: none; }

    .grid, .row, .grid-head {
      width:100%;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      overflow:hidden;
      min-width:290px;
    }  

    .row {
      height:95px;
      display:block;
    }

    #row0 {
      max-height:68px;
      width:100%;
    }

    .logo {
    margin:0px;
    padding:0px;
    display:auto;
    width:100%;
    text-align:center;
    min-width:275px;
    }


    .logo_svg {
    background-size: 1054.7px  84.37px;
    }

    .sub{
    width:90%;	
    }

    .location{
    padding:0px; 
    display:block; 
    border-radius:0px;
    width:100%;
    font-size:14px;
    padding-top:4px;
    padding-bottom:4px;
    margin-left:0px;
    }

    .add0, .add1 {
      height:16px;
    }

    .location_name {
    width:100%;
    margin-left:0px;
    padding-left:0px;
    text-align:center;
    }

    #map_canvas {
    display:none;
    }

    .title {
    display:inline;
    color:red;
    }

    .filter {
      padding-top:0px;
    width:calc(100% - 40px);
    margin-bottom:10px;
    display:block;
    overflow:hidden;
      min-width:230px;
    }

    .filter-content {
    text-align:center;
    display:block;

    }

    .add0, .add1 {height:20px;}

}


@media screen and (min-width: 481px) { 


    .location {
    padding-left:40px;
    padding-right:20px;
    border-radius:500px;
    width:200px;
    height:36px;
    display:inline-block;
    position:relative;
    margin:3px;
    vertical-align:top; 
    padding-top:4px;
    }
    
    .location_name {
    text-align:left;
    margin-top:6px;
    vertical-align:bottom;
    height:100%;
    }	
    
    .filter {
    width:25px;
    left:0px;
    top:0px;
    padding:0px;
    margin:0px;
    height:100%;
    vertical-align:top;
    position:fixed;
    z-index:2;
      transition: 0.2s;
      }

    .filter:after {
    content: '\2807';
    font-size:30px;
    font-weight:300;
    position:absolute;
    right:0px;
    top:45%;
      
    } 
      
    .filter-content {
    margin-top:30px;
    display:none;
    margin:0px;
    z-index:3;

    }

    .filter:hover .filter-content {transition-delay:3s; display: block; z-index:3;}

    .filter:hover .filter-head {
      font-size:12px;
      margin-bottom:10px; 
      text-align:center;
    }

    .filter:hover:after {
    content: '';
    }

    .filter:hover {
    width:210px;
    height:100vh;
    padding-left:20px;
    padding-right:20px;
    display:inline-block;
    vertical-align:top;
    position:fixed;
    z-index:2;
    content:"";  
    }


    .main {
    margin-left:20px;
    width:100%;
    text-align:center;
    }

    .add0, .add1 {height:44px;}
}
 

@media screen and (min-width: 1100px) { 

    .add0, .add1 {height:44px;}


    .filter {
    width:210px;
    height:100vh;
    padding-left:20px;
    padding-right:20px;
    display:inline-block;
    vertical-align:top;
    position:fixed;
    z-index:2;
    }


    .filter-content {
      display:block;  
    
    }

    .main {
    width:100%;
    padding-left:100px;
    margin-left:10px;
    text-align:center;
    }

    .filter:after {
    content: "";	
    } 

}
 
.filter-head {
font-size:12px;
  margin-top:20px;
  margin-bottom:10px; 
  text-align:center;
}
 

img {
	width:45px;
	height:45px;
}
.pin {
	width:20px;
	height:34px;
	position:absolute;
	bottom:5px;
	left:10px;
}
.bg0, .bg1, .bg2, .bg3 {
	height:50px;
	width:50px;
	display:inline-block;
	border-radius:50%;
	border-color:#333;
	font-family:sans-serif;
	margin:2px;
	position:relative;
	text-align:center;		
}

.bg0,.add0 {background-color:#FFF;border: 2px solid rgba(20,20,20,.1);}
.bg1,.add1 {background-color:#DFDFDF;border: 2px solid rgba(20,20,20,.05);}
.bg2 {background-color:rgba(120,120,120,.4);border: 2px solid rgba(220,220,220,.2)}
.bg3 {background-color:rgba(80,80,80,.4);border: 2px solid rgba(220,220,220,.2)}
body {background-color:#FFF;}


 
div.address {font-size:12px;color:black; font-family:sans-serif; text-align:left;font-weight:normal; display:none;}
div.icon-overlay {position:absolute;bottom:0px;width:100%;text-align:center}

.noselect {
 unselectable:on;
 cursor:default; 
 -moz-user-select: 
 -moz-none; 
 -khtml-user-select: none; 
 -webkit-user-select: none; 
 -o-user-select: none;  
 user-select: none;
}
div.overlay { 
 font-size:8px; color:black; 
 font-family:sans-serif;
 font-weight:bold; 
 background-color:#fffae1; 
 text-align:center;
 padding: 2px 4px 2px 3px; 
 margin-left:6px;
 margin-right:6px;
 bottom:0px;
 width:30px;
 border:1px solid;
 position:absolute;
}


.accordion, .accordion2, .accordion_choice {
  background-color: rgb(142, 141, 150);
  border-radius:500px;
  padding:10px;
  margin:2px;
  color: #fff;
  cursor: pointer;
  padding-left: 14px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  transition: 0.4s;
}

.accordion_choice {
 background-color: rgb(142, 141, 150);
 padding-left:20px;
 height:24px;
 padding-top:4px;
 padding-top:4px; 
 font-size:12px;
}

.active {
 background-color: #fff;
 color:#333;
}

@media (orientation: landscape){
    accordion:hover, .accordion2:hover, .accordion_choice:hover {
      background-color: #ccc;
    }
}


.panel {
  border-radius:20px;
  padding: 0px;
  background-color: rgb(219, 219, 202);
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom:5px;
  z-index:0;
 
}

.filter_button_left {
display:inline-block;
width:80%;
text-align:left;
}

.filter_button_right {
display:inline-block;
width:15%;
text-align:right;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}



div.map {width: 300px; height:300px; border:5px solid; border-color: #333;border-radius: 50%; -moz-border-radius: 50%;}

div.date {font-size:14px;color:black; font-family:sans-serif;text-align:center;margin-top:8px;}


span.bottombar {font-size:11px;color:#993300; font-family:sans-serif;font-weight:normal;}
a.bar:link { color: #993300;text-decoration: none;display:inline-block }
a.bar:visited { color: #993300; }