body {
  padding-top: 50px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

h1 {
  font-family: 'Heebo', sans-serif;
  font-weight: 300;
}

h2{
	font-family: 'Heebo', sans-serif;
	font-weight: 100;
}

p{
	text-align: justify;
}

.margehb40{
	padding: 40px 0px;
}

.page{
	position: relative;
	top:140px;
}

.bigh{
	font-size: 6em;
	margin-bottom: 50px;
}

.bigh3{
	font-size: 3em;
	margin-bottom: 20px;
	font-family: 'Heebo', sans-serif;
	font-weight: 100;
	display: inline-block;
	line-height: 50px;
}

.bigh4{
	font-size: 2em;
	font-family: 'Heebo', sans-serif;
	font-weight: 100;
	display: inline-block;
}

.lead2{
	font-size: 120%;
	font-weight: 300;
}

@media(max-width: 767px) {
.page{
	position: relative;
	top:20px;
}

.bigh{
	font-size: 3em;
	margin-bottom: 50px;
}

.bigh3{
	font-size: 2em;
}

}



.centre{
	text-align: center;
}

.starter-template {
  padding: 40px 15px;
}

#mainNav{
	font-family: 'Source Sans Pro', sans-serif;
}

/* Collapsing Navbar Styles */
.navbar-brand img.affix-top{
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    width : 50px;
    position: relative;
    top : -17px;    
}

.navbar-brand img.affix{
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    width : 50px;
    position: relative;
    top : -17px;
}


@media(max-width: 767px) {
		#mainNav{
			-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
			-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
			-o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
			box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
			filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=2);
		}

}

@media(min-width:768px) {
		.navbar-default {
			background: rgb(0,0,0);
			background: rgba(0,0,0,0.8);	  	
			-webkit-transition: all .35s;
			-moz-transition: all .35s;
			transition: all .35s;
			padding: 15px 0;
			/* Add additional styles here for the UNCOLLAPSED state */
			/*background: rgb(0,0,0);*/
			/*background: rgba(0,0,0,0.5);*/
			background: transparent;
		}
		.navbar-default.affix {
			padding: 0;
			/* Add additional styles here for the COLLAPSED state */
			background: rgb(255, 255, 255);
			background: rgba(255, 255, 255, 1);
			box-shadow: 
		}




		.navbar-default .navbar-nav>li>a {
			color: #545454;
			font-weight: 100;
			font-size : 1em;
			-webkit-transition: all .35s;
			-moz-transition: all .35s;
			transition: all .35s;
		}

		.navbar-default .navbar-nav>li>a:hover {
			color: #b22222;
			border-bottom: 1px solid #808080;
			border-collapse: collapse;
		}


		.navbar-default.affix .navbar-nav>li>a {
			font-size: 1em;/*taille de police quand scroll down (si besoin)*/
		}

		.navbar-default.affix .navbar-nav>li>a:hover {
			color: #b22222;
		}		

		.navbar-default.affix .navbar-nav>li>a:hover {
		border : 0;
		}


		.navbar-brand img.affix-top{
		    -webkit-transition: all 1s;
		    -moz-transition: all 1s;
		    transition: all 1s;
		    width : 197px;
		}

		.navbar-brand img.affix{
		    -webkit-transition: all 1s;
		    -moz-transition: all 1s;
		    transition: all 1s;
		    width : 50px;
		    position: relative;
		    top : -17px;
		}

		.navbar-brand {
		    -webkit-transition: all .35s;
		    -moz-transition: all .35s;
		    transition: all .35s;

		}
	  	.navbar-brand.affix {
	    /* Add additional styles here for the COLLAPSED state */
	    font-size: 2em;
	  	}
}

.navbar-default {
  border : 0;
}



header h1 {
  color: white;
  font-size: 2em;
}


.navbar-default .navbar-brand {
  font-family: 'Galada', cursive;
  color: #fff;
  font-size: 3em;
  padding : 20px 20px;
}




  .navbar-brand {
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	transition: all .35s;
}

.navbar-brand.affix {
	/* Add additional styles here for the COLLAPSED state */
	font-size: 2em;
	  }

#mainNav.affix{
	-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=2);
}




#a_propos{
	padding-top: 50px;
}

.intro1{
	font-size: 4em;
	color: #fff;
	text-shadow: 1px 1px 2px #000000;
}


#top1 , #top2 , #top3 {
  min-height: 100vh;
}

#top1 {
  background: url(../images/28h-min.jpg) center 0 no-repeat fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-top: -50px;
  padding: 35vh 0px;
}

#top2 {
  background: url(../images/keyb-min.jpg) center 0 no-repeat fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;   
}

#top3 {
  background: url(../images/01.jpg) center 0 no-repeat fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;   
}


#bottom{
	background-color: #1d1d1d;
	color: #fff;
	padding : 15px 15px;
}

#bottom i{
	margin-right: 5px;
}

#bottom p{
	font-size: 1.2em;
}

.galada-3{
	font-family: 'Galada', cursive;
	font-size: 2.5em;
}





@media(max-width: 767px) {
		.intro1{
				font-size: 3em;
				text-shadow: 2px 2px 2px #000000;
		}

}

.cadre-gris{
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	padding: 25px 0px;
	display: inline-block;
}

.cadre-gris h3, .cadre-gris p, .cadre-gris i{
	padding : 0px 15px;


}

#bottom>.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/*FORMULAIRE*/
#formulaire{
	max-width: 500px;
	margin: 40px auto 40px auto;
}

.btn-primary:hover{
	background-color: #810000;
	border-color: #810000;	
}


.btn-primary{
	background-color: #b22222;
	border-color: #b22222;
}


/*LISTES*/
ul.liste1 li:before {
    content: "\f00c";
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    margin-left: 1em;
    width: 1.3em;
}

ul.liste1 {
    list-style-position: inside;
    list-style: none;
    padding: 0;
    font-size: 1.1em;
}

ul.liste2 li:before {
    content: "\f00c";
    font-family: FontAwesome;
    color: #b22222;
    display: inline-block;
    margin-left: 1em;
    width: 1.3em;
}

ul.liste2 {
    list-style-position: inside;
    list-style: none;
    padding: 0;
    font-size: 1.1em;
}

#competences i{
	margin-right: 25px;
}

#competences ul{
	margin-bottom: 50px;
}

#team{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 50px;
}

.superhero, .superhero p{
	text-align: center;
}

/*PORTFOLIO*/
.fichesite{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0px 0px 30px 0px;
}

.fichesite h2{
	margin : 0px 0px;	
}


.fichesite img{
-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.6);	
}

.capture{
	margin-bottom: 20px;
	margin-right: 20px;

}

.description{

}