*{
	color: #dadada;
	font-family: 'exoregular';
	font-size: 20px;
}
html {
  scroll-behavior: smooth;
}
body {
	background-color: #000000;
}
.titre-site {
	margin-top: -85px;
  	height : 100px;
}
h2 {
	text-align: center;
	padding-bottom: 50px;
    color: #ffffff;
}
.left{
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 0;
}
h3, h4{
	font-size: 1em;
}
strong{
	color: white;
    font-family: 'exobold';
    font-size: 1em;
}
.bg-grey,
.bg-works {
	background-color: #101010;
}
.bg-works {
	padding-bottom: 70px;
}
.blue {
	color: #2eb4d2;
}
.italic{
	font-family: 'exoitalic';
}
.thin-italic{
	font-family: 'exothin_italic';
}
.uppercase {
	text-transform: uppercase;
}
.inline-block {
	display: inline-block;
	width: 100%;
}
.justify{
	text-align: justify;
}
.merci {
	font-size: 0.6rem;
}

/* -----   1ERE SECTION   ----- */

/* MENU */
.wrap-1 {
    position: relative;
    width: 100%;
    height: 90vh;
}
.wrap-menu {
	margin-top: 50px;
}



#intro a {
margin-right: 25px;
}
.btn {
  position: relative;
  display: inline-block;
  letter-spacing: 1.2px;
  padding: 10px 20px;
  font-weight: 800;
  font-family: 'exoregular';
  border-radius: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
}
.btn:focus {
  outline: none;
}
.btn--primary {
  color: black;
}
.btn--border {
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}
.btn--animated {
  transition-property: color;
  transition-duration: 0.5s;
}
.btn--animated.btn--border.btn--primary {
  border: 2px solid #2eb4d2;
  background: #2eb4d2;
  margin-top: 25px;
}
.btn--animated:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.btn--animated:hover {
  color: white;
}
.btn--animated:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

.cover-container {
  	max-width: 42em;
}
.masthead {
  	margin-top: 50px;
}
.masthead-brand {
  	margin-bottom: 0;
}
.nav-masthead {
    float: right;
  	margin-top: 20px;
}
.nav-masthead .nav-link {
	padding: .25rem 0;
	font-size: 0.7em;
	font-weight: 700;
	color: #dadada;
	background-color: transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  	color: #2eb4d2;
}
.nav-masthead .nav-link + .nav-link {
  	margin-left: 3rem;
}
.nav-masthead .active {
  	color: #2eb4d2;
}
.cover {
  	padding: 0 1.5rem;
}
.cover .btn-lg {
  	padding: .75rem 1.25rem;
  	font-weight: 700;
}

/* BACKGROUND */
.photo {
	background-image: url("/wp-content/themes/wilfriedlanglois/images/photo-final.png");
	background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
	height: 565px;
}
.presentation {
	font-size: 1em;
}
#intro {
    width: 947px;
    margin: 0 auto;
}

/* -----   2EME SECTION   ----- */

/* INTTRODUCTION */
.wrap-2 {
	padding-top: 150px;
	padding-bottom: 150px;
	background-image: url("/wp-content/themes/wilfriedlanglois/images/logo_fond.png");
	background-repeat: no-repeat;
	background-position: right;
}
/*.wrap-2 p {
	font-size: 1.2em;
}*/
#second-p{
    margin-top: 35px;
}
.line {
    width: 50px;
    height: 10px;
    background: #2eb4d2;
    margin-bottom: 100px;
}

