@charset "UTF-8";

#flow > ul:nth-of-type(1) {
    margin-bottom: 3%;
}

#flow > ul li {
    padding: 3%;
    margin-bottom: 2%;
    background-color: #fff;
}

#flow > ul li.both {
    border: 2px solid rgb(200, 200, 200);
}

#flow > ul li.sell {
    border: 2px solid rgb(145, 190, 250);
}

#flow > ul li.buy {
    border: 2px solid rgb(250, 145, 165);
}

#flow > ul li.intermedia {
    background-color: rgb(130, 200, 80);
}

#flow > ul li.intermedia h4,
#flow > ul li.intermedia p {
    color: #fff;
}

#flow > ul li:last-child {
    margin-bottom: 0;
}

#flow > ul li h4 {
    margin-bottom: 2%;
    font-size: 20px;
}

#flow > ul li h4 span.sell {
    padding: 10px;
    padding-left: 12px;
    margin-right: 8px;
    border-radius: 3px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(145, 190, 250);
}

#flow > ul li h4 span.buy {
    padding: 10px;
    padding-left: 12px;
    margin-right: 8px;
    border-radius: 3px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(250, 145, 165);
}

#flow > ul li h4 span.intermedia {
    padding: 10px;
    padding-left: 12px;
    margin-right: 8px;
    border-radius: 3px;
    font-size: 20px;
    color: rgb(130, 200, 80);
    background-color: #fff;
}

#flow > ul li h4 span:last-child {
    margin-right: 20px;
}

#flow > ul li p {
    font-size: 15px;
    line-height: 2;
}

#flow > ul li p a {
    margin: 0 5px;
    text-decoration: underline;
}

#flow > ul li p a:hover {
    text-decoration: none;
}

/*===============================
//
MAXWIDTH / 768
//
===============================*/

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


    #flow > ul li {
        padding: 6%;
        margin-bottom: 3%;
    }

    #flow > ul li h4 {
        margin-bottom: 4%;
    }

    #flow > ul li h4 span.sell {
        padding: 8px 10px 6px;
        border-radius: 4px;
        font-size: 18px;
    }

    #flow > ul li h4 span.buy {
        padding: 8px 10px 6px;
        border-radius: 4px;
        font-size: 18px;
    }

    #flow > ul li h4 span.intermedia {
        padding: 8px 10px 6px;
        border-radius: 4px;
        font-size: 18px;
    }

    #flow > ul li h4 span:last-child {
        margin-right: 18px;
    }

}

/*===============================
//
MAXWIDTH / 480
//
===============================*/

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

    #flow > ul:nth-of-type(1) {
        margin-bottom: 6%;
    }

    #flow > ul li {
        padding: 8% 5%;
        margin-bottom: 3%;
    }

    #flow > ul li.both {
        border: 1px solid rgb(200, 200, 200);
    }

    #flow > ul li.sell {
        border: 1px solid rgb(145, 190, 250);
    }

    #flow > ul li.buy {
        border: 1px solid rgb(250, 145, 165);
    }

    #flow > ul li h4 {
        margin-bottom: 6%;
        font-size: 20px;
        line-height: 1.7;
    }

    #flow > ul li h4 span.sell {
        padding: 6px;
        padding-left: 9px;
        margin-right: 6px;
        font-size: 18px;
    }

    #flow > ul li h4 span.buy {
        padding: 6px;
        padding-left: 9px;
        margin-right: 6px;
        font-size: 18px;
    }

    #flow > ul li h4 span.intermedia {
        padding: 6px;
        padding-left: 9px;
        margin-right: 6px;
        font-size: 18px;
    }

    #flow > ul li h4 span:last-child {
        margin-right: 12px;
    }

    #flow > ul li p {
        font-size: 15px;
        line-height: 1.8;
    }

    #flow > ul li p a {
        margin: 0 5px;
        text-decoration: underline;
    }

    #flow > ul li p a:hover {
        text-decoration: none;
    }

}