/*body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}*/


.cnt-tdi{
    margin:     auto;
    /*justify-content:    space-between;*/
    justify-content: center;  
    margin-top: 150px;
    width:      100%;
    display:    flex;
    flex-wrap:  wrap;
    max-width:  1500px;
    /*border:     solid 1px #000;*/   
}
.tdi{
    width:          300px;
    margin:         20px;
    border-radius:  6px;
    overflow:       hidden;
    background:     #FFF;
    box-shadow:     0px 1px 10px rgba(0,0,0,0.2);
    cursor:         default;
    transition:     all 400ms ease;
    
}
.tdi:hover{
    box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
    transform: translateY(-3%);
}
.tdi img{
    width: 100%;
    height: 180px;
}
.tdi .tt-pck{
    width: 100%;    
    text-align: center;
    /*border: solid 1px #FFCC00;*/
}
.tt-pck h3{
    padding: 0;
    font-weight: bold 400;
    margin-bottom: 5px;
    width: 100%;
    /*border: solid 1px #FFCC00;*/
    
}
.tt-pck h4{
    padding: 5px;
    font-size: 12px;
    color: #FFF;
    background: #000;
    /*border: solid 1px #000;*/
}
.cnt-td{
    padding:    15px;
    text-align: center;
    height:     150px;
    /*border: solid 1px #000;*/
}


.cnt-td .cnt-li{
    /*line-height: 1.5;*/
    margin-top: -8px;
    color: #6a6a6a;
    text-align: left;
    /*border-top: solid 1px #DDD;*/
    /*border: solid 1px #FFCC00;*/ 
}


.cnt-a a{
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    margin-top: 10px;
    color: #FFF;
    border: 1px solid #2fb4cc;
    background: #000;
    border-radius: 4px;
    transition: all 400ms ease;
}
.cnt-a a:hover{
    color: #fff;
     background: rgba(0,0,0,0.6);
}