body{
  /*background-image: url(../img/black.jfif);*/
    background: linear-gradient(100deg, #1aebb5, #255249, #0d1513, #361e39, #81338a);
    background-size: 1000% 1000%;

    -webkit-animation: gradient 10s ease infinite;
    -moz-animation: gradient 10s ease infinite;
    animation: gradient 10s ease infinite;}

/** BACKGROUND COLOR **/
@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/** FIN BACKGROUND COLOR **/

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.navbar-brand {
  width:200px;
  font-size: 24px;
}
.navbar-brand img, .footer-logo img{
  height: 95px;
  /* put value of image height as your need */
  float: left;
  margin-right: 7px;
}

h3 {
  color: white;
}

.conten2 {
  position: fixed;
  bottom: 0;
  
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.div-skills
{display: flex;
    align-items: center;
    flex-wrap: wrap;
}
  


.div-contact
{
  margin: auto;
  position: relative;
  text-align: center;
  align-items: center;
  
}

.skills-logo {
  align-items: center;
  text-align: center;
  
}

.skills-logo img {
  width:10%;
  height:10%;
  position: relative;
}


.div-skills .img {
  max-width: 100%;
  height: auto;
}

.skills {
  left:18%;
}

/**** VIDEO ***/

#videowrapper{  
    position: relative;
    overflow: hidden;
} 

#fullScreenDiv{
    min-height: 100%; 
    height: 100vh;
    width: 100vw;
    padding:0;
    margin: 0;
    background-color: gray;
    position: relative;
}

#video{    
    width: 100vw; 
    height: auto;
    margin: auto;
    display: block;
}
@media (min-aspect-ratio: 16/9) {
  #video{
    width: 100vw; 
    height:auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #video {
    height: 100vh; 
    width:auto;
    margin-left: 50vw;
    transform: translate(-50%);
  }
}

#videoMessage{
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/**** fin video ****/

.collapse-txt.collapse:not(.show) {
  display: block;
  height: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapse-txt.collapsing {
  height: 3rem;
}

.par[data-lng="en"] a.collapsed::after {
  color: #9A2321;
  content: '+ Show More';
}

.par[data-lng="en"] a:not(.collapsed)::after {
  color: #9A2321;
  content: '- Show Less';
}

.par[data-lng="fr"] a.collapsed::after {
  color: #9A2321;
  content: '+ Afficher Plus';
}

.par[data-lng="fr"] a:not(.collapsed)::after {
  color: #9A2321;
  content: '- Afficher Moins';
}


@media screen and (max-width: 768px) {
  .skills {
    left:0%;
  }
}


.btn-primary, .btn-primary:hover {
  background-color: #9A2321;
  border-color: #9A2321;
}

.icon-custom {
  color: #9A2321
}

.loader-wrapper {
  
}

.videoLoad {
  position: fixed;
  z-index: 1300;
  background-color: black;
  height: 100%;
    width: 100%;
  cursor: wait;
  text-align: center;
  align-items: center;
}

h2 {
  color: #9a2321;
}

#text-debut {
  color: white;
}

#text-debut2{
  color: #9a2321;
}

#text-debut2en {
  color: #9a2321
}

.button-a, .button-a:hover {
    background-color: #9A2321;
  border-color: #9A2321;

}