/* CODIGO DE DISEÑO DE PLUGIN  AQUI COMIENZA..*/
  
  .colorPage_plugin{
    width: 95%;
    background: rgb(0, 0, 0);
    color: #ffffff;
  
  }
  
  
  .Plugin-principal{
  width: 90%;    
  display: flex;
  margin-left: 10.50%;
  
  }
/*  .Plugin-principal{
    width: 365%;    
    display: block;
    }*/
    
  .Titulo-plugin1{
  width: 90%;  
  background: rgb(35, 243, 198);
  color: #000000;
  margin-left: 2%;
  font-size: 25px;
  }
  .Plugin1{
  width: 30%;
  height: 460px;
  border: solid 1px;
  }
  .Plugin1 img{
    width: 90%;
    margin-left: 2%;
  }
  .Parrafo_plugin{
    width: 90%;
    font-family:sans-serif;
    font-size: 15px;
    margin-left: 2%;
    font-style: oblique;
  }
  .Valoracion_plugin{
    margin-left: 56%;
  font-size:smaller;
  
  }

  /*ESTILO DE DISEÑO DE PERFIL..*/
  a:link, a:visited, a:active{
    /*este codigo quita el subbrayado de las etiquetas link*/
  text-decoration: none;
  
  }
  .Titulo-plugin1{
    width: 90%;  
    background: rgb(0, 247, 255);
    color: #000000;
    margin-left: 2%;
    font-size: 25px;
    }
    .Plugin2{
    width: 30%;
    height: 460px;
    border: solid 1px;
    margin-left: 1%;    
  }
    .Plugin2 img{
        width: 90%;
        margin-left: 2%;
    }
    .Parrafo_plugin{
        width: 90%;
        font-family:sans-serif;
        font-size: 15px;
        margin-left: 2%;
        font-style: oblique;
    }
    .Valoracion_plugin{
        margin-left: 56%;
    font-size:smaller;
    
    }
    .buton-plugin{
    width: 20%;
    height: 8%;
line-height: 9px;

    margin-left: 2%;
    margin-top: -7%;
    
border-radius: 50px;
    border: solid 1px rgb(255, 255, 255);
    
    }
    .buton-plugin a{
        margin-top: 100%;
    }
    .buton-plugin:hover {
      text-decoration: none;
      color: #d05165; 
    background: #17d6f0;
    
    }
    /*ESTILO DE DISEÑO DE PERFIL..*/
    a:link, a:visited, a:active{
        /*este codigo quita el subbrayado de las etiquetas link*/
      text-decoration: none;
      
      }
      .Titulo-plugin1{
        width: 90%;  
        background: rgb(0, 247, 255);
        color: #000000;
        margin-left: 2%;
        font-size: 25px;
        }
        .Plugin3{
        width: 30%;
        height: 460px;
        border: solid 1px;
        margin-left: 1%;
        }
        .Plugin3 img{
            width: 90%;
            margin-left: 2%;
        }
        .Parrafo_plugin{
            width: 90%;
            font-family:sans-serif;
            font-size: 15px;
            margin-left: 2%;
            font-style: oblique;
        }
        .Valoracion_plugin{
            margin-left: 56%;
        font-size:smaller;
        
        }

        /*ESTILO DE DISEÑO DE PERFIL       ..*/
        a:link, a:visited, a:active{
            /*este codigo quita el subbrayado de las etiquetas link*/
          text-decoration: none;
          
          }
