nav {
  padding-bottom: 10px;
  /* border:1px solid black; */
}
nav img {
    /* filter:invert(); */
    width:140px;
    margin-top:12px;
    margin-left: 12px;
    margin-right: 10px;
}

body{
  font-family: 'Nunito Sans', sans-serif;
}

.opt {
    text-decoration: none;
    color: black;
    margin-left:10px;
    padding: 20px;
    position: relative;
    top:12px;
    font-size: 17px;
}

.opt:hover {
  color:#673AB7;
  font-weight: bold;
}



.col img {
    height:300px;
    width: auto;
    border-radius: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.6);

}

ul {
  list-style-type: none;
}

#pag{
  color:black;
  margin-left: 60px;
}

#pag:hover{
  color:#673AB7;
}

.pag {
  margin-top: 10px;
}

h2 {
  font-size: 40px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: bold;
}

.container {
    margin-top: 18vh;
}

/* animacion typewriter */
.txt-type > .txt {
    border-right: 0.08rem solid #111;
    padding-right: 2px;
    /* Animating the cursor */
    animation: blink 0.6s infinite;
  }

  /* ANIMATION */
  @keyframes blink {
    0% {
      border-right: 0.08rem solid black;
    }
    100% {
      border-right: 0.08rem solid rgba(255, 255, 255, 0.2);
    }
  }
    #page .section-background {background: white;}
    #page section * {color: black !important;}
    #page .content {
      width: 100%;
  }

  /* animacion typewriter */
.description {
    margin-bottom: 40px;
    font-size: 22px;
}


.button a{
    text-decoration: none;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right:30px;
    padding-left: 30px;
}
.button, button {
        /* --v-padding: 14px;
        --h-padding: 34px;
        --sat-boost: 0%;
        --light-boost: 0%; */
        padding-top: 1px;
        padding-bottom: 1px;
        padding-right:1px;
        padding-left: 1px;
        display: inline-block;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: linear-gradient(to right, #673AB7 0%, #512DA8  51%, #673AB7  100%);
        border: none;
        border-radius: 100px;
        box-shadow: 0 3px 9px rgb(0 0 0 / 5%);
        color: aliceblue;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        outline: none;
        text-decoration: none;
        text-shadow: 0 1px rgb(0 0 0 / 5%);
        transition-duration: .1s;
        user-select: none;

    }

.button:hover {
    color:#fff;
    transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}

.gratis{
    margin-left:3px;
    opacity: 0.3;
}


.btn-grad {background-image: linear-gradient(to right, #673AB7 0%, #512DA8  51%, #673AB7  100%)}
.btn-grad {
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  /* background-color: #efefef; */
  text-align: center;
}

footer a {
  text-decoration: none;
  color: gray;
}

footer a:hover{
  color:#673AB7;
}

footer i {
  padding-right: 5px
}

/* slideshow */

#slideshow { 
  /* margin: 50px auto;  */
  position: relative; 
  width: 240px; 
  height: 240px; 
  padding: 10px; 
  /* box-shadow: 0 0 10px rgba(0,0,0,0.4);  */
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

/* moviles */
@media screen and (max-width: 640px) {
  
  .col {
    text-align: center;
  }
  
  /* .col img {
    display: none;
  } */

   #pag{
    margin:0;
  }

  /* #col2 {
    display: none;
  } */

  nav {
    width:200px;
    margin: 0 auto;
    text-align: center;
  }
  .opt {
    display: none;
  }

  .row {
    margin-top: 18vh;
    /* display: flex; */
    flex-direction: column;
    margin:0;
    padding: 0;
  }

  .col img {
    width: 100%;
    height: auto;
    margin-bottom:0;
    padding:0;
  }

  #webstore{
    margin-bottom:20px;
  }
  #slideshow > div {
    /* position:absolute; */
    padding: 0;
    width: 100%;
    
  }

  #slideshow {
    width: 100%;
    margin:0;
    padding: 0;
    margin-bottom:30px;
  }
  footer {
    display: none;
  }
}

/* tablets */
@media screen and (min-width: 640px) and (max-width: 1280px) {
  
}

/* desktop */
@media screen and (min-width: 1280px) {
  
}