* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
@font-face {
    font-family: 'Avenir';
    src: url('../font/AvenirLTStd-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Avenir';
  src: url('../font/AvenirLTStd-Book.otf') format('opentype');
  font-weight: lighter;
  font-weight:300;
}
.normal{font-family:Avenir;}
.lighter{font-family:Avenir;font-weight:300}

:root{
    --theame-color:white;
    --theame-yellow:#F4C55C;
    --theame-li:#5A5A5A;
    --theame-blueDark:#132C4F;
    --theame-title_blue: #132C4F;
    --theame-plata:#7A7A7A;
    --theame-blue: #1F3B6A;
}

body{
    font-family: 'Avenir';
    /*padding-top: 80px;*/
}
  
ul { list-style-type: none; }
a { text-decoration: none; }

h2 { font-weight: lighter; }

.BtnYellow:hover{
  opacity: 0.5; text-decoration: none; 
  background: linear-gradient(60.8deg, #FFC700 30.46%, #FFE056 76.61%);
}
.btnEnviar:hover{
  opacity: 0.5; text-decoration: none; 
  background: linear-gradient(60.8deg, #FFC700 30.46%, #FFE056 76.61%);
}
.BtnPersonaF:hover{
  opacity: 0.5; text-decoration: none; 
  background: linear-gradient(60.8deg, #FFC700 30.46%, #FFE056 76.61%);
}
.BtnPersonaM:hover{
  opacity: 0.5; text-decoration: none; 
  background: linear-gradient(60.8deg, #FFC700 30.46%, #FFE056 76.61%);
}

.iniciasession:hover {
    text-decoration: none;
    color:var(--theame-li)!important;
  }


.logo a:hover {
  text-decoration: none;
}

/***/

.BtnYellow{
  background-color: var(--theame-yellow);
  color:var(--theame-color);
  height: 40px;
  width: 200px;
  border-radius: 20px;
  font-family: 'Avenir';
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: center;

  }

.sombra {
height: 102px;
width: 623px;
border-radius: 50%;
background-color:  #F8F8F8; 

}

/*****/
.TitleTablaCrypto
{
font-family: Avenir;
font-size: 38px;
font-style: normal;
font-weight: 900;
line-height: 64px;
letter-spacing: 0em;
text-align: left;
color: #132C4F;
}
.tablaCrypto{
  background: #FFFFFF;
  font-family: Avenir;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
  }
.coin-logo {
    height: 18px;
    width: 18px;
    border-radius: 12px;
}

.parracrypto{
  font-family: Avenir;
  font-size: 14px;
  font-style: normal;
  font-weight: lighter;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #5A5A5A;
}
/*****/
.imgPersonaF{
height: 230px; width: 400px;
}
.imgPersonaM{
  height: 230px; width: 400px;
  }

.imgdivF{
height: 210.546875px;
width: 400px;
border-radius: 0px;
  }

.imgdivM{
  height: 266.29833984375px;
  width: 400px;
  border-radius: 0px;
  
}

  .Title{
    font-family: Avenir;
    font-style: normal;
    font-weight: 900;
    font-size: 42px;
    line-height: 64px;
    color: #132C4F;
    text-align: left;
}
.Parraf{
  font-family: Avenir;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color:#5A5A5A;
  line-height:24px;
}
.BtnPersonaF{
height: 40px;
width: 340px;
border-radius: 20px;
background: #F4C55C;
font-family: Avenir;
font-size: 13px;
font-style: normal;
font-weight: 900;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color:#ffffff;

}
.BtnPersonaM{
height: 40px;
width: 340px;
background: #FFFFFF;
border: 1.5px solid #F4C55C;
box-sizing: border-box;
border-radius: 20px;
font-family: Avenir;
font-size: 13px;
font-style: normal;
font-weight: 900;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color: #F4C55C;

}
/***/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.flex-item-left {
  padding: 20px;
  flex: 50%;
}

.flex-item-right {
  padding: 20px;
  flex: 50%;
}
/**inicio***/
.columna{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
  .zoom__images {
  overflow: hidden;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*****/
/**mercados**/
#otc {
  background: #F8F8F8;
  padding-bottom: 100px;
  }
.divotc{
    height: 240px;
    width: 240px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
}
.letraotc{
    font-family:  Avenir;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: #1F3B6A;
}


.flex-containerOtc {
  display: flex;
  flex-wrap: wrap;
  height: 560px; width: 560px;
}
.flex-containerOtcImg {
  display: flex;
  flex-wrap: wrap;
  height: 560px; width: 560px;
}
#rendimiento{margin-right: 60px}
#comisiones{margin-top: 39px}
#seguridad{margin-right: 60px;margin-left: 20px}
#otcItem{margin-top: 40px}

/**cryptomedas***/
.contenido{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      }
.innerP{
      margin:10px;
      /*flex:1;*/
      padding:20px;
      height: 59px;
      width: 540px;
      border-radius: 10px;
      background: #F4C55C;
      border-radius: 10px;
      font-family: Avenir;
      font-size: 20px;
      font-style: normal;
      font-weight: 900;
      line-height: 27px;
      letter-spacing: 0em;
      text-align: center;
      color: #FFFFFF;
      }

.num {
      height: 40px;
      width: 40px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      background: #2FBF71;
      color:#FFFFFF;
      font-family: 'AvenirLTStd-Book';
      font-size: 20px;
      font-style: normal;
      font-weight: 900;
      line-height: 24px;
      letter-spacing: 0em;
      border: 1px solid #FFFFFF;
      }
      
      #num_uno{margin-left: -31px; margin-top: -73px}
      #num_dos{margin-left: -31px; margin-top: -73px}
      #num_tres{margin-left: -31px; margin-top: -73px}
      #num_cuatro{margin-left: -31px; margin-top: -73px}
      #num_cinco{margin-left: -31px; margin-top: -73px}
.cajasoporte{
        background: #132C4F;
        border-radius: 20px;
         color: #fff;
        /*padding: 15px;*/
         height: 537px;
        width: 520px;    
    }
.cajatexto{
      height: 44px;
      width: 440px;
      border-radius: 4px;
      background: #FFFFFF;
      color:#F4C55C ;
      }
.soporte{
        font-family: Avenir;
        font-size: 38px;
        font-style: normal;
        font-weight: 900;
        line-height: 64px;
        letter-spacing: 0em;
        text-align:center;
        padding-top: 40px;        
        }
        
.textareasoporte{
        height: 140px !important;
        width: 440px;
        border-radius: 4px;    
}

#subject::placeholder {color: #F4C55C;}

#message::placeholder {color: #F4C55C;}

#email::placeholder {color: #F4C55C;}

.titulo_portal{
    font-family:  Avenir;
    font-size: 38px;
    font-style: normal;
    font-weight: 900;
    line-height: 64px;
    letter-spacing: 0em;
    text-align: left;
    color: #222222;
    display: flex;
    justify-content: center;
  }

/*****/
.Styleh2ligth{
font-family: Avenir;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: 64px;
letter-spacing: 0em;
text-align: left;
color: #FFFFFF;
}
.StylePligth{
  font-family: Avenir;
  font-style: normal;
  font-weight: lighter;
  font-size: 20px;
  line-height: 32px;
  text-align: left;
  color: #FFFFFF;
}
.IconStyle{
font-family: Avenir;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 30px;
letter-spacing: 0em;
text-align: left;
color: #FFFFFF;
}
.SymbolStyle{
  font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: lighter;
line-height: 19px;
letter-spacing: 0em;
text-align: left;
color: #FFFFFF;
}
.centrar{
    display:flex;
    justify-content: center;
    align-items: center;
}
.inner2{
        margin:10px;
        flex:1;
        min-width:200px;
        padding:10px;
        height: 80px;
        width: 270px;
        border-radius: 10px;
        background: #F4C55C;
        border-radius: 10px;
        font-family: Avenir;
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 27px;
        letter-spacing: 0em;
        color: white;
   }
.Styleh2ligth{
font-family: Avenir;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: 64px;
letter-spacing: 0em;
text-align: left;
color: #FFFFFF;
}
/*****/
 .CajaYellow{
    background: #F4C55C;
    border-radius: 20px;
    height: 820px;
    width: 1000px;
    margin: auto;
    padding: 10px;
}

#cajaBlue{
background-color:var(--theame-title_blue);
height: 820px; 
border-radius: 20px;
width: 1000px;
display: none;
}

.imgotc{ height: 180px; width: 180px;}
.h2portal{
  font-family: Avenir;
  font-size: 38px;
  font-style: normal;
  font-weight: 900;
  line-height: 64px;
  letter-spacing: 0em;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  }

/******/


#inicio {padding-top: 150px; padding-bottom: 120px;}
#mercados{padding-top: 100px; padding-bottom: 100px;}
#otc{padding-top: 100px; padding-bottom: 100px;}
#stablecoins{
  align-items: center;display: flex;justify-content: center;
  padding-top: 167px; padding-bottom: 100px;}
#Selecciona .Title{text-align: center;}

.btnEnviar{
height: 40px;
width: 200px;
border-radius: 20px;
background-color: var(--theame-yellow);
color:var(--theame-color);
font-family: Avenir;
font-size: 13px;
font-style: normal;
font-weight: 900;
line-height: 40px;
letter-spacing: 0em;
text-align: center;
border:0;
}

@media (max-width: 900px) {

br {
    display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}

#inicio{padding-top: 50px; padding-bottom: 25px;}
#mercados{padding-top: 25px; padding-bottom: 25px;}
#otc{padding-top: 25px; padding-bottom: 25px;}
#criptomonedas{padding-top: 25px; padding-bottom: 25px;}

.Title{ 
font-family: Avenir;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 27px;
letter-spacing: 0em;
text-align: left;
margin: 0;

 }

.Parraf{
font-family: Avenir;
font-size: 12px;
font-style: normal;
font-weight: lighter;
line-height: 12px;
letter-spacing: 0em;
text-align: left;

}
    
  .CajaYellow{display: none;}
  #cajaBlue{display: block; min-height: 366px; min-width: 219px;}
  .img_inicio{display: none;}
  #imgresponsive{display: none;}
  .inner2{min-height: 40px; min-width: 130px;}
  .Styleh2ligth{
    font-family: Avenir;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: center;
  }
  .StylePligth{
    font-family: Avenir;
    font-size: 13px;
    font-style: normal;
    font-weight: lighter;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
  }
.flex-containerOtc{
  height: 420px;
  width: 375px;
 /* display: flex;
  flex-wrap: wrap;*/
}
.flex-containerOtcImg{
height: 420px;
width: 375px;
padding: 10px 10px;
}
#rendimiento{margin-right: 28px;}
#comisiones{margin-top: 25px;}
#seguridad{margin-right: 29px}
#otcItem{margin-top: 34px;}


.divotc{ height: 140px; width: 140px;}
.divotc img{ height: 100px; width: 116.66667175292969px;}
.IconStyle{font-size: 14px;}

.letraotc{font-size: 12px;}
.flex-containerOtc{
  text-align: center;
  display: flex;
  margin: 0 auto;
  align-items: center;
}

.flex-item-right, .flex-item-left {
    flex: 100%;
}
/*
.flex-containerOtc {
  min-width: 140px;
}*/
.cajasoporte{
  max-width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
}
.h2portal{font-size: 20px;text-align: center;}
.cajatexto{font-size: 14px; text-align: left;}

.innerP{
  height: 40px; width: 320px;
  text-align: center;
  font-size: 14px;
  margin:10px;
  padding: 10px;
}


.titulo_portal{font-size: 20px;}
.num {height: 32px; width: 32px;font-size: 20px;}
}

.inner2:hover{
  background: linear-gradient(60.8deg, #FFC700 30.46%, #FFE056 76.61%);
}

/*@media only screen and (max-width: 575px){*/
  @media screen and (max-device-width : 480px) {
.topheader{

      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06);

  }

    #Selecciona .Title{text-align: center;}
    nav { padding-right: 0 px; padding-left: 0 px; margin:28px}
br {
      display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
 }
 #inicio .columna {
  align-items: center;
  padding-bottom: 25px;
}
#inicio .Title{
padding: 8px 0px;}
#otc .columna {
  align-items: center;
  padding-bottom: 65px;
}
#mercados .columna {
  padding-bottom: 20px;
}
  #inicio{padding-top: 150px; padding-bottom: 25px;}
  #tabla{padding-top: 35px;}
  #mercados{padding-top: 25px; padding-bottom: 25px;}
  #otc{padding-top: 5px;padding-bottom: 25px; background: none;}
  #criptomonedas{padding-top: 25px; padding-bottom: 25px;}
  
  .flex-item-left .Title{ 
  font-family: Avenir;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 27px;
  letter-spacing: 0em;
  text-align: center;
  margin: 0;
  padding: 8px 0px;
   }
  .flex-containerOtcImg{
    background: #F8F8F8;
  }
  
   .flex-item-left .Parraf{
  font-family: Avenir;
  font-size: 12px;
  font-style: normal;
  font-weight: lighter;
  line-height: 12px;
  letter-spacing: 0em;
  text-align: center;
  padding: 14px 10px;
  }
  #rendimiento{margin-right: 28px;}
  #comisiones{margin-top: 20px;}
  #seguridad{ margin-top: -49px; margin-right: 29px;}
  #otcItem{margin-top: -21px;}

  .innerP p{
    margin-bottom: 0;
  }
.contenido{padding: 5px;}
    
#num_uno{margin-left: -31px; margin-top: -50px}
#num_dos{margin-left: -31px; margin-top: -50px}
#num_tres{margin-left: -31px; margin-top: -50px}
#num_cuatro{margin-left: -31px; margin-top: -50px}
#num_cinco{margin-left: -31px; margin-top: -50px}

.CajaYellow{display: none;}
    #cajaBlue{
      height: 466px;
      width: 319px;
      border-radius: 10px;
      padding: 18px;
    }
