/*---LINKS---*/

.hover-animation a{
  width: max-content;
  display: inline-block;
  position: relative;
}

.hover-animation a:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-animation a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
/*---FORM---*/

  .form-control{
    border-radius: 0;
    border: 1px solid #ced4da55;
    background-color: #141618;
    color: #fff;
  }
  .form-control:focus{
    background-color: #212529;
    color: #fff;
    border-color: #fff;
    box-shadow: none;
  }
  .form-floating label{
    color: #fff;
  }
  .form-textarea label{
    background-color: #141618;
    height: unset;
    color: #fff;
    margin: 1rem .75rem;
    padding: 0;
  }
  .form-textarea > .form-control:focus ~ label{
    background-color: #212529;
  }
  .col-form{
    background-color: #141618;
  }
  
/*---NAVBAR---*/

@media (min-width: 768px){
  .salvado{
    display: none;
  }
  .navtop{
    padding: 0;
    border-left: 1px solid rgba(255,255,255,.3);
    transition: border 0.3s ease-in;
    justify-content: center;
    height: 6rem;
    width: 6rem;
    right: 0;
  }
  .locked .navtop{
    border-left: 0;
    transition: border 0.3s ease-in;
  }
  .menu-lang{
    right: 2rem;
  }
  
}
@media (max-width: 576px){
  .salvado-img{
    display: none;
  }
}
.salvado-img{
    height: 100%;
    display: flex;
  }

/*---FORM MODAL---*/

.modal{
  width: 640px;
  height: 700px;
}

.modal .btn-close-white{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
  color: #fff;
}

#modal-container.formButton {
  transform: scale(1);
}
#modal-container.formButton .modal-background {
  background: rgba(0, 0, 0, 0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton .modal-background .modal h2, #modal-container.formButton .modal-background .modal form .row {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton .modal-background .modal button{
  opacity: 0;
  animation: modalButtonFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton.out .modal-background .modal button{
  animation: modalButtonFadeOut 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container.formButton.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton.out .modal-background .modal h2, #modal-container.formButton.out .modal-background .modal form .row {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.formButton.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}
#modal-container .modal-background .modal {
  background: #000;
  padding: 50px;
  display: inline-block;
  font-weight: 300;
  position: relative;
}
#modal-container .modal-background .modal h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}
#modal-container .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
}
#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
#modal-container .modal-background .modal .modal-svg rect {
  stroke: #141618;
  stroke-width: 2px;
  stroke-dasharray: var(--modalLength);
  stroke-dashoffset: var(--modalLength);
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes sketchIn {
  0% {
    stroke-dashoffset: var(--modalLength);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--modalLength);
  }
}
@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: #141618;
  }
}
@keyframes modalFadeOut {
  0% {
    background-color: #141618;
  }
  100% {
    background-color: transparent;
  }
}
@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}
@keyframes modalButtonFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modalButtonFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}