/* SERVICES */
.wrap-3 {
    padding-bottom: 150px;
}
.icons-services{
    width: 32px;
    height: 32px;
    margin-right: 20px;
    float: left;
}
.services-title{
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 3px;
}
.services-p{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

/* -----   3EME SECTION   ----- */

/* WORK */
.wrap-4{
    padding-top: 150px;
}



.wrap-5{
	padding-top: 85px;
}








/* -----   5EME SECTION   ----- */

/* FORMULAIRE DE CONTACT */

.wrap-6 {
    padding-bottom: 50px;
    background-image: url(/wp-content/themes/wilfriedlanglois/images/logo_fond.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 300px;
}
#contact{
    padding-top: 150px;
}
.form-control {
    background-color: transparent;
    border-radius: 0;
    border: 2px solid #dadada;
    caret-color: #2eb4d2;
    color: #dadada;
    -webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.form-control:focus {
	border: 2px solid #2eb4d2;
    background-color: transparent;
    box-shadow: none;
}
textarea {
    background-color: transparent;
    padding-top: 7px;
    padding-left: 15px;
    border: 2px solid #dadada;
    caret-color: #2eb4d2;
    -webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
textarea:focus {
    background-color: transparent;
    border: 2px solid #2eb4d2;
}
.submit {
    color: black;
}
.submit:hover {
	color: white;
}
.submit-form {
	text-align: center;
}
.contact-form {
	margin-left: auto;
    margin-right: auto;
}



/* -----   6EME SECTION   ----- */

/* FOOTER */
.container-footer {
	padding-top: 25px;
	background-color: black;
}
.container-footer h3 {
	text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}
.contact-form {
	margin-top: 10px;
}
.wrap-7 {
	text-align: center;
}
.wrap-7 ul {
    list-style-type: none;
    display: inline-block;
    margin-top: 5px;
	padding-left : 0;
}
.wrap-7 ul li {
	font-size: 1rem;
	display: inline-block;
}
.wrap-7 ul li a {
	color: #dadada;
	margin: 15px;
	font-size: 0.6em;
    font-weight: 600;
}
.wrap-7 ul li a:hover {
	color: #40c0e0;
	text-decoration: none;
}
#message-form p {
	text-align: center;
}
#adresse-mail{
    font-size: 0.7em;
    color: #dadada;
    padding-bottom: 20px;
}
#adresse-mail:hover, #conditions a:hover{
    color: white;
    text-decoration: none;
}
#conditions {
	margin-top: 10px;
}
#conditions a{
	font-size: 0.5em;
}


/* -----   Conditions générales de vente   ----- */

.container-conditions{
	margin-top: 50px;
}
.wrap-conditions{
  	margin-top: 100px;
  	margin-bottom: 50px;
  	max-width: 1000px!important;
}
#conditions-title{
  	margin-top: 0;
  	text-align: center;
    max-width: 100%;
}
.wrap-conditions h2 {
  	max-width: 100%;
    text-align: left;
  	margin-top: 100px;
  	padding-bottom: 20px;
  	margin-bottom: 50px;
}
.wrap-conditions h2::after{
  	content: "";
  	position: absolute;
    border-bottom: 10px solid #2eb4d2;
  	width: 50px;
    left: 15px;
    margin-top: 60px;
}
.wrap-conditions h3 {
	color: #ffffff;
  	font-weight: 600;
  	margin-top: 50px;
  	margin-bottom: 25px;
  	font-family: 'exobold';
}
.wrap-conditions p {
  	max-width: 100%!important;
  	margin-bottom: 20px!important;
}
.wrap-conditions hn {
	margin-top: 20px;
}

			/* -------------------------- */
			/* -----   RESPONSIVE   ----- */
			/* -------------------------- */

/* Extra small devices (portrait phones, less than 350px) */
@media (max-width: 349.98px) {
  .wrap-1 {
    height: 100%;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media(max-width: 575.98px) {

/* -----   1ERE SECTION   ----- */
  

  .nav-masthead .nav-link + .nav-link {
  	margin-left: 0.6rem;
}
  .nav-masthead .nav-link {
    font-size: 0.6em;
}
  

    #intro {
    width: auto;
}
.photo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 320px;
    width: 70vw;
}
    h1{
        font-size: 1.2em;
		height: 50px;
    }
  	h2{
		font-size: 1.5rem;
  
  }
    .btn--animated.btn--border.btn--primary {
    margin-bottom: 25px;
}
    .btn {
    padding: 15px 20px;
}
    .btn {
    font-size: 0.6rem;
}
    .btn-intro {
    margin-right: 5px;
}
    .inline-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
/* MENU */
    .wrap-menu {
    margin-top: 15px;
}
#brand {
	text-align: center;
    padding-bottom: 25px;
	display: block;
}
.masthead-brand {
    float: none;
    width: 15vw;
}
.nav-masthead {
    float: none;
    text-align: center;
	margin-top: 0;
  }

