@font-face {

  font-family: "CAPELO";

  src: url("assets/fonts/Transport.otf")

}



html, body { height: auto; font-family: "CAPELO";}

/*.panel {

  height: 100vh;

  position: sticky;

  top: 0;

}*/



nav{

  background-color: transparent !important; 

  position: fixed !important; 

  width: 100%; 

  mix-blend-mode: difference;

}



.navbar-brand lootie-player{

  width: 60px;

  height: 35px;

}



#lootie-status{

  display: none;

}



.owl-carousel .owl-item img{

  height: 100vh;

  object-fit: cover;

}



.owl-prev, .owl-next {

  position:absolute;

  font-size: 10vh !important;

  color: #FD5826 !important;

  mix-blend-mode: difference;

}



.owl-prev {

  left: 2vh;

  top: 40vh;

}



.owl-next {

  right: 2vh;

  top: 40vh;

}



.menu a{

  text-decoration: none;

  cursor: pointer;

}



.menu span{

  margin-right: 2vh; 

  color: white;

  font-size: 12px;

  cursor: pointer;

}



.navbar-brand img{

  margin: 0 20px;

  width: 45px;

  cursor: pointer;

  mix-blend-mode: difference;

}



#servicios{

  /*background: #0043A8;*/

  background: #842029;

}



#servicios .services{

  margin: 0 !important;

  padding: 2vh;

}



#servicios .services h1{

  text-align: center;

  color: white;

  mix-blend-mode: difference;

  font-size: .8rem;

  padding-bottom: 1vh;

  font-weight: 100;

  text-transform: uppercase;

}



#servicios lottie-player{

  width: 120px;

  height: 120px;

  mix-blend-mode:difference; 

  margin: 0 auto;

}



#servicios .looties{

  padding: 2vh 0;

}



.title{

  color: white; 

  mix-blend-mode: difference;

  margin-bottom: 2vh;

}



.description{

  color: white; 

  mix-blend-mode: difference;

  font-size: 1rem;

  text-align: justify;

  padding: 1vh 0;

  font-weight: 300;

}



#estudio .can > img {

  width: 165px;

  height:auto;

  cursor: zoom-in;

}



#estudio{

  background: #0A443C;

}



.btn{

  color: white !important;

  background-color: transparent !important;

  mix-blend-mode: difference;

  padding: 1rem !important;

  border-radius: 30px !important;

  font-weight: 600 !important;

  border: 1px transparent; !important;

  transition: background-color 1s, color 1s;

  margin: 2vh 0;

}



.btn:hover{

  color: #000 !important;

  background-color: white !important;

}



.social img{

  width: 45px;

  mix-blend-mode: difference;

  margin-bottom: 1vh;

  transition: transform .5s ease;

}



.social img:hover{

   transform: scale(1.2);

}



#estudio .mobile{

  display: none;

}



#mobile-carousel .owl-item img{

  width: 100%;

  height: 100%;

}



.owl-dots{

  display: none;

}



#estudio .desktop{

  margin: 5vh 0;

}



.social{

  margin: 1vh 0;

}



#trabajo{

  background: #001e26;

}



#trabajo #presentacion img{

  width: 35%;

  margin: 0 auto;

}



#trabajo #presentacion{

  margin: 2vh 0;

  padding: 0;

}



#main-carousel .owl-nav .owl-next, #main-carousel .owl-nav .owl-prev{

  display: none;

}



.brand{

  position: absolute;

  z-index: 2;

  mix-blend-mode: difference;

  top : 5%;

  left: 10%;

}



.brand .gif{

  width: 1024px;

}



.brand .logo{

  width: 25vh;

  margin: 2vh;

}



.brand .logo2{

  width: 30vh;

  margin-top: 2vh;

}



#social{

  background: black;

}



.shapes{

  background: url(assets/images/shapes.png);

  background-repeat: no-repeat;

  position: absolute;

  top: 20%;

  left: 37%;

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

  width: 500px;

  height: 500px;

  background-position: center;

  background-size: 500px  ;

  animation: spin 33s linear infinite;

  mix-blend-mode: hard-light;

}



.button-technics{

  width: 85px;

  height: 35px;

  background-color: #C0C4C5;

  cursor: pointer;

  mix-blend-mode: normal;

  border : 6px solid burlywood;

}



.button-technics p{

  font-size: 8px;

  text-align: center;

  margin: auto;

  font-weight: 700;

  padding: 7px;

}



