* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  padding: 20px;
  margin: 0;
  font-family: Arial Narrow,Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size:18px;
}

a {
	font-weight:bold;
	color:#5c5c3d;
	font-style:normal;
	text-decoration: none;
	height:40px;
	margin-top:4px;
	margin-right:10px;
}

a:hover {
  color: #bbbb77;
  text-decoration: underline;
}

a:active {
  color: #bbbb77;
  text-decoration: underline;
}

br {
 clear:both;
}

/* Center website */
.main {
  padding:8px;
  background-color: #fff;
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
  color:#999966;
  display:inline;
}
p {
	line-height:1.2;
}

.row {
  background-color:#fff;
  margin:2px -16px;
  border-bottom:1px solid #000;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 0px 10px 0px 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
	border-bottom:1px solid #000;
  }
  .row {
	border:none;
  }
}

#searchSpan {
  float:left;
  display: block;
  background-color: #fff;  
  color: #000000;
  padding: 6.5px 4px;
  font-size: 17px;
}
#search {
  padding-left:10px;
  width:200px;
  float:left;
  border-radius:5px;
  border:1px solid #333333;
  color: #000000;
  font-size: 20px;
}

#lgBtn {
	cursor:pointer;
}

#topBtn {
	display:none;
	cursor:pointer;
}

.navbar {
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 984px;
}

.navbar a {
	font-weight:bold;
	color:#5c5c3d;
	font-style:normal;
  float: left;
  display: block;
  padding: 8px 10px;
  text-decoration: none;
}
.navbar a:not(.separator) {
  height:40px;
  margin-top:4px;
  margin-right:4px;
}

.navbar a:hover {
  color: #bbbb77;
}

.navbar a:active {
  color: #bbbb77;
}

.navbar .icon {
  display: none;
}

.logo {
	float:left;
	cursor:pointer;
}


.sn{
	float:left;
	padding-top:13px;
	cursor:pointer;
}
.aw_icons{
	color:#999966;
}
.sn_icons{
	color:#b32d00;
}
.separator{
	height:54px;
	background-color:#fff;
	pointer-events:none;
	cursor:default;
}

.bottombar {
 overflow: hidden;
  background-color: #fff;  
  opacity: 0.9;
  position: fixed;
  width: 984px;
   bottom: 0;
}

.title {
  padding-top:150px;
  background-color: red;  
}

.famille {
	cursor:pointer;
}

.annee{
	display:inline;
	color:#999966;
}

.nom{
	font-weight:bold;
	color:#5c5c3d;
	margin: 0.2em 0
}
.pays{
	color:#5c5c3d;
}

.event{
	color:#5c5c3d;
	font-weight:normal;
}
.photos{
	cursor:pointer;
	float:left;
}

.index_histo:link {
	display: inline-block;
	background-color: #bbbb77;  
    text-decoration:none;
    color: #484824;
	padding:8px;
	margin-bottom:2px;
	border-radius:7px;
    font-size: 18px;
}

.index_histo:visited {
    text-decoration:none;
    color: #484824;
	margin-bottom:2px;
}
.index_histo:hover {
    background-color: #77773c;
	color: white;
	margin-bottom:2px;
}


@media screen and (max-width: 850px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 850px) {
  .navbar.responsive a:not(.icon) {
	width:200px;
    float: none;
    display: block;
    text-align: left;
  }
  .icon {
    float: left;
  }

}