/*===============================================*/

/* font --- START */

/*===============================================*/

@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;600;900&family=Readex+Pro:wght@300&display=swap');

/*===============================================*/

/* font --- END */

/*===============================================*/



/*===============================================*/

/* global --- START*/

/*===============================================*/

* {

	box-sizing: border-box;

}

html{

  scroll-behavior: smooth;

}

body {

	font-family: 'Darker Grotesque', sans-serif;

	background: #000000;

	background-repeat: no-repeat;

  position: relative;

}

/* class pour definir la taille maximum des conteneurs */

.container-xxl{

	max-width: 1920px;

  width: 100%;

  position: relative;

  margin: 0 auto;

}

/*modal*/

.modal{

  z-index: 99999999;

}

/*===============================================*/

/* global --- END*/

/*===============================================*/





/*===============================================*/

/* Style du NAV --- START */

/*===============================================*/

nav.menu {

	background-color: rgba(26, 24, 24, 0.8);

  position: fixed;

  z-index: 99999998;

  top: 0;

  height: 100px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

/* Style du NAV -- logo -- START */

nav .logo_aina {

  color: white;

  font-size: 2.5em;

  line-height: .9em;

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

}

nav .logo_aina p {

  margin: 0;

  text-align: center;

  text-transform: uppercase;

  margin-top: -0.15em;

}

/* Style du NAV -- logo -- END */

/* Style du NAV -- lien du menu -- START */

nav .menuContent{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: end;

}

nav ul.navigation {

  margin-bottom: 0;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

}

nav ul.navigation li {

	list-style-type: none;

	text-align: center;

}

nav ul.navigation li a {

	color: rgba(255, 255, 255, 0.8);

	font-size: 1.5em;

	padding: .5em;

	text-decoration: none;

  font-weight: 400;

}

nav ul.navigation li a:hover,

nav.menu a.active {

	color: #ffb6c1;

	text-decoration: none;

}

/* Style du NAV -- lien du menu -- END */



/* Style du NAV -- bouton menu mobile -- START */

nav .menu_mobile{

  display: none;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

}

nav .nav-toggler {

  border: none;

  cursor: pointer;

  width: 3em;

  height: 3em;

  background: none;

  outline: none;

}

nav .nav-toggler::-moz-focus-inner {

  border: 0;

}

nav .nav-toggler span,

nav .nav-toggler span:before,

nav .nav-toggler span:after {

	width: 30px;

	height: 3px;

	background-color: #fff;

	display: block;

	transition: .3s;

}

nav .nav-toggler span:before {

	content: '';

	transform: translateY(-9px);

}

nav .nav-toggler span:after {

	content: '';

	transform: translateY(6px);

}

nav .nav-toggler.toggler-open span {

	background-color: transparent;

}

nav .nav-toggler.toggler-open span:before {

	transform: translateY(0px) rotate(45deg);

}

nav .nav-toggler.toggler-open span:after {

	transform: translateY(-3px) rotate(-45deg);

}

nav .nav-toggler:focus {

  outline: 0px dotted;

  outline: 0px auto -webkit-focus-ring-color;

}

/* Style du NAV -- bouton menu mobile -- END */



/* Style du NAV -- menu mobile ouvert -- START */

body.fixed{

  overflow: hidden;

}

#navbar-example2.open{

  background-color: rgb(26, 24, 24);

}

nav .col-lg-10.menuContent.open {

  display: flex;

  flex-direction: column;

  width: 100%;

  align-items: center;

  justify-content: center;

  position: fixed;

  top: 100px;

  padding: 0;

  left: 0;

  height: calc(100vh - 100px);

  background-color: rgb(26, 24, 24);

}

.col-lg-10.menuContent.open .navigation {

  display: flex;

  flex-direction: column;

  width: 100%;

  padding-top: 1em;

  padding-bottom: 1em;

  height: 100%;

  justify-content: space-around;

}

/* Style du NAV -- menu mobile ouvert -- END */



/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){

}

/*Petit ecran - ordinateur*/

@media screen and (max-width: 1200px){

  nav .logo_aina {

    font-size: 2em;

    line-height: .9em;

  }

  nav ul.navigation {

    padding-left: 0;

  }

}

