body{
  font-family: 'Lato', sans-serif;
}

.bg-sunset {
  background-color: #3e2c2a;
}

.nav-link {
  color:white;
}

.member {
	color:rgba(255, 255, 255, .55);
	margin-right:20px;
}

.bg-sunset a.member:hover{
	color: rgba(255,255,255,.75);
}

#header, #footer {
  background-color: #3e2c2a;
}

#header {
  margin-bottom: 24px;
  padding: 8px 0 16px 0;
}

.header, .footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: hidden;
}

.header a, .footer a{
  color: white;
  text-decoration: none;
}

.header a:hover{
  color: #f9bf0f;
}

.header a.logo:hover{
  text-decoration: none;
}

.footer p {
  color: #FFC670;
}

.footer a:hover{
  text-decoration: underline;
}

#logo{
  font-family: 'Happy Monkey', cursive;
  text-decoration: none;
  display: block;
  background: url('media/sunset.svg') 0 10px no-repeat;
  background-size: 40px 30px;
  padding-left: 50px;
  padding-top: 12px;
  padding-bottom: 10px;
  padding-right: 0px;
  color: #f9bf0f;
}

#headsearch{
  background: url('media/home.jpg') no-repeat 0 50%; 
  background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
  padding: 24px 0;
  margin-top: -24px;
  margin-bottom:0px;
}

.headsearch{
  padding: 0 24px;
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
  text-shadow: 0px 1px 2px #000000;
}

.search{
  padding: 0 24px;
  margin: 0 auto;
  max-width: 607px;
  text-align: center;
}

.headsearch h1{
  color:white;
  font-size: 20px;
  text-transform: uppercase;
  text-shadow: 0px 1px 2px #000000;
}

.headsearch p{
  font-size: 15px;
  margin-bottom: 25px;
  color: white;
}

.headsearch input{
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  border: 0;
  border-radius: 3px;
  vertical-align: middle;
}

.headsearch input[type='text']{
  text-align: center;
  margin-bottom: 8px;
  padding: 15px 10px 15px 20px;
  width: calc(100% - 30px);
  color: #a1aab9;
}

.headsearch input[type='submit']{
  background-color: #f9bf0f;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  -webkit-appearance: none;
}

.buttonSearch {
  background-color: #f9bf0f;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  -webkit-appearance: none;
}

.headsearch ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #98aab8;
}

.headsearch :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #98aab8;
    opacity:  1;
}

.headsearch ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #98aab8;
    opacity:  1;
}

.headsearch :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #98aab8;
}

.headsearch a{
  color: white;
  text-decoration: none;
}

.headsearch a:hover{
  text-decoration: underline;
}

.footer{
  padding: 24px;
  margin-top: 60px;
}

.infoSearch {
	font-family: "Courier New";
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top: 0px; 
	margin-bottom: 0;
}

td {font-size:1em;}
.smallfont {font-size:0.9em;}
.fondcolor {background-color:white;}

.sunrise {
	display: block;
	margin-top: 8px;
	padding-bottom: 40px;
	padding-left: 36px;
	font-size: 12px;
	background-size: 24px 17px;
	background: url('sunrise.svg') no-repeat 6px 0;}

#map { 
	/* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
	height:300px;
}

.ui-autocomplete-loading {
	/* https://icon-library.com/icon/waiting-icon-gif-5.html */
	background: white url('media/waiting-icon-50.gif') right center no-repeat;
}

.ui-autocomplete{
	max-height: 200px;	
	width: 500px;
	border:solid 5px black;
	overflow-y: auto;
	overflow-x: hidden;

}

/* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall */
* html .ui-autocomplete{
	height: 100px;
}

input[type="text"]{
	width:500px;
}

.ui-menu-item {
	font-size:1.3em;
	padding:5px;
}

#inputString{
	background-color:white;
}

 /* Largeur plus de 440 px */
@media only screen and (min-width: 440px) {

  #header {
    padding: 0;
  }

  .header {
    position: relative;
  }

  .headsearch input{
    font-size: 20px;
  }

  .headsearch input[type='text']{
    padding: 11px 10px 12px 20px;
    text-align: left;
    width: 60%;
    max-width: 400px;
  }

  .headsearch input[type='submit']{
    background: #f9bf0f url('media/search.gif') no-repeat 26px 20px;
    background-size: 12px 12px;
    text-align: left;
    margin-left: 2px;
    width: auto;
    padding: 16px 28px 16px 50px;
    position: relative;
    top: -4px;
  }
}


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

  #headsearch{
    padding: 55px 0;
	margin-bottom:30px;
  }
  
  .headsearch h1{
    font-size: 22px;
  }

}

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

  #headsearch{
    padding: 55px 0;
	margin-bottom:0;
  }
  
  .headsearch h1{
    font-size: 30px;
  }
}

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

  .footer {
    padding: 64px 24px 48px 24px;
  }

  #headsearch{
    padding: 110px 0;
	margin-bottom:0;
  }
  
  .headsearch h1{
    font-size: 35px;
  }
  
  .headsearch p{
    font-size: 20px;
    margin-bottom: 20px;
    color: white;
  }
}

@media only screen and (max-width: 480px) {
  #logo {
    font-size: 20px;
    display: inline-block;
    background: url('media/sunset.svg') 0 8px no-repeat;
    background-size: 40px 30px;
  }

  h1, h2, h3, h4  {
    text-align: center;
  }
}