body, html {
    background-color: #152051;
}

main {
    overflow-x: hidden;
    display: flex;
    position: sticky;
    top:0;
  }

  .bouton {
	/*background: rgb(77,151,252);
    background: linear-gradient(90deg, rgba(77,151,252,1) 0%, rgba(30,8,87,1) 100%);*/
	background: rgb(1, 134, 202);
   /* background: linear-gradient(90deg, rgb(8, 139, 221) 0%, rgba(40,68,166,1) 45%, rgba(147,68,145,1) 100%);*/
	border-radius:30px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:19px;
	padding:15px 41px;
	text-decoration:none;
	text-shadow:0px 0px 0px #2f6627;
    font-weight: 300;
    font-weight: 600;
}
.bouton:hover {
	background: #3b5eb3;
    color:#fff;
}
.bouton:active {
	position:relative;
	top:1px;
}


#pointer-dot {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 2.5px solid white;
    position: fixed;
    border-radius: 4px;
    z-index: 150;
    pointer-events: none;
    transition: border-color 0.5s;
}

#pointer-ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 15px;
    border: 2px solid #750c7e;
    position: fixed;
    border-radius: 100px;
    z-index: 200;
    pointer-events: none;
}

html {
    cursor: none !important;
}

a {
    cursor: none !important;
}


.fade-in {
    -webkit-animation-name: fadeInOpacity;
            animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
  }

  .fade-in2 {
    -webkit-animation-name: fadeInOpacity;
            animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }


.modal-content {
  background: rgb(36,51,66);
  background: linear-gradient(90deg, rgb(19, 33, 104) 0%, rgb(53, 60, 113) 47%, rgb(93, 49, 138) 100%);
  color: #fff;
  border: none;
}

.modal-content-contact {
  background: rgb(36,51,66);
  background: linear-gradient(135deg, #7f279c 0%, #2e279d 100%);
  color: #fff;
  border: none;
}

.modal-content-contact .modal-header  {
  border-bottom: none;
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  /*margin-top: 10px;*/
}
.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}
.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #ddd;
}
.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #8bb5ff, #2e78f9);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0px;
  left:0px;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #8bb5ff;
  font-weight: 700;
}
/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}

.btn-contact {
  background-color: #ffffff;
  color: #3e279d;
  border: none;
  font-weight: 700;
}

.btn-contact:hover {
  background-color: #6c479b;
  color: #ffffff;
}

#closeContactModal:focus {
  box-shadow: none;
  border:none;
}
  
  @-webkit-keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  .fade-out {
    -webkit-animation-name: fadeOutOpacity;
            animation-name: fadeOutOpacity;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
  }
  
  @-webkit-keyframes fadeOutOpacity {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes fadeOutOpacity {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


  /**** Pulse eye *****/
.icon{
    position: absolute; 
    width: 60px;
    height: 60px;
    background: url(../img/eye1.png) no-repeat;
    background-size: 60px 60px;
    margin: auto; 
    z-index: 3;
    left:50%;
    transform: translate(-50%, 0px);
    -webkit-border-radius: 999px; 
    -moz-border-radius: 999px;
    border-radius: 999px;
    /* border-radius: 50% has issues on some mobile browsers */
}

#check {
    box-shadow: none;
}

.icon:hover {
    background: url(../img/eyeopen.png) no-repeat;
    background-size: 60px 60px;
}

.icon-open {
    background: url(../img/eyeopen.png) no-repeat;
    background-size: 60px 60px;
}




#menu-filter {
    max-height: 20px;
    transition: max-height 0.25s ease-in;
    overflow: hidden;
}

#menu-filter:hover {
    max-height: 320px;
    transition: max-height 0.25s ease-in;
}

.card {
    border-radius: 0px;
    border: 0px;
    background-color: #252638;
    overflow: hidden;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    position: absolute;
    top: 10px;
    right:10px;
}
  
@media (max-width: 576px) { 
  #logo {
    max-width:100px;
    position: absolute;
    top: 10px;
    left:10px;
  }   

  .icon{
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    top:2px;
  }

  .pulse1, .pulse2 {
    width: 43px;
    height: 43px;
    left: 11px;
    top:0px;
  }
}