/*tablette large*/

@media screen and (max-width: 992px){

  nav .menuContent{

    display: none;

  }

  nav .menu_mobile{

    display: flex;

  }

  nav ul.navigation li a {

    font-size: 2.2em;

    padding: .35em;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  nav ul.navigation li a {

    font-size: 2.2em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  nav.menu {

    height: 5em;

  }

  nav .logo_aina {

    font-size: 1.8em;

    line-height: .9em;

  }

  nav .col-lg-10.menuContent.open {

    top: 80px;

    height: calc(100vh - 80px);

  }

  nav ul.navigation li a {

    font-size: 2.2em;

  }

}

/*Media query pour le menu -- END */

/*===============================================*/

/* Style du NAV --- END */

/*===============================================*/





/*===============================================*/

/* Header Video + Text + Button + Soundcloud player --- START*/

/*===============================================*/

:root {

  --headerOpacity: 1;

  --headerScale: 1;

}

header#home {

	height: 100vh;

	width: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	position: relative;

}

header#home .container-xxl{

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

header#home .grey_layout {

  width: 100%;

  height: 100%;

  position: absolute;

  background-color: #0000001c;

  z-index: 0;

}

header#home .header-content {

	display: flex;

	align-items: center;

	justify-content: center;

  flex-direction: column;

	opacity: 1;

  opacity: var(--headerOpacity);

  transform: scale(var(--headerScale));

	text-align: center;

  transition: all 0.3s;

  z-index: 1;

  margin-top: 100px;

  

}

header#home .header-content h1 {

	color: #ffffff;

	text-transform: uppercase;

	letter-spacing: 1em;

	line-height: 1.2;

	font-size: 2em;

	text-align: center;

  display: block;

  margin-right: -1em;

  margin-bottom: .5em;

}

header#home .header-content h1 span {

	display: block;

  font-size: 4em;

  letter-spacing: 0em;

  margin-right: .2em;

}

header#home .header-content #buttonAboutMe {

  padding: 0.5vw 2vw 0.5vw 2vw;

  background-color: #161414;

  font-size: 2em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  margin-bottom: 1em;

}

header#home .header-content #buttonAboutMe:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

/* video styles pour youtube --- START */

/* header#home .video-background {

  position: absolute;

  overflow: hidden;

  width: 100%;

  height: 100%;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

}

header#home .video-background iframe {

  position: relative;

  top: 50%;

  left: 50%;

  width: 100vw;

  height: 100vh;

  transform: translate(-50%, -50%);

}

@media (min-aspect-ratio: 16/9) {

  header#home .video-background iframe {

    height: 56.25vw

  }

}



@media (max-aspect-ratio: 16/9) {

  header#home .video-background iframe {

    width: 177.78vh

  }

}

header#home .image.video-slide {

  width: 100%;

  height: 100%;

  background-size: cover;

  background-repeat: no-repeat;

  position: absolute;

  display: block;

}

header#home .slide .video-slide {

  background-color: #000; 

}



header#home .loading .video-background {

  opacity: 0; 

}



header#home .video-foreground,

header#home .video-background iframe {

  pointer-events: none; 

} */

/* video styles pour youtube --- END */





/* video styles pour une video du serveur --- START */

header#home video {

	width: 100%;

	height: 100%;

	object-fit: cover;

	position: absolute;

	top: 0;

	left: 0;

}

/* video styles pour une video du serveur --- END */

/* Soundcloud player */

.soundcloud-wrapper {

  width: 100%;

  position: absolute;

  border-radius: 4px;

  max-width: 15em;

  bottom: 2em;

  right: 2em;

  height: 6.25em;

}



/*Mute/Unmute*/

header#home .toggle-sound {

  position: absolute;

  bottom: 2em;

  right: 2em;

  background-color: #ffb6c1;

  width: 55px;

  height: 55px;

  line-height: 55px;

  text-align: center;

  color: #fff;

  border-radius: 50%;

  cursor: pointer;

  z-index: 99;

  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);

  box-shadow: 0 0 0 0 #ffb6c1;

}

header#home .toggle-sound.sound-mute {

  box-shadow: none;

}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}