.img_inicio{display: none;}
#imgresponsive{display: none;}
.inner2{
      height: 40px;
      width: 130px;
      border-radius: 4px;
      white-space: nowrap;
    }
.Styleh2ligth{
      font-family: Avenir;
      font-size: 18px;
      font-style: normal;
      font-weight: 900;
      line-height: 28px;
      letter-spacing: 0em;
      text-align: left;
    }
.StylePligth{
      font-family: Avenir;
      font-size: 13px;
      font-style: normal;
      font-weight: lighter;
      line-height: 20px;
      letter-spacing: 0em;
      text-align: left;
    }
.divotc{ height: 140px; width: 140px;}
.divotc img{ height: 100px; width: 116.66667175292969px;}
  /*.IconStyle{font-size: 14px;height: 19px;width: 46px;}*/
.IconStyle{font-size: 14px;height: 18px;width: 46px;}
.SymbolStyle{font-size: 14px;height: 19px;width: 46px; font-weight: lighter;}
  
.letraotc{font-size: 12px;}
.flex-containerOtc{
    text-align: center;
    display: flex;
    margin: 0 auto;
    align-items: center;
    height: auto;
    width: auto;
    justify-content: center;
  }

  
.flex-item-right, .flex-item-left {
      flex: 100%;
  }