@media screen and (max-width:425px) {
  
  .Plugin-principal{
display: block;
width: 90%;
margin-left: 3%;
background: #000000;

  }
  .Titulo-plugin1{
  width: 95%;  
  color: #ffffff;
  margin-left: 2%;
  font-size: 10px;
  }
  .Plugin1{
  width:  95%;
  height: 290px;
  margin-left: 2%;
  margin-top: 5%;
  border: solid 1px;
  margin-bottom: 8%;
  }
  .Plugin1 img{
  width: 95%;
  margin-left: 2%;
  }
  .Parrafo_plugin{
  width: 95%;
  font-family:sans-serif;
  font-size: 7px;
  margin-left: 2%;
  font-style: oblique;
  }
  .Valoracion_plugin{
    width: 20%;
  margin-left: 76%;
  font-size: 5%;
  
  }
  .buton-plugin{
  width: 15%;
  height: 3%;
  font-size: 5%;
  text-align: center;
  color: #000000;
  margin-left: 2%;
  margin-top: -3%;
  border: solid 1px;
  
  }
  .buton-plugin a{
  margin-top: 100%;
  }
  .buton-plugin:hover {
  text-decoration: none;
  color: #d05165; 
  background: #17d6f0;
  }
  .Plugin2{
    width:  95%;
    height: 290px;
    margin-left: 2%;
    margin-top: 5%;
    border: solid 1px;
    margin-bottom: 8%;   
  }
  .Plugin2 img{
    width: 95%;
    margin-left: 2%;
  }
  
  .Plugin3{
    width:  95%;
    height: 290px;
    margin-left: 2%;
    margin-top: 5%;
    border: solid 1px;
    margin-bottom: 8%; 
  
  }
  .Plugin3 img{
    width: 95%;
    margin-left: 2%;
  }
  }
  @media screen and (max-width:760px) {
  
    .Plugin-principal{
  display: block;
  width: 90%;
  margin-left: 3%;
  background: #000000;
  
    }
    .Titulo-plugin1{
    width: 95%;  
    color: #ffffff;
    margin-left: 2%;
    font-size: 25px;
    }
    .Plugin1{
    width:  95%;
    height: 460px;
    margin-left: 2%;
    margin-top: 5%;
    border: solid 1px;
    margin-bottom: 8%;
    }
    .Plugin1 img{
    width: 95%;
    margin-left: 2%;
    }
    .Parrafo_plugin{
    width: 95%;
    margin-top: 1%;
    font-family:sans-serif;
    font-size: 15px;
    margin-left: 2%;
    font-style: oblique;
    }
    .Valoracion_plugin{
      width: 30%;
    margin-left: 69%;
    font-size: 12px;
    
    }
    .buton-plugin{
    width: 15%;
    height: 3%;
    font-size: 15px;
    text-align: center;
    color: #000000;
    margin-left: 0.5%;
    margin-top: -4%;
    border: solid 1px;
    
    }
    .buton-plugin a{
    margin-top: -20%;
    text-align: justify;
    text-align: center;
    color: #ffffff;
    
    }
    .buton-plugin:hover {
    text-decoration: none;
    color: #d05165; 
    background: #ffffff23;
    }
    .Plugin2{
      width:  95%;
      height: 460px;
      margin-left: 2%;
      margin-top: 5%;
      border: solid 1px;
      margin-bottom: 8%;
    }
    .Plugin2 img{
      width: 95%;
      margin-left: 2%;
    }
    
    .Plugin3{
      width:  95%;
      height: 460px;
      margin-left: 2%;
      margin-top: 5%;
      border: solid 1px;
      margin-bottom: 8%;
    
    }
    .Plugin3 img{
      width: 95%;
      margin-left: 2%;
    }
    }
    @media screen and (min-width:768px) {
  
      .Plugin-principal{
    display: flex;
    width: 90%;
    margin-left: 3%;
    background: #000000;
    
      }
      .Titulo-plugin1{
      width: 95%;  
      color: #ffffff;
      margin-left: 2%;
      font-size: 20px;
      }
      .Plugin1{
      width:  95%;
      height: 380px;
      margin-left: 2%;
      margin-top: 5%;
      border: solid 1px;
      margin-bottom: 8%;
      }
      .Plugin1 img{
      width: 95%;
      margin-left: 2%;
      }
      .Parrafo_plugin{
      width: 95%;
      margin-top: 1%;
      font-family:sans-serif;
      font-size: 15px;
      margin-left: 2%;
      font-style: oblique;
      }
      .Valoracion_plugin{
        width: 35%;
      margin-left: 60%;
      margin-top: 5%;
      font-size: 10px;
      
      }
      .buton-plugin{
      width: 15%;
      height: 3%;
      font-size: 15px;
      text-align: center;
      color: #000000;
      margin-left: 2%;
      margin-top: -10%;
      border: solid 1px;
      
      }
      .buton-plugin a{
      margin-top: -20%;
      text-align: justify;
      text-align: center;
      color: #ffffff;
      
      }
      .buton-plugin:hover {
      text-decoration: none;
      color: #d05165; 
      background: #ffffff23;
      }
      .Plugin2{
        width:  95%;
        height: 380px;
        margin-left: 2%;
        margin-top: 5%;
        border: solid 1px;
        margin-bottom: 8%; 
      }
      .Plugin2 img{
        width: 95%;
        margin-left: 2%;
      }
      
      .Plugin3{
        width:  95%;
        height: 380px;
        margin-left: 2%;
        margin-top: 5%;
        border: solid 1px;
        margin-bottom: 8%;
      
      }
      .Plugin3 img{
        width: 95%;
        margin-left: 2%;
      }
      }
      @media only screen and (min-width:1024px){
        .Titulo-plugin1{
        width: 95%;  
        background: rgb(35, 243, 198);
        color: #000000;
        margin-left: 2%;
        font-size: 15px;
        }
        .Plugin1{
        width: 30%;
        height: 395px;
        border: solid 1px;
        margin-bottom: 8%;
        }
        .Plugin1 img{
        width: 95%;
        margin-left: 2%;
        }
        .Parrafo_plugin{
        width: 90%;
        font-family:sans-serif;
        font-size: 15px;
        margin-left: 2%;
        font-style: oblique;
        }
        .Valoracion_plugin{
        margin-left: 67%;
        font-size: 10px;
        
        }
        .buton-plugin{
        width: 20%;
        height: 5%;
        font-size: 15px;
        text-align: center;
        color: #000000;
        background: #1c838371;
        box-shadow: #e1f017 1px 1px 2px 2px;
        margin-left: 2%;
        margin-top: -7%;
        border: solid 1px;
        
        }
        .buton-plugin:hover {
        text-decoration: none;
        color: #ffffff; 
        background: #56cfe471;
        box-shadow: none;
        }
        .Plugin2{
          width: 30%;
          height: 395px;
          border: solid 1px;
          margin-bottom: 8%;
        
        }
        .Plugin2 img{
        width: 90%;
        margin-left: 2%;
        }
        
        .Plugin3{
          width: 30%;
          height: 395px;
          border: solid 1px;
          margin-bottom: 8%;
        
        }
        .Plugin3 img{
        width: 90%;
        margin-left: 2%;
        }
        }  
  /*FIN DE DISEÑO DE PLUGIN*/
  /* ORO DISEÑO DE LA SETION DE ABAJO DE LOS PLUGIN TERMINAR ESTA*/
  
  .titulo-plugin_section{
    width: 90%;
        margin-top: 10%;
    margin-left: 4%;
        background: #ffffff;
    }
    .txtplugin_section{
    font-size: 50px;
    
    }
    
    
    .Setion_izquierdo{
    width: 30%;
    height: 60%;
    background: #17d6f0;
    
    }
    .Setion_izquierdo img{
    width: 90%;
    
    
    }
    .Setion-principal-derecho{
    width: 30%;
    border:#ffffff solid 2px ;
    margin-left: 33%;
    margin-top: -29%;
    background: #d05165;
    }
    
    @media only screen and (min-width:769px) and (max-width:1024px){
    
    
    }
    
  /* FIN DE PLUGIN SETION 2*/
  section.bg-grey .triangle-up-left:after,
  section.bg-grey .triangle-up-right:after,
  section.bg-grey .square-left:after,
  section.bg-grey .square-right:after {
    background: #f7f8f9; }
  
  .square-left {
    width: 900px;
    height: 70px;
    position: absolute;
    left: -970px;
    top: -69px;
    overflow: hidden; }
    .square-left:after {
      content: "";
      position: absolute;
      width: 900px;
      height: 70px;
      background: #fff;
      top: 0;
      left: 0; }
  
  .square-right {
    width: 900px;
    height: 70px;
    position: absolute;
    right: -970px;
    top: -69px;
    overflow: hidden; }
    .square-right:after {
      content: "";
      position: absolute;
      width: 900px;
      height: 70px;
      background: #fff;
      top: 0;
      left: 0; }
  
  #pricing {
    color: #fff; }
  
  .price-holder {
    padding-bottom: 60px; }
  
  .price-item {
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    transition: all 0.3s ease-in-out; }
    .price-item:hover {
      border: 1px solid #2CC990; }
  
  .price-title {
    color: #2CC990; }
  
  .price-list {
    padding-left: 0; }
    .price-list li {
      list-style-type: none; }
  
  .price-amount {
    margin: 40px 0; }
    .price-amount span {
      vertical-align: top;
      line-height: 3; }
    .price-amount h2 {
      display: inline-block;
      color: #2CC990;
      margin: 0;
      font-size: 80px;
      line-height: 1;
      vertical-align: top; }
  .Precio-colorg{
    color: #e40404;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 90%;
  }
  
  @media (min-width: 768px) and (max-width: 1200px) {
    .boxed-page {
      margin-right: 30px;
      margin-left: 30px; }
    .not-on-top #header-navbar {
      margin-right: 30px;
      margin-left: 30px; } }
  
  @media (max-width: 1024px) {
    .not-on-top #header-navbar {
      margin-right: 15px;
      margin-left: 15px;
      padding-left: 15px; } }
  
  @media (max-width: 992px) {
    #navbar-nav-header .navbar-nav {
      margin-top: 15px; }
    #header-navbar {
      padding-left: 15px;
      margin-left: 15px;
      margin-right: 15px; }
    .price-item {
      margin-bottom: 30px; }
    #navbar-nav-header .navbar-nav > li {
      padding-left: 15px;
      padding-right: 15px; } }
  
  @media (max-width: 767px) {
    .boxed-page {
      margin: 4rem 15px; }
    .counter-item {
      margin-bottom: 40px; }
      .counter-item:last-child {
        margin-bottom: 0; }
    .section-title br,
    .section-sub-title br {
      display: none; }
    .grid-item {
      width: 100%; }
    .card-deck {
      flex-direction: column; } }
  
  @media (min-width: 576px) and (max-width: 992px) {
    section .triangle-up-left {
      left: -54px; }
    section .triangle-up-right {
      right: -54px; }
    section .square-left {
      left: -953px; }
    section .square-right {
      right: -953px; } }
  
  @media (max-width: 575px) {
    .jumbotron {
      min-height: 97vh; }
    section .triangle-up-left {
      left: -46px; }
    section .triangle-up-right {
      right: -46px; }
    .client-item img {
      width: 100%; } }
  
      /*AQUI ESTA LOS ESTILO DE NUESTRA APP*/