header#home .sound {

  width: 97%;

  height: 100%;

  position: absolute;

  cursor: pointer;

  display: inline-block;

  left: 0;

  top: 0;

  margin-left: -15%;

}

header#home .sound--icon {

  color: inherit;

  line-height: inherit;

  font-size: 1.6rem;

  display: block;

  margin: auto;

  text-align: left;

  padding-left: 20px;

}

header#home .sound--wave {

  position: absolute;

  border: 2px solid transparent;

  border-right: 2px solid #fff;

  border-radius: 50%;

  transition: all 200ms;

  margin: auto;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}

header#home .sound--wave_one {

  width: 45%;

  height: 40%;

}

header#home .sound--wave_two {

  width: 70%;

  height: 62%;

}

header#home .sound--wave_three {

  width: 95%;

  height:75%;

}

header#home .sound-mute .sound--wave {

  border-radius: 0;

  width: 35%;

  height: 35%;

  border-width: 0 2px 0 0;

  left: 5px;

}

header#home .sound-mute .sound--wave_one {

-webkit-transform: rotate(45deg) translate3d(0, -50%, 0);

        transform: rotate(45deg) translate3d(0, -50%, 0);

}

header#home .sound-mute .sound--wave_two {

-webkit-transform: rotate(-45deg) translate3d(0, 50%, 0);

        transform: rotate(-45deg) translate3d(0, 50%, 0);

}

header#home .sound-mute .sound--wave_three {

  opacity: 0;

  transform: translateX(-46%);

  height: 20%;



}

/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){

  header#home .header-content h1 {

    letter-spacing: 2vw;

    line-height: 1;

    font-size: 4vw;

  }

  header#home .header-content h1 span {

    font-size: 10vw;

    letter-spacing: 0;

    margin-right: 1vw;

  }

  header#home .header-content #buttonAboutMe {

    padding: 0.5vw 2vw 0.5vw 2vw;

    font-size: 2.5vw;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  header#home .header-content h1 {

    letter-spacing: .6em;

    line-height: 1.2;

    font-size: 1.5em;

    margin-bottom: 1em;

  }

  header#home .header-content h1 span {

    font-size: 3em;

    letter-spacing: 0em;

  }

  header#home .header-content #buttonAboutMe {

    padding: 0.5vw 2vw 0.5vw 2vw;

    font-size: 1.5em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  header#home .header-content {

    margin-top: 80px;

  }

  header#home .header-content h1 {

    letter-spacing: 4vw;

    line-height: 1.2;

    font-size: 4vw;

    margin-bottom: 1em;

    margin-right: -4vw;

  }

  header#home .header-content h1 span {

    font-size: 17vw;

    letter-spacing: 0em;

    margin-right: 2vw;

    line-height: .8em;

  }

  header#home .header-content #buttonAboutMe {

    font-size: 6vw;

  }

}

/* Si tu veux désactiver la vidéo sur les petit écran */

/* @media screen and (max-width: 576px) {

  header#home {

    background: url("assets/Images/header_bg.png");

    background-size: cover;

  }

  header#home video{

    display: none;

  }

} */

/*Media query pour le menu -- END */

/*===============================================*/

/* Header Video + Text + Button --- END*/

/*===============================================*/







/*===============================================*/

/* contenu de la page --- START*/

/*===============================================*/



/*1-SECTION - entertainment -- START*/

/*===============================================*/

#entertainment{

  display: flex;

  flex-direction: column;

  background: none;

  padding-top: 6em;

  min-height: 60em;

  max-height: 100vh;

  height: 100%;

}

#entertainment h2 {

  text-align: center;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 4em;

}

/*Menu entertainment */

#myList {

  flex-direction: row;

  align-items: center;

  justify-content: center;

  margin-bottom: 1em;

}