/* -----   2EME SECTION   ----- */

/* INTRODUCTION */
.wrap-2 {
	background-image: none;
}

/* SKILLS */

.wrap-3 ul li {
	font-size: 1rem;
}
#mail-skills {
	font-size: 0.7rem;
}
  .services-title{
  	font-size: 1rem;
  }
    .services-p {
    padding-bottom: 40px;
    width: auto;
}
    .wrap-3 {
    padding-bottom: 70px;
}

/* -----   FORMULAIRE  ----- */

	/* CONTACT */
.wrap-6 h2 {
	font-size: 1.5rem;
}
.wrap-6 {
    background-image: none;
}
    
/* -----   FOOTER   ----- */

.contact-form {
    width: 90%;
}
textarea {
    width: 100%;
}
.wrap-7 ul {
    margin-top: 5px;
    padding-left: 0;
}
.wrap-7 ul li a {
    margin: 15px;
}
  

/* -----   Conditions générales de vente   ----- */
  
  .wrap-conditions h1{
  	font-size: 1.3rem;
  }
  .wrap-conditions h2 {
  	font-size: 1rem;
  }
  .wrap-conditions h2::after {
    border-bottom: 5px solid #2eb4d2;
    margin-top: 35px;
}
  
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

/* -----   1ERE SECTION   ----- */
    
	/* MENU */
.masthead-brand {
    float: none;
    margin-left: 0;
}
#brand{
	text-align: center;
}
.nav-masthead {
    float: none;
}
  .masthead-brand {
    float: none;
    width: 15vw;
}

/* -----   2EME SECTION   ----- */

/* INTRODUCTION */
.wrap-2 {
	background-image: none;
}

#intro {
    width: auto;
}
    .photo {
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    .inline-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    h1 {
        font-size: 1.4em;
    }
    .btn--animated.btn--border.btn--primary {
    margin-right: 25px;
}
    .wrap-2 {
    background-position: center;
    }
        .services-p {
    padding-bottom: 40px;
}
    .wrap-3 {
    padding-bottom: 70px;
}
    
/* -----   FOOTER  ----- */

.wrap-7 ul {
    padding-left: 0;
}
.contact-form {
    width: 90%;
}
textarea {
    width: 100%;
}
.wrap-7 ul li a {
    margin: 30px;
}
  
  
  /* -----   Conditions générales de vente   ----- */
  
  .wrap-conditions h1{
  	font-size: 1.3rem;
  }
  .wrap-conditions h2 {
  	font-size: 1rem;
  }
  .wrap-conditions h2::after {
    border-bottom: 5px solid #2eb4d2;
    margin-top: 35px;
}
  
}


@media screen and (min-width: 800px){ 
        .br-responsive { display: none; } 
    }


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

/* -----   2EME SECTION   ----- */

    #intro {
    width: auto;
}
    .photo {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    .inline-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    h1 {
        font-size: 2em;
    }
    .wrap-2 {
    background-position: center;
}
/* SKILLS*/

.wrap-3 ul li,
#mail-skills{
	font-size: 1rem;
}

.icons-services {
    max-width: 35%;
}
    .wrap-3 {
    padding-bottom: 70px;
}
    .contact-form {
    width: 90%;
}
  
  
    /* -----   Conditions générales de vente   ----- */
  
  .wrap-conditions h2 {
  	font-size: 1.5rem;
  }
  .wrap-conditions h2::after {
    border-bottom: 10px solid #2eb4d2;
    margin-top: 50px;
}
  
}
  
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 992px) and (max-width: 1100px) {

.services-title {
    font-size: 1.02rem;
}
  
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

/* -----   2EME SECTION   ----- */
    h2 {
        font-size: 1.8em;
    }
/* SKILLS*/
.wrap-3 ul li,
#mail-skills{
	font-size: 0.7rem;
}

.services-p {
    width: auto;
}
#intro {
    padding-left: 15px;
    padding-right: 15px;
    }
.icons-services {
    max-width: 75%;
}
}



/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
}