#services {
    height: 48vw;
    background-image: url("/images/weston-super-mare_half_marathon_1600x768.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

@media only screen and (min-height: 50vw) {
    #services {
        height: 72vw;
        background-image: url("/images/weston-super-mare_half_marathon_1600x1152.jpg");
    }
}

@media only screen and (min-height: 100vw) {
    #services {
        height: 120vw;
    }
}

#services > div:first-child {
    box-sizing: border-box;
    padding: 2vw 4vw;
}

#services > div:first-child h1 {
    color: #1a1a1a;
    text-align: right;
}

.accordionItem {
    display: block;
    box-sizing: border-box;
    width: 92vw;
    margin: 0 4vw 1vw 4vw;
    text-align: left;
}

.accordionHeading {
    cursor: pointer;
    background-color: #1a1a1aaa;
    color: #f2f2f2;
    padding: 1vw 4vw;
    display: block;
}

.accordionHeading:hover {
    color: #ffcc00;
}

.open .accordionHeading {
    color: #ffcc00;
}

.accordionHeading h2 {
    display: inline-block;
}

.accordionHeading img {
    display: inline-block;
    height: 3vw;
    float: right;
}

.closed .accordionHeading img {
    transform: rotate(0deg);
}

@keyframes rotateArrowDown {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(90deg);
    }
}

.open .accordionHeading img {
    animation: rotateArrowDown 0.5s ease 1 forwards;
}

@keyframes rotateArrowBack {
    from {
        transform: rotate(90deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.close .accordionHeading img {
    animation: rotateArrowBack 0.5s ease 1 forwards;
}

.accordionPanel {
    background-color: #f2f2f2aa;
    box-sizing: border-box;
    transform-origin: top;
}

.closed .accordionPanel {
    transform: scaleY(0);
    height: 0;
    padding: 0 4vw;
}

@keyframes openPanel {
    from {
        transform: scaleY(0);
        height: 0;
        padding: 0 4vw;
    }
    to {
        transform: scaleY(1);
        padding: 1vw 4vw;
    }
}

.open .accordionPanel {
    animation: openPanel 0.5s ease 1 forwards;
    padding: 1vw 4vw;
}

@keyframes closePanel {
    from {
        transform: scaleY(1);
        padding: 1vw 4vw;
    }
    to {
        transform: scaleY(0);
        height: 0;
        padding: 0 4vw;
    }
}

.close .accordionPanel {
    animation: closePanel 0.5s ease 1 forwards;
    height: 0;
    padding: 0 4vw;
}