.list-group-item.list-group-item-action {

  background: none;

  border: none;

  font-size: 1.5em;

  font-weight: 400;

  text-align: center;

  transition: all .3s;

  color: rgba(255, 255, 255, 0.8);

  width: auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.list-group-item.list-group-item-action.active {

  font-weight: 600;

  color: #fff;

}

.list-group-item.list-group-item-action::before{

  content:"";

  height: .2em;

  background-color: #fff;

  width: 0;

  transition: all .3s;

  position: absolute;

  bottom: 0;

  left: 0;

}

.list-group-item.list-group-item-action.active::before {

  width: 100%;

}

.list-group-item.list-group-item-action:hover::before {

  width: 100%;

}

.list-group-item.list-group-item-action:hover{

  color: #fff;

}

/* effet de disparition sur les bord gauche et droite */

#entertainment .fadeCarouselBox{

  mask-image: linear-gradient(transparent, black 10%, black 90%, transparent 100%);

  -webkit-mask-image: linear-gradient( to right,transparent, black 10%, black 90%, transparent 100%);

  height: 35em;

  display: flex;

  flex-direction: column;

  justify-content: center;

  overflow: hidden;

}

#entertainment .owl-stage-outer {

  padding: 30px 0;

  overflow: unset;

}

/* css des vignettes */

#entertainment .owl-carousel .active {

  opacity: 0.5;

  transition: all 0.3s;

  transform: scale(1);

}

#entertainment .owl-carousel .center {

  opacity: 1;

  transform: scale(1.5);

  z-index: 1;

}

#entertainment .owl-carousel .item {

  width: 100%;

  padding-top: 56.25%;

  height: 0px;

}

#entertainment .owl-carousel .item.item-video iframe {

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  top: 0;

  pointer-events: none;

}

#entertainment .owl-carousel .image-item {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  object-fit: cover;

  box-shadow: 0px 0px 4px -1px #fff;

}

/* Bouton des vignettes */

#entertainment .owl-carousel .view-more-model{

  transition: all .3s .1s;

  transform: scale(0);

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: .8em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: absolute;

  -webkit-appearance: none;

  border: none;

  bottom: 1.5em;

  right: 1.5em;

  z-index: 2;

}

#entertainment .owl-carousel .center .view-more-model{

  transform: scale(1);

}

#entertainment .owl-carousel .view-more-model:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

/* Bouton previous et next */

#entertainment .owl-carousel .owl-nav {

  top: 45%;

  position: absolute;

  display: grid;

  flex-direction: row;

  width: 80%;

  margin-left: 10%;

}

#entertainment .owl-carousel .owl-nav button.owl-next,

#entertainment .owl-carousel .owl-nav button.owl-prev {

  outline: 0;

}

#entertainment .owl-carousel button.owl-dot {

  outline: 0;

}

#entertainment .owl-carousel .owl-prev,

#entertainment .owl-carousel .owl-next {

  color: #fff;

  font-size: 3em;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  line-height: 0;

  font-weight: bold;

}

#entertainment .owl-carousel .owl-prev{

  justify-self: flex-start;

}

#entertainment .owl-carousel .owl-next{

  justify-self: flex-end;

}

#entertainment .owl-nav .disabled {

  display: none !important;

}

/* Bouton indicateur du slide */

#entertainment .owl-carousel .owl-dots {

  text-align: center;

  position: absolute;

  right: 0;

  bottom: -5em;

  left: 0;

  z-index: 2;

  display: flex;

  justify-content: center;

  padding: 0;

  margin-right: 15%;

  margin-left: 15%;

  list-style: none;

}

#entertainment .owl-carousel .owl-dot {

  box-sizing: content-box;

  flex: 0 1 auto;

  width: 30px;

  height: 3px;

  padding: 0;

  margin-right: 3px;

  margin-left: 3px;

  text-indent: -999px;

  cursor: pointer;

  background-color: #fff;

  background-clip: padding-box;

  border: 0;

  border-top-color: currentcolor;

  border-top-style: none;

  border-top-width: 0px;

  border-bottom-color: currentcolor;

  border-bottom-style: none;

  border-bottom-width: 0px;

  border-top: 10px solid transparent;

  border-bottom: 10px solid transparent;

  opacity: .5;

  transition: opacity .6s ease;

}

#entertainment .owl-carousel .owl-dot.active{

  opacity: 1;

}

/*Media query pour la section entertainment -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){



}

/*tablette large*/

