@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

body
{
background-color: #404040;
}

*
{
	font-family: "Roboto", sans-serif;
    color: white;
	vertical-align: baseline;
}

#global
{
	display: flex;
	margin:auto;
	flex-direction: column;
    align-items: center;
    /*border: 1px solid #760001;*/
}

#header
{
	width:920px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-end;
	margin:auto;
	border-bottom: 2px solid white;
	margin: 50px 0px 0 0px;
}

h1
{
  font-size: 3em;
  /*border: 1px solid #760001;*/
  margin: 0px 0px 0 0px;
  bottom:0px;
  width:50%;
  /* -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;*/
  /*border-bottom: 2px solid white;*/
}

h2
{
  font-size: 2em;
  font-variant: small-caps;
  text-align: center;
  /*border: 1px solid #760001;*/
  margin: 10px 0 10px 0;
  padding: 0 0 0 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h3
{
  font-size: 1.25em;
  font-variant: small-caps;
  text-align: left;
  /*border: 1px solid #760001;*/
  margin: 0 0 0 0;
  padding: 10px 0 0 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h4
{
  font-size: 1em;
  font-variant: small-caps;
  text-align: left;
  /*border: 1px solid #760001;*/
  margin: 0 0 0 0;
  padding: 10px 0 0 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

ul
{
  font-size: 0.75em;
  text-align: left;
  list-style-position: inside;
  list-style-type: none;
  /*list-style-type: none;*/
  /*border: 1px solid #760001;*/
  margin: 0 0 0 0;
  padding: 0px 0 0px 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a{
  text-decoration: none;
  font-style: normal;
}

a:hover
{
/*  font-style: normal;	*/
  color: #FF7000;
  font-weight: bold;
  text-shadow: 0px 0px #404040;
  padding: 0px 2px 0px 2px;
  border-radius: 2px;
  background-color:#404040;
}

/* icons */

.icona
{
	font-family: FontAwesome;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	font-size: 1.25em;
	text-decoration: none;
	font-style: normal;
	font-weight: 100;
}
.icona > .label {
			display: none;
		}

.icons
{
	/*border: 1px solid #760001;*/
	font-variant: small-caps;
	text-align: right;
}

ul.icons
{
	width:50%;
	list-style-type: none;
	list-style-position: outside;
	font-size: 1.25em;
	font-weight: normal;
	/*border: 1px solid #760001;*/
	/*border-bottom: 2px solid white;*/
	margin: 0px 0 0px 0;
	/*margin: 0 0px 0 0px;*/
	padding: 0px 0 5px 0;
}

ul.icons li {
		  display: inline-block;
			padding: 0 0.2em 0 0;
		}



#categories
{
	width:920px;
	display: flex;
	flex-direction:row;
	margin:auto;
	/*margin: 0 50px 0 50px;*/
}

#divers
{
	width:920px;
	display: flex;
	flex-direction:row;
	margin:auto;
	/*margin: 0 50px 0 50px;*/
}

#records 
{
	text-align: center;
	width: 300px;
	background-color: #606060;
	/*border-radius: 20px 20px 0 0;*/
	margin: 10px 10px 0px 0px;
}

#mixpodcast
{
	width: 300px;
	/*border-radius: 20px 20px 0px 0;*/
	background-color: #606060;
	margin: 10px 10px 10px 0;
}

#others
{
	width: 300px;
	border-radius: 0px 0px 0px 0;
	background-color: #606060;
	display: flex;
	flex-direction:column;
	/*border-radius: 20px 20px 0px 0;*/
	margin: 10px 0px 10px 0;
}

#tools
{
	height:100%;
	background-color: #808080;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#footer{
  width: 920px;
  margin: 0px 0px 0 0px;
  /*border: 1px solid #760001;*/
}


#footer p
{
  display:none;
  text-align: left;
  color: #505050;
  font-size: 0.6em ;

}

@media all and (max-width: 920px)
{
    /* Vos règles CSS pour les mobiles ici */
#header
{
	width:300px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	margin:auto;
	border-bottom: 2px solid white;
	margin: 50px 0px 0 0px;
}


.icons
{
	text-align: left;
}

}