body{
    background-color: #e0eaca;
    
/*
        background-image: url('../img/nuevo_fondo.png');

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-size: cover;
      */

      
}



  .row.vdivide [class*='col-']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    min-height: 70px;
  }

  iframe { display:block; width:100%; height: 1000px; border:none; }

/*
  footer {
  min-height: 50px;

  background-color: #EFF0F1;
  width: 100%;
  position: relative;
  clear: both;
  margin-top: 30px;
  padding-top: 15px;
  overflow: visible;
}
*/

/*
footer {
    
  min-height: 60px;
  background-color: #EDEDED;
  color: #000;

  width: 100%;
  position: absolute;
  clear: both;
  margin-top: 20px;
  padding-top: 20px;
  overflow: visible;
  opacity:0.5;
  
  

}*/

   .center{
  
  
display: block;
   width: auto;
    max-width: 90%;
    margin: 0 auto;
   }

.logo{
    max-width: 50%;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    color: white;
    text-align: center;
    background-color: #CDE091;
    padding: 8px 5px;

  }

.pading-fluid{
    padding-bottom:35px;
}

audio{
    background:#666;
}
/*
.fondo{
    padding: 0px 70px;
    margin: 0px 0.01em;
    background-image: url('../img/pasto.jpg');
    background-size: contain;
    background-repeat:repeat-x;
}
*/
/* ======================== */



.icons {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;

}


.icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    text-decoration: none !important;
    font-size: 20px;
    color: #fff;
    background-color: #3b3b3b;
    border-radius: 50%;
    outline: 2px solid #fff;
    transition-property: outline-offset, outline-color, background-color;
    transition-duration: 0.25s;
}

.icon:hover {
    outline-offset: 4px;
}
.icon i {
    margin: auto;
}
.icon:hover i {
    animation: shake 0.25s;
}
.icon--instagram {
    background-image: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
   
   
}

.icon--instagram:hover{
   /*outline-color: #a02d76;*/
   outline: 2px solid #fff;
}

.icons a:visited{
   color: #fff;
}

.icon--facebook {
    background-color: #385898;

   
    
}

.icon--facebook:hover {

   /*outline-color: #385898;*/
   outline: 2px solid #fff;
   
}


.icon--whatsapp {
    background-color: #27d367;

    
  }

  .icon--whatsapp:hover {

   /*outline-color: #27d367;*/
   outline: 2px solid #fff;
   
 }


 @keyframes shake {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-15deg);
    }
   }


.carousel-control .icon-next, .carousel-control .fa-angle-right {
    right: 50%;
    margin-right: -10px;
}


.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .fa-angle-right {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 5;
    display: inline-block;
}


.carousel-control .icon-prev, .carousel-control .fa-angle-left {
    left: 50%;
    margin-left: -10px;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .fa-angle-left, 
.fa-chevron-circle-left, .fa-chevron-circle-right {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 5;
    display: inline-block;
}



.current{
    /*border: 2px solid #C04A47;
   
    font-weight: bold;
    border-bottom: 3px;
    border-bottom-color: #C2C2C2;
    border-bottom-style: solid;
    
     border-right: 2px;
    border-right-color: #C2C2C2;
    border-right-style: solid;*/
	
	background-color: #E8E8E8 !important;
	border-color: #474949;
	color: #000 !important;
	font-weight: bold;

    
    
 
}

/*
#playlist, #playlist li{
	background-color: #474949;
	color: #fff;
	border-color: #474949;
	
}

#playlist li.list-group-item:hover{
    background-color:#7D7D79 !important;
    color:#fff !important;
}


#playlist{
    height: 700px;
    overflow-y: auto;
    
}*/

#playlist, #playlist li {
    background-color: #CDE091;
    color: #474949;
    border-color: #6b8027;
}

#playlist li.list-group-item:hover {
    background-color: #3b9c5f !important;
    color: #fff !important;
}



.current:before
{
    
   
   /*content: url('../img/sound.gif');*/
    
     background-image: url('../img/sound.gif');
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px; 
    height: 20px;
    content:"";
}

audio{
	width:100%;
}


#bienvenido{
    
   
   /*content: url('../img/sound.gif');*/
    
     background-image: url('../img/welcome.jpg');
    background-size: contain;
    background-repeat: no-repeat;
     width: 100%; 
     height:1000px;
    /*display: block;
   
    height: 400px;*/
    content:"";
}

.list-group-item {
    cursor: pointer;
}

/*
#playlist li.list-group-item:hover{
    background-color:#7D7D79 !important;
    color:#fff !important;
}*/




/*#todolistado ul > .list-group-item {
    padding: 6px 15px !important;
    cursor: default;
}*/

/*
media query screen
1920
1280
800
480
*/

.logo_principal{
  
  
    display: block;
       width: auto;
        max-width: 15%;
        margin: 0 auto;
       } 

       .center{
  
  
        display: block;
           width: auto;
            max-width: 50% !important;
            margin: 0 auto;
           }
        

 @media screen and (max-width:3400px)
       {
       .fondo{
           display: none;
       }
       
       
           
           .imgvisible{
               display: block;
           }
           .icon {
       
       
               width: 32px;
               height: 32px;
               font-size: 24px;
       
           }  
       
           .logo{
               max-width: 100%;
           }
           .logo_principal{
               max-width: 20%;
           }
           
           .center{
               max-width:30% !important;
           }
       }

       @media screen and (max-width:1980px)
       {
       .fondo{
           display: none;
       }
       
       
           
           .imgvisible{
               display: block;
           }
           .icon {
       
       
               width: 32px;
               height: 32px;
               font-size: 24px;
       
           }  
       
           .logo{
               max-width: 100%;
           }
           .logo_principal{
               max-width: 20%;
           }
           
           .center{
               max-width:40% !important;
           }
       }

@media screen and (max-width:1280px)
{
.fondo{
    display: none;
}


    
    .imgvisible{
        display: block;
    }
    .icon {


        width: 32px;
        height: 32px;
        font-size: 24px;

    }  

    .logo{
        max-width: 80%;
    }
    .logo_principal{
        max-width: 35%;
    }
    
    .center{
               max-width:60% !important;
           }
}



@media screen and (max-width:701px)
{
    .welcome{
         top:55%;
        font-size:90px;
    }
    
  

    .icon {


        width: 24px;
        height: 24px;
        font-size: 20px;

    }

    .logo{
        max-width: 50%;
    }

    .logo_principal{
        max-width: 40%;
    }
    
    .center{
               max-width:80% !important;
           }
}