@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900&display=swap');

  html, body { width: 100%; height: auto; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight:300 ; font-size: 14px; overflow-x: hidden !important; }
  body { animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */ }
@keyframes fadein { from { opacity:0; } to { opacity:1;} }

@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity:1;} }

h1, h2, h3, h4, h5, hr, a, li, p {  transition: all 0.3s !important;  }
  body { overflow-x: hidden !important; background: url(img/fondo.jpg) no-repeat top center;  }
  header { width: 100%; height: 80px; position: fixed; top: 0; z-index: 25; transition:all 400ms ease; background: none; padding-top: 10px;  backdrop-filter: blur(10px); background: rgba(0, 0, 0, .4); }
  header hr { width: 1px; height: 15px; background: none; margin:0 20px; vertical-align: middle; }
  header ul { position: relative; width: 100%; text-align: center; margin-left: -40px; }
  header ul li { display: inline-block; vertical-align: middle; color: #fff; margin: 0 .5vw; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; }
  header ul li a { color:#fff; font-weight: 600;  }
  header ul li a:hover { opacity: .6; color: #fff; text-decoration: none;  }
  input { width: 100%; height: 30px; padding: 8px; border: none; margin-bottom: 5px;  }
  textarea { width: 100%; height: 130px; padding: 8px; border: none; margin-bottom: 5px; resize:none; clear: both; }
  input[type=submit] { background: #302b87; width: 150px; height: 40px; line-height: 20px; color: #fff; font-weight: 700; float: right; }
    ::-webkit-input-placeholder { color: #000 !important; }
    ::-moz-placeholder { color: #000 !important; }
    :-ms-input-placeholder { color: #000 !important; }
    :-moz-placeholder { color: #000 !important; }

  .logo { width: 70px; }
  .burger { position: absolute; top: 30px; right: 52px; cursor: pointer; color: #fff;  }
  .wh { position: fixed; right: 5px; top: 70vh; z-index: 999999999999; }
  .close { width: 30px; position: absolute; top: 25px; right: 25px; }

  .rs { position: relative; top: 28px; right: 120px; }
  .rs a { margin:10px 0; display: inline-block;  }
  .rs a:hover { color:#fff;  }
  .rs a.dis { color: #fff; font-size: 13px; }
  
  section { width: 100%; min-height: 800px !important; position: relative;  }
  #contacto {  background: url(img/contacto.png) no-repeat top center; padding: 100px 0 !important;  } 


  #tecnobasculas {  background: url(img/inicio.png) no-repeat top center; background-size: 100% auto; padding: 180px 0 0 0 !important; position: relative; text-align: center !important;  }
  #tecnobasculas h1 { width: 55%; position: absolute; right: 50px; bottom: 50px; text-align: right; color: #312a87; font-size: 4vw; padding-right: 20px; font-weight: 900; border-right:10px #312a87 solid ; }
  #tecnobasculas h1 > span { font-size: 1.5vw; display: block; }
  .logo-inicio { width: 25%; position: relative; left: -1%; bottom: 50px; }
  #descripcion { background: rgba(255, 255, 255, .9); padding: 25px; max-width: 70%; margin: 25px auto; border-radius: 30px; color: #312a87; font-weight: 700; }

  #basculas { color: #5d5d5d;}
  #basculas h2 { text-align: right !important; color: #312a87; font-size: 4.5vw; font-weight: 900; }
  .desq { margin-bottom: 20px; }
  .desq h3 { color: #312a87; font-size: 32px; border-left: #fe0000 solid 10px; padding-left: 5px; margin-bottom: 15px; }
  .banda { background: #fe0000 ; color: #fff ; padding: 25px 3%; position: relative; }
  .banda h4{ max-width: 25%; font-size: 32px; font-weight: 800; display: inline-block; vertical-align: middle; padding: 0 2%; z-index: 5; }
  .banda p { max-width: 45%; display: inline-block; vertical-align: middle; padding: 0 2%; position: relative; z-index: 5; }
  .traler_ { position: absolute; right: 20px; width: 55%; top: -20px;  z-index: 2; }

  #somos { padding: 90px 0 !important; height: auto !important; }
  .we_ { background: #302b87; padding: 50px; }
  .somos { position: absolute; margin-top: -25%; }
  .we_ h2 { color:#0071bd; font-size: 5vw; line-height: 4.5vw; margin-bottom: 25px; font-weight: 700; }
  .we_ p { color:#fff; font-size: 14px; }

  iframe { border:#c70909 solid 13px; }
  .menos { padding: 15px !important; background: rgba(199, 9, 9, .7); color: #fff; }
  .menos h3 { font-size: 4vw;  }

  #remate { width: 100%; height: auto !important; padding: 15px 0; background: #302b87; color: #fff; text-align: right; }
  #remate p { font-size: 12px; line-height: 10px; }
  #remate img { margin-bottom: 2px; }
  #remate a { color:#fff; text-decoration: none; cursor: pointer !important; }
  #remate a:hover { opacity: .7 !important; }
  #servicios { background: #f2f2f2; height: auto !important; padding: 0 !important; }
  #servicios .col-sm-7 { margin: 0 !important; }
  #servicios h2 { color: #ff0000; font-size: 6vw; text-transform: uppercase; font-weight: 800; }
  #servicios .copy { color: #302b87; font-size: 22px; font-weight: 600; max-width: 450px; }
  .esconde { opacity: 0;}
  .servicios { background: url(img/servicios.png) no-repeat center; height: 100% !important; margin: 0 0 0 -20px !important; position: relative; background-size: auto 130%; padding: 0 !important;  }
  .base_ { padding: 5%; }
  .base { background: #fe0000; color:#fff; padding: 8.3%; padding-right: 10%; }
  .base h3 { color: #fff; font-size: 32px; border-left: #312a87 solid 10px; padding-left: 5px; margin-bottom: 15px; }
  .productos-img { margin: 0px 0px -15vw 0; }
  .btn { margin: -1.5px; display: inline-block; vertical-align: middle; border-radius: 25px; cursor: pointer; }
    .btn1 { margin: -1.5px; display: inline-block; vertical-align: middle; border-radius:25px; }
  .btn_ { margin: -12px; border-radius: 15px; display: inline-block; vertical-align: middle; position: relative; z-index: 10; cursor: pointer }
  .pro { -webkit-filter: drop-shadow(5px 5px 5px #222);  filter: drop-shadow(5px 5px 5px #222); }
  .pro h2 { margin: 90px auto; background: yellow; width: 90%; font-size: 4vw; font-weight: 700; }
  .pro img { width: 20%; height: auto; margin: -10px; }
  .bas { width: 500px; height: 615px; text-align: center; padding: 230px 65px 45px 65px; font-size: 13px; }
   .bas h3 { color: #2f2b87; font-weight: 700; }
  .modal-content { background: none; border: none; }
  .ser1 { background: url(img/ser1.png) no-repeat center; }
  .ser2 { background: url(img/ser2.png) no-repeat center; }
  .ser3 { background: url(img/ser3.png) no-repeat center; }
  .ser4 { background: url(img/ser4.png) no-repeat center; }
  .title-pro { margin: 45px auto; text-align: center; font-size: 6vw; width: 550px; font-weight: 800; color: #302b87; background: #fff; position: relative; z-index: 10; }
  .hr { margin: -90px auto 150px auto ; width: 90%; height: 8px; background: #302b87; position: relative; }
  .barra1 { position: absolute; left: 0; bottom: 0; }
  .barra2 { position: absolute; right: 0; bottom: 0; }


#galeria { padding: 75px 0 !important; height: auto !important; }

.carousel {  }
 .carousel img{
  width: 100%;
  height: auto;
  margin-right: 1px;
  border-radius: 25px !important;
  overflow: hidden;
}


.flickity-button {
    position: absolute;
    background: hsla(0,0%,100%,.0) !important;
    border: none;
    color: #0f74d9 !important;
}



@media only screen and (max-width: 690px) {
    section { width: 100%; height: auto !important; position: relative;  }
   #tecnobasculas {  background: url(img/inicio.png) no-repeat top center; background-size: auto 100%; padding: 100px 0 !important; position: relative; height: 450px !important;  }
   .men { display: none; }
   
   #basculas { color: #5d5d5d;}
   #basculas h2 { text-align: right !important; color: #312a87; font-size: 4.5vw; font-weight: 900; }
  .desq { margin-bottom: 20px; }
  .desq h3 { color: #312a87; font-size: 32px; border-left: #fe0000 solid 10px; padding-left: 5px; margin-bottom: 15px; }

  .banda { background: #fe0000 ; color: #fff ; padding: 25px 3%; position: relative; }
  .banda h4{ max-width: 100%; font-size: 32px; font-weight: 800; display: inline-block; vertical-align: middle; padding: 0 2%; z-index: 5; }
  .banda p { max-width: 100%; display: inline-block; vertical-align: middle; padding: 0 2%; position: relative; z-index: 5; }
  .traler_ { position: relative; right: 20px; width: 90%; top: 40px;  z-index: 2; }

.somos { position: relative; margin-top: -25%; margin-bottom: 45px; }
 .title-pro { margin: 45px auto; text-align: center; font-size: 6vw; width: 50%; font-weight: 800; color: #302b87; background: #fff; position: relative; z-index: 10; }
  .hr { margin: -65px auto 150px auto ; width: 90%; height: 8px; background: #302b87; position: relative; }
    }


    @media only screen and (max-width: 550px) {
         .pro img { width: 75% !important; height: auto; margin: -10px; }
         .btn { width:85% !important; padding: 0 !important; }
         #remate p { font-size: 11px; line-height: 10px; }
         .logo-inicio {    width: 60%;    position: relative;  padding-top: 50px;   left: 0px;    bottom: 30px; }
    }


  @media only screen and (max-width: 480px) {
    .logo { position: absolute; left: 25px; top: 0px; }
    .desq { padding: 3%; }

    #basculas h2 {
    text-align: left !important;
    color: #312a87;
    font-size: 6.5vw;
    font-weight: 900;
    padding: 3% ;
}

    #tecnobasculas h2 {
    width: 60%;
    position: relative;
    left: 20px;
    bottom: 50px;
    text-align: left;
    color: #312a87;
    margin-top: 40px;
    font-size: 4vw;
    padding-left: 20px;
    font-weight: 900;
    border-left: 10px #312a87 solid;
    border-right: none;
}

.btn {
    margin: -1.5px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 25px;
    width: 75% !important;
    cursor: pointer;
}


    section { width: 100%; min-height: auto !important; position: relative; padding: 100px 0;  }
     .menos h3 {    font-size: 7vw; margin: 20px; }
     .menos { padding: 15px !important; background: rgba(199, 9, 9, .5); color: #fff; }
     input, textarea { width: 90%; margin:0  20px 20px 20px !important; }

}