.proInfo h1.title {
    color: #336476;
    font-size: 1.4rem;
}

.summary {
    font-size: 1.2rem;
    margin: 10px;
    text-align: justify;
}

.proInfo > .items {
    padding-right: 5%;
    padding-left: 5%;
}

.proInfo .separator {
    margin-bottom: 5px;
}

.proInfo > .items > .iteminfo {
    display: table-row;
}

    .proInfo > .items > .iteminfo > .content:nth-child(2n) {
        background-color: #336476;
        color: white;
    }

    .proInfo > .items > .iteminfo > .content {
        display: table-cell;
        color: #336476;
        background-color: #e5e5e5;
        height: auto;
        width: 80%;
        text-align: justify;
        padding: 5px;
        font-size: 1.2rem;
        vertical-align: middle;
    }

    .proInfo > .items > .iteminfo > .icon {
        display: table-cell;
        width: 150px;
        padding-top: 15px;
        text-align: center;
        height: 150px;
        background-color: #ffffff;
        border-top: 1px dashed #e5e5e5;
        border-left: 1px dashed #e5e5e5;
    }

        .proInfo > .items > .iteminfo > .icon:nth-child(2n) {
            border-left: none;
            border-right: 1px dashed #e5e5e5;
        }

        .proInfo > .items > .iteminfo > .icon::before {
            content: '';
            margin-top: 15px;
            float: right;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 20px solid #336476;
            top: 0;
        }

        .proInfo > .items > .iteminfo > .icon:nth-child(2n)::before {
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #e5e5e5;
            border-right: none;
            float: left;
        }

.go {
    text-align: center;
    margin-top: 10px;
}

@media only screen and (max-width:550px) {

    .summary {
        font-size: 0.9rem;
    }

    .proInfo .separator {
        margin-bottom: 0px;
    }

    .proInfo > .items > .iteminfo > .content {
        margin-bottom: 5px;
        display: block;
        width: auto;
        float: right;
    }



    .proInfo > .items > .iteminfo > .icon::before {
        border-top: none;
        border-bottom: 20px solid #336476;
        border-right: 20px solid transparent;
        float: left;
        left: 0px;
        position: relative;
        top: 100%;
        transform: translateY(-175%);
        left: 75%;
    }

    .proInfo > .items > .iteminfo > .icon {
        display: block;
        float: left;
        width: 100%;
        position: relative;
        border-top: 2px dashed #808080;
        border-left: 1px dashed #e5e5e5;
        border-right: 1px dashed #e5e5e5;
        height: 120px;
    }

        .proInfo > .items > .iteminfo > .icon:nth-child(2n) {
            border-top: none;
            border-bottom: 2px dashed #808080;
            border-left: 1px dashed #e5e5e5;
            border-right: 1px dashed #e5e5e5;
        }

            .proInfo > .items > .iteminfo > .icon:nth-child(2n)::before {
                border-top: 20px solid #e5e5e5;
                border-bottom: none;
                border-left: 20px solid transparent;
                position: relative;
                top: 0px;
                left: 15%;
            }
}