.app.principal-movil{
  margin: 0%;
  padding: 0%;
text-decoration: none;
}
.app-segunda-m{
 width: 50%;
 margin-left: 3%;
  background: hsl(0, 0%, 100%);
}
.app-segunda-m h2{
font-size: 45px;
}
.app-segunda-m .raya{
  font-size: 23px;
  margin-top: -6%;
  border-bottom: #000000 solid 1px;
  }
.api-1{
  display: flex;
}
.api-1 img{
width: 20%;
height: 30%;
margin-left: 4%;
border-radius: 20px;
}
.txt-contenedor{
  width: 90%;
  margin-left: 1%;
  margin-top: 3%;
  border-radius: 25px;
  background: #ffffff;
box-shadow: #000000 2px 2px 2px 1px;
}
.txt-contenedor h3{
  color: #039dc4;
  margin-left: 1%;
  border-bottom: #000000 solid 1px;
  margin-top: 0.5%;
font-size: 30px;
}
.txt-contenedor h4{
  color:#037ecf;
  margin-left: 1%;
  margin-top: -6%;
  font-size: 15px;
  }
  .txt-contenedor h5{
    margin-left: 1%;
    margin-top: -4%;
    font-size: 15px;
    }
    .txt-contenedor h6{
      margin-top: -4%;
      margin-left: 1%;
      font-size: 15px;
      }
      .butoon{
        width: 13%;
        background: #099297; 
        border-radius: 100px;
        margin-top: -10%;
        margin-left: 80%;
        font-size: 15px;
        }
        .butoon a{
      color: #ffffff;
        }

