@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
/* @font-face {
    font-family: Europa-Light;
    src: url("15529.otf") format("opentype");
} */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Lato";
  font-weight: 300;
}

body{
  font-size: 0.62em;

}
#top{
  min-height: 100vh;
  background: url("img/noword_header.jpg") no-repeat center center / cover;
  background-attachment : fixed;
  position: relative;
}
#top img{
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          margin: auto;
          width: 390px;
          opacity: 0.5;
          transform: translate(-58%,-50%);
}
#particles-js{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
#top h1{
          margin: auto;
          width: 100%;
          text-align: center;
          /* padding: 100px 0 50px 0; */
          font-size: 10em;
          position: absolute;
          color: #fff;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;
  /* margin: auto;
  text-align: center; */
  /* padding: 100px 0 50px 0; */
  font-size: 10em;
  color: #fff;
}
#top h1 span{
          color:#312a49;
  /* color: #355d6b; */
}
/* #buttons{
  position: absolute;
  width: 100%;
  z-index: 20;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
.buttons{
  width: 273px;
  height: 236px;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
}
.about{
  background: url("img/about2.png") no-repeat center center / cover;
}
.about:hover{
  background: url("img/about3.png") no-repeat center center / cover;
}
.portfo{
  background: url("img/portfolio.png") no-repeat center center / cover;
}
.portfo:hover{
  background: url("img/portfolio1.png") no-repeat center center / cover;
}
.contact{
  background: url("img/contact.png") no-repeat center center / cover;
}
.contact:hover{
  background: url("img/contact1.png") no-repeat center center / cover;
} */
#menuToggle{
  width: 100%;
}
#menu_top{
  transition: all 0.2s ease-in !important;
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  background-color: #fff;
  box-shadow: 0.1px 0.1px 10px #367d96;
  top:0;
  padding: 10px 10% 10px 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 60;
}
#menu_top img{
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 95px;
}
#menu_top h2{
  color: #355d6b;
  font-weight: 300;
  font-size: 3em;
}
#menu_top ul{
  padding-left: 40px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 2em;
}
#menu_top ul li{
  padding: 0 10px;
}
#menu_top ul a{
    text-decoration: none;
    color: #355d6b;
    transition: all 0.2s ease-in;
}
#menu_top ul a:hover{
    color: #5bc6eb;
}
#menu_top ul a:focus{
          color:#5bc6eb;
}
.test{
  background-color: rgba(0,0,0,0.6) !important;
  transition: all 0.1s ease-in !important;
  box-shadow: none !important;
}
.stickyname{
  color: #ffffff !important;
}
.stickyspecial{
  color: #fff !important;
}
.stickyspecial:focus{
          color:#5bc6eb !important;
}
.stickyspecial:hover{
  color: #5bc6eb !important;
}
#about{
  padding: 100px 10% 100px 10%;
}
#about img{
  display: block;
  margin: auto;
  max-width: 80%;
}
#about h2{
  font-size: 3em;
  text-align: center;
  font-weight: 400;
  color: #355d6b;
  padding: 30px 0 50px 0;
}
#about p{
  font-size: 2em;
  font-weight: 400;
  text-align: justify;
}
#slider1{
  width: 100%;
  height: 810px;
  background: url("img/photo1.jpg") no-repeat 51% center / cover;
  background-attachment : fixed;
}
#slider2{
  width: 100%;
  height: 810px;
  background: url("img/photo2.jpg") no-repeat 71% center/ cover;
  background-attachment : fixed;
}
.excerpt{
  opacity: 0;
}

/**HOVER EFFECT PORTFOLIO********************************************/

.grid {
	position: relative;
	clear: both;
	margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
	max-width: 100%;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	overflow: hidden;
	margin: 20px 1%;
	min-width: 300px;
	max-width: 480px;
	max-height: 360px;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor:auto;
}
.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.arrow{
          color:#367d96;
}
.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.grid figcaption a{
  text-decoration: none;
  color: #fff;
}

.grid figure h2 {
	word-spacing: -0.05em;
	font-weight: 300;
  font-size: 2em;
}

