/* GENERAL CSS */
*{
	background-color: #000000 !important; 
}

body { background: #0f0f0f; }

.th-style{ width:500px; }

/* Centrage du site */
.main {
  max-width: 1000px;
  margin: auto;
}

.paragraphs{
	color:#FFFFFF !important;	
	font-size:16px;
}

#title-home{
	color:#D8D8D8;
	font-style: italic;
	font-weight:bold;
	font-size:45px;
	margin-bottom:20px;
	font-family: monospace;	
}

#title-contact{
	color:#D8D8D8;
	font-style: italic;
	font-weight:bold;
	font-size:45px;
	margin-bottom:20px;
	font-family: monospace;	
	position: absolute; 
    top: 80%; left: 50%;
    transform: translate(-50%, -50%);
}

#title-project{
	color:#FFFFFF !important;
	position:relative;
	font-style: italic;
	font-weight:bold;
	margin-bottom:25px;
}

.width_p{ 
	width:1500px;
	font-size:20px;
	color:#FFFFFF !important;	
}

.width_p a{ 	text-decoration:none !important; }

/* Header Styles */
header {
   position: relative;
   height: 300px;
   min-height: 650px;
   width: 100%;
   color:#FFFFFF;
   background: #161415 url(../images/header-background.jpg) no-repeat top center;
   background-size: cover !important;
	-webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

.h{
	margin-top: 25px !important;
	margin-bottom: 25px; 
}

.hr-1{
  background-color: #FF0000 !important;
  margin-bottom: 50px; 
}

.hr-2{
  background-color: #00BFFF !important;
  margin-bottom: 60px; 
}

.hr-3{
  background-color: #00BFFF !important;   
}

/* Menu du site */
#nav-wrap {
   height:55px;
   background-color:#000000;
   opacity:0.98;
   font: 12px 'opensans-bold', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: #333; }

ul#nav {
   min-height: 48px;
   width: auto;
   text-align: center;
}

ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Liens */
ul#nav li a {
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }

ul#nav li.current a { color: #F7FE2E; }

#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;	
}

#bcrumb a{ 	
	color:white !important;
	font-size:20px;
	font-family:Impact, fantasy;
	text-decoration:none;
}

#bcrumb a:hover {
	color: #F7FE2E !important;
}

#bcrumb a:focus {
	color: #FF4000 !important;
}

/* Page Home */
#home-paragraph{
	color:#D8D8D8;
	font-size:18px;
}

/* Page A propos */
#about {
   background: #2B2B2B;
   padding-top: 85px;
   padding-bottom: 66px;
   overflow: hidden;   
}

#about a, #about a:visited  { color: #fff; }

#about a:hover, #about a:focus { color: #11ABB0; }

#about h2 {
   font: 22px/30px 'opensans-bold', sans-serif;
   color: #fff;
   margin-bottom: 12px;
}

#about p {
   line-height: 30px;
   color: #7A7A7A;
}

#about .profile-pic {
   position: relative;
   margin-left:10px;
   width: 270px !important;
   height: 230px;
   border-radius: 100%;
}

#about .contact-details { width: 41.66667%; }

#about .download {
   width: 58.33333%;
   padding-top: 6px;
}

#about .main-col { padding-right: 5%; }

#about .download .button {
   margin-top: 6px;
   background: #444;
}

#about .download .button:hover {
   background: #fff;
   color: #2B2B2B;
}

#about .download .button i {
   margin-right: 15px;
   font-size: 20px;
}

#about {
	height:3300px !important;
}

#pp{
	margin-top:60px !important;
	margin-bottom:650px !important;
}

#musical-projects{
	margin-top:80px !important;
	text-align:center;
	width:850px !important;
}

#profil{
	margin-top: 70px !important;
	height:90px;
}

.popup{ margin-top:20px !important; }

.popover a{ text-decoration: none !important; }

.paragraphs{
	color:white;
	width:1200px;
	font-weight:bold;
}

.links_musical{
	margin-left:1050px !important;
	color: #FF4000 !important;
	font-style: italic;
	float:left !important;
	font-weight:bold;
	text-decoration: none !important;
}

