.maptextcontainer{
    max-width:650px;
    max-height: 50px;
    margin: 0 auto;
    margin-bottom:60px;
    padding 0 40px 0 40px;
    display: block;
    clear:both;
}

#map {    
height: 700px;
width:100%; 
padding: 0;
}

img 
{
    max-width: none;
}

#form{
    z-index: 999999;
    height:0;
    position: relative;
    top:-130px;
    border:0;
    width:100%;
    text-align: center;
    padding: 0;
    margin:0 auto;
    color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Lato", sans-serif;
	letter-spacing: 3px;
	font-style: bold;
    
}

.maptextcontainer ul {
    padding:0;
    margin 0;
}

.maptextcontainer .hotelsbutton {
	background-color: rgba(124,36,105,0.5);
	display: inline-block;
	margin: 0 10px 20px 10px;
	
    
}

.maptextcontainer .hotelsbutton:hover {

	background-color: rgba(124,36,105,0.8);
	-webkit-transition:all .3s ease-in;  
    -moz-transition:all .3s ease-in;  
    -o-transition:all .3s ease-in;  
    transition:all.3s ease-in; 

    -webkit-transition:all 3s ease-out;  
    -moz-transition:all .3s ease-out;  
    -o-transition:all .3s ease-out;  
    transition:all .3s ease-out; 

}

.maptextcontainer .shoppingbutton {
	background-color: rgba(0,150,212,0.5);
	display: inline-block;
	margin: 0 10px 20px 10px;
	
}

.maptextcontainer .shoppingbutton:hover {

	background-color: rgba(0,150,212,0.8);
	-webkit-transition:all .3s ease-in;  
    -moz-transition:all .3s ease-in;  
    -o-transition:all .3s ease-in;  
    transition:all.3s ease-in; 

    -webkit-transition:all 3s ease-out;  
    -moz-transition:all .3s ease-out;  
    -o-transition:all .3s ease-out;  
    transition:all .3s ease-out; 

}


.maptextcontainer .restaurantsbutton {
	background-color: rgba(190,214,58,0.5);
	display: inline-block;
	margin: 0 10px 20px 10px;
}

.maptextcontainer .restaurantsbutton:hover {

	background-color: rgba(190,214,58,0.8);
	-webkit-transition:all .3s ease-in;  
    -moz-transition:all .3s ease-in;  
    -o-transition:all .3s ease-in;  
    transition:all.3s ease-in; 

    -webkit-transition:all 3s ease-out;  
    -moz-transition:all .3s ease-out;  
    -o-transition:all .3s ease-out;  
    transition:all .3s ease-out; 
}





/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=checkbox] {
    display:none; 
}
 
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=checkbox] + label {
    cursor: pointer; 
    display:inline-block;
    padding: 15px 20px 15px 20px;
}

.maptextcontainer .hotelsbutton input[type=checkbox]:checked + label {
    background-color: rgba(124,36,105,1.0);  
}

.maptextcontainer .shoppingbutton input[type=checkbox]:checked + label {
    background-color: rgba(0,150,212,1.0);
}

.maptextcontainer .restaurantsbutton input[type=checkbox]:checked + label {
    background-color: rgba(190,214,58,1.0);   
}


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

.maptextcontainer{
    max-width:600px;
    max-height: 41px;
}
    
#form{
    
    top:-100px;
   
}
   
.maptextcontainer .hotelsbutton {
 margin: 0 5px 10px 5px;
}    

.maptextcontainer .restaurantsbutton {
	margin: 0 5px 10px 5px;
}    
    
.maptextcontainer .shoppingbutton {
	margin: 0 5px 10px 5px;
	
}
 
input[type=checkbox] + label {
    padding: 10px 10px 10px 10px;
}
    
}

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

.maptextcontainer{
    max-width: 400px;
    max-height: 36px;
}

  
#form{
    top:-80px;
    font-size: 12px;
    letter-spacing: 1px;
}
    
}