/* ---- reset ---- */ 
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ 
#particles-js{ 
	position:absolute; 
	width: 100%; 
	height: 100%; 
	background-color: #ffffff; 
	background-image: url(""); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: 50% 50%; 
} 
/* ---- stats.js ---- */ 
.count-particles{ 
	background: #000000; 
	position: absolute; 
	top: 48px; 
	left: 0; 
	width: 80px; 
	color: #13E8E9; 
	font-size: .8em; 
	text-align: left; 
	text-indent: 4px; 
	line-height: 14px; 
	padding-bottom: 2px; 
	font-family: Helvetica, Arial, sans-serif; font-weight: bold; 
} 
.js-count-particles{ 
	font-size: 1.1em; 
} 
#stats, .count-particles{ 
	-webkit-user-select: none; 
	margin-top: 5px; 
	margin-left: 5px; 
} 
#stats{ 
	border-radius: 3px 3px 0 0; 
	overflow: hidden; 
} 
.count-particles{ 
	border-radius: 0 0 3px 3px; 
}

body,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #000000;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    /*background-image: url('../images/BG2.jpg');*/
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("../images/bg1.jpg") !important;
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("../images/bg4.jpg");
    min-height: 400px;
}

.w3-wide {letter-spacing: 4px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
.w3-top{
 color:#000000; /* Color Font Nav Bar */
}

.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

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

/* Create three equal columns that floats next to each other */
.column {
    float:left;
    width: 100%;
    display: none; /* Hide columns by default */
    margin: auto;
}

@media (min-width:601px){
.column{width:50%}
}
@media (min-width:800px){
.column{width:33.33333%}
}


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

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

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #8be388;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #64da60;
  color: white;
}

#myBtnContainer{

	width: 100%;
	margin-bottom: 25px;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(50, 193, 45);
  border-radius: 0px;
  padding: 18px 36px;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #32c12d;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
  margin: auto; 
  width: 50px; 
  text-align: center; 
  margin-top: 25px;
  box-sizing: initial;
}

.slide_left:hover {
  box-shadow: inset 0 0 0 50px #32c12d;
}

.swg{
	vertical-align: middle;
}

.content img {
  width: auto; display: block; margin: auto; max-height: 200px; box-sizing: initial;
}

.abcd{
  height: auto; 
  width: 90%;
  margin: auto;
}
#typewriter{
  width: 50%;
  margin: auto;
  text-align: center;
}

#logo_nl{
  width:35vw; 
  max-width: 25%; 
  display : block ;
  margin: auto;
}
#titre_nom{
  text-transform: uppercase; font-weight: 100; display : block ;margin: auto; text-align: center;  
}
@media (max-width:450px){
#titre_nom{font-size: 8vw;}
}

.btn_dl{
  min-width: 150px;
  font-size: 1.5em;
}
#dl{
  width: 75%;
  margin: auto;
}
.comp{
  padding: 0px 25px 15px 25px;
  margin: 15px 0px 15px 0px;
}