*{
    margin: 0;
    padding: 0;
}
body{

    background-size: cover;
    height: 100vh;
    
}
/* SOCIAL-BAR LAPTOP L */

@media (max-width: 1440px) {
    /*.social-bar{
   height: 300px;
   width: 300px;
   margin: 140px 0;
}*/

.ul1{
   margin-top: 2rem;   
}   

.ul2{
   margin-top: 1rem;
   /*margin: 0 auto;*/
   height: 430px;
   overflow: hidden;
   background-image: url(../img/NBRSLL.png);
   
   
}

.li2{
   position: relative;
   transform: translateX(-100px);
   background: rgba(0, 0, 0, 0.8); /* ESTABA EN 0.8 */
   list-style: none;
   padding: 10px 0;
   margin: 10px 0;
   transition: .5s;
   width: 150px; /* AQUI SE PONE EL GROSOR DE LA PUNTA INVISIBLE */
   border-radius: 0 200px 200px 0;
}

.li2:hover:nth-child(1){
   background: #0078d7;
}
.li2:hover:nth-child(2){
   background: #008f39;
}
.li2:hover:nth-child(3){
   background: #ff00ff;
}
.li2:hover:nth-child(4){
   background: #2e406e;
}
.li2:hover:nth-child(5){
   background: #47b6f5;  
}
.li2:hover:nth-child(6){
   background: #0e76a8;  
}
.li2:hover{
   transform: translateX(0);
}

.aSBC{
   font-weight: bold;
   color: #fff;
   font-family: sans-serif;
   text-decoration: none;
   padding-left: 10px;
}

.i2{
   margin-left: 15px;
   padding:10px 10px;
   border-radius: 50px;
   color: #000;
   background: #fff;
}

.icon{
   font-size: 20px;
}
.correo{
   position: relative;
   left: 29px;
}
.whatsapp{
   position: relative;
   left: 4px;
}
.instagram{
   position: relative;
   left: 6px;
}
.facebook{
   position: relative;
   left: 6px;
}
.llamar{
   position: relative;
   left: 29px;
}
.linkedin{
   position: relative;
   left: 16px;
}
}

/* SOCIAL-BAR LAPTOP */

@media (max-width: 1024px) {
     /*.social-bar{
    height: 300px;
    width: 300px;
    margin: 140px 0;
}*/

.ul1{
    margin-top: 2rem;   
}   

.ul2{
    margin-top: 1rem;
    /*margin: 0 auto;*/
    height: 430px;
    overflow: hidden;
    background-image: url(../img/NBRSL.png);
    
    
}

.li2{
    position: relative;
    transform: translateX(-100px);
    background: rgba(0, 0, 0, 0.8);
    list-style: none;
    padding: 10px 0;
    margin: 10px 0;
    transition: .5s;
    width: 150px; /* AQUI SE PONE EL GROSOR DE LA PUNTA INVISIBLE */
    border-radius: 0 200px 200px 0;
}

.li2:hover:nth-child(1){
    background: #0078d7;
}
.li2:hover:nth-child(2){
    background: #008f39;
}
.li2:hover:nth-child(3){
    background: #ff00ff;
}
.li2:hover:nth-child(4){
    background: #2e406e;
}
.li2:hover:nth-child(5){
    background: #47b6f5;  
}
.li2:hover:nth-child(6){
    background: #0e76a8;  
}
.li2:hover{
    transform: translateX(0);
}

.aSBC{
    font-weight: bold;
    color: #fff;
    font-family: sans-serif;
    text-decoration: none;
    padding-left: 10px;
}

.i2{
    margin-left: 15px;
    padding:10px 10px;
    border-radius: 50px;
    color: #000;
    background: #fff;
}

.icon{
    font-size: 20px;
}
.correo{
    position: relative;
    left: 29px;
}
.whatsapp{
    position: relative;
    left: 4px;
}
.instagram{
    position: relative;
    left: 6px;
}
.facebook{
    position: relative;
    left: 6px;
}
.llamar{
    position: relative;
    left: 29px;
}
.linkedin{
    position: relative;
    left: 16px;
}
}



