.header-bar{
    background-color: #70d0cf;
    text-align: center;
    color: white;
    font-family: 'verdana';
    max-width: 100%;
    max-height: 100%;
    padding: 10px;
}
.jumbotron{
    text-align: center;
    background-color:  teal;
}

.jumPic{
    width: 300px;
    height: 300px;
    position: center;
}

h1{
    text-align: center;
    font-family: 'Francois One', sans-serif;
}

.content {
    font-family: 'Francois One', sans-serif;
    font-size: 25px;
    border: 2px solid #70d0cf;
    padding: 5px;
    text-align: center;
}

.txt{
    color: #70d0cf;
}

#enter-city{
    margin-left: 20%;
    margin-top: 25px;
    width: 60%;
    font-family: 'verdana';
    padding-left: 1%;
}
#logo{
    background-color: rgb(248, 236, 221);
}

.saveItem{
    max-width: 100%;
    max-height: 100%;
    margin: 20px 0px 20px 0px;  
    padding-left: 0px;
    font-family: 'verdana';
    font-size: larger;
}

.container-sm{
    max-width: 100%;
    max-height: 100%;
    margin: 20px;
}
.line-break{
    margin: 20px;
}

.user-story{
    max-width: 100%;
    max-height: 100%;
    margin: 20px;
    font-family: 'verdana';
}

.map{
    height: 600px;
    width: auto;
    margin-top: 40px;

}

.map-search{
    border: 22px ridge #70d0cf;
}

.results-header{
    text-align: center;
    background-color: #70d0cf;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    font-weight: bolder;
    padding: 10px;
    margin-top:10px;
    margin-bottom: 20px;
}

.restaurant-container-md{
    height: 350px;
    font-family: Verdana;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 5%;
    background-color: #f2f2f2;
}

.hotel-container-md {
    height: 350px;
    font-family: Verdana;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 5%;
    background-color: #f2f2f2;
}

.photo-size{
    width:80%;
    min-width: 110px;
    margin: 20px 20px;
    border: 3px solid #ffe77e;
    outline: 3px solid rgb(102, 200, 207);
}

.results-title{
    font-family: 'Bebas Neue', cursive;
    font-size: x-large;
}

.myModalBtn{
    background-color: #70d0cf;
    text-align: center;
    font-family: 'verdana';
    padding: 10px;
    width: 50%;
    border-radius: 5px;
    border: #70d0cf;;
    margin-top: 10px;
}
.modal-photo{
    width: 90%;
    min-width: 110px;
    margin: 20px 20px;
    border: 3px solid #ffe77e;
    outline: 3px solid rgb(102, 200, 207);
}

#add-to-savelist{
    background-color: #fac05f;
    text-align: center;
    font-family: 'verdana';
    padding: 10px;
    width: 50%;
    border-radius: 5px;
    border: #fac05f;
    margin-top: 10px;
}


#search{
    background-color: rgb(102, 200, 207);
}

.hide {
    display: none;
}

.custom-map-control-button{
    height:30px;
    color: rgb(51, 45, 45)
}

.footer {
    background-color:#70d0cf;
    height: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    font-family: 'verdana';
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 1000%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
   background-color: #dbd9d9;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 60%; 
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
.foot {
    background-color:  rgb(149, 236, 255);
}

.overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color:rgba(0, 128, 128, 0.932);
    overflow-y: hidden; 
    transition: 1.0s; 
    overflow: auto;
} 

.save-data{
    background-color: white;
    color: black;
    width: 50%;
    margin: 5px auto 5px auto;
    border-radius: 20px;
    padding: 5px 10px;
}

.btn-clear{
    font-size: small;
    background-color: #70d0cf;
    color: black;
    margin: 5px auto 5px auto;
    border-radius: 20px;
    padding: 5px 10px; 
}

.overlay-content { 
    position: relative; 
    top: 10%; 
    width: 100%; 
    font-size: 40px; 
    color: white; 
    text-align: center; 
} 

.overlay ul li { 
    padding: 10px; 
    text-decoration: none; 
    font-size: 25px; 
    color: white; 
    display: block; 
    cursor: pointer;
    transition: 0.3s; 
} 

.overlay  ul li:hover, 
.overlay  ul li:focus { 
    color: black; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 10px; 
    right: 35px; 
    font-size: 70px; 
} 
.savebar{
    background: teal;
    font-size: 40px;
    cursor: pointer;
    color: teal;
}

#xbtn{
    color: white;
    font-size: 30px;
}
#xbtn:hover, 
#xbtn:focus{
    color: black;
}
.fa-save{
    text-indent: 20px;
    color: #70d0cf;
}