@charset "UTF-8";
/* ******** Var */
* {
  box-sizing: border-box; }

body {
  background-image: url(../img/fond.png); }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.sizingMax {
  max-width: 1100px;
  margin: 0 auto; }

/* MIXIN */
/*
p: 18px nav : 20px logo et h1 : 40px 
h2 : 35px h3 des compétences : 30px icone : 25px input et textarea : 16px
*/
h1 {
  color: #808080;
  font-size: 40px;
  margin: 0; }

h2 {
  font-size: 35px;
  text-align: center;
  color: #F8315A;
  border-bottom: 1px solid #E9EAEC;
  line-height: 2em; }

h3 {
  color: #F8315A; }

p {
  font-size: 18px;
  color: #808080; }

a {
  text-decoration: none;
  color: #808080;
  font-size: 20px; }

/****** HEADER *********/
header {
  padding: 70px; }

header,
header > div:nth-of-type(1) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-around; }

.logo {
  width: 40px; }

nav {
  width: 30%;
  text-align: center;
  display: flex;
  justify-content: space-between; }

/***** ACCUEIL ******/
#accueil {
  background-image: url(../img/bg_header.png);
  background-size: cover;
  line-height: 2em;
  padding: 100px; }

#accueil h2 {
  color: white;
  text-align: center;
  border: none; }

#accueil p {
  color: white;
  text-align: center; }

.buttonDiscovert {
  width: 10rem;
  background: #F8315A;
  border-radius: 5px;
  margin: 0 auto;
  color: white;
  text-align: center; }

/***** SERVICES ******/
h3 .fas {
  color: #808080;
  width: 3em;
  line-height: 3em;
  background: rgba(233, 234, 236, 0.3);
  border: 1px solid #E9EAEC;
  border-radius: 100%;
  margin: 30px; }

/***** COMPETENCES ******/
#skills > div,
#services > div {
  display: flex;
  justify-content: space-around;
  text-align: center; }

#skills span {
  font-size: 30px; }

/***** REALISATION *****/
#realisation > div:nth-of-type(odd) > img {
  width: 50%;
  float: right; }

#realisation > div:nth-of-type(even) > img {
  width: 50%;
  float: left; }

#realisation h3 {
  margin-top: 40px; }

#realisation a {
  color: #F8315A;
  margin-left: 10px;
  font-weight: bold; }

/*****  FORM *****/
form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }

form p {
  border: 1px solid #E9EAEC;
  border-radius: 50px;
  margin: 10px;
  padding: 10px;
  line-height: 2em; }

input {
  border: none;
  background: none;
  margin-left: 50px;
  line-height: 20px; }

.typeText {
  background: url("../img/bg_form_name.svg");
  background-position: 10px;
  background-size: 2.5em;
  background-repeat: no-repeat;
  width: 46%; }

.typeEmail {
  background: url("../img/bg_form_mail.svg");
  width: 46%;
  background-position: 10px;
  background-size: 2.5em;
  background-repeat: no-repeat; }

.typeTextarea {
  background: url("../img/bg_form_message.svg");
  background-position: 10px;
  background-size: 2.5em;
  background-repeat: no-repeat;
  width: 100%; }

input[type="submit"],
input[type="reset"] {
  width: 100px;
  padding: 10px;
  margin: 15px;
  color: #fff; }

input[type="submit"] {
  background: #F8315A; }

input[type="reset"] {
  background: #808080; }

@media screen and (min-width: 1200px) {
  /****** ANIMATION ******/
  .divLogo:hover .logo {
    width: 50px;
    transition: width 1s; }

  .divLogo:hover h1 {
    color: #F8315A;
    transition: color 1s; }

  nav a:hover {
    color: #F8315A;
    transform: translateY(20px);
    transition: all 1s; }

  @keyframes animed {
    0% {
      transform: translateY(20px); }
    50% {
      transform: translateY(0); }
    100% {
      transform: translateY(20px); } }
  #services h3:hover i {
    animation-name: animed;
    animation-duration: 1s;
    animation-iteration-count: infinite; } }
@media screen and (max-width: 960px) {
  #skills > div,
  #services > div {
    display: flex;
    flex-direction: column; }

  .sizingMax {
    padding: 20px; }

  #accueil {
    padding: 10px; }

  header {
    display: flex;
    flex-direction: column;
    align-items: center; }

  nav {
    width: 75%;
    margin: 10px; } }
@media screen and (max-width: 480px) {
  #realisation > div:nth-child(odd) > img,
  #realisation > div:nth-child(even) > img {
    float: none;
    width: 100%; }

  .typeText,
  .typeEmail {
    width: 100%; } }

/*# sourceMappingURL=style.css.map */