/*
    tesa-membership.css
*/

.tesa-card
{
    position: relative;
    
    display: block;
    
    margin: 0 auto;
    
    border-radius: 12px;
    
    width: 290px;    
    height: 370px;
    
    /*
    padding-left: 10px;
    padding-right: 10px;
    */
    
    padding: 10px;
    
    overflow: hidden;
    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);        
}

.tesa-card.gold
{
    /*
    background-color: #FFD700;    
    */
    
    background-image: linear-gradient(to right, #FFD700, #fff, #FFD700);   
}

.tesa-card.silver
{
    /*
    background-color: #C0C0C0;    
    */
    
    margin-top: 25px;
    
    background-image: linear-gradient(to right, #C0C0C0, #fff, #C0C0C0);   
}

.tesa-card.bronze
{
    /*
    background-color: #CD7F32;    
    */
    
    background-image: linear-gradient(to right, #CD7F32, #fff, #CD7F32);   
}

.tesa-card.platinum
{
    /*
    background-color: #E5E4E2; 
    */

    margin-top: 25px;
    
    /*
    background-image: linear-gradient(to right, #373d65, #fff, #373d65);  
    */
        
    background-image: linear-gradient(to right, #13254B, #fff, #13254B);  
     
}

.tesa-title
{
    display: block;
    
    width: 100%;
    text-align: center;
    color: #000;
    font-weight: 700;
    
    padding-top: 0px;
}

.tesa-price
{
    display: block;
    
    width: 100%;
    text-align: center;
    color: #000;
    
    font-weight: 700;
    
    padding-top: 0px;
    
    margin-top: 10px;
}

.tesa-content
{
    display: block;
    
    width: 100%;

    text-align: left;
    color: #000;
    
    padding-top: 10px;
    
    font-size: 0.95em;    
}

.tesa-content .sub-text
{
    display: block;
    
    width: 100%;

    text-align: center;
    
    font-weight: 700;
}

.tesa-card.silver .tesa-content 
{
    padding-top: 0px;
}

.tesa-content ul
{
    margin-top: 15px;
    padding-left: 15px;    
    
}

.tesa-content ul li.item
{
    margin-top: 2px;
    
    width: 100%; 
    
    font-size: 0.93em;   
    
    font-weight: 600;
    
    padding-left: 2px;    
    
}

.tesa-card .tesa-button
{
    position: absolute;
    
    bottom: 4px;
    right: 8px;
            
    /*
    padding: 1px;
    background: #000;
    border-radius: 3px;
    */
    
    cursor: pointer;
    
    z-index: 1;
}

.tesa-card .tesa-button a
{
    font-size: 0.75em;
    color: #ddd;
    padding: 0;
    margin: 0;
    
    text-shadow: 2px 2px #000;    
}

.tesa-card .tesa-button a:hover
{
    color: #fff;    
}

.tesa-card.silver .tesa-button a,
.tesa-card.gold .tesa-button a
{
    color: #555;
    text-shadow: 2px 2px #fff;    
}

.tesa-card.silver .tesa-button a:hover,
.tesa-card.gold .tesa-button a:hover
{
    color: #000;    
}

/*
    new design
*/

.tesa-column
{
    padding-top: 90px;
    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);        
    
}

#tesa-plans
{
    display: flex;
    justify-content: center;
    align-items: center;
        
    padding: 10px;

    padding-top: 90px;
    
    /*
    background: red;    
    */
}

.tesa-header
{
    position: relative;
        
    flex-shrink: 0;

    height: 30mm;
    
    background-color: #ddd;
}

.tesa-header .tesa-col 
{
    position: relative;
    
    display: inline-block;
    
    width: 100%;
    
    height: 30mm;
    
    text-align: center;
    
    background: green;
}

.tesa-header .tesa-col .info
{
    position: absolute;
    
    top: 17px;
    left: 0px;
    
    color: #000;
    
    width: 100%;
    
    text-align: center;
    
    font-weight: 700;
    
    font-size: 1.55em;
    
}

.tesa-header .tesa-col .price
{
    position: absolute;
    
    bottom: 5px;
    left: 0px;
    
    width: 100%;

    text-align: center;
    
    font-weight: 700;
    
    font-size: 1.2em;
    
    color: #fff;    
}

.hexagon-text
{
    color: #fff;
    font-weight: 700;
    font-size: 1.2em;
}

.tesa-header .tesa-col .hexagon
{
    position: absolute;
    
    left: 0px;
    top: -90px;
    
    width: 100%;
    height: 160px;
    
    /*
    margin-left: 54px;    
    */
    
    margin: 0 auto;
}

.tesa-col.col-info
{
    background-color: #ddd;    
}

.tesa-col.col-silver
{
    background-color: #C0C0C0;
}

.tesa-col.col-gold
{
    background-color: #FFD700;
}

.tesa-col.col-platinum
{
    background-color: #13254B;        
}

#tesa-items
{
    display: block;
    
    background: red;
    
}

.tesa-items .tesa-col 
{
    position: relative;
    
    display: inline-block;
    
    width: 240px;
        
    text-align: center;    
}

.tesa-items
{
    text-align: center;
    
    font-size: 1.1em;
}

.tesa-item
{
    padding: 15px 2px 15px 2px;  
      
    border-bottom: 1px solid #ccc;
}

.tesa-tick,
.tesa-cross
{
    display: inline-block;
    
    width: 20px;
    height: 20px;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tesa-tick
{
    background-image: url("http://digitalmarketingmentor.co.uk/wp-content/themes/dmm-elementor-child/green-tick.png");
}

.tesa-cross
{
    background-image: url("http://digitalmarketingmentor.co.uk/wp-content/themes/dmm-elementor-child/red-cross.png");
}

.tesa-button-2 
{
    display: block;
    
    width: 112px;
    height: 42px;
    
    margin: 0 auto;
    
    margin-top: 4px;
    margin-bottom: 4px;
    
    font-size: 1.1em;
    font-weight: 700;
    
    /*
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);            
    */
    
    text-align: center;
    
    cursor: pointer;
}

.tesa-button-2 a
{
    border: none !important;
    color: #ccc !important;
}

.tesa-button-2 a:hover
{
    color: #fff !important;    
}

.tesa-button-2.silver
{
    /*background-color: #C0C0C0;*/
    background-color: red !important;    
}

.tesa-button-2.gold
{
    background-color: #FFD700;
}

.tesa-button-2.platinum
{
    background-color: #13254B;            
}

.tesa-items.small-font-1
{
    font-size: 0.80em;
    font-weight: 600;
}

.tesa-flex-container {
    display: flex;
}

.tesa-flex-child {
    flex: 1;
    /*
    border: 2px solid yellow;
    */
}  

.tesa-flex-child:first-child {
    margin-right: 5px;
} 

.tesa-field-container
{
    padding: 5px;
    
    margin-bottom: 10px;
}