<div class="col-md-12">

	<div class="container" >

		<div class="row">
			
			<div class="col-md-12" align="center" style="color: #FF5722; font-weight: bold; font-size: 50px; padding: 15px;">
				<b style=" color: #3a3a3a; padding: 7px 20px;"> SPEAKERS </b>
			</div>
			
			<?php
				$count = 1;
				$query = mysqli_query($connect,"SELECT * FROM Conferencistas WHERE estado = 1 ORDER BY id ASC ");
				while($data = mysqli_fetch_array($query)){
                    $bandera = '';
                    if($data["pais"] == 1){ $bandera .= '<img src="'.$url.'/img/ban_colombia.png" width="35" > ';}
                    if($data["pais"] == 2){ $bandera .= '<img src="'.$url.'/img/ban_peru.png" width="35" > ';}
                    if($data["pais"] == 3){ $bandera .= '<img src="'.$url.'/img/ban_mexico.png" width="35" > ';}
                    if($data["pais"] == 4){ $bandera .= '<img src="'.$url.'/img/ban_argentina.png" width="35" > ';}
                    if($data["pais"] == 5){ $bandera .= '<img src="'.$url.'/img/ban_espania.png" width="35" > ';}
                    if($data["pais"] == 6){ $bandera .= '<img src="'.$url.'/img/ban_polonia.png" width="35" > ';}

					echo '
					<div class="col-md-3 " align="center" style="margin-bottom: 30px;">
						<div>
						
                        <div class="item_speakers"> 
							
                            <img src="'.$recursos.'/'.$data["foto"].'" width="100%" >
                            <div style="background-color: #0b80ba; color: #ffffff; padding: 10px; background-position: left; background-size: cover;"> 
							     '.$data["nombre"].'
						    </div>
                            <div class="descripcion" >
							     <div align="center">'.$bandera.'</div>
                                 <div style="margin-bottom: 8px; font-weight: bold;" align="center">'.$data["nombre"].'</div>
				                 '.$data["descripcion"].'
							</div>
						</div>
						
						</div>
					</div>
					';
					$count++;

				}
			?>

		</div>

	</div>
	
</div>

<style>
	.item_speakers{
		background-position: center; 
		background-size: cover;
		border: 2px solid #242f48;
		cursor: pointer;
        border-radius: 20px;
        overflow: hidden;
	}
	
    .base_nombre{
        background-image: url(img/base_nombre.jpg);
        color: #ffffff;
        padding: 10px;
        border-top: 0px;
        border-radius: 0px;
        border: 0px;
        background-color: #059190;
        background-size: cover;
        background-position: left;
    }
    
	.descripcion{
		position: absolute;
		z-index: 1;
		color: #ffffff;
		top: 0;
		text-align: left;
		padding: 20px;
		font-size: 12px;
		opacity: 0;
		height: 100%;
		width: 92%;
    	background-color: rgb(11 128 186 / 93%);
		overflow: auto;
        border-radius: 20px;
	}
	
	ul.a {
	  list-style-type: circle;
	}
	

	

</style>

<script>
$( ".item_speakers" ).hover(
	function() {
		//$( this ).fadeTo( "slow", 0.33 );
		$( this ).find( ".descripcion" ).fadeTo( "slow", 1 );
		
		
  	}, function() {
    	//$( this ).fadeTo( "slow", 1 );
		$( this ).find( ".descripcion" ).fadeTo( "slow", 0 );
  	}
);
	
	

</script>