@media screen and (max-width: 992px){

  #entertainment {

    padding-top: 8em;

    min-height: unset;

    max-height: unset;

    height: unset;

    padding-bottom: 8em;

  }

  #entertainment h2 {

    font-size: 4em;

  }

  #entertainment #myList {

    margin-bottom: 4em;

  }

  #entertainment .fadeCarouselBox {

    height: unset;

    padding-top: 3em;

    padding-bottom: 3em;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  #entertainment h2 {

    font-size: 3.5em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  #entertainment h2 {

    font-size: 3em;

    line-height: 1em;

  }

  #entertainment #myList {

    margin-bottom: 2em;

    flex-direction: column;

  }

  #entertainment .list-group-item.list-group-item-action {

    font-size: 1.1em;

    transition: all 0.3s;

  }

  #entertainment .list-group-item.list-group-item-action.active {

    font-size: 1.5em;

  }

  #entertainment .fadeCarouselBox {

    padding-top: 4em;

    padding-bottom: 4em;

  }

  #entertainment .owl-stage-outer {

    padding: 1em 0;

    overflow: unset;

  }

  #entertainment .owl-carousel .center {

    transform: scale(1.8);

  }

  #entertainment .owl-carousel .view-more-model{

    font-size: .6em;

  }

}

/*1-SECTION - entertainment -- END*/

/*===============================================*/



/*2-SECTION - sleepyWater -- START*/

/*===============================================*/
#explainSleepyWater h3 {

  text-align: center;

  width: 70%;

  margin: 0 auto;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 1.2em;

  
  

}

#centerSleepyWaterVideo {
  display: flex; 
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;  


}

#centerSleepyWaterVideo div {

  align-items: center;
  margin: 0 auto;


}

#centerSleepyWaterVideo img {
  width: 50%;
  height: 100%;


}
#sleepyWater{

  display: flex;

  flex-direction: column;

  background: none;

  padding-top: 6em;

  padding-bottom: 6em;

}

#sleepyWater h2 {

  text-align: center;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 4em;

}

#sleepyWater .row {

  margin-right: 0px;

  margin-left: 0px;

}

#sleepyWater .PortfolioGrid{

  /* margin-bottom: 1em; */

  overflow: hidden;

  margin-top: 1em;

  position: relative;

}

#sleepyWater .PortfolioGrid:last-child{

  margin: 0 auto;

  margin-top: 1.25em;

}

#sleepyWater img{

  object-fit: cover;

  width: 100%;

  height: 100%;

  display: block;

  top: 0;

}

#sleepyWater .portFolioContent {

  position: absolute;

  height: 100%;

  bottom: 100%;

  left: 0;

  display: flex;

  width: 100%;

  background: #00000070;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  transition: all 0.3s;

}

#sleepyWater .PortfolioGrid:hover .portFolioContent{

  bottom: 0;

}

#sleepyWater .view-more-model{

  transition: all .3s .1s;

  transform: scale(0);

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: 1.5em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  -webkit-appearance: none;

  border: none;

  margin-top: .5em;

}

#sleepyWater .PortfolioGrid:hover .view-more-model{

  transform: scale(1);

}

#sleepyWater .PortfolioGrid .view-more-model:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

#sleepyWater .PortfolioGrid h3{

  color: #fff;

  font-weight: 400;

  font-size: 1.5em;

}

/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){



}

/*tablette large*/

@media screen and (max-width: 992px){

  #sleepyWater {

    padding-top: 0em;

    padding-bottom: 8em;

  }

  #sleepyWater h2 {

    font-size: 4em;

  }

  #sleepyWater .portFolioContent {

    height: 5em;

    bottom: 0;

    left: 0;

    flex-direction: row;

    justify-content: space-between;

    padding-left: 2em;

    padding-right: 2em;

  }

  #sleepyWater .PortfolioGrid .view-more-model{

    transform: scale(1);

    margin-top: 0;

  }

}



/*2-SECTION - sleepyWater -- END*/

/*===============================================*/



/*3-SECTION - porteFolio -- START*/

/*===============================================*/

#porteFolio{

  display: flex;

  flex-direction: column;

  background: none;

  padding-top: 6em;

  padding-bottom: 6em;

}

#porteFolio h2 {

  text-align: center;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 4em;

}

#porteFolio .row {

  margin-right: 0px;

  margin-left: 0px;

}