/* SOCIAL-BAR TABLET */

@media (max-width: 768px) {
    /*.social-bar{
   height: 300px;
   width: 300px;
   margin: 140px 0;
}*/

.ul1{
   margin-top: 1rem;   
}   

.ul2{
   margin-top: 1rem;
   /*margin: 0 auto;*/
   height: 315px;
   overflow: hidden;
   background-image: url(../img/NBRST.png);  
}

.li2{
   position: relative;
   transform: translateX(-100px);
   background: rgba(0, 0, 0, 0.8);
   list-style: none;
   padding: 4px 0;
   margin: 6px 0;
   transition: .5s;
   width: 150px; /* AQUI SE PONE EL GROSOR DE LA PUNTA INVISIBLE */
   border-radius: 0 200px 200px 0;
}

.li2:hover:nth-child(1){
   background: #0078d7;
}
.li2:hover:nth-child(2){
   background: #008f39;
}
.li2:hover:nth-child(3){
   background: #ff00ff;
}
.li2:hover:nth-child(4){
   background: #2e406e;
}
.li2:hover:nth-child(5){
   background: #47b6f5;  
}
.li2:hover:nth-child(6){
   background: #fc210b;  
}
.li2:hover{
   transform: translateX(0);
}

.aSBC{
   font-weight: bold;
   color: #fff;
   font-family: sans-serif;
   text-decoration: none;
   padding-left: 10px;
}

.i2{
   margin-left: 15px;
   padding:10px 10px;
   border-radius: 50px;
   color: #000;
   background: #fff;
}

.icon{
   font-size: 20px;
}
.correo{
   position: relative;
   left: 33px;
}
.whatsapp{
   position: relative;
   left: 7px;
}
.instagram{
   position: relative;
   left: 10px;
}
.facebook{
   position: relative;
   left: 9px;
}
.llamar{
   position: relative;
   left: 32px;
}
.youtube{
   position: relative;
   left: 16px;
}
}



/* SOCIAL-BAR CELLPHONE */

@media (max-width: 425px) {
     /*.social-bar{
    height: 300px;
    width: 300px;
    margin: 140px 0;
}*/

.ul1{
    margin-top: 1rem;   
}   

.ul2{
    margin-top: 1rem;
    /*margin: 0 auto;*/
    height: 315px;
    overflow: hidden;
    background-image: url(../img/NBRSC.png);  
}

.li2{
    position: relative;
    transform: translateX(-100px);
    background: rgba(0, 0, 0, 0.8);
    list-style: none;
    padding: 4px 0;
    margin: 6px 0;
    transition: .5s;
    width: 150px; /* AQUI SE PONE EL GROSOR DE LA PUNTA INVISIBLE */
    border-radius: 0 200px 200px 0;
}

.li2:hover:nth-child(1){
    background: #0078d7;
}
.li2:hover:nth-child(2){
    background: #008f39;
}
.li2:hover:nth-child(3){
    background: #ff00ff;
}
.li2:hover:nth-child(4){
    background: #2e406e;
}
.li2:hover:nth-child(5){
    background: #47b6f5;  
}
.li2:hover:nth-child(6){
    background: #fc210b;  
}
.li2:hover{
    transform: translateX(0);
}

.aSBC{
    font-weight: bold;
    color: #fff;
    font-family: sans-serif;
    text-decoration: none;
    padding-left: 10px;
}

.i2{
    margin-left: 15px;
    padding:10px 10px;
    border-radius: 50px;
    color: #000;
    background: #fff;
}

.icon{
    font-size: 20px;
}
.correo{
    position: relative;
    left: 33px;
}
.whatsapp{
    position: relative;
    left: 7px;
}
.instagram{
    position: relative;
    left: 10px;
}
.facebook{
    position: relative;
    left: 9px;
}
.llamar{
    position: relative;
    left: 32px;
}
.youtube{
    position: relative;
    left: 16px;
}
}