svg {
  fill: red;
}

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-bottom: 10px;
  padding-right: 10px;
  font-size: 30px;


}

.container{
width: 100%;
  transition: width 2s;

}

span{
		font-size: 25px;
		color: black;
		animation: blink 4s linear infinite;
	}

@keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}

a{
text-decoration:none;
color:black;

}


.vid {

  width:100%;
  height: auto;
  padding: 0 11%;
  padding-top: 20px;
  outline: none;

}

.container {
  position: relative;
  /* width: 50%; */
}

/* .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
} */

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.container:hover .image {
  opacity: 0.3;

  /* -webkit-filter: invert(100%);
  filter: grayscale(100%) */
  /* -webkit-filter: grayscale(100%) invert(100%) contrast(100%); */


  /* transform: scale(1.02); */
  animation-name: example;
  animation-duration: 2s;
  -webkit-filter: grayscale(100%) invert(100%) contrast(100%);
}

@keyframes example {
  from {opacity: 1;}
  to {opacity: 0.3;}
  from {-webkit-filter: grayscale(0%) invert(0%) contrast(100%);}
  to {-webkit-filter: grayscale(100%) invert(100%) contrast(100%);}
}

.container:hover .middle {
  opacity: 1;

}

.text {
  /* background-color: #4CAF50; */
  color: black;
  font-size: 20px;
  padding: 16px 32px;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  background-color: WhiteSmoke;
}

.cont{
  position:absolute;
  top:50%;
  left:50%;
transform: translate3d(-50%, -50%, 0);
font-size:35px;
text-align:center;

}

.projecttitle{
  font-size: 35px;
  display: inline-block;
  text-align: left;


margin: 20px 11% 0 11%;


}
.description{
  font-size: 20px;
  display: inline-block;
  /* text-align: left; */

  text-align: justify;
  text-justify: inter-word;


  margin: 20px 11% 20px 11%;

}



.titre {
  /* color: white; */

  font-size: 35px;
  display: inline-block;

  text-align: left;
  padding-top: 30px;
  padding-bottom: 5px;
  padding-left: 11%;
  /* transform: translate(, 0); */
  transition: font-size 2s;
}

.titre:hover, .soustitre:hover {

/* font-size: 40px; */
}

.soustitre {
  transition: font-size 2s;
  font-size: 35px;
  float: right;
  text-align: right;
  display: inline-block;
  padding-top: 30px;
  padding-bottom: 5px;
  padding-right: 11%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Create four equal columns that sits next to each other */
.column1 {
  flex: 39.2%;
  /* max-width: 40%; */
  padding: 0 10px;
  padding-left: 10%;
  /* align-self: flex-end; */
}

.column2 {
  flex: 60.8%;
  /* max-width: 60%; */
  padding: 0 10px;
  padding-right: 10%;
  /* align-self: flex-end; */
}

.column3 {
  display: flex;
  flex-wrap: wrap;
  flex: 60.8%;
  /* max-width: 61.55%; */
  padding: 0 10px;
  padding-left: 10%;
  align-self: flex-end;
  /* padding-bottom: 60px; */
}

.column4 {
  display: flex;
  flex-wrap: wrap;
  flex: 39.2%;
  /* max-width: 38.45%; */
  padding: 0 10px;
  padding-right: 10%;
  align-self: flex-end;
  /* padding-bottom: 60px; */
}

.column5 {
  flex: 39.2%;
  /* max-width: 40%; */
  padding: 0 10px;
  padding-left: 10%;
  /* align-self: flex-end; */
  padding-bottom: 60px
}

.column6 {
  flex: 60.8%;
  /* max-width: 60%; */
  padding: 0 10px;
  padding-right: 10%;
  /* align-self: flex-end; */
  padding-bottom: 60px
}

.column1 img {
  margin-top: 20px;
  vertical-align: middle;
}

.column2 img {
  margin-top: 20px;
  vertical-align: middle;
}

.column3 img {
  margin-top: 20px;
  vertical-align: middle;
}

.column4 img {
  margin-top: 20px;
  vertical-align: middle;

}
.column5 img {
  margin-top: 20px;
  vertical-align: middle;
}

.column6 img {
  margin-top: 20px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

/* @media (max-width: 900px) {
  .column1 {
    flex: 50%;
    max-width: 50%;
  }
  .column2 {
    flex: 50%;
    max-width: 50%;
  }
} */


@media (max-width: 1000px) {
  .column1 {
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
  }
  .column2 {
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
  }
  .column3 {
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
  }
  .column4 {
    display: block;
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
    /* padding-bottom: 40px; */

  }
  .column5 {
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
  }
  .column6 {
    flex: 100%;
    max-width: 100%;
    padding: 0 10%;
    padding-bottom: 40px;

  }
  .titre {
    font-size: 40px;

  }

  .soustitre {
    font-size: 40px;

  }

  .projecttitle{
    font-size: 40px;


  }

  .cont{
    font-size: 40px;
  }
  .description{
    font-size: 15px;


  }

  .text {

    font-size: 30px;

  }
}

@media (max-width: 800px) {
  .titre {
    font-size: 32px;

  }

  .soustitre {
    font-size: 32px;

  }

  .projecttitle{
    font-size: 32px;


  }
  .cont{
    font-size: 32px;


  }
  .description{
    font-size: 22px;


  }

    .text {

      font-size: 20px;

    }
}

/* effect-shine */
a.titre:hover, a.soustitre:hover, a.mail:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.4) 30%, #000 50%, rgba(0,0,0,.4) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}
@media (max-width: 600px) {
  .titre {
    font-size: 28px;

  }

  .soustitre {
    font-size: 28px;

  }
  .projecttitle{
    font-size: 28px;


  }
  .cont{
    font-size: 28px;


  }
  .description{
    font-size: 18px;


  }

    .text {

      font-size: 20px;

    }
}