#porteFolio .PortfolioGrid{

  /* margin-bottom: 1em; */

  overflow: hidden;

  margin-top: 1em;

  position: relative;

}

#porteFolio .PortfolioGrid:last-child{

  margin: 0 auto;

  margin-top: 1.25em;

}

#porteFolio img{

  object-fit: cover;

  width: 100%;

  height: 100%;

  display: block;

  top: 0;

}

#porteFolio .portFolioContent {

  position: absolute;

  height: 100%;

  bottom: 100%;

  left: 0;

  display: flex;

  width: 100%;

  background: #00000070;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  transition: all 0.3s;

}

#porteFolio .PortfolioGrid:hover .portFolioContent{

  bottom: 0;

}

#porteFolio .view-more-model{

  transition: all .3s .1s;

  transform: scale(0);

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: 1.5em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  -webkit-appearance: none;

  border: none;

  margin-top: .5em;

}

#porteFolio .PortfolioGrid:hover .view-more-model{

  transform: scale(1);

}

#porteFolio .PortfolioGrid .view-more-model:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

#porteFolio .PortfolioGrid h3{

  color: #fff;

  font-weight: 400;

  font-size: 1.5em;

}

/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){



}

/*tablette large*/

@media screen and (max-width: 992px){

  #porteFolio {

    padding-top: 0em;

    padding-bottom: 8em;

  }

  #porteFolio h2 {

    font-size: 4em;

  }

  #porteFolio .portFolioContent {

    height: 5em;

    bottom: 0;

    left: 0;

    flex-direction: row;

    justify-content: space-between;

    padding-left: 2em;

    padding-right: 2em;

  }

  #porteFolio .PortfolioGrid .view-more-model{

    transform: scale(1);

    margin-top: 0;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  #porteFolio h2 {

    font-size: 3.5em;

  }

  #porteFolio .portFolioContent {

    height: 100%;

    flex-direction: column;

    justify-content: center;

    padding-left: 2em;

    padding-right: 2em;

  }

  #porteFolio .PortfolioGrid .view-more-model {

    transform: scale(1);

    margin-top: .5em;

    font-size: 1.2em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  #porteFolio h2 {

    font-size: 3em;

    line-height: 1em;

  }

}

/*3-SECTION - porteFolio -- END*/

/*===============================================*/



/*4-SECTION - Piano Lessons -- END*/

/*===============================================*/

#pianoLessons {

  display: flex;

  flex-direction: row;

  background: none;

  padding-top: 6em;

  position: relative;

  align-items: center;

  justify-content: center;

  padding-bottom: 6em;

}



#pianoLessons .image-stack__item--top {

  float: left;

  width: 66%;

  margin-right: -100%;

  position: relative;

  z-index: 1;

}



#pianoLessons .image-stack__item--bottom {

  float: right;

  width: 75%;

}



@supports (display: grid) {

  #pianoLessons .image-stack {

    display: grid;

    position: relative;

    grid-template-columns: repeat(12, 1fr);

  }



  #pianoLessons .image-stack__item--bottom {

    grid-column: 4/-1;

    grid-row: 1;

    width: 100%;

  }



  #pianoLessons .image-stack__item--top {

    grid-row: 1;

    grid-column: 1/span 10;

    padding-top: 15%;

    width: 100%;

    position: relative;

  }

}

.image-stack__item--top img, .image-stack__item--bottom img {

  object-fit: cover;

  position: relative;

  width: 100%;

}

#pianoLessons .text {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding-left: 2em;

  padding-right: 2em;

}

#pianoLessons .text h2 {

  text-align: center;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 4em;

  position: relative;

}

#pianoLessons .text p {

  color: #fff;

  font-size: 1.2em;

  font-family: "Readex Pro", sans-serif;

  line-height: 1.8em;

}

/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){



}

/*tablette large*/