/*Media query DE nuestra app*/
@media only screen and (min-width:220px) and (max-width:319px){
    .app.principal-movil{
  display: flex;
    }
    .app-segunda-m{
     width: 50%;
     margin-left: 3%;
      background: hsl(0, 0%, 100%);
    }
    .app-segunda-m h2{
    font-size: 45px;
    }
    .app-segunda-m .raya{
      font-size: 20px;
      margin-top: -6%;
      border-bottom: #000000 solid 1px;
      }
    .api-1{
      width: 195%;
      display: flex;
      margin-bottom: 20%; 
    }
    .api-1 img{
   display: none;
    }
    .txt-contenedor{
  width: 90;
      margin-left: 1%;
      margin-top: 3%;
      border-radius: 25px;
      background: #ffffff;
    box-shadow: #000000 2px 2px 2px 1px;
    }
    .txt-contenedor h3{
      color: #039dc4;
      margin-left: 1%;
      border-bottom: #000000 solid 1px;
      margin-top: 0.5%;
    font-size: 25px;
    }
    .txt-contenedor h4{
      color:#037ecf;
      margin-left: 1%;
      margin-top: -6%;
      font-size: small;
      }
      .txt-contenedor h5{
        margin-left: 1%;
        margin-top: -4%;
        font-size: small;
        }
        .txt-contenedor h6{
          margin-top: -4%;
          margin-left: 1%;
          font-size: small;
          }
          .butoon{
            width: 60%;
            background: #099297; 
            border-radius: 100px;
            margin-top: -6%;
            margin-left: 2%;
            margin-bottom: 10%;
            font-size: small;
            text-align: center;
          }
            .butoon a{
          color: #ffffff;
         
            }
  }
