/*VIDEO FLOTANTE =====================================================*/
.box { margin: 10px; }

#videoBox {
  /* border: 10px solid #212223; */
  /* width: 600px; */
  transition: 0.5s;
  /* display: none; */
}

.boxCenteredVideo{
   border-width: 3px;
   border-color: #2A2A2A;
   width: 600px;
   margin-left: 50%;
}

#site {
    width: 500px;
    margin: 50px auto;
  }

video {
  width: 100%;
  vertical-align: bottom;
}

#videoBox.in { animation: ac 1s; }

#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}


/*Home HTML =================================================*/
.title_home {
    margin-top: -50px;
}
.title_home h1{
    color: white;
    margin-left: 15px;
}
.div_title_home{
    margin-top: -135px;
    margin-left: 30px;
}
.title_home p {
    color: white;
    margin-left: 15px;
}
.title_home img {
    width: 460px;
}
.title_home .parrafo1 {
    font-size: 32px;
   /*  margin-top: -300px; */
}
.title_home .parrafo2 {
    font-size: 25px;
    margin-top: -10px;
}
.title_home .title1 {
    font-size: 45px;
    margin-top: -15px;
}
.title_home .title2 {
    font-size: 45px;
    /* margin-top: -10px; */
}
/*Captacion de Creditos HTML===================================*/
.title_creditos img {
    width: 500px;
    height: 250px;
}
.title_creditos h2 {
    color: white;
    margin-top: -250px; 
    margin-left: 18px; 
    font-size: 63px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.subtitle_creditos{ 
    color: white;
    margin-top: 60px; 
    font-size: 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.title_cap img {
    width: 450px;
    height: 250px;
}
.title_cap {
    margin-top: 190px;
    margin-bottom: 10px;
    margin-left: 0px;
}
.title_cap h1{
    color: white;
    margin-left: 15px;
    
}
.title_cap h5{
    color: white;
    margin-left: 15px;
}
.div_title_cap{
    margin-top: -205px; 
    margin-left: 18px; 
    
}
.title_cap p {
    color: white;
    margin-left: 15px;
}
.title_cap .cap_title1 {
    font-size: 63px;
    margin-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}
.title_cap .cap_title2 {
    font-size: 32px;
    margin-top: -300px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}
.title_cap .cap_title3 {
    font-size: 63px;
    margin-top: -15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}
.platforms_cap{
    height: 565px;
}

/*---TEXTOS JUSTIFICADOS------*/
.text_of_section_creditos{
    text-align: justify;
}

/*------CHANGE SECTION ON SCROLL --------*/
/* .cap_sections {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    color:white;
    background-color: black;
    visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .active_section {
    visibility: visible;
  } */

/*Ecommerce HTML===================================*/
.title_Ecommerce_div{
    margin-top: 190px;
    margin-bottom: 50px;
    margin-left: 0px;
}
.title_Ecommerce img {
    width: 450px;
    height: 250px;
}
.title_Ecommerce h1 {
    color: white;
    margin-top: -170px; 
    margin-left: 18px; 
    font-size: 63px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.title_Ecommerce h6 {
    color: white;
    margin-top: -170px; 
    margin-left: 18px; 
    font-size: 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.cardPlatformIOS{
    height: 500px;
    width: 350px;
    text-align: center;
}
.cardPlatformIOS img{
    height: 90%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.cardPlatformAndroid{
    height: 500px;
    width: 350px;
    text-align: center;
}
.cardPlatformAndroid img{
    height: 90%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.cardPlatformWeb{
    height: 500px;
    width: 350px;
    text-align: center;
}
.cardPlatformWeb p{
    vertical-align: middle;
}
.cardPlatformWeb img{
    height: 65%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    margin-bottom: auto;
}

/*Services HTML===================================*/
.title_service img {
    width: 350px;
}
.title_service h1 {
    color: white;
    margin-top: -95px; 
    margin-left: 18px; 
    font-size: 63px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.esquema p {
    color: black;
}
.parrafo {
    font-size: 16px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}
.marginForList li{
    margin-top: -30px;
}
.marginForList{
    margin-top: 30px;
}
.espaciado {
    margin-top: -24px;
}
.icon {
    width: 18%;
}
.icon_ce{
    width: 14%;
}
.title {
    color: #122E5F;
}
.sub_title {
    margin-top: 15px;
}
.marca_agua1{
    margin-left: 35%;
    width: 10%;
}
.marca_agua2{
    margin-left: 35%;
    margin-top: 50px;
    width: 10%;
}
.marca_agua3{
    margin-left: 35%;
    margin-top: 70px;
    width: 10%;
}
.marca_agua4{
    margin-left: 35%;
    margin-top: 70px;
    width: 10%;
}
.platformMobileIOS{
    height: 100%;
    width: 100%;
}
.platformMobileANDROID{
    height: 100%;
    width: 100%;
}
.platformWeb{
    height: 100%;
    width: 100%;
}
.cardPlatform{
    height: 10%;
    width: 25%;
}
/*Us HTML====================================*/
.title_us {
    margin-top: -100px;
}
.title_us img {
    width: 350px;
}
.title_us .title1{
    font-size: 65px;
    margin-left: 25px;
    margin-top: -165px;
}
.title_us .title2{
    font-size: 65px;
    margin-left: 25px;
}
/*Contact HTML====================================*/
.title_contact {
    margin-top: 200px;
}
.title_contact img {
    width: 490px;
}
.title_contact h1 {
    margin-top: -110px; 
    margin-left: 15px; 
    font-size: 63px;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.contact_form input{
    border: 1px solid gray;
    border-radius: 13px;
    margin-left: -15px;
    width: 340px;
    margin-top: 10px;
}
.contact_form textarea {
    border: 1px solid gray;
    border-radius: 13px;
    margin-left: -15px;
    width: 340px;
    margin-top: 10px;
}
.contact_form input, textarea::placeholder{
    font-size: 12px;
    text-align: start;
}

.contact_form button {
    font-size: 12px;
    width: 25%;
    margin-left: 15%;
    margin-top: 5%;
    position: static;
    border-color: rgb(7, 7, 119);
    color: white;
    border-radius: 25px;
    background-color: rgb(7, 7, 119);
    transition-duration: 0.4s;
    font-weight: bold;
}
.contact_form button:hover{
    background-color: white;
    color: rgb(7, 7, 119);
    font-weight: bold;
}

/*Portfolio HTML=========================================================*/
.title_portafolio img {
    width: 400px;
}
.title_portafolio h1 {
    margin-top: -100px; 
    margin-left: 5px; 
    font-size: 63px;
    color: white;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/*Slide Portafolio HTML=========================================================*/
* {box-sizing: border-box}
.mySlides {
    display: none
}
img {
    vertical-align: middle;
}

.slideshow-contenedor {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.antes, .siguiente {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.siguiente {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.antes:hover, .siguiente:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.slide {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activado, .slide:hover {
  background-color: #717171;
}

.desvanecer {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .antes, .siguiente,.text {font-size: 11px}
}