/* DOWNLOAD ELEMENT LISTE  ---------------------------------- */

.dlElement_con {
    position:relative; 
    width:80%; padding: 0 10% 0 10%; 
}



.dlElement_con .dlTable { display:table; margin:30px 0px 25px 0px; width:100%; border-spacing: 4px 4px;  }
.dlElement_con .dlTable .dlTr { display:table-row; text-align:left; background-color:rgba(0,0,0,0.1); text-decoration:none; }
.dlElement_con .dlTable .dlTr .dlTd {display:table-cell; vertical-align:top;}
*[data-href] { cursor: pointer;}


.dlElement_con .dlTable .tr_spacer {height:20px; background-color:transparent;}
.dlElement_con .dlTable .tr_spacer td { background-color:transparent; }



.dlElement_con hr {height:2px;border-width:0;color:#fff;background-color:#fff;}


.dlElement_con .dlElement_image_con { position:relative; width:100px; padding:15px; display:flex; flex-direction: column; align-items: center;}
.dlElement_con .dlElement_image_con .dlElement_image_bg {       
    width:110px; height:110px;
    padding:10px; 
    margin:20px; 
    background-color:var(--main-signalColor01); 
    border-radius:50%;   
    font-family: arial;
}
 .dlElement_con .dlElement_image_con .dlElement_image_bg .dlElement_image { 
    width:100%; height:100%; 
    color:#fff; 
    background-position: 50% 50%; background-repeat: no-repeat; background-size:cover;
}


/* NEW 12.4 VERSION  - DELETE OLD VERSION ABOVE WHEN MIGRATED */
.dlElement_con .dlElement_image_bg .standard { background-image:url(imgs/download_standard.png); } 
.dlElement_con .dlElement_image_bg .pdf { background-image:url(imgs/download_pdf.png); } 
.dlElement_con .dlElement_image_bg .zip { background-image:url(imgs/download_zip.png); } 
.dlElement_con .dlElement_image_bg .word { background-image:url(imgs/download_word.png); } 
.dlElement_con .dlElement_image_bg .csv { background-image:url(imgs/download_csv.png); } 
.dlElement_con .dlElement_image_bg .jpg { background-image:url(imgs/download_jpg.png); } 
.dlElement_con .dlElement_image_bg .png { background-image:url(imgs/download_png.png); } 
.dlElement_con .dlElement_image_bg .mp3 { background-image:url(imgs/download_mp3.png); } 
.dlElement_con .dlElement_image_bg .avi { background-image:url(imgs/download_avi.png); } 


.dlElement_con .dlElement_Title { font-size: 1.5rem; margin:20px; }
.dlElement_con .dlElement_Text { margin: 20px;text-align: left; }
.dlElement_con .dlElement_Text p { text-align: left; font-size: 0.8rem; }


/* ANIMATION HOVER ------------------------------------------------ */

.dlElement_con .dlTable .dlTr:hover { opacity:0.6;}
.dlElement_con .dlTable .dlTr:hover .dlElement_image_con .dlElement_image_bg {
    width:90px; height:90px;
    padding:30px; 
    margin:10px;
}
.dlElement_con .dlTable .dlTr:hover .dlTd .dlElement_Title, .dlElement_con .dlTable .dlTr:hover .dlTd .dlElement_Text {color:#fff;}


/* SMALL IMAGE VARIANTE */

/*
.dlElement_con .dlElement_image_con .image_bg_small { 
    width:50px; height:50px; 
    padding:10px; 
    margin:10px auto 10px auto; }
.dlElement_con .dlElement_image_con .dlElement_image_bg .image_small {    
 }

 .dlElement_con .dlTable .dlTr:hover .dlElement_image_con .image_bg_small.dlElement_image_bg {
    width:40px; height:40px;
    padding:20px; 
    margin:5px auto 5px auto;
}*/



/*.dlElement_con .title { margin:20px auto 0px auto;
background-color: rgba(255,255,255,0.2);
padding:10px 0px 10px 0px; box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}*/


/* RESPONSIVE ------------------- */


@media only screen and (max-width: 768px) {
    .dlElement_con {width:90%; padding: 0 5% 0 5%; margin:0 auto 0 auto; }
    .dlElement_con .dlElement_image_con { width:70px; padding:15px; }
    .dlElement_con .dlElement_image_con .dlElement_image_bg { width:80px; height:80px; padding:10px; margin:10px; }
    .dlElement_con .dlElement_Title { font-size: 1rem; margin:10px; }   
    .dlElement_con .dlElement_Text { margin: 10px;}
    .dlElement_con .dlElement_Text p { font-size: 0.7rem; }
    .dlElement_con .dlTable .dlTr:hover .dlElement_image_con .dlElement_image_bg {
        width:70px; height:70px;
        padding:20px; 
        margin:5px;
    }
}

@media only screen and (min-width: 1400px) {
    .dlElement_con {width:50%; padding: 0 25% 0 25%;}
}