/*
 * style the list
 * for OL you can have
 * decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
 * for UL you can have
 * disc | circle | square or an image eg url(x.png)
 * you can also have 'none'
 */
.theming-example-list {
  list-style-type: upper-alpha;
}

.tel{
  padding-bottom:50px;
}
.adi-item:hover .ia-icon{
  background-color: rgb(31, 123, 193);
  color: #fff;
}
.row{
  margin: 0!important;
}
.adi-item{
  padding: 20px 0!important;
}

.info_addi{
  padding-top: 50px;
  background-color: #f2f2f2 !important;
}
/* 
@media only screen and (max-width:1024px){
  .info_addi {
    width: 99vw;
    position: relative;
    left: -60px;
  }

} */

.ia-icon, .light .ia-icon {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  line-height: 78px;
  text-align: center;
  color: rgb(31, 123, 193);
  border: solid 1px rgb(31, 123, 193);;
  font-size: 28px;
  display: inline-block;
  transition: all .2s;
  font-family: "Lato";

}

.btn-instalar{
  color: #002245;
  box-sizing: border-box;
  border-color: #002245 !important;
  border-radius: 15px;
  border-style: solid !important;
  border: 1px;
}

.btn-instalar h2{
  color: #002245;
  box-sizing: border-box;
  margin: 0.5rem 3rem;
}

.btn-instalar a{
  color: #002245;
  text-decoration: none;
}

.btn-descarga{
   background-color: #002245!important;
   color:white;
   width: 45%!important;
}
.btn-descarga:hover{
   background-color: rgba(61, 103, 118, 1)!important;
   color:white!important;
}

.logoapp{
  max-height: 200px;
}
.desc{
  font-weight: 500;
  line-height: 1.4;
}

.row{
  margin: 1px;
}
/*
.txtCel{
	min-height: 20em;
	font-size: smaller;
}
*/
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 500ms ease; 
}
p{
    text-align: justify;
}
.breadcrumb{
        display: none;
}
.card-item .row{
  display: none;
}
.card-item .row img{
  
  height: 100px;
  margin: auto;
}


/*
  .card-item:hover p{
  display: block;
  animation: scale-in-top 0.7s;
}*/
.card-item h2{
	cursor: pointer;
}


.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}


.card-item .act {
	display: block;
  animation: scale-in-top 0.7s;
}

@media only screen and (max-width:970px){
  .smartphone {
    width: 50%!important;
  }
  .smartphone .content {
    width: auto;
    height:  auto!important;
    background: white;
  }

}

@media only screen and (min-width: 970px) {
  .circulo-i{
    z-index: 100;
    opacity: 0.7;
    position: relative;
    height: 25px;
    width: 25px;
    left: 100%;
    border-radius: 100%;
    top: -12.5px;
    right: 12.5px;
    background-color: #002245;
    display: block;
  }
  .linea-i{
    z-index: 100;
    opacity: 0.7;
    position: relative;
    height: 3px;
    width: 20% !important;
    left: 100%;
    background-color: #002245;;
    display: block;
  }
  
  .circulo-d{
    z-index: 100;
    opacity: 0.7;
    position: relative;
    height: 25px;
    width: 25px;
    left: 100%;
    border-radius: 100%;
    top: -12.5px;
    left:  -25px;
    background-color: #002245;
    display: block;
  }
  .linea-d{
    z-index: 100;
    opacity: 0.7;
    position: relative;
    height: 3px;
    width: 20% !important;
    left: -20%;
    background-color: #002245;;
    display: block;
  }
}

.cards li {
  border: 1px solid #002245;
  border-radius:10px;
  background-color: #fff;
  color: #002245;
  /* flex: 1 1 200px; */
  clear: both;
  -webkit-animation: text-fo  -in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.cards .row .rtejustify{
  padding: 0 50px;
  font-size: small;
}

.cards h2 {

  margin: 0;
  padding: 10px;
}
.cards p {
  padding: 20px;
  font-size: medium;
}
.flex li {
  /* flex: 1 1 200px; */
  margin-bottom: 10px;
  clear: both;
}

.Pescador-cont{
    text-align:center;
    padding-top: 60px;;
  }

.smartphone {
  position: relative;
  width: 70%;
  height: auto;  
  margin: auto;
  border: 5px #efefef solid;
  border-top-width: 30px;
  border-bottom-width: 50px;
  border-radius: 36px;
  background: white;
  -webkit-box-shadow: 0px 0px 48px -2px rgba(0,34,69,1);
  -moz-box-shadow: 0px 0px 48px -2px rgba(0,34,69,1);
  box-shadow: 0px 0px 48px -2px rgba(0,34,69,1);
}

.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, -50%);
  background:#e7e7e7;
  border-radius: 10px;
  border: 1px #000000 solid;
}
  
  /* The circle on the bottom of the device */
  .smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translate(-50%, -50%);
    background:#e7e7e7;
    border-radius: 50%;
    border: 1px #000 solid ;
    
  }
  
  /* The screen (or content) of the device */
  .smartphone .content {
    width: auto;
    height:  450px!important;
    background: white;
  }
  .smartphone img {
    width:100%;
    
    height:100%;
  }
  
  .smart-btn-up{
    width: 7px;
    border: 2px solid #efefef;
    border-left: 0;
    border-radius: 10px;
    height: 40px;
    background: #efefef;
    position: absolute;
    top: 80px;
    right: -7px;
  }
  .smart-btn-down{
    width: 7px;
    border: 2px solid #efefef;
    border-left: 0;
    border-radius: 10px;
    height: 40px;
    background: #efefef;
    position: absolute;
    top: 125px;
    right: -7px;
  }
  .smart-btn-lock{
    width: 7px;
    border: 2px solid #efefef;
    border-left: 0;
    border-radius: 10px;
    height: 40px;
    background: #efefef;
    position: absolute;
    top: 175px;
    right: -7px;
  }
/* ----------------------------------------------
 * Generated by Animista on 2019-10-23 15:31:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/* ----------------------------------------------
 * Generated by Animista on 2019-10-23 15:29:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2019-10-23 17:19:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  @keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  