@media screen and (max-width: 992px){

  #pianoLessons {

    padding-top: 0em;

    padding-bottom: 8em;

  }

  #pianoLessons h2 {

    font-size: 4em;

  }

  #pianoLessons {

    display: flex;

    flex-direction: column;

  }

  #pianoLessons .col-lg-6.col-md-12.image {

    padding: 0;

    width: 110%;

}

  #pianoLessons .image-stack {

    display: flex;

    position: relative;

    grid-template-columns: unset;

  }

  #pianoLessons .image-stack__item--top {

    grid-row: unset;

    grid-column: unset;

    padding-top: 0;

    width: 100%;

    position: relative;

    height: 15em;

  }

  .image-stack__item--top img, .image-stack__item--bottom img {

    object-fit: cover;

    position: relative;

    width: 100%;

    height: 100%;

  }

  #pianoLessons .text h2 {

    margin-top: 1em;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  #pianoLessons h2 {

    font-size: 3.5em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  #porteFolio h2 {

    font-size: 3em;

    line-height: 1em;

  }

}

/*4-SECTION - Piano Lessons -- END*/

/*===============================================*/



/*5-SECTION - Contact -- START*/

/*===============================================*/

#contact {

  display: flex;

  flex-direction: column;

  background: none;

  padding-bottom: 6em;

  padding-top: 6em;

  position: relative;

}

#contact .text {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

#contact .text .viewCv{

  transition: all .3s .1s;

  transform: scale(1);

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: 1.5em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  -webkit-appearance: none;

  border: none;

  margin-top: 1em;

}

#contact .text .viewCv:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;  

}

#contact .text .aboutMeText {

  color: #fff;

  font-size: 1.2em;

  font-family: "Readex Pro", sans-serif;

  line-height: 1.8em;

  text-align: center;

  margin-bottom: 0em;

}

#contact .text ul{

    display: flex;

    flex-direction: row;

    width: 100%;

    justify-content: space-around;

    align-items: center;

    text-decoration: none;

    list-style: none;

    padding: 0;

}

#contact .text ul .linkedin{

  transition: all .3s .1s;

  transform: scale(1);

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: 1.5em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  -webkit-appearance: none;

  border: none;

  margin-top: 1em;

}

#contact .text .linkedin:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;  

}

#contact .img-responsive {

  width: 100%;

  display: block;

  position: relative;

}

#contact .email {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

#contact .email h2 {

  text-align: left;

  color: #fff;

  margin-bottom: .5em;

  text-transform: uppercase;

  font-size: 4em;

}

#contact .email p {

  color: #fff;

  font-size: 1.2em;

  font-family: "Readex Pro", sans-serif;

  line-height: 1.8em;

}

#contact .email .form-control {

  border-radius: 0;

  background: #ffffff42;

  border: none;

  color: #fff;

  font-weight: 600;

  font-family: "Readex Pro", sans-serif;

}

#contact .email .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #fff;

  opacity: 1; /* Firefox */

  font-size: 1em;

  font-weight: 400;

}

#contact .email .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */

  color: #fff;

  font-size: 1em;

  font-weight: 400;

}

#contact .email .form-control::-ms-input-placeholder { /* Microsoft Edge */

  color: #fff;

  font-size: 1em;

  font-weight: 400;

}

#contactEmail2 {

  padding: 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-decoration: none;

}

#center{
  margin-left: auto;
  margin-right: auto;
}


#contact .email button{

  transition: all .3s .1s;

  padding: 0.15vw .5vw 0.15vw .5vw;

  background-color: #161414;

  font-size: 1.5em;

  border-radius: .1em;

  color: #fff;

  text-decoration: none;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  -webkit-appearance: none;

  border: none;

  width: 98%;

  margin: 0 auto;

  margin-top: 1em;

}

#contact .email button:after {

  content: '';

  position: absolute;

  top: -.25em;

  left: -.25em;

  right: -.25em;

  bottom: -.25em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

#contact .email button .fa.fa-paper-plane {

  font-size: 0.6em;

  margin-bottom: -.25em;

  margin-right: 1em;

}

#contact .col-lg-3.offset-md-4.col-md-4.offset-sm-4.col-sm-4.offset-2.col-8 {

  margin: 0 auto;

  margin-bottom: 6em;

}



.col-md-12.mailResponse {

  padding: 0;

}

.col-md-12.mailResponse .alert.alert-dismissible.alert-success,

.col-md-12.mailResponse .alert.alert-dismissible.alert-danger {

  background: #000;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin: 0 !important;

}

