@import url("contact.css");

.plan h1 img {
    border-radius:8px;
}
.plan h2 span {
    background:#fff;
    color:var(--blue);
    font-size:0.8em;
    padding:5px 10px 2px 10px;
    margin-right:5px;
    border-radius:4px;
    display:inline-block;
    line-height:1;
    font-weight:bold;
    vertical-align:middle;
}

.plan .g6 .button {
    background:var(--blue);
    color:#fff;
    font-size:1.2em;
    text-align:center;
}
.plan .g6 .button:hover {
    background:var(--red);
    color:#fff;
}
.plan .course article {
    border:solid 4px var(--pink);
    background:#fff;
    border-radius:8px;
    margin-bottom:40px;
}
.plan .course article h1 {
    background:var(--pink);
    color:#fff;
    padding:20px;
    border-radius:3px 3px 0 0;
    margin-bottom:20px;
    text-align:center;
}
.plan .course article h1 div {
    display:inline-block;
    padding-right:10px;
}
.plan .course article h1 em {
    display:inline-block;
    background:#fff;
    color:var(--red);
    padding:5px;
    overflow:hidden;
    width:60px;
    height:60px;
    border-radius:30px;
    text-align:center;
    font-weight:bold;
    font-size:1.6em;
    vertical-align:middle;
}
.plan .course article h1 span {
    color:#fff;
    display:inline-block;
    padding:0 10px;
    margin:0;
    vertical-align:middle;
}
.plan .course article h2 {
    background:var(--green);
    font-size:1.4em;
    margin:10px 20px;
    padding:10px 5px;
}
.plan .course article h2 span {
    color:var(--green);
    margin:5px 10px;
}
.plan .course article > div {
    font-size:1.3em;
    font-weight:bold;
    text-align:center;
}
.plan .course article h3 {
    color:var(--red);
    text-align:center;
    padding:20px 5px 0 5px;
    margin:0;
}
.plan .course article h3 em {
    font-size:2em;
    font-weight:bold;
}

.plan .course.color-2 article {
    border:solid 4px #a35b5b;
}
.plan .course.color-2 article h1 {
    background:#a35b5b;
}
.plan .course.color-2 article h2 {
    background:#db8b13;
}
.plan .course.color-2 article h2 span {
    color:#db8b13;
}



/** Media Query **/

@media only screen and (max-width : 900px) {
    body #contact-buttons {
        display:none;
    }
    .plan .lunch .g6 {
        width:100%;
    }
    .plan .lunch .button {
        padding-left:20px;
        padding-right:20px;
    }
    .plan .course article h1 div {
        display:block;
        text-align:center;
        padding-right:0;
    }
}
@media only screen and (max-width : 640px) {

}