.navbar-brand{

  display: flex !important;

  align-items: center;

}



.spin{

  animation: spin 3s linear infinite;

}



/*.show{

  animation: show 2s;

}*/



.pause{

  animation-play-state: paused;

}



.hidden{

  display: none;

}



#home{

  background: transparent;

}



#home .button-technics{

  margin: 3vh 0;

}



.artist-name,.song-name{

  color: white;

  font-size: .8rem;

  margin-right: 5px;

}



.player{

  height: 50px;

  position: fixed;

  width: 100%;

  bottom: -50px;

}



.player img{

  width: 30px;

  height:30px;

  margin: 10px;

}



.player .controls .info{

  color: white;

  margin-left: 10px;

  width: 30vh;

}



.player .controls .info p{

  margin:5px;

  font-size: .6rem;

}



#mute,#play,#next, #prev{

  color: white;

  font-size: 18px;

  cursor: pointer;

}



.slidecontainer {

  display: flex;

  width: 100%;

  padding: 0 10%;

}



.box-item {

  height: 50px;

  position: relative;

}



.vertical-center {

  width: 100%;

  margin: 0;

  position: absolute;

  top: 50%;

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}



#mute{

  width: 30px;

}



.progress-bar{

  background-color: #50555C !important;

}



.form-control{

  background-color: transparent !important;

  border: none !important;

  border-bottom: 1px solid white !important;

  color: white !important;

  mix-blend-mode: difference !important;

  margin-bottom: 10px;

}



.custom-select{

  background-color: transparent;

  border: none;

  width: 100%;

  border-bottom: 1px solid white;

  mix-blend-mode: difference;

  color: white;

  margin : 20px 0 10px 0;

}



.form-group label{

  color: white;

  mix-blend-mode: difference;

}



#trabajo button{

  width: 200px !important;

  margin : 5vh auto !important;

  display: block !important;

}



.status-player{

  width: 60px;

  height: 35px;

}



input[type=range] {

  -webkit-appearance: none;

  width: 80%;

  background: transparent;

}

input[type=range]:focus {

  outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 10px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 1px 1px 1px #50555C;

  background: #50555C;

  border-radius: 16px;

  border: 0px solid #000000;

}

input[type=range]::-webkit-slider-thumb {

  box-shadow: 0px 0px 0px #000000;

  border: 0px solid #000000;

  height: 16px;

  width: 16px;

  border-radius: 16px;

  background: #E1E1E1;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -3px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

  background: #50555C;

}



/*input[type=range]::-moz-range-track {

  width: 100%;

  height: 10px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 1px 1px 1px #50555C;

  background: #50555C;

  border-radius: 16px;

  border: 0px solid #000000;

}

input[type=range]::-moz-range-thumb {

  box-shadow: 0px 0px 0px #000000;

  border: 0px solid #000000;

  height: 16px;

  width: 16px;

  border-radius: 16px;

  background: #E1E1E1;

  cursor: pointer;

}

input[type=range]::-ms-track {

  width: 100%;

  height: 10px;

  cursor: pointer;

  animate: 0.2s;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: #50555C;

  border: 0px solid #000000;

  border-radius: 32px;

  box-shadow: 1px 1px 1px #50555C;

}

input[type=range]::-ms-fill-upper {

  background: #50555C;

  border: 0px solid #000000;

  border-radius: 32px;

  box-shadow: 1px 1px 1px #50555C;

}

input[type=range]::-ms-thumb {

  margin-top: 1px;

  box-shadow: 0px 0px 0px #000000;

  border: 0px solid #000000;

  height: 16px;

  width: 16px;

  border-radius: 16px;

  background: #E1E1E1;

  cursor: pointer;

}

input[type=range]:focus::-ms-fill-lower {

  background: #50555C;

}

input[type=range]:focus::-ms-fill-upper {

  background: #50555C;

}*/





#video iframe{

  width: 100%;

  height: 100%;

  margin-top: 50px;

}



#video{

  background-color: black;
  min-height: 100vh;

}



#video .cv{

  width: 1024px;

  height: 600px;

  margin: 0 auto;

}





.modal .modal-body iframe{

  margin: 0 auto;

  display: block;

}



.modal .modal-body .list-group .list-group-item{

  cursor: pointer;

}



#video button{

  display: block;

  margin: 10px auto;

  border: none;

}

.modal-body, .modal-content{
  background: blue !important;
}