.grid figure h2 span {
	font-weight: 400;
}
.grid figure p {
	letter-spacing: 1px;
	font-size: 1.2em;
}

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: steelblue;
}

figure.effect-apollo img {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.03,1.031,1);
	transform: scale3d(1.03,1.03,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 30px;
	bottom: 30px;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: left;
  background: rgba(0,0,0,0.5);
}

figure.effect-apollo:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 0.8;
  background: black;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.3s;
}
#filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
	list-style:none;
}
	#filters li {
		font-size: 2em;
    display: block;
    padding:5px 20px;
    text-decoration:none;
    color:#666;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
	}
   #filters li:hover{
     background: #c4edfb;
   }
	#filters li.active {
		background: #367d96;
		color:#fff;
	}

#portfoliolist .portfolio {
	display:none;
}
#portfolio{
  text-align: center;
  min-height: 100vh;
  padding: 100px 5% 20px 5%;
}
#portfolio h3{
  font-size: 3em;
  text-align: center;
  color: #355d6b;
  padding: 0 0 50px 0;
}
.notabene{
          font-size:1.5em;
          text-align:center;
          padding-bottom:10px;
}
#contact{
  width: 100%;
  padding: 100px 10% 100px 10%;
}
#contact h3{
  width: 100%;
  font-size: 3em;
  text-align: center;
  color: #355d6b;
  padding: 0 0 50px 0;
}
#contact div{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#contact input:not(#but_submit), #contact textarea{
  border: 2px solid black;
  margin-bottom:10px;
  font-weight: 400;
  font-size: 2em;
  display: block;
  background:rgba(196,206,255,0.4);
  width: 300px;
  transition: background 0.2s ease-in;
}
#contact input:not(#but_submit):focus, #contact textarea:focus{
  background: #fff;
}
#contact textarea{
  max-width: 300px;
  max-height: 150px;
  height: 150px;
  background:rgba(196,206,255,0.4);
}
#contact label{
          font-size: 1.17em;
          color: #367d96;
}
#but_submit{
  width: 101px;
  margin: 10px 0 20px 0;
  float: right;
  height: 50px;
  background: #367d96;
  border: none;
  font-size: 3em;
  color: #fff;
  transition: background 0.1s ease-in;
}
#but_submit:hover{
  background: #69a9bf;
}
#contact p{
  font-size: 2em;
  padding: 0 20px 0 20px;
}
.social{
  align-self: flex-end;
  max-width: 100%;
}
.social img{
  max-width: 87px;
  max-height: 75px;
}
footer img{
  min-width: 200px;
  width: 400px;
  display: block;
  margin: auto;
  opacity: 0.8;
}
footer h1{
  text-align: center;
  padding: 0 0 50px 0;
  font-size: 8em;
  color: rgba(0, 0, 0, 0.5);
}
footer h1 span{
  color: rgba(53, 93, 107, 0.5);
}

/******MEDIA QUERY POUR PETITS ECRANS EN PAYSAGE****/
@media screen and (max-height: 360px) {
  #buttons{
    bottom: 10%;
  }
}

/***MEDIA QUERIES POUR MOBILE/TABLETTE**********/
@media screen and (max-width: 836px) {
#top img{
          width:250px;
}
#top h1{
          font-size:8em;
}
  .buttons{
    max-width: 110px;
    max-height: 95px;
    }
    #contact{
      padding: 100px 0 100px 0;
    }
    #buttons{
      position: absolute;
      width: 100%;
    }
    .about{
      background: url("img/about3.png") no-repeat center center / cover;
    }
    .portfo{
      background: url("img/portfolio1.png") no-repeat center center / cover;
    }
    .contact{
      background: url("img/contact1.png") no-repeat center center / cover;
    }
    #contact p{
      text-align: center;
    }
    .social{
      padding-top: 20px;
    }
    #menu_top h2{
      font-size: 2em;
      position: absolute;
      top: 50%;
      right: 50px;
      transform: translateY(-50%);
    }
    #menu_top{
      padding: 5px 10% 5px 10%;
    }
    #menu_top ul{
      font-size: 1.6em;
    }
    #menu_top img{
      display:none;
    }
    footer img{
      max-width: 200px;
}
/* Media queries */
@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}