﻿#tabla-precios {
    display: inline-block;
    width: 80%;
    margin-top: 50px
}

#tabla-precios1 {
    display: inline-block;
    width: 80%;
    margin-top: 50px
}

body {
    text-align: center;
}


/*Columnas*/

.precio-col {
    display: inline-block;
    background-color: #f3f3f3;
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    margin-bottom: 50px;
    box-shadow: 0px 2px 5px #ddd
}

@media screen and (min-width:768px) {
    .precio-col {
        width: 32%;
        float: left;
        margin-right: 2%
    }

        .precio-col:last-child {
            margin-right: 0
        }
}

/*Headers*/

.precio-col-header {
    background-color: #49AC51;
    padding: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.precio-col:nth-child(2) .precio-col-header {
    background-color: #157DBA
}

.precio-col-header h3 {
    color: #f3f3f3;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 0
}

.precio-col-header p {
    text-align: center;
    color: #f3f3f3;
    font-size: 14px;
    margin-bottom: 0
}

/*Características*/

.precio-col-features {
    padding: 0 20px 20px 20px
}

    .precio-col-features p {
        padding: 20px 0;
        margin: 0;
        text-align: center;
        border-top: 1px solid #ddd
    }

        .precio-col-features p:first-child,
        .precio-col-features p:last-child {
            border-top: none
        }



/*Comprar*/

.precio-col-comprar {
    padding: 10px;
    max-width: 250px;
    text-align: center;
    background-color: #49AC51;
    margin: 0 auto 20px;
    border-radius: 10px;
    transition: all 0.3s
}

    .precio-col-comprar a {
        color: #f3f3f3;
        padding: 10px;
        font-size: 20px;
        text-transform: uppercase;
        transition: all 0.3s
    }

    .precio-col-comprar:hover {
        background-color: #4fbc58;
        transition: all 0.3s
    }

        .precio-col-comprar:hover a {
            color: #f3f3f3;
            transition: all 0.3s
        }

.precio-col-comprar-2 {
    padding: 10px;
    max-width: 250px;
    text-align: center;
    background-color: #157DBA;
    margin: 0 auto 20px;
    border-radius: 10px;
    transition: all 0.3s
}
    .precio-col-comprar-2 a {
        color: #f3f3f3;
        padding: 10px;
        font-size: 20px;
        text-transform: uppercase;
        transition: all 0.3s
    }

    .precio-col-comprar-2:hover {
        background-color: #1d97df;
        transition: all 0.3s
    }

        .precio-col-comprar-2:hover a {
            color: #f3f3f3;
            transition: all 0.3s
        }