.mprojects{
	width:2300px !important;
}

.popup{
	margin-left:20px !important;
	font-size:25px !important;
	text-decoration: none !important;
}

#musical_projects{ 
	width:150px;
	height:100px;
}

/* Page sites */
.sites{ margin-bottom: 65px !important; }

/* Page Albums */
h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Ajout d'un remplissage entre chaque colonne. */
.row,
.row > .column {
  padding: 8px;
}

/* Creation de 4 colonnes égales qui flottent l'une à côté de l'autre. */
.column {
  float: left;
  width: 25%;
}

/* Effacer les flotteurs après les lignes. */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

.albums-titles{ 
	margin-top: 15px;
	color: #FFFFFF; 
	text-align: center;
}

.albums-texts{
	font-size: 15px; 
	text-align:center;
}

.albums-texts-center{ 
	font-size: 15px; 
	text-align: center;
}

#musical_projects a{
	font-size:18px;
}

/* Page Contact */
#message-input{ font-size:18px; }

label{ color: #FFFFFF !important; }

form {
  border: thin solid red;
  padding: 2rem;
  margin-top:45px !important;
  margin: 2rem;
  display: flex;
  height:900px;
}

#fields{ 
	margin-top:80px; 
	margin-left:auto;
	margin-right:auto;
}

.fields-form{
	height:70px;
	width:460px;
	border:2px solid #FAFAFA;
	border-radius:3px;
	margin-bottom:20px;
	color:#FAFAFA !important;
	text-align:center;
}

input::placeholder{
	color:#FFFFFF !important;
	font-style:italic;
	text-align:center;
	font-family: monospace;	
	font-size:18px !important;
}

textarea::placeholder {
	color:#FFFFFF !important;
	font-style:italic;
	top:-250px !important;
	font-family: monospace;	
	font-size:20px !important;
}

.formtext {
  position: relative;
  top: 10px;
  margin-bottom:125px !important;
  text-align:center;
  padding: 7px;
  height:45px;
  width: 125px;
  color: #FF0000;
}

#text{
	margin: 0 auto;
    width: 1200px; 
	margin-top:20px;
	font-family:monospace;
}

.p-texts{
	font-family:monospace;
}

/* Footer */
#footer-link{
	color: #FF4000;
	text-decoration: none;
}

footer{ 
	margin-top: 85px !important;
    margin-right:auto;
	margin-left:auto;
	box-shadow: 5px 5px 5px #01A9DB;
	text-shadow: 3.2px 3.2px 5px #58D3F7;
	border:2px double #2E9AFE;
	border-radius:5px;
	width:1300px;
	margin-bottom:25px !important;	
}

a:hover {
	color: #F7FE2E !important;
    text-decoration:none !important; 
}

#footer-paragraph{
	color:#D8D8D8;
	margin-top:15px !important;
	font-size:18px;
}

footer {
   padding-top: 48px;
   margin-bottom: 48px;
   color: #303030;
   font-size: 14px;
   text-align: center;
   position: relative;
}

footer a, footer a:visited { color: #525252; }
footer a:hover, footer a:focus { color: #fff; }

/* Copyright */
footer .copyright {
    margin: 0;
	color:white;
    padding: 0;
}
 
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}

.ie footer .copyright li {
   display: inline;
}

footer .copyright li:before {
    content: "\2022";
    padding-left: 10px;
    padding-right: 10px;
    color: #095153;
}

footer .copyright  li:first-child:before {
    display: none;
}

/* Responsive */

/* Effacer les flotteurs après les lignes. */

/* Layout Responsive - crée une disposition en 2 colonnes au lieu de 4 colonnes. */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Layout Responsive - fait que les 2 colonnes se superposent au lieu d'être côte à côte  */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/* Bouton pour remonter en haut du site */
#topBtn {
  display: none; 
  position: fixed; 
  bottom: 20px;
  right: 30px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  color: white;
  cursor: pointer; 
  padding: 15px; 
  border-radius: 10px; 
  font-size: 18px; 
  height:65px;
  width:65px;
}