.h2portal{font-size: 20px;text-align: center;}
.cajatexto{font-size: 14px; text-align: left;}
  
.innerP{
  height: 40px; width: 320px;
  text-align: center;
  font-size: 12px;
  margin:10px;
  padding: 10px;
  line-height: 22px;
  font-weight: lighter;
  }
.titulo_portal{font-size: 20px;}
.num {height: 32px; width: 32px;font-size: 20px;}
.cajasoporte{
    height: 375px;
    width: 100%;}
 .soporte {

      border-radius: 4px;
      padding-top: 20px;
      }
.cajatexto{
    height: 44px;
    width: 319px;
    border-radius: 4px;}
    
.textareasoporte{
    height: 140px;
    width: 319px;
    border-radius: 4px;}

.h2portal{
font-family: Avenir;
font-size: 20px;
font-weight: 900;
line-height: 27px;
letter-spacing: 0em;
text-align: center;
}
.btnEnviar{
  height: 40px;
  width: 200px;
  border-radius: 20px;
  background-color: var(--theame-yellow);
  color:var(--theame-color);  
  font-family: Avenir;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: center;
  border:0;
}
.imgPersonaF{
  height: 126.328125px;
  width: 240px;
  border-radius: 0px;
  }
.imgPersonaM{
  height: 159.7790069580078px;
  width: 240px;
  border-radius: 0px;
   }
.imgdivF{
    height: 126.328125px;
    width: 240px;
    border-radius: 0px;}
    
.imgdivM{
    height: 159.7790069580078px;
    width: 240px;
    left: 68px;
    top: 524px;
    border-radius: 0px;}
.BtnPersonaF{
    height: 40px;
    width: 311px;
    border-radius: 20px;
    background: #F4C55C;
    font-family: Avenir;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: center;
    color:#ffffff;
    
    }
.BtnPersonaF :hover
{
  opacity: 0.6;
  transition: 0.3s;
}

.BtnPersonaM{
    height: 40px;
    width: 311px;
    background: #FFFFFF;
    border: 1.5px solid #F4C55C;
    box-sizing: border-box;
    border-radius: 20px;
    font-family: Avenir;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: center;
    color: #F4C55C;
    
    }
}