.modal-header, .modal-footer{
  border-bottom: none !important;
  border-top: none !important;
  color: yellow;
}

.list-group-item{
  background: greenyellow !important;
}

.btn-primary:hover{
  background: greenyellow !important;
}

.modal-dialog{
  margin-top: 20em !important;
}


/* width */

::-webkit-scrollbar {

  width: 5px;

}



/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey; 

  border-radius: 10px;

}

 

/* Handle */

::-webkit-scrollbar-thumb {

  background: red; 

  border-radius: 10px;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000; 

}



@-webkit-keyframes spin {

   0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/*@keyframes show{

  from { bottom: -50px }

  to{ bottom: 0 }

}*/



/* Extra small devices (phones, 600px and down) */

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

  .owl-prev {

    left: 1vh;

    top: 35vh;

  }



  .owl-next {

    right: 1vh;

    top: 35vh;

  }



  #mobile-carousel .owl-prev {

    left: 3vh;

    top: 26vh;

  }



  #mobile-carousel .owl-next {

    right: 3vh;

    top: 26vh;

  }



  #mobile-carousel{

    position: inherit !important;

  }



  #portada{

    display: none;

  }



  #indicadores{

    padding: 0 20px;

  }



  #servicios lottie-player{

    width: 80px;

    height: 80px;

  }



  #servicios .services h1{

    font-size: 1.5vh;

  }



  #estudio .can > img {

    width:150px;

  }



  #estudio .desktop{

    display: none;

  }



  #estudio .mobile{

    display: initial !important;

    padding: 0 !impotant;

  }



  .description{

    color: white; 

    mix-blend-mode: difference;

    font-size: .8rem;

    text-align: justify;

    padding: 1vh;

  }



  #trabajo #presentacion img{

    width: 100%;

    padding: 0 5vh;

  }



  .brand .logo{

    width: 20vh;

    margin: 5vh;

  }



  .brand .logo2{

    width: 25vhvh;

  }



  .brand{

    top:30%;

    right: 5%;

  }



  .brand .gif{

    width: 350px;

  }



  .navbar-brand img{

    width: 35px;

  }



  .btn{

    font-size: .7rem;

  }



  .shapes {

    top: 35%;

    left: 25%;

    width: 30vh;

    height: 30vh;

    background-size: 30vh;

  }



  iframe{

    height: 600px;

    width: 300px; 

    display: block; 

    margin: 0 auto; margin-top:80px

  }

  .modal-dialog{
    margin-top: 10em !important;
  }

}



@media only screen and (min-width : 600px){

  #estudio .desktop{

    display: none;

  }



  #estudio .mobile{

    display: initial !important;

  }



  #mobile-carousel .owl-prev {

    left: 0;

    top: 10vh;

  }



  #mobile-carousel .owl-next {

    right:0;

    top: 10vh;

  }



  .owl-carousel{

    padding: 0 !important;

  }



  .description{

    color: white; 

    mix-blend-mode: difference;

    font-size: .8rem;

    text-align: justify;

    padding: 1vh;

  }



  .shapes {

    top: 26%;

    left: 20%;

    width: 40vh;

    height: 40vh;

    background-size: 40vh;

  }

}



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



  #mobile-carousel .owl-prev {

    left: 2vh;

    top: 17vh;

  }



  #mobile-carousel .owl-next {

    right:2vh;

    top: 17vh;

  }

}



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

  #estudio .desktop{

    display: inherit;

  }



  #estudio .mobile{

    display: none !important;

    padding: 0 !impotant;

  }



  #estudio .can > img{

    width: 160px;

  }



  .shapes {

    top: 26%;

    left: 34%;

    width: 40vh;

    height: 40vh;

    background-size: 40vh;

  }

}



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

  #estudio .desktop .can img{

    width: 195px;

  }



  .description{

    color: white; 

    mix-blend-mode: difference;

    font-size: .8rem;

    text-align: justify;

    padding: 1vh 20vh;

  }



  .shapes {

    top: 27%;

    left: 35%;

    width: 400px;

    height: 400px;

    background-size: 400px;

  }

}



@media only screen and (min-width:  1380px){

  .shapes {

    top: 20%;

    left: 37%;

    width: 500px;

    height: 500px;

    background-size: 500px  ;

  }

  iframe{

    height: 512px width: 1024px;

  }



  .brand .gif{

    width: 1280px;

  }

}

@media only screen and (min-width:  1920px){
  .brand{
    top: 12%;
    left : 17.5%;
  }
}