@media only screen and (min-width:320px) and (max-width:375px){
  .app.principal-movil{
display: flex;
  }
  .app-segunda-m{
   width: 50%;
   margin-left: 3%;
    background: hsl(0, 0%, 100%);
  }
  .app-segunda-m h2{
  font-size: 45px;
  }
  .app-segunda-m .raya{
    font-size: 20px;
    margin-top: -6%;
    border-bottom: #000000 solid 1px;
    }
  .api-1{
    width: 195%;
    display: flex;
    margin-bottom: 20%; 
  }
  .api-1 img{
 display: none;
  }
  .txt-contenedor{
width: 90;
    margin-left: 1%;
    margin-top: 3%;
    border-radius: 25px;
    background: #ffffff;
  box-shadow: #000000 2px 2px 2px 1px;
  }
  .txt-contenedor h3{
    color: #039dc4;
    margin-left: 1%;
    border-bottom: #000000 solid 1px;
    margin-top: 0.5%;
  font-size: 25px;
  }
  .txt-contenedor h4{
    color:#037ecf;
    margin-left: 1%;
    margin-top: -6%;
    font-size: small;
    }
    .txt-contenedor h5{
      margin-left: 1%;
      margin-top: -4%;
      font-size: small;
      }
      .txt-contenedor h6{
        margin-top: -4%;
        margin-left: 1%;
        font-size: small;
        }
        .butoon{
          width: 60%;
          background: #099297; 
          border-radius: 100px;
          margin-top: -6%;
          margin-left: 2%;
          margin-bottom: 10%;
          font-size: small;
          text-align: center;
        }
          .butoon a{
        color: #ffffff;
       
          }
}
@media only screen and (min-width:376px) and (max-width:425px){
  .app.principal-movil{
display: flex;
  }
  .app-segunda-m{
   width: 50%;
   margin-left: 3%;
    background: hsl(0, 0%, 100%);
  }
  .app-segunda-m h2{
  font-size: 45px;
  }
  .app-segunda-m .raya{
    font-size: 20px;
    margin-top: -6%;
    border-bottom: #000000 solid 1px;
    }
  .api-1{
    width: 195%;
    display: flex;
    margin-bottom: 20%; 
  }
  .api-1 img{
 display: none;
  }
  .txt-contenedor{
width: 90;
    margin-left: 1%;
    margin-top: 3%;
    border-radius: 25px;
    background: #ffffff;
  box-shadow: #000000 2px 2px 2px 1px;
  }
  .txt-contenedor h3{
    color: #039dc4;
    margin-left: 1%;
    border-bottom: #000000 solid 1px;
    margin-top: 0.5%;
  font-size: 25px;
  }
  .txt-contenedor h4{
    color:#037ecf;
    margin-left: 1%;
    margin-top: -6%;
    font-size: small;
    }
    .txt-contenedor h5{
      margin-left: 1%;
      margin-top: -4%;
      font-size: small;
      }
      .txt-contenedor h6{
        margin-top: -4%;
        margin-left: 1%;
        font-size: small;
        }
        .butoon{
          width: 60%;
          background: #099297; 
          border-radius: 100px;
          margin-top: -6%;
          margin-left: 2%;
          margin-bottom: 10%;
          font-size: small;
          text-align: center;
        }
          .butoon a{
        color: #ffffff;
       
          }
}
@media only screen and (min-width:426px) and (max-width:600px){
  .app.principal-movil{
display: flex;
  }
  .app-segunda-m{
   width: 50%;
   margin-left: 3%;
    background: hsl(0, 0%, 100%);
  }
  .app-segunda-m h2{
  font-size: 45px;
  }
  .app-segunda-m .raya{
    font-size: 20px;
    margin-top: -6%;
    border-bottom: #000000 solid 1px;
    }
  .api-1{
    width: 195%;
    display: flex;
    margin-bottom: 20%; 
  }
  .api-1 img{
 display: none;
  }
  .txt-contenedor{
width: 90;
    margin-left: 1%;
    margin-top: 3%;
    border-radius: 25px;
    background: #ffffff;
  box-shadow: #000000 2px 2px 2px 1px;
  }
  .txt-contenedor h3{
    color: #039dc4;
    margin-left: 1%;
    border-bottom: #000000 solid 1px;
    margin-top: 0.5%;
  font-size: 25px;
  }
  .txt-contenedor h4{
    color:#037ecf;
    margin-left: 1%;
    margin-top: -6%;
    font-size: small;
    }
    .txt-contenedor h5{
      margin-left: 1%;
      margin-top: -4%;
      font-size: small;
      }
      .txt-contenedor h6{
        margin-top: -4%;
        margin-left: 1%;
        font-size: small;
        }
        .butoon{
          width: 60%;
          background: #099297; 
          border-radius: 100px;
          margin-top: -6%;
          margin-left: 2%;
          margin-bottom: 10%;
          font-size: small;
          text-align: center;
        }
          .butoon a{
        color: #ffffff;
       
          }
}
@media only screen and (min-width:601px) and (max-width:767px){
  .app.principal-movil{
display: flex;
  }
  .app-segunda-m{
   width: 50%;
   margin-left: 3%;
    background: hsl(0, 0%, 100%);
  }
  .app-segunda-m h2{
  font-size: 45px;
  }
  .app-segunda-m .raya{
    font-size: 20px;
    margin-top: -6%;
    border-bottom: #000000 solid 1px;
    }
  .api-1{
    width: 195%;
    display: flex;
    margin-bottom: 20%; 
  }
  .api-1 img{
 display: none;
  }
  .txt-contenedor{
width: 90;
    margin-left: 1%;
    margin-top: 3%;
    border-radius: 25px;
    background: #ffffff;
  box-shadow: #000000 2px 2px 2px 1px;
  }
  .txt-contenedor h3{
    color: #039dc4;
    margin-left: 1%;
    border-bottom: #000000 solid 1px;
    margin-top: 0.5%;
  font-size: 30px;
  }
  .txt-contenedor h4{
    color:#037ecf;
    margin-left: 1%;
    margin-top: -6%;
    font-size: 15px;
    }
    .txt-contenedor h5{
      margin-left: 1%;
      margin-top: -4%;
      font-size: 20px;
      }
      .txt-contenedor h6{
        margin-top: -5%;
        margin-left: 1%;
        margin-bottom: 8%;
        font-size: 10px;
        }
        .butoon{
          width: 60%;
          background: #099297; 
          border-radius: 100px;
          margin-top: -6%;
          margin-left: 2%;
          margin-bottom: 10%;
          font-size: 20px;
          text-align: center;
        }
          .butoon a{
        color: #ffffff;
       
          }
}







      /*FIN DE ESTILO DE NUESTRA APP*/