.mailResponseText {

  margin: 0;

}

#contact .email .alert .close {

  display: flex;

  position: absolute;

  top: 0;

  margin: 0;

  width: 2em;

  height: 2em;

  opacity: 1;

}

/*Media query pour le menu -- START */

/*Grand ecran - ordinateur*/

@media screen and (max-width: 1400px){



}

/*tablette large*/

@media screen and (max-width: 992px){

  #contact {

    padding-top: 0em;

    padding-bottom: 8em;

  }

  #contact .email h2 {

    font-size: 4em;

  }

}

/*tablette / telephone paysage*/

@media screen and (max-width: 768px){

  #contact .email h2 {

    font-size: 3.5em;

    text-align: center;

  }

  #contact .text{

    margin-bottom: 4em;

  }

}

/*telephone*/

@media screen and (max-width: 576px){

  #contact .email h2 {

    font-size: 3em;

    line-height: 1em;

  }

}

/*5-SECTION - Contact -- END*/

/*===============================================*/





/*===============================================*/

/* contenu de la page --- END*/

/*===============================================*/





/*===============================================*/

/* Footer --- START */

/*===============================================*/

footer {

  width: 100%;

  background: #242424;

  display: grid;

  place-items: center;

  padding: 1em;

  color: #ffffff;

  font-family: "Readex Pro", sans-serif;

  font-size: .8em;

}

footer a {

  color: #ffb6c1;

  font-size: 1.25em;

  line-height: 1em;

  font-weight: 600;

}

footer a:hover {

  color: #ffb6c1;

  text-decoration: none;

}

footer .credit{

  text-align: center;

}

/*===============================================*/

/* Footer --- END */

/*===============================================*/



/*===============================================*/

/* Modal entertainment --- START */

/*===============================================*/

#exampleModal #titleProject {

  font-size: 2em;

  min-height: 2.5em;

  width: 100%;

  padding-right: 3.25em;

}

#exampleModal #ProjectNote {

  color: #000;

  font-size: 1em;

  font-family: "Readex Pro", sans-serif;

  line-height: 1.6em;

}

#exampleModal .soundcloud-wrapper {

  width: 100%;

  height: unset;

  overflow: hidden;

  position: relative;

  bottom: unset;

  right: 0;

  max-width: 100%;

  height: 20em;

  margin-bottom: 1em;

}

#exampleModal .soundcloud-wrapper iframe{

  width: 100%;

  left: 0;

  position: relative;

  top: unset;

  height: 20em;

}

#exampleModal .soundcloud-wrapper.tracks {

  height: 10em;

}

#exampleModal .soundcloud-wrapper.tracks iframe{

  height: 10em;

}

#exampleModal .carousel-indicators {

  position: static;

}

#exampleModal .carousel-indicators li {

  width: 300px;

  height: 100%;

  opacity: 0.8;

}

#exampleModal .close {

  font-size: 3em;

  position: relative;

  line-height: 0;

  color: #ffffff;

  background: black;

  width: 1em;

  height: 1em;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  opacity: 1;

  transition: all .2s;

  z-index: 9999;

  padding-bottom: 0.25em;

}

#exampleModal .close:after {

  content: '';

  position: absolute;

  top: -.125em;

  left: -.125em;

  right: -.125em;

  bottom: -.125em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}

/*===============================================*/

/* Modal entertainment --- END */

/*===============================================*/



/*===============================================*/

/* ModalVideo --- START */

/*===============================================*/

#videoModal .modal-body {

  padding: 0;

}

#videoModal .close {

  font-size: 3em;

  position: absolute;

  top: -0.5em;

  right: -0.5em;

  line-height: 0;

  color: #ffffff;

  background: black;

  width: 1em;

  height: 1em;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  opacity: 1;

  transition: all .2s;

  z-index: 9999;

  padding-bottom: 0.25em;

}

#videoModal .close:after {

  content: '';

  position: absolute;

  top: -.125em;

  left: -.125em;

  right: -.125em;

  bottom: -.125em;

  background: transparent;

  z-index: -1;

  border-radius: .1em;

  border: 1px solid #ffffff;

}



/*===============================================*/

/* ModalVideo --- END */

/*===============================================*/