.tooltip-inner {
    width: 1000px !important;
  }




  a {
    text-decoration:none;
    color:#FFF;
  }
  
  
  @keyframes slidebg {
    to {
      background-position:20vw;
    }
  }


  
  @keyframes animatedgradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }

  /* END BUTTON HOME SHAKE*/

  .form-control::placeholder {
    color:rgb(165, 164, 164);
    opacity: 1;
  }

  .form-control {
    border: none ;
  }


  .hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: rgb(255, 255, 255);
    text-align: center;
    height: 1.5em;
    margin-top: 4px;
  }
    .hr-text:before {
      content: '';
      background: linear-gradient(to right, transparent, #ffffff, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
    }
    .hr-text:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      color: rgb(255, 255, 255);
  
      padding: 0 .5em;
      line-height: 1.5em;
      color: #ffffff;
      font-size: 25px;
      background-color: #21468d;
      vertical-align: middle;
    }




blockquote {
	font-weight: 100;
	font-size: 22px;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: .5rem;
  color:#fff;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -4rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -4rem;
	bottom: 1rem;
}


.radial-gradient {
 
  /*Fallback if gradeints don't work */
  background: #2750a0;
  /*Linear gradient... */
  background: 
    radial-gradient(
     at center, #2750a0, #0d2148
    );
}


/*  FOOTER */
#main {
  /* make sure to cover the screen */
  min-height: 100%;
  /* need a solid bg to hide the footer */
  /* put on top */
  position: relative;
  z-index: 2;
  padding: 2rem;
  }

  * {
  box-sizing: border-box;
  }

  .footer-content {
  /* place on the bottom */
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 50px;
  }

#logoMenu:hover {
  width: 160px;
}
/* icon home pages views */
.icon-container {
  margin-top: 30px;
  width: 100%;
  height: 60px;
}
.iconHome {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 30px;
  overflow: hidden;
}
.iconHome::before, .iconHome::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.25s ease;
  border-radius: 30px;
}
.iconHome i {
  position: relative;
  color: #fff;
  font-size: 30px;
  margin-top: 15px;
  transition: all 0.25s ease;
}
.icon-fill::before {
  transition-duration: 0.5s;
  box-shadow: inset 0 0 0 1px #0583c8;
}
.icon-fill:hover::before {
  box-shadow: inset 0 0 0 60px #156ebf;
}
.icon-enter::after {
  box-shadow: inset 0 0 0 1px #eb9532;
}
.icon-enter::before {
  border-radius: 0;
  margin-left: -100%;
  box-shadow: inset 0 0 0 60px #eb9532;
}
.icon-enter:hover::before {
  margin-left: 0;
}
.icon-expand::after {
  box-shadow: inset 0 0 0 1px #c82647;
}
.icon-expand::before {
  background: #c82647;
  box-shadow: inset 0 0 0 60px #2d2c3e;
}
.icon-expand:hover::before {
  box-shadow: inset 0 0 0 1px #2d2c3e;
}
.icon-collapse::before {
  border-radius: 0;
}
.icon-collapse:hover::before {
  box-shadow: inset 0 30px 0 0 #8cc63f, inset 0 -30px 0 0 #8cc63f;
}
.icon-collapse::after {
  box-shadow: inset 0 0 0 1px #8cc63f;
}
.icon-rotate {
  box-shadow: inset 0 0 0 1px #7e3661;
}
.icon-rotate::after, .icon-rotate::before {
  border: 0px solid transparent;
}
.icon-rotate:hover::before {
  transition: border-top-width 0.3s ease, border-top-color 0.3s ease;
  border-width: 60px;
  border-top-color: #7e3661;
}
.icon-rotate:hover::after {
  transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
  border-width: 60px;
  border-left-color: #7e3661;
}
.icon-rotate:hover {
  transition: background 0.001s ease 0.3s;
  background: #7e3661;
}
.icon-rotate i {
  z-index: 1;
}

/* end icon */

/* MEDIA QUERIES */


@media (max-width: 576px) { 
  .work-entry-cat, .work-entry-title {
    font-size: 12px;
  }
  #containerOtherProjects h1 span {
    font-size: 11px;
  }
  #containerOtherProjects h1 {
    font-size: 12px;
  }
  #containerOtherProjects {
    max-height:150px;
  }

  footer img {
    max-width: 200px;
  }

  
}